neko-ui 2.8.21 → 2.8.23

package/es/select/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/select/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onMount,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport Dropdown, { defaultProps } from '../dropdown';\nimport getOptions from '../get-options';\nimport '../tag';\nimport type { CustomElement, DropdownMultipleProps, DropdownProps, MenuOption } from '..';\n\nfunction Select(props: SelectProps) {\n  const [local, other] = splitProps(props, [\n    'css',\n    'value',\n    'onChange',\n    'open',\n    'onOpenChange',\n    'label',\n    'prefixIcon',\n    'suffixIcon',\n    'placeholder',\n    'trigger',\n    'options',\n  ]);\n  let ref: HTMLInputElement | undefined;\n  let tagsRef: HTMLDivElement | undefined;\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const [x, setX] = createSignal<string>('');\n  const [options, setOptions] = createSignal<MenuOption[]>([]);\n  const [kv, setKv] = createSignal<Record<string, MenuOption>>({});\n\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, other.fieldNames));\n\n  function getKv(arr: MenuOption[], fieldDic: typeof FieldName) {\n    const optKv: Record<string, MenuOption> = {};\n\n    for (let i = 0, len = arr.length; i < len; i++) {\n      const item = arr[i];\n      const _options = item[fieldDic.options];\n\n      optKv[item[fieldDic.value]!] = item;\n      if (Array.isArray(_options)) {\n        Object.assign(optKv, getKv(_options as MenuOption[], fieldDic));\n      }\n      const _children = item[fieldDic.children];\n\n      optKv[item[fieldDic.value]!] = item;\n      if (Array.isArray(_children)) {\n        Object.assign(optKv, getKv(_children as MenuOption[], fieldDic));\n      }\n    }\n    return optKv;\n  }\n\n  createEffect(() => {\n    batch(() => {\n      const fieldDic = fieldNames();\n      const opts = getOptions(local.options, fieldDic);\n\n      setOptions(opts);\n      setKv(getKv(opts, fieldDic));\n    });\n  });\n\n  function openChange(next: boolean | null) {\n    if (!other.disabled) {\n      if (isFunction(local.onOpenChange)) {\n        local.onOpenChange(next);\n      }\n      if (local.open === void 0) {\n        setOpen(next);\n      }\n    }\n  }\n  function click(e: MouseEvent) {\n    if (\n      (e.target as Element)?.parentElement ===\n      (ref?.parentNode?.parentNode as Document)?.activeElement\n    ) {\n      openChange(!untrack(open));\n    }\n  }\n  function onChange(val: (string | number)[] | string | number | undefined, item: MenuOption) {\n    if (local.value === void 0) {\n      setValue(val ? (Array.isArray(val) ? val : [val]) : []);\n    }\n    if (isFunction(local.onChange)) {\n      local.onChange(val, item);\n    }\n  }\n  function keyDown({ key }: { key: string }) {\n    switch (key) {\n      case 'ArrowDown':\n        // console.log(key);\n        // Object.keys(state.current.kv).indexOf(state.current.value)\n        break;\n      case 'ArrowUp':\n        break;\n      case 'Backspace':\n        if (other.multiple) {\n          const old = [...untrack(value)];\n\n          old.splice(-1, 1);\n          onChange(old, untrack(kv)[untrack(value).length - 1]);\n        } else {\n          onChange(void 0, untrack(kv)[untrack(value)[0]]);\n        }\n        break;\n      case 'Enter':\n        openChange(!untrack(open));\n        break;\n      case 'Escape':\n        openChange(false);\n        break;\n      default:\n        break;\n    }\n  }\n  function preventDefault(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n  }\n  function deleteValue(v: string | number, e: CustomEvent) {\n    preventDefault(e);\n    onChange(untrack(value).filter((old) => old !== v) as never, untrack(kv)[v]);\n  }\n  function focus(e: FocusEvent | MouseEvent) {\n    preventDefault(e);\n    openChange(true);\n  }\n  function blur(e: FocusEvent) {\n    preventDefault(e);\n    if (untrack(open)) {\n      openChange(false);\n    }\n  }\n\n  createEffect(() => {\n    batch(() => {\n      if (local.open !== untrack(open) && local.open !== void 0) {\n        setOpen(local.open);\n      }\n      if (local.value !== void 0 && local.value !== null) {\n        setValue(Array.isArray(local.value) ? local.value : [local.value]);\n      } else {\n        setValue([]);\n      }\n    });\n  });\n  onMount(() => {\n    if (local.value === void 0) {\n      const val = other.defaultValue;\n\n      setValue(val ? (Array.isArray(val) ? val : [val]) : []);\n    }\n  });\n  createEffect(() => {\n    if (local.label) {\n      setX(`.label {--x: ${tagsRef?.offsetLeft || 0}px; }`);\n    }\n  });\n  const prefix = createMemo(() =>\n    isFunction(local.prefixIcon) ? (local.prefixIcon() as JSX.Element) : local.prefixIcon,\n  );\n  const label = createMemo(() =>\n    isFunction(local.label) ? (local.label() as JSX.Element) : local.label,\n  );\n  const suffix = createMemo(() =>\n    isFunction(local.suffixIcon) ? (local.suffixIcon() as JSX.Element) : local.suffixIcon,\n  );\n\n  return (\n    <Dropdown\n      placement=\"left\"\n      css={style + x() + (local.css || '')}\n      trigger=\"none\"\n      items={options()}\n      value={value() as unknown as string}\n      onChange={onChange}\n      open={open()}\n      onOpenChange={openChange}\n      {...other}\n    >\n      <div\n        ref={ref}\n        class=\"select\"\n        tabindex={other.disabled ? -1 : 0}\n        onKeyDown={keyDown}\n        onFocus={focus}\n        onBlur={blur}\n        aria-disabled={other.disabled}\n      >\n        <Show when={prefix()}>\n          <span class=\"prefix\">{prefix()}</span>\n        </Show>\n        <Show when={label()}>\n          <label class=\"label\">{label()}</label>\n        </Show>\n        <div class=\"tags\" ref={tagsRef} onMouseDown={click}>\n          <Show\n            when={other.multiple}\n            fallback={\n              <Show\n                when={value().length}\n                fallback={\n                  <Show when={local.placeholder}>\n                    <span class=\"placeholder\">{local.placeholder}</span>\n                  </Show>\n                }\n              >\n                <span\n                  class=\"value\"\n                  classList={{\n                    opacity: !!open(),\n                  }}\n                >\n                  {kv()[value()[0]]?.[fieldNames().label] || value()[0]}\n                </span>\n              </Show>\n            }\n          >\n            <For\n              each={value()}\n              fallback={\n                <Show when={local.placeholder}>\n                  <span class=\"placeholder\">{local.placeholder}</span>\n                </Show>\n              }\n            >\n              {(v) => (\n                <n-tag\n                  class=\"tag\"\n                  classList={{\n                    opacity: !!open(),\n                  }}\n                  type={kv()[v]?.type || 'primary'}\n                  color={kv()[v]?.color}\n                  icon={kv()[v]?.icon}\n                  close-icon={!other.disabled && !kv()[v]?.disabled}\n                  onClose={deleteValue.bind(null, v)}\n                  disabled={other.disabled || kv()[v]?.disabled}\n                >\n                  {kv()[v]?.[fieldNames().label] || v}\n                </n-tag>\n              )}\n            </For>\n          </Show>\n        </div>\n        <Show when={suffix()}>\n          <span class=\"suffix\">{suffix()}</span>\n        </Show>\n      </div>\n    </Dropdown>\n  );\n}\n\n/** 通用API */\ninterface SelectBaseProps {\n  /** 占位符 */\n  placeholder?: string;\n  /** 选项 */\n  options?: (MenuOption | string | number)[];\n  /** 标题 */\n  label?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 前缀图标 */\n  prefixIcon?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 后缀图标 */\n  suffixIcon?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  style?: Record<string, string | number>;\n}\n\n/** 单选 */\nexport interface SelectProps extends Omit<DropdownProps, 'items' | 'children'>, SelectBaseProps {\n  /** 值 */\n  value?: string | number;\n}\n\n/** 多选 */\nexport interface SelectMultipleProps\n  extends Omit<DropdownMultipleProps, 'items' | 'children'>,\n    SelectBaseProps {\n  /** 值\n   * @default []\n   */\n  value?: (string | number)[];\n}\nexport type SelectElement = CustomElement<SelectProps, 'onChange' | 'onOpenChange'>;\nexport type SelectMultipleElement = CustomElement<SelectMultipleProps, 'onChange' | 'onOpenChange'>;\n\ncustomElement<SelectProps>(\n  'n-select',\n  {\n    ...defaultProps,\n    options: [],\n    label: void 0,\n    placeholder: '请选择',\n    dropdownMatchSelectWidth: true,\n    prefixIcon: void 0,\n    suffixIcon: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: string | number, item: MenuOption) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [key, item],\n            }),\n          );\n        },\n        onOpenChange(open: boolean | null) {\n          el.dispatchEvent(\n            new CustomEvent('openchange', {\n              detail: open,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Select {...props} />;\n  },\n);\nexport default Select;\n"],"names":["For","Show","batch","createEffect","createMemo","createSignal","mergeProps","onMount","splitProps","untrack","isFunction","customElement","style","FieldName","Dropdown","defaultProps","getOptions","Select","props","ref","tagsRef","local","other","open","setOpen","value","setValue","x","setX","options","setOptions","kv","setKv","fieldNames","Object","assign","openChange","next","disabled","onOpenChange","click","e","target","parentElement","parentNode","activeElement","onChange","val","item","Array","isArray","keyDown","key","multiple","old","splice","length","preventDefault","stopPropagation","deleteValue","v","filter","focus","blur","fieldDic","opts","getKv","arr","optKv","i","len","_options","_children","children","defaultValue","label","offsetLeft","prefix","prefixIcon","suffix","suffixIcon","css","placeholder","bind","type","color","icon","dropdownMatchSelectWidth","_","opt","el","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}
+{"version":3,"sources":["../../components/select/index.tsx"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  onMount,\n  Show,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement, DropdownMultipleProps, DropdownProps, MenuOption } from '..';\nimport { FieldName } from '../basic-config';\nimport Dropdown, { defaultProps } from '../dropdown';\nimport getOptions from '../get-options';\n\nimport { style } from './style';\n\nimport '../tag';\n\nfunction Select(props: SelectProps) {\n  const [local, other] = splitProps(props, [\n    'css',\n    'value',\n    'onChange',\n    'open',\n    'onOpenChange',\n    'label',\n    'prefixIcon',\n    'suffixIcon',\n    'placeholder',\n    'trigger',\n    'options',\n  ]);\n  let ref: HTMLInputElement | undefined;\n  let tagsRef: HTMLDivElement | undefined;\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const [x, setX] = createSignal<string>('');\n  const [options, setOptions] = createSignal<MenuOption[]>([]);\n  const [kv, setKv] = createSignal<Record<string, MenuOption | undefined>>({});\n\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, other.fieldNames));\n\n  function getKv(arr: MenuOption[], fieldDic: typeof FieldName) {\n    const optKv: Record<string, MenuOption> = {};\n\n    for (let i = 0, len = arr.length; i < len; i++) {\n      const item = arr[i];\n      const _options = item[fieldDic.options];\n\n      optKv[item[fieldDic.value]!] = item;\n      if (Array.isArray(_options)) {\n        Object.assign(optKv, getKv(_options as MenuOption[], fieldDic));\n      }\n      const _children = item[fieldDic.children];\n\n      optKv[item[fieldDic.value]!] = item;\n      if (Array.isArray(_children)) {\n        Object.assign(optKv, getKv(_children as MenuOption[], fieldDic));\n      }\n    }\n    return optKv;\n  }\n\n  createEffect(() => {\n    batch(() => {\n      const fieldDic = fieldNames();\n      const opts = getOptions(local.options, fieldDic);\n\n      setOptions(opts);\n      setKv(getKv(opts, fieldDic));\n    });\n  });\n\n  function openChange(next: boolean | null) {\n    if (!other.disabled) {\n      if (isFunction(local.onOpenChange)) {\n        local.onOpenChange(next);\n      }\n      if (local.open === void 0) {\n        setOpen(next);\n      }\n    }\n  }\n  function click(e: MouseEvent) {\n    if (\n      (e.target as Element | null)?.parentElement ===\n      (ref?.parentNode?.parentNode as Document | null)?.activeElement\n    ) {\n      openChange(!untrack(open));\n    }\n  }\n  function onChange(val: (string | number)[] | string | number | undefined, item?: MenuOption) {\n    if (local.value === void 0) {\n      setValue(val ? (Array.isArray(val) ? val : [val]) : []);\n    }\n    if (isFunction(local.onChange)) {\n      local.onChange(val, item);\n    }\n  }\n  function keyDown({ key }: { key: string }) {\n    switch (key) {\n      case 'ArrowDown':\n        // console.log(key);\n        // Object.keys(state.current.kv).indexOf(state.current.value)\n        break;\n      case 'ArrowUp':\n        break;\n      case 'Backspace':\n        if (other.multiple) {\n          const old = [...untrack(value)];\n\n          old.splice(-1, 1);\n          onChange(old, untrack(kv)[untrack(value).length - 1]);\n        } else {\n          onChange(void 0, untrack(kv)[untrack(value)[0]]);\n        }\n        break;\n      case 'Enter':\n        openChange(!untrack(open));\n        break;\n      case 'Escape':\n        openChange(false);\n        break;\n      default:\n        break;\n    }\n  }\n  function preventDefault(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n  }\n  function deleteValue(v: string | number, e: CustomEvent) {\n    preventDefault(e);\n    onChange(untrack(value).filter((old) => old !== v) as never, untrack(kv)[v]);\n  }\n  function focus(e: FocusEvent | MouseEvent) {\n    preventDefault(e);\n    openChange(true);\n  }\n  function blur(e: FocusEvent) {\n    preventDefault(e);\n    if (untrack(open)) {\n      openChange(false);\n    }\n  }\n\n  createEffect(() => {\n    batch(() => {\n      if (local.open !== untrack(open) && local.open !== void 0) {\n        setOpen(local.open);\n      }\n      if (local.value !== void 0 && local.value !== null) {\n        setValue(Array.isArray(local.value) ? local.value : [local.value]);\n      } else {\n        setValue([]);\n      }\n    });\n  });\n  onMount(() => {\n    if (local.value === void 0) {\n      const val = other.defaultValue;\n\n      setValue(val ? (Array.isArray(val) ? val : [val]) : []);\n    }\n  });\n  createEffect(() => {\n    if (local.label) {\n      setX(`.label {--x: ${tagsRef?.offsetLeft || 0}px; }`);\n    }\n  });\n  const prefix = createMemo(() =>\n    isFunction(local.prefixIcon) ? (local.prefixIcon() as JSX.Element) : local.prefixIcon,\n  );\n  const label = createMemo(() =>\n    isFunction(local.label) ? (local.label() as JSX.Element) : local.label,\n  );\n  const suffix = createMemo(() =>\n    isFunction(local.suffixIcon) ? (local.suffixIcon() as JSX.Element) : local.suffixIcon,\n  );\n\n  return (\n    <Dropdown\n      placement=\"left\"\n      css={style + x() + (local.css || '')}\n      trigger=\"none\"\n      items={options()}\n      value={value() as unknown as string}\n      onChange={onChange}\n      open={open()}\n      onOpenChange={openChange}\n      {...other}\n    >\n      <div\n        ref={ref}\n        class=\"select\"\n        tabindex={other.disabled ? -1 : 0}\n        onKeyDown={keyDown}\n        onFocus={focus}\n        onBlur={blur}\n        aria-disabled={other.disabled}\n      >\n        <Show when={prefix()}>\n          <span class=\"prefix\">{prefix()}</span>\n        </Show>\n        <Show when={label()}>\n          <label class=\"label\">{label()}</label>\n        </Show>\n        <div class=\"tags\" ref={tagsRef} onMouseDown={click}>\n          <Show\n            when={other.multiple}\n            fallback={\n              <Show\n                when={value().length}\n                fallback={\n                  <Show when={local.placeholder}>\n                    <span class=\"placeholder\">{local.placeholder}</span>\n                  </Show>\n                }\n              >\n                <span\n                  class=\"value\"\n                  classList={{\n                    opacity: !!open(),\n                  }}\n                >\n                  {kv()[value()[0]]?.[fieldNames().label] || value()[0]}\n                </span>\n              </Show>\n            }\n          >\n            <For\n              each={value()}\n              fallback={\n                <Show when={local.placeholder}>\n                  <span class=\"placeholder\">{local.placeholder}</span>\n                </Show>\n              }\n            >\n              {(v) => (\n                <n-tag\n                  class=\"tag\"\n                  classList={{\n                    opacity: !!open(),\n                  }}\n                  type={kv()[v]?.type || 'primary'}\n                  color={kv()[v]?.color}\n                  icon={kv()[v]?.icon}\n                  close-icon={!other.disabled && !kv()[v]?.disabled}\n                  onClose={deleteValue.bind(null, v)}\n                  disabled={other.disabled || kv()[v]?.disabled}\n                >\n                  {kv()[v]?.[fieldNames().label] || v}\n                </n-tag>\n              )}\n            </For>\n          </Show>\n        </div>\n        <Show when={suffix()}>\n          <span class=\"suffix\">{suffix()}</span>\n        </Show>\n      </div>\n    </Dropdown>\n  );\n}\n\n/** 通用API */\ninterface SelectBaseProps {\n  /** 占位符 */\n  placeholder?: string;\n  /** 选项 */\n  options?: (MenuOption | string | number)[];\n  /** 标题 */\n  label?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 前缀图标 */\n  prefixIcon?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 后缀图标 */\n  suffixIcon?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  style?: Record<string, string | number>;\n}\n\n/** 单选 */\nexport interface SelectProps extends Omit<DropdownProps, 'items' | 'children'>, SelectBaseProps {\n  /** 值 */\n  value?: string | number;\n}\n\n/** 多选 */\nexport interface SelectMultipleProps\n  extends Omit<DropdownMultipleProps, 'items' | 'children'>,\n    SelectBaseProps {\n  /** 值\n   * @default []\n   */\n  value?: (string | number)[];\n}\nexport type SelectElement = CustomElement<SelectProps, 'onChange' | 'onOpenChange'>;\nexport type SelectMultipleElement = CustomElement<SelectMultipleProps, 'onChange' | 'onOpenChange'>;\n\ncustomElement<SelectProps>(\n  'n-select',\n  {\n    ...defaultProps,\n    options: [],\n    label: void 0,\n    placeholder: '请选择',\n    dropdownMatchSelectWidth: true,\n    prefixIcon: void 0,\n    suffixIcon: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: string | number, item: MenuOption) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [key, item],\n            }),\n          );\n        },\n        onOpenChange(open: boolean | null) {\n          el.dispatchEvent(\n            new CustomEvent('openchange', {\n              detail: open,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Select {...props} />;\n  },\n);\nexport default Select;\n"],"names":["batch","createEffect","createMemo","createSignal","For","mergeProps","onMount","Show","splitProps","untrack","isFunction","customElement","FieldName","Dropdown","defaultProps","getOptions","style","Select","props","ref","tagsRef","local","other","open","setOpen","value","setValue","x","setX","options","setOptions","kv","setKv","fieldNames","Object","assign","openChange","next","disabled","onOpenChange","click","e","target","parentElement","parentNode","activeElement","onChange","val","item","Array","isArray","keyDown","key","multiple","old","splice","length","preventDefault","stopPropagation","deleteValue","v","filter","focus","blur","fieldDic","opts","getKv","arr","optKv","i","len","_options","_children","children","defaultValue","label","offsetLeft","prefix","prefixIcon","suffix","suffixIcon","css","placeholder","bind","type","color","icon","dropdownMatchSelectWidth","_","opt","el","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}

package/es/skeleton/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 反馈
+title: 骨架屏
+subtitle: n-skeleton
+icon: 👀
+---
+
+# 骨架屏
+
+> 网络较慢，需要长时间等待加载处理的情况下、图文信息内容较多的列表/卡片中、第一次加载数据的时候使用

package/es/skeleton/examples/animation.md

@@ -0,0 +1,13 @@
+---
+title: 显示动画
+description: 显示动画
+order: 3
+---
+
+```html
+<n-skeleton active="true"></n-skeleton>
+```
+
+```jsx
+<n-skeleton active />
+```

package/es/skeleton/examples/avatar.md

@@ -0,0 +1,13 @@
+---
+title: 显示头像
+description: 显示头像
+order: 4
+---
+
+```html
+<n-skeleton avatar="true"></n-skeleton>
+```
+
+```jsx
+<n-skeleton avatar />
+```

package/es/skeleton/examples/basic.md

@@ -0,0 +1,12 @@
+---
+title: 最简单的使用
+order: 1
+---
+
+```html
+<n-skeleton></n-skeleton>
+```
+
+```jsx
+<n-skeleton />
+```

package/es/skeleton/examples/rows.md

@@ -0,0 +1,13 @@
+---
+title: 自定义行数
+description: 自定义行数
+order: 5
+---
+
+```html
+<n-skeleton rows="8" title="true" avatar="true"></n-skeleton>
+```
+
+```jsx
+<n-skeleton rows={8} title avatar />
+```

package/es/skeleton/examples/title.md

@@ -0,0 +1,12 @@
+---
+title: 显示标题行
+order: 2
+---
+
+```html
+<n-skeleton title="true"></n-skeleton>
+```
+
+```jsx
+<n-skeleton title />
+```

package/es/skeleton/index.js

@@ -1,4 +1,4 @@
-import{template as t}from"solid-js/web";import{insert as e}from"solid-js/web";import{effect as i}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{className as a}from"solid-js/web";let s=t("<style> "),n=t("<style>"),o=t('<div class="avatar">'),l=t('<div class="title">'),d=t('<div><div class="body"><div class="paragraph">'),c=t("<div>");import{For as g,Show as v,createMemo as b,mergeProps as p}from"solid-js";import{css as f,cx as m}from"@moneko/css";import{customElement as u}from"solid-element";import k from"../theme";let h=f`
+import{template as t}from"solid-js/web";import{insert as e}from"solid-js/web";import{effect as i}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{className as a}from"solid-js/web";let s=t("<style> "),n=t("<style>"),o=t('<div class="avatar">'),l=t('<div class="title">'),d=t('<div><div class="body"><div class="paragraph">'),c=t("<div>");import{createMemo as g,For as v,mergeProps as b,Show as p}from"solid-js";import{css as f,cx as m}from"@moneko/css";import{customElement as u}from"solid-element";import k from"../theme";let h=f`
   :host {
     display: block;
     inline-size: 100%;
@@ -68,7 +68,7 @@ import{template as t}from"solid-js/web";import{insert as e}from"solid-js/web";im
       background-position-x: -20%;
     }
   }
-`;function x(t){let{baseStyle:p,isDark:u}=k,x=b(()=>Array(t.rows).fill(0)),w=b(()=>u()?f`
+`;function x(t){let{baseStyle:b,isDark:u}=k,x=g(()=>Array(t.rows).fill(0)),w=g(()=>u()?f`
         :host {
           --skeleton-bg: rgb(255 255 255 / 6%);
           --skeleton-bg-active: linear-gradient(
@@ -90,5 +90,5 @@ import{template as t}from"solid-js/web";import{insert as e}from"solid-js/web";im
           )
           transparent 180%/200% 100%;
       }
-    `);return[(()=>{let t=s(),e=t.firstChild;return i(()=>e.data=p()),t})(),(()=>{let t=s(),e=t.firstChild;return i(()=>e.data=w()),t})(),(()=>{let t=n();return t.textContent=h,t})(),r(v,{get when(){return t.css},get children(){let e=s(),r=e.firstChild;return i(()=>r.data=f(t.css)),e}}),(()=>{let s=d(),n=s.firstChild,b=n.firstChild;return e(s,r(v,{get when(){return t.avatar},get children(){let e=o();return i(()=>e.classList.toggle("active",!!t.active)),e}}),n),e(n,r(v,{get when(){return t.title},get children(){let e=l();return i(()=>e.classList.toggle("active",!!t.active)),e}}),b),e(b,r(g,{get each(){return x()},children:()=>(()=>{let e=c();return i(()=>e.classList.toggle("active",!!t.active)),e})()})),i(()=>a(s,m("skeleton",t.class))),s})()]}u("n-skeleton",{rows:3,active:void 0,avatar:void 0,title:void 0,css:void 0,class:void 0},(t,e)=>{let i=e.element;return r(x,p({rows:i.rows,active:i.active,avatar:i.avatar,title:i.title,css:i.css},t))});export default x;
+    `);return[(()=>{let t=s(),e=t.firstChild;return i(()=>e.data=b()),t})(),(()=>{let t=s(),e=t.firstChild;return i(()=>e.data=w()),t})(),(()=>{let t=n();return t.textContent=h,t})(),r(p,{get when(){return t.css},get children(){let e=s(),r=e.firstChild;return i(()=>r.data=f(t.css)),e}}),(()=>{let s=d(),n=s.firstChild,g=n.firstChild;return e(s,r(p,{get when(){return t.avatar},get children(){let e=o();return i(()=>e.classList.toggle("active",!!t.active)),e}}),n),e(n,r(p,{get when(){return t.title},get children(){let e=l();return i(()=>e.classList.toggle("active",!!t.active)),e}}),g),e(g,r(v,{get each(){return x()},children:()=>(()=>{let e=c();return i(()=>e.classList.toggle("active",!!t.active)),e})()})),i(()=>a(s,m("skeleton",t.class))),s})()]}u("n-skeleton",{rows:3,active:void 0,avatar:void 0,title:void 0,css:void 0,class:void 0},(t,e)=>{let i=e.element;return r(x,b({rows:i.rows,active:i.active,avatar:i.avatar,title:i.title,css:i.css},t))});export default x;
 //# sourceMappingURL=index.js.map

package/es/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/skeleton/index.tsx"],"sourcesContent":["import { For, Show, createMemo, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nconst style = css`\n  :host {\n    display: block;\n    inline-size: 100%;\n  }\n\n  .skeleton {\n    display: flex;\n    inline-size: 100%;\n    gap: 16px;\n  }\n\n  .avatar,\n  .title,\n  .paragraph > div {\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    background: var(--skeleton-bg);\n    transition: background-color var(--transition-duration) var(--transition-timing-function);\n  }\n\n  .avatar {\n    border-radius: 50%;\n    inline-size: 32px;\n    block-size: 32px;\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .title {\n    margin-block-end: 16px;\n    inline-size: 32%;\n    block-size: 32px;\n  }\n\n  .paragraph {\n    display: flex;\n    padding: 0;\n    flex-direction: column;\n    gap: 12px;\n\n    & > div {\n      inline-size: 100%;\n      block-size: 16px;\n      list-style: none;\n\n      &:last-of-type {\n        inline-size: 65%;\n      }\n    }\n  }\n\n  .active {\n    &::after {\n      display: block;\n      block-size: 100%;\n      animation: skeleton-effect 1.4s var(--transition-timing-function) infinite;\n      background: var(--skeleton-bg-active);\n      content: '';\n      transition: background-color var(--transition-duration) var(--transition-timing-function);\n    }\n  }\n\n  @keyframes skeleton-effect {\n    to {\n      background-position-x: -20%;\n    }\n  }\n`;\n\nexport interface SkeletonProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 行\n   * @default 3\n   */\n  rows?: number;\n  /** 显示动画\n   * @default false\n   */\n  active?: boolean;\n  /** 显示头像\n   * @default false\n   */\n  avatar?: boolean;\n  /** 显示标题\n   * @default false\n   */\n  title?: boolean;\n}\n\nfunction Skeleton(props: SkeletonProps) {\n  const { baseStyle, isDark } = theme;\n  const rows = createMemo(() => Array(props.rows).fill(0));\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --skeleton-bg: rgb(255 255 255 / 6%);\n          --skeleton-bg-active: linear-gradient(\n              100deg,\n              rgb(255 255 255 / 5%) 40%,\n              rgb(255 255 255 / 15%) 50%,\n              rgb(255 255 255 / 5%) 60%\n            )\n            transparent 180%/200% 100%;\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --skeleton-bg: rgb(0 0 0 / 6%);\n        --skeleton-bg-active: linear-gradient(\n            100deg,\n            rgb(0 0 0 / 5%) 40%,\n            rgb(0 0 0 / 15%) 50%,\n            rgb(0 0 0 / 5%) 60%\n          )\n          transparent 180%/200% 100%;\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div class={cx('skeleton', props.class)}>\n        <Show when={props.avatar}>\n          <div\n            class=\"avatar\"\n            classList={{\n              active: props.active,\n            }}\n          />\n        </Show>\n        <div class=\"body\">\n          <Show when={props.title}>\n            <div\n              class=\"title\"\n              classList={{\n                active: props.active,\n              }}\n            />\n          </Show>\n          <div class=\"paragraph\">\n            <For each={rows()}>\n              {() => (\n                <div\n                  classList={{\n                    active: props.active,\n                  }}\n                />\n              )}\n            </For>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport type SkeletonElement = CustomElement<SkeletonProps>;\ncustomElement<SkeletonProps>(\n  'n-skeleton',\n  {\n    rows: 3,\n    active: void 0,\n    avatar: void 0,\n    title: void 0,\n    css: void 0,\n    class: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        rows: el.rows,\n        active: el.active,\n        avatar: el.avatar,\n        title: el.title,\n        css: el.css,\n      },\n      _,\n    );\n\n    return <Skeleton {...props} />;\n  },\n);\nexport default Skeleton;\n"],"names":["For","Show","createMemo","mergeProps","css","cx","customElement","theme","style","Skeleton","props","baseStyle","isDark","rows","Array","fill","cssVar","avatar","active","title","class","_","opt","el","element"],"mappings":"wWAAA,QAASA,OAAAA,CAAG,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAC7D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAAOC,MAAW,UAAW,CAG7B,IAAMC,EAAQJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsElB,CAAC,CAyBD,SAASK,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGL,EACxBM,EAAOX,EAAW,IAAMY,MAAMJ,EAAMG,IAAI,EAAEE,IAAI,CAAC,IAC/CC,EAASd,EAAW,IACxB,AAAIU,IACKR,CAAG,CAAC;;;;;;;;;;;MAWX,CAAC,CAGIA,CAAG,CAAC;;;;;;;;;;;IAWX,CAAC,EAGH,0DAEwBO,8DACAK,gDACAR,UACnBP,qBAAWS,EAAMN,GAAG,8DACCA,EAAIM,EAAMN,GAAG,mEAGhCH,qBAAWS,EAAMO,MAAM,sEAIVP,EAAMQ,MAAM,iBAKvBjB,qBAAWS,EAAMS,KAAK,sEAITT,EAAMQ,MAAM,iBAKvBlB,qBAAUa,cACR,+DAGaH,EAAMQ,MAAM,sBAvBtBb,EAAG,WAAYK,EAAMU,KAAK,UAiC5C,CAGAd,EACE,aACA,CACEO,KAAM,EACNK,OAAQ,KAAK,EACbD,OAAQ,KAAK,EACbE,MAAO,KAAK,EACZf,IAAK,KAAK,EACVgB,MAAO,KAAK,CACd,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAYtB,SAAQf,EAXMN,EACZ,CACEU,KAAMU,EAAGV,IAAI,CACbK,OAAQK,EAAGL,MAAM,CACjBD,OAAQM,EAAGN,MAAM,CACjBE,MAAOI,EAAGJ,KAAK,CACff,IAAKmB,EAAGnB,GAAG,AACb,EACAiB,GAIJ,EAEF,gBAAeZ,CAAS"}
+{"version":3,"sources":["../../components/skeleton/index.tsx"],"sourcesContent":["import { createMemo, For, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport theme from '../theme';\n\nconst style = css`\n  :host {\n    display: block;\n    inline-size: 100%;\n  }\n\n  .skeleton {\n    display: flex;\n    inline-size: 100%;\n    gap: 16px;\n  }\n\n  .avatar,\n  .title,\n  .paragraph > div {\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    background: var(--skeleton-bg);\n    transition: background-color var(--transition-duration) var(--transition-timing-function);\n  }\n\n  .avatar {\n    border-radius: 50%;\n    inline-size: 32px;\n    block-size: 32px;\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .title {\n    margin-block-end: 16px;\n    inline-size: 32%;\n    block-size: 32px;\n  }\n\n  .paragraph {\n    display: flex;\n    padding: 0;\n    flex-direction: column;\n    gap: 12px;\n\n    & > div {\n      inline-size: 100%;\n      block-size: 16px;\n      list-style: none;\n\n      &:last-of-type {\n        inline-size: 65%;\n      }\n    }\n  }\n\n  .active {\n    &::after {\n      display: block;\n      block-size: 100%;\n      animation: skeleton-effect 1.4s var(--transition-timing-function) infinite;\n      background: var(--skeleton-bg-active);\n      content: '';\n      transition: background-color var(--transition-duration) var(--transition-timing-function);\n    }\n  }\n\n  @keyframes skeleton-effect {\n    to {\n      background-position-x: -20%;\n    }\n  }\n`;\n\nexport interface SkeletonProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 行\n   * @default 3\n   */\n  rows?: number;\n  /** 显示动画\n   * @default false\n   */\n  active?: boolean;\n  /** 显示头像\n   * @default false\n   */\n  avatar?: boolean;\n  /** 显示标题\n   * @default false\n   */\n  title?: boolean;\n}\n\nfunction Skeleton(props: SkeletonProps) {\n  const { baseStyle, isDark } = theme;\n  const rows = createMemo(() => Array(props.rows).fill(0));\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --skeleton-bg: rgb(255 255 255 / 6%);\n          --skeleton-bg-active: linear-gradient(\n              100deg,\n              rgb(255 255 255 / 5%) 40%,\n              rgb(255 255 255 / 15%) 50%,\n              rgb(255 255 255 / 5%) 60%\n            )\n            transparent 180%/200% 100%;\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --skeleton-bg: rgb(0 0 0 / 6%);\n        --skeleton-bg-active: linear-gradient(\n            100deg,\n            rgb(0 0 0 / 5%) 40%,\n            rgb(0 0 0 / 15%) 50%,\n            rgb(0 0 0 / 5%) 60%\n          )\n          transparent 180%/200% 100%;\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div class={cx('skeleton', props.class)}>\n        <Show when={props.avatar}>\n          <div\n            class=\"avatar\"\n            classList={{\n              active: props.active,\n            }}\n          />\n        </Show>\n        <div class=\"body\">\n          <Show when={props.title}>\n            <div\n              class=\"title\"\n              classList={{\n                active: props.active,\n              }}\n            />\n          </Show>\n          <div class=\"paragraph\">\n            <For each={rows()}>\n              {() => (\n                <div\n                  classList={{\n                    active: props.active,\n                  }}\n                />\n              )}\n            </For>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport type SkeletonElement = CustomElement<SkeletonProps>;\ncustomElement<SkeletonProps>(\n  'n-skeleton',\n  {\n    rows: 3,\n    active: void 0,\n    avatar: void 0,\n    title: void 0,\n    css: void 0,\n    class: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        rows: el.rows,\n        active: el.active,\n        avatar: el.avatar,\n        title: el.title,\n        css: el.css,\n      },\n      _,\n    );\n\n    return <Skeleton {...props} />;\n  },\n);\nexport default Skeleton;\n"],"names":["createMemo","For","mergeProps","Show","css","cx","customElement","theme","style","Skeleton","props","baseStyle","isDark","rows","Array","fill","cssVar","avatar","active","title","class","_","opt","el","element"],"mappings":"wWAAA,QAASA,cAAAA,CAAU,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AAC7D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAAOC,MAAW,UAAW,CAE7B,IAAMC,EAAQJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsElB,CAAC,CAyBD,SAASK,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGL,EACxBM,EAAOb,EAAW,IAAMc,MAAMJ,EAAMG,IAAI,EAAEE,IAAI,CAAC,IAC/CC,EAAShB,EAAW,IACxB,AAAIY,IACKR,CAAG,CAAC;;;;;;;;;;;MAWX,CAAC,CAGIA,CAAG,CAAC;;;;;;;;;;;IAWX,CAAC,EAGH,0DAEwBO,8DACAK,gDACAR,UACnBL,qBAAWO,EAAMN,GAAG,8DACCA,EAAIM,EAAMN,GAAG,mEAGhCD,qBAAWO,EAAMO,MAAM,sEAIVP,EAAMQ,MAAM,iBAKvBf,qBAAWO,EAAMS,KAAK,sEAITT,EAAMQ,MAAM,iBAKvBjB,qBAAUY,cACR,+DAGaH,EAAMQ,MAAM,sBAvBtBb,EAAG,WAAYK,EAAMU,KAAK,UAiC5C,CAGAd,EACE,aACA,CACEO,KAAM,EACNK,OAAQ,KAAK,EACbD,OAAQ,KAAK,EACbE,MAAO,KAAK,EACZf,IAAK,KAAK,EACVgB,MAAO,KAAK,CACd,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAYtB,SAAQf,EAXMP,EACZ,CACEW,KAAMU,EAAGV,IAAI,CACbK,OAAQK,EAAGL,MAAM,CACjBD,OAAQM,EAAGN,MAAM,CACjBE,MAAOI,EAAGJ,KAAK,CACff,IAAKmB,EAAGnB,GAAG,AACb,EACAiB,GAIJ,EAEF,gBAAeZ,CAAS"}

