From 9d6a93f73589b7faa43901108e9a064fdffc3887 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Thu, 4 Jan 2024 10:39:24 +0800
Subject: [PATCH 1/2] docs: added KFlex component document
---
components/Switch/src/index.svelte | 4 +-
docs/.vitepress/config.ts | 12 +++--
docs/components/KFlex.md | 66 ++++++++++++++++++++++++++
docs/example/flex/basic.svelte | 23 +++++++++
docs/example/flex/gap.svelte | 41 ++++++++++++++++
docs/example/flex/justify-align.svelte | 42 ++++++++++++++++
preset/src/shortcuts/src/image-view.ts | 3 +-
7 files changed, 183 insertions(+), 8 deletions(-)
create mode 100644 docs/components/KFlex.md
create mode 100644 docs/example/flex/basic.svelte
create mode 100644 docs/example/flex/gap.svelte
create mode 100644 docs/example/flex/justify-align.svelte
diff --git a/components/Switch/src/index.svelte b/components/Switch/src/index.svelte
index 07495870..d9be9d74 100644
--- a/components/Switch/src/index.svelte
+++ b/components/Switch/src/index.svelte
@@ -72,11 +72,11 @@
? {
newVal: unCheckedValue,
oldVal: checkedValue
- }
+ }
: {
newVal: checkedValue,
oldVal: unCheckedValue
- };
+ };
dispatch('change', changeData);
};
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index de731f05..1452fc3f 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -38,6 +38,14 @@ const components = [
text: 'Layout',
collapsed: false,
items: [
+ {
+ text: 'Divider',
+ link: '/components/KDivider'
+ },
+ {
+ text: 'Flex',
+ link: '/components/KFlex'
+ },
{
text: 'Grid',
link: '/components/KGrid'
@@ -45,10 +53,6 @@ const components = [
{
text: 'Layout',
link: '/components/KLayout'
- },
- {
- text: 'Divider',
- link: '/components/KDivider'
}
]
},
diff --git a/docs/components/KFlex.md b/docs/components/KFlex.md
new file mode 100644
index 00000000..7c892dff
--- /dev/null
+++ b/docs/components/KFlex.md
@@ -0,0 +1,66 @@
+---
+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.
+
+
+
+## Justify and align
+
+Supports adjusting justify and align,
+the values should conform to the [justify ](https://www.tailwindcss.cn/docs/justify-content)
+and [align ](https://www.tailwindcss.cn/docs/align-items) values of tailwindcss
+
+
+
+## Gap
+
+The gap attribute can jump the gap and supports `sm`, `md`, `lg` and custom numbers.
+
+
+
+## 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. |
diff --git a/docs/example/flex/basic.svelte b/docs/example/flex/basic.svelte
new file mode 100644
index 00000000..7b6865fb
--- /dev/null
+++ b/docs/example/flex/basic.svelte
@@ -0,0 +1,23 @@
+
+
+
+ horizontal
+ vertical
+
+
+
+
+
+
+
+
diff --git a/docs/example/flex/gap.svelte b/docs/example/flex/gap.svelte
new file mode 100644
index 00000000..72912eaa
--- /dev/null
+++ b/docs/example/flex/gap.svelte
@@ -0,0 +1,41 @@
+
+
+
+ sm
+ md
+ lg
+ custom
+
+{#if show}
+
+{/if}
+
+
+
+
+
+
diff --git a/docs/example/flex/justify-align.svelte b/docs/example/flex/justify-align.svelte
new file mode 100644
index 00000000..c6b03e9b
--- /dev/null
+++ b/docs/example/flex/justify-align.svelte
@@ -0,0 +1,42 @@
+
+
+
+ Select justify :
+
+ start
+ end
+ center
+ between
+ around
+ evenly
+
+ Select align :
+
+ start
+ center
+ end
+
+
+
+
+
+
+
+
diff --git a/preset/src/shortcuts/src/image-view.ts b/preset/src/shortcuts/src/image-view.ts
index e1c31bc1..9088fff8 100644
--- a/preset/src/shortcuts/src/image-view.ts
+++ b/preset/src/shortcuts/src/image-view.ts
@@ -4,8 +4,7 @@ export const imageViewShortcuts: Record = {
'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',
From 3792ae9cfedab4cadb3886efa0aabcbedb3c9510 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Thu, 4 Jan 2024 10:45:56 +0800
Subject: [PATCH 2/2] docs: updated KFlex component document
---
docs/components/KFlex.md | 6 ++++++
docs/example/flex/wrap.svelte | 11 +++++++++++
2 files changed, 17 insertions(+)
create mode 100644 docs/example/flex/wrap.svelte
diff --git a/docs/components/KFlex.md b/docs/components/KFlex.md
index 7c892dff..db0e7ae2 100644
--- a/docs/components/KFlex.md
+++ b/docs/components/KFlex.md
@@ -45,6 +45,12 @@ The gap attribute can jump the gap and supports `sm`, `md`, `lg` and custom numb
+## Wrap
+
+Auto wrap line.
+
+
+
## Flex Props
| Name | Type | Default | Description |
diff --git a/docs/example/flex/wrap.svelte b/docs/example/flex/wrap.svelte
new file mode 100644
index 00000000..f7545e94
--- /dev/null
+++ b/docs/example/flex/wrap.svelte
@@ -0,0 +1,11 @@
+
+
+
+ {#each arrs as item}
+ button
+ {/each}
+