neko-ui 2.8.21 → 2.8.22

package/lib/tree/examples/multiple.md

@@ -0,0 +1,117 @@
+---
+title: 多选模式
+description: 将 `multiple` 属性设置为 `true` 来开启多选模式; 重复点击同一项时，如果已选中则取消选中。
+order: 3
+---
+
+```html
+<n-tree multiple="true"></n-tree>
+<script>
+  const el = container.querySelector('n-tree');
+
+  el.onchange = function (e) {
+    const [key, item] = e.detail;
+    el.value = key;
+    console.log('html', item);
+  };
+  el.data = [
+    {
+      title: '文件名称',
+      subTitle: 'object',
+      key: 'a',
+      children: [
+        {
+          title: '备注',
+          subTitle: 'object',
+          key: 'a.b',
+          children: [
+            {
+              title: '备注',
+              subTitle: 'string',
+              key: 'a.b.x',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '编号',
+      subTitle: 'object',
+      key: 'b',
+      children: [
+        {
+          title: '备注',
+          subTitle: 'string',
+          key: 'b2',
+        },
+        {
+          title: '是否有效',
+          subTitle: 'boolean',
+          key: 'c2',
+        },
+      ],
+    },
+  ];
+</script>
+```
+
+```jsx
+function Demo() {
+  let el;
+  const data = [
+    {
+      title: '文件名称',
+      subTitle: 'object',
+      key: 'a',
+      children: [
+        {
+          title: '备注',
+          subTitle: 'object',
+          key: 'a.b',
+          children: [
+            {
+              title: '备注',
+              subTitle: 'string',
+              key: 'a.b.x',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '编号',
+      subTitle: 'object',
+      key: 'b',
+      children: [
+        {
+          title: '备注',
+          subTitle: 'string',
+          key: 'b2',
+        },
+        {
+          title: '是否有效',
+          subTitle: 'boolean',
+          key: 'c2',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <n-tree
+      ref={(e) => (el = e)}
+      data={data}
+      multiple
+      // 或者使用数据绑定
+      value={[]}
+      onChange={(e) => {
+        if (el) {
+          const [key, item] = e.detail;
+          el.value = key;
+          console.log('jsx', item);
+        }
+      }}
+    />
+  );
+}
+```

package/lib/tree/examples/readonly.md

@@ -0,0 +1,90 @@
+---
+title: 只读模式
+description: 通过设置 `readonly` 属性来开启只读模式, 不会触发 `onchange` 事件
+order: 7
+---
+
+```html
+<n-tree readonly="true" value="fileName.code"></n-tree>
+<script>
+  const el = container.querySelector('n-tree');
+
+  el.onchange = function (e) {
+    // 不会触发
+    console.log(e);
+  };
+  el.data = [
+    {
+      title: '文件地址',
+      subTitle: 'fileAddr',
+      key: 'fileAddr',
+    },
+    {
+      subTitle: 'fileName',
+      title: '文件名称',
+      key: 'fileName',
+      children: [
+        {
+          title: '编号',
+          subTitle: 'fileName.code',
+          key: 'fileName.code',
+        },
+      ],
+    },
+    {
+      title: '编号',
+      subTitle: 'code',
+      key: 'code',
+      children: [
+        {
+          title: '是否有效',
+          subTitle: 'valid',
+          key: 'valid',
+        },
+      ],
+    },
+  ];
+</script>
+```
+
+```jsx
+<n-tree
+  data={[
+    {
+      title: '文件地址',
+      subTitle: 'fileAddr',
+      key: 'fileAddr',
+    },
+    {
+      subTitle: 'fileName',
+      title: '文件名称',
+      key: 'fileName',
+      children: [
+        {
+          title: '编号',
+          subTitle: 'fileName.code',
+          key: 'fileName.code',
+        },
+      ],
+    },
+    {
+      title: '编号',
+      subTitle: 'code',
+      key: 'code',
+      children: [
+        {
+          title: '是否有效',
+          subTitle: 'valid',
+          key: 'valid',
+        },
+      ],
+    },
+  ]}
+  value="fileName.code"
+  readonly
+  onChange={(e) => {
+    // 不会触发
+    console.log(e);
+  }}
+/>
+```

package/lib/tree/examples/render-tree-string1.md