package/es/spin/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 反馈
+title: 加载中
+subtitle: n-spin
+icon: ✲
+---
+
+# Loading 加载中
+
+> 加载中

package/es/spin/examples/basic.md

@@ -0,0 +1,67 @@
+---
+title: 基本使用
+order: 1
+---
+
+```html
+加载:<n-switch checked="true"></n-switch> 边框:<n-switch checked="true"></n-switch>
+<br />
+<n-spin spin="true" style="border: 1px solid #ccc;">
+  <n-highlight-text
+    text="朱敦儒的词作语言流畅，清新自然。他的词风可分为三个阶段：早年词风浓艳丽巧；
+      中年的词风激昂慷慨；闲居后词风婉明清畅。朱敦儒对南宋词坛也产生了 一些积极的影响。
+      他将一生的际遇和心态变化都赋于词中，给后人以直接的启迪和影响。
+      辛弃疾《念奴娇》词就明确说是“效朱希真体”，陆游年青时曾受知于朱敦儒，为人与作词都受朱敦儒的熏陶，
+      他的名作《卜算子·咏梅》即与朱敦儒的《卜算子·古涧一枝梅》风格相似。"
+    highlight="语言流畅"
+  ></n-highlight-text>
+</n-spin>
+<script>
+  const el = container.querySelectorAll('n-switch');
+  const spinEl = container.querySelector('n-spin');
+
+  el[0].onchange = function (e) {
+    spinEl.spin = e.detail;
+  };
+  el[1].onchange = function (e) {
+    spinEl.style.border = e.detail ? '1px solid #ccc' : 'none';
+  };
+</script>
+```
+
+```jsx
+let el;
+const text = `朱敦儒的词作语言流畅，清新自然。他的词风可分为三个阶段：早年词风浓艳丽巧；
+      中年的词风激昂慷慨；闲居后词风婉明清畅。朱敦儒对南宋词坛也产生了 一些积极的影响。
+      他将一生的际遇和心态变化都赋于词中，给后人以直接的启迪和影响。
+      辛弃疾《念奴娇》词就明确说是“效朱希真体”，陆游年青时曾受知于朱敦儒，为人与作词都受朱敦儒的熏陶，
+      他的名作《卜算子·咏梅》即与朱敦儒的《卜算子·古涧一枝梅》风格相似。`;
+render(
+  <>
+    加载:
+    <n-switch
+      checked
+      onChange={(e) => {
+        el.spin = e.detail;
+      }}
+    />
+    边框:
+    <n-switch
+      checked
+      onChange={(e) => {
+        el.style.border = e.detail ? '1px solid #ccc' : 'none';
+      }}
+    />
+    <br />
+    <n-spin
+      ref={(e) => (el = e)}
+      spin
+      style={{
+        border: '1px solid #ccc',
+      }}
+    >
+      <n-highlight-text text={text} highlight="《卜算子·咏梅》" />
+    </n-spin>
+  </>
+);
+```

