neko-ui 2.8.21 → 2.8.22

package/es/color-palette/examples/default-value.md

@@ -0,0 +1,25 @@
+---
+title: 最简单的使用方式
+description: 可以给颜色选择面板指定一个初始颜色值 default-value，取值为合法的颜色值。
+order: 1
+---
+
+```html
+<n-color-palette default-value="#318867"></n-color-palette>
+<script>
+  const el = container.querySelector('n-color-palette');
+
+  el.onchange = function (e) {
+    console.log(e.detail);
+  };
+</script>
+```
+
+```jsx
+<n-color-palette
+  default-value="#318867"
+  onChange={(e) => {
+    console.log(e.detail);
+  }}
+/>
+```

package/es/color-palette/examples/hexa.md

@@ -0,0 +1,13 @@
+---
+title: HEXA
+description: 指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。
+order: 2
+---
+
+```html
+<n-color-palette value="#3188BF67"></n-color-palette>
+```
+
+```jsx
+<n-color-palette value="#3188BF67" />
+```

package/es/color-palette/examples/hsla.md

@@ -0,0 +1,13 @@
+---
+title: HSLA
+description: 色相、饱和度、亮度、透明度
+order: 3
+---
+
+```html
+<n-color-palette value="hsla(252,68%,63%,1)"></n-color-palette>
+```
+
+```jsx
+<n-color-palette value="hsla(252,68%,63%,1)" />
+```

package/es/color-palette/examples/rgba.md

@@ -0,0 +1,13 @@
+---
+title: RGBA
+description: 红色、绿色、蓝色、透明度
+order: 4
+---
+
+```html
+<n-color-palette value="rgba(76,81,29,0.73)"></n-color-palette>
+```
+
+```jsx
+<n-color-palette value="rgba(76,81,29,0.73)" />
+```

package/es/color-picker/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: 颜色选择器
+subtitle: n-color-picker
+icon: 🍭
+---
+
+# ColorPicker
+
+> 颜色选择器

package/es/color-picker/examples/basic.md

@@ -0,0 +1,12 @@
+---
+title: 直接使用
+order: 1
+---
+
+```html
+<n-color-picker default-value="#5998ff"></n-color-picker>
+```
+
+```jsx
+<n-color-picker default-value="pink" />
+```

package/es/color-picker/examples/default-value.md

@@ -0,0 +1,20 @@
+---
+title: 默认值
+description: 通过设置 `defaultValue` 为颜色选择器提供默认值。
+order: 3
+---
+
+```html
+<n-color-picker default-value="blue"></n-color-picker>
+<script>
+  const el = container.querySelector('n-color-picker');
+
+  el.onchange = function (e) {
+    console.log(e.detail);
+  };
+</script>
+```
+
+```jsx
+<n-color-picker default-value="blue" />
+```

package/es/color-picker/examples/size.md

