From d39c7088998dfd33cbed08d91aae08254f55483f Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 7 Jan 2024 14:13:39 +0800 Subject: [PATCH] test: fix for next version --- package.json | 2 +- .../tests/__snapshots__/Cascader.spec.ts.snap | 6 +- src/date-picker/tests/DatePicker.spec.tsx | 11 +- .../__snapshots__/DynamicTags.spec.ts.snap | 16 +- .../tests/{Space.spec.tsx => Flex.spec.tsx} | 14 +- .../tests/__snapshots__/Flex.spec.tsx.snap | 26 +++ .../tests/__snapshots__/Space.spec.tsx.snap | 203 ------------------ .../tests/__snapshots__/Select.spec.tsx.snap | 6 +- src/tag/tests/__snapshots__/Tag.spec.ts.snap | 16 +- 9 files changed, 60 insertions(+), 240 deletions(-) rename src/flex/tests/{Space.spec.tsx => Flex.spec.tsx} (92%) create mode 100644 src/flex/tests/__snapshots__/Flex.spec.tsx.snap delete mode 100644 src/flex/tests/__snapshots__/Space.spec.tsx.snap diff --git a/package.json b/package.json index 82c5c9be21d..f2f6ea3af1d 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/cascader/tests/__snapshots__/Cascader.spec.ts.snap b/src/cascader/tests/__snapshots__/Cascader.spec.ts.snap index ffd51fd0004..1d213f971a9 100644 --- a/src/cascader/tests/__snapshots__/Cascader.spec.ts.snap +++ b/src/cascader/tests/__snapshots__/Cascader.spec.ts.snap @@ -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;"`; diff --git a/src/date-picker/tests/DatePicker.spec.tsx b/src/date-picker/tests/DatePicker.spec.tsx index 6552b3a5e8b..c9fd5b7f3cd 100644 --- a/src/date-picker/tests/DatePicker.spec.tsx +++ b/src/date-picker/tests/DatePicker.spec.tsx @@ -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( diff --git a/src/dynamic-tags/tests/__snapshots__/DynamicTags.spec.ts.snap b/src/dynamic-tags/tests/__snapshots__/DynamicTags.spec.ts.snap index 47d008a0dee..d71bbfda804 100644 --- a/src/dynamic-tags/tests/__snapshots__/DynamicTags.spec.ts.snap +++ b/src/dynamic-tags/tests/__snapshots__/DynamicTags.spec.ts.snap @@ -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);"`; diff --git a/src/flex/tests/Space.spec.tsx b/src/flex/tests/Flex.spec.tsx similarity index 92% rename from src/flex/tests/Space.spec.tsx rename to src/flex/tests/Flex.spec.tsx index 8f112f880b5..597f218e397 100644 --- a/src/flex/tests/Space.spec.tsx +++ b/src/flex/tests/Flex.spec.tsx @@ -3,11 +3,7 @@ import { h, Fragment, createCommentVNode } from 'vue' import { NFlex } from '../index' const getChildrenNode = (wrapper: VueWrapper): 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 {{ default: () => 'kirby' }} } }) - 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 {{ default: () => false && 'div' }} } }) - 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 () => { diff --git a/src/flex/tests/__snapshots__/Flex.spec.tsx.snap b/src/flex/tests/__snapshots__/Flex.spec.tsx.snap new file mode 100644 index 00000000000..bf4c5062379 --- /dev/null +++ b/src/flex/tests/__snapshots__/Flex.spec.tsx.snap @@ -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`] = `"
kirby
"`; + +exports[`n-flex render vertical flex 1`] = ` +"
+
1
+
2
+
" +`; + +exports[`n-flex should not render comment node 1`] = ` +"
+ +
" +`; + +exports[`n-flex should render while slot is Comment 1`] = ` +"
+ +
" +`; + +exports[`n-flex should render with invalidElement 1`] = `"
text1text1text1
"`; diff --git a/src/flex/tests/__snapshots__/Space.spec.tsx.snap b/src/flex/tests/__snapshots__/Space.spec.tsx.snap deleted file mode 100644 index ef226c7ea21..00000000000 --- a/src/flex/tests/__snapshots__/Space.spec.tsx.snap +++ /dev/null @@ -1,203 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`n-space render custom style space 1`] = ` -"
-
div
-
" -`; - -exports[`n-space render empty children 1`] = `""`; - -exports[`n-space render justify space 1`] = ` -"
-
-
1
-
-
-
2
-
-
" -`; - -exports[`n-space render justify space 2`] = ` -"
-
-
1
-
-
-
2
-
-
" -`; - -exports[`n-space render justify space 3`] = ` -"
-
-
1
-
-
-
2
-
-
" -`; - -exports[`n-space render justify space 4`] = ` -"
-
-
1
-
-
-
2
-
-
" -`; - -exports[`n-space render justify space 5`] = ` -"
-
-
1
-
-
-
2
-
-
" -`; - -exports[`n-space render justify space 6`] = ` -"
-
-
1
-
-
-
2
-
-
" -`; - -exports[`n-space render justify space 7`] = ` -"
-
-
-
1
-
-
-
2
-
-
-
" -`; - -exports[`n-space render justify space 8`] = ` -"
-
-
-
1
-
-
-
2
-
-
-
" -`; - -exports[`n-space render justify space 9`] = ` -"
-
-
-
1
-
-
-
2
-
-
-
" -`; - -exports[`n-space render justify space 10`] = ` -"
-
-
-
1
-
-
-
2
-
-
-
" -`; - -exports[`n-space render justify space 11`] = ` -"
-
-
-
1
-
-
-
2
-
-
-
" -`; - -exports[`n-space render justify space 12`] = ` -"
-
-
-
1
-
-
-
2
-
-
-
" -`; - -exports[`n-space render space number size 1`] = ` -"
-
kirby
-
" -`; - -exports[`n-space render space string size 1`] = ` -"
-
kirby
-
" -`; - -exports[`n-space render vertical space 1`] = ` -"
-
-
1
-
-
-
2
-
-
" -`; - -exports[`n-space should not render while slot is Comment 1`] = ` -"
- -
" -`; - -exports[`n-space should not render while v-if is false 1`] = ` -"
- -
" -`; - -exports[`n-space should render with invalidElement 1`] = ` -"
-
text1
-
text1
-
text1
-
" -`; - -exports[`n-space shound not render a container to wrap child elements 1`] = ` -"
-
1
-
2
-
" -`; diff --git a/src/select/tests/__snapshots__/Select.spec.tsx.snap b/src/select/tests/__snapshots__/Select.spec.tsx.snap index a7b65fb1a9d..cd516828fa2 100644 --- a/src/select/tests/__snapshots__/Select.spec.tsx.snap +++ b/src/select/tests/__snapshots__/Select.spec.tsx.snap @@ -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;"`; diff --git a/src/tag/tests/__snapshots__/Tag.spec.ts.snap b/src/tag/tests/__snapshots__/Tag.spec.ts.snap index ac54632b2da..2637d0b8ca2 100644 --- a/src/tag/tests/__snapshots__/Tag.spec.ts.snap +++ b/src/tag/tests/__snapshots__/Tag.spec.ts.snap @@ -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`] = `"default"`;