package/es/spin/index.js

@@ -1,4 +1,4 @@
-import{template as e}from"solid-js/web";import{mergeProps as i}from"solid-js/web";import{insert as t}from"solid-js/web";import{effect as n}from"solid-js/web";import{createComponent as o}from"solid-js/web";import{className as r}from"solid-js/web";let s=e("<style> "),l=e("<style>"),a=e('<div><div class="content">');import{Show as d,createEffect as c,splitProps as p}from"solid-js";import{css as m,cx as f}from"@moneko/css";import{customElement as b}from"solid-element";import v from"../theme";let u=m`
+import{template as e}from"solid-js/web";import{mergeProps as i}from"solid-js/web";import{insert as t}from"solid-js/web";import{effect as n}from"solid-js/web";import{createComponent as o}from"solid-js/web";import{className as r}from"solid-js/web";let s=e("<style> "),l=e("<style>"),a=e('<div><div class="content">');import{createEffect as d,Show as c,splitProps as p}from"solid-js";import{css as m,cx as f}from"@moneko/css";import{customElement as b}from"solid-element";import u from"../theme";let v=m`
   :host {
     display: inline-block;
     box-sizing: border-box;
@@ -43,8 +43,8 @@ import{template as e}from"solid-js/web";import{mergeProps as i}from"solid-js/web
       text-align: center;
       inline-size: 16px;
       block-size: 16px;
-      inset-block: 0 0;
-      inset-inline: 0 0;
+      inset-block: 0;
+      inset-inline: 0;
       box-sizing: border-box;
       line-height: 1;
       content: '';
@@ -61,5 +61,5 @@ import{template as e}from"solid-js/web";import{mergeProps as i}from"solid-js/web
       transform: rotate(360deg);
     }
   }
