neko-ui 2.8.21 → 2.8.22

package/lib/img/examples/open-change.md

@@ -0,0 +1,25 @@
+---
+title: 大图开启关闭时的回调
+description: 大图开启关闭时的回调
+order: 3
+---
+
+```html
+<n-img src="https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF"></n-img>
+<script>
+  const el = container.querySelector('n-img');
+
+  el.addEventListener('openchange', function (e) {
+    console.log('html', e.detail);
+  });
+</script>
+```
+
+```jsx
+<n-img
+  src="https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF"
+  onopenchange={function (e) {
+    console.log('jsx', e.detail);
+  }}
+/>
+```

package/lib/input/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: 输入框
+subtitle: n-input
+icon: 🍣
+---
+
+# 输入框
+
+> 在页面中输入文字内容

package/lib/input/examples/basic.md

@@ -0,0 +1,31 @@
+---
+title: 基本使用
+description: 基本使用
+order: 1
+---
+
+```html
+<div style="width:180px;display: flex; flex-direction: column; gap: 12px;">
+  <n-input type="text" label="Text" required="true"></n-input>
+  <n-input type="number" label="Number"></n-input>
+  <n-input type="url" label="Url"></n-input>
+  <n-input type="email" label="Email"></n-input>
+  <n-input type="password" label="Password"></n-input>
+  <n-input type="tel" label="Tel"></n-input>
+  <n-input type="user" label="User"></n-input>
+  <n-input type="time" label="Disabled time" disabled="true"></n-input>
+</div>
+```
+
+```jsx
+<div style={{ width: '180px', display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
+  <n-input type="text" label="Text" required />
+  <n-input type="number" label="Number" />
+  <n-input type="url" label="Url" />
+  <n-input type="email" label="Email" />
+  <n-input type="password" label="Password" />
+  <n-input type="tel" label="Tel" />
+  <n-input type="user" label="User" />
+  <n-input type="time" label="Disabled time" disabled />
+</div>
+```

package/lib/input/examples/prefix&suffix.md

@@ -0,0 +1,33 @@
+---
+title: 在输入框上添加前缀或后缀图标
+description: 通过 `suffix` 属性给输入框尾部添加内容; 通过 `prefix` 属性给输入框头部添加内容
+order: 3
+---
+
+```html
+<div style="width:180px;display: flex; flex-direction: column; gap: 12px;">
+  <n-input label="用户" placeholder="请输入名称" prefix-icon="👨" default-value="admin"></n-input>
+  <n-input label="密码" type="password" placeholder="请输入密码" prefix-icon="㊙️" caps-lock-icon="⇪"></n-input>
+  <n-input
+    label="验证码"
+    auto-complete="one-time-code"
+    placeholder="请输入验证码"
+    suffix-icon="45秒"
+    disabled="true"
+  ></n-input>
+</div>
+```
+
+```jsx
+<div style={{ width: '180px', display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
+  <n-input label="用户" placeholder="请输入名称" prefix-icon="👨" defaultValue="admin" />
+  <n-input label="密码" type="password" placeholder="请输入密码" prefix-icon="㊙️" />
+  <n-input
+    label="验证码"
+    autoComplete="one-time-code"
+    placeholder="请输入验证码"
+    suffix-icon="45秒"
+    disabled
+  />
+</div>
+```

package/lib/input/examples/size.md

@@ -0,0 +1,21 @@
+---
+title: 不同尺寸
+description: 输入框内置有大、中、小三种尺寸。通过设置 `size` 为 `large`、`small` 分别把尺寸设为大、小尺寸。若不设置 `size`，则尺寸为中 'normal'。
+order: 2
+---
+
+```html
+<div style="width:180px;display: flex; flex-direction: column; gap: 12px;">
+  <n-input label="小尺寸" size="small"></n-input>
+  <n-input label="默认大小" placeholder="请输入文字"></n-input>
+  <n-input label="大尺寸" size="large" placeholder="请输入文字"></n-input>
+</div>
+```
+
+```jsx
+<div style={{ width: '180px', display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
+  <n-input label="小尺寸" size="small" />
+  <n-input label="默认大小" placeholder="请输入文字" />
+  <n-input label="大尺寸" size="large" placeholder="请输入文字" />
+</div>
+```