@@ -0,0 +1,70 @@
+---
+title: 渲染树状字符串
+description: 渲染 tree 命令输出的树状字符串
+order: 9
+---
+
+```html
+<n-tree></n-tree>
+<script>
+  const el = container.querySelector('n-tree');
+
+  el.data = `.
+|-- components
+|   |-- index.ts
+|   \`-- wave-circle
+| |-- examples
+| | |-- api.md
+| | \`-- demo.mdx
+| |-- index.tsx
+| \`-- README.mdx
+|-- config
+| |-- index.ts
+| \`-- prod.ts
+|-- docs
+| |-- index.js
+| \`-- index.html
+|-- es
+| |-- index.js
+| \`-- wave-circle
+| \`-- index.js
+|-- .eslintrc.yaml
+|-- .gitattributes
+|-- .prettierrc.yaml
+|-- .stylelintrc.yaml
+|-- package.json
+|-- README.md
+\`-- tsconfig.json`;
+</script>
+```
+
+```jsx
+<n-tree
+  data={`.
+|-- components
+|   |-- index.ts
+|   \`-- wave-circle
+| |-- examples
+| | |-- api.md
+| | \`-- demo.mdx
+| |-- index.tsx
+| \`-- README.mdx
+|-- config
+| |-- index.ts
+| \`-- prod.ts
+|-- docs
+| |-- index.js
+| \`-- index.html
+|-- es
+| |-- index.js
+| \`-- wave-circle
+| \`-- index.js
+|-- .eslintrc.yaml
+|-- .gitattributes
+|-- .prettierrc.yaml
+|-- .stylelintrc.yaml
+|-- package.json
+|-- README.md
+\`-- tsconfig.json`}
+/>
+```

package/lib/tree/examples/render-tree-string2.md

@@ -0,0 +1,52 @@
+---
+title: 渲染 tree 命令输出的树状字符串
+description: 渲染另一种格式的树状字符串
+order: 10
+---
+
+```html
+<n-tree></n-tree>
+<script>
+  const el = container.querySelector('n-tree');
+
+  el.data = `.
+├── components
+│   ├── @moneko
+│   │   ├── README.mdx
+│   │   └── 🕸sso
+│   │       ├── README.mdx
+│   │       └── examples
+│   │           └── readme.md
+│   └── index.ts
+├── config
+│   ├── deploy.ts
+│   └── index.ts
+├── jest.config.ts
+├── package.json
+├── tsconfig.json
+└── typings
+    └── typings.d.ts`;
+</script>
+```
+
+```jsx
+<n-tree
+  data={`.
+├── components
+│   ├── @moneko
+│   │   ├── README.mdx
+│   │   └── 🕸sso
+│   │       ├── README.mdx
+│   │       └── examples
+│   │           └── readme.md
+│   └── index.ts
+├── config
+│   ├── deploy.ts
+│   └── index.ts
+├── jest.config.ts
+├── package.json
+├── tsconfig.json
+└── typings
+    └── typings.d.ts`}
+/>
+```

package/lib/tree/examples/schema.md

@@ -0,0 +1,130 @@
+---
+title: 渲染JSON Schema结构
+description: 通过设置 `fromSchema` 属性渲染来支持 `JSONSchema` 的数据源。
+order: 5
+---
+
+```html
+<n-tree from-schema="true"></n-tree>
+<script>
+  const el = container.querySelector('n-tree');
+  el.onchange = function (e) {
+    const [key, item] = e.detail;
+
+    el.value = key;
+    console.log(item);
+  };
+  el.data = {
+    $schema: 'http://json-schema.org/draft-07/schema',
+    $id: 'http://example.com/example.json',
+    type: 'object',
+    additionalProperties: true,
+    properties: {
+      user: {
+        type: 'object',
+        title: '用户信息',
+        propertyOrder: 12,
+        required: ['name', 'email'],
+        properties: {
+          name: {
+            type: 'string',
+            title: '姓名',
+            description: '',
+            default: '',
+          },
+          works: {
+            type: 'object',
+            title: '履历',
+            description: '',
+            required: ['desgin'],
+            properties: {
+              desgin: {
+                type: 'string',
+                title: '设计',
+                description: '',
+              },
+            },
+          },
+        },
+      },
+      tags: {
+        type: 'array',
+        title: '标签',
+        description: '',
+        items: {
+          type: 'object',
+          title: 'items',
+          description: '',
+          additionalProperties: true,
+          properties: {
+            s: {
+              type: 'string',
+              title: 's',
+              description: '',
+            },
+          },
+        },
+      },
+    },
+  };
+</script>
+```
+
+```jsx
+<n-tree
+  data={{
+    $schema: 'http://json-schema.org/draft-07/schema',
+    $id: 'http://example.com/example.json',
+    type: 'object',
+    additionalProperties: true,
+    properties: {
+      user: {
+        type: 'object',
+        title: '用户信息',
+        propertyOrder: 12,
+        required: ['name', 'email'],
+        properties: {
+          name: {
+            type: 'string',
+            title: '姓名',
+            description: '',
+            default: '',
+          },
+          works: {
+            type: 'object',
+            title: '履历',
+            description: '',
+            required: ['desgin'],
+            properties: {
+              desgin: {
+                type: 'string',
+                title: '设计',
+                description: '',
+              },
+            },
+          },
+        },
+      },
+      tags: {
+        type: 'array',
+        title: '标签',
+        description: '',
+        items: {
+          type: 'object',
+          title: 'items',
+          description: '',
+          additionalProperties: true,
+          properties: {
+            s: {
+              type: 'string',
+              title: 's',
+              description: '',
+            },
+          },
+        },
+      },
+    },
+  }}
+  from-schema
+/>
+```

package/lib/tree/examples/size.md

@@ -0,0 +1,125 @@
+---
+title: 不同的尺寸
+description: Tree 内置有大、中、小三种尺寸。通过 `size` 设置尺寸; 默认为 'normal'。
+order: 7
+---
+
+```html
+<n-segmented default-value="normal"></n-segmented>
+<n-tree></n-tree>
+<script>
+  const segmented = container.querySelector('n-segmented');
+  const tree = container.querySelector('n-tree');
+
+  segmented.options = [
+    { label: '小', value: 'small' },
+    { label: '默认:中', value: 'normal' },
+    { label: '大', value: 'large' },
+  ];
+  segmented.onchange = function (e) {
+    tree.size = e.detail;
+  };
+  tree.data = [
+    {
+      title: '文件名称',
+      subTitle: 'object',
+      key: 'a',
+      children: [
+        {
+          title: '备注',
+          subTitle: 'object',
+          key: 'a.b',
+          children: [
+            {
+              title: '备注',
+              subTitle: 'string',
+              key: 'a.b.x',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '编号',
+      subTitle: 'object',
+      key: 'b',
+      children: [
+        {
+          title: '备注',
+          subTitle: 'string',
+          key: 'b2',
+        },
+        {
+          title: '是否有效',
+          subTitle: 'boolean',
+          key: 'c2',
+        },
+      ],
+    },
+  ];
+</script>
+```
+
+```jsx
+function Demo() {
+  let el;
+
+  return (
+    <>
+      <n-segmented
+        default-value="normal"
+        options={[
+          { label: '小', value: 'small' },
+          { label: '默认:中', value: 'normal' },
+          { label: '大', value: 'large' },
+        ]}
+        onChange={(e) => {
+          el.size = e.detail;
+        }}
+      />
+      <n-tree
+        ref={(e) => (el = e)}
+        size="normal"
+        data={[
+          {
+            title: '文件名称',
+            subTitle: 'object',
+            key: 'a',
+            children: [
+              {
+                title: '备注',
+                subTitle: 'object',
+                key: 'a.b',
+                children: [
+                  {
+                    title: '备注',
+                    subTitle: 'string',
+                    key: 'a.b.x',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            title: '编号',
+            subTitle: 'object',
+            key: 'b',
+            children: [
+              {
+                title: '备注',
+                subTitle: 'string',
+                key: 'b2',
+              },
+              {
+                title: '是否有效',
+                subTitle: 'boolean',
+                key: 'c2',
+              },
+            ],
+          },
+        ]}
+      />
+    </>
+  );
+}
+```

package/lib/tree/examples/toggle.md

@@ -0,0 +1,71 @@
+---
+title: 重复点击取消选中
+description: 通过设置`toggle`属性来开启取消选中, 仅支持单选模式; 重复点击同一项时，如果已选中则取消选中。
+order: 6
+---
+
+```html
+<n-tree toggle="true"></n-tree>
+<script>
+  const el = container.querySelector('n-tree');
+
+  el.onchange = function (e) {
+    const [key, item] = e.detail;
+  
+    el.value = key;
+    console.log(item);
+  };
+  el.data = [
+    {
+      title: '文件地址',
+      subTitle: 'fileAddr',
+      key: 'fileAddr',
+    },
+    {
+      title: '编号',
+      subTitle: 'channelCustNum',
+      key: 'channelCustNum',
+    },
+    {
+      title: '编号2',
+      subTitle: 'string',
+      key: 'string',
+    },
+  ];
+</script>
+```
+
+```jsx
+function Demo() {
+  let el;
+  return (
+    <n-tree
+      ref={(e) => (el = e)}
+      toggle
+      onChange={(e) => {
+        const [key, item] = e.detail;
+
+        el.value = key;
+        console.log(item);
+      }}
+      data={[
+        {
+          title: '文件地址',
+          subTitle: 'fileAddr',
+          key: 'fileAddr',
+        },
+        {
+          title: '编号',
+          subTitle: 'channelCustNum',
+          key: 'channelCustNum',
+        },
+        {
+          title: '编号2',
+          subTitle: 'string',
+          key: 'string',
+        },
+      ]}
+    />
+  );
+}
+```

package/lib/typography/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 文字排版
+subtitle: n-typography
+icon: 🦟
+---
+
+# Typography 排版
+
+> 文本的基本格式

package/lib/typography/examples/basic.md

@@ -0,0 +1,27 @@
+---
+title: 基本使用
+description: 文本的基本格式
+order: 1
+---
+
+```html
+<n-typography>normal text</n-typography>
+<n-typography type="secondary">secondary text</n-typography>
+<n-typography type="success">success text</n-typography>
+<n-typography type="error">danger text</n-typography>
+<n-typography type="warning">warning text</n-typography>
+<n-typography type="primary">primary text</n-typography>
+<n-typography type="primary" disabled="true"> disabled text </n-typography>
+```
+
+```jsx
+<n-typography>normal text</n-typography>
+<n-typography type="secondary">secondary text</n-typography>
+<n-typography type="success">success text</n-typography>
+<n-typography type="error">danger text</n-typography>
+<n-typography type="warning">warning text</n-typography>
+<n-typography type="primary">primary text</n-typography>
+<n-typography type="primary" disabled>
+  disabled text
+</n-typography>
+```