-`;function x(e){let{baseStyle:i}=v;return[(()=>{let e=s(),t=e.firstChild;return n(()=>t.data=i()),e})(),(()=>{let e=l();return e.textContent=u,e})(),o(d,{get when(){return e.css},get children(){let i=s(),t=i.firstChild;return n(()=>t.data=m(e.css)),i}}),(()=>{let i=a();return t(i.firstChild,()=>e.children),n(t=>{let n=f("spin",e.class),o=!!e.spin;return n!==t._v$&&r(i,t._v$=n),o!==t._v$2&&i.classList.toggle("spining",t._v$2=o),t},{_v$:void 0,_v$2:void 0}),i})()]}b("n-spin",{class:void 0,css:void 0,spin:void 0,children:void 0},(e,t)=>{var n;let r=[...((null==(n=t.element)?void 0:n.childNodes)||[]).values()],[,s]=p(e,["children"]);return c(()=>{var e;null==(e=t.element)||e.replaceChildren()}),o(x,i(s,{children:r}))});export default x;
+`;function x(e){let{baseStyle:i}=u;return[(()=>{let e=s(),t=e.firstChild;return n(()=>t.data=i()),e})(),(()=>{let e=l();return e.textContent=v,e})(),o(c,{get when(){return e.css},get children(){let i=s(),t=i.firstChild;return n(()=>t.data=m(e.css)),i}}),(()=>{let i=a();return t(i.firstChild,()=>e.children),n(t=>{let n=f("spin",e.class),o=!!e.spin;return n!==t._v$&&r(i,t._v$=n),o!==t._v$2&&i.classList.toggle("spining",t._v$2=o),t},{_v$:void 0,_v$2:void 0}),i})()]}b("n-spin",{class:void 0,css:void 0,spin:void 0,children:void 0},(e,t)=>{let n=[...(t.element.childNodes||[]).values()],[,r]=p(e,["children"]);return d(()=>{t.element.replaceChildren()}),o(x,i(r,{children:n}))});export default x;
 //# sourceMappingURL=index.js.map

