test: fix for next version

This commit is contained in:
07akioni 2024-01-07 14:13:39 +08:00
parent 83c09a6bf9
commit d39c708899
9 changed files with 60 additions and 240 deletions

View File

@ -143,7 +143,7 @@
"typescript": "5.3.3",
"vfonts": "^0.0.3",
"vite": "^5.0.4",
"vue": "^3.3.4",
"vue": "~3.3.4",
"vue-router": "^4.2.4",
"vue-tsc": "^1.8.10"
},

View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`n-cascader should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 28px; --n-padding-single: 0 26px 0 12px; --n-padding-multiple: 3px 26px 0 12px; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-cascader should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 28px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-cascader should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 34px; --n-padding-single: 0 26px 0 12px; --n-padding-multiple: 3px 26px 0 12px; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-cascader should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 34px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-cascader should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 15px; --n-height: 40px; --n-padding-single: 0 26px 0 12px; --n-padding-multiple: 3px 26px 0 12px; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-cascader should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 15px; --n-height: 40px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;

View File

@ -312,7 +312,8 @@ describe('n-date-picker', () => {
const wrapper = mount(NDatePicker, {
attachTo: document.body,
props: {
type: 'month'
type: 'month',
monthFormat: 'M'
}
})
@ -323,7 +324,7 @@ describe('n-date-picker', () => {
)[0].textContent
).toBe('1')
await wrapper.setProps({ monthStringType: '2-digit' })
await wrapper.setProps({ monthFormat: 'MM' })
await wrapper.find('.n-input__input').trigger('click')
expect(
document.querySelectorAll(
@ -331,7 +332,7 @@ describe('n-date-picker', () => {
)[0].textContent
).toBe('01')
await wrapper.setProps({ monthStringType: 'long' })
await wrapper.setProps({ monthFormat: 'MMMM' })
await wrapper.find('.n-input__input').trigger('click')
expect(
document.querySelectorAll(
@ -339,7 +340,7 @@ describe('n-date-picker', () => {
)[0].textContent
).toBe('January')
await wrapper.setProps({ monthStringType: 'short' })
await wrapper.setProps({ monthFormat: 'MMM' })
await wrapper.find('.n-input__input').trigger('click')
expect(
document.querySelectorAll(
@ -347,7 +348,7 @@ describe('n-date-picker', () => {
)[0].textContent
).toBe('Jan')
await wrapper.setProps({ monthStringType: 'narrow' })
await wrapper.setProps({ monthFormat: 'MMMMM' })
await wrapper.find('.n-input__input').trigger('click')
expect(
document.querySelectorAll(

View File

@ -1,17 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`n-dynamic-tags should work with \`size\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 16px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`size\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`size\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`size\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`size\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(34px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 34px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`size\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(34px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 34px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 16px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(32, 128, 240, 0.3); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(32, 128, 240, 0.18); --n-close-color-hover: rgba(32, 128, 240, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #2080f0; --n-close-icon-color-hover: #2080f0; --n-close-icon-color-pressed: #2080f0; --n-close-icon-color-disabled: #2080f0; --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 16px; --n-color: rgba(32, 128, 240, 0.1); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #2080f0; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(32, 128, 240, 0.3); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(32, 128, 240, 0.18); --n-close-color-hover: rgba(32, 128, 240, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #2080f0; --n-close-icon-color-hover: #2080f0; --n-close-icon-color-pressed: #2080f0; --n-close-icon-color-disabled: #2080f0; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(32, 128, 240, 0.1); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #2080f0; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(24, 160, 88, 0.3); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(24, 160, 88, 0.18); --n-close-color-hover: rgba(24, 160, 88, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #18a058; --n-close-icon-color-hover: #18a058; --n-close-icon-color-pressed: #18a058; --n-close-icon-color-disabled: #18a058; --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 16px; --n-color: rgba(24, 160, 88, 0.1); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #18a058; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(24, 160, 88, 0.3); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(24, 160, 88, 0.18); --n-close-color-hover: rgba(24, 160, 88, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #18a058; --n-close-icon-color-hover: #18a058; --n-close-icon-color-pressed: #18a058; --n-close-icon-color-disabled: #18a058; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(24, 160, 88, 0.1); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #18a058; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 4`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(240, 160, 32, 0.35); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(240, 160, 32, 0.18); --n-close-color-hover: rgba(240, 160, 32, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #f0a020; --n-close-icon-color-hover: #f0a020; --n-close-icon-color-pressed: #f0a020; --n-close-icon-color-disabled: #f0a020; --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 16px; --n-color: rgba(240, 160, 32, 0.12); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #f0a020; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 4`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(240, 160, 32, 0.35); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(240, 160, 32, 0.18); --n-close-color-hover: rgba(240, 160, 32, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #f0a020; --n-close-icon-color-hover: #f0a020; --n-close-icon-color-pressed: #f0a020; --n-close-icon-color-disabled: #f0a020; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(240, 160, 32, 0.12); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #f0a020; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 5`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(208, 48, 80, 0.23); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(208, 48, 80, 0.18); --n-close-color-hover: rgba(208, 48, 80, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #d03050; --n-close-icon-color-hover: #d03050; --n-close-icon-color-pressed: #d03050; --n-close-icon-color-disabled: #d03050; --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 16px; --n-color: rgba(208, 48, 80, 0.08); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #d03050; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-dynamic-tags should work with \`type\` prop 5`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(208, 48, 80, 0.23); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(208, 48, 80, 0.18); --n-close-color-hover: rgba(208, 48, 80, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #d03050; --n-close-icon-color-hover: #d03050; --n-close-icon-color-pressed: #d03050; --n-close-icon-color-disabled: #d03050; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(208, 48, 80, 0.08); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #d03050; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;

View File

@ -3,11 +3,7 @@ import { h, Fragment, createCommentVNode } from 'vue'
import { NFlex } from '../index'
const getChildrenNode = (wrapper: VueWrapper<any>): any[] => {
return (
wrapper.findAll('div').filter((v) => {
return !v.classes().includes('n-flex')
}) || []
)
return Array.from(wrapper.find('.n-flex').element.childNodes)
}
describe('n-flex', () => {
@ -32,7 +28,7 @@ describe('n-flex', () => {
return <NFlex size="large">{{ default: () => 'kirby' }}</NFlex>
}
})
expect(wrapper.attributes('style')).toContain('margin')
expect(wrapper.attributes('style')).toContain('gap')
expect(wrapper.html()).toMatchSnapshot()
wrapper.unmount()
})
@ -92,15 +88,15 @@ describe('n-flex', () => {
wrapper.unmount()
})
it('should not render while v-if is false', () => {
it('should not render comment node', () => {
const wrapper = mount({
render () {
return <NFlex>{{ default: () => false && 'div' }}</NFlex>
}
})
const childNodes = getChildrenNode(wrapper)
expect(childNodes.length).toEqual(0)
expect(wrapper.html()).toMatchSnapshot()
const childNodes = getChildrenNode(wrapper)
expect(childNodes.length).toEqual(1) // Comment node
})
it('should work with `wrap` prop', async () => {

View File

@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`n-flex render empty children 1`] = `""`;
exports[`n-flex render flex string size 1`] = `"<div role="none" class="n-flex" style="display: flex; flex-direction: row; justify-content: start; flex-wrap: wrap; gap: 12px 16px;">kirby</div>"`;
exports[`n-flex render vertical flex 1`] = `
"<div role="none" class="n-flex" style="display: flex; flex-direction: column; justify-content: start; flex-wrap: nowrap; gap: 8px 12px;">
<div>1</div>
<div>2</div>
</div>"
`;
exports[`n-flex should not render comment node 1`] = `
"<div role="none" class="n-flex" style="display: flex; flex-direction: row; justify-content: start; flex-wrap: wrap; gap: 8px 12px;">
<!---->
</div>"
`;
exports[`n-flex should render while slot is Comment 1`] = `
"<div role="none" class="n-flex" style="display: flex; flex-direction: row; justify-content: start; flex-wrap: wrap; gap: 8px 12px;">
<!--random comment text-->
</div>"
`;
exports[`n-flex should render with invalidElement 1`] = `"<div role="none" class="n-flex" style="display: flex; flex-direction: row; justify-content: start; flex-wrap: wrap; gap: 8px 12px;">text1<span>text1</span>text1</div>"`;

View File

@ -1,203 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`n-space render custom style space 1`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="background-color: red; color: yellow; max-width: 100%; padding-top: 4px; padding-bottom: 4px;">div</div>
</div>"
`;
exports[`n-space render empty children 1`] = `""`;
exports[`n-space render justify space 1`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-right: 12px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>"
`;
exports[`n-space render justify space 2`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-right: 12px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>"
`;
exports[`n-space render justify space 3`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-right: 12px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>"
`;
exports[`n-space render justify space 4`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-right: 6px; margin-left: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; margin-right: 6px; margin-left: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>"
`;
exports[`n-space render justify space 5`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-right: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; margin-left: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>"
`;
exports[`n-space render justify space 6`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-right: 6px; margin-left: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; margin-right: 6px; margin-left: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>"
`;
exports[`n-space render justify space 7`] = `
"<div class="n-config-provider">
<div role="none" class="n-space n-space--rtl" style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-left: 12px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>
</div>"
`;
exports[`n-space render justify space 8`] = `
"<div class="n-config-provider">
<div role="none" class="n-space n-space--rtl" style="display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-left: 12px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>
</div>"
`;
exports[`n-space render justify space 9`] = `
"<div class="n-config-provider">
<div role="none" class="n-space n-space--rtl" style="display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-left: 12px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>
</div>"
`;
exports[`n-space render justify space 10`] = `
"<div class="n-config-provider">
<div role="none" class="n-space n-space--rtl" style="display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-left: 6px; margin-right: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; margin-left: 6px; margin-right: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>
</div>"
`;
exports[`n-space render justify space 11`] = `
"<div class="n-config-provider">
<div role="none" class="n-space n-space--rtl" style="display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-left: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; margin-right: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>
</div>"
`;
exports[`n-space render justify space 12`] = `
"<div class="n-config-provider">
<div role="none" class="n-space n-space--rtl" style="display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-left: 6px; margin-right: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%; margin-left: 6px; margin-right: 6px; padding-top: 4px; padding-bottom: 4px;">
<div>2</div>
</div>
</div>
</div>"
`;
exports[`n-space render space number size 1`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -10px; margin-bottom: -10px;">
<div role="none" style="max-width: 100%; padding-top: 10px; padding-bottom: 10px;">kirby</div>
</div>"
`;
exports[`n-space render space string size 1`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -6px; margin-bottom: -6px;">
<div role="none" style="max-width: 100%; padding-top: 6px; padding-bottom: 6px;">kirby</div>
</div>"
`;
exports[`n-space render vertical space 1`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap;">
<div role="none" style="max-width: 100%; margin-bottom: 8px;">
<div>1</div>
</div>
<div role="none" style="max-width: 100%;">
<div>2</div>
</div>
</div>"
`;
exports[`n-space should not render while slot is Comment 1`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<!--random comment text-->
</div>"
`;
exports[`n-space should not render while v-if is false 1`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<!---->
</div>"
`;
exports[`n-space should render with invalidElement 1`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div role="none" style="max-width: 100%; margin-right: 12px; padding-top: 4px; padding-bottom: 4px;">text1</div>
<div role="none" style="max-width: 100%; margin-right: 12px; padding-top: 4px; padding-bottom: 4px;"><span>text1</span></div>
<div role="none" style="max-width: 100%; padding-top: 4px; padding-bottom: 4px;">text1</div>
</div>"
`;
exports[`n-space shound not render a container to wrap child elements 1`] = `
"<div role="none" class="n-space" style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;">
<div>1</div>
<div>2</div>
</div>"
`;

View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`n-select should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 28px; --n-padding-single: 0 26px 0 12px; --n-padding-multiple: 3px 26px 0 12px; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-select should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 28px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-select should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 34px; --n-padding-single: 0 26px 0 12px; --n-padding-multiple: 3px 26px 0 12px; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-select should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 34px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-select should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 15px; --n-height: 40px; --n-padding-single: 0 26px 0 12px; --n-padding-multiple: 3px 26px 0 12px; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;
exports[`n-select should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 15px; --n-height: 40px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px;"`;

View File

@ -1,19 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`n-tag should work with \`size\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`size\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`size\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`size\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`size\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`size\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 4`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 4`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 5`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin: 0 0 0 4px; --n-close-margin-rtl: 0 4px 0 0; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with \`type\` prop 5`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`;
exports[`n-tag should work with default slot 1`] = `"<span class="n-tag__content">default</span>"`;