neko-ui 2.8.21 → 2.8.23

package/es/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","createEffect","createMemo","createRoot","createSignal","getOwner","colorParse","mixColor","toneColor","css","generateColor","base","option","obj","dark","textColor","baseColor","name","setAlpha","toRgbaString","baseTokens","fontSize","fontFamily","color","lineHeight","cursor","backgroundColor","inlineSize","blockSize","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","darkPrimary","darkWarning","darkSuccess","darkError","getHostCss","tokens","str","key","Object","prototype","hasOwnProperty","call","lightCss","assign","darkCss","update","e","_","baseStyle","addEventListener","removeEventListener","setItem"],"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","createEffect","createMemo","createRoot","createSignal","getOwner","colorParse","mixColor","toneColor","css","generateColor","base","option","obj","dark","textColor","baseColor","name","setAlpha","toRgbaString","baseTokens","fontSize","fontFamily","color","lineHeight","cursor","backgroundColor","inlineSize","blockSize","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","darkPrimary","darkWarning","darkSuccess","darkError","getHostCss","tokens","str","key","Object","prototype","hasOwnProperty","call","lightCss","assign","darkCss","update","e","_","baseStyle","addEventListener","removeEventListener","setItem"],"mappings":"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"}

package/es/tree/README.mdx

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

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