neko-ui 2.8.21 → 2.8.23

package/lib/input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/input/index.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface InputProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 前缀 */\n  prefixIcon?: JSX.Element;\n  /** 后缀 */\n  suffixIcon?: JSX.Element;\n  /** 大写锁定图标, 可以结合密码输入框使用\n   * @since 2.5.2\n   */\n  capsLockIcon?: JSX.Element;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 自动完成 */\n  autoComplete?: string;\n  /** 占位文本 */\n  placeholder?: string;\n  /** 组件尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 描述 */\n  label?: JSX.Element;\n  /** 状态 */\n  status?: 'error' | 'warning' | 'success';\n  /** 类型\n   * @default 'text'\n   */\n  type?: 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';\n  /** HTML attribute: accept */\n  accept?: string;\n  /** 值 */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 值变更时触发的函数 */\n  onChange?: (value: InputProps['value']) => void;\n  onKeyDown?(e: KeyboardEvent): void;\n  onMouseDown?(e: MouseEvent): void;\n  onFocus?(e: FocusEvent): void;\n  onBlur?(e: FocusEvent): void;\n  onKeyUp?(e: KeyboardEvent): void;\n  /** 指定输入框展示值的格式 */\n  formatter?: (value?: InputProps['value']) => InputProps['value'];\n  /** 搭配 formatter 使用, 将转换后的值转回原来的值 */\n  parser?: (value?: InputProps['value']) => InputProps['value'];\n}\n\nfunction Input(props: InputProps) {\n  const { baseStyle } = theme;\n  let inputRef: HTMLInputElement | undefined;\n  const [x, setX] = createSignal<string>();\n  const [capsLock, setCapsLock] = createSignal(false);\n\n  function parserValue(val: InputProps['value']) {\n    if (props.parser) {\n      return isFunction(props.parser) ? props.parser(val) : props.parser;\n    } else if (props.type === 'number' && typeof val === 'string') {\n      const num = val.replace(/[^\\d]/g, '');\n\n      return num.length ? parseFloat(num) : void 0;\n    }\n    return val;\n  }\n\n  function handleInput(e: Event & { target: HTMLInputElement }) {\n    props.onChange?.(parserValue(e.target?.value));\n  }\n  function handleMouseDown(e: MouseEvent) {\n    props.onMouseDown?.(e);\n  }\n  function handleKeyDown(e: KeyboardEvent) {\n    if (props.capsLockIcon) {\n      setCapsLock(e.getModifierState('CapsLock'));\n    }\n    props.onKeyDown?.(e);\n  }\n  function handleBlur(e: FocusEvent) {\n    props.onBlur?.(e);\n  }\n  function handleKeyUp(e: KeyboardEvent) {\n    props.onKeyUp?.(e);\n  }\n\n  const value = createMemo(() => {\n    if (props.formatter) {\n      return isFunction(props.formatter) ? props.formatter(props.value) : props.formatter;\n    }\n    return props.value;\n  });\n\n  createEffect(() => {\n    if (props.label) {\n      setX(`.label {--x: ${inputRef?.offsetLeft || 0}px;opacity:1;}`);\n    }\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <style textContent={x()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <fieldset\n        class={cx('fieldset', props.size, props.status, props.class)}\n        disabled={props.disabled}\n      >\n        <Show when={props.prefixIcon}>\n          <span class=\"prefix\">{props.prefixIcon}</span>\n        </Show>\n        <input\n          ref={inputRef}\n          class=\"input\"\n          part=\"input\"\n          onChange={handleInput}\n          type={props.type}\n          value={value()}\n          autocomplete={props.autoComplete}\n          accept={props.accept}\n          placeholder={props.placeholder}\n          onMouseDown={handleMouseDown}\n          onKeyDown={handleKeyDown}\n          onKeyUp={handleKeyUp}\n          onBlur={handleBlur}\n        />\n        <Show when={props.label}>\n          <label class=\"label\">{props.label}</label>\n        </Show>\n        <Show when={props.capsLockIcon && capsLock()}>\n          <span class=\"caps-lock\">{props.capsLockIcon}</span>\n        </Show>\n        <Show when={props.suffixIcon}>\n          <span class=\"suffix\">{props.suffixIcon}</span>\n        </Show>\n      </fieldset>\n    </>\n  );\n}\n\nexport type InputElement = CustomElement<InputProps>;\n\nexport const defaultInportProps = {\n  class: void 0,\n  css: void 0,\n  suffixIcon: void 0,\n  prefixIcon: void 0,\n  capsLockIcon: void 0,\n  size: void 0,\n  disabled: void 0,\n  status: void 0,\n  type: void 0,\n  label: void 0,\n  value: void 0,\n  defaultValue: void 0,\n  formatter: void 0,\n  parser: void 0,\n  onChange: void 0,\n  onMouseDown: void 0,\n  onKeyDown: void 0,\n  accept: void 0,\n  autoComplete: void 0,\n  placeholder: '请输入',\n};\n\ncustomElement<InputProps>('n-input', defaultInportProps, (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      css: el.css,\n      size: el.size || 'normal',\n      value: el.value || el.defaultValue || '',\n      type: el.type || 'text',\n      onChange(val?: number | string) {\n        el.dispatchEvent(\n          new CustomEvent('change', {\n            detail: val,\n          }),\n        );\n      },\n    },\n    _,\n  );\n\n  return <Input {...props} />;\n});\n\nexport default Input;\n"],"names":["defaultInportProps","Input","props","inputRef","baseStyle","theme","x","setX","createSignal","capsLock","setCapsLock","handleInput","e","onChange","parserValue","val","parser","isFunction","type","num","replace","length","parseFloat","target","value","handleMouseDown","onMouseDown","handleKeyDown","capsLockIcon","getModifierState","onKeyDown","handleBlur","onBlur","handleKeyUp","onKeyUp","createMemo","formatter","createEffect","label","offsetLeft","style","Show","css","prefixIcon","suffixIcon","cx","size","status","class","disabled","autoComplete","accept","placeholder","defaultValue","customElement","_","opt","el","element","mergeProps","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
+{"version":3,"sources":["../../components/input/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, mergeProps, Show } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement } from '..';\nimport theme from '../theme';\n\nimport { style } from './style';\n\nexport interface InputProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 前缀 */\n  prefixIcon?: JSX.Element;\n  /** 后缀 */\n  suffixIcon?: JSX.Element;\n  /** 大写锁定图标, 可以结合密码输入框使用\n   * @since 2.5.2\n   */\n  capsLockIcon?: JSX.Element;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 自动完成 */\n  autoComplete?: string;\n  /** 占位文本 */\n  placeholder?: string;\n  /** 组件尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 描述 */\n  label?: JSX.Element;\n  /** 状态 */\n  status?: 'error' | 'warning' | 'success';\n  /** 类型\n   * @default 'text'\n   */\n  type?: 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';\n  /** HTML attribute: accept */\n  accept?: string;\n  /** 值 */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 值变更时触发的函数 */\n  onChange?: (value: InputProps['value']) => void;\n  onKeyDown?(e: KeyboardEvent): void;\n  onMouseDown?(e: MouseEvent): void;\n  onFocus?(e: FocusEvent): void;\n  onBlur?(e: FocusEvent): void;\n  onKeyUp?(e: KeyboardEvent): void;\n  /** 指定输入框展示值的格式 */\n  formatter?: (value?: InputProps['value']) => InputProps['value'];\n  /** 搭配 formatter 使用, 将转换后的值转回原来的值 */\n  parser?: (value?: InputProps['value']) => InputProps['value'];\n}\n\nfunction Input(props: InputProps) {\n  const { baseStyle } = theme;\n  let inputRef: HTMLInputElement | undefined;\n  const [x, setX] = createSignal<string>();\n  const [capsLock, setCapsLock] = createSignal(false);\n\n  function parserValue(val: InputProps['value']) {\n    if (props.parser) {\n      return isFunction(props.parser) ? props.parser(val) : props.parser;\n    } else if (props.type === 'number' && typeof val === 'string') {\n      const num = val.replace(/[^\\d]/g, '');\n\n      return num.length ? parseFloat(num) : void 0;\n    }\n    return val;\n  }\n\n  function handleInput(e: Event & { target?: HTMLInputElement }) {\n    props.onChange?.(parserValue(e.target?.value));\n  }\n  function handleMouseDown(e: MouseEvent) {\n    props.onMouseDown?.(e);\n  }\n  function handleKeyDown(e: KeyboardEvent) {\n    if (props.capsLockIcon) {\n      setCapsLock(e.getModifierState('CapsLock'));\n    }\n    props.onKeyDown?.(e);\n  }\n  function handleBlur(e: FocusEvent) {\n    props.onBlur?.(e);\n  }\n  function handleKeyUp(e: KeyboardEvent) {\n    props.onKeyUp?.(e);\n  }\n\n  const value = createMemo(() => {\n    if (props.formatter) {\n      return isFunction(props.formatter) ? props.formatter(props.value) : props.formatter;\n    }\n    return props.value;\n  });\n\n  createEffect(() => {\n    if (props.label) {\n      setX(`.label {--x: ${inputRef?.offsetLeft || 0}px;opacity:1;}`);\n    }\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <style textContent={x()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <fieldset\n        class={cx('fieldset', props.size, props.status, props.class)}\n        disabled={props.disabled}\n      >\n        <Show when={props.prefixIcon}>\n          <span class=\"prefix\">{props.prefixIcon}</span>\n        </Show>\n        <input\n          ref={inputRef}\n          class=\"input\"\n          part=\"input\"\n          onChange={handleInput}\n          type={props.type}\n          value={value()}\n          autocomplete={props.autoComplete}\n          accept={props.accept}\n          placeholder={props.placeholder}\n          onMouseDown={handleMouseDown}\n          onKeyDown={handleKeyDown}\n          onKeyUp={handleKeyUp}\n          onBlur={handleBlur}\n        />\n        <Show when={props.label}>\n          <label class=\"label\">{props.label}</label>\n        </Show>\n        <Show when={props.capsLockIcon && capsLock()}>\n          <span class=\"caps-lock\">{props.capsLockIcon}</span>\n        </Show>\n        <Show when={props.suffixIcon}>\n          <span class=\"suffix\">{props.suffixIcon}</span>\n        </Show>\n      </fieldset>\n    </>\n  );\n}\n\nexport type InputElement = CustomElement<InputProps>;\n\nexport const defaultInportProps = {\n  class: void 0,\n  css: void 0,\n  suffixIcon: void 0,\n  prefixIcon: void 0,\n  capsLockIcon: void 0,\n  size: void 0,\n  disabled: void 0,\n  status: void 0,\n  type: void 0,\n  label: void 0,\n  value: void 0,\n  defaultValue: void 0,\n  formatter: void 0,\n  parser: void 0,\n  onChange: void 0,\n  onMouseDown: void 0,\n  onKeyDown: void 0,\n  accept: void 0,\n  autoComplete: void 0,\n  placeholder: '请输入',\n};\n\ncustomElement<InputProps>('n-input', defaultInportProps, (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      css: el.css,\n      size: el.size || 'normal',\n      value: el.value || el.defaultValue || '',\n      type: el.type || 'text',\n      onChange(val?: number | string) {\n        el.dispatchEvent(\n          new CustomEvent('change', {\n            detail: val,\n          }),\n        );\n      },\n    },\n    _,\n  );\n\n  return <Input {...props} />;\n});\n\nexport default Input;\n"],"names":["defaultInportProps","Input","props","inputRef","baseStyle","theme","x","setX","createSignal","capsLock","setCapsLock","handleInput","e","onChange","parserValue","val","parser","isFunction","type","num","replace","length","parseFloat","target","value","handleMouseDown","onMouseDown","handleKeyDown","capsLockIcon","getModifierState","onKeyDown","handleBlur","onBlur","handleKeyUp","onKeyUp","createMemo","formatter","createEffect","label","offsetLeft","style","Show","css","prefixIcon","suffixIcon","cx","size","status","class","disabled","autoComplete","accept","placeholder","defaultValue","customElement","_","opt","el","element","mergeProps","dispatchEvent","CustomEvent","detail"],"mappings":"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"}

