From 28b383ef91d8bd4d3d098584c63962d7a449b7be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?= <32354856+baiwusanyu-c@users.noreply.github.com> Date: Mon, 4 Sep 2023 20:12:08 +0800 Subject: [PATCH] feat: collapse component added showClose prop and closeIcon slot (#208) --- .../__snapshots__/collapse.spec.ts.snap | 4 + .../__test__/collapse.close.test.svelte | 9 ++ components/Collapse/__test__/collapse.spec.ts | 27 +++- components/Collapse/src/index.svelte | 7 +- docs/components/KCollapse.md | 24 ++-- package.json | 2 +- pnpm-lock.yaml | 135 ++++-------------- 7 files changed, 87 insertions(+), 121 deletions(-) create mode 100644 components/Collapse/__test__/collapse.close.test.svelte diff --git a/components/Collapse/__test__/__snapshots__/collapse.spec.ts.snap b/components/Collapse/__test__/__snapshots__/collapse.spec.ts.snap index bd38a04f..da139344 100644 --- a/components/Collapse/__test__/__snapshots__/collapse.spec.ts.snap +++ b/components/Collapse/__test__/__snapshots__/collapse.spec.ts.snap @@ -4,8 +4,12 @@ exports[`Test: KCollapse > props: content 1`] = `"
props: show 1`] = `"
foo
"`; +exports[`Test: KCollapse > props: showClose 1`] = `"
title-content
"`; + exports[`Test: KCollapse > props: title 1`] = `"
title-content
"`; +exports[`Test: KCollapse > slot: closeIcon 1`] = `"
🍓 closeIcon
"`; + exports[`Test: KCollapse > slot: content 1`] = `"
🍞 Bread! Bread! We want to bread!
"`; exports[`Test: KCollapse > slot: title 1`] = `"
🍓 Germinal
"`; diff --git a/components/Collapse/__test__/collapse.close.test.svelte b/components/Collapse/__test__/collapse.close.test.svelte new file mode 100644 index 00000000..c2b7eb85 --- /dev/null +++ b/components/Collapse/__test__/collapse.close.test.svelte @@ -0,0 +1,9 @@ + + + +
+
🍓 closeIcon
+
+ diff --git a/components/Collapse/__test__/collapse.spec.ts b/components/Collapse/__test__/collapse.spec.ts index 44b984c8..2e7d16d6 100644 --- a/components/Collapse/__test__/collapse.spec.ts +++ b/components/Collapse/__test__/collapse.spec.ts @@ -3,6 +3,7 @@ import { afterEach, expect, test, describe, beforeEach, vi } from 'vitest'; import KCollapse from '../src/index.svelte'; import KCollapseContent from './collapse.content.test.svelte'; import KCollapseTitle from './collapse.title.test.svelte'; +import KCollapseCloseIcon from './collapse.close.test.svelte'; let host: HTMLElement; const initHost = () => { @@ -32,6 +33,19 @@ describe('Test: KCollapse', () => { expect(host.innerHTML).matchSnapshot(); }); + test('props: showClose', async () => { + const instance = new KCollapse({ + target: host, + props: { + title: 'title-content', + showClose: false + } + }); + expect(instance).toBeTruthy(); + expect(host.innerHTML.includes('k-icon--bas')).not.toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + test('props: content', async () => { const instance = new KCollapse({ target: host, @@ -96,7 +110,7 @@ describe('Test: KCollapse', () => { target: host }); expect(instance).toBeTruthy(); - expect(document.getElementById('custom_title')); + expect(document.getElementById('custom_title')).toBeTruthy(); expect(host.innerHTML).matchSnapshot(); }); @@ -105,7 +119,16 @@ describe('Test: KCollapse', () => { target: host }); expect(instance).toBeTruthy(); - expect(document.getElementById('custom_content')); + expect(document.getElementById('custom_content')).toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + + test('slot: closeIcon', async () => { + const instance = new KCollapseCloseIcon({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.innerHTML.includes('🍓 closeIcon')).toBeTruthy(); expect(host.innerHTML).matchSnapshot(); }); }); diff --git a/components/Collapse/src/index.svelte b/components/Collapse/src/index.svelte index f9fbff56..f75dbdfa 100644 --- a/components/Collapse/src/index.svelte +++ b/components/Collapse/src/index.svelte @@ -10,6 +10,7 @@ export let attrs = {}; export let cls: ClassValue = ''; export let show = false; + export let showClose = true; const dispatch = createEventDispatcher(); let showInner = show; @@ -36,7 +37,11 @@ {title} - + + {#if showClose} + + {/if} +
{#if showInner}
` | `{}` | Additional attributes | +| Name | Type | Default | Description | +| --------- | ------------------------ | ------- | ------------------------------------ | +| title | `string` | `-` | Content of Collapse Item title | +| content | `string` | `-` | Content of Collapse Item | +| show | `boolean` | `false` | Expand the Collapse | +| showClose | `boolean` | `true` | Determine whether display close ionc | +| cls | `string` | `-` | Additional class | +| attrs | `Record` | `{}` | Additional attributes | ## Collapse Events @@ -55,7 +56,8 @@ You can render content through slots ## Collapse Slots -| Name | Description | -| ------- | ------------------------------------- | -| title | Customize Collapse Item title content | -| content | Customize Collapse Item content | +| Name | Description | +| --------- | ------------------------------------- | +| title | Customize Collapse Item title content | +| content | Customize Collapse Item content | +| closeIcon | Customize close icon | diff --git a/package.json b/package.json index 508b6f48..3a7ee02c 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "vitest": "^0.34.1" }, "lint-staged": { - "*.{svelte,js,ts,jsx,tsx,md,json}": [ + "*.{svelte,js,ts,jsx,tsx,json}": [ "prettier --write", "eslint" ] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ecb5adf6..de38b1c3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' settings: autoInstallPeers: true @@ -246,7 +246,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -274,7 +274,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -305,7 +305,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -330,7 +330,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -358,7 +358,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -386,7 +386,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -414,7 +414,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -442,7 +442,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -467,7 +467,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -492,7 +492,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -517,7 +517,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -548,7 +548,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -570,7 +570,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -592,7 +592,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -620,7 +620,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -642,7 +642,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -667,7 +667,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -701,7 +701,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -735,7 +735,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -760,7 +760,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -813,7 +813,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -838,7 +838,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -863,7 +863,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -885,7 +885,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -916,7 +916,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -941,7 +941,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -966,7 +966,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -991,7 +991,7 @@ importers: version: 5.0.0 svelte-strip: specifier: ^2.0.0 - version: 2.0.0(postcss@8.4.27)(svelte@3.59.2) + version: 2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3) tslib: specifier: ^2.6.1 version: 2.6.1 @@ -6249,54 +6249,6 @@ packages: typescript: 5.1.6 dev: true - /svelte-preprocess@5.0.4(postcss@8.4.27)(svelte@3.59.2)(typescript@5.1.6): - resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==} - engines: {node: '>= 14.10.0'} - requiresBuild: true - peerDependencies: - '@babel/core': ^7.10.2 - coffeescript: ^2.5.1 - less: ^3.11.3 || ^4.0.0 - postcss: ^7 || ^8 - postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0 - pug: ^3.0.0 - sass: ^1.26.8 - stylus: ^0.55.0 - sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0 - svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 - typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0' - peerDependenciesMeta: - '@babel/core': - optional: true - coffeescript: - optional: true - less: - optional: true - postcss: - optional: true - postcss-load-config: - optional: true - pug: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - typescript: - optional: true - dependencies: - '@types/pug': 2.0.6 - detect-indent: 6.1.0 - magic-string: 0.27.0 - postcss: 8.4.27 - sorcery: 0.11.0 - strip-indent: 3.0.0 - svelte: 3.59.2 - typescript: 5.1.6 - dev: true - /svelte-preprocess@5.0.4(postcss@8.4.27)(svelte@4.0.0-next.3)(typescript@5.1.6): resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==} engines: {node: '>= 14.10.0'} @@ -6393,30 +6345,6 @@ packages: typescript: 5.1.6 dev: true - /svelte-strip@2.0.0(postcss@8.4.27)(svelte@3.59.2): - resolution: {integrity: sha512-RZ8swt0ddE22ebZvFpMhW/x9rLIAwCZtWWnb5oohQEYcyuxzvzXwxImjFQ8DINXXMbvw6PB/NfnzDmHqMVrdbw==} - hasBin: true - peerDependencies: - svelte: ^3.0.0 - dependencies: - glob: 9.3.5 - minimatch: 7.4.6 - svelte: 3.59.2 - svelte-preprocess: 5.0.4(postcss@8.4.27)(svelte@3.59.2)(typescript@5.1.6) - typescript: 5.1.6 - yargs: 17.7.2 - transitivePeerDependencies: - - '@babel/core' - - coffeescript - - less - - postcss - - postcss-load-config - - pug - - sass - - stylus - - sugarss - dev: true - /svelte-strip@2.0.0(postcss@8.4.27)(svelte@4.0.0-next.3): resolution: {integrity: sha512-RZ8swt0ddE22ebZvFpMhW/x9rLIAwCZtWWnb5oohQEYcyuxzvzXwxImjFQ8DINXXMbvw6PB/NfnzDmHqMVrdbw==} hasBin: true @@ -6453,11 +6381,6 @@ packages: typescript: 5.1.6 dev: true - /svelte@3.59.2: - resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==} - engines: {node: '>= 8'} - dev: true - /svelte@4.0.0-next.3: resolution: {integrity: sha512-NogP/EuGk+xCzqye8hoj/Wz1OoTCTp1yQpsfAIkATlYct2xqoQADB1UjPLm/plQjhGQrZcODW2MHCiYsDTQWtA==} engines: {node: '>=16'}