diff --git a/.eslintignore b/.eslintignore index 31ef16ba..420b5f36 100644 --- a/.eslintignore +++ b/.eslintignore @@ -6,10 +6,12 @@ node_modules .env .env.* !.env.example +**/dist +rollup.config.js +play/**/* +e2e/**/* # Ignore files for PNPM, NPM and YARN pnpm-lock.yaml package-lock.json yarn.lock -**/dist -rollup.config.js diff --git a/.prettierignore b/.prettierignore index 38972655..e49b9be0 100644 --- a/.prettierignore +++ b/.prettierignore @@ -6,6 +6,8 @@ node_modules .env .env.* !.env.example +play/**/* +e2e/**/* # Ignore files for PNPM, NPM and YARN pnpm-lock.yaml diff --git a/components/Carousel/__test__/__snapshots__/carousel.spec.ts.snap b/components/Carousel/__test__/__snapshots__/carousel.spec.ts.snap new file mode 100644 index 00000000..5c5871b8 --- /dev/null +++ b/components/Carousel/__test__/__snapshots__/carousel.spec.ts.snap @@ -0,0 +1,27 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Test: KCarousel > event: change event caused by api > {"index":0,"oldIndex":2} 1`] = `"
{\\"index\\":2,\\"oldIndex\\":1}
"`; + +exports[`Test: KCarousel > event: change event caused by api > {"index":2,"oldIndex":0} 1`] = `"
{\\"index\\":2,\\"oldIndex\\":1}
"`; + +exports[`Test: KCarousel > event: change event caused by api > {"index":2,"oldIndex":1} 1`] = `"
{\\"index\\":2,\\"oldIndex\\":1}
"`; + +exports[`Test: KCarousel > event: change event caused by arrow and indicators > {"index":1,"oldIndex":2} 1`] = `"
{\\"index\\":2,\\"oldIndex\\":1}
"`; + +exports[`Test: KCarousel > event: change event caused by arrow and indicators > {"index":2,"oldIndex":1} 1`] = `"
{\\"index\\":2,\\"oldIndex\\":1}
"`; + +exports[`Test: KCarousel > event: change event caused by arrow and indicators > {"index":2,"oldIndex":1} 2`] = `"
{\\"index\\":2,\\"oldIndex\\":1}
"`; + +exports[`Test: KCarousel > event: change event caused by auto play > {"index":1,"oldIndex":2} 1`] = `"
{\\"index\\":2,\\"oldIndex\\":1}
"`; + +exports[`Test: KCarousel > event: change event caused by auto play > {"index":2,"oldIndex":1} 1`] = `"
{\\"index\\":2,\\"oldIndex\\":1}
"`; + +exports[`Test: KCarousel > props: arrow is always 1`] = `"
"`; + +exports[`Test: KCarousel > props: arrow is never 1`] = `"
"`; + +exports[`Test: KCarousel > props: cls 1`] = `"
"`; + +exports[`Test: KCarousel > props: initialIndex 1`] = `"
"`; + +exports[`Test: KCarousel > slot: custom arrow indicators 1`] = `"

0

1

2

3

4

5