package/lib/input-number/README.mdx

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

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

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

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

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

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

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

package/lib/input-number/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/input-number/index.tsx"],"sourcesContent":["import { createEffect, createSignal, mergeProps, onCleanup } from 'solid-js';\nimport { passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport Input, { defaultInportProps } from '../input';\nimport type { CustomElement, InputProps } from '..';\n\nconst style = css`\n  /** 隐藏原生加减控件 */\n  .number[type='number'] {\n    appearance: textfield;\n  }\n\n  .number[type='number']::-webkit-inner-spin-button,\n  .number[type='number']::-webkit-outer-spin-button {\n    appearance: none;\n  }\n`;\n\n/** API\n * @since 2.0.0\n */\nexport interface InputNumberProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange'> {\n  /** 值 */\n  value?: number;\n  /** 默认值\n   * @default 0\n   */\n  defaultValue?: number;\n  /** 最小值\n   * @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /** 最大值\n   * @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /** 值变更时触发的函数 */\n  onChange?: (value?: number) => void;\n  /** 每次改变步数，可以为小数\n   * @default 1\n   */\n  step?: number;\n  /** 数值精度\n   * @default 2\n   */\n  precision?: number;\n}\nexport type InputNumberElement = CustomElement<InputNumberProps>;\n\nfunction InputNumber(props: InputNumberProps) {\n  const [move, setMove] = createSignal(false);\n\n  function onMouseDown(e: MouseEvent) {\n    e.stopPropagation();\n    setMove(true);\n  }\n  function onKeyDown(e: KeyboardEvent) {\n    switch (e.key) {\n      case 'ArrowUp':\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        mouseMove({ movementX: 0, movementY: -1 });\n        break;\n      case 'ArrowDown':\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        mouseMove({ movementX: 0, movementY: 1 });\n        break;\n      default:\n        break;\n    }\n  }\n  function mouseUp() {\n    setMove(false);\n  }\n  const _ = mergeProps(\n    {\n      size: 'normal',\n      value: '',\n      defaultValue: 0,\n      type: 'text',\n      onKeyDown: onKeyDown,\n      onMouseDown: onMouseDown,\n      step: 1,\n      precision: 2,\n      max: Number.MAX_SAFE_INTEGER,\n      min: Number.MIN_SAFE_INTEGER,\n    },\n    props,\n  );\n\n  function change(val?: string | number) {\n    let _val = typeof val === 'string' ? parseFloat(val) : val;\n\n    if (isNaN(_val as number)) {\n      _val = '' as unknown as number;\n    }\n    if (typeof _val !== 'undefined') {\n      if (_val < (_.min as number)) _val = _.min;\n      if ((_val as number) > (_.max as number)) _val = _.max;\n    }\n    props.onChange?.(_val);\n  }\n\n  function mouseMove(e: { movementX: number; movementY: number }) {\n    const { movementX, movementY } = e;\n    const _val = _.value;\n    const val = typeof _val === 'number' && !isNaN(_val) ? _val : Number(_val) || 0;\n\n    change(Number(Number(val + (movementX - movementY) * (_.step as number)).toFixed(_.precision)));\n  }\n\n  createEffect(() => {\n    if (move()) {\n      document.body.addEventListener('mousemove', mouseMove, {\n        passive: passiveSupported,\n      });\n      document.body.addEventListener('mouseup', mouseUp, {\n        passive: passiveSupported,\n      });\n    }\n    onCleanup(() => {\n      document.body.removeEventListener('mousemove', mouseMove, false);\n      document.body.removeEventListener('mouseup', mouseUp, passiveSupported);\n    });\n  });\n\n  return (\n    <Input\n      {...(_ as InputProps)}\n      class={cx('number', props.class)}\n      onChange={change}\n      css={style + (props.css || '')}\n    />\n  );\n}\n\ncustomElement<InputNumberProps>(\n  'n-input-number',\n  {\n    ...defaultInportProps,\n    defaultValue: void 0,\n    max: void 0,\n    min: void 0,\n    onChange: void 0,\n    step: void 0,\n    precision: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(val?: number | string) {\n          el.value = val;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    return <InputNumber {...props} />;\n  },\n);\n\nexport default InputNumber;\n"],"names":["style","css","InputNumber","props","move","setMove","createSignal","mouseUp","_","mergeProps","size","value","defaultValue","type","onKeyDown","e","key","mouseMove","movementX","movementY","onMouseDown","stopPropagation","step","precision","max","Number","MAX_SAFE_INTEGER","min","MIN_SAFE_INTEGER","change","val","_val","parseFloat","isNaN","onChange","toFixed","createEffect","document","body","addEventListener","passive","passiveSupported","onCleanup","removeEventListener","Input","cx","class","customElement","defaultInportProps","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
+{"version":3,"sources":["../../components/input-number/index.tsx"],"sourcesContent":["import { createEffect, createSignal, mergeProps, onCleanup } from 'solid-js';\nimport { passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement, InputProps } from '..';\nimport Input, { defaultInportProps } from '../input';\n\nconst style = css`\n  /** 隐藏原生加减控件 */\n  .number[type='number'] {\n    appearance: textfield;\n  }\n\n  .number[type='number']::-webkit-inner-spin-button,\n  .number[type='number']::-webkit-outer-spin-button {\n    appearance: none;\n  }\n`;\n\n/** API\n * @since 2.0.0\n */\nexport interface InputNumberProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange'> {\n  /** 值 */\n  value?: number;\n  /** 默认值\n   * @default 0\n   */\n  defaultValue?: number;\n  /** 最小值\n   * @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /** 最大值\n   * @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /** 值变更时触发的函数 */\n  onChange?: (value?: number) => void;\n  /** 每次改变步数，可以为小数\n   * @default 1\n   */\n  step?: number;\n  /** 数值精度\n   * @default 2\n   */\n  precision?: number;\n}\nexport type InputNumberElement = CustomElement<InputNumberProps>;\n\nfunction InputNumber(props: InputNumberProps) {\n  const [move, setMove] = createSignal(false);\n\n  function onMouseDown(e: MouseEvent) {\n    e.stopPropagation();\n    setMove(true);\n  }\n  function onKeyDown(e: KeyboardEvent) {\n    switch (e.key) {\n      case 'ArrowUp':\n        mouseMove({ movementX: 0, movementY: -1 });\n        break;\n      case 'ArrowDown':\n        mouseMove({ movementX: 0, movementY: 1 });\n        break;\n      default:\n        break;\n    }\n  }\n  function mouseUp() {\n    setMove(false);\n  }\n  const _ = mergeProps(\n    {\n      size: 'normal',\n      value: '',\n      defaultValue: 0,\n      type: 'text',\n      onKeyDown: onKeyDown,\n      onMouseDown: onMouseDown,\n      step: 1,\n      precision: 2,\n      max: Number.MAX_SAFE_INTEGER,\n      min: Number.MIN_SAFE_INTEGER,\n    },\n    props,\n  );\n\n  function change(val?: string | number) {\n    let _val = typeof val === 'string' ? parseFloat(val) : val;\n\n    if (isNaN(_val!)) {\n      _val = '' as unknown as number;\n    }\n    if (typeof _val !== 'undefined') {\n      if (_val < _.min) _val = _.min;\n      if (_val > _.max) _val = _.max;\n    }\n    props.onChange?.(_val);\n  }\n\n  function mouseMove(e: { movementX: number; movementY: number }) {\n    const { movementX, movementY } = e;\n    const _val = _.value;\n    const val = typeof _val === 'number' && !isNaN(_val) ? _val : Number(_val) || 0;\n\n    change(Number(Number(val + (movementX - movementY) * _.step).toFixed(_.precision)));\n  }\n\n  createEffect(() => {\n    if (move()) {\n      document.body.addEventListener('mousemove', mouseMove, {\n        passive: passiveSupported,\n      });\n      document.body.addEventListener('mouseup', mouseUp, {\n        passive: passiveSupported,\n      });\n    }\n    onCleanup(() => {\n      document.body.removeEventListener('mousemove', mouseMove, false);\n      document.body.removeEventListener('mouseup', mouseUp, passiveSupported);\n    });\n  });\n\n  return (\n    <Input\n      {...(_ as InputProps)}\n      class={cx('number', props.class)}\n      onChange={change}\n      css={style + (props.css || '')}\n    />\n  );\n}\n\ncustomElement<InputNumberProps>(\n  'n-input-number',\n  {\n    ...defaultInportProps,\n    defaultValue: void 0,\n    max: void 0,\n    min: void 0,\n    onChange: void 0,\n    step: void 0,\n    precision: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(val?: number | string) {\n          el.value = val;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    return <InputNumber {...props} />;\n  },\n);\n\nexport default InputNumber;\n"],"names":["style","css","InputNumber","props","move","setMove","createSignal","mouseUp","_","mergeProps","size","value","defaultValue","type","onKeyDown","e","key","mouseMove","movementX","movementY","onMouseDown","stopPropagation","step","precision","max","Number","MAX_SAFE_INTEGER","min","MIN_SAFE_INTEGER","change","val","_val","parseFloat","isNaN","onChange","toFixed","createEffect","document","body","addEventListener","passive","passiveSupported","onCleanup","removeEventListener","Input","cx","class","customElement","defaultInportProps","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}

package/lib/katex/README.mdx

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

package/lib/katex/examples/block.md

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

package/lib/katex/examples/inline.md

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

package/lib/md/README.mdx

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

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

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

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

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

package/lib/md/examples/math.md

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

package/lib/md/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});const e=require("solid-js/web"),t=require("solid-js"),r=l(require("@moneko/common/lib/frameCallback")),n=require("@moneko/css"),o=require("solid-element");require("../code"),require("../img");const a=l(require("../md-style")),i=l(require("../theme"));function l(e){return e&&e.__esModule?e:{default:e}}function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(c=function(e){return e?r:t})(e)}const s=(0,e.template)("<style> "),u=(0,e.template)("<style>"),d=(0,e.template)('<article class="n-md-box" part="box"><div class="n-md-body" part="body">'),f=(0,e.template)('<article part="box">');function h(o){let l,h;let{baseStyle:p}=i.default,m=(0,t.mergeProps)({webWorker:!1,pictureViewer:!0,lazyPicture:!0,text:"",tools:["copy"],getAnchorContainer:()=>window},o);function g(){return new Worker("https://cdn.jsdelivr.net/npm/neko-ui@latest/es/md/worker.js")}let b=m.webWorker?g():void 0;function v(e){h&&(h.innerHTML=e.data)}async function y(e){let{text:t,pictureViewer:r,lazyPicture:n,langToolbar:o,...a}=e,i=(await Promise.resolve().then(()=>(function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=c(void 0);if(r&&r.has(e))return r.get(e);var n={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var i=o?Object.getOwnPropertyDescriptor(e,a):null;i&&(i.get||i.set)?Object.defineProperty(n,a,i):n[a]=e[a]}return n.default=e,r&&r.set(e,n),n})(require("marked-completed")))).default;l||((l=new i.Renderer).katexBlock=e=>`<n-katex display-mode="true">${e}</n-katex>`,l.katexInline=e=>`<n-katex>${e}</n-katex>`),l.image=(e,t,o)=>`<n-img lazy="${n}" disabled="${!r}" role="img" src="${e}" alt="${o}" ${t?`title="${t}"`:""}></n-img>`;let s=!!o?.length;l.code=function(e,t){return"treeview"===t?`<n-tree data="${e}" />`:`<n-code class="n-code" toolbar="${s}" language="${t}" ${a.langLineNumber?'line-number="true"':""}>${encodeURIComponent(e)}</n-code>`},v({data:i(t,{renderer:l,langToolbar:o,headerPrefix:"# ",breaks:!0,pedantic:!1,smartLists:!0,smartypants:!0,xhtml:!0,...a})})}(0,t.createEffect)(()=>{m.webWorker&&(b||(b=g()),b.addEventListener("message",v))}),(0,t.createEffect)(()=>{b?b.postMessage(JSON.stringify({text:m.text,langLineNumber:m.lineNumber,langToolbar:m.tools,pictureViewer:m.pictureViewer,lazyPicture:m.lazyPicture})):(0,r.default)(()=>y({text:m.text,langLineNumber:m.lineNumber,langToolbar:m.tools,pictureViewer:m.pictureViewer,lazyPicture:m.lazyPicture}))}),(0,t.onCleanup)(()=>{b&&(b.removeEventListener("message",v),b.terminate())});let w=[],x=[],k=[];function C(e){e.preventDefault(),e.stopPropagation();let t=e.target;t.hash?(h?.querySelector(decodeURIComponent(t.hash))?.scrollIntoView({behavior:"smooth",block:"nearest"}),w.forEach(e=>e.classList.remove("active")),t.classList.add("active")):window.open(t.href)}function P(e){e.forEach(e=>{let t;let r=e.target.getAttribute("id"),n=e.target.querySelectorAll("a");if(w.forEach(e=>{e.hash===`#${r}`?t=e:e.hash||n.forEach(r=>{r.href===e.href&&(t=e)})}),t){let r=k.indexOf(t);k.forEach(e=>{e.classList.remove("active")}),e.isIntersecting?k.push(t):-1!==r&&k.splice(r,1),k[0]&&(k[0].classList.add("active"),k[0].offsetParent?.scrollTo({top:k[0].offsetTop}))}})}return(0,t.createEffect)(()=>{let e;h&&m.text?.startsWith("[TOC]")&&(w=[...h.querySelectorAll(".n-md-toc a[href]")],x=[...h.querySelectorAll("h1, h2, h3, h4, h5, h6")],e=new IntersectionObserver(P,{rootMargin:"-50px 0px",threshold:.5}),x.forEach(t=>e.observe(t)),w.forEach(e=>{e.addEventListener("click",C)})),(0,t.onCleanup)(()=>{e&&(x.forEach(t=>e.unobserve(t)),e.disconnect()),w.forEach(e=>{e.removeEventListener("click",C)})})}),[(()=>{let t=s(),r=t.firstChild;return(0,e.effect)(()=>r.data=p()),t})(),(()=>{let e=u();return e.textContent=a.default,e})(),(0,e.createComponent)(t.Show,{get when(){return m.css},get children(){let t=s(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,n.css)(m.css)),t}}),(0,e.createComponent)(t.Switch,{get children(){return[(0,e.createComponent)(t.Match,{get when(){return m.children?.length},get children(){let r=d(),n=r.firstChild;return(0,e.insert)(n,(0,e.createComponent)(t.For,{get each(){return m.children},children:e=>e})),r}}),(0,e.createComponent)(t.Match,{get when(){return m.text},get children(){let t=f(),r=h;return"function"==typeof r?(0,e.use)(r,t):h=t,(0,e.effect)(()=>(0,e.className)(t,(0,n.cx)("n-md-box",m.class))),t}})]}})]}(0,o.customElement)("n-md",{class:void 0,pictureViewer:void 0,lazyPicture:void 0,lineNumber:!0,text:void 0,tools:void 0,getAnchorContainer:void 0,css:void 0,children:void 0,notRender:void 0,webWorker:void 0},(r,n)=>{let o=n.element,a=(0,t.mergeProps)({text:!r.notRender&&o.textContent||o.text,css:o.css,tools:o.tools,getAnchorContainer:o.getAnchorContainer},r);return(0,t.createEffect)(()=>{o.removeAttribute("css"),o.replaceChildren()}),(0,e.createComponent)(h,a)});const p=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});const e=require("solid-js/web"),t=require("solid-js"),r=l(require("@moneko/common/lib/frameCallback")),n=require("@moneko/css"),o=require("solid-element"),a=l(require("../md-style")),i=l(require("../theme"));function l(e){return e&&e.__esModule?e:{default:e}}function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(c=function(e){return e?r:t})(e)}require("../code"),require("../img");const s=(0,e.template)("<style> "),u=(0,e.template)("<style>"),d=(0,e.template)('<article class="n-md-box" part="box"><div class="n-md-body" part="body">'),f=(0,e.template)('<article part="box">');function h(o){let l,h;let{baseStyle:p}=i.default,m=(0,t.mergeProps)({webWorker:!1,pictureViewer:!0,lazyPicture:!0,text:"",tools:["copy"],getAnchorContainer:()=>window},o);function g(){return new Worker("https://cdn.jsdelivr.net/npm/neko-ui@latest/es/md/worker.js")}let b=m.webWorker?g():void 0;function v(e){h&&(h.innerHTML=e.data)}async function y(e){let{text:t,pictureViewer:r,lazyPicture:n,langToolbar:o,...a}=e,i=(await Promise.resolve().then(()=>(function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=c(void 0);if(r&&r.has(e))return r.get(e);var n={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var i=o?Object.getOwnPropertyDescriptor(e,a):null;i&&(i.get||i.set)?Object.defineProperty(n,a,i):n[a]=e[a]}return n.default=e,r&&r.set(e,n),n})(require("marked-completed")))).default;l||((l=new i.Renderer).katexBlock=e=>`<n-katex display-mode="true">${e}</n-katex>`,l.katexInline=e=>`<n-katex>${e}</n-katex>`),l.image=(e,t,o)=>`<n-img lazy="${n}" disabled="${!r}" role="img" src="${e}" alt="${o}" ${t?`title="${t}"`:""}></n-img>`;let s=!!o?.length;l.code=function(e,t){return"treeview"===t?`<n-tree data="${e}" />`:`<n-code class="n-code" toolbar="${s}" language="${t}" ${a.langLineNumber?'line-number="true"':""}>${encodeURIComponent(e)}</n-code>`},v({data:i(t,{renderer:l,langToolbar:o,headerPrefix:"# ",breaks:!0,pedantic:!1,smartLists:!0,smartypants:!0,xhtml:!0,...a})})}(0,t.createEffect)(()=>{m.webWorker&&(b||(b=g()),b.addEventListener("message",v))}),(0,t.createEffect)(()=>{b?b.postMessage(JSON.stringify({text:m.text,langLineNumber:m.lineNumber,langToolbar:m.tools,pictureViewer:m.pictureViewer,lazyPicture:m.lazyPicture})):(0,r.default)(()=>y({text:m.text,langLineNumber:m.lineNumber,langToolbar:m.tools,pictureViewer:m.pictureViewer,lazyPicture:m.lazyPicture}))}),(0,t.onCleanup)(()=>{b&&(b.removeEventListener("message",v),b.terminate())});let w=[],x=[],k=[];function C(e){e.preventDefault(),e.stopPropagation();let t=e.target;t.hash?(h?.querySelector(decodeURIComponent(t.hash))?.scrollIntoView({behavior:"smooth",block:"nearest"}),w.forEach(e=>{e.classList.remove("active")}),t.classList.add("active")):window.open(t.href)}function P(e){e.forEach(e=>{let t;let r=e.target.getAttribute("id"),n=e.target.querySelectorAll("a");if(w.forEach(e=>{e.hash===`#${r}`?t=e:e.hash||n.forEach(r=>{r.href===e.href&&(t=e)})}),t){let r=k.indexOf(t);k.forEach(e=>{e.classList.remove("active")}),e.isIntersecting?k.push(t):-1!==r&&k.splice(r,1),k[0]&&(k[0].classList.add("active"),k[0].offsetParent?.scrollTo({top:k[0].offsetTop}))}})}return(0,t.createEffect)(()=>{let e;h&&m.text.startsWith("[TOC]")&&(w=[...h.querySelectorAll(".n-md-toc a[href]")],x=[...h.querySelectorAll("h1, h2, h3, h4, h5, h6")],e=new IntersectionObserver(P,{rootMargin:"-50px 0px",threshold:.5}),x.forEach(t=>{e.observe(t)}),w.forEach(e=>{e.addEventListener("click",C)})),(0,t.onCleanup)(()=>{e&&(x.forEach(t=>{e.unobserve(t)}),e.disconnect()),w.forEach(e=>{e.removeEventListener("click",C)})})}),[(()=>{let t=s(),r=t.firstChild;return(0,e.effect)(()=>r.data=p()),t})(),(()=>{let e=u();return e.textContent=a.default,e})(),(0,e.createComponent)(t.Show,{get when(){return m.css},get children(){let t=s(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,n.css)(m.css)),t}}),(0,e.createComponent)(t.Switch,{get children(){return[(0,e.createComponent)(t.Match,{get when(){return(m.children||[]).length>0},get children(){let r=d(),n=r.firstChild;return(0,e.insert)(n,(0,e.createComponent)(t.For,{get each(){return m.children},children:e=>e})),r}}),(0,e.createComponent)(t.Match,{get when(){return m.text},get children(){let t=f(),r=h;return"function"==typeof r?(0,e.use)(r,t):h=t,(0,e.effect)(()=>(0,e.className)(t,(0,n.cx)("n-md-box",m.class))),t}})]}})]}(0,o.customElement)("n-md",{class:void 0,pictureViewer:void 0,lazyPicture:void 0,lineNumber:!0,text:void 0,tools:void 0,getAnchorContainer:void 0,css:void 0,children:void 0,notRender:void 0,webWorker:void 0},(r,n)=>{let o=n.element,a=(0,t.mergeProps)({text:!r.notRender&&o.textContent||o.text,css:o.css,tools:o.tools,getAnchorContainer:o.getAnchorContainer},r);return(0,t.createEffect)(()=>{o.removeAttribute("css"),o.replaceChildren()}),(0,e.createComponent)(h,a)});const p=h;
 //# sourceMappingURL=index.js.map

