neko-ui 2.9.2 → 2.9.4

package/es/select/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/select/index.tsx"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  onMount,\n  Show,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement, DropdownMultipleProps, DropdownProps, MenuOption } from '..';\nimport { clearAttribute, FieldName } from '../basic-config';\nimport Dropdown, { defaultProps } from '../dropdown';\nimport getOptions from '../get-options';\nimport { inline } from '../theme';\n\nimport { style } from './style';\n\nimport '../tag';\n\nfunction Select(props: SelectProps) {\n  const [local, other] = splitProps(props, [\n    'css',\n    'value',\n    'onChange',\n    'open',\n    'onOpenChange',\n    'label',\n    'prefixIcon',\n    'suffixIcon',\n    'placeholder',\n    'trigger',\n    'options',\n  ]);\n  let ref: HTMLInputElement | undefined;\n  let tagsRef: HTMLDivElement | undefined;\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const [x, setX] = createSignal<string>('');\n  const [options, setOptions] = createSignal<MenuOption[]>([]);\n  const [kv, setKv] = createSignal<Record<string, MenuOption | undefined>>({});\n\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, other.fieldNames));\n\n  function getKv(arr: MenuOption[], fieldDic: typeof FieldName) {\n    const optKv: Record<string, MenuOption> = {};\n\n    for (let i = 0, len = arr.length; i < len; i++) {\n      const item = arr[i];\n      const _options = item[fieldDic.options];\n\n      optKv[item[fieldDic.value]!] = item;\n      if (Array.isArray(_options)) {\n        Object.assign(optKv, getKv(_options as MenuOption[], fieldDic));\n      }\n      const _children = item[fieldDic.children];\n\n      optKv[item[fieldDic.value]!] = item;\n      if (Array.isArray(_children)) {\n        Object.assign(optKv, getKv(_children as MenuOption[], fieldDic));\n      }\n    }\n    return optKv;\n  }\n\n  createEffect(() => {\n    batch(() => {\n      const fieldDic = fieldNames();\n      const opts = getOptions(local.options, fieldDic);\n\n      setOptions(opts);\n      setKv(getKv(opts, fieldDic));\n    });\n  });\n\n  function openChange(next: boolean | null) {\n    if (!other.disabled) {\n      if (isFunction(local.onOpenChange)) {\n        local.onOpenChange(next);\n      }\n      if (local.open === void 0) {\n        setOpen(next);\n      }\n    }\n  }\n  function click(e: MouseEvent) {\n    if (\n      (e.target as Element | null)?.parentElement ===\n      (ref?.parentNode?.parentNode as Document | null)?.activeElement\n    ) {\n      openChange(!untrack(open));\n    }\n  }\n  function onChange(val: (string | number)[] | string | number | undefined, item?: MenuOption) {\n    if (local.value === void 0) {\n      setValue(val ? (Array.isArray(val) ? val : [val]) : []);\n    }\n    if (isFunction(local.onChange)) {\n      local.onChange(val, item);\n    }\n  }\n  function keyDown({ key }: { key: string }) {\n    switch (key) {\n      case 'ArrowDown':\n        // console.log(key);\n        // Object.keys(state.current.kv).indexOf(state.current.value)\n        break;\n      case 'ArrowUp':\n        break;\n      case 'Backspace':\n        if (other.multiple) {\n          const old = [...untrack(value)];\n\n          old.splice(-1, 1);\n          onChange(old, untrack(kv)[untrack(value).length - 1]);\n        } else {\n          onChange(void 0, untrack(kv)[untrack(value)[0]]);\n        }\n        break;\n      case 'Enter':\n        openChange(!untrack(open));\n        break;\n      case 'Escape':\n        openChange(false);\n        break;\n      default:\n        break;\n    }\n  }\n  function preventDefault(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n  }\n  function deleteValue(v: string | number, e: CustomEvent) {\n    preventDefault(e);\n    onChange(untrack(value).filter((old) => old !== v) as never, untrack(kv)[v]);\n  }\n  function focus(e: FocusEvent | MouseEvent) {\n    preventDefault(e);\n    openChange(true);\n  }\n  function blur(e: FocusEvent) {\n    preventDefault(e);\n    if (untrack(open)) {\n      openChange(false);\n    }\n  }\n\n  createEffect(() => {\n    batch(() => {\n      if (local.open !== untrack(open) && local.open !== void 0) {\n        setOpen(local.open);\n      }\n      if (local.value !== void 0 && local.value !== null) {\n        setValue(Array.isArray(local.value) ? local.value : [local.value]);\n      } else {\n        setValue([]);\n      }\n    });\n  });\n  onMount(() => {\n    if (local.value === void 0) {\n      const val = other.defaultValue;\n\n      setValue(val ? (Array.isArray(val) ? val : [val]) : []);\n    }\n  });\n  createEffect(() => {\n    if (local.label) {\n      setX(`.label {--x: ${tagsRef?.offsetLeft || 0}px; }`);\n    }\n  });\n  const prefix = createMemo(() =>\n    isFunction(local.prefixIcon) ? (local.prefixIcon() as JSX.Element) : local.prefixIcon,\n  );\n  const label = createMemo(() =>\n    isFunction(local.label) ? (local.label() as JSX.Element) : local.label,\n  );\n  const suffix = createMemo(() =>\n    isFunction(local.suffixIcon) ? (local.suffixIcon() as JSX.Element) : local.suffixIcon,\n  );\n\n  return (\n    <Dropdown\n      placement=\"left\"\n      css={style + x() + (local.css || '')}\n      trigger=\"none\"\n      items={options()}\n      value={value() as unknown as string}\n      onChange={onChange}\n      open={open()}\n      onOpenChange={openChange}\n      {...other}\n    >\n      <div\n        ref={ref}\n        class=\"select\"\n        tabindex={other.disabled ? -1 : 0}\n        onKeyDown={keyDown}\n        onFocus={focus}\n        onBlur={blur}\n        aria-disabled={other.disabled}\n      >\n        <Show when={prefix()}>\n          <span class=\"prefix\">{prefix()}</span>\n        </Show>\n        <Show when={label()}>\n          <label class=\"label\">{label()}</label>\n        </Show>\n        <div class=\"tags\" ref={tagsRef} onMouseDown={click}>\n          <Show\n            when={other.multiple}\n            fallback={\n              <Show\n                when={value().length}\n                fallback={\n                  <Show when={local.placeholder}>\n                    <span class=\"placeholder\">{local.placeholder}</span>\n                  </Show>\n                }\n              >\n                <span\n                  class=\"value\"\n                  classList={{\n                    opacity: !!open(),\n                  }}\n                >\n                  {kv()[value()[0]]?.[fieldNames().label] || value()[0]}\n                </span>\n              </Show>\n            }\n          >\n            <For\n              each={value()}\n              fallback={\n                <Show when={local.placeholder}>\n                  <span class=\"placeholder\">{local.placeholder}</span>\n                </Show>\n              }\n            >\n              {(v) => (\n                <n-tag\n                  class=\"tag\"\n                  classList={{\n                    opacity: !!open(),\n                  }}\n                  type={kv()[v]?.type || 'primary'}\n                  color={kv()[v]?.color}\n                  icon={kv()[v]?.icon}\n                  close-icon={!other.disabled && !kv()[v]?.disabled}\n                  onClose={deleteValue.bind(null, v)}\n                  disabled={other.disabled || kv()[v]?.disabled}\n                >\n                  {kv()[v]?.[fieldNames().label] || v}\n                </n-tag>\n              )}\n            </For>\n          </Show>\n        </div>\n        <Show when={suffix()}>\n          <span class=\"suffix\">{suffix()}</span>\n        </Show>\n      </div>\n    </Dropdown>\n  );\n}\n\n/** 通用API */\ninterface SelectBaseProps {\n  /** 占位符 */\n  placeholder?: string;\n  /** 选项 */\n  options?: (MenuOption | string | number)[];\n  /** 标题 */\n  label?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 前缀图标 */\n  prefixIcon?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 后缀图标 */\n  suffixIcon?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  style?: Record<string, string | number>;\n}\n\n/** 单选 */\nexport interface SelectProps extends Omit<DropdownProps, 'items' | 'children'>, SelectBaseProps {\n  /** 值 */\n  value?: string | number;\n}\n\n/** 多选 */\nexport interface SelectMultipleProps\n  extends Omit<DropdownMultipleProps, 'items' | 'children'>,\n    SelectBaseProps {\n  /** 值\n   * @default []\n   */\n  value?: (string | number)[];\n}\nexport type SelectElement = CustomElement<SelectProps, 'onChange' | 'onOpenChange'>;\nexport type SelectMultipleElement = CustomElement<SelectMultipleProps, 'onChange' | 'onOpenChange'>;\n\ncustomElement<SelectProps>(\n  'n-select',\n  {\n    ...defaultProps,\n    options: [],\n    label: void 0,\n    placeholder: '请选择',\n    dropdownMatchSelectWidth: true,\n    prefixIcon: void 0,\n    suffixIcon: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: string | number, item: MenuOption) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [key, item],\n            }),\n          );\n        },\n        onOpenChange(open: boolean | null) {\n          el.dispatchEvent(\n            new CustomEvent('openchange', {\n              detail: open,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['options', 'css', 'fieldNames']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Select {...props} />\n      </>\n    );\n  },\n);\nexport default Select;\n"],"names":["batch","createEffect","createMemo","createSignal","For","mergeProps","onMount","Show","splitProps","untrack","isFunction","customElement","clearAttribute","FieldName","Dropdown","defaultProps","getOptions","inline","style","Select","props","ref","tagsRef","local","other","open","setOpen","value","setValue","x","setX","options","setOptions","kv","setKv","fieldNames","Object","assign","openChange","next","disabled","onOpenChange","click","e","target","parentElement","parentNode","activeElement","onChange","val","item","Array","isArray","keyDown","key","multiple","old","splice","length","preventDefault","stopPropagation","deleteValue","v","filter","focus","blur","fieldDic","opts","getKv","arr","optKv","i","len","_options","_children","children","defaultValue","label","offsetLeft","prefix","prefixIcon","suffix","suffixIcon","css","placeholder","bind","type","color","icon","dropdownMatchSelectWidth","_","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
+{"version":3,"sources":["components/select/index.tsx"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  onMount,\n  Show,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement, DropdownMultipleProps, DropdownProps, MenuOption } from '..';\nimport { clearAttribute, FieldName } from '../basic-config';\nimport Dropdown, { defaultProps } from '../dropdown';\nimport getOptions from '../get-options';\nimport { inline } from '../theme';\n\nimport { style } from './style';\n\nimport '../tag';\n\nfunction Select(props: SelectProps) {\n  const [local, other] = splitProps(props, [\n    'css',\n    'value',\n    'onChange',\n    'open',\n    'onOpenChange',\n    'label',\n    'prefixIcon',\n    'suffixIcon',\n    'placeholder',\n    'trigger',\n    'options',\n  ]);\n  let ref: HTMLInputElement | undefined;\n  let tagsRef: HTMLDivElement | undefined;\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const [x, setX] = createSignal<string>('');\n  const [options, setOptions] = createSignal<MenuOption[]>([]);\n  const [kv, setKv] = createSignal<Record<string, MenuOption | undefined>>({});\n\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, other.fieldNames));\n\n  function getKv(arr: MenuOption[], fieldDic: typeof FieldName) {\n    const optKv: Record<string, MenuOption> = {};\n\n    for (let i = 0, len = arr.length; i < len; i++) {\n      const item = arr[i];\n      const _options = item[fieldDic.options];\n\n      optKv[item[fieldDic.value]!] = item;\n      if (Array.isArray(_options)) {\n        Object.assign(optKv, getKv(_options as MenuOption[], fieldDic));\n      }\n      const _children = item[fieldDic.children];\n\n      optKv[item[fieldDic.value]!] = item;\n      if (Array.isArray(_children)) {\n        Object.assign(optKv, getKv(_children as MenuOption[], fieldDic));\n      }\n    }\n    return optKv;\n  }\n\n  createEffect(() => {\n    batch(() => {\n      const fieldDic = fieldNames();\n      const opts = getOptions(local.options, fieldDic);\n\n      setOptions(opts);\n      setKv(getKv(opts, fieldDic));\n    });\n  });\n\n  function openChange(next: boolean | null) {\n    if (!other.disabled) {\n      if (isFunction(local.onOpenChange)) {\n        local.onOpenChange(next);\n      }\n      if (local.open === void 0) {\n        setOpen(next);\n      }\n    }\n  }\n  function click(e: MouseEvent) {\n    if (\n      (e.target as Element | null)?.parentElement ===\n      (ref?.parentNode?.parentNode as Document | null)?.activeElement\n    ) {\n      openChange(!untrack(open));\n    }\n  }\n  function onChange(val: (string | number)[] | string | number | undefined, item?: MenuOption) {\n    if (local.value === void 0) {\n      setValue(val ? (Array.isArray(val) ? val : [val]) : []);\n    }\n    if (isFunction(local.onChange)) {\n      local.onChange(val, item);\n    }\n  }\n  function keyDown({ key }: { key: string }) {\n    switch (key) {\n      case 'ArrowDown':\n        // console.log(key);\n        // Object.keys(state.current.kv).indexOf(state.current.value)\n        break;\n      case 'ArrowUp':\n        break;\n      case 'Backspace':\n        if (other.multiple) {\n          const old = [...untrack(value)];\n\n          old.splice(-1, 1);\n          onChange(old, untrack(kv)[untrack(value).length - 1]);\n        } else {\n          onChange(void 0, untrack(kv)[untrack(value)[0]]);\n        }\n        break;\n      case 'Enter':\n        openChange(!untrack(open));\n        break;\n      case 'Escape':\n        openChange(false);\n        break;\n      default:\n        break;\n    }\n  }\n  function preventDefault(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n  }\n  function deleteValue(v: string | number, e: CustomEvent) {\n    preventDefault(e);\n    onChange(untrack(value).filter((old) => old !== v) as never, untrack(kv)[v]);\n  }\n  function focus(e: FocusEvent | MouseEvent) {\n    preventDefault(e);\n    openChange(true);\n  }\n  function blur(e: FocusEvent) {\n    preventDefault(e);\n    if (untrack(open)) {\n      openChange(false);\n    }\n  }\n\n  createEffect(() => {\n    batch(() => {\n      if (local.open !== untrack(open) && local.open !== void 0) {\n        setOpen(local.open);\n      }\n      if (local.value !== void 0 && local.value !== null) {\n        setValue(Array.isArray(local.value) ? local.value : [local.value]);\n      } else {\n        setValue([]);\n      }\n    });\n  });\n  onMount(() => {\n    if (local.value === void 0) {\n      const val = other.defaultValue;\n\n      setValue(val ? (Array.isArray(val) ? val : [val]) : []);\n    }\n  });\n  createEffect(() => {\n    if (local.label) {\n      setX(`.label {--x: ${tagsRef?.offsetLeft || 0}px; }`);\n    }\n  });\n  const prefix = createMemo(() =>\n    isFunction(local.prefixIcon) ? (local.prefixIcon() as JSX.Element) : local.prefixIcon,\n  );\n  const label = createMemo(() =>\n    isFunction(local.label) ? (local.label() as JSX.Element) : local.label,\n  );\n  const suffix = createMemo(() =>\n    isFunction(local.suffixIcon) ? (local.suffixIcon() as JSX.Element) : local.suffixIcon,\n  );\n\n  return (\n    <Dropdown\n      placement=\"left\"\n      css={style + x() + (local.css || '')}\n      trigger=\"none\"\n      items={options()}\n      value={value() as unknown as string}\n      onChange={onChange}\n      open={open()}\n      onOpenChange={openChange}\n      {...other}\n    >\n      <div\n        ref={ref}\n        class=\"select\"\n        tabindex={other.disabled ? -1 : 0}\n        onKeyDown={keyDown}\n        onFocus={focus}\n        onBlur={blur}\n        aria-disabled={other.disabled}\n      >\n        <Show when={prefix()}>\n          <span class=\"prefix\">{prefix()}</span>\n        </Show>\n        <Show when={label()}>\n          <label class=\"label\">{label()}</label>\n        </Show>\n        <div class=\"tags\" ref={tagsRef} onMouseDown={click}>\n          <Show\n            when={other.multiple}\n            fallback={\n              <Show\n                when={value().length}\n                fallback={\n                  <Show when={local.placeholder}>\n                    <span class=\"placeholder\">{local.placeholder}</span>\n                  </Show>\n                }\n              >\n                <span\n                  class=\"value\"\n                  classList={{\n                    opacity: !!open(),\n                  }}\n                >\n                  {kv()[value()[0]]?.[fieldNames().label] || value()[0]}\n                </span>\n              </Show>\n            }\n          >\n            <For\n              each={value()}\n              fallback={\n                <Show when={local.placeholder}>\n                  <span class=\"placeholder\">{local.placeholder}</span>\n                </Show>\n              }\n            >\n              {(v) => (\n                <n-tag\n                  class=\"tag\"\n                  classList={{\n                    opacity: !!open(),\n                  }}\n                  type={kv()[v]?.type || 'primary'}\n                  color={kv()[v]?.color}\n                  icon={kv()[v]?.icon}\n                  close-icon={!other.disabled && !kv()[v]?.disabled}\n                  onClose={deleteValue.bind(null, v)}\n                  disabled={other.disabled || kv()[v]?.disabled}\n                >\n                  {kv()[v]?.[fieldNames().label] || v}\n                </n-tag>\n              )}\n            </For>\n          </Show>\n        </div>\n        <Show when={suffix()}>\n          <span class=\"suffix\">{suffix()}</span>\n        </Show>\n      </div>\n    </Dropdown>\n  );\n}\n\n/** 通用API */\ninterface SelectBaseProps {\n  /** 占位符 */\n  placeholder?: string;\n  /** 选项 */\n  options?: (MenuOption | string | number)[];\n  /** 标题 */\n  label?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 前缀图标 */\n  prefixIcon?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 后缀图标 */\n  suffixIcon?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  style?: Record<string, string | number>;\n}\n\n/** 单选 */\nexport interface SelectProps extends Omit<DropdownProps, 'items' | 'children'>, SelectBaseProps {\n  /** 值 */\n  value?: string | number;\n}\n\n/** 多选 */\nexport interface SelectMultipleProps\n  extends Omit<DropdownMultipleProps, 'items' | 'children'>,\n    SelectBaseProps {\n  /** 值\n   * @default []\n   */\n  value?: (string | number)[];\n}\nexport type SelectElement = CustomElement<SelectProps, 'onChange' | 'onOpenChange'>;\nexport type SelectMultipleElement = CustomElement<SelectMultipleProps, 'onChange' | 'onOpenChange'>;\n\ncustomElement<SelectProps>(\n  'n-select',\n  {\n    ...defaultProps,\n    options: [],\n    label: void 0,\n    placeholder: '请选择',\n    dropdownMatchSelectWidth: true,\n    prefixIcon: void 0,\n    suffixIcon: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: string | number, item: MenuOption) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [key, item],\n            }),\n          );\n        },\n        onOpenChange(open: boolean | null) {\n          el.dispatchEvent(\n            new CustomEvent('openchange', {\n              detail: open,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['options', 'css', 'fieldNames']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Select {...props} />\n      </>\n    );\n  },\n);\nexport default Select;\n"],"names":["batch","createEffect","createMemo","createSignal","For","mergeProps","onMount","Show","splitProps","untrack","isFunction","customElement","clearAttribute","FieldName","Dropdown","defaultProps","getOptions","inline","style","Select","props","ref","tagsRef","local","other","open","setOpen","value","setValue","x","setX","options","setOptions","kv","setKv","fieldNames","Object","assign","openChange","next","disabled","onOpenChange","click","e","target","parentElement","parentNode","activeElement","onChange","val","item","Array","isArray","keyDown","key","multiple","old","splice","length","preventDefault","stopPropagation","deleteValue","v","filter","focus","blur","fieldDic","opts","getKv","arr","optKv","i","len","_options","_children","children","defaultValue","label","offsetLeft","prefix","prefixIcon","suffix","suffixIcon","css","placeholder","bind","type","color","icon","dropdownMatchSelectWidth","_","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"43BAAA,QACEA,SAAAA,CAAK,CACLC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,OAAAA,CAAG,CACHC,cAAAA,CAAU,CACVC,WAAAA,CAAO,CACPC,QAAAA,CAAI,CACJC,cAAAA,CAAU,CACVC,WAAAA,CAAO,KACF,UAAW,AAClB,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,CAAEC,aAAAA,CAAS,KAAQ,iBAAkB,AAC5D,QAAOC,GAAYC,gBAAAA,CAAY,KAAQ,aAAc,AACrD,QAAOC,MAAgB,gBAAiB,AACxC,QAASC,UAAAA,CAAM,KAAQ,UAAW,AAElC,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAEhC,OAAO,QAAS,CAEhB,SAASC,EAAOC,CAAkB,MAc5BC,EACAC,EAdJ,GAAM,CAACC,EAAOC,EAAM,CAAGhB,EAAWY,EAAO,CACvC,MACA,QACA,WACA,OACA,eACA,QACA,aACA,aACA,cACA,UACA,UACD,EAGK,CAACK,EAAMC,EAAQ,CAAGvB,EAA6B,MAC/C,CAACwB,EAAOC,EAAS,CAAGzB,EAAkC,EAAE,EACxD,CAAC0B,EAAGC,EAAK,CAAG3B,EAAqB,IACjC,CAAC4B,EAASC,EAAW,CAAG7B,EAA2B,EAAE,EACrD,CAAC8B,EAAIC,EAAM,CAAG/B,EAAqD,CAAC,GAEpEgC,EAAajC,EAAW,IAAMkC,OAAOC,MAAM,CAAC,CAAC,EAAGxB,EAAWW,EAAMW,UAAU,GAiCjF,SAASG,EAAWC,CAAoB,EACjCf,EAAMgB,QAAQ,GACb9B,EAAWa,EAAMkB,YAAY,GAC/BlB,EAAMkB,YAAY,CAACF,GAEF,KAAK,IAApBhB,EAAME,IAAI,EACZC,EAAQa,GAGd,CACA,SAASG,EAAMC,CAAa,MAEvBA,EACAtB,EAAAA,UADAsB,EAAAA,EAAEC,MAAM,SAAT,AAACD,EAA6BE,aAAa,WAC1CxB,gBAAAA,EAAAA,EAAKyB,UAAU,gBAAfzB,EAAAA,EAAiByB,UAAU,SAA5B,AAACzB,EAAiD0B,aAAa,GAE/DT,EAAW,CAAC7B,EAAQgB,GAExB,CACA,SAASuB,EAASC,CAAsD,CAAEC,CAAiB,EACrE,KAAK,IAArB3B,EAAMI,KAAK,EACbC,EAASqB,EAAOE,MAAMC,OAAO,CAACH,GAAOA,EAAM,CAACA,EAAI,CAAI,EAAE,EAEpDvC,EAAWa,EAAMyB,QAAQ,GAC3BzB,EAAMyB,QAAQ,CAACC,EAAKC,EAExB,CACA,SAASG,EAAQ,CAAEC,IAAAA,CAAG,CAAmB,EACvC,OAAQA,GACN,IAAK,YAIL,IAAK,UADH,KAGF,KAAK,YACH,GAAI9B,EAAM+B,QAAQ,CAAE,CAClB,IAAMC,EAAM,IAAI/C,EAAQkB,GAAO,CAE/B6B,EAAIC,MAAM,CAAC,GAAI,GACfT,EAASQ,EAAK/C,EAAQwB,EAAG,CAACxB,EAAQkB,GAAO+B,MAAM,CAAG,EAAE,CACtD,MACEV,EAAS,KAAK,EAAGvC,EAAQwB,EAAG,CAACxB,EAAQkB,EAAM,CAAC,EAAE,CAAC,EAEjD,KACF,KAAK,QACHW,EAAW,CAAC7B,EAAQgB,IACpB,KACF,KAAK,SACHa,EAAW,CAAA,EAIf,CACF,CACA,SAASqB,EAAehB,CAAQ,EAC9BA,EAAEiB,eAAe,GACjBjB,EAAEgB,cAAc,EAClB,CACA,SAASE,EAAYC,CAAkB,CAAEnB,CAAc,EACrDgB,EAAehB,GACfK,EAASvC,EAAQkB,GAAOoC,MAAM,CAAC,AAACP,GAAQA,IAAQM,GAAarD,EAAQwB,EAAG,CAAC6B,EAAE,CAC7E,CACA,SAASE,EAAMrB,CAA0B,EACvCgB,EAAehB,GACfL,EAAW,CAAA,EACb,CACA,SAAS2B,EAAKtB,CAAa,EACzBgB,EAAehB,GACXlC,EAAQgB,IACVa,EAAW,CAAA,EAEf,CAjFArC,EAAa,KACXD,EAAM,KACJ,IAAMkE,EAAW/B,IACXgC,EAAOnD,EAAWO,EAAMQ,OAAO,CAAEmC,GAEvClC,EAAWmC,GACXjC,EAAMkC,AA3BV,SAASA,EAAMC,CAAiB,CAAEH,CAA0B,EAC1D,IAAMI,EAAoC,CAAC,EAE3C,IAAK,IAAIC,EAAI,EAAGC,EAAMH,EAAIX,MAAM,CAAEa,EAAIC,EAAKD,IAAK,CAC9C,IAAMrB,EAAOmB,CAAG,CAACE,EAAE,CACbE,EAAWvB,CAAI,CAACgB,EAASnC,OAAO,CAAC,AAEvCuC,CAAAA,CAAK,CAACpB,CAAI,CAACgB,EAASvC,KAAK,CAAC,CAAE,CAAGuB,EAC3BC,MAAMC,OAAO,CAACqB,IAChBrC,OAAOC,MAAM,CAACiC,EAAOF,EAAMK,EAA0BP,IAEvD,IAAMQ,EAAYxB,CAAI,CAACgB,EAASS,QAAQ,CAAC,AAEzCL,CAAAA,CAAK,CAACpB,CAAI,CAACgB,EAASvC,KAAK,CAAC,CAAE,CAAGuB,EAC3BC,MAAMC,OAAO,CAACsB,IAChBtC,OAAOC,MAAM,CAACiC,EAAOF,EAAMM,EAA2BR,GAE1D,CACA,OAAOI,CACT,EAQgBH,EAAMD,GACpB,EACF,GA2EAjE,EAAa,KACXD,EAAM,KACAuB,EAAME,IAAI,GAAKhB,EAAQgB,IAASF,AAAe,KAAK,IAApBA,EAAME,IAAI,EAC5CC,EAAQH,EAAME,IAAI,EAEhBF,AAAgB,KAAK,IAArBA,EAAMI,KAAK,EAAeJ,AAAgB,OAAhBA,EAAMI,KAAK,CACvCC,EAASuB,MAAMC,OAAO,CAAC7B,EAAMI,KAAK,EAAIJ,EAAMI,KAAK,CAAG,CAACJ,EAAMI,KAAK,CAAC,EAEjEC,EAAS,EAAE,CAEf,EACF,GACAtB,EAAQ,KACN,GAAIiB,AAAgB,KAAK,IAArBA,EAAMI,KAAK,CAAa,CAC1B,IAAMsB,EAAMzB,EAAMoD,YAAY,CAE9BhD,EAASqB,EAAOE,MAAMC,OAAO,CAACH,GAAOA,EAAM,CAACA,EAAI,CAAI,EAAE,CACxD,CACF,GACAhD,EAAa,KACPsB,EAAMsD,KAAK,EACb/C,EAAK,CAAC,aAAa,EAAER,OAAAA,SAAAA,EAASwD,UAAU,GAAI,EAAE,KAAK,CAAC,CAExD,GACA,IAAMC,EAAS7E,EAAW,IACxBQ,EAAWa,EAAMyD,UAAU,EAAKzD,EAAMyD,UAAU,GAAqBzD,EAAMyD,UAAU,EAEjFH,GAAQ3E,EAAW,IACvBQ,EAAWa,EAAMsD,KAAK,EAAKtD,EAAMsD,KAAK,GAAqBtD,EAAMsD,KAAK,EAElEI,GAAS/E,EAAW,IACxBQ,EAAWa,EAAM2D,UAAU,EAAK3D,EAAM2D,UAAU,GAAqB3D,EAAM2D,UAAU,EAGvF,SACGpE,uCAEMI,EAAQW,IAAON,CAAAA,EAAM4D,GAAG,EAAI,EAAC,qCAE3BpD,wBACAJ,cACGqB,oBACJvB,kBACQa,GACVd,8BAGGH,mBAckBC,oBATf2C,eADCD,iBADEX,kCAHNhC,UAQJd,qBAAWwE,yCACYA,iBAEvBxE,qBAAWsE,0CACYA,4BAEqBnC,kCAAtBpB,UACpBf,qBACOiB,EAAM+B,QAAQ,0BAEjBhD,qBACOoB,IAAQ+B,MAAM,0BAEjBnD,qBAAWgB,EAAM6D,WAAW,0CACA7D,EAAM6D,WAAW,qDAU7CnD,QAAAA,QAAAA,EAAAA,GAAI,CAACN,GAAO,CAAC,EAAE,CAAC,SAAhBM,CAAkB,CAACE,IAAa0C,KAAK,CAAC,GAAIlD,GAAO,CAAC,EAAE,sCAH1C,CAAC,CAACF,oCAQlBrB,qBACOuB,6BAEHpB,qBAAWgB,EAAM6D,WAAW,0CACA7D,EAAM6D,WAAW,iBAI/C,AAACtB,sCAUWD,EAAYwB,IAAI,CAAC,KAAMvB,+BAG/B7B,QAAAA,QAAAA,EAAAA,GAAI,CAAC6B,EAAE,SAAP7B,CAAS,CAACE,IAAa0C,KAAK,CAAC,GAAIf,cAP5B7B,EACCA,EACDA,EAC0BA,EAEJA,QAPjB,CAAC,CAACR,MAEPQ,QAAAA,EAAAA,GAAI,CAAC6B,EAAE,SAAP7B,EAASqD,IAAI,GAAI,mBAChBrD,EAAAA,GAAI,CAAC6B,EAAE,SAAP7B,EAASsD,KAAK,UACftD,EAAAA,GAAI,CAAC6B,EAAE,SAAP7B,EAASuD,IAAI,GACP,CAAChE,EAAMgB,QAAQ,EAAI,SAACP,EAAAA,GAAI,CAAC6B,EAAE,SAAP7B,EAASO,QAAQ,IAEvChB,EAAMgB,QAAQ,UAAIP,EAAAA,GAAI,CAAC6B,EAAE,SAAP7B,EAASO,QAAQ,4TAQtDjC,qBAAW0E,0CACYA,2BA/DdzD,EAAMgB,QAAQ,CAAG,GAAK,IAIjBhB,EAAMgB,QAAQ,uHAgErC,CAmCA7B,EACE,WACA,KACKI,GACHgB,QAAS,EAAE,CACX8C,MAAO,KAAK,EACZO,YAAa,MACbK,yBAA0B,CAAA,EAC1BT,WAAY,KAAK,EACjBE,WAAY,KAAK,IAEnB,CAACQ,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBzE,EAAQf,EACZ,CACE2C,SAASM,CAAoB,CAAEJ,CAAgB,EAC7C0C,EAAGE,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAAC1C,EAAKJ,EAAK,AACrB,GAEJ,EACAT,aAAahB,CAAoB,EAC/BmE,EAAGE,aAAa,CACd,IAAIC,YAAY,aAAc,CAC5BC,OAAQvE,CACV,GAEJ,CACF,EACAiE,GAMF,OAHAzF,EAAa,KACXW,EAAegF,EAAI,CAAC,UAAW,MAAO,aAAa,CACrD,yCAGwB3E,UACnBE,EAAWC,GAGlB,EAEF,gBAAeD,CAAO"}

package/es/select/style.js

@@ -123,5 +123,4 @@ import{css as r}from"@moneko/css";export const style=r`
       opacity: 1;
     }
   }
-`;
-//# sourceMappingURL=style.js.map
+`;

package/es/select/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/select/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .label {\n    position: absolute;\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    padding: 0 4px;\n    text-overflow: ellipsis;\n    color: var(--text-secondary);\n    transition: transform var(--transition-duration);\n    line-height: inherit;\n    pointer-events: none;\n    transform-origin: left;\n    transform: translate3d(calc(var(--x, 0) - 14px), 0, 1px);\n    max-inline-size: 100%;\n    word-break: keep-all;\n  }\n\n  .value,\n  .placeholder {\n    max-inline-size: 100%;\n    padding: 0;\n    transition: var(--transition-duration) opacity;\n    pointer-events: none;\n    flex: 1;\n  }\n\n  .placeholder {\n    color: darkgray;\n    opacity: 0;\n  }\n\n  .prefix,\n  .suffix {\n    display: flex;\n    align-items: center;\n  }\n\n  .select {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    border: 1px solid var(--border-color);\n    border-radius: var(--border-radius);\n    padding: 4px 10px;\n    font-size: var(--font-size);\n    color: var(--text-color);\n    background-color: var(--component-bg);\n    line-height: 1.5;\n    min-inline-size: 200px;\n    background-image: none;\n    box-sizing: border-box;\n    accent-color: var(--primary-color);\n    gap: 4px;\n    min-block-size: 28px;\n    cursor: pointer;\n    user-select: none;\n    transition: border-color var(--transition-duration) var(--transition-timing-function);\n\n    &:not(:has(.label)) {\n      & .placeholder {\n        opacity: 0.65;\n      }\n    }\n\n    &:has(.tag) {\n      &:not(:has(.prefix)) {\n        padding-inline-start: 4px;\n      }\n\n      &:not(:has(.suffix)) {\n        padding-inline-end: 4px;\n      }\n    }\n\n    &:hover:not([aria-disabled='true']) {\n      border-color: var(--primary-hover);\n      border-inline-end-width: 1px;\n    }\n\n    &:focus:not([aria-disabled='true']) {\n      border-color: var(--primary-hover);\n      border-inline-end-width: 1px;\n      outline: 0;\n      box-shadow: 0 0 0 2px var(--primary-outline);\n    }\n\n    &[aria-disabled='true'] {\n      border-color: var(--disable-border);\n      color: var(--disable-color);\n      background-color: var(--disable-bg);\n      cursor: not-allowed;\n    }\n\n    &:focus .label,\n    &:has(.label + .tags > .tag) .label,\n    &:has(.label + .tags > .value) .label {\n      line-height: 1;\n      background: var(--component-bg);\n      transform: translate3d(0, calc(-50% - 0.43em), 1px) scale(0.8);\n\n      & + .tags > .placeholder {\n        opacity: 0.65;\n      }\n    }\n  }\n\n  .value {\n    opacity: 1;\n  }\n\n  .tags {\n    flex: 1;\n    display: flex;\n    gap: 4px;\n    flex-wrap: wrap;\n  }\n\n  .opacity {\n    opacity: 0.5;\n    transition: opacity var(--transition-duration) var(--transition-timing-function);\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HzB,CAAC,AAAC"}
+{"version":3,"sources":["components/select/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .label {\n    position: absolute;\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    padding: 0 4px;\n    text-overflow: ellipsis;\n    color: var(--text-secondary);\n    transition: transform var(--transition-duration);\n    line-height: inherit;\n    pointer-events: none;\n    transform-origin: left;\n    transform: translate3d(calc(var(--x, 0) - 14px), 0, 1px);\n    max-inline-size: 100%;\n    word-break: keep-all;\n  }\n\n  .value,\n  .placeholder {\n    max-inline-size: 100%;\n    padding: 0;\n    transition: var(--transition-duration) opacity;\n    pointer-events: none;\n    flex: 1;\n  }\n\n  .placeholder {\n    color: darkgray;\n    opacity: 0;\n  }\n\n  .prefix,\n  .suffix {\n    display: flex;\n    align-items: center;\n  }\n\n  .select {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    border: 1px solid var(--border-color);\n    border-radius: var(--border-radius);\n    padding: 4px 10px;\n    font-size: var(--font-size);\n    color: var(--text-color);\n    background-color: var(--component-bg);\n    line-height: 1.5;\n    min-inline-size: 200px;\n    background-image: none;\n    box-sizing: border-box;\n    accent-color: var(--primary-color);\n    gap: 4px;\n    min-block-size: 28px;\n    cursor: pointer;\n    user-select: none;\n    transition: border-color var(--transition-duration) var(--transition-timing-function);\n\n    &:not(:has(.label)) {\n      & .placeholder {\n        opacity: 0.65;\n      }\n    }\n\n    &:has(.tag) {\n      &:not(:has(.prefix)) {\n        padding-inline-start: 4px;\n      }\n\n      &:not(:has(.suffix)) {\n        padding-inline-end: 4px;\n      }\n    }\n\n    &:hover:not([aria-disabled='true']) {\n      border-color: var(--primary-hover);\n      border-inline-end-width: 1px;\n    }\n\n    &:focus:not([aria-disabled='true']) {\n      border-color: var(--primary-hover);\n      border-inline-end-width: 1px;\n      outline: 0;\n      box-shadow: 0 0 0 2px var(--primary-outline);\n    }\n\n    &[aria-disabled='true'] {\n      border-color: var(--disable-border);\n      color: var(--disable-color);\n      background-color: var(--disable-bg);\n      cursor: not-allowed;\n    }\n\n    &:focus .label,\n    &:has(.label + .tags > .tag) .label,\n    &:has(.label + .tags > .value) .label {\n      line-height: 1;\n      background: var(--component-bg);\n      transform: translate3d(0, calc(-50% - 0.43em), 1px) scale(0.8);\n\n      & + .tags > .placeholder {\n        opacity: 0.65;\n      }\n    }\n  }\n\n  .value {\n    opacity: 1;\n  }\n\n  .tags {\n    flex: 1;\n    display: flex;\n    gap: 4px;\n    flex-wrap: wrap;\n  }\n\n  .opacity {\n    opacity: 0.5;\n    transition: opacity var(--transition-duration) var(--transition-timing-function);\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HzB,CAAC,AAAC"}

package/es/skeleton/index.js

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

package/es/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/skeleton/index.tsx"],"sourcesContent":["import { createEffect, createMemo, For, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block } from '../theme';\n\nconst style = css`\n  :host {\n    display: block;\n    inline-size: 100%;\n  }\n\n  .skeleton {\n    display: flex;\n    inline-size: 100%;\n    gap: 16px;\n  }\n\n  .avatar,\n  .title,\n  .paragraph > div {\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    background: var(--skeleton-bg);\n    transition: background-color var(--transition-duration) var(--transition-timing-function);\n  }\n\n  .avatar {\n    border-radius: 50%;\n    inline-size: 32px;\n    block-size: 32px;\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .title {\n    margin-block-end: 16px;\n    inline-size: 32%;\n    block-size: 32px;\n  }\n\n  .paragraph {\n    display: flex;\n    padding: 0;\n    flex-direction: column;\n    gap: 12px;\n\n    & > div {\n      inline-size: 100%;\n      block-size: 16px;\n      list-style: none;\n\n      &:last-of-type {\n        inline-size: 65%;\n      }\n    }\n  }\n\n  .active {\n    &::after {\n      display: block;\n      block-size: 100%;\n      animation: skeleton-effect 1.4s var(--transition-timing-function) infinite;\n      background: var(--skeleton-bg-active);\n      content: '';\n      transition: background-color var(--transition-duration) var(--transition-timing-function);\n    }\n  }\n\n  @keyframes skeleton-effect {\n    to {\n      background-position-x: -20%;\n    }\n  }\n`;\n\nexport interface SkeletonProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 行\n   * @default 3\n   */\n  rows?: number;\n  /** 显示动画\n   * @default false\n   */\n  active?: boolean;\n  /** 显示头像\n   * @default false\n   */\n  avatar?: boolean;\n  /** 显示标题\n   * @default false\n   */\n  title?: boolean;\n}\n\nfunction Skeleton(props: SkeletonProps) {\n  const { baseStyle, isDark } = theme;\n  const rows = createMemo(() => Array(props.rows).fill(0));\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --skeleton-bg: rgb(255 255 255 / 6%);\n          --skeleton-bg-active: linear-gradient(\n              100deg,\n              rgb(255 255 255 / 5%) 40%,\n              rgb(255 255 255 / 15%) 50%,\n              rgb(255 255 255 / 5%) 60%\n            )\n            transparent 180%/200% 100%;\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --skeleton-bg: rgb(0 0 0 / 6%);\n        --skeleton-bg-active: linear-gradient(\n            100deg,\n            rgb(0 0 0 / 5%) 40%,\n            rgb(0 0 0 / 15%) 50%,\n            rgb(0 0 0 / 5%) 60%\n          )\n          transparent 180%/200% 100%;\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div class={cx('skeleton', props.class)}>\n        <Show when={props.avatar}>\n          <div\n            class=\"avatar\"\n            classList={{\n              active: props.active,\n            }}\n          />\n        </Show>\n        <div class=\"body\">\n          <Show when={props.title}>\n            <div\n              class=\"title\"\n              classList={{\n                active: props.active,\n              }}\n            />\n          </Show>\n          <div class=\"paragraph\">\n            <For each={rows()}>\n              {() => (\n                <div\n                  classList={{\n                    active: props.active,\n                  }}\n                />\n              )}\n            </For>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport type SkeletonElement = CustomElement<SkeletonProps>;\ncustomElement<SkeletonProps>(\n  'n-skeleton',\n  {\n    rows: 3,\n    active: void 0,\n    avatar: void 0,\n    title: void 0,\n    css: void 0,\n    class: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        rows: el.rows,\n        active: el.active,\n        avatar: el.avatar,\n        title: el.title,\n        css: el.css,\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Skeleton {...props} />\n      </>\n    );\n  },\n);\nexport default Skeleton;\n"],"names":["createEffect","createMemo","For","mergeProps","Show","css","cx","customElement","clearAttribute","theme","block","style","Skeleton","props","baseStyle","isDark","rows","Array","fill","cssVar","avatar","active","title","class","_","opt","el","element"],"mappings":"wWAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AAC3E,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,SAAAA,CAAK,KAAQ,UAAW,CAExC,IAAMC,EAAQN,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsElB,CAAC,CAyBD,SAASO,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGN,EACxBO,EAAOf,EAAW,IAAMgB,MAAMJ,EAAMG,IAAI,EAAEE,IAAI,CAAC,IAC/CC,EAASlB,EAAW,IACxB,AAAIc,IACKV,CAAG,CAAC;;;;;;;;;;;MAWX,CAAC,CAGIA,CAAG,CAAC;;;;;;;;;;;IAWX,CAAC,EAGH,0DAEwBS,8DACAK,gDACAR,UACnBP,qBAAWS,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,mEAGhCD,qBAAWS,EAAMO,MAAM,sEAIVP,EAAMQ,MAAM,iBAKvBjB,qBAAWS,EAAMS,KAAK,sEAITT,EAAMQ,MAAM,iBAKvBnB,qBAAUc,cACR,+DAGaH,EAAMQ,MAAM,sBAvBtBf,EAAG,WAAYO,EAAMU,KAAK,UAiC5C,CAGAhB,EACE,aACA,CACES,KAAM,EACNK,OAAQ,KAAK,EACbD,OAAQ,KAAK,EACbE,MAAO,KAAK,EACZjB,IAAK,KAAK,EACVkB,MAAO,KAAK,CACd,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBd,EAAQV,EACZ,CACEa,KAAMU,EAAGV,IAAI,CACbK,OAAQK,EAAGL,MAAM,CACjBD,OAAQM,EAAGN,MAAM,CACjBE,MAAOI,EAAGJ,KAAK,CACfjB,IAAKqB,EAAGrB,GAAG,AACb,EACAmB,GAMF,OAHAxB,EAAa,KACXQ,EAAekB,EAAI,CAAC,MAAM,CAC5B,yCAGwBhB,UACnBE,EAAaC,GAGpB,EAEF,gBAAeD,CAAS"}
+{"version":3,"sources":["components/skeleton/index.tsx"],"sourcesContent":["import { createEffect, createMemo, For, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block } from '../theme';\n\nconst style = css`\n  :host {\n    display: block;\n    inline-size: 100%;\n  }\n\n  .skeleton {\n    display: flex;\n    inline-size: 100%;\n    gap: 16px;\n  }\n\n  .avatar,\n  .title,\n  .paragraph > div {\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    background: var(--skeleton-bg);\n    transition: background-color var(--transition-duration) var(--transition-timing-function);\n  }\n\n  .avatar {\n    border-radius: 50%;\n    inline-size: 32px;\n    block-size: 32px;\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .title {\n    margin-block-end: 16px;\n    inline-size: 32%;\n    block-size: 32px;\n  }\n\n  .paragraph {\n    display: flex;\n    padding: 0;\n    flex-direction: column;\n    gap: 12px;\n\n    & > div {\n      inline-size: 100%;\n      block-size: 16px;\n      list-style: none;\n\n      &:last-of-type {\n        inline-size: 65%;\n      }\n    }\n  }\n\n  .active {\n    &::after {\n      display: block;\n      block-size: 100%;\n      animation: skeleton-effect 1.4s var(--transition-timing-function) infinite;\n      background: var(--skeleton-bg-active);\n      content: '';\n      transition: background-color var(--transition-duration) var(--transition-timing-function);\n    }\n  }\n\n  @keyframes skeleton-effect {\n    to {\n      background-position-x: -20%;\n    }\n  }\n`;\n\nexport interface SkeletonProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 行\n   * @default 3\n   */\n  rows?: number;\n  /** 显示动画\n   * @default false\n   */\n  active?: boolean;\n  /** 显示头像\n   * @default false\n   */\n  avatar?: boolean;\n  /** 显示标题\n   * @default false\n   */\n  title?: boolean;\n}\n\nfunction Skeleton(props: SkeletonProps) {\n  const { baseStyle, isDark } = theme;\n  const rows = createMemo(() => Array(props.rows).fill(0));\n  const cssVar = createMemo(() => {\n    const dark = isDark();\n\n    return css({\n      ':host': {\n        '--skeleton-bg': dark ? 'rgb(255 255 255 / 6%)' : 'rgb(0 0 0 / 6%)',\n        '--skeleton-bg-active': dark\n          ? `linear-gradient(100deg,rgb(255 255 255 / 5%) 40%,rgb(255 255 255 / 15%) 50%,rgb(255 255 255 / 5%) 60%) transparent 180%/200% 100%`\n          : `linear-gradient(100deg,rgb(0 0 0 / 5%) 40%,rgb(0 0 0 / 15%) 50%,rgb(0 0 0 / 5%) 60%) transparent 180%/200% 100%`,\n      },\n    });\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div class={cx('skeleton', props.class)}>\n        <Show when={props.avatar}>\n          <div\n            class=\"avatar\"\n            classList={{\n              active: props.active,\n            }}\n          />\n        </Show>\n        <div class=\"body\">\n          <Show when={props.title}>\n            <div\n              class=\"title\"\n              classList={{\n                active: props.active,\n              }}\n            />\n          </Show>\n          <div class=\"paragraph\">\n            <For each={rows()}>\n              {() => (\n                <div\n                  classList={{\n                    active: props.active,\n                  }}\n                />\n              )}\n            </For>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport type SkeletonElement = CustomElement<SkeletonProps>;\ncustomElement<SkeletonProps>(\n  'n-skeleton',\n  {\n    rows: 3,\n    active: void 0,\n    avatar: void 0,\n    title: void 0,\n    css: void 0,\n    class: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        rows: el.rows,\n        active: el.active,\n        avatar: el.avatar,\n        title: el.title,\n        css: el.css,\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Skeleton {...props} />\n      </>\n    );\n  },\n);\nexport default Skeleton;\n"],"names":["createEffect","createMemo","For","mergeProps","Show","css","cx","customElement","clearAttribute","theme","block","style","Skeleton","props","baseStyle","isDark","rows","Array","fill","cssVar","dark","avatar","active","title","class","_","opt","el","element"],"mappings":"wWAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AAC3E,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,SAAAA,CAAK,KAAQ,UAAW,CAExC,IAAMC,EAAQN,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsElB,CAAC,CAyBD,SAASO,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGN,EACxBO,EAAOf,EAAW,IAAMgB,MAAMJ,EAAMG,IAAI,EAAEE,IAAI,CAAC,IAC/CC,EAASlB,EAAW,KACxB,IAAMmB,EAAOL,IAEb,OAAOV,EAAI,CACT,QAAS,CACP,gBAAiBe,EAAO,wBAA0B,kBAClD,uBAAwBA,EACpB,oIACA,iHACN,CACF,EACF,GAEA,0DAEwBN,8DACAK,gDACAR,UACnBP,qBAAWS,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,mEAGhCD,qBAAWS,EAAMQ,MAAM,sEAIVR,EAAMS,MAAM,iBAKvBlB,qBAAWS,EAAMU,KAAK,sEAITV,EAAMS,MAAM,iBAKvBpB,qBAAUc,cACR,+DAGaH,EAAMS,MAAM,sBAvBtBhB,EAAG,WAAYO,EAAMW,KAAK,UAiC5C,CAGAjB,EACE,aACA,CACES,KAAM,EACNM,OAAQ,KAAK,EACbD,OAAQ,KAAK,EACbE,MAAO,KAAK,EACZlB,IAAK,KAAK,EACVmB,MAAO,KAAK,CACd,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBf,EAAQV,EACZ,CACEa,KAAMW,EAAGX,IAAI,CACbM,OAAQK,EAAGL,MAAM,CACjBD,OAAQM,EAAGN,MAAM,CACjBE,MAAOI,EAAGJ,KAAK,CACflB,IAAKsB,EAAGtB,GAAG,AACb,EACAoB,GAMF,OAHAzB,EAAa,KACXQ,EAAemB,EAAI,CAAC,MAAM,CAC5B,yCAGwBjB,UACnBE,EAAaC,GAGpB,EAEF,gBAAeD,CAAS"}

package/es/spin/index.js

@@ -61,5 +61,4 @@ import{template as e}from"solid-js/web";import{mergeProps as t}from"solid-js/web
       transform: rotate(360deg);
     }
   }
-`;function h(e){let{baseStyle:t}=v;return[(()=>{let e=s(),i=e.firstChild;return n(()=>i.data=t()),e})(),(()=>{let e=l();return e.textContent=g,e})(),o(c,{get when(){return e.css},get children(){let t=s(),i=t.firstChild;return n(()=>i.data=m(e.css)),t}}),(()=>{let t=a();return i(t.firstChild,()=>e.children),n(i=>{let n=f("spin",e.class),o=!!e.spin;return n!==i._v$&&r(t,i._v$=n),o!==i._v$2&&t.classList.toggle("spining",i._v$2=o),i},{_v$:void 0,_v$2:void 0}),t})()]}b("n-spin",{class:void 0,css:void 0,spin:void 0,children:void 0},(e,i)=>{let n=i.element,r=[...(i.element.childNodes||[]).values()],[,s]=p(e,["children"]);return d(()=>{u(n,["css"]),n.replaceChildren()}),[(()=>{let e=l();return e.textContent=x,e})(),o(h,t(s,{children:r}))]});export default h;
-//# sourceMappingURL=index.js.map
+`;function h(e){let{baseStyle:t}=v;return[(()=>{let e=s(),i=e.firstChild;return n(()=>i.data=t()),e})(),(()=>{let e=l();return e.textContent=g,e})(),o(c,{get when(){return e.css},get children(){let t=s(),i=t.firstChild;return n(()=>i.data=m(e.css)),t}}),(()=>{let t=a();return i(t.firstChild,()=>e.children),n(i=>{let n=f("spin",e.class),o=!!e.spin;return n!==i._v$&&r(t,i._v$=n),o!==i._v$2&&t.classList.toggle("spining",i._v$2=o),i},{_v$:void 0,_v$2:void 0}),t})()]}b("n-spin",{class:void 0,css:void 0,spin:void 0,children:void 0},(e,i)=>{let n=i.element,r=[...(i.element.childNodes||[]).values()],[,s]=p(e,["children"]);return d(()=>{u(n,["css"]),n.replaceChildren()}),[(()=>{let e=l();return e.textContent=x,e})(),o(h,t(s,{children:r}))]});export default h;

package/es/spin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/spin/index.tsx"],"sourcesContent":["import { createEffect, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n  :host {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  .spin {\n    inline-size: fit-content;\n    inline-size: 100%;\n    block-size: 100%;\n    min-inline-size: 16px;\n    min-block-size: 16px;\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spining {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\n      filter: blur(4px);\n    }\n\n    &::before {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: auto;\n      border: 1px solid;\n      border-color: var(--text-secondary) transparent;\n      border-radius: 50%;\n      font-size: large;\n      text-align: center;\n      inline-size: 16px;\n      block-size: 16px;\n      inset-block: 0;\n      inset-inline: 0;\n      box-sizing: border-box;\n      line-height: 1;\n      content: '';\n      animation: spin-rotate-effect 1s infinite;\n    }\n  }\n\n  @keyframes spin-rotate-effect {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport interface SpinProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 加载状态 */\n  spin?: boolean;\n  /** 内容 */\n  children?: JSX.Element | JSX.Element[];\n}\n\nfunction Spin(props: SpinProps) {\n  const { baseStyle } = theme;\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        class={cx('spin', props.class)}\n        classList={{\n          spining: props.spin,\n        }}\n      >\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\ncustomElement<SpinProps>(\n  'n-spin',\n  { class: void 0, css: void 0, spin: void 0, children: void 0 },\n  (_, opt) => {\n    const el = opt.element;\n    const childNodes = (opt.element.childNodes as NodeList) || [];\n    const nodes = [...childNodes.values()];\n    const [, props] = splitProps(_, ['children']);\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Spin {...props}>{nodes}</Spin>\n      </>\n    );\n  },\n);\n\nexport default Spin;\n"],"names":["createEffect","Show","splitProps","css","cx","customElement","clearAttribute","theme","inline","style","Spin","props","baseStyle","children","class","spin","_","opt","el","element","nodes","childNodes","values","replaceChildren"],"mappings":"0TAAA,QAASA,gBAAAA,CAAY,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAC1D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,CAEzC,IAAMC,EAAQN,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DlB,CAAC,CAaD,SAASO,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAEtB,0DAEwBK,gDACAH,UACnBR,qBAAWU,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,kDAQXQ,EAAME,QAAQ,cAL7BT,EAAG,OAAQO,EAAMG,KAAK,MAElBH,EAAMI,IAAI,sHAO7B,CAIAV,EACE,SACA,CAAES,MAAO,KAAK,EAAGX,IAAK,KAAK,EAAGY,KAAM,KAAK,EAAGF,SAAU,KAAK,CAAE,EAC7D,CAACG,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAEhBC,EAAQ,IAAIC,AADC,CAAA,AAACJ,EAAIE,OAAO,CAACE,UAAU,EAAiB,EAAE,AAAD,EAC/BC,MAAM,GAAG,CAChC,EAAGX,EAAM,CAAGT,EAAWc,EAAG,CAAC,WAAW,EAM5C,OAJAhB,EAAa,KACXM,EAAeY,EAAI,CAAC,MAAM,EAC1BA,EAAGK,eAAe,EACpB,yCAGwBf,UACnBE,IAASC,YAAQS,KAGxB,EAGF,gBAAeV,CAAK"}
+{"version":3,"sources":["components/spin/index.tsx"],"sourcesContent":["import { createEffect, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n  :host {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  .spin {\n    inline-size: fit-content;\n    inline-size: 100%;\n    block-size: 100%;\n    min-inline-size: 16px;\n    min-block-size: 16px;\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spining {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\n      filter: blur(4px);\n    }\n\n    &::before {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: auto;\n      border: 1px solid;\n      border-color: var(--text-secondary) transparent;\n      border-radius: 50%;\n      font-size: large;\n      text-align: center;\n      inline-size: 16px;\n      block-size: 16px;\n      inset-block: 0;\n      inset-inline: 0;\n      box-sizing: border-box;\n      line-height: 1;\n      content: '';\n      animation: spin-rotate-effect 1s infinite;\n    }\n  }\n\n  @keyframes spin-rotate-effect {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport interface SpinProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 加载状态 */\n  spin?: boolean;\n  /** 内容 */\n  children?: JSX.Element | JSX.Element[];\n}\n\nfunction Spin(props: SpinProps) {\n  const { baseStyle } = theme;\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        class={cx('spin', props.class)}\n        classList={{\n          spining: props.spin,\n        }}\n      >\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\ncustomElement<SpinProps>(\n  'n-spin',\n  { class: void 0, css: void 0, spin: void 0, children: void 0 },\n  (_, opt) => {\n    const el = opt.element;\n    const childNodes = (opt.element.childNodes as NodeList) || [];\n    const nodes = [...childNodes.values()];\n    const [, props] = splitProps(_, ['children']);\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Spin {...props}>{nodes}</Spin>\n      </>\n    );\n  },\n);\n\nexport default Spin;\n"],"names":["createEffect","Show","splitProps","css","cx","customElement","clearAttribute","theme","inline","style","Spin","props","baseStyle","children","class","spin","_","opt","el","element","nodes","childNodes","values","replaceChildren"],"mappings":"0TAAA,QAASA,gBAAAA,CAAY,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAC1D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,CAEzC,IAAMC,EAAQN,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DlB,CAAC,CAaD,SAASO,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAEtB,0DAEwBK,gDACAH,UACnBR,qBAAWU,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,kDAQXQ,EAAME,QAAQ,cAL7BT,EAAG,OAAQO,EAAMG,KAAK,MAElBH,EAAMI,IAAI,sHAO7B,CAIAV,EACE,SACA,CAAES,MAAO,KAAK,EAAGX,IAAK,KAAK,EAAGY,KAAM,KAAK,EAAGF,SAAU,KAAK,CAAE,EAC7D,CAACG,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAEhBC,EAAQ,IAAIC,AADC,CAAA,AAACJ,EAAIE,OAAO,CAACE,UAAU,EAAiB,EAAE,AAAD,EAC/BC,MAAM,GAAG,CAChC,EAAGX,EAAM,CAAGT,EAAWc,EAAG,CAAC,WAAW,EAM5C,OAJAhB,EAAa,KACXM,EAAeY,EAAI,CAAC,MAAM,EAC1BA,EAAGK,eAAe,EACpB,yCAGwBf,UACnBE,IAASC,YAAQS,KAGxB,EAGF,gBAAeV,CAAK"}

package/es/switch/index.js

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

package/es/switch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/switch/index.tsx"],"sourcesContent":["import { createEffect, createSignal, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\n\nexport interface SwitchProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 值 */\n  checked?: boolean;\n  /** 只读 */\n  disabled?: boolean;\n  /** 设置 为 true 时的文案 */\n  checkedText?: string;\n  /** 设置 为 false 时的文案 */\n  unCheckedText?: string;\n  /** 加载状态 */\n  loading?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n}\n\nexport type SwitchElement = CustomElement<SwitchProps>;\n\nfunction Switch(props: SwitchProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal(false);\n\n  function change() {\n    if (!props.disabled && !props.loading) {\n      setValue((prev) => !prev);\n      props.onChange?.(value());\n    }\n  }\n\n  function onKeyUp({ key }: { key: string }) {\n    if (key === 'Enter') {\n      change();\n    }\n  }\n\n  createEffect(() => {\n    setValue(!!props.checked);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <span\n        class={cx('switch', props.class)}\n        classList={{\n          checked: value(),\n          loading: props.loading,\n        }}\n        text-on={props.checkedText}\n        text-off={props.unCheckedText}\n        aria-disabled={props.disabled}\n        onClick={change}\n        onKeyUp={onKeyUp}\n        tabindex={props.disabled || props.loading ? -1 : 0}\n      />\n    </>\n  );\n}\n\ncustomElement<SwitchProps>(\n  'n-switch',\n  {\n    class: void 0,\n    css: void 0,\n    checked: void 0,\n    disabled: void 0,\n    checkedText: void 0,\n    unCheckedText: void 0,\n    loading: false,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        checked: el.checked,\n        disabled: el.disabled,\n        checkedText: el.checkedText,\n        unCheckedText: el.unCheckedText,\n        loading: el.loading,\n        onChange(val: boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Switch {...props} />\n      </>\n    );\n  },\n);\nexport default Switch;\n"],"names":["createEffect","createSignal","mergeProps","Show","css","cx","customElement","clearAttribute","theme","inline","style","Switch","props","baseStyle","value","setValue","change","disabled","loading","prev","onChange","onKeyUp","key","checked","class","checkedText","unCheckedText","_","opt","el","element","val","dispatchEvent","CustomEvent","detail"],"mappings":"gWAAA,QAASA,gBAAAA,CAAY,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AACxE,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,AAEzC,QAASC,SAAAA,CAAK,KAAQ,SAAU,CAuBhC,SAASC,EAAOC,CAAkB,EAChC,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAChB,CAACM,EAAOC,EAAS,CAAGd,EAAa,CAAA,GAEvC,SAASe,IACFJ,EAAMK,QAAQ,EAAKL,EAAMM,OAAO,GACnCH,EAAS,AAACI,GAAS,CAACA,SACpBP,EAAMQ,QAAQ,EAAdR,EAAMQ,QAAQ,MAAdR,EAAiBE,KAErB,CAEA,SAASO,EAAQ,CAAEC,IAAAA,CAAG,CAAmB,EAC3B,UAARA,GACFN,GAEJ,CAMA,OAJAhB,EAAa,KACXe,EAAS,CAAC,CAACH,EAAMW,OAAO,CAC1B,uDAIwBV,gDACAH,UACnBP,qBAAWS,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,2CAYxBiB,kBADAL,kBARFX,EAAG,SAAUO,EAAMY,KAAK,MAEpBV,QACAF,EAAMM,OAAO,GAEfN,EAAMa,WAAW,GAChBb,EAAMc,aAAa,GACdd,EAAMK,QAAQ,GAGnBL,EAAMK,QAAQ,EAAIL,EAAMM,OAAO,CAAG,GAAK,8XAIzD,CAEAZ,EACE,WACA,CACEkB,MAAO,KAAK,EACZpB,IAAK,KAAK,EACVmB,QAAS,KAAK,EACdN,SAAU,KAAK,EACfQ,YAAa,KAAK,EAClBC,cAAe,KAAK,EACpBR,QAAS,CAAA,EACTE,SAAU,KAAK,CACjB,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBlB,EAAQV,EACZ,CACEE,IAAKyB,EAAGzB,GAAG,CACXmB,QAASM,EAAGN,OAAO,CACnBN,SAAUY,EAAGZ,QAAQ,CACrBQ,YAAaI,EAAGJ,WAAW,CAC3BC,cAAeG,EAAGH,aAAa,CAC/BR,QAASW,EAAGX,OAAO,CACnBE,SAASW,CAAY,EACnBF,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAJ,GAMF,OAHA3B,EAAa,KACXO,EAAesB,EAAI,CAAC,MAAM,CAC5B,yCAGwBpB,UACnBE,EAAWC,GAGlB,EAEF,gBAAeD,CAAO"}
+{"version":3,"sources":["components/switch/index.tsx"],"sourcesContent":["import { createEffect, createSignal, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\n\nexport interface SwitchProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 值 */\n  checked?: boolean;\n  /** 只读 */\n  disabled?: boolean;\n  /** 设置 为 true 时的文案 */\n  checkedText?: string;\n  /** 设置 为 false 时的文案 */\n  unCheckedText?: string;\n  /** 加载状态 */\n  loading?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n}\n\nexport type SwitchElement = CustomElement<SwitchProps>;\n\nfunction Switch(props: SwitchProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal(false);\n\n  function change() {\n    if (!props.disabled && !props.loading) {\n      setValue((prev) => !prev);\n      props.onChange?.(value());\n    }\n  }\n\n  function onKeyUp({ key }: { key: string }) {\n    if (key === 'Enter') {\n      change();\n    }\n  }\n\n  createEffect(() => {\n    setValue(!!props.checked);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <span\n        class={cx('switch', props.class)}\n        classList={{\n          checked: value(),\n          loading: props.loading,\n        }}\n        text-on={props.checkedText}\n        text-off={props.unCheckedText}\n        aria-disabled={props.disabled}\n        onClick={change}\n        onKeyUp={onKeyUp}\n        tabindex={props.disabled || props.loading ? -1 : 0}\n      />\n    </>\n  );\n}\n\ncustomElement<SwitchProps>(\n  'n-switch',\n  {\n    class: void 0,\n    css: void 0,\n    checked: void 0,\n    disabled: void 0,\n    checkedText: void 0,\n    unCheckedText: void 0,\n    loading: false,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        checked: el.checked,\n        disabled: el.disabled,\n        checkedText: el.checkedText,\n        unCheckedText: el.unCheckedText,\n        loading: el.loading,\n        onChange(val: boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Switch {...props} />\n      </>\n    );\n  },\n);\nexport default Switch;\n"],"names":["createEffect","createSignal","mergeProps","Show","css","cx","customElement","clearAttribute","theme","inline","style","Switch","props","baseStyle","value","setValue","change","disabled","loading","prev","onChange","onKeyUp","key","checked","class","checkedText","unCheckedText","_","opt","el","element","val","dispatchEvent","CustomEvent","detail"],"mappings":"gWAAA,QAASA,gBAAAA,CAAY,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AACxE,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,AAEzC,QAASC,SAAAA,CAAK,KAAQ,SAAU,CAuBhC,SAASC,EAAOC,CAAkB,EAChC,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAChB,CAACM,EAAOC,EAAS,CAAGd,EAAa,CAAA,GAEvC,SAASe,IACFJ,EAAMK,QAAQ,EAAKL,EAAMM,OAAO,GACnCH,EAAS,AAACI,GAAS,CAACA,SACpBP,EAAMQ,QAAQ,EAAdR,EAAMQ,QAAQ,MAAdR,EAAiBE,KAErB,CAEA,SAASO,EAAQ,CAAEC,IAAAA,CAAG,CAAmB,EAC3B,UAARA,GACFN,GAEJ,CAMA,OAJAhB,EAAa,KACXe,EAAS,CAAC,CAACH,EAAMW,OAAO,CAC1B,uDAIwBV,gDACAH,UACnBP,qBAAWS,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,2CAYxBiB,kBADAL,kBARFX,EAAG,SAAUO,EAAMY,KAAK,MAEpBV,QACAF,EAAMM,OAAO,GAEfN,EAAMa,WAAW,GAChBb,EAAMc,aAAa,GACdd,EAAMK,QAAQ,GAGnBL,EAAMK,QAAQ,EAAIL,EAAMM,OAAO,CAAG,GAAK,8XAIzD,CAEAZ,EACE,WACA,CACEkB,MAAO,KAAK,EACZpB,IAAK,KAAK,EACVmB,QAAS,KAAK,EACdN,SAAU,KAAK,EACfQ,YAAa,KAAK,EAClBC,cAAe,KAAK,EACpBR,QAAS,CAAA,EACTE,SAAU,KAAK,CACjB,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBlB,EAAQV,EACZ,CACEE,IAAKyB,EAAGzB,GAAG,CACXmB,QAASM,EAAGN,OAAO,CACnBN,SAAUY,EAAGZ,QAAQ,CACrBQ,YAAaI,EAAGJ,WAAW,CAC3BC,cAAeG,EAAGH,aAAa,CAC/BR,QAASW,EAAGX,OAAO,CACnBE,SAASW,CAAY,EACnBF,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAJ,GAMF,OAHA3B,EAAa,KACXO,EAAesB,EAAI,CAAC,MAAM,CAC5B,yCAGwBpB,UACnBE,EAAWC,GAGlB,EAEF,gBAAeD,CAAO"}

package/es/switch/style.js

@@ -134,5 +134,4 @@ import{css as r}from"@moneko/css";export const style=r`
       transform: rotate(360deg);
     }
   }
-`;
-//# sourceMappingURL=style.js.map
+`;

package/es/switch/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/switch/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .switch {\n    position: relative;\n    display: inline-block;\n    border-radius: 12px;\n    padding: 2px;\n    font-size: 12px;\n    background-color: var(--primary-border);\n    opacity: 1;\n    outline: 0;\n    box-shadow:\n      inset 0 0 0 0 var(--primary-color),\n      0 0 0 0 var(--primary-hover),\n      0 0 0 0 var(--primary-border);\n    transition:\n      0.4s box-shadow,\n      var(--transition-duration) background-color,\n      var(--transition-duration) opacity;\n    cursor: pointer;\n    inline-size: fit-content;\n    min-inline-size: 44px;\n    block-size: 22px;\n    line-height: 18px;\n    user-select: none;\n    box-sizing: border-box;\n\n    &::before {\n      color: var(--primary-secondary);\n      padding-inline: 20px 8px;\n      transition-duration: var(--transition-duration);\n      transition-property: color, padding, background-color;\n      content: attr(text-off) '';\n    }\n\n    &::after {\n      position: absolute;\n      margin: auto;\n      border: 1.5px solid #fff;\n      border-radius: 12px;\n      background-color: #fff;\n      outline: 2.05px solid #fff;\n      box-shadow: 0 2px 4px 1px var(--primary-shadow);\n      transition:\n        0.6s transform ease,\n        var(--transition-duration) padding ease,\n        var(--transition-duration) inset-inline-start ease,\n        var(--transition-duration) background-color 0.1s,\n        var(--transition-duration) border-color;\n      outline-offset: -0.05px;\n      inset-block: 3px;\n      block-size: 14px;\n      min-inline-size: 14px;\n      content: '';\n      inset-inline-start: 4px;\n      box-sizing: border-box;\n    }\n\n    &:not([aria-disabled]),\n    &[aria-disabled='false'] {\n      &:not(.loading) {\n        &:focus {\n          box-shadow:\n            inset 0 0 0 0 var(--primary-color),\n            0 0 0 1px var(--primary-hover),\n            0 0 1px 3px var(--primary-border);\n\n          &.checked {\n            box-shadow:\n              inset 0 0 3px 12px var(--primary-color),\n              0 0 0 1px var(--primary-hover),\n              0 0 1px 3px var(--primary-border);\n          }\n        }\n\n        &:hover {\n          background-color: var(--primary-secondary-bg);\n        }\n\n        &:active {\n          &::after {\n            padding-inline: 10px;\n            background-color: var(--primary-hover);\n          }\n\n          &.checked {\n            &::after {\n              transform: translateX(-10px);\n            }\n          }\n        }\n      }\n    }\n\n    &.loading,\n    &[aria-disabled]:not([aria-disabled='false']) {\n      color: var(--disable-color);\n      background-color: var(--disable-bg);\n      opacity: 0.8;\n      cursor: not-allowed;\n    }\n  }\n\n  .checked {\n    box-shadow:\n      inset 0 0 3px 12px var(--primary-color),\n      0 0 0 0 var(--primary-hover),\n      0 0 0 0 var(--primary-border);\n\n    &::before {\n      color: #fff;\n      padding-inline: 8px 20px;\n      content: attr(text-on) '';\n    }\n\n    &::after {\n      inset-inline-start: calc(100% - 18px);\n    }\n  }\n\n  .loading {\n    &::after {\n      border-block-start-color: var(--primary-color);\n      border-block-end-color: var(--primary-color);\n      animation: switch-loading 1.5s infinite linear;\n    }\n  }\n\n  @keyframes switch-loading {\n    form {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIzB,CAAC,AAAC"}
+{"version":3,"sources":["components/switch/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .switch {\n    position: relative;\n    display: inline-block;\n    border-radius: 12px;\n    padding: 2px;\n    font-size: 12px;\n    background-color: var(--primary-border);\n    opacity: 1;\n    outline: 0;\n    box-shadow:\n      inset 0 0 0 0 var(--primary-color),\n      0 0 0 0 var(--primary-hover),\n      0 0 0 0 var(--primary-border);\n    transition:\n      0.4s box-shadow,\n      var(--transition-duration) background-color,\n      var(--transition-duration) opacity;\n    cursor: pointer;\n    inline-size: fit-content;\n    min-inline-size: 44px;\n    block-size: 22px;\n    line-height: 18px;\n    user-select: none;\n    box-sizing: border-box;\n\n    &::before {\n      color: var(--primary-secondary);\n      padding-inline: 20px 8px;\n      transition-duration: var(--transition-duration);\n      transition-property: color, padding, background-color;\n      content: attr(text-off) '';\n    }\n\n    &::after {\n      position: absolute;\n      margin: auto;\n      border: 1.5px solid #fff;\n      border-radius: 12px;\n      background-color: #fff;\n      outline: 2.05px solid #fff;\n      box-shadow: 0 2px 4px 1px var(--primary-shadow);\n      transition:\n        0.6s transform ease,\n        var(--transition-duration) padding ease,\n        var(--transition-duration) inset-inline-start ease,\n        var(--transition-duration) background-color 0.1s,\n        var(--transition-duration) border-color;\n      outline-offset: -0.05px;\n      inset-block: 3px;\n      block-size: 14px;\n      min-inline-size: 14px;\n      content: '';\n      inset-inline-start: 4px;\n      box-sizing: border-box;\n    }\n\n    &:not([aria-disabled]),\n    &[aria-disabled='false'] {\n      &:not(.loading) {\n        &:focus {\n          box-shadow:\n            inset 0 0 0 0 var(--primary-color),\n            0 0 0 1px var(--primary-hover),\n            0 0 1px 3px var(--primary-border);\n\n          &.checked {\n            box-shadow:\n              inset 0 0 3px 12px var(--primary-color),\n              0 0 0 1px var(--primary-hover),\n              0 0 1px 3px var(--primary-border);\n          }\n        }\n\n        &:hover {\n          background-color: var(--primary-secondary-bg);\n        }\n\n        &:active {\n          &::after {\n            padding-inline: 10px;\n            background-color: var(--primary-hover);\n          }\n\n          &.checked {\n            &::after {\n              transform: translateX(-10px);\n            }\n          }\n        }\n      }\n    }\n\n    &.loading,\n    &[aria-disabled]:not([aria-disabled='false']) {\n      color: var(--disable-color);\n      background-color: var(--disable-bg);\n      opacity: 0.8;\n      cursor: not-allowed;\n    }\n  }\n\n  .checked {\n    box-shadow:\n      inset 0 0 3px 12px var(--primary-color),\n      0 0 0 0 var(--primary-hover),\n      0 0 0 0 var(--primary-border);\n\n    &::before {\n      color: #fff;\n      padding-inline: 8px 20px;\n      content: attr(text-on) '';\n    }\n\n    &::after {\n      inset-inline-start: calc(100% - 18px);\n    }\n  }\n\n  .loading {\n    &::after {\n      border-block-start-color: var(--primary-color);\n      border-block-end-color: var(--primary-color);\n      animation: switch-loading 1.5s infinite linear;\n    }\n  }\n\n  @keyframes switch-loading {\n    form {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIzB,CAAC,AAAC"}

package/es/table/index.js

@@ -1,2 +1 @@
-var t,e,r,n;function l(){return(l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}import{template as a}from"solid-js/web";import{spread as i}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{getOwner as m}from"solid-js/web";import{effect as c}from"solid-js/web";import{createComponent as d}from"solid-js/web";import{addEventListener as u}from"solid-js/web";let p=a("<span>"),g=a("<style> "),f=a("<style>"),h=a('<caption class="table-title"><slot name="title">'),v=a('<th class="table-cell">'),b=a('<tfoot class="table-foot"><tr>'),y=a("<table><thead><tr></tr></thead><tbody>"),w=a('<n-pagination class="table-pagination">',!0,!1),j=a("<th>"),$=a("<tr>"),_=a('<span class="empty-val">'),x=a("<td>");import{batch as z,createEffect as C,createMemo as k,createSignal as O,For as S,mergeProps as T,Show as P,splitProps as V,untrack as K}from"solid-js";import q from"@moneko/common/lib/isFunction";import E from"@moneko/common/lib/isObject";import F from"@moneko/common/lib/isString";import L from"@moneko/common/lib/isUndefined";import{css as U,cx as A}from"@moneko/css";import{customElement as B}from"solid-element";import{clearAttribute as D}from"../basic-config";import G,{block as H}from"../theme";import{styles as I}from"./styles";import"../pagination";let J={page:1,pageSize:20,total:0,totalText:void 0,size:void 0};function M(t){let{baseStyle:e}=G,[r,n]=V(t,["class","css","loading","summary","summaryText","columns","data","emptyVal","title","align","char","charoff","valign","pagination","size"]),[a]=V(r,["align","char","charoff","valign"]),[T,B]=O(!1),[D,H]=O(1),[M,N]=O(20),[Q,R]=O(0);function W(t){return{width:t.width,align:t.align,valign:t.valign,char:t.char,charoff:t.charoff,colspan:t.colspan,rowspan:t.rowspan}}C(()=>{z(()=>{r.pagination&&(H(r.pagination.page||1),N(r.pagination.pageSize||20),R(r.pagination.total||0))})});let X=k(()=>Object.assign(J,r.pagination)),Y=k(()=>{let t=[],e=!1;for(let n in r.columns)if(Object.prototype.hasOwnProperty.call(r.columns,n)){let a=r.columns[n],i=Object.assign({key:n,originKey:n,label:a.toString()},E(a)&&l({label:"order"===a.type&&"序号"||n},a));"order"===i.type&&(e=!0,i.render=function(t,e,r){return(()=>{let t=p();return s(t,()=>(D()-1)*M()+r+1),t})()}),t.push(i)}return K(T)!==e&&B(e),t});function Z(t){r.pagination&&(H(t.detail[0]),N(t.detail[1]),null==r.pagination.onChange||r.pagination.onChange.call(r.pagination,...t.detail))}return[(()=>{let t=g(),r=t.firstChild;return c(()=>r.data=e()),t})(),(()=>{let t=f();return t.textContent=I,t})(),d(P,{get when(){return r.css},get children(){let t=g(),e=t.firstChild;return c(()=>e.data=U(r.css)),t}}),(()=>{let t=y(),e=t.firstChild,l=e.firstChild,c=e.nextSibling;return i(t,o(n,{get class(){return A("table",r.size)},part:"table"}),!1,!0),s(t,d(P,{get when(){return r.title},get children(){let t=h(),e=t.firstChild;return e._$owner=m(),s(e,()=>r.title),t}}),e),i(e,o(a,{class:"table-head"}),!1,!0),s(l,d(S,{get each(){return Y()},children:t=>{let e=W(t);return(()=>{let r=j();return i(r,o(e,{class:"table-cell"}),!1,!0),s(r,()=>t.label),r})()}})),i(c,o(a,{class:"table-body"}),!1,!0),s(c,d(S,{get each(){return r.data},children:(t,e)=>(()=>{let n=$();return s(n,d(S,{get each(){return Y()},children:n=>{let l=W(n),a=k(()=>{if("order"===n.type){let t=X();return(t.page-1)*t.pageSize+e()+1}let l=t[n.key];return L(l)||null===l?(()=>{let t=_();return s(t,()=>r.emptyVal),t})():l});return(()=>{let r=x();return i(r,o(l,{class:"table-cell"}),!1,!0),s(r,d(P,{get when(){return q(n.render)},get fallback(){return d(a,{})},get children(){return n.render(t[n.key],t,e())}})),r})()}})),n})()})),s(t,d(P,{get when(){var u;return null==(u=r.summary)?void 0:u.length},get children(){let t=b(),e=t.firstChild;return i(t,a,!1,!0),s(e,d(P,{get when(){return T()},get children(){let t=v();return i(t,o(()=>W(Y()[0])),!1,!0),s(t,()=>r.summaryText),t}}),null),s(e,d(S,{get each(){return Y().filter(t=>!t.type||!["order"].includes(t.type))},children:t=>{let e=W(t),n=k(()=>{var e,n,l,a;return(null==(e=r.data)?void 0:e.length)&&(null==(n=r.summary)?void 0:n.includes(t.originKey))?(l=r.data,a=t.key,l.reduce(function(t,e){let r=e[a];return F(r)||L(r)||null===r?t:t+e[a]},0)):null});return(()=>{let t=x();return i(t,o(e,{class:"table-cell"}),!1,!0),s(t,n),t})()}}),null),t}}),null),t})(),d(P,{get when(){return r.pagination},get children(){let t=w();return u(t,"change",Z),t._$owner=m(),c(e=>{let n=D(),l=M(),a=Q(),i=X().totalText,o=X().size||r.size;return n!==e._v$&&(t.page=e._v$=n),l!==e._v$2&&(t.pageSize=e._v$2=l),a!==e._v$3&&(t.total=e._v$3=a),i!==e._v$4&&(t.totalText=e._v$4=i),o!==e._v$5&&(t.size=e._v$5=o),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),t}})]}(r=t||(t={})).left="left",r.right="right",r.center="center",r.justify="justify",r.char="char",(n=e||(e={})).top="top",n.middle="middle",n.bottom="bottom",n.baseline="baseline",B("n-table",{class:void 0,css:void 0,loading:!1,columns:{},data:[],emptyVal:"-",title:void 0,char:void 0,charoff:void 0,align:"left",valign:"middle",summary:void 0,summaryText:"合计",pagination:void 0,size:void 0},(t,e)=>{let r=e.element,n=T({css:r.css,columns:r.columns,data:r.data,pagination:r.pagination,summary:r.summary,summaryText:r.summaryText},t,{title:!!r.querySelector("[slot='title']")||t.title});return C(()=>{D(r,["css","columns","data","pagination","summary"])}),[(()=>{let t=f();return t.textContent=H,t})(),d(M,n)]});export default M;
-//# sourceMappingURL=index.js.map
+var t,e,r,n;function l(){return(l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}import{template as a}from"solid-js/web";import{spread as i}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{getOwner as m}from"solid-js/web";import{effect as c}from"solid-js/web";import{createComponent as d}from"solid-js/web";import{addEventListener as u}from"solid-js/web";let p=a("<span>"),g=a("<style> "),f=a("<style>"),h=a('<caption class="table-title"><slot name="title">'),v=a('<th class="table-cell">'),b=a('<tfoot class="table-foot"><tr>'),y=a("<table><thead><tr></tr></thead><tbody>"),w=a('<n-pagination class="table-pagination">',!0,!1),j=a("<th>"),$=a("<tr>"),_=a('<span class="empty-val">'),x=a("<td>");import{batch as z,createEffect as C,createMemo as k,createSignal as O,For as S,mergeProps as T,Show as P,splitProps as V,untrack as K}from"solid-js";import q from"@moneko/common/lib/isFunction";import E from"@moneko/common/lib/isObject";import F from"@moneko/common/lib/isString";import L from"@moneko/common/lib/isUndefined";import{css as U,cx as A}from"@moneko/css";import{customElement as B}from"solid-element";import{clearAttribute as D}from"../basic-config";import G,{block as H}from"../theme";import{styles as I}from"./styles";import"../pagination";let J={page:1,pageSize:20,total:0,totalText:void 0,size:void 0};function M(t){let{baseStyle:e}=G,[r,n]=V(t,["class","css","loading","summary","summaryText","columns","data","emptyVal","title","align","char","charoff","valign","pagination","size"]),[a]=V(r,["align","char","charoff","valign"]),[T,B]=O(!1),[D,H]=O(1),[M,N]=O(20),[Q,R]=O(0);function W(t){return{width:t.width,align:t.align,valign:t.valign,char:t.char,charoff:t.charoff,colspan:t.colspan,rowspan:t.rowspan}}C(()=>{z(()=>{r.pagination&&(H(r.pagination.page||1),N(r.pagination.pageSize||20),R(r.pagination.total||0))})});let X=k(()=>Object.assign(J,r.pagination)),Y=k(()=>{let t=[],e=!1;for(let n in r.columns)if(Object.prototype.hasOwnProperty.call(r.columns,n)){let a=r.columns[n],i=Object.assign({key:n,originKey:n,label:a.toString()},E(a)&&l({label:"order"===a.type&&"序号"||n},a));"order"===i.type&&(e=!0,i.render=function(t,e,r){return(()=>{let t=p();return s(t,()=>(D()-1)*M()+r+1),t})()}),t.push(i)}return K(T)!==e&&B(e),t});function Z(t){r.pagination&&(H(t.detail[0]),N(t.detail[1]),null==r.pagination.onChange||r.pagination.onChange.call(r.pagination,...t.detail))}return[(()=>{let t=g(),r=t.firstChild;return c(()=>r.data=e()),t})(),(()=>{let t=f();return t.textContent=I,t})(),d(P,{get when(){return r.css},get children(){let t=g(),e=t.firstChild;return c(()=>e.data=U(r.css)),t}}),(()=>{let t=y(),e=t.firstChild,l=e.firstChild,c=e.nextSibling;return i(t,o(n,{get class(){return A("table",r.size)},part:"table"}),!1,!0),s(t,d(P,{get when(){return r.title},get children(){let t=h(),e=t.firstChild;return e._$owner=m(),s(e,()=>r.title),t}}),e),i(e,o(a,{class:"table-head"}),!1,!0),s(l,d(S,{get each(){return Y()},children:t=>{let e=W(t);return(()=>{let r=j();return i(r,o(e,{class:"table-cell"}),!1,!0),s(r,()=>t.label),r})()}})),i(c,o(a,{class:"table-body"}),!1,!0),s(c,d(S,{get each(){return r.data},children:(t,e)=>(()=>{let n=$();return s(n,d(S,{get each(){return Y()},children:n=>{let l=W(n),a=k(()=>{if("order"===n.type){let t=X();return(t.page-1)*t.pageSize+e()+1}let l=t[n.key];return L(l)||null===l?(()=>{let t=_();return s(t,()=>r.emptyVal),t})():l});return(()=>{let r=x();return i(r,o(l,{class:"table-cell"}),!1,!0),s(r,d(P,{get when(){return q(n.render)},get fallback(){return d(a,{})},get children(){return n.render(t[n.key],t,e())}})),r})()}})),n})()})),s(t,d(P,{get when(){var u;return null==(u=r.summary)?void 0:u.length},get children(){let t=b(),e=t.firstChild;return i(t,a,!1,!0),s(e,d(P,{get when(){return T()},get children(){let t=v();return i(t,o(()=>W(Y()[0])),!1,!0),s(t,()=>r.summaryText),t}}),null),s(e,d(S,{get each(){return Y().filter(t=>!t.type||!["order"].includes(t.type))},children:t=>{let e=W(t),n=k(()=>{var e,n,l,a;return(null==(e=r.data)?void 0:e.length)&&(null==(n=r.summary)?void 0:n.includes(t.originKey))?(l=r.data,a=t.key,l.reduce(function(t,e){let r=e[a];return F(r)||L(r)||null===r?t:t+e[a]},0)):null});return(()=>{let t=x();return i(t,o(e,{class:"table-cell"}),!1,!0),s(t,n),t})()}}),null),t}}),null),t})(),d(P,{get when(){return r.pagination},get children(){let t=w();return u(t,"change",Z),t._$owner=m(),c(e=>{let n=D(),l=M(),a=Q(),i=X().totalText,o=X().size||r.size;return n!==e._v$&&(t.page=e._v$=n),l!==e._v$2&&(t.pageSize=e._v$2=l),a!==e._v$3&&(t.total=e._v$3=a),i!==e._v$4&&(t.totalText=e._v$4=i),o!==e._v$5&&(t.size=e._v$5=o),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),t}})]}(r=t||(t={})).left="left",r.right="right",r.center="center",r.justify="justify",r.char="char",(n=e||(e={})).top="top",n.middle="middle",n.bottom="bottom",n.baseline="baseline",B("n-table",{class:void 0,css:void 0,loading:!1,columns:{},data:[],emptyVal:"-",title:void 0,char:void 0,charoff:void 0,align:"left",valign:"middle",summary:void 0,summaryText:"合计",pagination:void 0,size:void 0},(t,e)=>{let r=e.element,n=T({css:r.css,columns:r.columns,data:r.data,pagination:r.pagination,summary:r.summary,summaryText:r.summaryText},t,{title:!!r.querySelector("[slot='title']")||t.title});return C(()=>{D(r,["css","columns","data","pagination","summary"])}),[(()=>{let t=f();return t.textContent=H,t})(),d(M,n)]});export default M;

package/es/table/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/table/index.tsx"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  Show,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction, isObject, isString, isUndefined } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement, PaginationProps } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { styles } from './styles';\n\nimport '../pagination';\n\ntype Col = Column<Record<string, Any>>;\nconst defaultPagination = { page: 1, pageSize: 20, total: 0, totalText: void 0, size: void 0 };\n\nfunction Table(_: TableProps) {\n  const { baseStyle } = theme;\n  const [local, other] = splitProps(_, [\n    'class',\n    'css',\n    'loading',\n    'summary',\n    'summaryText',\n    'columns',\n    'data',\n    'emptyVal',\n    'title',\n    'align',\n    'char',\n    'charoff',\n    'valign',\n    'pagination',\n    'size',\n  ]);\n  const [layout] = splitProps(local, ['align', 'char', 'charoff', 'valign']);\n  const [hasOrder, setHasOrder] = createSignal(false);\n  const [page, setPage] = createSignal(1);\n  const [pageSize, setPageSize] = createSignal(20);\n  const [total, setTotal] = createSignal(0);\n\n  createEffect(() => {\n    batch(() => {\n      if (local.pagination) {\n        setPage(local.pagination.page || 1);\n        setPageSize(local.pagination.pageSize || 20);\n        setTotal(local.pagination.total || 0);\n      }\n    });\n  });\n\n  function getLayout(col: Col) {\n    return {\n      width: col.width,\n      align: col.align,\n      valign: col.valign,\n      char: col.char,\n      charoff: col.charoff,\n      colspan: col.colspan,\n      rowspan: col.rowspan,\n    };\n  }\n  function sum(arr: Required<TableProps>['data'], key: string) {\n    return arr.reduce(function (prev, curr) {\n      const next = curr[key];\n\n      if (isString(next) || isUndefined(next) || next === null) {\n        return prev;\n      }\n      return prev + curr[key];\n    }, 0);\n  }\n  const pagination = createMemo(() => Object.assign(defaultPagination, local.pagination));\n  const columns = createMemo(() => {\n    const cols: Required<Col>[] = [];\n    let _hasOrder = false;\n\n    for (const key in local.columns) {\n      if (Object.prototype.hasOwnProperty.call(local.columns, key)) {\n        const col = local.columns[key];\n        const _col: Col = Object.assign(\n          { key, originKey: key, label: col.toString() },\n          isObject(col) && {\n            label: (col.type === 'order' && '序号') || key,\n            ...col,\n          },\n        );\n\n        if (_col.type === 'order') {\n          _hasOrder = true;\n          _col.render = function (_val: unknown, _row: unknown, i: number) {\n            return <span>{(page() - 1) * pageSize() + i + 1}</span>;\n          };\n        }\n        cols.push(_col as Required<Col>);\n      }\n    }\n    if (untrack(hasOrder) !== _hasOrder) {\n      setHasOrder(_hasOrder);\n    }\n    return cols;\n  });\n\n  function handlePageChange(e: CustomEvent<[page: number, pageSize: number]>) {\n    if (local.pagination) {\n      setPage(e.detail[0]);\n      setPageSize(e.detail[1]);\n      local.pagination.onChange?.(...e.detail);\n    }\n  }\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={styles} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <table {...other} class={cx('table', local.size)} part=\"table\">\n        <Show when={local.title}>\n          <caption class=\"table-title\">\n            <slot name=\"title\">{local.title}</slot>\n          </caption>\n        </Show>\n        <thead {...layout} class=\"table-head\">\n          <tr>\n            <For each={columns()}>\n              {(col) => {\n                const _layout = getLayout(col);\n\n                return (\n                  <th {..._layout} class=\"table-cell\">\n                    {col.label}\n                  </th>\n                );\n              }}\n            </For>\n          </tr>\n        </thead>\n        <tbody {...layout} class=\"table-body\">\n          <For each={local.data}>\n            {(row, i) => {\n              return (\n                <tr>\n                  <For each={columns()}>\n                    {(col) => {\n                      const _layout = getLayout(col);\n                      const Row = createMemo(() => {\n                        if (col.type === 'order') {\n                          const _pagination = pagination();\n\n                          return (_pagination.page - 1) * _pagination.pageSize + i() + 1;\n                        }\n                        const val = row[col.key];\n                        const isEmpty = isUndefined(val) || val === null;\n\n                        if (isEmpty) {\n                          return <span class=\"empty-val\">{local.emptyVal}</span>;\n                        }\n                        return val;\n                      });\n\n                      return (\n                        <td {..._layout} class=\"table-cell\">\n                          <Show when={isFunction(col.render)} fallback={<Row />}>\n                            {col.render(row[col.key], row, i())}\n                          </Show>\n                        </td>\n                      );\n                    }}\n                  </For>\n                </tr>\n              );\n            }}\n          </For>\n        </tbody>\n        <Show when={local.summary?.length}>\n          <tfoot class=\"table-foot\" {...layout}>\n            <tr>\n              <Show when={hasOrder()}>\n                <th class=\"table-cell\" {...getLayout(columns()[0])}>\n                  {local.summaryText}\n                </th>\n              </Show>\n              <For each={columns().filter((c) => !c.type || !['order'].includes(c.type))}>\n                {(col) => {\n                  const _layout = getLayout(col);\n                  const val = createMemo(() => {\n                    if (local.data?.length && local.summary?.includes(col.originKey)) {\n                      return sum(local.data, col.key);\n                    }\n                    return null;\n                  });\n\n                  return (\n                    <td {..._layout} class=\"table-cell\">\n                      {val()}\n                    </td>\n                  );\n                }}\n              </For>\n            </tr>\n          </tfoot>\n        </Show>\n      </table>\n      <Show when={local.pagination}>\n        <n-pagination\n          class=\"table-pagination\"\n          page={page()}\n          page-size={pageSize()}\n          total={total()}\n          total-text={pagination().totalText}\n          size={pagination().size || local.size}\n          onChange={handlePageChange}\n        />\n      </Show>\n    </>\n  );\n}\n\n/** API\n * @since 2.1.0\n */\nexport interface TableProps<T extends Record<string, Any> = Record<string, Any>> extends Cell {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义类名 */\n  css?: string;\n  /** 加载中 */\n  loading?: boolean;\n  /** 单元格值为 null 或 undefined 时的回填\n   * @default '-'\n   */\n  emptyVal?: string;\n  /** 栏配置 */\n  columns?: Record<string, Column<T> | string>;\n  /** 数据源 */\n  data?: T[];\n  /** 表格标题, 支持直接赋值给 'title' 属性, 或者通过[slot=\"title\"]插槽 */\n  title?: JSX.Element | 'slot';\n  /** 汇总行 */\n  summary?: (keyof T)[];\n  /** 汇总行描述\n   * @default '合计'\n   */\n  summaryText?: JSX.Element;\n  /** 分页器\n   * @default false\n   */\n  pagination?: PaginationProps | false;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  children?: JSX.Element;\n}\n/** 栏 */\ninterface Column<T extends Record<string, Any>> extends Cell {\n  /** 自定义取值的 key */\n  key?: keyof T;\n  /** 原始 key */\n  originKey?: keyof T;\n  /** 单元格表头标题 */\n  label?: JSX.Element;\n  /** 自定义渲染单元格 */\n  render?(item: T[keyof T], row: T, index: number): JSX.Element;\n  /** 单元格横跨的列数 */\n  colspan?: number;\n  /** 单元格横跨的行数 */\n  rowspan?: number;\n  /** 设置为 'order' 时则当作序号行 */\n  type?: 'order';\n  /** 单元格宽 */\n  width?: number;\n}\n\n/** 单元格布局排列 */\ninterface Cell {\n  /** 单元格内容的水平对齐方式\n   * @default 'left'\n   */\n  align?: keyof typeof Align;\n  /** 规定根据哪个字符来进行文本对齐 */\n  char?: string;\n  /** 规定第一个对齐字符的偏移量 */\n  charoff?: number;\n  /** 单元格内容的垂直对齐方式\n   * @default 'middle'\n   */\n  valign?: keyof typeof Valign;\n}\n/** 水平对齐方式 */\nenum Align {\n  /** 左对齐 */\n  left = 'left',\n  /** 右对齐 */\n  right = 'right',\n  /** 居中对齐 */\n  center = 'center',\n  /** 对行进行伸展，这样每行都可以有相等的长度 */\n  justify = 'justify',\n  /** 将内容对准指定字符 */\n  char = 'char',\n}\n/** 垂直对齐方式 */\nenum Valign {\n  /** 上对齐 */\n  top = 'top',\n  /** 居中对齐 */\n  middle = 'middle',\n  /** 下对齐 */\n  bottom = 'bottom',\n  /** 与基线对齐 */\n  baseline = 'baseline',\n}\nexport type TableElement = CustomElement<TableProps>;\n\ncustomElement<TableProps>(\n  'n-table',\n  {\n    class: void 0,\n    css: void 0,\n    loading: false,\n    columns: {},\n    data: [],\n    emptyVal: '-',\n    title: void 0,\n    char: void 0,\n    charoff: void 0,\n    align: Align.left,\n    valign: Valign.middle,\n    summary: void 0,\n    summaryText: '合计',\n    pagination: void 0,\n    size: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        columns: el.columns,\n        data: el.data,\n        pagination: el.pagination,\n        summary: el.summary,\n        summaryText: el.summaryText,\n      },\n      _,\n      {\n        title: !!el.querySelector(\"[slot='title']\") || _.title,\n      },\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css', 'columns', 'data', 'pagination', 'summary']);\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Table {...props} />\n      </>\n    );\n  },\n);\nexport default Table;\n"],"names":["Align","Valign","batch","createEffect","createMemo","createSignal","For","mergeProps","Show","splitProps","untrack","isFunction","isObject","isString","isUndefined","css","cx","customElement","clearAttribute","theme","block","styles","defaultPagination","page","pageSize","total","totalText","size","Table","_","baseStyle","local","other","layout","hasOrder","setHasOrder","setPage","setPageSize","setTotal","getLayout","col","width","align","valign","char","charoff","colspan","rowspan","pagination","Object","assign","columns","cols","_hasOrder","key","prototype","hasOwnProperty","call","_col","originKey","label","toString","type","render","_val","_row","i","push","handlePageChange","e","detail","onChange","title","_layout","data","row","Row","_pagination","val","emptyVal","summary","length","summaryText","filter","c","includes","arr","reduce","prev","curr","next","class","loading","opt","el","element","props","querySelector"],"mappings":"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"}
+{"version":3,"sources":["components/table/index.tsx"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  Show,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction, isObject, isString, isUndefined } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement, PaginationProps } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { styles } from './styles';\n\nimport '../pagination';\n\ntype Col = Column<Record<string, Any>>;\nconst defaultPagination = { page: 1, pageSize: 20, total: 0, totalText: void 0, size: void 0 };\n\nfunction Table(_: TableProps) {\n  const { baseStyle } = theme;\n  const [local, other] = splitProps(_, [\n    'class',\n    'css',\n    'loading',\n    'summary',\n    'summaryText',\n    'columns',\n    'data',\n    'emptyVal',\n    'title',\n    'align',\n    'char',\n    'charoff',\n    'valign',\n    'pagination',\n    'size',\n  ]);\n  const [layout] = splitProps(local, ['align', 'char', 'charoff', 'valign']);\n  const [hasOrder, setHasOrder] = createSignal(false);\n  const [page, setPage] = createSignal(1);\n  const [pageSize, setPageSize] = createSignal(20);\n  const [total, setTotal] = createSignal(0);\n\n  createEffect(() => {\n    batch(() => {\n      if (local.pagination) {\n        setPage(local.pagination.page || 1);\n        setPageSize(local.pagination.pageSize || 20);\n        setTotal(local.pagination.total || 0);\n      }\n    });\n  });\n\n  function getLayout(col: Col) {\n    return {\n      width: col.width,\n      align: col.align,\n      valign: col.valign,\n      char: col.char,\n      charoff: col.charoff,\n      colspan: col.colspan,\n      rowspan: col.rowspan,\n    };\n  }\n  function sum(arr: Required<TableProps>['data'], key: string) {\n    return arr.reduce(function (prev, curr) {\n      const next = curr[key];\n\n      if (isString(next) || isUndefined(next) || next === null) {\n        return prev;\n      }\n      return prev + curr[key];\n    }, 0);\n  }\n  const pagination = createMemo(() => Object.assign(defaultPagination, local.pagination));\n  const columns = createMemo(() => {\n    const cols: Required<Col>[] = [];\n    let _hasOrder = false;\n\n    for (const key in local.columns) {\n      if (Object.prototype.hasOwnProperty.call(local.columns, key)) {\n        const col = local.columns[key];\n        const _col: Col = Object.assign(\n          { key, originKey: key, label: col.toString() },\n          isObject(col) && {\n            label: (col.type === 'order' && '序号') || key,\n            ...col,\n          },\n        );\n\n        if (_col.type === 'order') {\n          _hasOrder = true;\n          _col.render = function (_val: unknown, _row: unknown, i: number) {\n            return <span>{(page() - 1) * pageSize() + i + 1}</span>;\n          };\n        }\n        cols.push(_col as Required<Col>);\n      }\n    }\n    if (untrack(hasOrder) !== _hasOrder) {\n      setHasOrder(_hasOrder);\n    }\n    return cols;\n  });\n\n  function handlePageChange(e: CustomEvent<[page: number, pageSize: number]>) {\n    if (local.pagination) {\n      setPage(e.detail[0]);\n      setPageSize(e.detail[1]);\n      local.pagination.onChange?.(...e.detail);\n    }\n  }\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={styles} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <table {...other} class={cx('table', local.size)} part=\"table\">\n        <Show when={local.title}>\n          <caption class=\"table-title\">\n            <slot name=\"title\">{local.title}</slot>\n          </caption>\n        </Show>\n        <thead {...layout} class=\"table-head\">\n          <tr>\n            <For each={columns()}>\n              {(col) => {\n                const _layout = getLayout(col);\n\n                return (\n                  <th {..._layout} class=\"table-cell\">\n                    {col.label}\n                  </th>\n                );\n              }}\n            </For>\n          </tr>\n        </thead>\n        <tbody {...layout} class=\"table-body\">\n          <For each={local.data}>\n            {(row, i) => {\n              return (\n                <tr>\n                  <For each={columns()}>\n                    {(col) => {\n                      const _layout = getLayout(col);\n                      const Row = createMemo(() => {\n                        if (col.type === 'order') {\n                          const _pagination = pagination();\n\n                          return (_pagination.page - 1) * _pagination.pageSize + i() + 1;\n                        }\n                        const val = row[col.key];\n                        const isEmpty = isUndefined(val) || val === null;\n\n                        if (isEmpty) {\n                          return <span class=\"empty-val\">{local.emptyVal}</span>;\n                        }\n                        return val;\n                      });\n\n                      return (\n                        <td {..._layout} class=\"table-cell\">\n                          <Show when={isFunction(col.render)} fallback={<Row />}>\n                            {col.render(row[col.key], row, i())}\n                          </Show>\n                        </td>\n                      );\n                    }}\n                  </For>\n                </tr>\n              );\n            }}\n          </For>\n        </tbody>\n        <Show when={local.summary?.length}>\n          <tfoot class=\"table-foot\" {...layout}>\n            <tr>\n              <Show when={hasOrder()}>\n                <th class=\"table-cell\" {...getLayout(columns()[0])}>\n                  {local.summaryText}\n                </th>\n              </Show>\n              <For each={columns().filter((c) => !c.type || !['order'].includes(c.type))}>\n                {(col) => {\n                  const _layout = getLayout(col);\n                  const val = createMemo(() => {\n                    if (local.data?.length && local.summary?.includes(col.originKey)) {\n                      return sum(local.data, col.key);\n                    }\n                    return null;\n                  });\n\n                  return (\n                    <td {..._layout} class=\"table-cell\">\n                      {val()}\n                    </td>\n                  );\n                }}\n              </For>\n            </tr>\n          </tfoot>\n        </Show>\n      </table>\n      <Show when={local.pagination}>\n        <n-pagination\n          class=\"table-pagination\"\n          page={page()}\n          page-size={pageSize()}\n          total={total()}\n          total-text={pagination().totalText}\n          size={pagination().size || local.size}\n          onChange={handlePageChange}\n        />\n      </Show>\n    </>\n  );\n}\n\n/** API\n * @since 2.1.0\n */\nexport interface TableProps<T extends Record<string, Any> = Record<string, Any>> extends Cell {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义类名 */\n  css?: string;\n  /** 加载中 */\n  loading?: boolean;\n  /** 单元格值为 null 或 undefined 时的回填\n   * @default '-'\n   */\n  emptyVal?: string;\n  /** 栏配置 */\n  columns?: Record<string, Column<T> | string>;\n  /** 数据源 */\n  data?: T[];\n  /** 表格标题, 支持直接赋值给 'title' 属性, 或者通过[slot=\"title\"]插槽 */\n  title?: JSX.Element | 'slot';\n  /** 汇总行 */\n  summary?: (keyof T)[];\n  /** 汇总行描述\n   * @default '合计'\n   */\n  summaryText?: JSX.Element;\n  /** 分页器\n   * @default false\n   */\n  pagination?: PaginationProps | false;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  children?: JSX.Element;\n}\n/** 栏 */\ninterface Column<T extends Record<string, Any>> extends Cell {\n  /** 自定义取值的 key */\n  key?: keyof T;\n  /** 原始 key */\n  originKey?: keyof T;\n  /** 单元格表头标题 */\n  label?: JSX.Element;\n  /** 自定义渲染单元格 */\n  render?(item: T[keyof T], row: T, index: number): JSX.Element;\n  /** 单元格横跨的列数 */\n  colspan?: number;\n  /** 单元格横跨的行数 */\n  rowspan?: number;\n  /** 设置为 'order' 时则当作序号行 */\n  type?: 'order';\n  /** 单元格宽 */\n  width?: number;\n}\n\n/** 单元格布局排列 */\ninterface Cell {\n  /** 单元格内容的水平对齐方式\n   * @default 'left'\n   */\n  align?: keyof typeof Align;\n  /** 规定根据哪个字符来进行文本对齐 */\n  char?: string;\n  /** 规定第一个对齐字符的偏移量 */\n  charoff?: number;\n  /** 单元格内容的垂直对齐方式\n   * @default 'middle'\n   */\n  valign?: keyof typeof Valign;\n}\n/** 水平对齐方式 */\nenum Align {\n  /** 左对齐 */\n  left = 'left',\n  /** 右对齐 */\n  right = 'right',\n  /** 居中对齐 */\n  center = 'center',\n  /** 对行进行伸展，这样每行都可以有相等的长度 */\n  justify = 'justify',\n  /** 将内容对准指定字符 */\n  char = 'char',\n}\n/** 垂直对齐方式 */\nenum Valign {\n  /** 上对齐 */\n  top = 'top',\n  /** 居中对齐 */\n  middle = 'middle',\n  /** 下对齐 */\n  bottom = 'bottom',\n  /** 与基线对齐 */\n  baseline = 'baseline',\n}\nexport type TableElement = CustomElement<TableProps>;\n\ncustomElement<TableProps>(\n  'n-table',\n  {\n    class: void 0,\n    css: void 0,\n    loading: false,\n    columns: {},\n    data: [],\n    emptyVal: '-',\n    title: void 0,\n    char: void 0,\n    charoff: void 0,\n    align: Align.left,\n    valign: Valign.middle,\n    summary: void 0,\n    summaryText: '合计',\n    pagination: void 0,\n    size: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        columns: el.columns,\n        data: el.data,\n        pagination: el.pagination,\n        summary: el.summary,\n        summaryText: el.summaryText,\n      },\n      _,\n      {\n        title: !!el.querySelector(\"[slot='title']\") || _.title,\n      },\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css', 'columns', 'data', 'pagination', 'summary']);\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Table {...props} />\n      </>\n    );\n  },\n);\nexport default Table;\n"],"names":["Align","Valign","batch","createEffect","createMemo","createSignal","For","mergeProps","Show","splitProps","untrack","isFunction","isObject","isString","isUndefined","css","cx","customElement","clearAttribute","theme","block","styles","defaultPagination","page","pageSize","total","totalText","size","Table","_","baseStyle","local","other","layout","hasOrder","setHasOrder","setPage","setPageSize","setTotal","getLayout","col","width","align","valign","char","charoff","colspan","rowspan","pagination","Object","assign","columns","cols","_hasOrder","key","prototype","hasOwnProperty","call","_col","originKey","label","toString","type","render","_val","_row","i","push","handlePageChange","e","detail","onChange","title","_layout","data","row","Row","_pagination","val","emptyVal","summary","length","summaryText","filter","c","includes","arr","reduce","prev","curr","next","class","loading","opt","el","element","props","querySelector"],"mappings":"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"}

package/es/table/styles.js

@@ -118,5 +118,4 @@ import{css as t}from"@moneko/css";export const styles=t`
     margin-block-start: 16px;
     margin-inline-start: auto;
   }
-`;
-//# sourceMappingURL=styles.js.map
+`;

package/es/table/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/table/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n  :host {\n    --table-heading-bg: var(--border-color);\n    --distance-horizontal: 16px;\n    --distance-vertical: 8px;\n  }\n\n  .table-cell {\n    padding: var(--distance-vertical) var(--distance-horizontal);\n\n    n-button::part(button) {\n      padding: 0;\n      min-block-size: unset;\n    }\n  }\n\n  .small {\n    --distance-horizontal: 12px;\n    --distance-vertical: 6px;\n  }\n\n  .large {\n    --distance-horizontal: 20px;\n    --distance-vertical: 10px;\n  }\n\n  .table {\n    border-collapse: collapse;\n    display: table;\n    border-block-end: 1px solid var(--table-heading-bg);\n    inline-size: 100%;\n    max-inline-size: 100%;\n    border-spacing: 0;\n    transition-property: border-color;\n    word-break: break-all;\n\n    &:has(.table-foot) {\n      border-block-end: none;\n    }\n\n    .table-title {\n      padding-block: var(--distance-vertical);\n      font-weight: bold;\n      text-align: start;\n    }\n\n    th {\n      font-weight: 500;\n      color: var(--text-heading);\n      background-color: var(--table-heading-bg);\n      transition-property: background-color, color;\n    }\n\n    .table-head {\n      .table-cell {\n        min-inline-size: 54px;\n\n        &:has(+ .table-cell) {\n          position: relative;\n\n          &::after {\n            position: absolute;\n            z-index: 1;\n            display: block;\n            margin: auto;\n            background-color: var(--text-secondary);\n            inset-block: 0;\n            inset-inline-end: 0;\n            content: '';\n            block-size: 16px;\n            inline-size: 1px;\n            opacity: 0.5;\n          }\n        }\n      }\n    }\n\n    :not(tfoot) {\n      tr:first-child th:first-child {\n        border-start-start-radius: var(--border-radius);\n      }\n\n      tr:first-child th:last-child {\n        border-start-end-radius: var(--border-radius);\n      }\n    }\n\n    .table-body {\n      tr:nth-child(2n) {\n        background-color: var(--primary-details-bg);\n      }\n\n      tr:hover {\n        background-color: var(--primary-selection);\n      }\n    }\n\n    .table-foot {\n      background-color: var(--primary-selection);\n\n      tr:last-child th:first-child {\n        border-end-start-radius: var(--border-radius);\n      }\n\n      tr:last-child td:last-child {\n        border-end-end-radius: var(--border-radius);\n      }\n    }\n\n    .empty-val {\n      opacity: 0.5;\n    }\n  }\n\n  .table-pagination {\n    display: block;\n    inline-size: fit-content;\n    margin-block-start: 16px;\n    margin-inline-start: auto;\n  }\n`;\n"],"names":["css","styles"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwH1B,CAAC,AAAC"}
+{"version":3,"sources":["components/table/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n  :host {\n    --table-heading-bg: var(--border-color);\n    --distance-horizontal: 16px;\n    --distance-vertical: 8px;\n  }\n\n  .table-cell {\n    padding: var(--distance-vertical) var(--distance-horizontal);\n\n    n-button::part(button) {\n      padding: 0;\n      min-block-size: unset;\n    }\n  }\n\n  .small {\n    --distance-horizontal: 12px;\n    --distance-vertical: 6px;\n  }\n\n  .large {\n    --distance-horizontal: 20px;\n    --distance-vertical: 10px;\n  }\n\n  .table {\n    border-collapse: collapse;\n    display: table;\n    border-block-end: 1px solid var(--table-heading-bg);\n    inline-size: 100%;\n    max-inline-size: 100%;\n    border-spacing: 0;\n    transition-property: border-color;\n    word-break: break-all;\n\n    &:has(.table-foot) {\n      border-block-end: none;\n    }\n\n    .table-title {\n      padding-block: var(--distance-vertical);\n      font-weight: bold;\n      text-align: start;\n    }\n\n    th {\n      font-weight: 500;\n      color: var(--text-heading);\n      background-color: var(--table-heading-bg);\n      transition-property: background-color, color;\n    }\n\n    .table-head {\n      .table-cell {\n        min-inline-size: 54px;\n\n        &:has(+ .table-cell) {\n          position: relative;\n\n          &::after {\n            position: absolute;\n            z-index: 1;\n            display: block;\n            margin: auto;\n            background-color: var(--text-secondary);\n            inset-block: 0;\n            inset-inline-end: 0;\n            content: '';\n            block-size: 16px;\n            inline-size: 1px;\n            opacity: 0.5;\n          }\n        }\n      }\n    }\n\n    :not(tfoot) {\n      tr:first-child th:first-child {\n        border-start-start-radius: var(--border-radius);\n      }\n\n      tr:first-child th:last-child {\n        border-start-end-radius: var(--border-radius);\n      }\n    }\n\n    .table-body {\n      tr:nth-child(2n) {\n        background-color: var(--primary-details-bg);\n      }\n\n      tr:hover {\n        background-color: var(--primary-selection);\n      }\n    }\n\n    .table-foot {\n      background-color: var(--primary-selection);\n\n      tr:last-child th:first-child {\n        border-end-start-radius: var(--border-radius);\n      }\n\n      tr:last-child td:last-child {\n        border-end-end-radius: var(--border-radius);\n      }\n    }\n\n    .empty-val {\n      opacity: 0.5;\n    }\n  }\n\n  .table-pagination {\n    display: block;\n    inline-size: fit-content;\n    margin-block-start: 16px;\n    margin-inline-start: auto;\n  }\n`;\n"],"names":["css","styles"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwH1B,CAAC,AAAC"}

package/es/tabs/index.js

@@ -1,12 +1 @@
-import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as l}from"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as o}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as a}from"solid-js/web";import{classList as d}from"solid-js/web";import{addEventListener as v}from"solid-js/web";let f=t("<style> "),u=t("<style>"),c=t(`<n-button class="tab add">＋`,!0,!1),m=t('<div><div class="items">'),p=t('<div class="content">'),b=t(`<span class="remove">⛌`),g=t("<n-button>",!0,!1);import{createEffect as h,createMemo as $,createSignal as _,For as w,mergeProps as L,onCleanup as x,onMount as y,Show as j,untrack as C}from"solid-js";import k from"@moneko/common/lib/isFunction";import E from"@moneko/common/lib/passiveSupported";import{css as T,cx as W}from"@moneko/css";import{customElement as N}from"solid-element";import{clearAttribute as V,FieldName as D}from"../basic-config";import O from"../get-options";import P,{block as X}from"../theme";import{addCss as A,btnCss as F,style as S}from"./style";import"../button";function Y(t){let n,L,N;let{baseStyle:V,isDark:X}=P,[Y,q]=_(),[z,B]=_(""),[G,H]=_({left:!1,right:!1}),I=$(()=>X()?T`
-        :host {
-          --tab-current-bg: var(--component-bg);
-          --tab-bg: rgb(255 255 255 / 4%);
-        }
-      `:T`
-      :host {
-        --tab-bg: var(--primary-details-bg);
-        --tab-current-bg: var(--component-bg);
-      }
-    `),J=$(()=>Object.assign({},D,t.fieldNames)),K=$(()=>O(t.items,J())),M=$(()=>K().find(e=>e[J().value]===Y()));function Q(e,l){if(!t.disabled&&!e.disabled){let i=e[J().value];void 0===t.value&&q(i),k(t.onChange)&&t.onChange(i,e,l)}}function R(e,t){"Enter"===t.key&&Q(e,t)}function U(e,l,i){i.stopPropagation(),i.preventDefault(),k(t.onEdit)&&t.onEdit(e,l,i)}function Z(e){if(N){var t;let l=n.offsetWidth,i=(null==L?void 0:L.offsetWidth)||0,o=N.scrollWidth;if(o>l-i){let t=0;e&&(E||(e.stopPropagation(),e.preventDefault()),t=0!==e.deltaX?e.deltaX:e.deltaY);let l=N.scrollLeft+t;N.scrollTo({left:l}),H({left:l>0,right:o>l+N.offsetWidth})}else H({left:!1,right:!1});let r=null==(t=C(M))?void 0:t.ref;B(`.tabs {--w: ${r.offsetWidth}px;--left: ${r.offsetLeft-N.scrollLeft+N.offsetLeft}px;--s:${N.scrollLeft}px}`)}}h(()=>{let e=C(Y);void 0!==t.value?e=t.value:void 0!==t.defaultValue?e=t.defaultValue:K()[0]&&(e=K()[0][J().value]),e!==C(Y)&&q(e)}),h(()=>{var e;let t,l;let i=null==(e=M())?void 0:e.ref;i?t=setTimeout(()=>{clearTimeout(t),N&&(H({left:!1,right:!1}),N.scrollTo({left:i.offsetLeft-N.offsetLeft,behavior:"smooth"})),B(`.tabs {--w: ${i.offsetWidth}px;--left: ${i.offsetLeft-N.scrollLeft+N.offsetLeft}px;--s:${N.scrollLeft}px}`),l=setTimeout(()=>{clearTimeout(l),Z()},300)},0):B(""),x(()=>{clearTimeout(t),clearTimeout(l)})});let[ee,et]=_("slide-in");h(()=>{var e;return t.animated&&et("slide-in"),null==(e=M())?void 0:e.content});let el=$(()=>{var e,l;return k(null==(e=t.extra)?void 0:e.left)?t.extra.left():null==(l=t.extra)?void 0:l.left}),ei=$(()=>{var e,l;return k(null==(e=t.extra)?void 0:e.right)?t.extra.right():null==(l=t.extra)?void 0:l.right}),eo=$(()=>{var e;let t=null==(e=M())?void 0:e.content;return k(t)?t():t});function er(){t.animated&&et("")}return y(()=>{null==n||n.addEventListener("wheel",Z,{passive:E})}),x(()=>{null==n||n.removeEventListener("wheel",Z,!1)}),[(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=V()),e})(),(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=I()),e})(),(()=>{let e=u();return e.textContent=S,e})(),(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=z()),e})(),s(j,{get when(){return t.css},get children(){let e=f(),l=e.firstChild;return r(()=>l.data=T(t.css)),e}}),(()=>{let d=m(),f=n,u=d.firstChild,p=N;return"function"==typeof f?e(f,d):n=d,i(d,s(j,{get when(){return el()},get children(){return el()}}),u),"function"==typeof p?e(p,u):N=u,i(u,s(w,{get each(){return K()},children:(l,n)=>{let d=$(()=>t.disabled||l.disabled),{icon:f,value:u,label:c}=J(),m=$(()=>void 0!==Y()&&l[u]===Y());return(()=>{let t=g(),u=K()[n()].ref;return"function"==typeof u?e(u,t):K()[n()].ref=t,v(t,"click",Q.bind(null,l),!0),v(t,"keyup",R.bind(null,l),!0),t.link=!0,t.css=F,t._$owner=o(),i(t,()=>l[c],null),i(t,s(j,{get when(){return l.closable},get children(){let e=b();return v(e,"click",U.bind(null,"remove",l),!0),e}}),null),r(e=>{let i=m()?"primary":"default",o=W("tab",l.class),r=!!m(),s=!!(m()&&0===n()),v=d()?-1:0,u=d(),c=l[f];return i!==e._v$6&&(t.type=e._v$6=i),o!==e._v$7&&a(t,e._v$7=o),r!==e._v$8&&t.classList.toggle("active",e._v$8=r),s!==e._v$9&&t.classList.toggle("first-active",e._v$9=s),v!==e._v$10&&(t.tabindex=e._v$10=v),u!==e._v$11&&(t.disabled=e._v$11=u),c!==e._v$12&&(t.icon=e._v$12=c),e},{_v$6:void 0,_v$7:void 0,_v$8:void 0,_v$9:void 0,_v$10:void 0,_v$11:void 0,_v$12:void 0}),t})()}})),i(d,s(j,{get when(){return t.add},get children(){let t=c(),l=L;return v(t,"click",U.bind(null,"add",void 0),!0),"function"==typeof l?e(l,t):L=t,t.link=!0,t.css=A,t._$owner=o(),t}}),null),i(d,s(j,{get when(){return ei()},get children(){return ei()}}),null),r(e=>{let i=W("tabs",t.type,t.class),o=!!t.centered,r=t.disabled,n=!!G().left,s=!!G().right;return i!==e._v$&&a(d,e._v$=i),o!==e._v$2&&d.classList.toggle("centered",e._v$2=o),r!==e._v$3&&l(d,"aria-disabled",e._v$3=r),n!==e._v$4&&u.classList.toggle("warp-left",e._v$4=n),s!==e._v$5&&u.classList.toggle("warp-right",e._v$5=s),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),d})(),s(j,{get when(){var en;return null==(en=M())?void 0:en.content},get children(){let e=p();return v(e,"animationend",er),i(e,eo),r(l=>d(e,{[ee()]:t.animated},l)),e}})]}N("n-tabs",{class:void 0,css:void 0,disabled:void 0,value:void 0,defaultValue:void 0,centered:void 0,items:[],type:"line",fieldNames:void 0,add:void 0,extra:void 0,animated:void 0},(e,t)=>{let l=t.element,i=L({onChange(e,t,i){l.dispatchEvent(new CustomEvent("change",{detail:[e,t,i]}))},onEdit(e,t,i){l.dispatchEvent(new CustomEvent("edit",{detail:[e,t,i]}))}},e);return h(()=>{V(l,["css","fieldNames","items","extra"])}),[(()=>{let e=u();return e.textContent=X,e})(),s(Y,i)]});export default Y;n(["click","keyup"]);
-//# sourceMappingURL=index.js.map
+import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as l}from"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as o}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as a}from"solid-js/web";import{classList as d}from"solid-js/web";import{addEventListener as v}from"solid-js/web";let f=t("<style> "),u=t("<style>"),c=t(`<n-button class="tab add">＋`,!0,!1),m=t('<div><div class="items">'),p=t('<div class="content">'),g=t(`<span class="remove">⛌`),b=t("<n-button>",!0,!1);import{createEffect as h,createMemo as $,createSignal as _,For as w,mergeProps as L,onCleanup as x,onMount as y,Show as j,untrack as C}from"solid-js";import k from"@moneko/common/lib/isFunction";import E from"@moneko/common/lib/passiveSupported";import{css as T,cx as W}from"@moneko/css";import{customElement as N}from"solid-element";import{clearAttribute as V,FieldName as D}from"../basic-config";import O from"../get-options";import P,{block as X}from"../theme";import{addCss as A,btnCss as F,style as S}from"./style";import"../button";function Y(t){let n,L,N;let{baseStyle:V,isDark:X}=P,[Y,q]=_(),[z,B]=_(""),[G,H]=_({left:!1,right:!1}),I=$(()=>T({":host":{"--tab-bg":X()?"rgb(255 255 255 / 4%)":"var(--primary-details-bg)","--tab-current-bg":"var(--component-bg)"}})),J=$(()=>Object.assign({},D,t.fieldNames)),K=$(()=>O(t.items,J())),M=$(()=>K().find(e=>e[J().value]===Y()));function Q(e,l){if(!t.disabled&&!e.disabled){let i=e[J().value];void 0===t.value&&q(i),k(t.onChange)&&t.onChange(i,e,l)}}function R(e,t){"Enter"===t.key&&Q(e,t)}function U(e,l,i){i.stopPropagation(),i.preventDefault(),k(t.onEdit)&&t.onEdit(e,l,i)}function Z(e){if(N){var t;let l=n.offsetWidth,i=(null==L?void 0:L.offsetWidth)||0,o=N.scrollWidth;if(o>l-i){let t=0;e&&(E||(e.stopPropagation(),e.preventDefault()),t=0!==e.deltaX?e.deltaX:e.deltaY);let l=N.scrollLeft+t;N.scrollTo({left:l}),H({left:l>0,right:o>l+N.offsetWidth})}else H({left:!1,right:!1});let r=null==(t=C(M))?void 0:t.ref;B(`.tabs {--w: ${r.offsetWidth}px;--left: ${r.offsetLeft-N.scrollLeft+N.offsetLeft}px;--s:${N.scrollLeft}px}`)}}h(()=>{let e=C(Y);void 0!==t.value?e=t.value:void 0!==t.defaultValue?e=t.defaultValue:K()[0]&&(e=K()[0][J().value]),e!==C(Y)&&q(e)}),h(()=>{var e;let t,l;let i=null==(e=M())?void 0:e.ref;i?t=setTimeout(()=>{clearTimeout(t),N&&(H({left:!1,right:!1}),N.scrollTo({left:i.offsetLeft-N.offsetLeft,behavior:"smooth"})),B(`.tabs {--w: ${i.offsetWidth}px;--left: ${i.offsetLeft-N.scrollLeft+N.offsetLeft}px;--s:${N.scrollLeft}px}`),l=setTimeout(()=>{clearTimeout(l),Z()},300)},0):B(""),x(()=>{clearTimeout(t),clearTimeout(l)})});let[ee,et]=_("slide-in");h(()=>{var e;return t.animated&&et("slide-in"),null==(e=M())?void 0:e.content});let el=$(()=>{var e,l;return k(null==(e=t.extra)?void 0:e.left)?t.extra.left():null==(l=t.extra)?void 0:l.left}),ei=$(()=>{var e,l;return k(null==(e=t.extra)?void 0:e.right)?t.extra.right():null==(l=t.extra)?void 0:l.right}),eo=$(()=>{var e;let t=null==(e=M())?void 0:e.content;return k(t)?t():t});function er(){t.animated&&et("")}return y(()=>{null==n||n.addEventListener("wheel",Z,{passive:E})}),x(()=>{null==n||n.removeEventListener("wheel",Z,!1)}),[(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=V()),e})(),(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=I()),e})(),(()=>{let e=u();return e.textContent=S,e})(),(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=z()),e})(),s(j,{get when(){return t.css},get children(){let e=f(),l=e.firstChild;return r(()=>l.data=T(t.css)),e}}),(()=>{let d=m(),f=n,u=d.firstChild,p=N;return"function"==typeof f?e(f,d):n=d,i(d,s(j,{get when(){return el()},get children(){return el()}}),u),"function"==typeof p?e(p,u):N=u,i(u,s(w,{get each(){return K()},children:(l,n)=>{let d=$(()=>t.disabled||l.disabled),{icon:f,value:u,label:c}=J(),m=$(()=>void 0!==Y()&&l[u]===Y());return(()=>{let t=b(),u=K()[n()].ref;return"function"==typeof u?e(u,t):K()[n()].ref=t,v(t,"click",Q.bind(null,l),!0),v(t,"keyup",R.bind(null,l),!0),t.link=!0,t.css=F,t._$owner=o(),i(t,()=>l[c],null),i(t,s(j,{get when(){return l.closable},get children(){let e=g();return v(e,"click",U.bind(null,"remove",l),!0),e}}),null),r(e=>{let i=m()?"primary":"default",o=W("tab",l.class),r=!!m(),s=!!(m()&&0===n()),v=d()?-1:0,u=d(),c=l[f];return i!==e._v$6&&(t.type=e._v$6=i),o!==e._v$7&&a(t,e._v$7=o),r!==e._v$8&&t.classList.toggle("active",e._v$8=r),s!==e._v$9&&t.classList.toggle("first-active",e._v$9=s),v!==e._v$10&&(t.tabindex=e._v$10=v),u!==e._v$11&&(t.disabled=e._v$11=u),c!==e._v$12&&(t.icon=e._v$12=c),e},{_v$6:void 0,_v$7:void 0,_v$8:void 0,_v$9:void 0,_v$10:void 0,_v$11:void 0,_v$12:void 0}),t})()}})),i(d,s(j,{get when(){return t.add},get children(){let t=c(),l=L;return v(t,"click",U.bind(null,"add",void 0),!0),"function"==typeof l?e(l,t):L=t,t.link=!0,t.css=A,t._$owner=o(),t}}),null),i(d,s(j,{get when(){return ei()},get children(){return ei()}}),null),r(e=>{let i=W("tabs",t.type,t.class),o=!!t.centered,r=t.disabled,n=!!G().left,s=!!G().right;return i!==e._v$&&a(d,e._v$=i),o!==e._v$2&&d.classList.toggle("centered",e._v$2=o),r!==e._v$3&&l(d,"aria-disabled",e._v$3=r),n!==e._v$4&&u.classList.toggle("warp-left",e._v$4=n),s!==e._v$5&&u.classList.toggle("warp-right",e._v$5=s),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),d})(),s(j,{get when(){var en;return null==(en=M())?void 0:en.content},get children(){let e=p();return v(e,"animationend",er),i(e,eo),r(l=>d(e,{[ee()]:t.animated},l)),e}})]}N("n-tabs",{class:void 0,css:void 0,disabled:void 0,value:void 0,defaultValue:void 0,centered:void 0,items:[],type:"line",fieldNames:void 0,add:void 0,extra:void 0,animated:void 0},(e,t)=>{let l=t.element,i=L({onChange(e,t,i){l.dispatchEvent(new CustomEvent("change",{detail:[e,t,i]}))},onEdit(e,t,i){l.dispatchEvent(new CustomEvent("edit",{detail:[e,t,i]}))}},e);return h(()=>{V(l,["css","fieldNames","items","extra"])}),[(()=>{let e=u();return e.textContent=X,e})(),s(Y,i)]});export default Y;n(["click","keyup"]);