🏀
🏀
"`; diff --git a/components/Carousel/__test__/carousel.spec.ts b/components/Carousel/__test__/carousel.spec.ts new file mode 100644 index 00000000..636a0bfa --- /dev/null +++ b/components/Carousel/__test__/carousel.spec.ts @@ -0,0 +1,288 @@ +import { afterEach, expect, test, describe, beforeEach, vi } from 'vitest'; +import KCarousel from '../src'; +import KCarouselInit from './fixture/init.svelte'; +import KCarouselTriggerClick from './fixture/trigger.click.svelte'; +import KCarouselTriggerHover from './fixture/trigger.hover.svelte'; +import KCarouselAlways from './fixture/arrow.always.svelte'; +import KCarouselHover from './fixture/arrow.hover.svelte'; +import KCarouselNever from './fixture/arrow.never.svelte'; +import KCarouselLoop from './fixture/loop.svelte'; +import KCarouselPlay from './fixture/play.svelte'; +import KCarouselApiNext from './fixture/api.next.svelte'; +import KCarouselApiPrev from './fixture/api.prev.svelte'; +import KCarouselApiGoto from './fixture/api.goto.svelte'; +import KCarouselEvtApi from './fixture/event.api.svelte'; +import KCarouselEvt from './fixture/event.svelte'; +import KCarouselEvtPlay from './fixture/event.play.svelte'; +import KCarouselCustom from './fixture/custom.svelte'; +import { tick } from 'svelte'; +let host; + +const initHost = () => { + host = globalThis.document.createElement('div'); + host.setAttribute('id', 'host'); + globalThis.document.body.appendChild(host); +}; +beforeEach(() => { + initHost(); + vi.useFakeTimers(); +}); +afterEach(() => { + host.remove(); + vi.restoreAllMocks(); +}); + +describe('Test: KCarousel', () => { + vi.mock('svelte', async () => { + const actual = (await vi.importActual('svelte')) as object; + return { + ...actual, + // @ts-ignore + onMount: (await import('svelte/internal')).onMount + }; + }); + test('props: cls', async () => { + // @ts-ignore + const instance = new KCarousel({ + target: host, + props: { + count: 3, + initialIndex: 0, + cls: 'k-carousel--test' + } + }); + expect(instance).toBeTruthy(); + expect(host!.innerHTML.includes('k-carousel--test')).toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + + test('props: initialIndex', async () => { + // @ts-ignore + const instance = new KCarouselInit({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + + test('props: trigger indicators click', async () => { + // @ts-ignore + const instance = new KCarouselTriggerClick({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + const indicatorsElms = host.querySelectorAll('.k-carousel-indicators-item'); + indicatorsElms[2].click(); + await tick(); + expect(host.querySelector('[data-active="2"]')).toBeTruthy(); + }); + + test('props: trigger indicators hover', async () => { + // @ts-ignore + const instance = new KCarouselTriggerHover({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + const indicatorsElms = host.querySelectorAll('.k-carousel-indicators-item'); + indicatorsElms[2].dispatchEvent(new Event('mouseenter', { bubbles: true })); + await tick(); + expect(host.querySelector('[data-active="2"]')).toBeTruthy(); + }); + + test('props: arrow is always', async () => { + // @ts-ignore + const instance = new KCarouselAlways({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('.k-carousel-arrow-prev')).toBeTruthy(); + expect(host.querySelector('.k-carousel-arrow-next')).toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + + test('props: arrow is hover', async () => { + // @ts-ignore + const instance = new KCarouselHover({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('.k-carousel-arrow-prev')).not.toBeTruthy(); + expect(host.querySelector('.k-carousel-arrow-next')).not.toBeTruthy(); + const carouselElm = host.querySelector('.k-carousel'); + carouselElm.dispatchEvent(new Event('mouseenter', { bubbles: true })); + await tick(); + expect(host.querySelector('.k-carousel-arrow-prev')).toBeTruthy(); + expect(host.querySelector('.k-carousel-arrow-next')).toBeTruthy(); + }); + + test('props: arrow is never', async () => { + // @ts-ignore + const instance = new KCarouselNever({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('.k-carousel-arrow-prev')).not.toBeTruthy(); + expect(host.querySelector('.k-carousel-arrow-next')).not.toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + + test('props: loop', async () => { + // @ts-ignore + const instance = new KCarouselLoop({ + target: host + }); + expect(instance).toBeTruthy(); + const carouselElm1 = host.querySelector('[test-id="loop_open"]'); + const carouselElm2 = host.querySelector('[test-id="loop_close"]'); + expect(carouselElm1.querySelector('[data-active="2"]')).toBeTruthy(); + expect(carouselElm2.querySelector('[data-active="2"]')).toBeTruthy(); + + const nextBtn1 = carouselElm1.querySelector('.k-carousel-arrow-next'); + const nextBtn2 = carouselElm2.querySelector('.k-carousel-arrow-next'); + nextBtn1.click(); + await tick(); + await vi.advanceTimersByTimeAsync(300); + expect(carouselElm1.querySelector('[data-active="0"]')).toBeTruthy(); + nextBtn2.click(); + await tick(); + await vi.advanceTimersByTimeAsync(300); + expect(carouselElm2.querySelector('[data-active="2"]')).toBeTruthy(); + + const prevBtn1 = carouselElm1.querySelector('.k-carousel-arrow-prev'); + prevBtn1.click(); + await tick(); + await vi.advanceTimersByTimeAsync(300); + expect(carouselElm1.querySelector('[data-active="2"]')).toBeTruthy(); + }); + + test('props: autoplay & interval & pauseOnHover', async () => { + // @ts-ignore + const instance = new KCarouselPlay({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + await tick(); + await vi.advanceTimersByTimeAsync(300); + expect(host.querySelector('[data-active="2"]')).toBeTruthy(); + await tick(); + await vi.advanceTimersByTimeAsync(300); + expect(host.querySelector('[data-active="0"]')).toBeTruthy(); + await tick(); + await vi.advanceTimersByTimeAsync(300); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + + const carouselElm = host.querySelector('.k-carousel'); + carouselElm.dispatchEvent(new Event('mouseenter', { bubbles: true })); + await tick(); + await vi.advanceTimersByTimeAsync(600); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + }); + + test('api: goto', async () => { + // @ts-ignore + const instance = new KCarouselApiGoto({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + const btn = host.querySelector('button'); + btn.click(); + await tick(); + expect(host.querySelector('[data-active="2"]')).toBeTruthy(); + }); + + test('api: prev', async () => { + // @ts-ignore + const instance = new KCarouselApiPrev({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + const btn = host.querySelector('button'); + btn.click(); + await tick(); + expect(host.querySelector('[data-active="0"]')).toBeTruthy(); + }); + + test('api: next', async () => { + // @ts-ignore + const instance = new KCarouselApiNext({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + const btn = host.querySelector('button'); + btn.click(); + await tick(); + expect(host.querySelector('[data-active="2"]')).toBeTruthy(); + }); + test('event: change event caused by arrow and indicators', async () => { + // @ts-ignore + const instance = new KCarouselEvt({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.querySelector('[data-active="1"]')).toBeTruthy(); + const indicatorsElms = host.querySelectorAll('.k-carousel-indicators-item'); + indicatorsElms[2].click(); + await tick(); + expect(host.innerHTML).toMatchSnapshot('{"index":2,"oldIndex":1}'); + const nextBtn = host.querySelector('.k-carousel-arrow-next'); + nextBtn.click(); + await tick(); + expect(host.innerHTML).toMatchSnapshot('{"index":1,"oldIndex":2}'); + const prevBtn = host.querySelector('.k-carousel-arrow-prev'); + prevBtn.click(); + await tick(); + expect(host.innerHTML).toMatchSnapshot('{"index":2,"oldIndex":1}'); + }); + + test('event: change event caused by auto play', async () => { + // @ts-ignore + const instance = new KCarouselEvtPlay({ + target: host + }); + expect(instance).toBeTruthy(); + await tick(); + await vi.advanceTimersByTimeAsync(300); + expect(host.innerHTML).toMatchSnapshot('{"index":2,"oldIndex":1}'); + await tick(); + await vi.advanceTimersByTimeAsync(300); + expect(host.innerHTML).toMatchSnapshot('{"index":1,"oldIndex":2}'); + }); + + test('event: change event caused by api', async () => { + // @ts-ignore + const instance = new KCarouselEvtApi({ + target: host + }); + expect(instance).toBeTruthy(); + const btnGoto = host.querySelector('#btn_goto'); + btnGoto.click(); + await tick(); + expect(host.innerHTML).toMatchSnapshot('{"index":2,"oldIndex":1}'); + + const btnNext = host.querySelector('#btn_next'); + btnNext.click(); + await tick(); + expect(host.innerHTML).toMatchSnapshot('{"index":0,"oldIndex":2}'); + + const btnPrev = host.querySelector('#btn_prev'); + btnPrev.click(); + await tick(); + expect(host.innerHTML).toMatchSnapshot('{"index":2,"oldIndex":0}'); + }); + + test('slot: custom arrow indicators ', async () => { + // @ts-ignore + const instance = new KCarouselCustom({ + target: host + }); + expect(instance).toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); +}); diff --git a/components/Carousel/__test__/fixture/api.goto.svelte b/components/Carousel/__test__/fixture/api.goto.svelte new file mode 100644 index 00000000..331b552f --- /dev/null +++ b/components/Carousel/__test__/fixture/api.goto.svelte @@ -0,0 +1,14 @@ + + + +
+
+
+ + diff --git a/components/Carousel/__test__/fixture/api.next.svelte b/components/Carousel/__test__/fixture/api.next.svelte new file mode 100644 index 00000000..2bb87c7c --- /dev/null +++ b/components/Carousel/__test__/fixture/api.next.svelte @@ -0,0 +1,14 @@ + + + +
+
+
+ + diff --git a/components/Carousel/__test__/fixture/api.prev.svelte b/components/Carousel/__test__/fixture/api.prev.svelte new file mode 100644 index 00000000..1e444418 --- /dev/null +++ b/components/Carousel/__test__/fixture/api.prev.svelte @@ -0,0 +1,14 @@ + + + +
+
+
+ + diff --git a/components/Carousel/__test__/fixture/arrow.always.svelte b/components/Carousel/__test__/fixture/arrow.always.svelte new file mode 100644 index 00000000..c02e18bd --- /dev/null +++ b/components/Carousel/__test__/fixture/arrow.always.svelte @@ -0,0 +1,9 @@ + + + +
+
+
+ diff --git a/components/Carousel/__test__/fixture/arrow.hover.svelte b/components/Carousel/__test__/fixture/arrow.hover.svelte new file mode 100644 index 00000000..77d4c342 --- /dev/null +++ b/components/Carousel/__test__/fixture/arrow.hover.svelte @@ -0,0 +1,9 @@ + + + +
+
+
+ diff --git a/components/Carousel/__test__/fixture/arrow.never.svelte b/components/Carousel/__test__/fixture/arrow.never.svelte new file mode 100644 index 00000000..62de4b0c --- /dev/null +++ b/components/Carousel/__test__/fixture/arrow.never.svelte @@ -0,0 +1,9 @@ + + + +
+
+
+ diff --git a/components/Carousel/__test__/fixture/custom.svelte b/components/Carousel/__test__/fixture/custom.svelte new file mode 100644 index 00000000..693c40a0 --- /dev/null +++ b/components/Carousel/__test__/fixture/custom.svelte @@ -0,0 +1,67 @@ + + + +

