neko-ui 2.8.21 → 2.8.23

package/lib/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/theme/index.ts"],"sourcesContent":["import {\n  type Accessor,\n  type Setter,\n  createEffect,\n  createMemo,\n  createRoot,\n  createSignal,\n  getOwner,\n} from 'solid-js';\nimport { colorParse, mixColor, toneColor } from '@moneko/common';\nimport { CSSObject, css } from '@moneko/css';\nexport { toneColor } from '@moneko/common';\n\n/** 生成主题色调\n * @param {string} base 基础颜色\n * @param {ThemeOption} option 配置项\n * @returns {Record<string, string>} 主题色调\n */\nexport function generateColor(base: string, option: ThemeOption): Record<string, string> {\n  const obj = toneColor(base, option?.dark);\n  const textColor = colorParse(obj[5]);\n  const baseColor = colorParse(base);\n\n  return {\n    [`--${option.name}-text`]: textColor.setAlpha(0.65).toRgbaString(),\n    [`--${option.name}-secondary`]: textColor.setAlpha(0.45).toRgbaString(),\n    [`--${option.name}-heading`]: obj[5],\n    [`--${option.name}-active`]: obj[30],\n    [`--${option.name}-color`]: obj[40],\n    [`--${option.name}-hover`]: mixColor(obj[40], obj[30], 15),\n    [`--${option.name}-secondary-bg`]: obj[70],\n    [`--${option.name}-border`]: obj[80],\n    [`--${option.name}-outline`]: mixColor(obj[90], obj[40], 5),\n    [`--${option.name}-selection`]: obj[90],\n    [`--${option.name}-notify-bg`]: colorParse(obj[90]).setAlpha(0.8).toRgbaString(),\n    [`--on-${option.name}-selection`]: obj[10],\n    [`--${option.name}-shadow`]: baseColor.setAlpha(0.12).toRgbaString(),\n    [`--${option.name}-shadow-1`]: baseColor.setAlpha(0.08).toRgbaString(),\n    [`--${option.name}-shadow-2`]: baseColor.setAlpha(0.05).toRgbaString(),\n    [`--${option.name}-details-bg`]: obj[95],\n    [`--${option.name}-component-bg`]: obj[98],\n    [`--${option.name}-bg`]: obj[99],\n    [`--on-${option.name}-bg`]: obj[5],\n  };\n}\n\n/** 颜色模式 */\nexport enum ColorScheme {\n  /** 明亮 */\n  light = 'light',\n  /** 暗黑 */\n  dark = 'dark',\n  /** 跟随系统 */\n  auto = 'auto',\n}\n\nfunction createTheme() {\n  const baseTokens = css({\n    ':root,:host': {\n      '--scrollbar-size': '4px',\n      '--font-size': '14px',\n      '--font-size-sm': '12px',\n      '--font-size-xs': '10px',\n      '--font-size-lg': '16px',\n      '--border-base': '1px solid var(--border-color)',\n      '--border-radius': '8px',\n      '--text-color': 'var(--primary-text)',\n      '--text-secondary': 'var(--primary-secondary)',\n      '--text-heading': 'var(--primary-heading)',\n      '--text-selection': 'var(--primary-selection)',\n      '--transition-duration': '0.3s',\n      '--mask-bg': 'rgb(0 0 0 / 5%)',\n      '--modal-component-bg': 'rgb(255 255 255 / 80%)',\n      '--modal-box-shadow': '0 5px 35px rgb(0 0 0 / 10%)',\n      '--notification-box-shadow': '0 4px 16px rgb(0 0 0 / 5%)',\n      '--transition-timing-function': 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n      fontSize: 'var(--font-size)',\n      fontFamily:\n        \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'\",\n      color: 'var(--text-color, rgb(0 0 0 / 65%))',\n      lineHeight: 1.8,\n    },\n    '[disabled]:not([disabled=\"false\"]):not(n-img)': {\n      cursor: 'not-allowed',\n      color: 'var(--disable-color)',\n    },\n    '::selection': {\n      backgroundColor: 'var(--text-selection)',\n    },\n    '::-webkit-scrollbar': {\n      inlineSize: 'var(--scrollbar-size)',\n      blockSize: 'var(--scrollbar-size)',\n    },\n  });\n  const preset =\n    ColorScheme[localStorage.getItem('color-scheme') as keyof typeof ColorScheme] || 'auto';\n  /** 检测 prefers-color-scheme 媒体查询是否为 light 模式 */\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  const [scheme, setScheme] = createSignal<keyof typeof ColorScheme>(preset);\n  const [isDark, setIsDark] = createSignal(media.matches);\n  const [light, setLight] = createSignal({\n    primary: '#5794ff',\n    warning: '#faad14',\n    error: '#ff4d4f',\n    success: '#52c41a',\n  });\n  const [dark, setDark] = createSignal({\n    primary: '#4d81dc',\n    warning: '#bb8314',\n    error: '#901c22',\n    success: '#419418',\n  });\n  const primary = createMemo(() => generateColor(light().primary, { name: 'primary' }));\n  const darkPrimary = createMemo(() =>\n    generateColor(dark().primary, { name: 'primary', dark: true }),\n  );\n  const warning = createMemo(() => generateColor(light().warning, { name: 'warning' }));\n  const darkWarning = createMemo(() =>\n    generateColor(dark().warning, { name: 'warning', dark: true }),\n  );\n  const success = createMemo(() => generateColor(light().success, { name: 'success' }));\n  const darkSuccess = createMemo(() =>\n    generateColor(dark().success, { name: 'success', dark: true }),\n  );\n  const error = createMemo(() => generateColor(light().error, { name: 'error' }));\n  const darkError = createMemo(() => generateColor(dark().error, { name: 'error', dark: true }));\n\n  function getHostCss(tokens: CSSObject) {\n    let str = '';\n\n    for (const key in tokens) {\n      if (Object.prototype.hasOwnProperty.call(tokens, key)) {\n        str += `${key}:${tokens[key]};`;\n      }\n    }\n    return `${baseTokens}:root,:host{${str}}`;\n  }\n  const lightCss = createMemo(() => {\n    const tokens = Object.assign({}, primary(), warning(), success(), error(), {\n      '--bg': 'transparent',\n      '--disable-color': 'rgb(0 0 0 / 25%)',\n      '--disable-bg': 'rgb(0 0 0 / 4%)',\n      '--disable-border': '#d9d9d9',\n      '--border-color': 'var(--primary-border)',\n      '--component-bg': 'var(--primary-bg)',\n    });\n\n    return getHostCss(tokens);\n  });\n  const darkCss = createMemo(() => {\n    const tokens = Object.assign({}, darkPrimary(), darkWarning(), darkSuccess(), darkError(), {\n      '--bg': '#1c1c1c',\n      '--disable-color': 'rgb(255 255 255 / 25%)',\n      '--disable-bg': 'rgb(255 255 255 / 8%)',\n      '--disable-border': '#424242',\n      '--border-color': '#303030',\n      '--component-bg': '#141414',\n      '--primary-shadow': 'rgb(0 0 0 / 12%)',\n      '--primary-selection': 'rgb(255 255 255 / 5%)',\n      '--primary-details-bg': 'rgb(255 255 255 / 3%)',\n      '--primary-component-bg': '#000',\n      '--modal-component-bg': 'rgb(30 30 30 / 80%)',\n    });\n\n    return getHostCss(tokens);\n  });\n\n  function update(e: MediaQueryListEvent) {\n    setIsDark(e.matches);\n  }\n  createEffect(() => {\n    const _ = scheme();\n\n    setIsDark(_ === 'dark' || (_ === 'auto' && media.matches));\n  });\n  const baseStyle = createMemo(() => (isDark() ? darkCss() : lightCss()));\n\n  createEffect(() => {\n    if (scheme() === 'auto') {\n      // 监听 prefers-color-scheme 媒体查询变化，自动更新颜色方案\n      media.addEventListener('change', update);\n    } else {\n      media.removeEventListener('change', update);\n    }\n    localStorage.setItem('color-scheme', scheme());\n  });\n\n  return {\n    baseStyle,\n    dark,\n    setDark,\n    light,\n    setLight,\n    scheme,\n    setScheme,\n    isDark,\n  };\n}\n\n/** API */\nexport interface Theme {\n  /** 亮色样式的主要色 */\n  light: Accessor<Color>;\n  /** 设置亮色样式的主要色 */\n  setLight: Setter<Color>;\n  /** 黑色样式的主要色 */\n  dark: Accessor<Color>;\n  /** 设置黑色样式的主要色 */\n  setDark: Setter<Color>;\n  /** 颜色模式\n   * @default 'auto'\n   */\n  scheme: Accessor<keyof typeof ColorScheme>;\n  /** 设置颜色模式 */\n  setScheme: Setter<keyof typeof ColorScheme>;\n  /** 是否为色模式 */\n  isDark: Accessor<boolean>;\n  /** 基本都样式表, 响应 scheme 变化 */\n  baseStyle: Accessor<string>;\n}\n\n/** 主要色 */\ninterface Color {\n  /** 主要\n   * @default '#5794ff'\n   */\n  primary: string;\n  /** 警告\n   * @default '#faad14'\n   */\n  warning: string;\n  /** 错误\n   * @default '#ff4d4f'\n   */\n  error: string;\n  /** 成功\n   * @default '#52c41a'\n   */\n  success: string;\n}\n\nexport interface ThemeOption {\n  /** 是否采用暗色算法\n   * @default false\n   */\n  dark?: boolean;\n  /** 颜色名称 */\n  name: string;\n}\n\nexport default createRoot<Theme>(createTheme, getOwner());\n"],"names":["ColorScheme","generateColor","toneColor","base","option","obj","dark","textColor","colorParse","baseColor","name","setAlpha","toRgbaString","mixColor","createRoot","baseTokens","css","fontSize","fontFamily","color","lineHeight","cursor","backgroundColor","inlineSize","blockSize","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","createSignal","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","createMemo","darkPrimary","darkWarning","darkSuccess","darkError","getHostCss","tokens","str","key","Object","prototype","hasOwnProperty","call","lightCss","assign","darkCss","update","e","createEffect","_","baseStyle","addEventListener","removeEventListener","setItem","getOwner"],"mappings":"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"}
+{"version":3,"sources":["../../components/theme/index.ts"],"sourcesContent":["import {\n  type Accessor,\n  createEffect,\n  createMemo,\n  createRoot,\n  createSignal,\n  getOwner,\n  type Setter,\n} from 'solid-js';\nimport { colorParse, mixColor, toneColor } from '@moneko/common';\nimport { css, type CSSObject } from '@moneko/css';\nexport { toneColor } from '@moneko/common';\n\n/** 生成主题色调\n * @param {string} base 基础颜色\n * @param {ThemeOption} option 配置项\n * @returns {Record<string, string>} 主题色调\n */\nexport function generateColor(base: string, option: ThemeOption): Record<string, string> {\n  const obj = toneColor(base, option.dark);\n  const textColor = colorParse(obj[5]);\n  const baseColor = colorParse(base);\n\n  return {\n    [`--${option.name}-text`]: textColor.setAlpha(0.65).toRgbaString(),\n    [`--${option.name}-secondary`]: textColor.setAlpha(0.45).toRgbaString(),\n    [`--${option.name}-heading`]: obj[5],\n    [`--${option.name}-active`]: obj[30],\n    [`--${option.name}-color`]: obj[40],\n    [`--${option.name}-hover`]: mixColor(obj[40], obj[30], 15),\n    [`--${option.name}-secondary-bg`]: obj[70],\n    [`--${option.name}-border`]: obj[80],\n    [`--${option.name}-outline`]: mixColor(obj[90], obj[40], 5),\n    [`--${option.name}-selection`]: obj[90],\n    [`--${option.name}-notify-bg`]: colorParse(obj[90]).setAlpha(0.8).toRgbaString(),\n    [`--on-${option.name}-selection`]: obj[10],\n    [`--${option.name}-shadow`]: baseColor.setAlpha(0.12).toRgbaString(),\n    [`--${option.name}-shadow-1`]: baseColor.setAlpha(0.08).toRgbaString(),\n    [`--${option.name}-shadow-2`]: baseColor.setAlpha(0.05).toRgbaString(),\n    [`--${option.name}-details-bg`]: obj[95],\n    [`--${option.name}-component-bg`]: obj[98],\n    [`--${option.name}-bg`]: obj[99],\n    [`--on-${option.name}-bg`]: obj[5],\n  };\n}\n\n/** 颜色模式 */\nexport enum ColorScheme {\n  /** 明亮 */\n  light = 'light',\n  /** 暗黑 */\n  dark = 'dark',\n  /** 跟随系统 */\n  auto = 'auto',\n}\n\nfunction createTheme() {\n  const baseTokens = css({\n    ':root,:host': {\n      '--scrollbar-size': '4px',\n      '--font-size': '14px',\n      '--font-size-sm': '12px',\n      '--font-size-xs': '10px',\n      '--font-size-lg': '16px',\n      '--border-base': '1px solid var(--border-color)',\n      '--border-radius': '8px',\n      '--text-color': 'var(--primary-text)',\n      '--text-secondary': 'var(--primary-secondary)',\n      '--text-heading': 'var(--primary-heading)',\n      '--text-selection': 'var(--primary-selection)',\n      '--transition-duration': '0.3s',\n      '--mask-bg': 'rgb(0 0 0 / 5%)',\n      '--modal-component-bg': 'rgb(255 255 255 / 80%)',\n      '--modal-box-shadow': '0 5px 35px rgb(0 0 0 / 10%)',\n      '--notification-box-shadow': '0 4px 16px rgb(0 0 0 / 5%)',\n      '--transition-timing-function': 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n      fontSize: 'var(--font-size)',\n      fontFamily:\n        \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'\",\n      color: 'var(--text-color, rgb(0 0 0 / 65%))',\n      lineHeight: 1.8,\n    },\n    '[disabled]:not([disabled=\"false\"]):not(n-img)': {\n      cursor: 'not-allowed',\n      color: 'var(--disable-color)',\n    },\n    '::selection': {\n      backgroundColor: 'var(--text-selection)',\n    },\n    '::-webkit-scrollbar': {\n      inlineSize: 'var(--scrollbar-size)',\n      blockSize: 'var(--scrollbar-size)',\n    },\n  });\n  const preset =\n    ColorScheme[localStorage.getItem('color-scheme') as keyof typeof ColorScheme] || 'auto';\n  /** 检测 prefers-color-scheme 媒体查询是否为 light 模式 */\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  const [scheme, setScheme] = createSignal<keyof typeof ColorScheme>(preset);\n  const [isDark, setIsDark] = createSignal(media.matches);\n  const [light, setLight] = createSignal({\n    primary: '#5794ff',\n    warning: '#faad14',\n    error: '#ff4d4f',\n    success: '#52c41a',\n  });\n  const [dark, setDark] = createSignal({\n    primary: '#4d81dc',\n    warning: '#bb8314',\n    error: '#901c22',\n    success: '#419418',\n  });\n  const primary = createMemo(() => generateColor(light().primary, { name: 'primary' }));\n  const darkPrimary = createMemo(() =>\n    generateColor(dark().primary, { name: 'primary', dark: true }),\n  );\n  const warning = createMemo(() => generateColor(light().warning, { name: 'warning' }));\n  const darkWarning = createMemo(() =>\n    generateColor(dark().warning, { name: 'warning', dark: true }),\n  );\n  const success = createMemo(() => generateColor(light().success, { name: 'success' }));\n  const darkSuccess = createMemo(() =>\n    generateColor(dark().success, { name: 'success', dark: true }),\n  );\n  const error = createMemo(() => generateColor(light().error, { name: 'error' }));\n  const darkError = createMemo(() => generateColor(dark().error, { name: 'error', dark: true }));\n\n  function getHostCss(tokens: CSSObject) {\n    let str = '';\n\n    for (const key in tokens) {\n      if (Object.prototype.hasOwnProperty.call(tokens, key)) {\n        str += `${key}:${tokens[key]};`;\n      }\n    }\n    return `${baseTokens}:root,:host{${str}}`;\n  }\n  const lightCss = createMemo(() => {\n    const tokens = Object.assign({}, primary(), warning(), success(), error(), {\n      '--bg': 'transparent',\n      '--disable-color': 'rgb(0 0 0 / 25%)',\n      '--disable-bg': 'rgb(0 0 0 / 4%)',\n      '--disable-border': '#d9d9d9',\n      '--border-color': 'var(--primary-border)',\n      '--component-bg': 'var(--primary-bg)',\n    });\n\n    return getHostCss(tokens);\n  });\n  const darkCss = createMemo(() => {\n    const tokens = Object.assign({}, darkPrimary(), darkWarning(), darkSuccess(), darkError(), {\n      '--bg': '#1c1c1c',\n      '--disable-color': 'rgb(255 255 255 / 25%)',\n      '--disable-bg': 'rgb(255 255 255 / 8%)',\n      '--disable-border': '#424242',\n      '--border-color': '#303030',\n      '--component-bg': '#141414',\n      '--primary-shadow': 'rgb(0 0 0 / 12%)',\n      '--primary-selection': 'rgb(255 255 255 / 5%)',\n      '--primary-details-bg': 'rgb(255 255 255 / 3%)',\n      '--primary-component-bg': '#000',\n      '--modal-component-bg': 'rgb(30 30 30 / 80%)',\n    });\n\n    return getHostCss(tokens);\n  });\n\n  function update(e: MediaQueryListEvent) {\n    setIsDark(e.matches);\n  }\n  createEffect(() => {\n    const _ = scheme();\n\n    setIsDark(_ === 'dark' || (_ === 'auto' && media.matches));\n  });\n  const baseStyle = createMemo(() => (isDark() ? darkCss() : lightCss()));\n\n  createEffect(() => {\n    if (scheme() === 'auto') {\n      // 监听 prefers-color-scheme 媒体查询变化，自动更新颜色方案\n      media.addEventListener('change', update);\n    } else {\n      media.removeEventListener('change', update);\n    }\n    localStorage.setItem('color-scheme', scheme());\n  });\n\n  return {\n    baseStyle,\n    dark,\n    setDark,\n    light,\n    setLight,\n    scheme,\n    setScheme,\n    isDark,\n  };\n}\n\n/** API */\nexport interface Theme {\n  /** 亮色样式的主要色 */\n  light: Accessor<Color>;\n  /** 设置亮色样式的主要色 */\n  setLight: Setter<Color>;\n  /** 黑色样式的主要色 */\n  dark: Accessor<Color>;\n  /** 设置黑色样式的主要色 */\n  setDark: Setter<Color>;\n  /** 颜色模式\n   * @default 'auto'\n   */\n  scheme: Accessor<keyof typeof ColorScheme>;\n  /** 设置颜色模式 */\n  setScheme: Setter<keyof typeof ColorScheme>;\n  /** 是否为色模式 */\n  isDark: Accessor<boolean>;\n  /** 基本都样式表, 响应 scheme 变化 */\n  baseStyle: Accessor<string>;\n}\n\n/** 主要色 */\ninterface Color {\n  /** 主要\n   * @default '#5794ff'\n   */\n  primary: string;\n  /** 警告\n   * @default '#faad14'\n   */\n  warning: string;\n  /** 错误\n   * @default '#ff4d4f'\n   */\n  error: string;\n  /** 成功\n   * @default '#52c41a'\n   */\n  success: string;\n}\n\nexport interface ThemeOption {\n  /** 是否采用暗色算法\n   * @default false\n   */\n  dark?: boolean;\n  /** 颜色名称 */\n  name: string;\n}\n\nexport default createRoot<Theme>(createTheme, getOwner());\n"],"names":["ColorScheme","generateColor","toneColor","base","option","obj","dark","textColor","colorParse","baseColor","name","setAlpha","toRgbaString","mixColor","createRoot","baseTokens","css","fontSize","fontFamily","color","lineHeight","cursor","backgroundColor","inlineSize","blockSize","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","createSignal","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","createMemo","darkPrimary","darkWarning","darkSuccess","darkError","getHostCss","tokens","str","key","Object","prototype","hasOwnProperty","call","lightCss","assign","darkCss","update","e","createEffect","_","baseStyle","addEventListener","removeEventListener","setItem","getOwner"],"mappings":"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"}

package/lib/tree/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据展示
+title: 树
+subtitle: n-tree
+icon: 🌳
+---
+
+# Tree 树
+
+> 树形控件

package/lib/tree/examples/basic.md

@@ -0,0 +1,108 @@
+---
+title: 基本使用
+description: 一般情况下，我们只需要传入 `data` 数据进行渲染
+order: 1
+---
+
+```html
+<n-button size="small" type="primary">点击添加字段</n-button>
+<n-tree></n-tree>
+<script>
+  const el = container.querySelector('n-tree');
+  const btn = container.querySelector('n-button');
+
+  btn.onclick = function () {
+    el.data = [
+      ...el.data,
+      {
+        key: Math.random().toString(32).slice(2),
+        name: 'new Field',
+        title: '新字段',
+        subTitle: '(new)',
+        s: 1,
+      },
+    ];
+  };
+  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
+<n-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',
+        },
+      ],
+    },
+  ]}
+/>
+```

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

@@ -0,0 +1,115 @@
+---
+title: 自定义渲染
+description: 通过`renderRow`函数自定义渲染每一行的内容
+order: 4
+---
+
+```html
+<n-tree></n-tree>
+<script>
+  const el = container.querySelector('n-tree');
+
+  el.renderRow = function (item, title, subTitle) {
+    const _tit = document.createElement('span'),
+      _close = document.createElement('i');
+
+    _tit.style.color = 'pink';
+    _tit.textContent = item.title;
+    _close.style.flex = 1;
+    _close.style.textAlign = 'right';
+    _close.textContent = 'x';
+
+    return [_tit, subTitle, _close];
+  };
+  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() {
+  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',
+        },
+      ],
+    },
+  ];
+
+  function renderRow(item, title, subTitle) {
+    return [
+      <span style={{ color: 'red' }}>{item.title}</span>,
+      subTitle,
+      <i style={{ flex: 1, 'text-align': 'right' }}>x</i>,
+    ];
+  }
+  return <n-tree data={data} render-row={() => renderRow} />;
+}
+```

package/lib/tree/examples/direction.md

@@ -0,0 +1,100 @@
+---
+title: 从右到左
+description: 将 `direction` 属性设置为 `rtl` 来支持从右到左的布局;
+order: 2
+---
+
+```html
+<div style="display:flex;justify-content:space-between;">
+  <n-tree direction="ltr" size="small"></n-tree>
+  <n-tree direction="rtl" size="small"></n-tree>
+</div>
+<script>
+  const els = container.querySelectorAll('n-tree');
+  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',
+        },
+      ],
+    },
+  ];
+  els[0].data = data;
+  els[1].data = data;
+</script>
+```
+
+```jsx
+function Demo() {
+  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 (
+    <div style="display:flex;justify-content:space-between;">
+      <n-tree data={data} direction="ltr" size="small" />
+      <n-tree data={data} direction="rtl" size="small" />
+    </div>
+  );
+}
+```

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

@@ -0,0 +1,114 @@
+---
+title: 自定义字段名
+description: 自定义节点 'title'、'key' 等字段
+order: 11
+---
+
+```html
+<n-button size="small" type="primary">点击添加字段</n-button>
+<n-tree></n-tree>
+<script>
+  const el = container.querySelector('n-tree');
+  const btn = container.querySelector('n-button');
+
+  btn.onclick = function () {
+    el.data = [
+      ...el.data,
+      {
+        code: Math.random().toString(32).slice(2),
+        name: '新字段',
+        subTitle: '(new)',
+      },
+    ];
+  };
+  el.fieldNames = {
+    title: 'name',
+    key: 'code',
+  };
+  el.data = [
+    {
+      name: '文件名称',
+      subTitle: 'object',
+      code: 'a',
+      children: [
+        {
+          name: '备注',
+          subTitle: 'object',
+          code: 'a.b',
+          children: [
+            {
+              name: '备注',
+              subTitle: 'string',
+              code: 'a.b.x',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: '编号',
+      subTitle: 'object',
+      code: 'b',
+      children: [
+        {
+          name: '备注',
+          subTitle: 'string',
+          code: 'b2',
+        },
+        {
+          name: '是否有效',
+          subTitle: 'boolean',
+          code: 'c2',
+        },
+      ],
+    },
+  ];
+</script>
+```
+
+```jsx
+<n-tree
+  field-names={{
+    title: 'name',
+    key: 'code',
+  }}
+  data={[
+    {
+      name: '文件名称',
+      subTitle: 'object',
+      code: 'a',
+      children: [
+        {
+          name: '备注',
+          subTitle: 'object',
+          code: 'a.b',
+          children: [
+            {
+              name: '备注',
+              subTitle: 'string',
+              code: 'a.b.x',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: '编号',
+      subTitle: 'object',
+      code: 'b',
+      children: [
+        {
+          name: '备注',
+          subTitle: 'string',
+          code: 'b2',
+        },
+        {
+          name: '是否有效',
+          subTitle: 'boolean',
+          code: 'c2',
+        },
+      ],
+    },
+  ]}
+/>
+```

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);
+        }
+      }}
+    />
+  );
+}
+```