docs: added KFlex component document

components/Switch/src/index.svelte

@@ -72,11 +72,11 @@
 			? {
 					newVal: unCheckedValue,
 					oldVal: checkedValue
-			  }
+				}
 			: {
 					newVal: checkedValue,
 					oldVal: unCheckedValue
-			  };
+				};
 		dispatch('change', changeData);
 	};
 

docs/.vitepress/config.ts

@@ -38,17 +38,21 @@ const components = [
 		text: 'Layout',
 		collapsed: false,
 		items: [
+			{
+				text: 'Divider',
+				link: '/components/KDivider'
+			},
+			{
+				text: 'Flex',
+				link: '/components/KFlex'
+			},
 			{
 				text: 'Grid',
 				link: '/components/KGrid'
 			},
 			{
 				text: 'Layout',
 				link: '/components/KLayout'
-			},
-			{
-				text: 'Divider',
-				link: '/components/KDivider'
 			}
 		]
 	},

docs/components/KFlex.md

@@ -0,0 +1,72 @@
+---
+title: KFlex
+lang: en-US
+---
+
+# KFlex
+
+flex layout component
+
+## Install
+
+::: code-group
+
+```bash [pnpm]
+pnpm add @ikun-ui/flex
+```
+
+```bash [yarn]
+yarn add @ikun-ui/flex
+```
+
+```bash [npm]
+npm install @ikun-ui/flex
+```
+
+:::
+
+## Basic usage
+
+The basic usage.
+
+<demo src="flex/basic.svelte"  github='Flex'></demo>
+
+## Justify and align
+
+Supports adjusting justify and align,
+the values should conform to the [justify <span class="i-carbon-link text-12px" />](https://www.tailwindcss.cn/docs/justify-content)
+and [align <span class="i-carbon-link text-12px" />](https://www.tailwindcss.cn/docs/align-items) values of tailwindcss
+
+<demo src="flex/justify-align.svelte" github='Flex'></demo>
+
+## Gap
+
+The gap attribute can jump the gap and supports `sm`, `md`, `lg` and custom numbers.
+
+<demo src="flex/gap.svelte" github='Flex'></demo>
+
+## Wrap
+
+Auto wrap line.
+
+<demo src="flex/wrap.svelte" github='Flex'></demo>
+
+## Flex Props
+
+| Name     | Type                                                                                                  | Default                                                           | Description                                                                 |
+| -------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| vertical | `boolean`                                                                                             | `false`                                                           | Is direction of the flex vertical.                                          |
+| wrap     | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                | `'normal'`                                                        | Set whether the element is displayed in a single line or in multiple lines. |
+| justify  | `'normal' \| 'start'\| 'end'\| 'center'\| 'between'\| 'around' \| 'evenly' \| 'stretch'` | `'normal'` | Sets the alignment of elements in the direction of the main axis. |
+| align    | `'center' \| 'start' \| 'end' \| 'baseline' \| 'normal' \| 'stretch'`                                 | `'normal'`                                                        | Sets the alignment of elements in the direction of the cross axis.          |
+| flex     | `string`                                                                                              | `-`                                                               | Flex CSS shorthand properties.                                              |
+| gap      | `'sm' \| 'md' \| 'lg' \| number`                                                                      | `-`                                                               | Sets the gap between grids.                                                 |
+| elm      | `string`                                                                                              | `div`                                                             | Custom element type.                                                        |
+| cls      | `string`                                                                                              | `''`                                                              | Additional class for component                                              |
+| attrs    | `any`                                                                                                 | `{}`                                                              | Additional attributes                                                       |
+
+## Flex Slots
+
+| Name    | Description                    |
+| ------- | ------------------------------ |
+| default | content of the flex component. |

docs/example/flex/basic.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { KFlex } from '@ikun-ui/flex';
+	import { KRadio } from '@ikun-ui/radio';
+	import { KRadioGroup } from '@ikun-ui/radio-group';
+	let value = '2';
+	let vertical = false;
+	const handleUpdated = (e) => {
+		value = e.detail;
+		vertical = value === '2';
+	};
+</script>
+
+<KRadioGroup {value} on:updateValue={handleUpdated}>
+	<KRadio uid="1">horizontal</KRadio>
+	<KRadio uid="2">vertical</KRadio>
+</KRadioGroup>
+
+<KFlex {vertical}>
+	<div class="m-2 rounded w-1/4 h-36px bg-orange-200" />
+	<div class="m-2 rounded w-1/4 h-36px bg-orange-100" />
+	<div class="m-2 rounded w-1/4 h-36px bg-orange-200" />
+	<div class="m-2 rounded w-1/4 h-36px bg-orange-100" />
+</KFlex>

docs/example/flex/gap.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { KFlex } from '@ikun-ui/flex';
+	import { KRadio } from '@ikun-ui/radio';
+	import { KRadioGroup } from '@ikun-ui/radio-group';
+	import { KSlider } from '@ikun-ui/slider';
+	let value: 'sm' | 'md' | 'lg' | 'custom' = 'sm';
+	let show = false;
+	let gap: 'sm' | 'md' | 'lg' | number = 'sm';
+	const handleUpdated = (e) => {
+		value = e.detail;
+		if (e.detail !== 'custom') {
+			show = false;
+			gap = value as 'sm' | 'md' | 'lg';
+		} else {
+			sliderValue = gap = 10;
+			show = true;
+		}
+	};
+
+	let sliderValue = 10;
+	const handleInput = (event) => {
+		sliderValue = event.detail;
+		gap = sliderValue;
+	};
+</script>
+
+<KRadioGroup {value} on:updateValue={handleUpdated}>
+	<KRadio uid="sm">sm</KRadio>
+	<KRadio uid="md">md</KRadio>
+	<KRadio uid="lg">lg</KRadio>
+	<KRadio uid="custom">custom</KRadio>
+</KRadioGroup>
+{#if show}
+	<KSlider on:input={handleInput} value={sliderValue}></KSlider>
+{/if}
+<KFlex {gap} cls="mt-2">
+	<div class="rounded w-1/4 h-36px bg-orange-200" />
+	<div class="rounded w-1/4 h-36px bg-orange-100" />
+	<div class="rounded w-1/4 h-36px bg-orange-200" />
+	<div class="rounded w-1/4 h-36px bg-orange-100" />
+</KFlex>

docs/example/flex/justify-align.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { KFlex } from '@ikun-ui/flex';
+	import { KRadio } from '@ikun-ui/radio';
+	import { KRadioGroup } from '@ikun-ui/radio-group';
+	import type { KFlexProps } from '@ikun-ui/flex/src/types';
+	let justifyValue: KFlexProps['justify'] = 'start';
+	const handleSelectJustify = (e) => {
+		justifyValue = e.detail;
+	};
+	let alignValue: KFlexProps['align'] = 'start';
+	const handleSelectAlign = (e) => {
+		alignValue = e.detail;
+	};
+</script>
+
+<KFlex gap="md" align="start" vertical cls="w-full">
+	<span>Select justify :</span>
+	<KRadioGroup value={justifyValue} on:updateValue={handleSelectJustify}>
+		<KRadio uid="start">start</KRadio>
+		<KRadio uid="end">end</KRadio>
+		<KRadio uid="center">center</KRadio>
+		<KRadio uid="between">between</KRadio>
+		<KRadio uid="around">around</KRadio>
+		<KRadio uid="evenly">evenly</KRadio>
+	</KRadioGroup>
+	<span>Select align :</span>
+	<KRadioGroup value={alignValue} on:updateValue={handleSelectAlign}>
+		<KRadio uid="start">start</KRadio>
+		<KRadio uid="center">center</KRadio>
+		<KRadio uid="end">end</KRadio>
+	</KRadioGroup>
+	<KFlex
+		cls="w-full rounded h-200px border-solid border-1 border-ikun-main"
+		justify={justifyValue}
+		align={alignValue}
+	>
+		<div class="rounded w-100px h-36px bg-orange-200" />
+		<div class="rounded w-100px h-36px bg-orange-100" />
+		<div class="rounded w-100px h-36px bg-orange-200" />
+		<div class="rounded w-100px h-36px bg-orange-100" />
+	</KFlex>
+</KFlex>

docs/example/flex/wrap.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { KFlex } from '@ikun-ui/flex';
+	import { KButton } from '@ikun-ui/button';
+	const arrs = Array.from({ length: 24 });
+</script>
+
+<KFlex gap="sm" wrap="wrap">
+	{#each arrs as item}
+		<KButton cls="!ml-0" id={item}>button</KButton>
+	{/each}
+</KFlex>

preset/src/shortcuts/src/image-view.ts

@@ -4,8 +4,7 @@ export const imageViewShortcuts: Record<string, string> = {
 	'k-image-view--close':
 		'ikun:20:bg-ikun-black fcc pa rounded-full h-42px w-42px cursor-pointer right-32px top-32px z-2 text-ikun-icon-white hover:text-white',
 	'k-image-view--body': 'pa w-full fcc inset-0',
-	'k-image-view--body__img':
-		'k-user-drag-none pa user-drag-none max-w-4/10 select-none cursor-grab',
+	'k-image-view--body__img': 'k-user-drag-none pa max-w-4/10 select-none cursor-grab',
 	'k-image-view--footer__wrapper': 'pa right-0 bottom-32px w-full fcc z-2',
 	'k-image-view--footer':
 		'ikun:20:bg-ikun-black h-42px w-min rounded-21px fcc px-10px box-border select-none',