neko-ui 2.6.7 → 2.7.0

package/lib/popover/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/popover/index.tsx"],"sourcesContent":["import {\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n} from 'solid-js';\nimport { isElementInside, isEqual, isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport { popoverCss, portalCss } from './style';\nimport '../empty';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface PopoverProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  content?: (() => JSX.Element) | JSX.Element;\n  /** 挂载到指定的元素，值为一个返回对应 DOM 元素 默认 document.body */\n  getPopupContainer?: (node?: HTMLElement | null) => HTMLElement;\n  /** 触发行为\n   * @default 'hover'\n   */\n  trigger?: keyof typeof TriggerOption;\n  /** 打开内容气泡 */\n  open?: boolean | null;\n  /** 内容打开关闭时的回调方法 */\n  onOpenChange?: (open: boolean | null) => void;\n  /** 气泡的自定义类名 */\n  popupClass?: string;\n  /** 气泡的自定义样式表 */\n  popupCss?: string;\n  /** 关闭后是否销毁  */\n  destroyInactive?: boolean;\n  /** 不可用状态  */\n  disabled?: boolean;\n  /** 添加一个箭头显示  */\n  arrow?: boolean;\n  /** 指定气泡显示的方向 */\n  placement?: keyof typeof Placement;\n  /** 气泡宽度与触发dom一致  */\n  dropdownMatchSelectWidth?: boolean;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  children?: JSX.Element;\n}\n\nexport enum TriggerOption {\n  /** 鼠标移入 */\n  hover = 'hover',\n  /** 点击 */\n  click = 'click',\n  /** 右键 */\n  contextMenu = 'contextMenu',\n  /** 无 */\n  none = 'none',\n}\n\nexport enum Placement {\n  /** 左下 */\n  bottomLeft = 'bottomLeft',\n  /** 下 */\n  bottom = 'bottom',\n  /** 右下 */\n  bottomRight = 'bottomRight',\n  /** 左上 */\n  topLeft = 'topLeft',\n  /** 上 */\n  top = 'top',\n  /** 右上 */\n  topRight = 'topRight',\n  /** 左 */\n  left = 'left',\n  /** 右 */\n  right = 'right',\n}\n\ntype Posi = {\n  left?: number;\n  top?: number;\n  right?: number;\n  bottom?: number;\n  '--x'?: number;\n};\n\ntype EventMap = {\n  click: string | null;\n  hover: string | null;\n  contextMenu: string | null;\n  none: null;\n  [key: string]: string | null;\n};\nfunction Popover(props: PopoverProps) {\n  const { isDark, baseStyle } = theme;\n  const mp = mergeProps(\n    {\n      trigger: 'hover',\n    },\n    props,\n  );\n  const [local] = splitProps(mp, [\n    'class',\n    'css',\n    'popupClass',\n    'popupCss',\n    'size',\n    'trigger',\n    'open',\n    'disabled',\n    'onOpenChange',\n    'dropdownMatchSelectWidth',\n    'destroyInactive',\n    'arrow',\n    'placement',\n    'getPopupContainer',\n    'children',\n    'content',\n  ]);\n  let ref: HTMLDivElement | undefined;\n  let childRef: HTMLSpanElement | undefined;\n  let closeTimer: NodeJS.Timeout | undefined;\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [posi, setPosi] = createSignal<Posi>({});\n  const [up, setUp] = createSignal<boolean>(false);\n  const [width, setWidth] = createSignal('');\n\n  createEffect(() => {\n    if (local.open !== void 0) {\n      setOpen(local.open);\n    }\n  });\n  function openChange(next: boolean | null) {\n    if (!local.disabled) {\n      if (local.onOpenChange) {\n        local.onOpenChange(next);\n      }\n      if (local.open === void 0) {\n        setOpen(next);\n      }\n    }\n  }\n  function exit() {\n    if (open() === false) {\n      setOpen(null);\n      openChange(null);\n    }\n  }\n  createEffect(() => {\n    if (open() && local.dropdownMatchSelectWidth && childRef) {\n      setWidth(`.portal {width: ${childRef.offsetWidth}px;}`);\n    }\n  });\n\n  function close(e: MouseEvent | Event) {\n    clearTimeout(closeTimer);\n    closeTimer = setTimeout(\n      () => {\n        clearTimeout(closeTimer);\n        if ((e.target as HTMLElement)?.getAttribute('handle-closed') === 'false') {\n          return;\n        }\n        const isContains = isElementInside(e.target as Element, ref);\n\n        if ((open() && !isContains) || (isContains && e.type !== 'mousedown')) {\n          openChange(false);\n        }\n      },\n      local.trigger === 'hover' ? 300 : 0,\n    );\n  }\n  let portalTimer: NodeJS.Timeout | undefined;\n  const showPortal = function (e?: Event): void {\n    clearTimeout(portalTimer);\n    portalTimer = setTimeout(() => {\n      clearTimeout(portalTimer);\n      if (!ref || !childRef || (!e && local.trigger === 'contextMenu')) {\n        return;\n      }\n      if (e?.type === 'scroll' && local.trigger === 'contextMenu') {\n        openChange(false);\n        return;\n      }\n      const elRect = childRef!.getBoundingClientRect();\n      const portalRect = ref!.getBoundingClientRect();\n      const offsetX = portalRect.width / 2 - elRect.width / 2;\n      const margin = window.innerHeight - elRect.bottom;\n      const _placement = local.placement;\n\n      const _isBottom =\n        (!_placement?.startsWith('top') &&\n          margin > ref!.offsetHeight * 0.8 &&\n          margin > elRect.top) ||\n        _placement?.startsWith('bottom');\n      const arrowHeight = local.arrow ? 8 : 4;\n      const _posi: Posi = {};\n\n      switch (local.placement) {\n        case 'bottomLeft':\n        case 'left':\n        case 'topLeft':\n          _posi.left = elRect.left;\n          _posi['--x'] = -portalRect.width / 2 + 16;\n          break;\n        case 'bottomRight':\n        case 'right':\n        case 'topRight':\n          _posi.left = elRect.right - portalRect.width;\n          _posi['--x'] = portalRect.width / 2 - 16;\n          break;\n        case 'bottom':\n        case 'top':\n        default:\n          _posi.left = Math.abs(offsetX > elRect.left ? elRect.left : elRect.left - offsetX);\n          _posi['--x'] = -(_posi.left - elRect.left + offsetX);\n          break;\n      }\n      if (_isBottom) {\n        _posi.top = elRect.bottom + arrowHeight;\n      } else {\n        _posi.bottom = window.innerHeight - elRect.top + arrowHeight;\n      }\n      setPosi((prev) => {\n        return isEqual(prev, _posi) ? prev : _posi;\n      });\n      setUp((prev) => {\n        return prev === !_isBottom ? prev : !_isBottom;\n      });\n    }, 32);\n  };\n\n  function handleOpen(e: MouseEvent) {\n    clearTimeout(closeTimer);\n    e.stopPropagation();\n    if (local.trigger === 'contextMenu' && e.type === 'contextmenu') {\n      e.preventDefault();\n      setPosi((prev) => ({\n        ...prev,\n        left: e.clientX,\n        top: e.clientY,\n        ['--x']: -(ref?.getBoundingClientRect().width || 0) / 2 + 16,\n      }));\n    }\n    openChange(true);\n  }\n\n  const container = createMemo(() => {\n    if (isFunction(local.getPopupContainer)) {\n      return local.getPopupContainer(childRef);\n    }\n    return document.body;\n  });\n  const childrenProps = createMemo(() => {\n    const _props: Partial<Record<keyof EventMap, void>> = {};\n\n    const openEvent: EventMap = {\n      click: 'onMouseDown',\n      hover: 'onMouseEnter',\n      contextMenu: 'onContextMenu',\n      none: null,\n    };\n    const closeEvent: EventMap = {\n      hover: 'onMouseLeave',\n      click: null,\n      contextMenu: null,\n      none: null,\n    };\n\n    const openFn = openEvent[local.trigger];\n    const closeFn = closeEvent[local.trigger];\n\n    Object.assign(\n      _props,\n      openFn && {\n        [openFn]: handleOpen,\n      },\n      closeFn && {\n        [closeFn]: close,\n      },\n    );\n\n    return _props;\n  });\n\n  const portalStyle = createMemo(() => {\n    const p = posi();\n\n    // max-block-size: calc(100vb - ${(up() ? p.bottom : p.top) || 0}px);\n    return `.portal {${Object.keys(p)\n      .map((k) => `${k}:${p[k as keyof Posi]}px;`)\n      .join('')}z-index: 1;}`;\n  });\n  const portalCls = createMemo(() => {\n    return cx(\n      'portal',\n      local.arrow && 'arrow',\n      `${open() ? 'in' : 'out'}-${up() ? 'up' : 'down'}`,\n      local.size,\n      local.popupClass,\n    );\n  });\n  const hostStyle = createMemo(() => {\n    return `:host {--popover-bg: ${\n      isDark() ? '#1f1f1f' : 'var(--component-bg)'\n    };--popover-shadow-color: rgb(0 0 0 / 5%);}`;\n  });\n\n  createEffect(() => {\n    if (open()) {\n      showPortal();\n\n      window.addEventListener('scroll', showPortal, {\n        passive: passiveSupported,\n      });\n    }\n    onCleanup(() => {\n      window.removeEventListener('scroll', showPortal, false);\n    });\n  });\n  onMount(() => {\n    if (local.trigger !== 'none') {\n      document.documentElement.addEventListener('mousedown', close, false);\n    }\n  });\n  onCleanup(() => {\n    clearTimeout(closeTimer);\n    document.documentElement.removeEventListener('mousedown', close, false);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {popoverCss}\n        {css(local.css)}\n      </style>\n      <span ref={childRef} class={cx('popover', local.size, local.class)} {...childrenProps()}>\n        {local.children}\n      </span>\n      <Show when={open() !== null || !local.destroyInactive}>\n        <Portal useShadow mount={container()}>\n          <style>\n            {baseStyle()}\n            {portalCss}\n            {hostStyle()}\n            {portalStyle()}\n            {width()}\n            {css(local.popupCss)}\n          </style>\n          <div ref={ref} onAnimationEnd={exit} class={portalCls()} {...childrenProps()}>\n            <Show when={local.content} fallback={<n-empty />}>\n              {local.content as JSX.Element}\n            </Show>\n          </div>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport type PopoverElement = CustomElement<PopoverProps, 'onOpenChange'>;\n\nexport const defaultProps = {\n  class: void 0,\n  css: void 0,\n  content: void 0,\n  getPopupContainer: void 0,\n  trigger: void 0,\n  open: void 0,\n  onOpenChange: void 0,\n  popupClass: void 0,\n  popupCss: void 0,\n  destroyInactive: true,\n  disabled: void 0,\n  arrow: void 0,\n  placement: void 0,\n  dropdownMatchSelectWidth: void 0,\n};\ncustomElement<PopoverProps>('n-popover', defaultProps, (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      onOpenChange(next: boolean | null) {\n        el.dispatchEvent(\n          new CustomEvent('openchange', {\n            detail: next,\n          }),\n        );\n      },\n      children: [...el.childNodes.values()],\n    },\n    _,\n  );\n\n  createEffect(() => {\n    el.removeAttribute('css');\n  });\n  return createComponent(Popover, props);\n});\nexport default Popover;\n"],"names":["TriggerOption","Placement","defaultProps","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","theme","mp","mergeProps","trigger","local","splitProps","open","setOpen","createSignal","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","isElementInside","type","createEffect","dropdownMatchSelectWidth","offsetWidth","showPortal","elRect","getBoundingClientRect","portalRect","offsetX","margin","window","innerHeight","bottom","_placement","placement","_isBottom","startsWith","offsetHeight","top","arrowHeight","arrow","_posi","left","right","Math","abs","prev","isEqual","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","createMemo","isFunction","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","cx","size","popupClass","hostStyle","addEventListener","passive","passiveSupported","onCleanup","removeEventListener","onMount","documentElement","popoverCss","css","class","children","Show","destroyInactive","Portal","portalCss","popupCss","content","customElement","_","opt","el","element","dispatchEvent","CustomEvent","detail","childNodes","values","removeAttribute","createComponent"],"mappings":"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"}
+{"version":3,"sources":["../../components/popover/index.tsx"],"sourcesContent":["import {\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n} from 'solid-js';\nimport { isElementInside, isEqual, isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport { popoverCss, portalCss } from './style';\nimport '../empty';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface PopoverProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  content?: (() => JSX.Element) | JSX.Element;\n  /** 挂载到指定的元素，值为一个返回对应 DOM 元素 默认 document.body */\n  getPopupContainer?: (node?: HTMLElement | null) => HTMLElement;\n  /** 触发行为\n   * @default 'hover'\n   */\n  trigger?: keyof typeof TriggerOption;\n  /** 打开内容气泡 */\n  open?: boolean | null;\n  /** 内容打开关闭时的回调方法 */\n  onOpenChange?: (open: boolean | null) => void;\n  /** 气泡的自定义类名 */\n  popupClass?: string;\n  /** 气泡的自定义样式表 */\n  popupCss?: string;\n  /** 关闭后是否销毁  */\n  destroyInactive?: boolean;\n  /** 不可用状态  */\n  disabled?: boolean;\n  /** 添加一个箭头显示  */\n  arrow?: boolean;\n  /** 指定气泡显示的方向 */\n  placement?: keyof typeof Placement;\n  /** 气泡宽度与触发dom一致  */\n  dropdownMatchSelectWidth?: boolean;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  children?: JSX.Element;\n}\n\nexport enum TriggerOption {\n  /** 鼠标移入 */\n  hover = 'hover',\n  /** 点击 */\n  click = 'click',\n  /** 右键 */\n  contextMenu = 'contextMenu',\n  /** 无 */\n  none = 'none',\n}\n\nexport enum Placement {\n  /** 左下 */\n  bottomLeft = 'bottomLeft',\n  /** 下 */\n  bottom = 'bottom',\n  /** 右下 */\n  bottomRight = 'bottomRight',\n  /** 左上 */\n  topLeft = 'topLeft',\n  /** 上 */\n  top = 'top',\n  /** 右上 */\n  topRight = 'topRight',\n  /** 左 */\n  left = 'left',\n  /** 右 */\n  right = 'right',\n}\n\ntype Posi = {\n  left?: number;\n  top?: number;\n  right?: number;\n  bottom?: number;\n  '--x'?: number;\n};\n\ntype EventMap = {\n  click?: string;\n  hover?: string;\n  contextMenu?: string;\n  none?: never;\n  [key: string]: string | undefined;\n};\nfunction Popover(props: PopoverProps) {\n  const { isDark, baseStyle } = theme;\n  const mp = mergeProps(\n    {\n      trigger: 'hover',\n    },\n    props,\n  );\n  const [local] = splitProps(mp, [\n    'class',\n    'css',\n    'popupClass',\n    'popupCss',\n    'size',\n    'trigger',\n    'open',\n    'disabled',\n    'onOpenChange',\n    'dropdownMatchSelectWidth',\n    'destroyInactive',\n    'arrow',\n    'placement',\n    'getPopupContainer',\n    'children',\n    'content',\n  ]);\n  let ref: HTMLDivElement | undefined;\n  let childRef: HTMLSpanElement | undefined;\n  let closeTimer: NodeJS.Timeout | undefined;\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [posi, setPosi] = createSignal<Posi>({});\n  const [up, setUp] = createSignal<boolean>(false);\n  const [width, setWidth] = createSignal('');\n\n  createEffect(() => {\n    if (local.open !== void 0) {\n      setOpen(local.open);\n    }\n  });\n  function openChange(next: boolean | null) {\n    if (!local.disabled) {\n      if (local.onOpenChange) {\n        local.onOpenChange(next);\n      }\n      if (local.open === void 0) {\n        setOpen(next);\n      }\n    }\n  }\n  function exit() {\n    if (open() === false) {\n      setOpen(null);\n      openChange(null);\n    }\n  }\n  createEffect(() => {\n    if (open() && local.dropdownMatchSelectWidth && childRef) {\n      setWidth(`.portal {width: ${childRef.offsetWidth}px;}`);\n    }\n  });\n\n  function close(e: MouseEvent | Event) {\n    clearTimeout(closeTimer);\n    closeTimer = setTimeout(\n      () => {\n        clearTimeout(closeTimer);\n        if ((e.target as HTMLElement)?.getAttribute('handle-closed') === 'false') {\n          return;\n        }\n        const isContains = isElementInside(e.target as Element, ref);\n\n        if ((open() && !isContains) || (isContains && e.type !== 'mousedown')) {\n          openChange(false);\n        }\n      },\n      local.trigger === 'hover' ? 300 : 0,\n    );\n  }\n  let portalTimer: NodeJS.Timeout | undefined;\n  const showPortal = function (e?: Event): void {\n    clearTimeout(portalTimer);\n    portalTimer = setTimeout(() => {\n      clearTimeout(portalTimer);\n      if (!ref || !childRef || (!e && local.trigger === 'contextMenu')) {\n        return;\n      }\n      if (e?.type === 'scroll' && local.trigger === 'contextMenu') {\n        openChange(false);\n        return;\n      }\n      const elRect = childRef!.getBoundingClientRect();\n      const portalRect = ref!.getBoundingClientRect();\n      const offsetX = portalRect.width / 2 - elRect.width / 2;\n      const margin = window.innerHeight - elRect.bottom;\n      const _placement = local.placement;\n\n      const _isBottom =\n        (!_placement?.startsWith('top') &&\n          margin > ref!.offsetHeight * 0.8 &&\n          margin > elRect.top) ||\n        _placement?.startsWith('bottom');\n      const arrowHeight = local.arrow ? 8 : 4;\n      const _posi: Posi = {};\n\n      switch (local.placement) {\n        case 'bottomLeft':\n        case 'left':\n        case 'topLeft':\n          _posi.left = elRect.left;\n          _posi['--x'] = -portalRect.width / 2 + 16;\n          break;\n        case 'bottomRight':\n        case 'right':\n        case 'topRight':\n          _posi.left = elRect.right - portalRect.width;\n          _posi['--x'] = portalRect.width / 2 - 16;\n          break;\n        case 'bottom':\n        case 'top':\n        default:\n          _posi.left = Math.abs(offsetX > elRect.left ? elRect.left : elRect.left - offsetX);\n          _posi['--x'] = -(_posi.left - elRect.left + offsetX);\n          break;\n      }\n      if (_isBottom) {\n        _posi.top = elRect.bottom + arrowHeight;\n      } else {\n        _posi.bottom = window.innerHeight - elRect.top + arrowHeight;\n      }\n      setPosi((prev) => {\n        return isEqual(prev, _posi) ? prev : _posi;\n      });\n      setUp((prev) => {\n        return prev === !_isBottom ? prev : !_isBottom;\n      });\n    }, 32);\n  };\n\n  function handleOpen(e: MouseEvent) {\n    clearTimeout(closeTimer);\n    e.stopPropagation();\n    if (local.trigger === 'contextMenu' && e.type === 'contextmenu') {\n      e.preventDefault();\n      setPosi((prev) => ({\n        ...prev,\n        left: e.clientX,\n        top: e.clientY,\n        ['--x']: -(ref?.getBoundingClientRect().width || 0) / 2 + 16,\n      }));\n    }\n    openChange(true);\n  }\n\n  const container = createMemo(() => {\n    if (isFunction(local.getPopupContainer)) {\n      return local.getPopupContainer(childRef);\n    }\n    return document.body;\n  });\n  const childrenProps = createMemo(() => {\n    const _props: Partial<Record<keyof EventMap, void>> = {};\n\n    const openEvent: EventMap = {\n      click: 'onMouseDown',\n      hover: 'onMouseEnter',\n      contextMenu: 'onContextMenu',\n      none: void 0,\n    };\n    const closeEvent: EventMap = {\n      hover: 'onMouseLeave',\n      click: void 0,\n      contextMenu: void 0,\n      none: void 0,\n    };\n\n    const openFn = openEvent[local.trigger];\n    const closeFn = closeEvent[local.trigger];\n\n    Object.assign(\n      _props,\n      openFn && {\n        [openFn]: handleOpen,\n      },\n      closeFn && {\n        [closeFn]: close,\n      },\n    );\n\n    return _props;\n  });\n\n  const portalStyle = createMemo(() => {\n    const p = posi();\n\n    // max-block-size: calc(100vb - ${(up() ? p.bottom : p.top) || 0}px);\n    return `.portal {${Object.keys(p)\n      .map((k) => `${k}:${p[k as keyof Posi]}px;`)\n      .join('')}z-index: 1;}`;\n  });\n  const portalCls = createMemo(() => {\n    return cx(\n      'portal',\n      local.arrow && 'arrow',\n      `${open() ? 'in' : 'out'}-${up() ? 'up' : 'down'}`,\n      local.size,\n      local.popupClass,\n    );\n  });\n  const hostStyle = createMemo(() => {\n    return `:host {--popover-bg: ${\n      isDark() ? '#1f1f1f' : 'var(--component-bg)'\n    };--popover-shadow-color: rgb(0 0 0 / 5%);}`;\n  });\n\n  createEffect(() => {\n    if (open()) {\n      showPortal();\n\n      window.addEventListener('scroll', showPortal, {\n        passive: passiveSupported,\n      });\n    }\n    onCleanup(() => {\n      window.removeEventListener('scroll', showPortal, false);\n    });\n  });\n  onMount(() => {\n    if (local.trigger !== 'none') {\n      document.documentElement.addEventListener('mousedown', close, false);\n    }\n  });\n  onCleanup(() => {\n    clearTimeout(closeTimer);\n    document.documentElement.removeEventListener('mousedown', close, false);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {popoverCss}\n        {css(local.css)}\n      </style>\n      <span ref={childRef} class={cx('popover', local.size, local.class)} {...childrenProps()}>\n        {local.children}\n      </span>\n      <Show when={open() !== null || !local.destroyInactive}>\n        <Portal useShadow mount={container()}>\n          <style>\n            {baseStyle()}\n            {portalCss}\n            {hostStyle()}\n            {portalStyle()}\n            {width()}\n            {css(local.popupCss)}\n          </style>\n          <div ref={ref} onAnimationEnd={exit} class={portalCls()} {...childrenProps()}>\n            <Show when={local.content} fallback={<n-empty />}>\n              {local.content as JSX.Element}\n            </Show>\n          </div>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport type PopoverElement = CustomElement<PopoverProps, 'onOpenChange'>;\n\nexport const defaultProps = {\n  class: void 0,\n  css: void 0,\n  content: void 0,\n  getPopupContainer: void 0,\n  trigger: void 0,\n  open: void 0,\n  onOpenChange: void 0,\n  popupClass: void 0,\n  popupCss: void 0,\n  destroyInactive: true,\n  disabled: void 0,\n  arrow: void 0,\n  placement: void 0,\n  dropdownMatchSelectWidth: void 0,\n};\ncustomElement<PopoverProps>('n-popover', defaultProps, (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      onOpenChange(next: boolean | null) {\n        el.dispatchEvent(\n          new CustomEvent('openchange', {\n            detail: next,\n          }),\n        );\n      },\n      children: [...el.childNodes.values()],\n    },\n    _,\n  );\n\n  createEffect(() => {\n    el.removeAttribute('css');\n  });\n  return createComponent(Popover, props);\n});\nexport default Popover;\n"],"names":["TriggerOption","Placement","defaultProps","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","theme","mp","mergeProps","trigger","local","splitProps","open","setOpen","createSignal","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","isElementInside","type","createEffect","dropdownMatchSelectWidth","offsetWidth","showPortal","elRect","getBoundingClientRect","portalRect","offsetX","margin","window","innerHeight","bottom","_placement","placement","_isBottom","startsWith","offsetHeight","top","arrowHeight","arrow","_posi","left","right","Math","abs","prev","isEqual","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","createMemo","isFunction","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","cx","size","popupClass","hostStyle","addEventListener","passive","passiveSupported","onCleanup","removeEventListener","onMount","documentElement","popoverCss","css","class","children","Show","destroyInactive","Portal","portalCss","popupCss","content","customElement","_","opt","el","element","dispatchEvent","CustomEvent","detail","childNodes","values","removeAttribute","createComponent"],"mappings":"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"}

package/lib/popover/style.js

@@ -33,9 +33,7 @@
       drop-shadow(1px calc(var(--direction) * 2px) 8px var(--popover-shadow-color))
       drop-shadow(2px calc(var(--direction) * 4px) 16px var(--popover-shadow-color));
     min-inline-size: 100px;
-    backdrop-filter: blur(16px);
-    /* stylelint-disable-next-line */
-    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(10px);
     box-sizing: border-box;
   }
 

package/lib/popover/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/popover/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const popoverCss = css`\n  .popover {\n    position: relative;\n    display: inline-block;\n    box-sizing: border-box;\n\n    &::-webkit-scrollbar {\n      inline-size: 1px;\n    }\n  }\n`;\nexport const portalCss = css`\n  .container {\n    overflow-y: auto;\n    /* stylelint-disable-next-line */\n    max-block-size: -webkit-fill-available;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .portal {\n    --direction: 1;\n\n    position: fixed;\n    display: inline-block;\n    border-radius: var(--border-radius);\n    padding: 4px;\n    font-size: var(--font-size);\n    color: var(--text-color);\n    background-color: var(--popover-bg);\n    filter: drop-shadow(0.5px calc(var(--direction) * 1px) 4px var(--popover-shadow-color))\n      drop-shadow(1px calc(var(--direction) * 2px) 8px var(--popover-shadow-color))\n      drop-shadow(2px calc(var(--direction) * 4px) 16px var(--popover-shadow-color));\n    min-inline-size: 100px;\n    backdrop-filter: blur(16px);\n    /* stylelint-disable-next-line */\n    -webkit-backdrop-filter: blur(16px);\n    box-sizing: border-box;\n  }\n\n  .arrow {\n    &::before {\n      position: absolute;\n      inset-inline: 0;\n      inset-block-end: 0;\n      margin: auto;\n      inline-size: 12px;\n      block-size: 8px;\n      background: inherit;\n      content: '';\n      clip-path: polygon(0% 0%, 50% 100%, 100% 0%);\n      transform: translate3d(var(--x, 0), 100%, 0);\n    }\n  }\n\n  .in-up {\n    --direction: -1;\n\n    animation: popover-up-in-effect var(--transition-duration) forwards;\n    transform: scaleY(1);\n  }\n\n  .out-up {\n    --direction: -1;\n\n    animation: popover-up-out-effect var(--transition-duration) forwards;\n    transform: scaleY(1);\n  }\n\n  .in-down {\n    --direction: 1;\n\n    animation: popover-down-in-effect var(--transition-duration) forwards;\n    transform: scaleY(1);\n\n    &::before {\n      inset-block-end: unset;\n      inset-block-start: 0;\n      transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);\n    }\n  }\n\n  .out-down {\n    --direction: 1;\n\n    animation: popover-down-out-effect var(--transition-duration) forwards;\n    transform: scaleY(1);\n\n    &::before {\n      inset-block-end: unset;\n      inset-block-start: 0;\n      transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);\n    }\n  }\n\n  @keyframes popover-down-in-effect {\n    0% {\n      transform: scaleY(0.8);\n      transform-origin: 0% 0%;\n      opacity: 0;\n    }\n\n    100% {\n      transform: scaleY(1);\n      transform-origin: 0% 0%;\n      opacity: 1;\n    }\n  }\n\n  @keyframes popover-down-out-effect {\n    0% {\n      transform: scaleY(1);\n      transform-origin: 0% 0%;\n      opacity: 1;\n      pointer-events: none;\n    }\n\n    100% {\n      transform: scaleY(0.8);\n      transform-origin: 0% 0%;\n      opacity: 0;\n      pointer-events: none;\n    }\n  }\n\n  @keyframes popover-up-in-effect {\n    0% {\n      transform: scaleY(0.8);\n      transform-origin: 100% 100%;\n      opacity: 0;\n    }\n\n    100% {\n      transform: scaleY(1);\n      transform-origin: 100% 100%;\n      opacity: 1;\n    }\n  }\n\n  @keyframes popover-up-out-effect {\n    0% {\n      transform: scaleY(1);\n      transform-origin: 100% 100%;\n      opacity: 1;\n      pointer-events: none;\n    }\n\n    100% {\n      transform: scaleY(0.8);\n      transform-origin: 100% 100%;\n      opacity: 0;\n      pointer-events: none;\n    }\n  }\n`;\n"],"names":["popoverCss","portalCss","css"],"mappings":"+JAEaA,UAAU,mBAAVA,GAWAC,SAAS,mBAATA,qBAbO,eAEPD,EAAaE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;AAU9B,CAAC,CACYD,EAAYC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiJ7B,CAAC"}
+{"version":3,"sources":["../../components/popover/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const popoverCss = css`\n  .popover {\n    position: relative;\n    display: inline-block;\n    box-sizing: border-box;\n\n    &::-webkit-scrollbar {\n      inline-size: 1px;\n    }\n  }\n`;\nexport const portalCss = css`\n  .container {\n    overflow-y: auto;\n    /* stylelint-disable-next-line */\n    max-block-size: -webkit-fill-available;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .portal {\n    --direction: 1;\n\n    position: fixed;\n    display: inline-block;\n    border-radius: var(--border-radius);\n    padding: 4px;\n    font-size: var(--font-size);\n    color: var(--text-color);\n    background-color: var(--popover-bg);\n    filter: drop-shadow(0.5px calc(var(--direction) * 1px) 4px var(--popover-shadow-color))\n      drop-shadow(1px calc(var(--direction) * 2px) 8px var(--popover-shadow-color))\n      drop-shadow(2px calc(var(--direction) * 4px) 16px var(--popover-shadow-color));\n    min-inline-size: 100px;\n    backdrop-filter: blur(10px);\n    box-sizing: border-box;\n  }\n\n  .arrow {\n    &::before {\n      position: absolute;\n      inset-inline: 0;\n      inset-block-end: 0;\n      margin: auto;\n      inline-size: 12px;\n      block-size: 8px;\n      background: inherit;\n      content: '';\n      clip-path: polygon(0% 0%, 50% 100%, 100% 0%);\n      transform: translate3d(var(--x, 0), 100%, 0);\n    }\n  }\n\n  .in-up {\n    --direction: -1;\n\n    animation: popover-up-in-effect var(--transition-duration) forwards;\n    transform: scaleY(1);\n  }\n\n  .out-up {\n    --direction: -1;\n\n    animation: popover-up-out-effect var(--transition-duration) forwards;\n    transform: scaleY(1);\n  }\n\n  .in-down {\n    --direction: 1;\n\n    animation: popover-down-in-effect var(--transition-duration) forwards;\n    transform: scaleY(1);\n\n    &::before {\n      inset-block-end: unset;\n      inset-block-start: 0;\n      transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);\n    }\n  }\n\n  .out-down {\n    --direction: 1;\n\n    animation: popover-down-out-effect var(--transition-duration) forwards;\n    transform: scaleY(1);\n\n    &::before {\n      inset-block-end: unset;\n      inset-block-start: 0;\n      transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);\n    }\n  }\n\n  @keyframes popover-down-in-effect {\n    0% {\n      transform: scaleY(0.8);\n      transform-origin: 0% 0%;\n      opacity: 0;\n    }\n\n    100% {\n      transform: scaleY(1);\n      transform-origin: 0% 0%;\n      opacity: 1;\n    }\n  }\n\n  @keyframes popover-down-out-effect {\n    0% {\n      transform: scaleY(1);\n      transform-origin: 0% 0%;\n      opacity: 1;\n      pointer-events: none;\n    }\n\n    100% {\n      transform: scaleY(0.8);\n      transform-origin: 0% 0%;\n      opacity: 0;\n      pointer-events: none;\n    }\n  }\n\n  @keyframes popover-up-in-effect {\n    0% {\n      transform: scaleY(0.8);\n      transform-origin: 100% 100%;\n      opacity: 0;\n    }\n\n    100% {\n      transform: scaleY(1);\n      transform-origin: 100% 100%;\n      opacity: 1;\n    }\n  }\n\n  @keyframes popover-up-out-effect {\n    0% {\n      transform: scaleY(1);\n      transform-origin: 100% 100%;\n      opacity: 1;\n      pointer-events: none;\n    }\n\n    100% {\n      transform: scaleY(0.8);\n      transform-origin: 100% 100%;\n      opacity: 0;\n      pointer-events: none;\n    }\n  }\n`;\n"],"names":["popoverCss","portalCss","css"],"mappings":"+JAEaA,UAAU,mBAAVA,GAWAC,SAAS,mBAATA,qBAbO,eAEPD,EAAaE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;AAU9B,CAAC,CACYD,EAAYC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+I7B,CAAC"}

package/lib/prism/css.js

@@ -337,9 +337,7 @@
       box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
       line-height: 24px;
       text-transform: uppercase;
-      backdrop-filter: blur(16px);
-      /* stylelint-disable-next-line */
-      -webkit-backdrop-filter: blur(16px);
+      backdrop-filter: blur(10px);
       content: attr(data-lang) '';
       transition-property: background-color, border-color, color;
     }

package/lib/prism/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/prism/css.ts"],"sourcesContent":["import { createMemo, createRoot, getOwner } from 'solid-js';\nimport { css } from '@moneko/css';\nimport theme from '../theme';\n\nconst prismCss = createRoot(() => {\n  const { isDark } = theme;\n  const baseCss = css`\n    [data-copy]::before {\n      position: absolute;\n      inset-block-start: 32px;\n      inset-inline: 0;\n      z-index: 1;\n      display: inline-block;\n      margin: auto;\n      border: 1px solid;\n      border-radius: var(--border-radius);\n      padding: 4px 8px;\n      inline-size: fit-content;\n      font-size: var(--font-size-sm);\n      transition:\n        background-color 0.3s,\n        color 0.3s,\n        border-color 0.3s;\n      animation-fill-mode: forwards;\n      content: '复制成功';\n    }\n\n    [data-copy='success']::before {\n      border-color: var(--success-border);\n      color: var(--success-color);\n      background-color: var(--success-bg);\n      animation: copy-slide-in var(--transition-duration) var(--transition-timing-function);\n      content: '复制成功';\n    }\n\n    [data-copy='failure']::before {\n      border-color: var(--error-border);\n      color: var(--error-color);\n      background-color: var(--error-bg);\n      animation:\n        copy-slide-in var(--transition-duration) var(--transition-timing-function),\n        error 1s var(--transition-timing-function) 1s;\n      content: '复制失败';\n    }\n\n    [data-copy-exit]::before {\n      animation: copy-slide-out var(--transition-duration) forwards\n        var(--transition-timing-function);\n    }\n\n    @keyframes copy-slide-in {\n      from {\n        transform: translate3d(0, -100%, 0) scale(0);\n        opacity: 0;\n      }\n\n      to {\n        transform: translate3d(0, 0, 0) scale(1);\n        opacity: 1;\n      }\n    }\n\n    @keyframes copy-slide-out {\n      from {\n        transform: translate3d(0, 0, 0) scale(1);\n        opacity: 1;\n      }\n\n      to {\n        transform: translate3d(0, -100%, 0) scale(0);\n        opacity: 0;\n      }\n    }\n\n    pre > code {\n      display: block;\n      overflow: auto;\n      margin: 0 16px 8px;\n      padding: 32px 0 8px;\n      max-inline-size: 100%;\n      font-size: var(--font-size);\n      white-space: pre;\n      line-height: 1.8;\n      pointer-events: auto;\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n      transition-property: box-shadow, background-color, border-color, color;\n    }\n\n    code[class*='language-'],\n    pre[class*='language-'] {\n      color: var(--code-color, #90a4ae);\n\n      &::selection,\n      & ::selection {\n        background-color: var(--text-selection);\n        text-shadow: 0 1px var(--primary-shadow);\n      }\n    }\n\n    .language-css > code,\n    .language-sass > code,\n    .language-scss > code {\n      color: var(--code-lang-style-color, #f76d47);\n    }\n\n    .line-numbers-rows,\n    .toolbar::after,\n    .toolbar-copy::after,\n    pre {\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n    }\n\n    [class*='language-'] .namespace {\n      opacity: 0.7;\n    }\n\n    .tag {\n      color: var(--token-tag, #e53935);\n    }\n\n    .atrule {\n      color: var(--token-atrule, #7c4dff);\n    }\n\n    .attr-name {\n      color: var(--token-attr-name, #39adb5);\n    }\n\n    .attr-value {\n      color: var(--token-attr-value, #f6a434);\n    }\n\n    .attribute {\n      color: var(--token-attribute, #f6a434);\n    }\n\n    .boolean {\n      color: var(--token-boolean, #7c4dff);\n    }\n\n    .builtin {\n      color: var(--token-builtin, #39adb5);\n    }\n\n    .cdata {\n      color: var(--token-cdata, #39adb5);\n    }\n\n    .char {\n      color: var(--token-char, #39adb5);\n    }\n\n    .class {\n      color: var(--token-class, #39adb5);\n    }\n\n    .class-name,\n    .maybe-class-name {\n      color: var(--token-class-name, #6182b8);\n    }\n\n    .comment {\n      color: var(--token-comment, #aabfc9);\n    }\n\n    .constant {\n      color: var(--token-constant, #7c4dff);\n    }\n\n    .deleted {\n      color: var(--token-deleted, #e53935);\n    }\n\n    .doctype {\n      color: var(--token-doctype, #aabfc9);\n    }\n\n    .entity {\n      color: var(--token-entity, #e53935);\n    }\n\n    .function {\n      color: var(--token-function, #7c4dff);\n    }\n\n    .hexcode {\n      color: var(--token-hexcode, #f76d47);\n    }\n\n    .id {\n      font-weight: bold;\n      color: var(--token-id, #7c4dff);\n    }\n\n    .important {\n      font-weight: bold;\n      color: var(--token-important, #7c4dff);\n    }\n\n    .inserted {\n      color: var(--token-inserted, #39adb5);\n    }\n\n    .keyword {\n      color: var(--token-keyword, #7c4dff);\n    }\n\n    .number {\n      color: var(--token-number, #f76d47);\n    }\n\n    .operator {\n      color: var(--token-operator, #39adb5);\n    }\n\n    .prolog {\n      color: var(--token-prolog, #aabfc9);\n    }\n\n    .property {\n      color: var(--token-property, #39adb5);\n    }\n\n    .pseudo-class {\n      color: var(--token-pseudo-class, #f6a434);\n    }\n\n    .pseudo-element {\n      color: var(--token-pseudo-element, #f6a434);\n    }\n\n    .punctuation {\n      color: var(--token-punctuation, #39adb5);\n    }\n\n    .regex {\n      color: var(--token-regex, #6182b8);\n    }\n\n    .selector {\n      color: var(--token-selector, #e53935);\n    }\n\n    .string {\n      color: var(--token-string, #f6a434);\n    }\n\n    .symbol {\n      color: var(--token-symbol, #7c4dff);\n    }\n\n    .unit {\n      color: var(--token-unit, #f76d47);\n    }\n\n    .url {\n      color: var(--token-url, #e53935);\n    }\n\n    .variable {\n      color: var(--token-variable, #e53935);\n    }\n\n    code[class*='language-'],\n    pre,\n    .n-editor textarea {\n      font-family: 'Liberation Mono', Monaco, Menlo, Consolas, 'Source Code Pro', 'Ubuntu Mono',\n        'Microsoft Yahei', '微软雅黑', Courier, 'Helvetica Neue', 'Lantinghei SC', STXihei,\n        WenQuanYi, sans-serif;\n      text-align: start;\n      white-space: pre;\n      word-wrap: normal;\n      word-break: normal;\n      word-spacing: normal;\n      tab-size: 4;\n      hyphens: none;\n    }\n\n    .deleted:not(.prefix) {\n      display: block;\n      color: inherit;\n      background-color: rgb(255 0 0 / 10%);\n    }\n\n    .inserted:not(.prefix) {\n      display: block;\n      color: inherit;\n      background-color: rgb(0 255 128 / 10%);\n    }\n\n    span .inline-color-wrapper {\n      display: inline-block;\n      overflow: hidden;\n      margin: 0 0.333ch;\n      border: var(--border-base);\n      background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 0 / 10px 10px;\n      outline: 1px solid rgb(0 0 0 / 50%);\n      inline-size: 1.333ch;\n      block-size: 1.333ch;\n      box-sizing: border-box;\n    }\n\n    span .inline-color {\n      display: block;\n      inline-size: 120%;\n      block-size: 120%;\n    }\n\n    pre,\n    .n-editor {\n      position: relative;\n      display: block;\n      overflow: visible;\n      margin: auto;\n      border-radius: var(--border-radius);\n      max-inline-size: 100%;\n      font-size: var(--font-size);\n      white-space: pre-wrap;\n      background-color: var(--primary-component-bg);\n      box-shadow: 0 2px 8px 0 var(--primary-shadow);\n      line-height: 20px;\n      transition-property: color, background-color, box-shadow;\n    }\n\n    pre .toolbar::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      z-index: 1;\n      display: block;\n      overflow: hidden;\n      border-radius: var(--border-radius) var(--border-radius) 0 0;\n      inline-size: 100%;\n      block-size: 24px;\n      font-size: var(--font-size);\n      font-family: Ubuntu, sans-serif;\n      font-weight: bold;\n      text-align: center;\n      color: var(--text-color);\n      background-color: var(--code-toolbar-bg, rgb(220 224 229 / 50%));\n      box-shadow: 0 1px 5px rgb(0 0 0 / 10%);\n      line-height: 24px;\n      text-transform: uppercase;\n      backdrop-filter: blur(16px);\n      /* stylelint-disable-next-line */\n      -webkit-backdrop-filter: blur(16px);\n      content: attr(data-lang) '';\n      transition-property: background-color, border-color, color;\n    }\n\n    pre .toolbar::before {\n      position: absolute;\n      inset-block-start: 10px;\n      inset-inline-start: 12px;\n      z-index: 3;\n      display: inline-block;\n      border-radius: var(--border-radius);\n      inline-size: 4px;\n      block-size: 4px;\n      text-align: center;\n      background-color: #fc625d;\n      box-shadow:\n        0 0 0 4px #fc625d,\n        20px 0 0 4px #fdbc40,\n        40px 0 0 4px #35cd4b;\n      cursor: pointer;\n      content: '';\n    }\n\n    pre .toolbar .toolbar-copy {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 8px;\n      z-index: 3;\n      border: none;\n      padding: 0;\n      background: none;\n      outline: none;\n      cursor: pointer;\n    }\n\n    pre .toolbar .toolbar-copy:active {\n      transform: scale(0.95);\n    }\n\n    .toolbar .toolbar-copy::after {\n      user-select: none;\n      display: block;\n      font-size: 24px;\n      font-family: sans-serif;\n      color: var(--text-color);\n      line-height: 24px;\n      content: '⎘';\n      transition-property: color, transform;\n    }\n\n    .toolbar .toolbar-copy:hover::after {\n      color: var(--primary-color, #5794ff);\n    }\n\n    pre.line-numbers > code {\n      margin: 0 10px 0 54px;\n      white-space: inherit;\n      counter-reset: linenumber;\n    }\n\n    pre.line-numbers .line-numbers-rows {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      overflow-y: auto;\n      border-inline-end: 1px solid var(--border-color);\n      border-radius: var(--border-radius) 0 0 var(--border-radius);\n      padding: 32px 0 8px;\n      inline-size: 44px;\n      max-block-size: inherit;\n      font-size: 100%;\n      background-color: var(--primary-component-bg);\n      letter-spacing: -1px;\n      user-select: none;\n      pointer-events: none;\n      transition-property: background-color, border-color;\n    }\n\n    .line-numbers-rows > span {\n      display: block;\n      counter-increment: linenumber;\n    }\n\n    .line-numbers-rows > span::before {\n      display: block;\n      padding-inline-end: 0.8em;\n      text-align: end;\n      color: #999;\n      opacity: 0.5;\n      content: counter(linenumber);\n    }\n\n    pre::-webkit-scrollbar,\n    pre ::-webkit-scrollbar {\n      display: none;\n    }\n\n    @media print {\n      code[class*='language-'],\n      pre[class*='language-'] {\n        text-shadow: none;\n      }\n    }\n  `;\n  const darkCss = css`\n    :host {\n      --code-color: #eee;\n      --code-lang-style-color: #fd9170;\n      --code-toolbar-bg: rgb(63 63 63 / 70%);\n      --token-atrule: #c792ea;\n      --token-attr-name: #ffcb6b;\n      --token-attr-value: #a5e844;\n      --token-attribute: #a5e844;\n      --token-boolean: #c792ea;\n      --token-builtin: #ffcb6b;\n      --token-cdata: #80cbc4;\n      --token-char: #80cbc4;\n      --token-class: #ffcb6b;\n      --token-class-name: #f2ff00;\n      --token-comment: #616161;\n      --token-constant: #c792ea;\n      --token-deleted: #f66;\n      --token-doctype: #616161;\n      --token-entity: #f66;\n      --token-function: #c792ea;\n      --token-hexcode: #f2ff00;\n      --token-id: #c792ea;\n      --token-important: #c792ea;\n      --token-inserted: #80cbc4;\n      --token-keyword: #c792ea;\n      --token-number: #fd9170;\n      --token-operator: #89ddff;\n      --token-prolog: #616161;\n      --token-property: #80cbc4;\n      --token-pseudo-class: #a5e844;\n      --token-pseudo-element: #a5e844;\n      --token-punctuation: #89ddff;\n      --token-regex: #f2ff00;\n      --token-selector: #f66;\n      --token-string: #a5e844;\n      --token-symbol: #c792ea;\n      --token-tag: #f66;\n      --token-unit: #fd9170;\n      --token-url: #f66;\n      --token-variable: #f66;\n    }\n  `;\n\n  const style = createMemo(() => `${isDark() ? darkCss : ''}${baseCss}`);\n\n  return style;\n}, getOwner());\n\nexport default prismCss;\n"],"names":["createRoot","isDark","theme","baseCss","css","darkCss","createMemo","getOwner"],"mappings":"wGAqfA,+CAAA,qBArfiD,sBAC7B,4BACF,yCAmflB,EAjfiBA,GAAAA,YAAU,EAAC,KAC1B,GAAM,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAClBC,EAAUC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6bpB,CAAC,CACKC,EAAUD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CpB,CAAC,CAID,MAFcE,GAAAA,YAAU,EAAC,IAAM,CAAC,EAAEL,IAAWI,EAAU,GAAG,EAAEF,EAAQ,CAAC,CAGvE,EAAGI,GAAAA,UAAQ"}
+{"version":3,"sources":["../../components/prism/css.ts"],"sourcesContent":["import { createMemo, createRoot, getOwner } from 'solid-js';\nimport { css } from '@moneko/css';\nimport theme from '../theme';\n\nconst prismCss = createRoot(() => {\n  const { isDark } = theme;\n  const baseCss = css`\n    [data-copy]::before {\n      position: absolute;\n      inset-block-start: 32px;\n      inset-inline: 0;\n      z-index: 1;\n      display: inline-block;\n      margin: auto;\n      border: 1px solid;\n      border-radius: var(--border-radius);\n      padding: 4px 8px;\n      inline-size: fit-content;\n      font-size: var(--font-size-sm);\n      transition:\n        background-color 0.3s,\n        color 0.3s,\n        border-color 0.3s;\n      animation-fill-mode: forwards;\n      content: '复制成功';\n    }\n\n    [data-copy='success']::before {\n      border-color: var(--success-border);\n      color: var(--success-color);\n      background-color: var(--success-bg);\n      animation: copy-slide-in var(--transition-duration) var(--transition-timing-function);\n      content: '复制成功';\n    }\n\n    [data-copy='failure']::before {\n      border-color: var(--error-border);\n      color: var(--error-color);\n      background-color: var(--error-bg);\n      animation:\n        copy-slide-in var(--transition-duration) var(--transition-timing-function),\n        error 1s var(--transition-timing-function) 1s;\n      content: '复制失败';\n    }\n\n    [data-copy-exit]::before {\n      animation: copy-slide-out var(--transition-duration) forwards\n        var(--transition-timing-function);\n    }\n\n    @keyframes copy-slide-in {\n      from {\n        transform: translate3d(0, -100%, 0) scale(0);\n        opacity: 0;\n      }\n\n      to {\n        transform: translate3d(0, 0, 0) scale(1);\n        opacity: 1;\n      }\n    }\n\n    @keyframes copy-slide-out {\n      from {\n        transform: translate3d(0, 0, 0) scale(1);\n        opacity: 1;\n      }\n\n      to {\n        transform: translate3d(0, -100%, 0) scale(0);\n        opacity: 0;\n      }\n    }\n\n    pre > code {\n      display: block;\n      overflow: auto;\n      margin: 0 16px 8px;\n      padding: 32px 0 8px;\n      max-inline-size: 100%;\n      font-size: var(--font-size);\n      white-space: pre;\n      line-height: 1.8;\n      pointer-events: auto;\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n      transition-property: box-shadow, background-color, border-color, color;\n    }\n\n    code[class*='language-'],\n    pre[class*='language-'] {\n      color: var(--code-color, #90a4ae);\n\n      &::selection,\n      & ::selection {\n        background-color: var(--text-selection);\n        text-shadow: 0 1px var(--primary-shadow);\n      }\n    }\n\n    .language-css > code,\n    .language-sass > code,\n    .language-scss > code {\n      color: var(--code-lang-style-color, #f76d47);\n    }\n\n    .line-numbers-rows,\n    .toolbar::after,\n    .toolbar-copy::after,\n    pre {\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n    }\n\n    [class*='language-'] .namespace {\n      opacity: 0.7;\n    }\n\n    .tag {\n      color: var(--token-tag, #e53935);\n    }\n\n    .atrule {\n      color: var(--token-atrule, #7c4dff);\n    }\n\n    .attr-name {\n      color: var(--token-attr-name, #39adb5);\n    }\n\n    .attr-value {\n      color: var(--token-attr-value, #f6a434);\n    }\n\n    .attribute {\n      color: var(--token-attribute, #f6a434);\n    }\n\n    .boolean {\n      color: var(--token-boolean, #7c4dff);\n    }\n\n    .builtin {\n      color: var(--token-builtin, #39adb5);\n    }\n\n    .cdata {\n      color: var(--token-cdata, #39adb5);\n    }\n\n    .char {\n      color: var(--token-char, #39adb5);\n    }\n\n    .class {\n      color: var(--token-class, #39adb5);\n    }\n\n    .class-name,\n    .maybe-class-name {\n      color: var(--token-class-name, #6182b8);\n    }\n\n    .comment {\n      color: var(--token-comment, #aabfc9);\n    }\n\n    .constant {\n      color: var(--token-constant, #7c4dff);\n    }\n\n    .deleted {\n      color: var(--token-deleted, #e53935);\n    }\n\n    .doctype {\n      color: var(--token-doctype, #aabfc9);\n    }\n\n    .entity {\n      color: var(--token-entity, #e53935);\n    }\n\n    .function {\n      color: var(--token-function, #7c4dff);\n    }\n\n    .hexcode {\n      color: var(--token-hexcode, #f76d47);\n    }\n\n    .id {\n      font-weight: bold;\n      color: var(--token-id, #7c4dff);\n    }\n\n    .important {\n      font-weight: bold;\n      color: var(--token-important, #7c4dff);\n    }\n\n    .inserted {\n      color: var(--token-inserted, #39adb5);\n    }\n\n    .keyword {\n      color: var(--token-keyword, #7c4dff);\n    }\n\n    .number {\n      color: var(--token-number, #f76d47);\n    }\n\n    .operator {\n      color: var(--token-operator, #39adb5);\n    }\n\n    .prolog {\n      color: var(--token-prolog, #aabfc9);\n    }\n\n    .property {\n      color: var(--token-property, #39adb5);\n    }\n\n    .pseudo-class {\n      color: var(--token-pseudo-class, #f6a434);\n    }\n\n    .pseudo-element {\n      color: var(--token-pseudo-element, #f6a434);\n    }\n\n    .punctuation {\n      color: var(--token-punctuation, #39adb5);\n    }\n\n    .regex {\n      color: var(--token-regex, #6182b8);\n    }\n\n    .selector {\n      color: var(--token-selector, #e53935);\n    }\n\n    .string {\n      color: var(--token-string, #f6a434);\n    }\n\n    .symbol {\n      color: var(--token-symbol, #7c4dff);\n    }\n\n    .unit {\n      color: var(--token-unit, #f76d47);\n    }\n\n    .url {\n      color: var(--token-url, #e53935);\n    }\n\n    .variable {\n      color: var(--token-variable, #e53935);\n    }\n\n    code[class*='language-'],\n    pre,\n    .n-editor textarea {\n      font-family: 'Liberation Mono', Monaco, Menlo, Consolas, 'Source Code Pro', 'Ubuntu Mono',\n        'Microsoft Yahei', '微软雅黑', Courier, 'Helvetica Neue', 'Lantinghei SC', STXihei,\n        WenQuanYi, sans-serif;\n      text-align: start;\n      white-space: pre;\n      word-wrap: normal;\n      word-break: normal;\n      word-spacing: normal;\n      tab-size: 4;\n      hyphens: none;\n    }\n\n    .deleted:not(.prefix) {\n      display: block;\n      color: inherit;\n      background-color: rgb(255 0 0 / 10%);\n    }\n\n    .inserted:not(.prefix) {\n      display: block;\n      color: inherit;\n      background-color: rgb(0 255 128 / 10%);\n    }\n\n    span .inline-color-wrapper {\n      display: inline-block;\n      overflow: hidden;\n      margin: 0 0.333ch;\n      border: var(--border-base);\n      background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 0 / 10px 10px;\n      outline: 1px solid rgb(0 0 0 / 50%);\n      inline-size: 1.333ch;\n      block-size: 1.333ch;\n      box-sizing: border-box;\n    }\n\n    span .inline-color {\n      display: block;\n      inline-size: 120%;\n      block-size: 120%;\n    }\n\n    pre,\n    .n-editor {\n      position: relative;\n      display: block;\n      overflow: visible;\n      margin: auto;\n      border-radius: var(--border-radius);\n      max-inline-size: 100%;\n      font-size: var(--font-size);\n      white-space: pre-wrap;\n      background-color: var(--primary-component-bg);\n      box-shadow: 0 2px 8px 0 var(--primary-shadow);\n      line-height: 20px;\n      transition-property: color, background-color, box-shadow;\n    }\n\n    pre .toolbar::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      z-index: 1;\n      display: block;\n      overflow: hidden;\n      border-radius: var(--border-radius) var(--border-radius) 0 0;\n      inline-size: 100%;\n      block-size: 24px;\n      font-size: var(--font-size);\n      font-family: Ubuntu, sans-serif;\n      font-weight: bold;\n      text-align: center;\n      color: var(--text-color);\n      background-color: var(--code-toolbar-bg, rgb(220 224 229 / 50%));\n      box-shadow: 0 1px 5px rgb(0 0 0 / 10%);\n      line-height: 24px;\n      text-transform: uppercase;\n      backdrop-filter: blur(10px);\n      content: attr(data-lang) '';\n      transition-property: background-color, border-color, color;\n    }\n\n    pre .toolbar::before {\n      position: absolute;\n      inset-block-start: 10px;\n      inset-inline-start: 12px;\n      z-index: 3;\n      display: inline-block;\n      border-radius: var(--border-radius);\n      inline-size: 4px;\n      block-size: 4px;\n      text-align: center;\n      background-color: #fc625d;\n      box-shadow:\n        0 0 0 4px #fc625d,\n        20px 0 0 4px #fdbc40,\n        40px 0 0 4px #35cd4b;\n      cursor: pointer;\n      content: '';\n    }\n\n    pre .toolbar .toolbar-copy {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 8px;\n      z-index: 3;\n      border: none;\n      padding: 0;\n      background: none;\n      outline: none;\n      cursor: pointer;\n    }\n\n    pre .toolbar .toolbar-copy:active {\n      transform: scale(0.95);\n    }\n\n    .toolbar .toolbar-copy::after {\n      user-select: none;\n      display: block;\n      font-size: 24px;\n      font-family: sans-serif;\n      color: var(--text-color);\n      line-height: 24px;\n      content: '⎘';\n      transition-property: color, transform;\n    }\n\n    .toolbar .toolbar-copy:hover::after {\n      color: var(--primary-color, #5794ff);\n    }\n\n    pre.line-numbers > code {\n      margin: 0 10px 0 54px;\n      white-space: inherit;\n      counter-reset: linenumber;\n    }\n\n    pre.line-numbers .line-numbers-rows {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      overflow-y: auto;\n      border-inline-end: 1px solid var(--border-color);\n      border-radius: var(--border-radius) 0 0 var(--border-radius);\n      padding: 32px 0 8px;\n      inline-size: 44px;\n      max-block-size: inherit;\n      font-size: 100%;\n      background-color: var(--primary-component-bg);\n      letter-spacing: -1px;\n      user-select: none;\n      pointer-events: none;\n      transition-property: background-color, border-color;\n    }\n\n    .line-numbers-rows > span {\n      display: block;\n      counter-increment: linenumber;\n    }\n\n    .line-numbers-rows > span::before {\n      display: block;\n      padding-inline-end: 0.8em;\n      text-align: end;\n      color: #999;\n      opacity: 0.5;\n      content: counter(linenumber);\n    }\n\n    pre::-webkit-scrollbar,\n    pre ::-webkit-scrollbar {\n      display: none;\n    }\n\n    @media print {\n      code[class*='language-'],\n      pre[class*='language-'] {\n        text-shadow: none;\n      }\n    }\n  `;\n  const darkCss = css`\n    :host {\n      --code-color: #eee;\n      --code-lang-style-color: #fd9170;\n      --code-toolbar-bg: rgb(63 63 63 / 70%);\n      --token-atrule: #c792ea;\n      --token-attr-name: #ffcb6b;\n      --token-attr-value: #a5e844;\n      --token-attribute: #a5e844;\n      --token-boolean: #c792ea;\n      --token-builtin: #ffcb6b;\n      --token-cdata: #80cbc4;\n      --token-char: #80cbc4;\n      --token-class: #ffcb6b;\n      --token-class-name: #f2ff00;\n      --token-comment: #616161;\n      --token-constant: #c792ea;\n      --token-deleted: #f66;\n      --token-doctype: #616161;\n      --token-entity: #f66;\n      --token-function: #c792ea;\n      --token-hexcode: #f2ff00;\n      --token-id: #c792ea;\n      --token-important: #c792ea;\n      --token-inserted: #80cbc4;\n      --token-keyword: #c792ea;\n      --token-number: #fd9170;\n      --token-operator: #89ddff;\n      --token-prolog: #616161;\n      --token-property: #80cbc4;\n      --token-pseudo-class: #a5e844;\n      --token-pseudo-element: #a5e844;\n      --token-punctuation: #89ddff;\n      --token-regex: #f2ff00;\n      --token-selector: #f66;\n      --token-string: #a5e844;\n      --token-symbol: #c792ea;\n      --token-tag: #f66;\n      --token-unit: #fd9170;\n      --token-url: #f66;\n      --token-variable: #f66;\n    }\n  `;\n\n  const style = createMemo(() => `${isDark() ? darkCss : ''}${baseCss}`);\n\n  return style;\n}, getOwner());\n\nexport default prismCss;\n"],"names":["createRoot","isDark","theme","baseCss","css","darkCss","createMemo","getOwner"],"mappings":"wGAmfA,+CAAA,qBAnfiD,sBAC7B,4BACF,yCAiflB,EA/eiBA,GAAAA,YAAU,EAAC,KAC1B,GAAM,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAClBC,EAAUC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2bpB,CAAC,CACKC,EAAUD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CpB,CAAC,CAID,MAFcE,GAAAA,YAAU,EAAC,IAAM,CAAC,EAAEL,IAAWI,EAAU,GAAG,EAAEF,EAAQ,CAAC,CAGvE,EAAGI,GAAAA,UAAQ"}

package/lib/theme/index.js

@@ -1,8 +1,8 @@
-"use strict";var e,r;Object.defineProperty(exports,"__esModule",{value:!0}),function(e,r){for(var o in r)Object.defineProperty(e,o,{enumerable:!0,get:r[o]})}(exports,{ColorScheme:function(){return e},default:function(){return m},generateTheme:function(){return l},toneColor:function(){return c.toneColor}});const o=require("solid-js"),a=s(require("@moneko/common/lib/colorParse")),t=s(require("@moneko/common/lib/mixColor")),n=s(require("@moneko/common/lib/toneColor")),i=require("@moneko/css"),c=require("@moneko/common");function s(e){return e&&e.__esModule?e:{default:e}}function l(e,r){let o=(0,n.default)(e,r?.dark),i=(0,a.default)(o[5]),c=(0,a.default)(e);return{[`--${r.name}-text`]:i.setAlpha(.65).toRgbaString(),[`--${r.name}-secondary`]:i.setAlpha(.45).toRgbaString(),[`--${r.name}-heading`]:o[5],[`--${r.name}-active`]:o[30],[`--${r.name}-color`]:o[40],[`--${r.name}-hover`]:(0,t.default)(o[40],o[30],15),[`--${r.name}-secondary-bg`]:o[70],[`--${r.name}-border`]:o[80],[`--${r.name}-outline`]:(0,t.default)(o[90],o[40],5),[`--${r.name}-selection`]:o[90],[`--on-${r.name}-selection`]:o[10],[`--${r.name}-shadow`]:c.setAlpha(.12).toRgbaString(),[`--${r.name}-details-bg`]:o[95],[`--${r.name}-component-bg`]:o[98],[`--${r.name}-bg`]:o[99],[`--on-${r.name}-bg`]:o[5],[`--${r.name}-base-shadow`]:`0 3px 6px -4px ${c.setAlpha(.12).toRgbaString()}, 0 6px 16px 0 ${c.setAlpha(.08).toRgbaString()}, 0 9px 28px 8px ${c.setAlpha(.05).toRgbaString()}`}}(r=e||(e={})).light="light",r.dark="dark",r.auto="auto";const m=(0,o.createRoot)(function(){let r=e[localStorage.getItem("color-scheme")]||"auto",a=window.matchMedia("(prefers-color-scheme: dark)"),[t,n]=(0,o.createSignal)(r),[c,s]=(0,o.createSignal)(a.matches),[m,b]=(0,o.createSignal)({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[d,g]=(0,o.createSignal)({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),u=(0,o.createMemo)(()=>l(m().primary,{name:"primary"})),p=(0,o.createMemo)(()=>l(m().warning,{name:"warning"})),f=(0,o.createMemo)(()=>l(m().success,{name:"success"})),h=(0,o.createMemo)(()=>l(m().error,{name:"error"})),x=(0,o.createMemo)(()=>(0,i.css)`
+"use strict";var e,r;Object.defineProperty(exports,"__esModule",{value:!0}),function(e,r){for(var o in r)Object.defineProperty(e,o,{enumerable:!0,get:r[o]})}(exports,{ColorScheme:function(){return e},default:function(){return m},generateTheme:function(){return l},toneColor:function(){return s.toneColor}});const o=require("solid-js"),a=c(require("@moneko/common/lib/colorParse")),t=c(require("@moneko/common/lib/mixColor")),n=c(require("@moneko/common/lib/toneColor")),i=require("@moneko/css"),s=require("@moneko/common");function c(e){return e&&e.__esModule?e:{default:e}}function l(e,r){let o=(0,n.default)(e,r?.dark),i=(0,a.default)(o[5]),s=(0,a.default)(e);return{[`--${r.name}-text`]:i.setAlpha(.65).toRgbaString(),[`--${r.name}-secondary`]:i.setAlpha(.45).toRgbaString(),[`--${r.name}-heading`]:o[5],[`--${r.name}-active`]:o[30],[`--${r.name}-color`]:o[40],[`--${r.name}-hover`]:(0,t.default)(o[40],o[30],15),[`--${r.name}-secondary-bg`]:o[70],[`--${r.name}-border`]:o[80],[`--${r.name}-outline`]:(0,t.default)(o[90],o[40],5),[`--${r.name}-selection`]:o[90],[`--${r.name}-notify-bg`]:(0,a.default)(o[90]).setAlpha(.8).toRgbaString(),[`--on-${r.name}-selection`]:o[10],[`--${r.name}-shadow`]:s.setAlpha(.12).toRgbaString(),[`--${r.name}-details-bg`]:o[95],[`--${r.name}-component-bg`]:o[98],[`--${r.name}-bg`]:o[99],[`--on-${r.name}-bg`]:o[5],[`--${r.name}-base-shadow`]:`0 3px 6px -4px ${s.setAlpha(.12).toRgbaString()}, 0 6px 16px 0 ${s.setAlpha(.08).toRgbaString()}, 0 9px 28px 8px ${s.setAlpha(.05).toRgbaString()}`}}(r=e||(e={})).light="light",r.dark="dark",r.auto="auto";const m=(0,o.createRoot)(function(){let r=e[localStorage.getItem("color-scheme")]||"auto",a=window.matchMedia("(prefers-color-scheme: dark)"),[t,n]=(0,o.createSignal)(r),[s,c]=(0,o.createSignal)(a.matches),[m,b]=(0,o.createSignal)({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[d,g]=(0,o.createSignal)({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),p=(0,o.createMemo)(()=>l(m().primary,{name:"primary"})),u=(0,o.createMemo)(()=>l(m().warning,{name:"warning"})),f=(0,o.createMemo)(()=>l(m().success,{name:"success"})),h=(0,o.createMemo)(()=>l(m().error,{name:"error"})),x=(0,o.createMemo)(()=>(0,i.css)`
       :root,
       :host {
-        ${u()}
         ${p()}
+        ${u()}
         ${f()}
         ${h()}
         --bg: transparent;
@@ -29,6 +29,7 @@
         --primary-selection: rgb(255 255 255 / 5%);
         --primary-details-bg: rgb(255 255 255 / 3%);
         --primary-component-bg: #000;
+        --modal-component-bg: rgb(30 30 30 / 80%);
       }
     `),w=(0,i.css)`
     :root,
@@ -45,9 +46,10 @@
       --text-selection: var(--primary-selection);
       --box-shadow-base: var(--primary-base-shadow);
       --transition-duration: 0.3s;
-      --mask-bg: rgb(0 0 0 / 30%);
-
-      /* --transition-timing-function: cubic-bezier(0.94, -0.1, 0.1, 1.2); */
+      --mask-bg: rgb(0 0 0 / 5%);
+      --modal-component-bg: rgb(255 255 255 / 80%);
+      --modal-box-shadow: 0 5px 35px rgb(0 0 0 / 10%);
+      --notification-box-shadow: 0 4px 16px rgb(0 0 0 / 5%);
       --transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 
       font-size: var(--font-size);
@@ -71,5 +73,5 @@
       inline-size: 4px;
       block-size: 4px;
     }
-  `;function M(e){s(e.matches)}(0,o.createEffect)(()=>{let e=t();s("dark"===e||"auto"===e&&a.matches)});let z=(0,o.createMemo)(()=>w+(c()?k():x()));return(0,o.createEffect)(()=>{"auto"===t()?a.addEventListener("change",M):a.removeEventListener("change",M),localStorage.setItem("color-scheme",t())}),{baseStyle:z,dark:d,setDark:g,light:m,setLight:b,scheme:t,setScheme:n,isDark:c}},(0,o.getOwner)());
+  `;function M(e){c(e.matches)}(0,o.createEffect)(()=>{let e=t();c("dark"===e||"auto"===e&&a.matches)});let z=(0,o.createMemo)(()=>w+(s()?k():x()));return(0,o.createEffect)(()=>{"auto"===t()?a.addEventListener("change",M):a.removeEventListener("change",M),localStorage.setItem("color-scheme",t())}),{baseStyle:z,dark:d,setDark:g,light:m,setLight:b,scheme:t,setScheme:n,isDark:s}},(0,o.getOwner)());
 //# sourceMappingURL=index.js.map

package/lib/theme/index.js.map

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

package/lib/tree/index.d.ts

@@ -1,101 +1,5 @@
-import { type Schema } from '../from-schema';
-import type { BasicConfig, CustomElement } from '..';
-export interface TreeBaseProp {
-    /** 自定义类名 */
-    class?: string;
-    /** 自定义样式表 */
-    css?: string;
-    /** 尺寸
-     * @default 'normal'
-     */
-    size?: BasicConfig['size'];
-    /** 只读 */
-    readonly?: boolean;
-    /** 开启取消选中, 仅多选模式生效 */
-    toggle?: boolean;
-    /** 方向
-     * @default 'ltr'
-     */
-    direction?: 'rtl' | 'ltr';
-    /** 点击行时的回调函数 */
-    onRowClick?: (e: MouseEvent, key: string, item: TreeData) => void;
-    /** 双击行时的回调函数 */
-    onRowDoubleClick?: (e: MouseEvent, key: string, item: TreeData) => void;
-    /** 自定义渲染行 */
-    renderRow?: (item: TreeData, title: JSX.Element, subTitle?: JSX.Element) => JSX.Element[];
-    /** 开启此选项支持 `JSONSchema`
-     * @default false
-     */
-    fromSchema?: false;
-}
-interface TreeBaseProps extends TreeBaseProp {
-    /** 选中的值, 多选模式时为数组 */
-    value?: string;
-    /** 多选模式
-     * @default false
-     */
-    multiple?: false;
-    /** 选中的值发生修改时的回调函数, 多选模式时入参为数组 */
-    onChange?(key?: string, item?: TreeData): void;
-}
-interface TreeMultipleBaseProps extends TreeBaseProp {
-    /** 选中的值 */
-    value?: string[];
-    /** 多选模式
-     * @default true
-     */
-    multiple: true;
-    onChange?(key?: string[], item?: TreeData): void;
-}
-export interface TreeProps extends TreeBaseProps {
-    /** 数据源 */
-    data: TreeData[];
-}
-export interface TreeSchemaProps extends Omit<TreeBaseProps, 'fromSchema'> {
-    /** 开启此选项支持 `JSONSchema` */
-    fromSchema: true;
-    /** 数据源 */
-    data: Schema;
-}
-export interface TreeStringProps extends TreeBaseProps {
-    /** 数据源 */
-    data: string;
-}
-export interface TreeMultipleProps extends TreeMultipleBaseProps {
-    /** 数据源 */
-    data: TreeData[];
-}
-export interface TreeMultipleSchemaProps extends Omit<TreeMultipleBaseProps, 'fromSchema'> {
-    /** 开启此选项支持 `JSONSchema` */
-    fromSchema: true;
-    /** 数据源 */
-    data: Schema;
-}
-export interface TreeMultipleStringProps extends TreeMultipleBaseProps {
-    /** 数据源 */
-    data: string;
-}
+import './register';
+import type { TreeMultipleProps, TreeMultipleSchemaProps, TreeMultipleStringProps, TreeProps, TreeSchemaProps, TreeStringProps } from './type';
 declare function Tree(_: TreeProps | TreeMultipleProps | TreeMultipleSchemaProps | TreeSchemaProps | TreeMultipleStringProps | TreeStringProps): import("solid-js").JSX.Element;
-type CustomEvents = 'onChange' | 'onRowDoubleClick' | 'onRowClick';
-export type TreeElement = CustomElement<TreeProps, CustomEvents>;
-export type TreeSchemaElement = CustomElement<TreeSchemaProps, CustomEvents>;
-export type TreeStringElement = CustomElement<TreeStringProps, CustomEvents>;
-export type TreeMultipleElement = CustomElement<TreeMultipleProps, CustomEvents>;
-export type TreeMultipleSchemaElement = CustomElement<TreeMultipleSchemaProps, CustomEvents>;
-export type TreeMultipleStringElement = CustomElement<TreeMultipleStringProps, CustomEvents>;
-export interface TreeData<T = string> {
-    /** key(唯一值) */
-    key: T;
-    /** 属性 */
-    name?: string;
-    /** 标题 */
-    title?: string;
-    /** 副标题 */
-    subTitle?: string;
-    /** 详细描述 */
-    description?: string;
-    /** 子项 */
-    children?: TreeData<T>[];
-    [key: string | number | symbol]: T | string | number | symbol | boolean | TreeData<T>[] | undefined;
-}
+export * from './type';
 export default Tree;

package/lib/tree/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return g}});const e=require("solid-js/web"),t=require("solid-js"),l=u(require("@moneko/common/lib/isFunction")),n=u(require("@moneko/common/lib/isString")),i=u(require("@moneko/common/lib/passiveSupported")),o=require("@moneko/css"),r=require("solid-element"),a=require("./style"),s=u(require("../from-schema")),c=u(require("../theme"));function u(e){return e&&e.__esModule?e:{default:e}}const d=(0,e.template)("<li>"),m=(0,e.template)('<span class="title">'),v=(0,e.template)('<span class="sub-title">'),h=(0,e.template)("<style>"),p=(0,e.template)("<ul>");function f(r){let u;let f={small:6,normal:8,large:10},{baseStyle:g}=c.default,[y,$]=(0,t.createSignal)([]),[b,k]=(0,t.createSignal)([]),w=(0,t.createMemo)(()=>"rtl"===r.direction),C=(0,t.createMemo)(()=>void 0!==r.value&&null!==r.value?Array.isArray(r.value)?r.value:[r.value]:[]),_=Symbol("path"),E=Symbol("path-end");function S(e){let t=e.length;if(u&&t){let l=f[r.size||"normal"];for(let n=0;n<t;n++){let t=u.querySelectorAll(`li[data-path="${e[n]}"]`);if(t.length){let e=t[0].getBoundingClientRect(),i=e.height/2+l;if(t.length>1){let{bottom:o,height:r,top:a}=t[1].getBoundingClientRect();i=0===n?a-e.top:o-e.top-r/2+l,t[1].style.setProperty("--c","none")}else 0===n&&t[0].style.setProperty("--c","none");(1!==t.length||0!==n)&&t[0].style.setProperty("--line",`${Math.abs(i)}px`)}}}}return(0,t.createEffect)(()=>{let e=r.fromSchema?(0,s.default)(r.data):(0,n.default)(r.data)?function(e){let t=/[^\s|`│├└]/,l=e.trim().split("\n"),n=[{title:l[0],key:l[0]}];for(let e=1;e<l.length;e++){let i=l[e].search(t);if(-1===i)continue;let o={title:l[e].slice(i+3),depth:i};for(;n.length&&i<=(n[n.length-1].depth||0);)n.pop();if(!n.length)return[];let r=n[n.length-1];r.children||(r.children=[]),o.key=`${r.key}-${o.title}-${i}-${e}`,r.children.push(o),n.push(o)}return[n[0]]}(r.data):r.data;$([...new Set(function e(t,l=0){let n=t.length-1,i=t[n],o=t[0],r=[];for(let a=0,s=t.length;a<s;a++){let s=t[a],c=a===n;(0===a||c)&&(s[_]=o.key+(1===t.length?"":`>${i.key}`),c&&(s[E]=""),r.push(s[_])),s.children&&(r=r.concat(e(s.children,l+1)))}return r}(e))]),k(e)}),(0,t.createEffect)(()=>{let e=y(),l=setTimeout(()=>{clearTimeout(l),S(e)},0);e.length&&window.addEventListener("resize",S.bind(null,e),{passive:i.default}),(0,t.onCleanup)(()=>{clearTimeout(l),window.removeEventListener("resize",S.bind(null,y()),!1)})}),(0,t.onMount)(()=>{let e=setTimeout(()=>{clearTimeout(e),S(y())},32)}),[(()=>{let t=h();return(0,e.insert)(t,g,null),(0,e.insert)(t,a.style,null),(0,e.insert)(t,()=>(0,o.css)(r.css),null),t})(),(()=>{let n=p(),i=u;return"function"==typeof i?(0,e.use)(i,n):u=n,(0,e.insert)(n,()=>(function n(i,a=0){return(0,e.createComponent)(t.For,{each:i,children:t=>{let{name:i,title:s,subTitle:c,key:u,children:h}=t,p=i!==s&&i?[i,s]:[s];return[(()=>{let n=d();return n.$$dblclick=e=>r.onRowDoubleClick?.(e,u,t),n.$$click=e=>{(function(e,t){if(!r.readonly&&(0,l.default)(r.onChange)){let l=[...C()];if(r.multiple){let t=l.indexOf(e);-1===t?l.push(e):l.splice(t,1)}else l=r.toggle&&l[0]===e?[]:[e];r.onChange(r.multiple?l:l[0],t)}})(t.key,t),r.onRowClick?.(e,t.key,t)},(0,e.insert)(n,()=>(function(e,t,l){let n=r.renderRow?.(e,t,l)||[t,l];return w()?n.reverse():n})(t,(()=>{let t=m();return(0,e.insert)(t,()=>(w()?p.reverse():p).join(": ")),t})(),c&&(()=>{let t=v();return(0,e.insert)(t,c),t})())),(0,e.effect)(i=>{let s=(0,o.cx)("row",C().includes(u)&&"active",(r.readonly||!(0,l.default)(r.onChange))&&"non"),c=a?{"--depth":`${2*a}em`}:void 0,d=t[E],m=t[_];return s!==i._v$&&(0,e.className)(n,i._v$=s),i._v$2=(0,e.style)(n,c,i._v$2),d!==i._v$3&&(0,e.setAttribute)(n,"data-path-end",i._v$3=d),m!==i._v$4&&(0,e.setAttribute)(n,"data-path",i._v$4=m),i},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),n})(),(0,e.memo)(()=>h?n(h,a+1):null)]}})})(b())),(0,e.effect)(()=>(0,e.className)(n,(0,o.cx)("tree",r.size,r.class,w()&&"rtl"))),n})()]}(0,r.customElement)("n-tree",{fromSchema:void 0,size:void 0,data:[],multiple:void 0,value:void 0,onChange:void 0,class:void 0,css:void 0,readonly:void 0,toggle:void 0,direction:void 0,onRowClick:void 0,onRowDoubleClick:void 0,renderRow:void 0},(e,l)=>{let n=l.element,i=(0,t.mergeProps)({data:n.data,value:n.value,multiple:n.multiple,fromSchema:n.fromSchema,size:n.size,css:n.css,readonly:n.readonly,toggle:n.toggle,direction:n.direction,onChange(e,t){n.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))},onRowClick(e,t,l){n.dispatchEvent(new CustomEvent("rowclick",{detail:[e,t,l]}))},onRowDoubleClick(e,t,l){n.dispatchEvent(new CustomEvent("rowdoubleclick",{detail:[e,t,l]}))}},e);return(0,t.createEffect)(()=>{n.removeAttribute("css"),n.removeAttribute("data")}),(0,t.createComponent)(f,i)});const g=f;(0,e.delegateEvents)(["click","dblclick"]);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return m}});const e=require("solid-js/web"),t=require("solid-js"),l=u(require("@moneko/common/lib/frameCallback")),n=u(require("@moneko/common/lib/isFunction")),r=u(require("@moneko/common/lib/isString")),i=require("@moneko/css");require("./register");const o=require("./style"),a=u(require("../from-schema")),c=u(require("../theme"));function u(e){return e&&e.__esModule?e:{default:e}}!function(e,t){Object.keys(e).forEach(function(l){"default"===l||Object.prototype.hasOwnProperty.call(t,l)||Object.defineProperty(t,l,{enumerable:!0,get:function(){return e[l]}})})}(require("./type"),exports);const s=(0,e.template)("<li>"),d=(0,e.template)('<span class="title">'),f=(0,e.template)('<span class="sub-title">'),h=(0,e.template)("<style>"),p=(0,e.template)("<ul>"),m=function(u){let m;let y={small:6,normal:8,large:10},{baseStyle:g}=c.default,[v,$]=(0,t.createSignal)([]),[b,k]=(0,t.createSignal)([]),_=(0,t.createMemo)(()=>"rtl"===u.direction),q=(0,t.createMemo)(()=>void 0!==u.value&&null!==u.value?Array.isArray(u.value)?u.value:[u.value]:[]),C=Symbol("path"),j=Symbol("path-end");return(0,t.createEffect)(()=>{let e=u.fromSchema?(0,a.default)(u.data):(0,r.default)(u.data)?function(e){let t=/[^\s|`│├└]/,l=e.trim().split("\n"),n=[{title:l[0],key:l[0]}];for(let e=1;e<l.length;e++){let r=l[e].search(t);if(-1===r)continue;let i={title:l[e].slice(r+3),depth:r};for(;n.length&&r<=(n[n.length-1].depth||0);)n.pop();if(!n.length)return[];let o=n[n.length-1];o.children||(o.children=[]),i.key=`${o.key}-${i.title}-${r}-${e}`,o.children.push(i),n.push(i)}return[n[0]]}(u.data):u.data;$([...new Set(function e(t,l=0){let n=t.length-1,r=t[n],i=t[0],o=[];for(let a=0,c=t.length;a<c;a++){let c=t[a],u=a===n;(0===a||u)&&(c[C]=i.key+(1===t.length?"":`>${r.key}`),u&&(c[j]=""),o.push(c[C])),c.children&&(o=o.concat(e(c.children,l+1)))}return o}(e))]),k(e)}),(0,t.createEffect)(()=>{let e=v(),t=u.size||"normal";(0,l.default)(()=>{let l=e.length;if(m&&l){let n=y[t];for(let t=0;t<l;t++){let l=m.querySelectorAll(`li[data-path="${e[t]}"]`);if(l.length){let e=l[0].getBoundingClientRect(),r=e.height/2+n;if(l.length>1){let{bottom:i,height:o,top:a}=l[1].getBoundingClientRect();r=0===t?a-e.top:i-e.top-o/2+n,l[1].style.setProperty("--c","none")}else 0===t&&l[0].style.setProperty("--c","none");(1!==l.length||0!==t)&&l[0].style.setProperty("--line",`${Math.abs(r)}px`)}}}})}),[(()=>{let t=h();return(0,e.insert)(t,g,null),(0,e.insert)(t,o.style,null),(0,e.insert)(t,()=>(0,i.css)(u.css),null),t})(),(()=>{let l=p(),r=m;return"function"==typeof r?(0,e.use)(r,l):m=l,(0,e.insert)(l,()=>(function l(r,o=0){return(0,e.createComponent)(t.For,{each:r,children:t=>{let{name:r,title:a,subTitle:c,key:h,children:p}=t,m=r!==a&&r?[r,a]:[a];return[(()=>{let l=s();return l.$$dblclick=e=>u.onRowDoubleClick?.(e,h,t),l.$$click=e=>{(function(e,t){if(!u.readonly&&(0,n.default)(u.onChange)){let l=[...q()];if(u.multiple){let t=l.indexOf(e);-1===t?l.push(e):l.splice(t,1)}else l=u.toggle&&l[0]===e?[]:[e];u.onChange(u.multiple?l:l[0],t)}})(t.key,t),u.onRowClick?.(e,t.key,t)},(0,e.insert)(l,()=>(function(e,t,l){let n=u.renderRow?.(e,t,l)||[t,l];return _()?n.reverse():n})(t,(()=>{let t=d();return(0,e.insert)(t,()=>(_()?m.reverse():m).join(": ")),t})(),c&&(()=>{let t=f();return(0,e.insert)(t,c),t})())),(0,e.effect)(r=>{let a=(0,i.cx)("row",q().includes(h)&&"active",(u.readonly||!(0,n.default)(u.onChange))&&"non"),c=o?{"--depth":`${2*o}em`}:void 0,s=t[j],d=t[C];return a!==r._v$&&(0,e.className)(l,r._v$=a),r._v$2=(0,e.style)(l,c,r._v$2),s!==r._v$3&&(0,e.setAttribute)(l,"data-path-end",r._v$3=s),d!==r._v$4&&(0,e.setAttribute)(l,"data-path",r._v$4=d),r},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),l})(),(0,e.memo)(()=>p?l(p,o+1):null)]}})})(b())),(0,e.effect)(()=>(0,e.className)(l,(0,i.cx)("tree",u.size,u.class,_()&&"rtl"))),l})()]};(0,e.delegateEvents)(["click","dblclick"]);
 //# sourceMappingURL=index.js.map

package/lib/tree/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/tree/index.tsx"],"sourcesContent":["import {\n  For,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n} from 'solid-js';\nimport { isFunction, isString, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport schema, { type Schema } from '../from-schema';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface TreeBaseProp {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 只读 */\n  readonly?: boolean;\n  /** 开启取消选中, 仅多选模式生效 */\n  toggle?: boolean;\n  /** 方向\n   * @default 'ltr'\n   */\n  direction?: 'rtl' | 'ltr';\n  /** 点击行时的回调函数 */\n  onRowClick?: (e: MouseEvent, key: string, item: TreeData) => void;\n  /** 双击行时的回调函数 */\n  onRowDoubleClick?: (e: MouseEvent, key: string, item: TreeData) => void;\n  /** 自定义渲染行 */\n  renderRow?: (item: TreeData, title: JSX.Element, subTitle?: JSX.Element) => JSX.Element[];\n  /** 开启此选项支持 `JSONSchema`\n   * @default false\n   */\n  fromSchema?: false;\n}\n\ninterface TreeBaseProps extends TreeBaseProp {\n  /** 选中的值, 多选模式时为数组 */\n  value?: string;\n  /** 多选模式\n   * @default false\n   */\n  multiple?: false;\n  /** 选中的值发生修改时的回调函数, 多选模式时入参为数组 */\n  onChange?(key?: string, item?: TreeData): void;\n}\ninterface TreeMultipleBaseProps extends TreeBaseProp {\n  /** 选中的值 */\n  value?: string[];\n  /** 多选模式\n   * @default true\n   */\n  multiple: true;\n  onChange?(key?: string[], item?: TreeData): void;\n}\nexport interface TreeProps extends TreeBaseProps {\n  /** 数据源 */\n  data: TreeData[];\n}\nexport interface TreeSchemaProps extends Omit<TreeBaseProps, 'fromSchema'> {\n  /** 开启此选项支持 `JSONSchema` */\n  fromSchema: true;\n  /** 数据源 */\n  data: Schema;\n}\nexport interface TreeStringProps extends TreeBaseProps {\n  /** 数据源 */\n  data: string;\n}\nexport interface TreeMultipleProps extends TreeMultipleBaseProps {\n  /** 数据源 */\n  data: TreeData[];\n}\nexport interface TreeMultipleSchemaProps extends Omit<TreeMultipleBaseProps, 'fromSchema'> {\n  /** 开启此选项支持 `JSONSchema` */\n  fromSchema: true;\n  /** 数据源 */\n  data: Schema;\n}\nexport interface TreeMultipleStringProps extends TreeMultipleBaseProps {\n  /** 数据源 */\n  data: string;\n}\n\nfunction Tree(\n  _:\n    | TreeProps\n    | TreeMultipleProps\n    | TreeMultipleSchemaProps\n    | TreeSchemaProps\n    | TreeMultipleStringProps\n    | TreeStringProps,\n) {\n  const sizeCnt = {\n    small: 6,\n    normal: 8,\n    large: 10,\n  };\n  const { baseStyle } = theme;\n\n  let el: HTMLUListElement | undefined;\n  const [lines, setLines] = createSignal<string[]>([]);\n  const [treeData, setTreeData] = createSignal<TreeData[]>([]);\n  const rtl = createMemo(() => _.direction === 'rtl');\n  const current = createMemo(() => {\n    if (_.value !== void 0 && _.value !== null) {\n      return Array.isArray(_.value) ? _.value : [_.value];\n    }\n    return [];\n  });\n  const path = Symbol('path');\n  const pathEnd = Symbol('path-end');\n\n  function countLineLen(tree: TreeData[], depth = 0) {\n    const lastIdx = tree.length - 1;\n    const last = tree[lastIdx];\n    const frist = tree[0];\n    let line: string[] = [];\n\n    for (let i = 0, len = tree.length; i < len; i++) {\n      const item = tree[i],\n        isLast = i === lastIdx;\n\n      if (i === 0 || isLast) {\n        item[path] = frist.key + (tree.length === 1 ? '' : `>${last.key}`);\n        if (isLast) {\n          item[pathEnd] = '';\n        }\n        line.push(item[path]);\n      }\n      if (item.children) {\n        line = line.concat(countLineLen(item.children, depth + 1));\n      }\n    }\n    return line;\n  }\n\n  function parseTree(str: string): TreeData[] {\n    const depthRegex = /[^\\s|`│├└]/;\n    const rows = str.trim().split('\\n');\n    const stack: TreeStack[] = [{ title: rows[0], key: rows[0] }];\n\n    for (let i = 1; i < rows.length; i++) {\n      const depth = rows[i].search(depthRegex);\n\n      if (depth === -1) {\n        continue;\n      }\n      const node: Partial<TreeData> = {\n        title: rows[i].slice(depth + 3),\n        depth,\n      };\n\n      while (stack.length && depth <= (stack[stack.length - 1].depth || 0)) {\n        stack.pop();\n      }\n      if (!stack.length) {\n        return [];\n      }\n      const parent = stack[stack.length - 1];\n\n      if (!parent.children) {\n        parent.children = [];\n      }\n      node.key = `${parent.key}-${node.title}-${depth}-${i}`;\n      parent.children.push(node as TreeData);\n      stack.push(node as TreeData);\n    }\n\n    return [stack[0]];\n  }\n\n  function handleChange(key: string, item: TreeData) {\n    if (!_.readonly && isFunction(_.onChange)) {\n      let _current = [...current()];\n\n      if (_.multiple) {\n        const idx = _current.indexOf(key);\n\n        if (idx === -1) {\n          _current.push(key);\n        } else {\n          _current.splice(idx, 1);\n        }\n      } else if (_.toggle && _current[0] === key) {\n        _current = [];\n      } else {\n        _current = [key];\n      }\n      _.onChange(_.multiple ? _current : _current[0], item);\n    }\n  }\n  function handleClick(e: MouseEvent, item: TreeData) {\n    handleChange(item.key, item);\n    _.onRowClick?.(e, item.key as never, item as TreeData<never>);\n  }\n  function renderItem(item: TreeData, title: JSX.Element, subTitle?: JSX.Element): JSX.Element[] {\n    const row = _.renderRow?.(item, title, subTitle) || [title, subTitle];\n\n    return rtl() ? row.reverse() : row;\n  }\n\n  function renderTreeRow(list: TreeData[], depth = 0): JSX.Element {\n    return (\n      <For each={list}>\n        {(item) => {\n          const { name, title, subTitle, key, children } = item;\n          const _title = name === title || !name ? [title] : [name, title];\n\n          return (\n            <>\n              <li\n                class={cx(\n                  'row',\n                  current().includes(key) && 'active',\n                  (_.readonly || !isFunction(_.onChange)) && 'non',\n                )}\n                onClick={(e) => handleClick(e, item)}\n                onDblClick={(e) => _.onRowDoubleClick?.(e, key, item)}\n                style={depth ? { '--depth': `${depth * 2}em` } : void 0}\n                data-path-end={item[pathEnd]}\n                data-path={item[path]}\n              >\n                {renderItem(\n                  item,\n                  <span class=\"title\">{(rtl() ? _title.reverse() : _title).join(': ')}</span>,\n                  subTitle && <span class=\"sub-title\">{subTitle}</span>,\n                )}\n              </li>\n              {children ? renderTreeRow(children, depth + 1) : null}\n            </>\n          );\n        }}\n      </For>\n    );\n  }\n  function updateLine(list: string[]) {\n    const len = list.length;\n\n    if (el && len) {\n      const prefixSize = sizeCnt[_.size || 'normal'];\n\n      for (let i = 0; i < len; i++) {\n        const al: NodeListOf<HTMLLIElement> = el.querySelectorAll(`li[data-path=\"${list[i]}\"]`);\n\n        if (al.length) {\n          const rect1 = al[0].getBoundingClientRect();\n          let sideLen = rect1.height / 2 + prefixSize;\n\n          if (al.length > 1) {\n            const { bottom, height, top } = al[1].getBoundingClientRect();\n\n            sideLen = i === 0 ? top - rect1.top : bottom - rect1.top - height / 2 + prefixSize;\n            al[1].style.setProperty('--c', 'none');\n          } else if (i === 0) {\n            al[0].style.setProperty('--c', 'none');\n          }\n          if (al.length !== 1 || i !== 0) {\n            al[0].style.setProperty('--line', `${Math.abs(sideLen)}px`);\n          }\n        }\n      }\n    }\n  }\n  createEffect(() => {\n    const data = _.fromSchema ? schema(_.data) : isString(_.data) ? parseTree(_.data) : _.data;\n\n    setLines([...new Set(countLineLen(data))]);\n    setTreeData(data);\n  });\n\n  createEffect(() => {\n    const line = lines();\n\n    const timer = setTimeout(() => {\n      clearTimeout(timer);\n      updateLine(line);\n    }, 0);\n\n    if (line.length) {\n      window.addEventListener('resize', updateLine.bind(null, line), {\n        passive: passiveSupported,\n      });\n    }\n    onCleanup(() => {\n      clearTimeout(timer);\n      window.removeEventListener('resize', updateLine.bind(null, lines()), false);\n    });\n  });\n  onMount(() => {\n    const timer = setTimeout(() => {\n      clearTimeout(timer);\n      updateLine(lines());\n    }, 32);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(_.css)}\n      </style>\n      <ul ref={el} class={cx('tree', _.size, _.class, rtl() && 'rtl')}>\n        {renderTreeRow(treeData())}\n      </ul>\n    </>\n  );\n}\ntype CustomEvents = 'onChange' | 'onRowDoubleClick' | 'onRowClick';\n\nexport type TreeElement = CustomElement<TreeProps, CustomEvents>;\nexport type TreeSchemaElement = CustomElement<TreeSchemaProps, CustomEvents>;\nexport type TreeStringElement = CustomElement<TreeStringProps, CustomEvents>;\nexport type TreeMultipleElement = CustomElement<TreeMultipleProps, CustomEvents>;\nexport type TreeMultipleSchemaElement = CustomElement<TreeMultipleSchemaProps, CustomEvents>;\nexport type TreeMultipleStringElement = CustomElement<TreeMultipleStringProps, CustomEvents>;\n\ninterface TreeStack extends TreeData {\n  /** 深度 */\n  depth?: number;\n}\n\nexport interface TreeData<T = string> {\n  /** key(唯一值) */\n  key: T;\n  /** 属性 */\n  name?: string;\n  /** 标题 */\n  title?: string;\n  /** 副标题 */\n  subTitle?: string;\n  /** 详细描述 */\n  description?: string;\n  /** 子项 */\n  children?: TreeData<T>[];\n  [key: string | number | symbol]:\n    | T\n    | string\n    | number\n    | symbol\n    | boolean\n    | TreeData<T>[]\n    | undefined;\n}\n\ncustomElement<TreeProps>(\n  'n-tree',\n  {\n    fromSchema: void 0,\n    size: void 0,\n    data: [],\n    multiple: void 0,\n    value: void 0,\n    onChange: void 0,\n    class: void 0,\n    css: void 0,\n    readonly: void 0,\n    toggle: void 0,\n    direction: void 0,\n    onRowClick: void 0,\n    onRowDoubleClick: void 0,\n    renderRow: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        data: el.data,\n        value: el.value,\n        multiple: el.multiple,\n        fromSchema: el.fromSchema,\n        size: el.size,\n        css: el.css,\n        readonly: el.readonly,\n        toggle: el.toggle,\n        direction: el.direction,\n        onChange(key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [key, item],\n            }),\n          );\n        },\n        onRowClick(e: MouseEvent, key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('rowclick', {\n              detail: [e, key, item],\n            }),\n          );\n        },\n        onRowDoubleClick(e: MouseEvent, key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('rowdoubleclick', {\n              detail: [e, key, item],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n      el.removeAttribute('data');\n    });\n    return createComponent(Tree, props);\n  },\n);\nexport default Tree;\n"],"names":["Tree","_","el","sizeCnt","small","normal","large","baseStyle","theme","lines","setLines","createSignal","treeData","setTreeData","rtl","createMemo","direction","current","value","Array","isArray","path","Symbol","pathEnd","updateLine","list","len","length","prefixSize","size","i","al","querySelectorAll","rect1","getBoundingClientRect","sideLen","height","bottom","top","style","setProperty","Math","abs","createEffect","data","fromSchema","schema","isString","parseTree","str","depthRegex","rows","trim","split","stack","title","key","depth","search","node","slice","pop","parent","children","push","Set","countLineLen","tree","lastIdx","last","frist","line","item","isLast","concat","timer","setTimeout","clearTimeout","window","addEventListener","bind","passive","passiveSupported","onCleanup","removeEventListener","onMount","css","renderTreeRow","For","name","subTitle","_title","e","onRowDoubleClick","handleChange","readonly","isFunction","onChange","_current","multiple","idx","indexOf","splice","toggle","onRowClick","renderItem","row","renderRow","reverse","join","cx","includes","class","customElement","opt","element","props","mergeProps","dispatchEvent","CustomEvent","detail","removeAttribute","createComponent"],"mappings":"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"}
+{"version":3,"sources":["../../components/tree/index.tsx"],"sourcesContent":["import { For, createEffect, createMemo, createSignal } from 'solid-js';\nimport { frameCallback, isFunction, isString } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport './register';\nimport { style } from './style';\nimport schema from '../from-schema';\nimport theme from '../theme';\nimport type {\n  TreeData,\n  TreeMultipleProps,\n  TreeMultipleSchemaProps,\n  TreeMultipleStringProps,\n  TreeProps,\n  TreeSchemaProps,\n  TreeStack,\n  TreeStringProps,\n} from './type';\n\nfunction Tree(\n  _:\n    | TreeProps\n    | TreeMultipleProps\n    | TreeMultipleSchemaProps\n    | TreeSchemaProps\n    | TreeMultipleStringProps\n    | TreeStringProps,\n) {\n  const sizeCnt = {\n    small: 6,\n    normal: 8,\n    large: 10,\n  };\n  const { baseStyle } = theme;\n  let el: HTMLUListElement | undefined;\n  const [lines, setLines] = createSignal<string[]>([]);\n  const [treeData, setTreeData] = createSignal<TreeData[]>([]);\n  const rtl = createMemo(() => _.direction === 'rtl');\n  const current = createMemo(() => {\n    if (_.value !== void 0 && _.value !== null) {\n      return Array.isArray(_.value) ? _.value : [_.value];\n    }\n    return [];\n  });\n  const path = Symbol('path');\n  const pathEnd = Symbol('path-end');\n\n  function countLineLen(tree: TreeData[], depth = 0) {\n    const lastIdx = tree.length - 1;\n    const last = tree[lastIdx];\n    const frist = tree[0];\n    let line: string[] = [];\n\n    for (let i = 0, len = tree.length; i < len; i++) {\n      const item = tree[i],\n        isLast = i === lastIdx;\n\n      if (i === 0 || isLast) {\n        item[path] = frist.key + (tree.length === 1 ? '' : `>${last.key}`);\n        if (isLast) {\n          item[pathEnd] = '';\n        }\n        line.push(item[path]);\n      }\n      if (item.children) {\n        line = line.concat(countLineLen(item.children, depth + 1));\n      }\n    }\n    return line;\n  }\n\n  function parseTree(str: string): TreeData[] {\n    const depthRegex = /[^\\s|`│├└]/;\n    const rows = str.trim().split('\\n');\n    const stack: TreeStack[] = [{ title: rows[0], key: rows[0] }];\n\n    for (let i = 1; i < rows.length; i++) {\n      const depth = rows[i].search(depthRegex);\n\n      if (depth === -1) {\n        continue;\n      }\n      const node: Partial<TreeData> = {\n        title: rows[i].slice(depth + 3),\n        depth,\n      };\n\n      while (stack.length && depth <= (stack[stack.length - 1].depth || 0)) {\n        stack.pop();\n      }\n      if (!stack.length) {\n        return [];\n      }\n      const parent = stack[stack.length - 1];\n\n      if (!parent.children) {\n        parent.children = [];\n      }\n      node.key = `${parent.key}-${node.title}-${depth}-${i}`;\n      parent.children.push(node as TreeData);\n      stack.push(node as TreeData);\n    }\n\n    return [stack[0]];\n  }\n\n  function handleChange(key: string, item: TreeData) {\n    if (!_.readonly && isFunction(_.onChange)) {\n      let _current = [...current()];\n\n      if (_.multiple) {\n        const idx = _current.indexOf(key);\n\n        if (idx === -1) {\n          _current.push(key);\n        } else {\n          _current.splice(idx, 1);\n        }\n      } else if (_.toggle && _current[0] === key) {\n        _current = [];\n      } else {\n        _current = [key];\n      }\n      _.onChange(_.multiple ? _current : _current[0], item);\n    }\n  }\n  function handleClick(e: MouseEvent, item: TreeData) {\n    handleChange(item.key, item);\n    _.onRowClick?.(e, item.key as never, item as TreeData<never>);\n  }\n  function renderItem(item: TreeData, title: JSX.Element, subTitle?: JSX.Element): JSX.Element[] {\n    const row = _.renderRow?.(item, title, subTitle) || [title, subTitle];\n\n    return rtl() ? row.reverse() : row;\n  }\n\n  function renderTreeRow(list: TreeData[], depth = 0): JSX.Element {\n    return (\n      <For each={list}>\n        {(item) => {\n          const { name, title, subTitle, key, children } = item;\n          const _title = name === title || !name ? [title] : [name, title];\n\n          return (\n            <>\n              <li\n                class={cx(\n                  'row',\n                  current().includes(key) && 'active',\n                  (_.readonly || !isFunction(_.onChange)) && 'non',\n                )}\n                onClick={(e) => handleClick(e, item)}\n                onDblClick={(e) => _.onRowDoubleClick?.(e, key, item)}\n                style={depth ? { '--depth': `${depth * 2}em` } : void 0}\n                data-path-end={item[pathEnd]}\n                data-path={item[path]}\n              >\n                {renderItem(\n                  item,\n                  <span class=\"title\">{(rtl() ? _title.reverse() : _title).join(': ')}</span>,\n                  subTitle && <span class=\"sub-title\">{subTitle}</span>,\n                )}\n              </li>\n              {children ? renderTreeRow(children, depth + 1) : null}\n            </>\n          );\n        }}\n      </For>\n    );\n  }\n  createEffect(() => {\n    const data = _.fromSchema ? schema(_.data) : isString(_.data) ? parseTree(_.data) : _.data;\n\n    setLines([...new Set(countLineLen(data))]);\n    setTreeData(data);\n  });\n\n  createEffect(() => {\n    const list = lines();\n    const size = _.size || 'normal';\n\n    frameCallback(() => {\n      const len = list.length;\n\n      if (el && len) {\n        const prefixSize = sizeCnt[size];\n\n        for (let i = 0; i < len; i++) {\n          const al: NodeListOf<HTMLLIElement> = el.querySelectorAll(`li[data-path=\"${list[i]}\"]`);\n\n          if (al.length) {\n            const rect1 = al[0].getBoundingClientRect();\n            let sideLen = rect1.height / 2 + prefixSize;\n\n            if (al.length > 1) {\n              const { bottom, height, top } = al[1].getBoundingClientRect();\n\n              sideLen = i === 0 ? top - rect1.top : bottom - rect1.top - height / 2 + prefixSize;\n              al[1].style.setProperty('--c', 'none');\n            } else if (i === 0) {\n              al[0].style.setProperty('--c', 'none');\n            }\n            if (al.length !== 1 || i !== 0) {\n              al[0].style.setProperty('--line', `${Math.abs(sideLen)}px`);\n            }\n          }\n        }\n      }\n    });\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(_.css)}\n      </style>\n      <ul ref={el} class={cx('tree', _.size, _.class, rtl() && 'rtl')}>\n        {renderTreeRow(treeData())}\n      </ul>\n    </>\n  );\n}\n\nexport * from './type';\nexport default Tree;\n"],"names":["_","el","sizeCnt","small","normal","large","baseStyle","theme","lines","setLines","createSignal","treeData","setTreeData","rtl","createMemo","direction","current","value","Array","isArray","path","Symbol","pathEnd","createEffect","data","fromSchema","schema","isString","parseTree","str","depthRegex","rows","trim","split","stack","title","key","i","length","depth","search","node","slice","pop","parent","children","push","Set","countLineLen","tree","lastIdx","last","frist","line","len","item","isLast","concat","list","size","frameCallback","prefixSize","al","querySelectorAll","rect1","getBoundingClientRect","sideLen","height","bottom","top","style","setProperty","Math","abs","css","renderTreeRow","For","name","subTitle","_title","e","onRowDoubleClick","handleChange","readonly","isFunction","onChange","_current","multiple","idx","indexOf","splice","toggle","onRowClick","renderItem","row","renderRow","reverse","join","cx","includes","class"],"mappings":"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"}

package/lib/tree/register.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tree/register.js

@@ -0,0 +1,2 @@
+"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0});const o=require("solid-js"),t=require("solid-element"),i=(e=require("./index"))&&e.__esModule?e:{default:e};(0,t.customElement)("n-tree",{fromSchema:void 0,size:void 0,data:[],multiple:void 0,value:void 0,onChange:void 0,class:void 0,css:void 0,readonly:void 0,toggle:void 0,direction:void 0,onRowClick:void 0,onRowDoubleClick:void 0,renderRow:void 0},(e,t)=>{let d=t.element,l=(0,o.mergeProps)({data:d.data,value:d.value,multiple:d.multiple,fromSchema:d.fromSchema,size:d.size,css:d.css,readonly:d.readonly,toggle:d.toggle,direction:d.direction,onChange(e,o){d.dispatchEvent(new CustomEvent("change",{detail:[e,o]}))},onRowClick(e,o,t){d.dispatchEvent(new CustomEvent("rowclick",{detail:[e,o,t]}))},onRowDoubleClick(e,o,t){d.dispatchEvent(new CustomEvent("rowdoubleclick",{detail:[e,o,t]}))}},e);return(0,o.createEffect)(()=>{d.removeAttribute("css"),d.removeAttribute("data")}),(0,o.createComponent)(i.default,l)});
+//# sourceMappingURL=register.js.map

package/lib/tree/register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../components/tree/register.ts"],"sourcesContent":["import { createComponent, createEffect, mergeProps } from 'solid-js';\nimport { customElement } from 'solid-element';\nimport Tree from './index';\nimport type { TreeData, TreeProps } from './type';\n\ncustomElement<TreeProps>(\n  'n-tree',\n  {\n    fromSchema: void 0,\n    size: void 0,\n    data: [],\n    multiple: void 0,\n    value: void 0,\n    onChange: void 0,\n    class: void 0,\n    css: void 0,\n    readonly: void 0,\n    toggle: void 0,\n    direction: void 0,\n    onRowClick: void 0,\n    onRowDoubleClick: void 0,\n    renderRow: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        data: el.data,\n        value: el.value,\n        multiple: el.multiple,\n        fromSchema: el.fromSchema,\n        size: el.size,\n        css: el.css,\n        readonly: el.readonly,\n        toggle: el.toggle,\n        direction: el.direction,\n        onChange(key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [key, item],\n            }),\n          );\n        },\n        onRowClick(e: MouseEvent, key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('rowclick', {\n              detail: [e, key, item],\n            }),\n          );\n        },\n        onRowDoubleClick(e: MouseEvent, key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('rowdoubleclick', {\n              detail: [e, key, item],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n      el.removeAttribute('data');\n    });\n    return createComponent(Tree, props);\n  },\n);\n"],"names":["customElement","fromSchema","size","data","multiple","value","onChange","class","css","readonly","toggle","direction","onRowClick","onRowDoubleClick","renderRow","_","opt","el","element","props","mergeProps","key","item","dispatchEvent","CustomEvent","detail","e","createEffect","removeAttribute","createComponent","Tree"],"mappings":"0FAA0D,sBAC5B,8BACb,wCAGjBA,GAAAA,eAAa,EACX,SACA,CACEC,WAAY,KAAK,EACjBC,KAAM,KAAK,EACXC,KAAM,EAAE,CACRC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,IAAK,KAAK,EACVC,SAAU,KAAK,EACfC,OAAQ,KAAK,EACbC,UAAW,KAAK,EAChBC,WAAY,KAAK,EACjBC,iBAAkB,KAAK,EACvBC,UAAW,KAAK,CAClB,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQC,GAAAA,YAAU,EACtB,CACEjB,KAAMc,EAAGd,IAAI,CACbE,MAAOY,EAAGZ,KAAK,CACfD,SAAUa,EAAGb,QAAQ,CACrBH,WAAYgB,EAAGhB,UAAU,CACzBC,KAAMe,EAAGf,IAAI,CACbM,IAAKS,EAAGT,GAAG,CACXC,SAAUQ,EAAGR,QAAQ,CACrBC,OAAQO,EAAGP,MAAM,CACjBC,UAAWM,EAAGN,SAAS,CACvBL,SAASe,CAAW,CAAEC,CAAc,EAClCL,EAAGM,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAACJ,EAAKC,EAAK,AACrB,GAEJ,EACAV,WAAWc,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACnDL,EAAGM,aAAa,CACd,IAAIC,YAAY,WAAY,CAC1BC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,EACAT,iBAAiBa,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACzDL,EAAGM,aAAa,CACd,IAAIC,YAAY,iBAAkB,CAChCC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,CACF,EACAP,GAOF,MAJAY,GAAAA,cAAY,EAAC,KACXV,EAAGW,eAAe,CAAC,OACnBX,EAAGW,eAAe,CAAC,OACrB,GACOC,GAAAA,iBAAe,EAACC,SAAI,CAAEX,EAC/B"}