package/lib/input/examples/status.md

@@ -0,0 +1,23 @@
+---
+title: 自定义状态
+description: 使用 `status` 为输入框添加状态，可选 `error`、`warning`、`success`
+order: 4
+---
+
+```html
+<div style="width:180px;display: flex; flex-direction: column; gap: 12px;">
+  <n-input type="email" label="Email" disabled="true" status="success"></n-input>
+  <n-input type="password" label="Password" status="error"></n-input>
+  <n-input type="tel" label="Tel" status="warning"></n-input>
+  <n-input type="user" label="User" status="success"></n-input>
+</div>
+```
+
+```jsx
+<div style={{ width: '180px', display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
+  <n-input type="email" label="Email" disabled status="success" />
+  <n-input type="password" label="Password" status="error" />
+  <n-input type="tel" label="Tel" status="warning" />
+  <n-input type="user" label="User" status="success" />
+</div>
+```

package/lib/input-number/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: 数字输入框
+subtitle: n-input-number
+icon: ①
+---
+
+# 数字输入框
+
+> 在页面中进行数字输入, 可以通过按下鼠标后拖动来快速调整数值

package/lib/input-number/examples/basic.md

@@ -0,0 +1,26 @@
+---
+title: 基本使用
+description: 可以通过 `value` 设置值, 通过 `change` 事件获取值变更的消息
+order: 1
+---
+
+```html
+<n-input-number label="获取焦点时按住鼠标左键开始拖动试试" value="0"></n-input-number>
+<script>
+  const el = container.querySelector('n-input-number');
+
+  el.onchange = function (e) {
+    console.log('html', e.detail);
+  };
+</script>
+```
+
+```jsx
+<n-input-number
+  label="获取焦点时按住鼠标左键开始拖动试试"
+  value={0}
+  onChange={(e) => {
+    console.log('jsx', e.detail);
+  }}
+/>
+```

package/lib/input-number/examples/formatter.md

@@ -0,0 +1,36 @@
+---
+title: 自定义格式
+description: 通过 `formatter` 和 `parser` 来自定义输入栏显示内容
+order: 2
+---
+
+```html
+<n-input-number label="完成度" min="0" max="1" step="0.01"></n-input-number>
+<script>
+  const el = container.querySelector('n-input-number');
+
+  el.formatter = function (v = 0) {
+    return `${Number((v * 100).toFixed(2))}%`;
+  };
+  el.parser = function (v = '') {
+    return Number(v.replace(/%$/, '') || '0') / 100;
+  };
+</script>
+```
+
+```jsx
+<n-input-number
+  label="完成度"
+  min={0}
+  max={1}
+  step={0.01}
+  formatter={() =>
+    (v = 0) =>
+      `${Number((v * 100).toFixed(2))}%`
+    }
+  parser={() =>
+    (v = '0%') =>
+      Number(v.replace(/%$/, '')) / 100
+    }
+/>
+```

package/lib/input-number/examples/max-min.md

@@ -0,0 +1,13 @@
+---
+title: 最大值 & 最小值
+description: 通过设置 `min` 来约束最小值; 通过设置 `max` 来约束最大值
+order: 3
+---
+
+```html
+<n-input-number label="范围" placeholder="请输入0~100以内的数值" min="0" max="100"></n-input-number>
+```
+
+```jsx
+<n-input-number label="范围" placeholder="请输入0~100以内的数值" min={0} max={100} />
+```

package/lib/katex/README.mdx