@@ -0,0 +1,17 @@
+---
+title: 不同尺寸
+description: 颜色选择器有大、中、小三种尺寸。通过设置 `size` 为 `large`、`small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中 'normal'。
+order: 2
+---
+
+```html
+<n-color-picker value="#fedaaa" size="small"></n-color-picker>
+<n-color-picker value="red" size="normal"></n-color-picker>
+<n-color-picker value="green" size="large"></n-color-picker>
+```
+
+```jsx
+<n-color-picker value="#fedaaa" size="small" />
+<n-color-picker value="red" size="normal" />
+<n-color-picker value="green" size="large" />
+```

package/es/cron/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: Cron表达式
+subtitle: n-cron
+icon: ⌛
+---
+
+import api from './api.md?raw';
+
+<n-md text={api} />

package/es/cron/examples/basic.md

@@ -0,0 +1,19 @@
+---
+title: 基本使用
+order: 1
+---
+
+```html
+<n-cron default-value="0-1 * 0-1 * * ? 2023/1"></n-cron>
+<script>
+  const el = container.querySelector('n-cron');
+
+  el.onchange = function (e) {
+    console.log(e.detail);
+  };
+</script>
+```
+
+```jsx
+<n-cron default-value="0-1 * 0-1 * * ? 2023/1" />
+```

package/es/cron/examples/card.md

@@ -0,0 +1,12 @@
+---
+title: 卡片式
+order: 3
+---
+
+```html
+<n-cron type="card" default-value="0-1 * 0-1 * * ? 2023/1"></n-cron>
+```
+
+```jsx
+<n-cron type="card" default-value="0-1 * 0-1 * * ? 2023/1" />
+```

package/es/cron/examples/show-cron.md

@@ -0,0 +1,12 @@
+---
+title: 是否显示 cron 表达式
+order: 2
+---
+
+```html
+<n-cron default-value="* * 0-1 * * ? 2023/1" show-cron="false"></n-cron>
+```
+
+```jsx
+<n-cron default-value="* * 0-1 * * ? 2023/1" show-cron={false} />
+```

package/es/date-picker/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: 日期选择器
+subtitle: n-date-picker
+icon: 📅
+---
+
+# DatePicker 日期选择器
+
+> 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择

package/es/date-picker/examples/basic.md

@@ -0,0 +1,24 @@
+---
+title: 基本使用
+description: 最简单的使用方式
+order: 1
+---
+
+```html
+<n-data-picker value="2023-08-30 09:41:32"></n-data-picker>
+<script>
+  const el = container.querySelector('n-data-picker');
+
+  el.onchange = function (e) {
+    e.target.value = e.detail[0];
+  };
+</script>
+```
+
+```jsx
+<n-data-picker
+  onChange={(e) => {
+    console.log(e.detail);
+  }}
+/>
+```

package/es/date-picker/examples/date.md

@@ -0,0 +1,13 @@
+---
+title: 日期选择
+description: 设置 `type` 为 `date` 将面板调整为日期选择
+order: 2
+---
+
+```html
+<n-data-picker type="date"></n-data-picker>
+```
+
+```jsx
+<n-data-picker type="date" />
+```

package/es/date-picker/examples/disbaled.md

@@ -0,0 +1,13 @@
+---
+title: 禁用
+description: 只读模式
+order: 6
+---
+
+```html
+<n-data-picker disabled="true"></n-data-picker>
+```
+
+```jsx
+<n-data-picker disabled={true} />
+```

package/es/date-picker/examples/header.md

@@ -0,0 +1,13 @@
+---
+title: 不显示头部
+description: 不显示顶部的工具栏
+order: 7
+---
+
+```html
+<n-data-picker show-header="false"></n-data-picker>
+```
+
+```jsx
+<n-data-picker show-header={false} />
+```

package/es/date-picker/examples/month.md

@@ -0,0 +1,13 @@
+---
+title: 月份选择
+description: 设置 `type` 为 `month` 将面板调整为月份选择
+order: 3
+---
+
+```html
+<n-data-picker type="month"></n-data-picker>
+```
+
+```jsx
+<n-data-picker type="month" />
+```

package/es/date-picker/examples/time.md

@@ -0,0 +1,15 @@
+---
+title: 显示时间选择
+description: 设置 `type` 为 `date` 将面板调整为日期选择, 并设置 `show-time` 为 `true`
+order: 5
+---
+
+```html
+<n-data-picker type="date" show-time="true"></n-data-picker>
+<h4>不选时</h4>
+<n-data-picker type="date" show-time="true" show-hour="false"></n-data-picker>
+```
+
+```jsx
+<n-data-picker type="date" show-time={true} value="2023-08-08 06:06:53" />
+```

package/es/date-picker/examples/today.md

@@ -0,0 +1,13 @@
+---
+title: 不显示今日按钮
+description: 不显示底部的今日按钮
+order: 7
+---
+
+```html
+<n-data-picker show-today="false"></n-data-picker>
+```
+
+```jsx
+<n-data-picker show-today={false} />
+```

package/es/date-picker/examples/year.md

@@ -0,0 +1,13 @@
+---
+title: 年份选择
+description: 设置 `type` 为 `year` 将面板调整为年份选择
+order: 4
+---
+
+```html
+<n-data-picker type="year"></n-data-picker>
+```
+
+```jsx
+<n-data-picker type="year" />
+```

package/es/dropdown/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: 下拉菜单
+subtitle: n-dropdown
+icon: ⏏
+---
+
+# Dropdown 下拉菜单
+
+> 下拉菜单

package/es/dropdown/examples/arrow.md

@@ -0,0 +1,59 @@
+---
+title: 显示箭头
+description: 设置 `arrow` 来添加一个箭头来显示方向
+order: 5
+---
+
+```html
+<n-dropdown arrow="true" placement="left">
+  <n-button>left</n-button>
+</n-dropdown>
+<n-dropdown arrow="true" placement="bottomLeft">
+  <n-button>bottomLeft</n-button>
+</n-dropdown>
+<n-dropdown arrow="true" placement="bottom">
+  <n-button>bottom</n-button>
+</n-dropdown>
+<n-dropdown arrow="true" placement="bottomRight">
+  <n-button>bottomRight</n-button>
+</n-dropdown>
+<n-dropdown arrow="true" placement="topLeft">
+  <n-button>topLeft</n-button>
+</n-dropdown>
+<n-dropdown arrow="true" placement="top">
+  <n-button>top</n-button>
+</n-dropdown>
+<n-dropdown arrow="true" placement="topRight">
+  <n-button>topRight</n-button>
+</n-dropdown>
+<n-dropdown arrow="true" placement="right">
+  <n-button>right</n-button>
+</n-dropdown>
+```
+
+```jsx
+<n-dropdown arrow placement="left">
+  <n-button>left</n-button>
+</n-dropdown>
+<n-dropdown arrow placement="bottomLeft">
+  <n-button>bottomLeft</n-button>
+</n-dropdown>
+<n-dropdown arrow placement="bottom">
+  <n-button>bottom</n-button>
+</n-dropdown>
+<n-dropdown arrow placement="bottomRight">
+  <n-button>bottomRight</n-button>
+</n-dropdown>
+<n-dropdown arrow placement="topLeft">
+  <n-button>topLeft</n-button>
+</n-dropdown>
+<n-dropdown arrow placement="top">
+  <n-button>top</n-button>
+</n-dropdown>
+<n-dropdown arrow placement="topRight">
+  <n-button>topRight</n-button>
+</n-dropdown>
+<n-dropdown arrow placement="right">
+  <n-button>right</n-button>
+</n-dropdown>
+```

package/es/dropdown/examples/basic.md

@@ -0,0 +1,17 @@
+---
+title: 最简单的用法
+order: 1
+---
+
+```html
+<n-dropdown>hover</n-dropdown>
+<script>
+  const el = container.querySelector('n-dropdown');
+
+  el.items = ['A', 'B', { value: 'C', disabled: true }, 'D'];
+</script>
+```
+
+```jsx
+<n-dropdown items={['A', 'B', { value: 'C', disabled: true }, 'D']}>hover</n-dropdown>
+```

package/es/dropdown/examples/click.md

@@ -0,0 +1,45 @@
+---
+title: 点击时开启
+description: 将 `trigger` 属性设置为 `click`, 则可以将触发方式改为点击
+order: 3
+---
+
+```html
+<n-dropdown trigger="click">
+  <n-button>点击我</n-button>
+</n-dropdown>
+<script>
+  const el = container.querySelector('n-dropdown');
+
+  el.items = [
+    { value: '2', label: 'group one', options: ['A', 'B'] },
+    {
+      value: '1',
+      label: 'group two',
+      options: [
+        { value: '3', label: 'option-3', type: 'error' },
+        { value: '4', label: 'option-4', disabled: true },
+      ],
+    },
+  ];
+</script>
+```
+
+```jsx
+<n-dropdown
+  items={[
+    { value: '2', label: 'option-2', options: ['A', 'B'] },
+    {
+      value: '1',
+      label: 'option-1',
+      options: [
+        { value: '3', label: 'option-3', type: 'error' },
+        { value: '4', label: 'option-4', disabled: true },
+      ],
+    },
+  ]}
+  trigger="click"
+>
+  <n-button>点击我</n-button>
+</n-dropdown>
+```

package/es/dropdown/examples/context-menu.md

@@ -0,0 +1,66 @@
+---
+title: 右键触发
+description: 将 `trigger` 属性设置为 `contextMenu`, 则可以将触发方式改为右键
+order: 7
+---
+
+```html
+<n-dropdown class="dropdown" style="width: 100%;" trigger="contextMenu">
+  <div style="width: 100%;opacity: 0.4;">右键点我</div>
+</n-dropdown>
+<script>
+  const el = container.querySelector('n-dropdown');
+
+  el.css = `
+    .dropdown {
+      display: block;
+      width: 100%;
+      height: 150px;
+      background-color: var(--disable-bg);
+      border-radius: 8px;
+      line-height: 150px;
+      text-align: center;
+      font-size: x-large;
+    }
+  `;
+  el.items = [
+    { value: '1', label: 'option-1' },
+    { value: '2', label: 'option-2', disabled: true },
+    { value: '3', label: 'option-3', type: 'error' },
+  ];
+</script>
+```
+
+```jsx
+<n-dropdown
+  class="dropdown"
+  style={{ width: '100%' }}
+  items={[
+    { value: '1', label: 'option-1' },
+    { value: '2', label: 'option-2', disabled: true },
+    { value: '3', label: 'option-3', type: 'error' },
+  ]}
+  trigger="contextMenu"
+  css={`
+    .dropdown {
+      display: block;
+      width: 100%;
+      height: 150px;
+      background-color: var(--disable-bg);
+      border-radius: 8px;
+      line-height: 150px;
+      text-align: center;
+      font-size: x-large;
+    }
+  `}
+>
+  <div
+    style={{
+      width: '100%',
+      opacity: 0.4,
+    }}
+  >
+    右键点我
+  </div>
+</n-dropdown>
+```

package/es/dropdown/examples/field-names.md

@@ -0,0 +1,44 @@
+---
+title: 自定义字段名
+description: 自定义节点 'label'、'value'、'options' 的字段
+order: 12
+---
+
+```html
+<n-dropdown>
+  <n-button>自定义字段</n-button>
+</n-dropdown>
+<script>
+  const el = container.querySelector('n-dropdown');
+
+  el.fieldNames = {
+    label: 'name',
+    options: 'children',
+  };
+  el.items = [
+    {
+      value: '1',
+      name: '动物',
+      children: ['牛', '马'],
+    },
+  ];
+</script>
+```
+
+```jsx
+<n-dropdown
+  field-names={{
+    label: 'name',
+    options: 'children',
+  }}
+  items={[
+    {
+      value: '1',
+      name: '动物',
+      children: ['牛', '马'],
+    },
+  ]}
+>
+  <n-button>自定义字段</n-button>
+</n-dropdown>
+```

package/es/dropdown/examples/icon.md

@@ -0,0 +1,30 @@
+---
+title: 带图标的选项
+description: 给每一项添加独特的图标
+order: 6
+---
+
+```html
+<n-dropdown>
+  <n-button>带图标的选项</n-button>
+</n-dropdown>
+<script>
+  const el = container.querySelector('n-dropdown');
+
+  el.items = [
+    { label: '狮子', value: '狮子', icon: '🦁' },
+    { label: '大青蛙', value: '大青蛙', icon: '🐸' },
+  ];
+</script>
+```
+
+```jsx
+<n-dropdown
+  items={[
+    { label: '狮子', value: '狮子', icon: '🦁' },
+    { label: '大青蛙', value: '大青蛙', icon: '🐸' },
+  ]}
+>
+  <n-button>带图标的选项</n-button>
+</n-dropdown>
+```

package/es/dropdown/examples/multiple.md

@@ -0,0 +1,45 @@
+---
+title: 多选模式
+description: 将 `multiple` 属性设置为 true, 进行多选操作, 当设置 `value` 时值受控
+order: 9
+---
+
+```html
+<n-dropdown selectable="true" multiple="true">
+  <div>可多选</div>
+</n-dropdown>
+<script>
+  const el = container.querySelector('n-dropdown');
+
+  el.items = [
+    { value: 'a', label: '张三' },
+    { value: 'b', label: '李四' },
+    { value: 'c', label: '王五' },
+    { value: 'd', label: '赵六' },
+  ];
+  el.value = ['a', 'c'];
+  el.onchange = function (e) {
+    const [key] = e.detail;
+    e.target.value = key;
+  };
+</script>
+```
+
+```jsx
+<n-dropdown
+  multiple
+  selectable
+  value={['2', '4']}
+  items={[
+    { value: '1', label: '张三' },
+    { value: '2', label: '李四' },
+    { value: '3', label: '王五' },
+    { value: '4', label: '赵六' },
+  ]}
+  onChange={(e) => {
+    e.target.value = e.detail[0];
+  }}
+>
+  <div>可多选</div>
+</n-dropdown>
+```

package/es/dropdown/examples/no-data.md

@@ -0,0 +1,16 @@
+---
+title: 无数据
+order: 11
+---
+
+```html
+<n-dropdown>
+  <n-typography>hover</n-typography>
+</n-dropdown>
+```
+
+```jsx
+<n-dropdown>
+  <n-typography>hover</n-typography>
+</n-dropdown>
+```