0

+

1

+

2

+

3

+

4

+

5

+
+ +
+ {#each [...Array(count).keys()] as item} + + {/each} +
+ +
+
+ + + + +
+ + + diff --git a/components/Carousel/__test__/fixture/event.api.svelte b/components/Carousel/__test__/fixture/event.api.svelte new file mode 100644 index 00000000..e546c75d --- /dev/null +++ b/components/Carousel/__test__/fixture/event.api.svelte @@ -0,0 +1,31 @@ + + + +
+
+
+ +
{res}
+ + + diff --git a/components/Carousel/__test__/fixture/event.play.svelte b/components/Carousel/__test__/fixture/event.play.svelte new file mode 100644 index 00000000..9257c67e --- /dev/null +++ b/components/Carousel/__test__/fixture/event.play.svelte @@ -0,0 +1,14 @@ + + + +
+
+
+ +
{res}
diff --git a/components/Carousel/__test__/fixture/event.svelte b/components/Carousel/__test__/fixture/event.svelte new file mode 100644 index 00000000..884def12 --- /dev/null +++ b/components/Carousel/__test__/fixture/event.svelte @@ -0,0 +1,21 @@ + + + +
+
+
+ +
{res}
diff --git a/components/Carousel/__test__/fixture/init.svelte b/components/Carousel/__test__/fixture/init.svelte new file mode 100644 index 00000000..882ff838 --- /dev/null +++ b/components/Carousel/__test__/fixture/init.svelte @@ -0,0 +1,9 @@ + + + +
+
+
+ diff --git a/components/Carousel/__test__/fixture/loop.svelte b/components/Carousel/__test__/fixture/loop.svelte new file mode 100644 index 00000000..cb10ec4e --- /dev/null +++ b/components/Carousel/__test__/fixture/loop.svelte @@ -0,0 +1,22 @@ + + + +
+
+
+ + + +
+
+
+ diff --git a/components/Carousel/__test__/fixture/play.svelte b/components/Carousel/__test__/fixture/play.svelte new file mode 100644 index 00000000..53bd144a --- /dev/null +++ b/components/Carousel/__test__/fixture/play.svelte @@ -0,0 +1,9 @@ + + + +
+
+
+ diff --git a/components/Carousel/__test__/fixture/trigger.click.svelte b/components/Carousel/__test__/fixture/trigger.click.svelte new file mode 100644 index 00000000..71e50573 --- /dev/null +++ b/components/Carousel/__test__/fixture/trigger.click.svelte @@ -0,0 +1,9 @@ + + + +
+
+
+ diff --git a/components/Carousel/__test__/fixture/trigger.hover.svelte b/components/Carousel/__test__/fixture/trigger.hover.svelte new file mode 100644 index 00000000..b1f01aa0 --- /dev/null +++ b/components/Carousel/__test__/fixture/trigger.hover.svelte @@ -0,0 +1,9 @@ + + + +
+
+
+ diff --git a/components/Carousel/package.json b/components/Carousel/package.json new file mode 100644 index 00000000..03b478a5 --- /dev/null +++ b/components/Carousel/package.json @@ -0,0 +1,48 @@ +{ + "name": "@ikun-ui/carousel", + "version": "0.0.16", + "type": "module", + "main": "src/index.ts", + "types": "src/index.d.ts", + "svelte": "src/index.ts", + "keywords": [ + "svelte", + "svelte3", + "web component", + "component", + "react", + "vue", + "svelte-kit", + "dx" + ], + "files": [ + "dist", + "package.json" + ], + "scripts": { + "build": "npm run build:js && npm run build:svelte", + "build:js": "tsc -p . --outDir dist/ --rootDir src/", + "build:svelte": "svelte-strip strip src/ dist", + "publish:pre": "node ../../scripts/pre-publish.js", + "publish:npm": "pnpm run publish:pre && pnpm publish --no-git-checks --access public" + }, + "publishConfig": { + "access": "public", + "main": "dist/index.js", + "module": "dist/index.js", + "svelte": "dist/index.js", + "types": "dist/index.d.ts" + }, + "dependencies": { + "@ikun-ui/icon": "workspace:*", + "@ikun-ui/utils": "workspace:*", + "baiwusanyu-utils": "^1.0.16", + "clsx": "^2.0.0" + }, + "devDependencies": { + "@tsconfig/svelte": "^5.0.2", + "svelte-strip": "^2.0.0", + "tslib": "^2.6.2", + "typescript": "^5.3.2" + } +} diff --git a/components/Carousel/src/arrow.svelte b/components/Carousel/src/arrow.svelte new file mode 100644 index 00000000..65f0459a --- /dev/null +++ b/components/Carousel/src/arrow.svelte @@ -0,0 +1,86 @@ + + +
+ + {#if show} + + {/if} + + + {#if show} + + {/if} + +
diff --git a/components/Carousel/src/index.svelte b/components/Carousel/src/index.svelte new file mode 100644 index 00000000..f15a1322 --- /dev/null +++ b/components/Carousel/src/index.svelte @@ -0,0 +1,203 @@ + + + diff --git a/components/Carousel/src/index.ts b/components/Carousel/src/index.ts new file mode 100644 index 00000000..606275eb --- /dev/null +++ b/components/Carousel/src/index.ts @@ -0,0 +1,8 @@ +/// +import Carousel from './index.svelte'; +import Arrow from './arrow.svelte'; +import Indicators from './indicators.svelte'; +export { Carousel as KCarousel }; +export { Arrow as KCarouselArrow }; +export { Indicators as KIndicators }; +export default Carousel; diff --git a/components/Carousel/src/indicators.svelte b/components/Carousel/src/indicators.svelte new file mode 100644 index 00000000..42e67117 --- /dev/null +++ b/components/Carousel/src/indicators.svelte @@ -0,0 +1,47 @@ + + +
+ + {#each arr as item} + + {/each} + +
diff --git a/components/Carousel/src/types.d.ts b/components/Carousel/src/types.d.ts new file mode 100644 index 00000000..fc4683d1 --- /dev/null +++ b/components/Carousel/src/types.d.ts @@ -0,0 +1,34 @@ +/// +import type { ClassValue } from 'clsx'; +export type KCarouselProps = { + initialIndex: number; + height: number; + trigger: 'click' | 'hover'; + arrow: 'always' | 'hover' | 'never'; + loop: boolean; + autoplay: boolean; + interval: number; + pauseOnHover: boolean; + count: number; + cls: ClassValue; + attrs: Record; +}; + +export type KCarouselArrowProps = { + defaultPageIndex: number; + show: boolean; + count: number; + loop: boolean; + cls: ClassValue; + attrs: Record; +}; + +export type KIndicatorsProps = { + defaultPageIndex: number; + trigger: 'click' | 'hover'; + count: number; + cls: ClassValue; + attrs: Record; +}; + +// TODO: KCarousel - props direction åą•įĪšįš„æ–đ向(next version enhancement) diff --git a/components/Carousel/tsconfig.json b/components/Carousel/tsconfig.json new file mode 100644 index 00000000..fe0d7c4f --- /dev/null +++ b/components/Carousel/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + + "compilerOptions": { + "noImplicitAny": true, + "strict": true, + "declaration": true + }, + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"], + "exclude": ["node_modules/*", "**/*.spec.ts"] +} diff --git a/components/index.ts b/components/index.ts index 0a83b24a..18669998 100644 --- a/components/index.ts +++ b/components/index.ts @@ -49,3 +49,4 @@ export * from '@ikun-ui/dropdown'; export * from '@ikun-ui/tabs'; export * from '@ikun-ui/descriptions'; export * from '@ikun-ui/descriptions-item'; +export * from '@ikun-ui/carousel'; diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index a948907d..681ae1ff 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -102,6 +102,10 @@ const components = [ text: 'Card', link: '/components/KCard' }, + { + text: 'Carousel', + link: '/components/KCarousel' + }, { text: 'Collapse', link: '/components/KCollapse' diff --git a/docs/components/KCarousel.md b/docs/components/KCarousel.md new file mode 100644 index 00000000..1ab26e5f --- /dev/null +++ b/docs/components/KCarousel.md @@ -0,0 +1,85 @@ +--- +title: KCarousel +lang: en-US +--- + +# KCarousel + +A carousel component + +## Install + +::: code-group + +```bash [pnpm] +pnpm add @ikun-ui/carousel +``` + +```bash [yarn] +yarn add @ikun-ui/carousel +``` + +```bash [npm] +npm install @ikun-ui/carousel +``` + +::: + +## Basic usage + +Basic usage. + + + +## Indicator + +Indicators can be displayed inside the carousel + + + +## Arrows + +The arrow property determines when arrows are displayed. + + + +## Auto height + +When the height property is not set, the carousel component dynamically changes height according to the content. + + + +## Custom indicator and arrow + +Sometimes you may want to customize indicator and arrow. + + + +## Carousel Props + +| Name | Type | Default | Description | +| ------------ | -------------------------------- | ------- | -------------------------------------------------------------------------------------------- | +| height | `number` | `'-` | Height of the carousel. | +| initialIndex | `number` | `0` | The default display index of carousel (starting from 0). | +| count | `number` | `0` | Specifies the number of carousels to display, it is required. | +| arrow | `'always' \| 'hover' \| 'never'` | `hover` | How the arrow paginator is displayed. | +| loop | `boolean` | `true` | Whether to loop play. | +| autoplay | `boolean` | `true` | Whether to play through automatic page turning. | +| pauseOnHover | `boolean` | `true` | When the mouse moves over the carousel, the automatic page turning playback will be paused.. | +| interval | `number` | `3000` | Automatic page turning playback interval (unit ms). | +| cls | `string` | `''` | Additional class for component | +| attrs | `Record` | `{}` | Additional attributes | + +## Carousel Events + +| Name | Description | Type | +| ------ | ---------------------------------- | --------------------------------------------------- | +| change | Triggered when a page turn occurs. | `(data: { index: number, oldIndex:number })=> void` | + +## Carousel Slots + +| Name | Description | +| ---------- | --------------------------------------------------------------------------------- | +| default | Customize default content | +| indicators | Customize indicators content, Use with KIndicators to implement custom indicators | +| arrow | Customize arrow content, Use with KCarouselArrow to implement a customized arrow | diff --git a/docs/example/carousel/arrows.svelte b/docs/example/carousel/arrows.svelte new file mode 100644 index 00000000..efa61489 --- /dev/null +++ b/docs/example/carousel/arrows.svelte @@ -0,0 +1,33 @@ + + +

Trigger is always

+ +

0

+

1

+

2

+

3

+

4

+

5

+ + +

Arrow is hover

+ +

0

+

1

+

2

+

3

+

4

+

5

+ + +

Arrow is never

+ +

0

+

1

+

2

+

3

+

4

+

5

+ diff --git a/docs/example/carousel/basic.svelte b/docs/example/carousel/basic.svelte new file mode 100644 index 00000000..d838b151 --- /dev/null +++ b/docs/example/carousel/basic.svelte @@ -0,0 +1,12 @@ + + + +

0

+

1

+

2

+

3

+

4

+

5

+ diff --git a/docs/example/carousel/custom.svelte b/docs/example/carousel/custom.svelte new file mode 100644 index 00000000..ab6880d1 --- /dev/null +++ b/docs/example/carousel/custom.svelte @@ -0,0 +1,67 @@ + + + +

0

+

1

+

2

+

3

+

4

+

5

+
+ +
+ {#each [...Array(count).keys()] as item} + + {/each} +
+ +
+
+ + + + +
+ + + diff --git a/docs/example/carousel/height.svelte b/docs/example/carousel/height.svelte new file mode 100644 index 00000000..2c02f8a9 --- /dev/null +++ b/docs/example/carousel/height.svelte @@ -0,0 +1,12 @@ + + + +

0

+

1

+

2

+

3

+

4

+

5

+ diff --git a/docs/example/carousel/indicator.svelte b/docs/example/carousel/indicator.svelte new file mode 100644 index 00000000..08cf02ca --- /dev/null +++ b/docs/example/carousel/indicator.svelte @@ -0,0 +1,23 @@ + + +

Trigger is click

+ +

0

+

1

+

2

+

3

+

4

+

5

+ + +

Trigger is hover

+ +

0

+

1

+

2

+

3

+

4

+

5

+ diff --git a/package.json b/package.json index 638cdad5..2dcfe287 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "clean:deps": "node scripts/clean-deps.js && node scripts/clean-root-deps.js", "prepare": "npx simple-git-hooks", "update:deps": "npx taze -w -r major && pnpm run init", - "create:new:comp": "node scripts/new-component.js tabs" + "create:new:comp": "node scripts/new-component.js carousel" }, "peerDependencies": { "baiwusanyu-utils": "^1.0.14", @@ -130,7 +130,8 @@ "@ikun-ui/watermark": "workspace:*", "baiwusanyu-utils": "^1.0.16", "clsx": "^2.0.0", - "@ikun-ui/tabs": "workspace:*" + "@ikun-ui/tabs": "workspace:*", + "@ikun-ui/carousel": "workspace:*" }, "devDependencies": { "@sveltejs/adapter-auto": "^2.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f385515f..0a23cdd2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ importers: '@ikun-ui/card': specifier: workspace:* version: link:components/Card + '@ikun-ui/carousel': + specifier: workspace:* + version: link:components/Carousel '@ikun-ui/checkbox': specifier: workspace:* version: link:components/Checkbox @@ -544,6 +547,34 @@ importers: specifier: ^5.3.2 version: 5.3.2 + components/Carousel: + dependencies: + '@ikun-ui/icon': + specifier: workspace:* + version: link:../Icon + '@ikun-ui/utils': + specifier: workspace:* + version: link:../../utils + baiwusanyu-utils: + specifier: ^1.0.16 + version: 1.0.16(ansi-colors@4.1.3)(moment@2.29.4) + clsx: + specifier: ^2.0.0 + version: 2.0.0 + devDependencies: + '@tsconfig/svelte': + specifier: ^5.0.2 + version: 5.0.2 + svelte-strip: + specifier: ^2.0.0 + version: 2.0.0(@babel/core@7.23.5)(postcss@8.4.32)(svelte@3.59.2) + tslib: + specifier: ^2.6.2 + version: 2.6.2 + typescript: + specifier: ^5.3.2 + version: 5.3.2 + components/Checkbox: dependencies: '@ikun-ui/checkbox-group': @@ -5248,6 +5279,16 @@ packages: once: 1.4.0 dev: true + /glob@9.3.5: + resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==} + engines: {node: '>=16 || 14 >=14.17'} + dependencies: + fs.realpath: 1.0.0 + minimatch: 8.0.4 + minipass: 4.2.8 + path-scurry: 1.10.1 + dev: true + /globals@11.12.0: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} engines: {node: '>=4'} @@ -6066,7 +6107,7 @@ packages: /lower-case@2.0.2: resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} dependencies: - tslib: registry.npmjs.org/tslib@2.6.2 + tslib: 2.6.2 dev: true /lru-cache@10.0.1: @@ -6214,6 +6255,20 @@ packages: brace-expansion: 2.0.1 dev: true + /minimatch@7.4.6: + resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==} + engines: {node: '>=10'} + dependencies: + brace-expansion: 2.0.1 + dev: true + + /minimatch@8.0.4: + resolution: {integrity: sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==} + engines: {node: '>=16 || 14 >=14.17'} + dependencies: + brace-expansion: 2.0.1 + dev: true + /minimatch@9.0.3: resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==} engines: {node: '>=16 || 14 >=14.17'} @@ -6232,6 +6287,11 @@ packages: yallist: 4.0.0 dev: true + /minipass@4.2.8: + resolution: {integrity: sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==} + engines: {node: '>=8'} + dev: true + /minipass@5.0.0: resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==} engines: {node: '>=8'} @@ -6324,7 +6384,7 @@ packages: resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} dependencies: lower-case: 2.0.2 - tslib: registry.npmjs.org/tslib@2.6.2 + tslib: 2.6.2 dev: true /node-fetch-native@1.4.0: @@ -6560,7 +6620,7 @@ packages: resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} dependencies: no-case: 3.0.4 - tslib: registry.npmjs.org/tslib@2.6.2 + tslib: 2.6.2 dev: true /path-exists@4.0.0: @@ -7478,7 +7538,7 @@ packages: sade: 1.8.1 svelte: 4.2.8 svelte-preprocess: registry.npmjs.org/svelte-preprocess@5.1.1(@babel/core@7.23.5)(postcss@8.4.31)(svelte@4.2.8)(typescript@5.3.2) - typescript: registry.npmjs.org/typescript@5.3.2 + typescript: 5.3.2 transitivePeerDependencies: - '@babel/core' - coffeescript @@ -7505,7 +7565,7 @@ packages: sade: 1.8.1 svelte: 4.2.8 svelte-preprocess: registry.npmjs.org/svelte-preprocess@5.1.1(@babel/core@7.23.5)(postcss@8.4.32)(svelte@4.2.8)(typescript@5.3.2) - typescript: registry.npmjs.org/typescript@5.3.2 + typescript: 5.3.2 transitivePeerDependencies: - '@babel/core' - coffeescript @@ -7556,6 +7616,55 @@ packages: '@popperjs/core': 2.11.8 svelte: 4.2.8 + /svelte-preprocess@5.1.2(@babel/core@7.23.5)(postcss@8.4.32)(svelte@3.59.2)(typescript@5.3.2): + resolution: {integrity: sha512-XF0aliMAcYnP4hLETvB6HRAMnaL09ASYT1Z2I1Gwu0nz6xbdg/dSgAEthtFZJA4AKrNhFDFdmUDO+H9d/6xg5g==} + 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 || ^5.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 || ^5.0.0-next.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: + '@babel/core': 7.23.5 + '@types/pug': 2.0.8 + detect-indent: 6.1.0 + magic-string: 0.27.0 + postcss: 8.4.32 + sorcery: 0.11.0 + strip-indent: 3.0.0 + svelte: 3.59.2 + typescript: 5.3.2 + dev: true + /svelte-preprocess@5.1.2(@babel/core@7.23.5)(postcss@8.4.32)(svelte@4.2.8)(typescript@5.3.2): resolution: {integrity: sha512-XF0aliMAcYnP4hLETvB6HRAMnaL09ASYT1Z2I1Gwu0nz6xbdg/dSgAEthtFZJA4AKrNhFDFdmUDO+H9d/6xg5g==} engines: {node: '>= 14.10.0'} @@ -7605,6 +7714,30 @@ packages: typescript: 5.3.2 dev: true + /svelte-strip@2.0.0(@babel/core@7.23.5)(postcss@8.4.32)(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.1.2(@babel/core@7.23.5)(postcss@8.4.32)(svelte@3.59.2)(typescript@5.3.2) + typescript: 5.3.2 + yargs: 17.7.2 + transitivePeerDependencies: + - '@babel/core' + - coffeescript + - less + - postcss + - postcss-load-config + - pug + - sass + - stylus + - sugarss + dev: true + /svelte-strip@3.0.1(@babel/core@7.23.5)(postcss@8.4.32)(svelte@4.2.8): resolution: {integrity: sha512-jTmQB1m7ThX+Pgg4gm0HzjW+i226mf9xOxP/JvPTTJH4v2cuQvSJCkHIkFO94XVR8jLfhVJt7RaqLAjeYVon0Q==} hasBin: true @@ -7615,7 +7748,7 @@ packages: minimatch: 9.0.3 svelte: 4.2.8 svelte-preprocess: registry.npmjs.org/svelte-preprocess@5.1.1(@babel/core@7.23.5)(postcss@8.4.32)(svelte@4.2.8)(typescript@5.3.2) - typescript: registry.npmjs.org/typescript@5.3.2 + typescript: 5.3.2 yargs: 17.7.2 transitivePeerDependencies: - '@babel/core' @@ -8654,15 +8787,6 @@ packages: version: 1.0.2 dev: true - registry.npmjs.org/brace-expansion@1.1.11: - resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz} - name: brace-expansion - version: 1.1.11 - dependencies: - balanced-match: registry.npmjs.org/balanced-match@1.0.2 - concat-map: registry.npmjs.org/concat-map@0.0.1 - dev: true - registry.npmjs.org/brace-expansion@2.0.1: resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz} name: brace-expansion @@ -8710,12 +8834,6 @@ packages: version: 1.1.4 dev: true - registry.npmjs.org/concat-map@0.0.1: - resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz} - name: concat-map - version: 0.0.1 - dev: true - registry.npmjs.org/detect-indent@6.1.0: resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz} name: detect-indent @@ -8755,19 +8873,6 @@ packages: engines: {node: 6.* || 8.* || >= 10.*} dev: true - registry.npmjs.org/glob@7.2.3: - resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/glob/-/glob-7.2.3.tgz} - name: glob - version: 7.2.3 - dependencies: - fs.realpath: registry.npmjs.org/fs.realpath@1.0.0 - inflight: registry.npmjs.org/inflight@1.0.6 - inherits: registry.npmjs.org/inherits@2.0.4 - minimatch: registry.npmjs.org/minimatch@3.1.2 - once: registry.npmjs.org/once@1.4.0 - path-is-absolute: registry.npmjs.org/path-is-absolute@1.0.1 - dev: true - registry.npmjs.org/glob@9.3.5: resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/glob/-/glob-9.3.5.tgz} name: glob @@ -8786,21 +8891,6 @@ packages: version: 2.0.0 dev: false - registry.npmjs.org/inflight@1.0.6: - resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz} - name: inflight - version: 1.0.6 - dependencies: - once: registry.npmjs.org/once@1.4.0 - wrappy: registry.npmjs.org/wrappy@1.0.2 - dev: true - - registry.npmjs.org/inherits@2.0.4: - resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz} - name: inherits - version: 2.0.4 - dev: true - registry.npmjs.org/is-fullwidth-code-point@3.0.0: resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz} name: is-fullwidth-code-point @@ -8831,14 +8921,6 @@ packages: engines: {node: '>=4'} dev: true - registry.npmjs.org/minimatch@3.1.2: - resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz} - name: minimatch - version: 3.1.2 - dependencies: - brace-expansion: registry.npmjs.org/brace-expansion@1.1.11 - dev: true - registry.npmjs.org/minimatch@7.4.6: resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz} name: minimatch @@ -8886,21 +8968,6 @@ packages: minimist: registry.npmjs.org/minimist@1.2.8 dev: true - registry.npmjs.org/once@1.4.0: - resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/once/-/once-1.4.0.tgz} - name: once - version: 1.4.0 - dependencies: - wrappy: registry.npmjs.org/wrappy@1.0.2 - dev: true - - registry.npmjs.org/path-is-absolute@1.0.1: - resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz} - name: path-is-absolute - version: 1.0.1 - engines: {node: '>=0.10.0'} - dev: true - registry.npmjs.org/path-scurry@1.10.1: resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz} name: path-scurry @@ -8924,7 +8991,7 @@ packages: version: 2.7.1 hasBin: true dependencies: - glob: registry.npmjs.org/glob@7.2.3 + glob: 7.2.3 dev: true registry.npmjs.org/sander@0.5.1: @@ -9028,7 +9095,7 @@ packages: sorcery: registry.npmjs.org/sorcery@0.11.0 strip-indent: registry.npmjs.org/strip-indent@3.0.0 svelte: 4.2.8 - typescript: registry.npmjs.org/typescript@5.3.2 + typescript: 5.3.2 dev: true registry.npmjs.org/svelte-preprocess@5.1.1(@babel/core@7.23.5)(postcss@8.4.32)(svelte@3.59.2)(typescript@5.3.2): @@ -9080,7 +9147,7 @@ packages: sorcery: registry.npmjs.org/sorcery@0.11.0 strip-indent: registry.npmjs.org/strip-indent@3.0.0 svelte: 3.59.2 - typescript: registry.npmjs.org/typescript@5.3.2 + typescript: 5.3.2 dev: true registry.npmjs.org/svelte-preprocess@5.1.1(@babel/core@7.23.5)(postcss@8.4.32)(svelte@4.2.8)(typescript@5.3.2): @@ -9132,7 +9199,7 @@ packages: sorcery: registry.npmjs.org/sorcery@0.11.0 strip-indent: registry.npmjs.org/strip-indent@3.0.0 svelte: 4.2.8 - typescript: registry.npmjs.org/typescript@5.3.2 + typescript: 5.3.2 dev: true registry.npmjs.org/svelte-strip@2.0.0(@babel/core@7.23.5)(postcss@8.4.32)(svelte@3.59.2): @@ -9148,7 +9215,7 @@ packages: minimatch: registry.npmjs.org/minimatch@7.4.6 svelte: 3.59.2 svelte-preprocess: registry.npmjs.org/svelte-preprocess@5.1.1(@babel/core@7.23.5)(postcss@8.4.32)(svelte@3.59.2)(typescript@5.3.2) - typescript: registry.npmjs.org/typescript@5.3.2 + typescript: 5.3.2 yargs: registry.npmjs.org/yargs@17.7.2 transitivePeerDependencies: - '@babel/core' @@ -9187,12 +9254,6 @@ packages: strip-ansi: registry.npmjs.org/strip-ansi@6.0.1 dev: true - registry.npmjs.org/wrappy@1.0.2: - resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz} - name: wrappy - version: 1.0.2 - dev: true - registry.npmjs.org/y18n@5.0.8: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==, registry: https://mirrors.cloud.tencent.com/npm/, tarball: https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz} name: y18n diff --git a/preset/src/rules/index.ts b/preset/src/rules/index.ts index 34c44974..7252fb67 100644 --- a/preset/src/rules/index.ts +++ b/preset/src/rules/index.ts @@ -14,7 +14,7 @@ import { getDescriptionsItemGridColStartCls } from './src/descriptions-item'; import { setMainColor } from './set-main-color'; import { getIkunColorRules } from './src/ikun-color'; import { tabRules } from './src/tab'; - +import { carouselRules } from './src/carousel'; declare type dynamicRulesFunc = (...args: any[]) => Array any)>; export const defaultRules = { ...inputRules, @@ -26,6 +26,7 @@ export const defaultRules = { ...progressRules, ...popoverRules, ...tabRules, + ...carouselRules, ...getColCls(), ...getDescriptionsGridColCls(), ...getDescriptionsItemGridColStartCls() diff --git a/preset/src/rules/src/carousel.ts b/preset/src/rules/src/carousel.ts new file mode 100644 index 00000000..60f1affc --- /dev/null +++ b/preset/src/rules/src/carousel.ts @@ -0,0 +1,4 @@ +export const carouselRules = { + 'k-carousel-center': { top: 'calc(50% - 16px)' }, + 'k-carousel-item': { transition: 'all .3s cubic-bezier(0.645, 0.045, 0.355, 1)' } +}; diff --git a/preset/src/rules/src/tab.ts b/preset/src/rules/src/tab.ts index b90206fd..c05d89b5 100644 --- a/preset/src/rules/src/tab.ts +++ b/preset/src/rules/src/tab.ts @@ -3,5 +3,3 @@ export const tabRules = { 'k-tab-transition-all': { transition: 'all .3s cubic-bezier(0.645, 0.045, 0.355, 1)' }, 'k-tab__nav-transition': { transition: 'padding .3s cubic-bezier(0.645, 0.045, 0.355, 1)' } }; -// style:width={`${closeIconWidth(tab.uid)}px`} -// style:height={`${closeIconWidth(tab.uid)}px`} diff --git a/preset/src/shortcuts/index.ts b/preset/src/shortcuts/index.ts index bb7c2bc4..d0f2a097 100644 --- a/preset/src/shortcuts/index.ts +++ b/preset/src/shortcuts/index.ts @@ -48,6 +48,7 @@ import { descriptionsShortcuts } from './src/descriptions'; import { getDescriptionsGridColCls } from '../rules/src/descriptions'; import { descriptionsItemShortcuts } from './src/descriptions-item'; import { getDescriptionsItemGridColStartCls } from '../rules/src/descriptions-item'; +import { carouselShortcuts } from './src/carousel'; export const defaultShortcuts = [ baseShortcuts, @@ -132,12 +133,12 @@ export const defaultShortcuts = [ dropdownShortcuts, // tabs tabsShortcuts, - // pageShortcuts - pageShortcuts, // descriptions descriptionsShortcuts, // descriptions item - descriptionsItemShortcuts + descriptionsItemShortcuts, + // carousel + carouselShortcuts ] as UserShortcuts; export function getSafeList() { @@ -186,6 +187,7 @@ export function getSafeList() { const tabsList = Object.keys(tabsShortcuts); const descriptionsList = Object.keys(descriptionsShortcuts); const descriptionsItemList = Object.keys(descriptionsItemShortcuts); + const carouselList = Object.keys(carouselShortcuts); let res = iconList .concat(IKUN_SAFE_LIST) .concat(comList) @@ -231,7 +233,8 @@ export function getSafeList() { .concat(tabsList) .concat(pageList) .concat(descriptionsList) - .concat(descriptionsItemList); + .concat(descriptionsItemList) + .concat(carouselList); // rules const colSizeRules = Object.keys(createColSizeClsByNum()); @@ -290,3 +293,4 @@ export { dropdownShortcuts } from './src/dropdown'; export { tabsShortcuts } from './src/tabs'; export { descriptionsShortcuts } from './src/descriptions'; export { descriptionsItemShortcuts } from './src/descriptions-item'; +export { carouselShortcuts } from './src/carousel'; diff --git a/preset/src/shortcuts/src/carousel.ts b/preset/src/shortcuts/src/carousel.ts new file mode 100644 index 00000000..7b14a9de --- /dev/null +++ b/preset/src/shortcuts/src/carousel.ts @@ -0,0 +1,17 @@ +export const carouselShortcuts: Record = { + // carousel + 'k-carousel': 'pr', + 'k-carousel-wrap': 'pr overflow-hidden [&>[data-carousel-container]>*]:flex-1', + 'k-carousel-item-wrap': 'pr flex', + 'k-carousel-arrow': 'pa w-full fb k-carousel-center', + 'k-carousel-arrow-icon': + 'rounded-full bg-white shadow h-32px w-32px infcc cursor-pointer hover:text-ikun-main border-none outline-none', + 'k-carousel-arrow-prev': 'ml-2', + 'k-carousel-arrow-next': 'mr-2', + 'k-carousel-indicators': 'pa w-full fc bottom-12px', + 'k-carousel-indicators-item': + 'h-6px w-6px rounded-full mr-8px bg-ikun-bg-grs cursor-pointer k-carousel-item', + 'k-carousel-indicators-item--active': 'bg-ikun-main w-24px k-carousel-item', + // dark + 'k-carousel-arrow-icon--dark': 'dark:[&>span:hover]:text-ikun-main dark:[&>span]:text-black' +}; diff --git a/preset/src/theme/index.ts b/preset/src/theme/index.ts index aa7dc7be..75cde1ec 100644 --- a/preset/src/theme/index.ts +++ b/preset/src/theme/index.ts @@ -57,6 +57,7 @@ export const defaultTheme = { 'ikun-tx-gr': 'var(--ikun-zinc-400)', 'ikun-bd-base': 'var(--ikun-zinc-300)', 'ikun-bg-gr': 'var(--ikun-slate-100)', + 'ikun-bg-grs': 'var(--ikun-slate-300)', 'ikun-bg-tab': 'var(--ikun-slate-50)' }, fontFamily: {