@@ -0,0 +1,42 @@
+---
+type: 数据展示
+title: 数学公式
+subtitle: n-katex
+icon: ∛
+---
+
+export const katex = import('n-katex');
+
+# 数学公式
+
+> 使用该组件你需要安装 **[n-katex](https://www.npmjs.com/package/n-katex)**
+
+## Install
+
+```shell
+yarn add n-katex -S
+# or
+npm install n-katex
+```
+
+## 在 jsx 中使用
+
+```jsx
+import 'n-katex';
+
+<n-katex>{'\\underbrace{a+b+\\dots+n}_{m2}'}</n-katex>;
+```
+
+## 在 html5 中使用
+
+```html
+<!-- 引入 CDN 资源 -->
+<script src="https://cdn.jsdelivr.net/npm/n-katex@1.0.5/umd/index.js"></script>
+<!-- 使用 -->
+<body>
+  行内公式
+  <n-katex>\underbrace{a+b+\dots+n}_{m2}</n-katex>
+</body>
+```
+
+> [点击查看 KaTex 完整配置项](https://katex.org/docs/options.html)

package/lib/katex/examples/block.md

@@ -0,0 +1,25 @@
+---
+title: 块级公式
+description: 单独使用一块区域作为公式展示
+order: 2
+---
+
+```html
+<n-katex display-mode="true" fleqn="true">
+\begin{array}{c}
+  S= \binom{N}{n},A_{k}=\binom{M}{k}\cdot \binom{N-M}{n-k} \\
+  P\left ( A_{k}\right ) = \frac{\binom{M}{k}\cdot \binom{N-M}{n-k}}{\binom{N}{n}}
+\end{array}
+</n-katex>
+```
+
+```jsx
+<n-katex display-mode="true" fleqn="false">
+{`
+\\begin{array}{c}
+  S= \\binom{N}{n},A_{k}=\\binom{M}{k}\\cdot \\binom{N-M}{n-k} \\\\
+  P\\left ( A_{k}\\right ) = \\frac{\\binom{M}{k}\\cdot \\binom{N-M}{n-k}}{\\binom{N}{n}}
+\\end{array}
+`}
+</n-katex>
+```

package/lib/katex/examples/inline.md

@@ -0,0 +1,19 @@
+---
+title: 内联公式
+description: 在行内与其余内容置于一处的效果
+order: 1
+---
+
+```html
+<p>
+  行内公式
+  <n-katex>\underbrace{a+b+\dots+n}_{m2}</n-katex>
+</p>
+```
+
+```jsx
+<p>
+  行内公式
+  <n-katex>{'\\underbrace{a+b+\\dots+n}_{m2}'}</n-katex>
+</p>
+```

package/lib/md/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据展示
+title: Markdown
+subtitle: n-md
+icon: 🔱
+---
+
+# Markdown
+
+> 在 web 页面中渲染 markdown 文档

package/lib/md/examples/in-children.md

@@ -0,0 +1,23 @@
+---
+title: 直接在写在标签内
+description: 直接在标签内写 `markdown` 内容
+order: 1
+---
+
+```html
+<n-md>
+#### 第一种方式
+
+!> 直接在写在标签内
+</n-md>
+```
+
+```jsx
+<n-md>
+    {`
+#### 第一种方式
+
+!> 直接在写在标签内
+`}
+  </n-md>
+```

package/lib/md/examples/in-text.md

@@ -0,0 +1,32 @@
+---
+title: 通过属性传递
+description: 在 `text` 属性上传递 `markdown` 内容
+order: 2
+---
+
+```html
+<n-md></n-md>
+<script>
+  const el = container.querySelector('n-md');
+  el.text = `
+#### 第二种方式 (开启了图片查看器)
+
+!> 写在 text 属性上
+
+![图片](https://react-photo-view.vercel.app/_next/static/media/5.7ace37c7.jpg)
+`;
+</script>
+```
+
+```jsx
+<n-md
+  picture-viewer={false}
+  text={`
+#### 第二种方式 (关闭了图片查看器)
+
+!> 写在 text 属性上
+
+![图片](https://react-photo-view.vercel.app/_next/static/media/3.70695fb9.jpg)
+`}
+/>
+```

package/lib/md/examples/math.md

@@ -0,0 +1,36 @@
+---
+title: 数学公式
+description: 通过 `$` 包裹的将渲染为行内公式, 通过 `$$` 包裹的将渲染为块级公式
+order: 3
+---
+
+```html
+<n-md>
+内联公式$\left(\LARGE{AB}\right)$
+内联公式$\xcancel{ABC}$
+
+$$
+\begin{equation}
+  x = a_0 + \cfrac{1}{a_1
+          + \cfrac{1}{a_2
+          + \cfrac{1}{a_3 + \cfrac{1}{a_4} } } }
+\end{equation}
+$$
+</n-md>
+```
+
+```jsx
+<n-md
+  text={`
+内联公式$\\left(\\LARGE{AB}\\right)$
+内联公式$\\xcancel{ABC}$
+
+$$
+\\begin{equation}
+  x = a_0 + \\cfrac{1}{a_1
+          + \\cfrac{1}{a_2
+          + \\cfrac{1}{a_3 + \\cfrac{1}{a_4} } } }
+\\end{equation}
+$$`}
+/>
+```

package/lib/menu/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 导航菜单
+subtitle: n-menu
+icon: ☰
+---
+
+# Menu 导航菜单
+
+> 为页面和功能提供导航的菜单列表。

package/lib/menu/examples/basic.md

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

package/lib/menu/examples/field-names.md

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

package/lib/menu/examples/icon.md

@@ -0,0 +1,125 @@
+---
+title: 带图标的选项
+description: 给每一项添加独特的图标
+order: 3
+---
+
+```html
+<n-menu></n-menu>
+<script>
+  const el = container.querySelector('n-menu');
+
+  el.openKeys = ['一级菜单'];
+  el.onchange = function (e) {
+    console.log(e.detail);
+  };
+  el.addEventListener('openchange', function (e) {
+    el.openKeys = e.detail;
+  });
+  el.items = [
+    {
+      label: '一级菜单',
+      icon: '❤️',
+      children: [
+        {
+          label: '动物',
+          options: [
+            { label: '狮子', value: '狮子', icon: '🦁', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙', icon: '🐸', suffix: 'option' },
+          ],
+        },
+        {
+          label: '动物2',
+          options: [
+            { label: '狮子', value: '狮子2', icon: '🦁', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙2', icon: '🐸', suffix: 'option' },
+          ],
+        },
+      ],
+    },
+    {
+      label: '二级菜单',
+      icon: '👂',
+      suffix: 'two',
+      children: [
+        {
+          label: '动物3',
+          options: [
+            { label: '狮子', value: '狮子3', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙3' },
+          ],
+        },
+        {
+          label: '动物4',
+          options: [
+            { label: '狮子', value: '狮子4' },
+            { label: '大青蛙', value: '大青蛙4', suffix: 'option' },
+          ],
+        },
+      ],
+    },
+  ];
+</script>
+```
+
+```jsx
+function Demo() {
+  let el;
+  const items = [
+    {
+      label: '一级菜单',
+      icon: '❤️',
+      children: [
+        {
+          label: '动物',
+          options: [
+            { label: '狮子', value: '狮子', icon: '🦁', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙', icon: '🐸', suffix: 'option' },
+          ],
+        },
+        {
+          label: '动物2',
+          options: [
+            { label: '狮子', value: '狮子2', icon: '🦁', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙2', icon: '🐸', suffix: 'option' },
+          ],
+        },
+      ],
+    },
+    {
+      label: '二级菜单',
+      icon: '👂',
+      suffix: 'two',
+      children: [
+        {
+          label: '动物3',
+          options: [
+            { label: '狮子', value: '狮子3', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙3' },
+          ],
+        },
+        {
+          label: '动物4',
+          options: [
+            { label: '狮子', value: '狮子4' },
+            { label: '大青蛙', value: '大青蛙4', suffix: 'option' },
+          ],
+        },
+      ],
+    },
+  ];
+
+  function openChange(e) {
+    el.openKeys = e.detail;
+  }
+
+  return (
+    <n-menu
+      ref={(e) => (el = e)}
+      open-keys={['一级菜单']}
+      onOpenChange={openChange}
+      items={items}
+    />
+  );
+}
+```

package/lib/menu/examples/multiple.md

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

package/lib/modal/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 反馈
+title: 模态框
+subtitle: n-modal
+icon: ☱
+---
+
+# Modal 模态对话框
+
+> 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `模态框` 在当前页面正中打开一个浮层，在浮层中进行操作。