package/lib/md/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/md/index.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createEffect, mergeProps, onCleanup } from 'solid-js';\nimport { frameCallback } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport '../code';\nimport '../img';\nimport mdStyle from '../md-style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nfunction MD(_props: MdProps) {\n  let renderer: marked.Renderer | undefined;\n  let ref: HTMLDivElement | undefined;\n  const { baseStyle } = theme;\n  const props = mergeProps(\n    {\n      webWorker: false,\n      pictureViewer: true,\n      lazyPicture: true,\n      text: '',\n      tools: ['copy'],\n      getAnchorContainer: () => window as unknown as HTMLElement,\n    },\n    _props,\n  );\n\n  function initWorker() {\n    return new Worker('https://cdn.jsdelivr.net/npm/neko-ui@latest/es/md/worker.js');\n  }\n  // eslint-disable-next-line solid/reactivity\n  let worker: Worker | undefined = props.webWorker ? initWorker() : void 0;\n\n  function update(e: { data: string }) {\n    if (ref) {\n      ref.innerHTML = e.data;\n    }\n  }\n  async function postMessage(opt: {\n    text: string;\n    pictureViewer?: boolean;\n    lazyPicture?: boolean;\n    langToolbar?: string[];\n    langLineNumber?: boolean;\n  }) {\n    const { text, pictureViewer, lazyPicture, langToolbar, ...options } = opt;\n    const marked = (await import('marked-completed')).default;\n\n    if (!renderer) {\n      renderer = new marked.Renderer();\n\n      renderer.katexBlock = (code: string) => {\n        return `<n-katex display-mode=\"true\">${code}</n-katex>`;\n      };\n      renderer.katexInline = (code: string) => {\n        return `<n-katex>${code}</n-katex>`;\n      };\n    }\n\n    renderer.image = (src: string, title: string, alt: string) => {\n      return `<n-img lazy=\"${lazyPicture}\" disabled=\"${!pictureViewer}\" role=\"img\" src=\"${src}\" alt=\"${alt}\" ${title ? `title=\"${title}\"` : ''}></n-img>`;\n    };\n    const toolbar = !!langToolbar?.length;\n\n    renderer.code = function (code: string, lang: string) {\n      if (lang === 'treeview') {\n        return `<n-tree data=\"${code}\" />`;\n      }\n\n      return `<n-code class=\"n-code\" toolbar=\"${toolbar}\" language=\"${lang}\" ${\n        options.langLineNumber ? 'line-number=\"true\"' : ''\n      }>${encodeURIComponent(code)}</n-code>`;\n    };\n\n    update({\n      data: marked(text, {\n        renderer: renderer,\n        langToolbar: langToolbar,\n        headerPrefix: '# ',\n        breaks: true,\n        pedantic: false,\n        smartLists: true,\n        smartypants: true,\n        xhtml: true,\n        ...options,\n      }),\n    });\n  }\n  createEffect(() => {\n    if (props.webWorker) {\n      if (!worker) {\n        worker = initWorker();\n      }\n      worker.addEventListener('message', update);\n    }\n  });\n\n  createEffect(() => {\n    if (worker) {\n      worker.postMessage(\n        JSON.stringify({\n          text: props.text,\n          langLineNumber: props.lineNumber,\n          langToolbar: props.tools,\n          pictureViewer: props.pictureViewer,\n          lazyPicture: props.lazyPicture,\n        }),\n      );\n    } else {\n      const call = () =>\n        postMessage({\n          text: props.text,\n          langLineNumber: props.lineNumber,\n          langToolbar: props.tools,\n          pictureViewer: props.pictureViewer,\n          lazyPicture: props.lazyPicture,\n        });\n\n      frameCallback(call);\n    }\n  });\n  onCleanup(() => {\n    if (worker) {\n      worker.removeEventListener('message', update);\n      worker.terminate();\n    }\n  });\n  let list: HTMLAnchorElement[] = [];\n  let heading: HTMLHeadingElement[] = [];\n  const active: HTMLAnchorElement[] = [];\n\n  function handleAnchor(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n    const a = e.target as HTMLAnchorElement;\n\n    if (a.hash) {\n      ref?.querySelector(decodeURIComponent(a.hash))?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n      list.forEach((item) => item.classList.remove('active'));\n      a.classList.add('active');\n    } else {\n      window.open(a.href);\n    }\n  }\n  function observerEntry(entries: IntersectionObserverEntry[]) {\n    entries.forEach((entry) => {\n      const id = entry.target.getAttribute('id');\n      const all = entry.target.querySelectorAll('a');\n      let a: HTMLAnchorElement | undefined;\n\n      list.forEach((l) => {\n        if (l.hash === `#${id}`) {\n          a = l;\n        } else if (!l.hash) {\n          all.forEach((e) => {\n            if (e.href === l.href) {\n              a = l;\n            }\n          });\n        }\n      });\n      if (a) {\n        const idx = active.indexOf(a);\n\n        active.forEach((e) => {\n          e.classList.remove('active');\n        });\n        if (entry.isIntersecting) {\n          active.push(a);\n        } else if (idx !== -1) {\n          active.splice(idx, 1);\n        }\n        if (active[0]) {\n          active[0].classList.add('active');\n          active[0].offsetParent?.scrollTo({\n            top: active[0].offsetTop,\n          });\n        }\n      }\n    });\n  }\n  createEffect(() => {\n    let observer: IntersectionObserver;\n\n    if (ref && props.text?.startsWith('[TOC]')) {\n      list = [...ref.querySelectorAll<HTMLAnchorElement>('.n-md-toc a[href]')];\n      heading = [...ref.querySelectorAll<HTMLHeadingElement>('h1, h2, h3, h4, h5, h6')];\n      observer = new IntersectionObserver(observerEntry, {\n        rootMargin: '-50px 0px',\n        threshold: 0.5,\n      });\n      heading.forEach((e) => observer.observe(e));\n      list.forEach((e) => {\n        e.addEventListener('click', handleAnchor);\n      });\n    }\n    onCleanup(() => {\n      if (observer) {\n        heading.forEach((e) => observer.unobserve(e));\n        observer.disconnect();\n      }\n      list.forEach((e) => {\n        e.removeEventListener('click', handleAnchor);\n      });\n    });\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={mdStyle} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <Switch>\n        <Match when={(props.children as [])?.length}>\n          <article class=\"n-md-box\" part=\"box\">\n            <div class=\"n-md-body\" part=\"body\">\n              <For each={props.children as []}>{(e) => e}</For>\n            </div>\n          </article>\n        </Match>\n        <Match when={props.text}>\n          <article ref={ref} class={cx('n-md-box', props.class)} part=\"box\" />\n        </Match>\n      </Switch>\n    </>\n  );\n}\n\nexport interface MdProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** md内容 */\n  text?: string;\n  /** 开启图片查看器\n   * @since 2.0.8\n   * @default true\n   */\n  pictureViewer?: boolean;\n  /** 开启图片懒加载\n   * @since 2.8.3\n   * @default true\n   */\n  lazyPicture?: boolean;\n  /** 显示代码块行号\n   * @default true\n   */\n  lineNumber?: boolean;\n  /** 开启代码块工具条\n   * @default ['copy']\n   */\n  tools?: 'copy'[];\n  /** 指定滚动的容器\n   * @default () => window\n   */\n  getAnchorContainer?: () => HTMLElement;\n  /** 不进行解析\n   * @default false\n   */\n  notRender?: boolean;\n  children?: JSX.Element;\n  /**\n   * 使用 web worker\n   */\n  webWorker?: boolean;\n}\n\nexport type MdElement = CustomElement<MdProps>;\n\ncustomElement<MdProps>(\n  'n-md',\n  {\n    class: void 0,\n    pictureViewer: void 0,\n    lazyPicture: void 0,\n    lineNumber: true,\n    text: void 0,\n    tools: void 0,\n    getAnchorContainer: void 0,\n    css: void 0,\n    children: void 0,\n    notRender: void 0,\n    webWorker: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        text: (!_.notRender && el.textContent) || el.text,\n        css: el.css,\n        tools: el.tools,\n        getAnchorContainer: el.getAnchorContainer,\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n      el.replaceChildren();\n    });\n    return <MD {...props} />;\n  },\n);\nexport default MD;\n"],"names":["MD","_props","renderer","ref","baseStyle","theme","props","mergeProps","webWorker","pictureViewer","lazyPicture","text","tools","getAnchorContainer","window","initWorker","Worker","worker","update","e","innerHTML","data","postMessage","opt","langToolbar","options","marked","default","Renderer","katexBlock","code","katexInline","image","src","title","alt","toolbar","length","lang","langLineNumber","encodeURIComponent","headerPrefix","breaks","pedantic","smartLists","smartypants","xhtml","createEffect","addEventListener","JSON","stringify","lineNumber","frameCallback","onCleanup","removeEventListener","terminate","list","heading","active","handleAnchor","preventDefault","stopPropagation","a","target","hash","querySelector","decodeURIComponent","scrollIntoView","behavior","block","forEach","item","classList","remove","add","open","href","observerEntry","entries","entry","id","getAttribute","all","querySelectorAll","l","idx","indexOf","isIntersecting","push","splice","offsetParent","scrollTo","top","offsetTop","observer","startsWith","IntersectionObserver","rootMargin","threshold","observe","unobserve","disconnect","mdStyle","Show","css","Switch","Match","children","For","cx","class","customElement","notRender","_","el","element","textContent","removeAttribute","replaceChildren"],"mappings":"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"}
+{"version":3,"sources":["../../components/md/index.tsx"],"sourcesContent":["import { createEffect, For, Match, mergeProps, onCleanup, Show, Switch } from 'solid-js';\nimport { frameCallback } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport mdStyle from '../md-style';\nimport theme from '../theme';\n\nimport '../code';\nimport '../img';\n\nfunction MD(_props: MdProps) {\n  let renderer: marked.Renderer | undefined;\n  let ref: HTMLDivElement | undefined;\n  const { baseStyle } = theme;\n  const props = mergeProps(\n    {\n      webWorker: false,\n      pictureViewer: true,\n      lazyPicture: true,\n      text: '',\n      tools: ['copy'],\n      getAnchorContainer: () => window as unknown as HTMLElement,\n    },\n    _props,\n  );\n\n  function initWorker() {\n    return new Worker('https://cdn.jsdelivr.net/npm/neko-ui@latest/es/md/worker.js');\n  }\n  // eslint-disable-next-line solid/reactivity\n  let worker: Worker | undefined = props.webWorker ? initWorker() : void 0;\n\n  function update(e: { data: string }) {\n    if (ref) {\n      ref.innerHTML = e.data;\n    }\n  }\n  async function postMessage(opt: {\n    text: string;\n    pictureViewer?: boolean;\n    lazyPicture?: boolean;\n    langToolbar?: string[];\n    langLineNumber?: boolean;\n  }) {\n    const { text, pictureViewer, lazyPicture, langToolbar, ...options } = opt;\n    const marked = (await import('marked-completed')).default;\n\n    if (!renderer) {\n      renderer = new marked.Renderer();\n\n      renderer.katexBlock = (code: string) => {\n        return `<n-katex display-mode=\"true\">${code}</n-katex>`;\n      };\n      renderer.katexInline = (code: string) => {\n        return `<n-katex>${code}</n-katex>`;\n      };\n    }\n\n    renderer.image = (src: string, title: string, alt: string) => {\n      return `<n-img lazy=\"${lazyPicture}\" disabled=\"${!pictureViewer}\" role=\"img\" src=\"${src}\" alt=\"${alt}\" ${title ? `title=\"${title}\"` : ''}></n-img>`;\n    };\n    const toolbar = !!langToolbar?.length;\n\n    renderer.code = function (code: string, lang: string) {\n      if (lang === 'treeview') {\n        return `<n-tree data=\"${code}\" />`;\n      }\n\n      return `<n-code class=\"n-code\" toolbar=\"${toolbar}\" language=\"${lang}\" ${\n        options.langLineNumber ? 'line-number=\"true\"' : ''\n      }>${encodeURIComponent(code)}</n-code>`;\n    };\n\n    update({\n      data: marked(text, {\n        renderer: renderer,\n        langToolbar: langToolbar,\n        headerPrefix: '# ',\n        breaks: true,\n        pedantic: false,\n        smartLists: true,\n        smartypants: true,\n        xhtml: true,\n        ...options,\n      }),\n    });\n  }\n  createEffect(() => {\n    if (props.webWorker) {\n      if (!worker) {\n        worker = initWorker();\n      }\n      worker.addEventListener('message', update);\n    }\n  });\n\n  createEffect(() => {\n    if (worker) {\n      worker.postMessage(\n        JSON.stringify({\n          text: props.text,\n          langLineNumber: props.lineNumber,\n          langToolbar: props.tools,\n          pictureViewer: props.pictureViewer,\n          lazyPicture: props.lazyPicture,\n        }),\n      );\n    } else {\n      const call = () =>\n        postMessage({\n          text: props.text,\n          langLineNumber: props.lineNumber,\n          langToolbar: props.tools,\n          pictureViewer: props.pictureViewer,\n          lazyPicture: props.lazyPicture,\n        });\n\n      frameCallback(call);\n    }\n  });\n  onCleanup(() => {\n    if (worker) {\n      worker.removeEventListener('message', update);\n      worker.terminate();\n    }\n  });\n  let list: HTMLAnchorElement[] = [];\n  let heading: HTMLHeadingElement[] = [];\n  const active: HTMLAnchorElement[] = [];\n\n  function handleAnchor(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n    const a = e.target as HTMLAnchorElement;\n\n    if (a.hash) {\n      ref?.querySelector(decodeURIComponent(a.hash))?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n      list.forEach((item) => {\n        item.classList.remove('active');\n      });\n      a.classList.add('active');\n    } else {\n      window.open(a.href);\n    }\n  }\n  function observerEntry(entries: IntersectionObserverEntry[]) {\n    entries.forEach((entry) => {\n      const id = entry.target.getAttribute('id');\n      const all = entry.target.querySelectorAll('a');\n      let a: HTMLAnchorElement | undefined;\n\n      list.forEach((l) => {\n        if (l.hash === `#${id}`) {\n          a = l;\n        } else if (!l.hash) {\n          all.forEach((e) => {\n            if (e.href === l.href) {\n              a = l;\n            }\n          });\n        }\n      });\n      if (a) {\n        const idx = active.indexOf(a);\n\n        active.forEach((e) => {\n          e.classList.remove('active');\n        });\n        if (entry.isIntersecting) {\n          active.push(a);\n        } else if (idx !== -1) {\n          active.splice(idx, 1);\n        }\n        if (active[0]) {\n          active[0].classList.add('active');\n          active[0].offsetParent?.scrollTo({\n            top: active[0].offsetTop,\n          });\n        }\n      }\n    });\n  }\n  createEffect(() => {\n    let observer: IntersectionObserver;\n\n    if (ref && props.text.startsWith('[TOC]')) {\n      list = [...ref.querySelectorAll<HTMLAnchorElement>('.n-md-toc a[href]')];\n      heading = [...ref.querySelectorAll<HTMLHeadingElement>('h1, h2, h3, h4, h5, h6')];\n      observer = new IntersectionObserver(observerEntry, {\n        rootMargin: '-50px 0px',\n        threshold: 0.5,\n      });\n      heading.forEach((e) => {\n        observer.observe(e);\n      });\n      list.forEach((e) => {\n        e.addEventListener('click', handleAnchor);\n      });\n    }\n    onCleanup(() => {\n      if (observer) {\n        heading.forEach((e) => {\n          observer.unobserve(e);\n        });\n        observer.disconnect();\n      }\n      list.forEach((e) => {\n        e.removeEventListener('click', handleAnchor);\n      });\n    });\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={mdStyle} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <Switch>\n        <Match when={(props.children || []).length > 0}>\n          <article class=\"n-md-box\" part=\"box\">\n            <div class=\"n-md-body\" part=\"body\">\n              <For each={props.children as []}>{(e) => e}</For>\n            </div>\n          </article>\n        </Match>\n        <Match when={props.text}>\n          <article ref={ref} class={cx('n-md-box', props.class)} part=\"box\" />\n        </Match>\n      </Switch>\n    </>\n  );\n}\n\nexport interface MdProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** md内容 */\n  text?: string;\n  /** 开启图片查看器\n   * @since 2.0.8\n   * @default true\n   */\n  pictureViewer?: boolean;\n  /** 开启图片懒加载\n   * @since 2.8.3\n   * @default true\n   */\n  lazyPicture?: boolean;\n  /** 显示代码块行号\n   * @default true\n   */\n  lineNumber?: boolean;\n  /** 开启代码块工具条\n   * @default ['copy']\n   */\n  tools?: 'copy'[];\n  /** 指定滚动的容器\n   * @default () => window\n   */\n  getAnchorContainer?: () => HTMLElement;\n  /** 不进行解析\n   * @default false\n   */\n  notRender?: boolean;\n  children?: JSX.Element;\n  /**\n   * 使用 web worker\n   */\n  webWorker?: boolean;\n}\n\nexport type MdElement = CustomElement<MdProps>;\n\ncustomElement<MdProps>(\n  'n-md',\n  {\n    class: void 0,\n    pictureViewer: void 0,\n    lazyPicture: void 0,\n    lineNumber: true,\n    text: void 0,\n    tools: void 0,\n    getAnchorContainer: void 0,\n    css: void 0,\n    children: void 0,\n    notRender: void 0,\n    webWorker: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        text: (!_.notRender && el.textContent) || el.text,\n        css: el.css,\n        tools: el.tools,\n        getAnchorContainer: el.getAnchorContainer,\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n      el.replaceChildren();\n    });\n    return <MD {...props} />;\n  },\n);\nexport default MD;\n"],"names":["MD","_props","renderer","ref","baseStyle","theme","props","mergeProps","webWorker","pictureViewer","lazyPicture","text","tools","getAnchorContainer","window","initWorker","Worker","worker","update","e","innerHTML","data","postMessage","opt","langToolbar","options","marked","default","Renderer","katexBlock","code","katexInline","image","src","title","alt","toolbar","length","lang","langLineNumber","encodeURIComponent","headerPrefix","breaks","pedantic","smartLists","smartypants","xhtml","createEffect","addEventListener","JSON","stringify","lineNumber","frameCallback","onCleanup","removeEventListener","terminate","list","heading","active","handleAnchor","preventDefault","stopPropagation","a","target","hash","querySelector","decodeURIComponent","scrollIntoView","behavior","block","forEach","item","classList","remove","add","open","href","observerEntry","entries","entry","id","getAttribute","all","querySelectorAll","l","idx","indexOf","isIntersecting","push","splice","offsetParent","scrollTo","top","offsetTop","observer","startsWith","IntersectionObserver","rootMargin","threshold","observe","unobserve","disconnect","mdStyle","Show","css","Switch","Match","children","For","cx","class","customElement","notRender","_","el","element","textContent","removeAttribute","replaceChildren"],"mappings":"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"}

package/lib/menu/README.mdx

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

package/lib/menu/examples/basic.md

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

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

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