feat: added segmented component (#396)

* feat: added segmented component

* chore: complete function

* chore: temp commit

* chore: KSegmented component basic function complete

* docs: added KSegmented component document

* test: added KSegmented component unit test

* test: added unit test snap

components/Segmented/__test__/__snapshots__/segmented.spec.ts.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test: KSegmented > props: block 1`] = `"<div class="k-segmented k-segmented-block"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div>"`;
+
+exports[`Test: KSegmented > props: cls 1`] = `"<div class="k-segmented k-segmented--test"><div class="k-segmented-group"></div></div>"`;
+
+exports[`Test: KSegmented > props: size 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <button id="test_lg">Daily-value</button> <button id="test_md">Daily-value</button> <button id="test_sm">Daily-value</button>"`;
+
+exports[`Test: KSegmented > props: size 2`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <button id="test_lg">Daily-value</button> <button id="test_md">Daily-value</button> <button id="test_sm">Daily-value</button>"`;
+
+exports[`Test: KSegmented > props: size 3`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <button id="test_lg">Daily-value</button> <button id="test_md">Daily-value</button> <button id="test_sm">Daily-value</button>"`;
+
+exports[`Test: KSegmentedItem > props: block 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
+
+exports[`Test: KSegmentedItem > props: disabled 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item--disabled" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
+
+exports[`Test: KSegmentedItem > props: icon 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span><span class="k-icon--base k-icon--base__dark k-icon-transition i-icon-logo-vue k-segmented-item--icon" role="" aria-hidden="true" style="width: 18px; height: 18px;"></span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
+
+exports[`Test: KSegmentedItem > props: onlyIcon 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span><span class="k-icon--base k-icon--base__dark k-icon-transition i-icon-logo-vue k-segmented-item--icon" role="" aria-hidden="true" style="width: 18px; height: 18px;"></span> </span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
+
+exports[`Test: KSegmentedItem > slots: default 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Daily 🐔</span> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Weekly 🎤</span> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Monthly 💃</span> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Quarterly ✌️</span> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Yearly 🏀</span> </div></div></div>"`;

components/Segmented/__test__/fixture/block.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { KSegmented, KSegmentedItem } from '@ikun-ui/segmented';
+	let value = 'Daily-value';
+	const handleInput = (event: CustomEvent) => {
+		value = event.detail;
+	};
+</script>
+
+<KSegmented on:change={handleInput} {value} block>
+	<KSegmentedItem value="Daily-value" label="Daily" />
+	<KSegmentedItem value="Weekly-value" label="Weekly" disabled={false} />
+	<KSegmentedItem value="Monthly-value" label="Monthly" disabled={false} />
+	<KSegmentedItem value="Quarterly-value" label="Quarterly" disabled={false} />
+	<KSegmentedItem value="Yearly-value" label="Yearly" disabled={false} />
+</KSegmented>

components/Segmented/__test__/fixture/click.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { KSegmented, KSegmentedItem } from '@ikun-ui/segmented';
+	import type { IKunSize } from '@ikun-ui/utils';
+	let value = 'Daily-value';
+	let size: IKunSize = 'md';
+	const handleClick = (event: CustomEvent) => {
+		value = event.detail;
+	};
+</script>
+
+<KSegmented {value} {size}>
+	<KSegmentedItem value="Daily-value" label="Daily" />
+	<KSegmentedItem value="Weekly-value" label="Weekly" disabled={false} />
+	<KSegmentedItem on:click={handleClick} value="Monthly-value" label="Monthly" disabled={false} />
+	<KSegmentedItem value="Quarterly-value" label="Quarterly" disabled={false} />
+	<KSegmentedItem value="Yearly-value" label="Yearly" disabled={false} />
+</KSegmented>
+<div id="test_value">{value}</div>

components/Segmented/__test__/fixture/custom.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { KSegmented, KSegmentedItem } from '@ikun-ui/segmented';
+	import type { IKunSize } from '@ikun-ui/utils';
+	let value = 'Daily-value';
+	let size: IKunSize = 'md';
+	const handleInput = (event: CustomEvent) => {
+		value = event.detail;
+	};
+</script>
+
+<KSegmented on:change={handleInput} {value} {size}>
+	<KSegmentedItem value="Daily-value" label="Daily">
+		<span class="custom-segmented-item">Daily 🐔</span>
+	</KSegmentedItem>
+	<KSegmentedItem value="Weekly-value" label="Weekly">
+		<span class="custom-segmented-item">Weekly 🎤</span>
+	</KSegmentedItem>
+	<KSegmentedItem value="Monthly-value" label="Monthly">
+		<span class="custom-segmented-item">Monthly 💃</span>
+	</KSegmentedItem>
+	<KSegmentedItem value="Quarterly-value" label="Quarterly">
+		<span class="custom-segmented-item">Quarterly ✌️</span>
+	</KSegmentedItem>
+	<KSegmentedItem value="Yearly-value" label="Yearly">
+		<span class="custom-segmented-item">Yearly 🏀</span>
+	</KSegmentedItem>
+</KSegmented>
+
+<style>
+	.custom-segmented-item {
+		--at-apply: px-12px z-1;
+	}
+</style>

components/Segmented/__test__/fixture/disabled.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { KSegmented, KSegmentedItem } from '@ikun-ui/segmented';
+	import type { IKunSize } from '@ikun-ui/utils';
+	let value = 'Daily-value';
+	let size: IKunSize = 'md';
+	const handleClick = (event: CustomEvent) => {
+		value = event.detail;
+	};
+</script>
+
+<KSegmented {value} {size}>
+	<KSegmentedItem value="Daily-value" label="Daily" />
+	<KSegmentedItem value="Weekly-value" label="Weekly" disabled={false} />
+	<KSegmentedItem on:click={handleClick} value="Monthly-value" label="Monthly" disabled={true} />
+	<KSegmentedItem value="Quarterly-value" label="Quarterly" disabled={false} />
+	<KSegmentedItem value="Yearly-value" label="Yearly" disabled={false} />
+</KSegmented>
+<div id="test_value">{value}</div>

components/Segmented/__test__/fixture/icon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { KSegmented, KSegmentedItem } from '@ikun-ui/segmented';
+	import type { IKunSize } from '@ikun-ui/utils';
+	let value = 'Daily-value';
+	let size: IKunSize = 'md';
+	const handleInput = (event: CustomEvent) => {
+		value = event.detail;
+	};
+</script>
+
+<KSegmented on:change={handleInput} {value} {size}>
+	<KSegmentedItem icon="i-icon-logo-vue" value="Daily-value" label="Daily" />
+	<KSegmentedItem value="Weekly-value" label="Weekly" disabled={false} />
+	<KSegmentedItem value="Monthly-value" label="Monthly" disabled={false} />
+	<KSegmentedItem value="Quarterly-value" label="Quarterly" disabled={false} />
+	<KSegmentedItem value="Yearly-value" label="Yearly" disabled={false} />
+</KSegmented>
+<div id="test_value">{value}</div>

components/Segmented/__test__/fixture/label.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { KSegmented, KSegmentedItem } from '@ikun-ui/segmented';
+	import type { IKunSize } from '@ikun-ui/utils';
+	let value = 'Daily-value';
+	let size: IKunSize = 'md';
+	const handleInput = (event: CustomEvent) => {
+		value = event.detail;
+	};
+</script>
+
+<KSegmented on:change={handleInput} {value} {size}>
+	<KSegmentedItem value="Daily-value" label="Daily" />
+	<KSegmentedItem value="Weekly-value" label="Weekly" disabled={false} />
+	<KSegmentedItem value="Monthly-value" label="Monthly" disabled={false} />
+	<KSegmentedItem value="Quarterly-value" label="Quarterly" disabled={false} />
+	<KSegmentedItem value="Yearly-value" label="Yearly" disabled={false} />
+</KSegmented>
+<div id="test_value">{value}</div>

components/Segmented/__test__/fixture/only.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { KSegmented, KSegmentedItem } from '@ikun-ui/segmented';
+	import type { IKunSize } from '@ikun-ui/utils';
+	let value = 'Daily-value';
+	let size: IKunSize = 'md';
+	const handleInput = (event: CustomEvent) => {
+		value = event.detail;
+	};
+</script>
+
+<KSegmented on:change={handleInput} {value} {size}>
+	<KSegmentedItem onlyIcon icon="i-icon-logo-vue" value="Daily-value" label="Daily" />
+	<KSegmentedItem onlyIcon value="Weekly-value" label="Weekly" disabled={false} />
+	<KSegmentedItem value="Monthly-value" label="Monthly" disabled={false} />
+	<KSegmentedItem value="Quarterly-value" label="Quarterly" disabled={false} />
+	<KSegmentedItem value="Yearly-value" label="Yearly" disabled={false} />
+</KSegmented>
+<div id="test_value">{value}</div>

components/Segmented/__test__/fixture/size.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { KSegmented, KSegmentedItem } from '@ikun-ui/segmented';
+	import type { IKunSize } from '@ikun-ui/utils';
+	let value = 'Daily-value';
+	let size: IKunSize = 'md';
+	const handleInput = (event: CustomEvent) => {
+		value = event.detail;
+	};
+</script>
+
+<KSegmented on:change={handleInput} {value} {size}>
+	<KSegmentedItem value="Daily-value" label="Daily" />
+	<KSegmentedItem value="Weekly-value" label="Weekly" disabled={false} />
+	<KSegmentedItem value="Monthly-value" label="Monthly" disabled={false} />
+	<KSegmentedItem value="Quarterly-value" label="Quarterly" disabled={false} />
+	<KSegmentedItem value="Yearly-value" label="Yearly" disabled={false} />
+</KSegmented>
+<button id="test_lg" on:click={() => (size = 'lg')}>{value}</button>
+<button id="test_md" on:click={() => (size = 'md')}>{value}</button>
+<button id="test_sm" on:click={() => (size = 'sm')}>{value}</button>

components/Segmented/__test__/fixture/value.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { KSegmented, KSegmentedItem } from '@ikun-ui/segmented';
+	import type { IKunSize } from '@ikun-ui/utils';
+	let value = 'Daily-value';
+	let size: IKunSize = 'md';
+	const handleInput = (event: CustomEvent) => {
+		value = event.detail;
+	};
+</script>
+
+<KSegmented on:change={handleInput} {value} {size}>
+	<KSegmentedItem value="Daily-value" label="Daily" />
+	<KSegmentedItem value="Weekly-value" label="Weekly" disabled={false} />
+	<KSegmentedItem value="Monthly-value" label="Monthly" disabled={false} />
+	<KSegmentedItem value="Quarterly-value" label="Quarterly" disabled={false} />
+	<KSegmentedItem value="Yearly-value" label="Yearly" disabled={false} />
+</KSegmented>
+<div id="test_value">{value}</div>