package/es/spin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/spin/index.tsx"],"sourcesContent":["import { Show, createEffect, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nconst style = css`\n  :host {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  .spin {\n    inline-size: fit-content;\n    inline-size: 100%;\n    block-size: 100%;\n    min-inline-size: 16px;\n    min-block-size: 16px;\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spining {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\n      filter: blur(4px);\n    }\n\n    &::before {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: auto;\n      border: 1px solid;\n      border-color: var(--text-secondary) transparent;\n      border-radius: 50%;\n      font-size: large;\n      text-align: center;\n      inline-size: 16px;\n      block-size: 16px;\n      inset-block: 0 0;\n      inset-inline: 0 0;\n      box-sizing: border-box;\n      line-height: 1;\n      content: '';\n      animation: spin-rotate-effect 1s infinite;\n    }\n  }\n\n  @keyframes spin-rotate-effect {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport interface SpinProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 加载状态 */\n  spin?: boolean;\n  /** 内容 */\n  children?: JSX.Element | JSX.Element[];\n}\n\nfunction Spin(props: SpinProps) {\n  const { baseStyle } = theme;\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        class={cx('spin', props.class)}\n        classList={{\n          spining: props.spin,\n        }}\n      >\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\ncustomElement<SpinProps>(\n  'n-spin',\n  { class: void 0, css: void 0, spin: void 0, children: void 0 },\n  (_, opt) => {\n    const childNodes = (opt.element?.childNodes as NodeList) || [];\n    const nodes = [...childNodes.values()];\n    const [, props] = splitProps(_, ['children']);\n\n    createEffect(() => {\n      opt.element?.replaceChildren();\n    });\n    return <Spin {...props}>{nodes}</Spin>;\n  },\n);\n\nexport default Spin;\n"],"names":["Show","createEffect","splitProps","css","cx","customElement","theme","style","Spin","props","baseStyle","children","class","spin","_","opt","nodes","childNodes","element","values","replaceChildren"],"mappings":"0TAAA,QAASA,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAC1D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAAOC,MAAW,UAAW,CAG7B,IAAMC,EAAQJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DlB,CAAC,CAaD,SAASK,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAEtB,0DAEwBI,gDACAH,UACnBP,qBAAWS,EAAMN,GAAG,8DACCA,EAAIM,EAAMN,GAAG,kDAQXM,EAAME,QAAQ,cAL7BP,EAAG,OAAQK,EAAMG,KAAK,MAElBH,EAAMI,IAAI,sHAO7B,CAIAR,EACE,SACA,CAAEO,MAAO,KAAK,EAAGT,IAAK,KAAK,EAAGU,KAAM,KAAK,EAAGF,SAAU,KAAK,CAAE,EAC7D,CAACG,EAAGC,SACkBA,EACpB,IAAMC,EAAQ,IAAIC,AADC,CAAA,QAACF,EAAAA,EAAIG,OAAO,SAAXH,EAAaE,UAAU,GAAiB,EAAE,AAAD,EAChCE,MAAM,GAAG,CAChC,EAAGV,EAAM,CAAGP,EAAWY,EAAG,CAAC,WAAW,EAK5C,OAHAb,EAAa,SACXc,SAAAA,EAAAA,EAAIG,OAAO,GAAXH,EAAaK,eAAe,EAC9B,KACQZ,IAASC,YAAQO,IAC3B,EAGF,gBAAeR,CAAK"}
+{"version":3,"sources":["../../components/spin/index.tsx"],"sourcesContent":["import { createEffect, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport theme from '../theme';\n\nconst style = css`\n  :host {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  .spin {\n    inline-size: fit-content;\n    inline-size: 100%;\n    block-size: 100%;\n    min-inline-size: 16px;\n    min-block-size: 16px;\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spining {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\n      filter: blur(4px);\n    }\n\n    &::before {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: auto;\n      border: 1px solid;\n      border-color: var(--text-secondary) transparent;\n      border-radius: 50%;\n      font-size: large;\n      text-align: center;\n      inline-size: 16px;\n      block-size: 16px;\n      inset-block: 0;\n      inset-inline: 0;\n      box-sizing: border-box;\n      line-height: 1;\n      content: '';\n      animation: spin-rotate-effect 1s infinite;\n    }\n  }\n\n  @keyframes spin-rotate-effect {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport interface SpinProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 加载状态 */\n  spin?: boolean;\n  /** 内容 */\n  children?: JSX.Element | JSX.Element[];\n}\n\nfunction Spin(props: SpinProps) {\n  const { baseStyle } = theme;\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        class={cx('spin', props.class)}\n        classList={{\n          spining: props.spin,\n        }}\n      >\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\ncustomElement<SpinProps>(\n  'n-spin',\n  { class: void 0, css: void 0, spin: void 0, children: void 0 },\n  (_, opt) => {\n    const childNodes = (opt.element.childNodes as NodeList) || [];\n    const nodes = [...childNodes.values()];\n    const [, props] = splitProps(_, ['children']);\n\n    createEffect(() => {\n      opt.element.replaceChildren();\n    });\n    return <Spin {...props}>{nodes}</Spin>;\n  },\n);\n\nexport default Spin;\n"],"names":["createEffect","Show","splitProps","css","cx","customElement","theme","style","Spin","props","baseStyle","children","class","spin","_","opt","nodes","childNodes","element","values","replaceChildren"],"mappings":"0TAAA,QAASA,gBAAAA,CAAY,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAC1D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAAOC,MAAW,UAAW,CAE7B,IAAMC,EAAQJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DlB,CAAC,CAaD,SAASK,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAEtB,0DAEwBI,gDACAH,UACnBN,qBAAWQ,EAAMN,GAAG,8DACCA,EAAIM,EAAMN,GAAG,kDAQXM,EAAME,QAAQ,cAL7BP,EAAG,OAAQK,EAAMG,KAAK,MAElBH,EAAMI,IAAI,sHAO7B,CAIAR,EACE,SACA,CAAEO,MAAO,KAAK,EAAGT,IAAK,KAAK,EAAGU,KAAM,KAAK,EAAGF,SAAU,KAAK,CAAE,EAC7D,CAACG,EAAGC,KAEF,IAAMC,EAAQ,IAAIC,AADC,CAAA,AAACF,EAAIG,OAAO,CAACD,UAAU,EAAiB,EAAE,AAAD,EAC/BE,MAAM,GAAG,CAChC,EAAGV,EAAM,CAAGP,EAAWY,EAAG,CAAC,WAAW,EAK5C,OAHAd,EAAa,KACXe,EAAIG,OAAO,CAACE,eAAe,EAC7B,KACQZ,IAASC,YAAQO,IAC3B,EAGF,gBAAeR,CAAK"}

package/es/switch/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: 开关
+subtitle: n-switch
+icon: 🗝️
+---
+
+# Switch 开关
+
+> 在两种状态之间的切换的选择器

package/es/switch/examples/basic.md

@@ -0,0 +1,24 @@
+---
+title: 基本使用
+description: 最简单的使用方式
+order: 1
+---
+
+```html
+<n-switch></n-switch>
+<script>
+  const el = container.querySelector('n-switch');
+
+  el.onchange = function (e) {
+    console.log('html', e.detail);
+  };
+</script>
+```
+
+```jsx
+<n-switch
+  onChange={(e) => {
+    console.log('jsx', e.detail);
+  }}
+/>
+```

package/es/switch/examples/checked-text.md

@@ -0,0 +1,17 @@
+---
+title: 文字描述
+description: 给按钮添加文字描述
+order: 2
+---
+
+```html
+<n-switch checked-text="ON" un-checked-text="OFF"></n-switch>
+<n-switch checked="true" checked-text="开" un-checked-text="关"></n-switch>
+<n-switch checked-text="启动" un-checked-text="停止"></n-switch>
+```
+
+```jsx
+<n-switch checked-text="ON" un-checked-text="OFF" />
+<n-switch checked checked-text="开" un-checked-text="关" />
+<n-switch checked-text="启动" un-checked-text="停止" />
+```

package/es/switch/examples/disabled.md

@@ -0,0 +1,15 @@
+---
+title: 不可用状态
+description: 禁止交互
+order: 3
+---
+
+```html
+<n-switch checked="true" disabled="true"></n-switch>
+<n-switch checked-text="开" un-checked-text="关" disabled="true"></n-switch>
+```
+
+```jsx
+<n-switch checked disabled />
+<n-switch checked-text="开" un-checked-text="关" disabled />
+```

package/es/switch/examples/loading.md

@@ -0,0 +1,17 @@
+---
+title: 加载状态
+description: 操作仍在执行中,禁止交互
+order: 4
+---
+
+```html
+<n-switch checked-text="开启" un-checked-text="关闭" checked="true" loading="true"></n-switch>
+<n-switch loading="true"></n-switch>
+<n-switch checked-text="开" un-checked-text="关" loading="true"></n-switch>
+```
+
+```jsx
+<n-switch checked-text="开启" un-checked-text="关闭" checked loading />
+<n-switch loading />
+<n-switch checked-text="开" un-checked-text="关" loading />
+```

package/es/switch/index.js

@@ -1,2 +1,2 @@
-import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as d}from"solid-js/web";import{addEventListener as l}from"solid-js/web";let n=e("<style> "),r=e("<style>"),c=e("<span>");import{Show as a,createEffect as v,createSignal as m,mergeProps as h}from"solid-js";import{css as f,cx as u}from"@moneko/css";import{customElement as $}from"solid-element";import{style as _}from"./style";import g from"../theme";function p(e){let{baseStyle:i}=g,[h,$]=m(!1);function p(){e.disabled||e.loading||($(e=>!e),null==e.onChange||e.onChange.call(e,h()))}function k({key:e}){"Enter"===e&&p()}return v(()=>{$(!!e.checked)}),[(()=>{let e=n(),t=e.firstChild;return o(()=>t.data=i()),e})(),(()=>{let e=r();return e.textContent=_,e})(),s(a,{get when(){return e.css},get children(){let t=n(),i=t.firstChild;return o(()=>i.data=f(e.css)),t}}),(()=>{let i=c();return l(i,"keyup",k,!0),l(i,"click",p,!0),o(o=>{let s=u("switch",e.class),l=!!h(),n=!!e.loading,r=e.checkedText,c=e.unCheckedText,a=e.disabled,v=e.disabled||e.loading?-1:0;return s!==o._v$&&d(i,o._v$=s),l!==o._v$2&&i.classList.toggle("checked",o._v$2=l),n!==o._v$3&&i.classList.toggle("loading",o._v$3=n),r!==o._v$4&&t(i,"text-on",o._v$4=r),c!==o._v$5&&t(i,"text-off",o._v$5=c),a!==o._v$6&&t(i,"aria-disabled",o._v$6=a),v!==o._v$7&&t(i,"tabindex",o._v$7=v),o},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0}),i})()]}$("n-switch",{class:void 0,css:void 0,checked:void 0,disabled:void 0,checkedText:void 0,unCheckedText:void 0,loading:!1,onChange:void 0},(e,t)=>{let o=t.element,i=h({css:o.css,checked:o.checked,disabled:o.disabled,checkedText:o.checkedText,unCheckedText:o.unCheckedText,loading:o.loading,onChange(e){o.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return v(()=>{o.removeAttribute("css")}),s(p,i)});export default p;i(["click","keyup"]);
+import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as d}from"solid-js/web";import{addEventListener as l}from"solid-js/web";let n=e("<style> "),r=e("<style>"),c=e("<span>");import{createEffect as a,createSignal as v,mergeProps as m,Show as h}from"solid-js";import{css as f,cx as u}from"@moneko/css";import{customElement as $}from"solid-element";import _ from"../theme";import{style as g}from"./style";function p(e){let{baseStyle:i}=_,[m,$]=v(!1);function p(){e.disabled||e.loading||($(e=>!e),null==e.onChange||e.onChange.call(e,m()))}function k({key:e}){"Enter"===e&&p()}return a(()=>{$(!!e.checked)}),[(()=>{let e=n(),t=e.firstChild;return o(()=>t.data=i()),e})(),(()=>{let e=r();return e.textContent=g,e})(),s(h,{get when(){return e.css},get children(){let t=n(),i=t.firstChild;return o(()=>i.data=f(e.css)),t}}),(()=>{let i=c();return l(i,"keyup",k,!0),l(i,"click",p,!0),o(o=>{let s=u("switch",e.class),l=!!m(),n=!!e.loading,r=e.checkedText,c=e.unCheckedText,a=e.disabled,v=e.disabled||e.loading?-1:0;return s!==o._v$&&d(i,o._v$=s),l!==o._v$2&&i.classList.toggle("checked",o._v$2=l),n!==o._v$3&&i.classList.toggle("loading",o._v$3=n),r!==o._v$4&&t(i,"text-on",o._v$4=r),c!==o._v$5&&t(i,"text-off",o._v$5=c),a!==o._v$6&&t(i,"aria-disabled",o._v$6=a),v!==o._v$7&&t(i,"tabindex",o._v$7=v),o},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0}),i})()]}$("n-switch",{class:void 0,css:void 0,checked:void 0,disabled:void 0,checkedText:void 0,unCheckedText:void 0,loading:!1,onChange:void 0},(e,t)=>{let o=t.element,i=m({css:o.css,checked:o.checked,disabled:o.disabled,checkedText:o.checkedText,unCheckedText:o.unCheckedText,loading:o.loading,onChange(e){o.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return a(()=>{o.removeAttribute("css")}),s(p,i)});export default p;i(["click","keyup"]);
 //# sourceMappingURL=index.js.map

package/es/switch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/switch/index.tsx"],"sourcesContent":["import { Show, createEffect, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface SwitchProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 值 */\n  checked?: boolean;\n  /** 只读 */\n  disabled?: boolean;\n  /** 设置 为 true 时的文案 */\n  checkedText?: string;\n  /** 设置 为 false 时的文案 */\n  unCheckedText?: string;\n  /** 加载状态 */\n  loading?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n}\n\nexport type SwitchElement = CustomElement<SwitchProps>;\n\nfunction Switch(props: SwitchProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal(false);\n\n  function change() {\n    if (!props.disabled && !props.loading) {\n      setValue((prev) => !prev);\n      props.onChange?.(value());\n    }\n  }\n\n  function onKeyUp({ key }: { key: string }) {\n    if (key === 'Enter') {\n      change();\n    }\n  }\n\n  createEffect(() => {\n    setValue(!!props.checked);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <span\n        class={cx('switch', props.class)}\n        classList={{\n          checked: value(),\n          loading: props.loading,\n        }}\n        text-on={props.checkedText}\n        text-off={props.unCheckedText}\n        aria-disabled={props.disabled}\n        onClick={change}\n        onKeyUp={onKeyUp}\n        tabindex={props.disabled || props.loading ? -1 : 0}\n      />\n    </>\n  );\n}\n\ncustomElement<SwitchProps>(\n  'n-switch',\n  {\n    class: void 0,\n    css: void 0,\n    checked: void 0,\n    disabled: void 0,\n    checkedText: void 0,\n    unCheckedText: void 0,\n    loading: false,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        checked: el.checked,\n        disabled: el.disabled,\n        checkedText: el.checkedText,\n        unCheckedText: el.unCheckedText,\n        loading: el.loading,\n        onChange(val: boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n    });\n    return <Switch {...props} />;\n  },\n);\nexport default Switch;\n"],"names":["Show","createEffect","createSignal","mergeProps","css","cx","customElement","style","theme","Switch","props","baseStyle","value","setValue","change","disabled","loading","prev","onChange","onKeyUp","key","checked","class","checkedText","unCheckedText","_","opt","el","element","val","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"gWAAA,QAASA,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACxE,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAW,UAAW,CAwB7B,SAASC,EAAOC,CAAkB,EAChC,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGH,EAChB,CAACI,EAAOC,EAAS,CAAGX,EAAa,CAAA,GAEvC,SAASY,IACFJ,EAAMK,QAAQ,EAAKL,EAAMM,OAAO,GACnCH,EAAS,AAACI,GAAS,CAACA,SACpBP,EAAMQ,QAAQ,EAAdR,EAAMQ,QAAQ,MAAdR,EAAiBE,KAErB,CAEA,SAASO,EAAQ,CAAEC,IAAAA,CAAG,CAAmB,EAC3B,UAARA,GACFN,GAEJ,CAMA,OAJAb,EAAa,KACXY,EAAS,CAAC,CAACH,EAAMW,OAAO,CAC1B,uDAIwBV,gDACAJ,UACnBP,qBAAWU,EAAMN,GAAG,8DACCA,EAAIM,EAAMN,GAAG,2CAYxBe,kBADAL,kBARFT,EAAG,SAAUK,EAAMY,KAAK,MAEpBV,QACAF,EAAMM,OAAO,GAEfN,EAAMa,WAAW,GAChBb,EAAMc,aAAa,GACdd,EAAMK,QAAQ,GAGnBL,EAAMK,QAAQ,EAAIL,EAAMM,OAAO,CAAG,GAAK,8XAIzD,CAEAV,EACE,WACA,CACEgB,MAAO,KAAK,EACZlB,IAAK,KAAK,EACViB,QAAS,KAAK,EACdN,SAAU,KAAK,EACfQ,YAAa,KAAK,EAClBC,cAAe,KAAK,EACpBR,QAAS,CAAA,EACTE,SAAU,KAAK,CACjB,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBlB,EAAQP,EACZ,CACEC,IAAKuB,EAAGvB,GAAG,CACXiB,QAASM,EAAGN,OAAO,CACnBN,SAAUY,EAAGZ,QAAQ,CACrBQ,YAAaI,EAAGJ,WAAW,CAC3BC,cAAeG,EAAGH,aAAa,CAC/BR,QAASW,EAAGX,OAAO,CACnBE,SAASW,CAAY,EACnBF,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAJ,GAMF,OAHAxB,EAAa,KACX0B,EAAGM,eAAe,CAAC,MACrB,KACQxB,EAAWC,EACrB,EAEF,gBAAeD,CAAO"}
+{"version":3,"sources":["../../components/switch/index.tsx"],"sourcesContent":["import { createEffect, createSignal, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport theme from '../theme';\n\nimport { style } from './style';\n\nexport interface SwitchProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 值 */\n  checked?: boolean;\n  /** 只读 */\n  disabled?: boolean;\n  /** 设置 为 true 时的文案 */\n  checkedText?: string;\n  /** 设置 为 false 时的文案 */\n  unCheckedText?: string;\n  /** 加载状态 */\n  loading?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n}\n\nexport type SwitchElement = CustomElement<SwitchProps>;\n\nfunction Switch(props: SwitchProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal(false);\n\n  function change() {\n    if (!props.disabled && !props.loading) {\n      setValue((prev) => !prev);\n      props.onChange?.(value());\n    }\n  }\n\n  function onKeyUp({ key }: { key: string }) {\n    if (key === 'Enter') {\n      change();\n    }\n  }\n\n  createEffect(() => {\n    setValue(!!props.checked);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <span\n        class={cx('switch', props.class)}\n        classList={{\n          checked: value(),\n          loading: props.loading,\n        }}\n        text-on={props.checkedText}\n        text-off={props.unCheckedText}\n        aria-disabled={props.disabled}\n        onClick={change}\n        onKeyUp={onKeyUp}\n        tabindex={props.disabled || props.loading ? -1 : 0}\n      />\n    </>\n  );\n}\n\ncustomElement<SwitchProps>(\n  'n-switch',\n  {\n    class: void 0,\n    css: void 0,\n    checked: void 0,\n    disabled: void 0,\n    checkedText: void 0,\n    unCheckedText: void 0,\n    loading: false,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        checked: el.checked,\n        disabled: el.disabled,\n        checkedText: el.checkedText,\n        unCheckedText: el.unCheckedText,\n        loading: el.loading,\n        onChange(val: boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n    });\n    return <Switch {...props} />;\n  },\n);\nexport default Switch;\n"],"names":["createEffect","createSignal","mergeProps","Show","css","cx","customElement","theme","style","Switch","props","baseStyle","value","setValue","change","disabled","loading","prev","onChange","onKeyUp","key","checked","class","checkedText","unCheckedText","_","opt","el","element","val","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"gWAAA,QAASA,gBAAAA,CAAY,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AACxE,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAAOC,MAAW,UAAW,AAE7B,QAASC,SAAAA,CAAK,KAAQ,SAAU,CAuBhC,SAASC,EAAOC,CAAkB,EAChC,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAChB,CAACK,EAAOC,EAAS,CAAGZ,EAAa,CAAA,GAEvC,SAASa,IACFJ,EAAMK,QAAQ,EAAKL,EAAMM,OAAO,GACnCH,EAAS,AAACI,GAAS,CAACA,SACpBP,EAAMQ,QAAQ,EAAdR,EAAMQ,QAAQ,MAAdR,EAAiBE,KAErB,CAEA,SAASO,EAAQ,CAAEC,IAAAA,CAAG,CAAmB,EAC3B,UAARA,GACFN,GAEJ,CAMA,OAJAd,EAAa,KACXa,EAAS,CAAC,CAACH,EAAMW,OAAO,CAC1B,uDAIwBV,gDACAH,UACnBL,qBAAWO,EAAMN,GAAG,8DACCA,EAAIM,EAAMN,GAAG,2CAYxBe,kBADAL,kBARFT,EAAG,SAAUK,EAAMY,KAAK,MAEpBV,QACAF,EAAMM,OAAO,GAEfN,EAAMa,WAAW,GAChBb,EAAMc,aAAa,GACdd,EAAMK,QAAQ,GAGnBL,EAAMK,QAAQ,EAAIL,EAAMM,OAAO,CAAG,GAAK,8XAIzD,CAEAV,EACE,WACA,CACEgB,MAAO,KAAK,EACZlB,IAAK,KAAK,EACViB,QAAS,KAAK,EACdN,SAAU,KAAK,EACfQ,YAAa,KAAK,EAClBC,cAAe,KAAK,EACpBR,QAAS,CAAA,EACTE,SAAU,KAAK,CACjB,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBlB,EAAQR,EACZ,CACEE,IAAKuB,EAAGvB,GAAG,CACXiB,QAASM,EAAGN,OAAO,CACnBN,SAAUY,EAAGZ,QAAQ,CACrBQ,YAAaI,EAAGJ,WAAW,CAC3BC,cAAeG,EAAGH,aAAa,CAC/BR,QAASW,EAAGX,OAAO,CACnBE,SAASW,CAAY,EACnBF,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAJ,GAMF,OAHAzB,EAAa,KACX2B,EAAGM,eAAe,CAAC,MACrB,KACQxB,EAAWC,EACrB,EAEF,gBAAeD,CAAO"}

package/es/table/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据展示
+title: 数据表格
+subtitle: n-table
+icon: 📈
+---
+
+# Table 数据表格
+
+> 当有大量结构化的数据需要展现时, 使用表格可以对数据进行更好的梳理以进行排序、搜索、分页、自定义操作等复杂行为

package/es/table/examples/basic.md

@@ -0,0 +1,29 @@
+---
+title: 基本使用
+description: 最简单的使用方式
+---
+
+```html
+<n-table></n-table>
+<script>
+  const el = container.querySelector('n-table');
+
+  el.columns = { name: '用户名', age: '年龄' };
+  el.data = [
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+    { name: 'user 3', age: 3 },
+  ];
+</script>
+```
+
+```jsx
+<n-table
+  columns={{ name: '用户名', age: '年龄' }}
+  data={[
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+    { name: 'user 3', age: 3 },
+  ]}
+/>
+```

package/es/table/examples/key.md

@@ -0,0 +1,29 @@
+---
+title: 自定义取值
+description: 通过 `key` 指定取值
+---
+
+```html
+<n-table></n-table>
+<script>
+  const el = container.querySelector('n-table');
+
+  el.columns = { name: '用户名', age: '年龄', 自定义: { key: 'age' } };
+  el.data = [
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+    { name: 'user 3', age: 3 },
+  ];
+</script>
+```
+
+```jsx
+<n-table
+  columns={{ name: '用户名', age: '年龄', 自定义: { key: 'age' } }}
+  data={[
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+    { name: 'user 3', age: 3 },
+  ]}
+/>
+```

package/es/table/examples/order.md

@@ -0,0 +1,29 @@
+---
+title: 序号
+description: 添加序号到第一列
+---
+
+```html
+<n-table></n-table>
+<script>
+  const el = container.querySelector('n-table');
+
+  el.columns = { order: { type: 'order' }, name: '用户名', age: '年龄' };
+  el.data = [
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+    { name: 'user 3', age: 3 },
+  ];
+</script>
+```
+
+```jsx
+<n-table
+  columns={{ order: { type: 'order' }, name: '用户名', age: '年龄' }}
+  data={[
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+    { name: 'user 3', age: 3 },
+  ]}
+/>
+```