neko-ui 2.5.0 → 2.5.2

package/lib/table/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/table/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  batch,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isObject, isString, isUndefined } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { styles } from './styles';\nimport '../pagination';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement, PaginationProps } from '..';\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>\n        {baseStyle()}\n        {styles}\n        {css(local.css)}\n      </style>\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={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      el.removeAttribute('css');\n      el.removeAttribute('title');\n      el.removeAttribute('data');\n    });\n    return createComponent(Table, props);\n  },\n);\nexport default Table;\n"],"names":["Align","Valign","defaultPagination","page","pageSize","total","totalText","size","Table","_","baseStyle","theme","local","other","splitProps","layout","hasOrder","setHasOrder","createSignal","setPage","setPageSize","setTotal","getLayout","col","width","align","valign","char","charoff","colspan","rowspan","createEffect","batch","pagination","createMemo","Object","assign","columns","cols","_hasOrder","key","prototype","hasOwnProperty","call","_col","originKey","label","toString","isObject","type","render","_val","_row","i","push","untrack","handlePageChange","e","detail","onChange","styles","css","cx","Show","title","For","_layout","data","row","Row","_pagination","val","isEmpty","isUndefined","emptyVal","summary","length","summaryText","filter","c","includes","arr","reduce","prev","curr","next","isString","left","right","center","justify","top","middle","bottom","baseline","customElement","class","loading","opt","el","element","props","mergeProps","querySelector","removeAttribute","createComponent"],"mappings":"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"}
+{"version":3,"sources":["../../components/table/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  batch,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isObject, isString, isUndefined } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { styles } from './styles';\nimport '../pagination';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement, PaginationProps } from '..';\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>\n        {baseStyle()}\n        {styles}\n        {css(local.css)}\n      </style>\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={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      el.removeAttribute('css');\n      el.removeAttribute('title');\n      el.removeAttribute('data');\n    });\n    return createComponent(Table, props);\n  },\n);\nexport default Table;\n"],"names":["Align","Valign","defaultPagination","page","pageSize","total","totalText","size","Table","_","baseStyle","theme","local","other","splitProps","layout","hasOrder","setHasOrder","createSignal","setPage","setPageSize","setTotal","getLayout","col","width","align","valign","char","charoff","colspan","rowspan","createEffect","batch","pagination","createMemo","Object","assign","columns","cols","_hasOrder","key","prototype","hasOwnProperty","call","_col","originKey","label","toString","isObject","type","render","_val","_row","i","push","untrack","handlePageChange","e","detail","onChange","styles","css","cx","Show","title","For","_layout","data","row","Row","_pagination","val","isEmpty","isUndefined","emptyVal","summary","length","summaryText","filter","c","includes","arr","reduce","prev","curr","next","isString","customElement","class","loading","opt","el","element","props","mergeProps","querySelector","removeAttribute","createComponent"],"mappings":"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"}

package/lib/tabs/style.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),function(i,n){for(var r in n)Object.defineProperty(i,r,{enumerable:!0,get:n[r]})}(exports,{style:function(){return n},btnCss:function(){return r},addCss:function(){return t}});const i=require("@moneko/css"),n=(0,i.css)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),function(i,n){for(var r in n)Object.defineProperty(i,r,{enumerable:!0,get:n[r]})}(exports,{addCss:function(){return t},btnCss:function(){return r},style:function(){return n}});const i=require("@moneko/css"),n=(0,i.css)`
   :host {
     display: block;
     font-size: var(--font-size);

package/lib/tabs/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/tabs/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  :host {\n    display: block;\n    font-size: var(--font-size);\n  }\n\n  [aria-disabled='true'] {\n    --primary-color: var(--disable-color);\n  }\n\n  .tabs {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    box-sizing: border-box;\n    max-inline-size: 100%;\n\n    &::before {\n      position: absolute;\n      inset-block-end: 0;\n      inset-inline-start: 0;\n      content: '';\n      display: block;\n      inline-size: 100%;\n      border-block-end: var(--border-base);\n    }\n  }\n\n  .centered {\n    justify-content: center;\n  }\n\n  .tab {\n    cursor: pointer;\n    position: relative;\n  }\n\n  .content {\n    padding: 16px 0;\n  }\n\n  .slide-in {\n    animation: slide-in var(--transition-timing-function) var(--transition-duration);\n  }\n\n  @keyframes slide-in {\n    0% {\n      opacity: 0;\n      transform: translateY(16px);\n    }\n\n    100% {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .items {\n    position: relative;\n    display: flex;\n    column-gap: 4px;\n    max-inline-size: calc(100% - 38px);\n    overflow-x: scroll;\n\n    &::after,\n    &::before {\n      inset-block-start: 0;\n      inset-block-end: 0;\n      inline-size: 30px;\n      position: absolute;\n      z-index: 1;\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n      content: '';\n      pointer-events: none;\n    }\n\n    &::before {\n      inset-inline-start: var(--s, 0);\n      box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 8%);\n    }\n\n    &::after {\n      inset-inline-end: 0;\n      transform: translateX(var(--s, 0));\n      box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 8%);\n    }\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .line {\n    &::after {\n      position: absolute;\n      display: block;\n      border-radius: 1px;\n      background-color: var(--primary-color);\n      content: '';\n      inline-size: var(--w);\n      inset-inline-start: var(--left);\n      block-size: 2px;\n      inset-block-end: -0.5px;\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n      transition-property: inline-size, block-size, inset-inline-start, background-color;\n    }\n  }\n\n  .card {\n    gap: 4px;\n\n    .tab {\n      display: block;\n      border: var(--border-base);\n      border-radius: var(--border-radius) var(--border-radius) 0 0;\n      background-color: var(--tab-bg);\n      transition:\n        border-color var(--transition-timing-function) var(--transition-duration),\n        background-color var(--transition-timing-function) var(--transition-duration);\n\n      &.active {\n        background-color: var(--tab-current-bg);\n        border-block-end-color: var(--tab-current-bg);\n      }\n    }\n  }\n\n  .tab.add {\n    position: sticky;\n    background-color: initial;\n    inset-inline-end: 0;\n  }\n\n  .warp-left::before {\n    opacity: 1;\n  }\n\n  .warp-right::after {\n    opacity: 1;\n  }\n`;\n\nexport const btnCss = css`\n  .remove {\n    display: inline-block;\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-secondary);\n    transition: color var(--transition-timing-function) var(--transition-duration);\n    margin-inline-start: 8px;\n\n    &:hover {\n      color: var(--error-color);\n    }\n  }\n\n  .btn:has(.remove) {\n    padding-inline-end: 10px;\n  }\n`;\n\nexport const addCss = css`\n  .btn {\n    padding: 4px;\n    font-size: var(--font-size-lg);\n  }\n`;\n"],"names":["style","btnCss","addCss","css"],"mappings":"+JAEaA,KAAK,mBAALA,GAiJAC,MAAM,mBAANA,GAmBAC,MAAM,mBAANA,qBAtKO,eAEPF,EAAQG,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+IzB,CAAC,CAEYF,EAASE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;AAiB1B,CAAC,CAEYD,EAASC,GAAAA,KAAG,CAAA,CAAC;;;;;AAK1B,CAAC"}
+{"version":3,"sources":["../../components/tabs/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  :host {\n    display: block;\n    font-size: var(--font-size);\n  }\n\n  [aria-disabled='true'] {\n    --primary-color: var(--disable-color);\n  }\n\n  .tabs {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    box-sizing: border-box;\n    max-inline-size: 100%;\n\n    &::before {\n      position: absolute;\n      inset-block-end: 0;\n      inset-inline-start: 0;\n      content: '';\n      display: block;\n      inline-size: 100%;\n      border-block-end: var(--border-base);\n    }\n  }\n\n  .centered {\n    justify-content: center;\n  }\n\n  .tab {\n    cursor: pointer;\n    position: relative;\n  }\n\n  .content {\n    padding: 16px 0;\n  }\n\n  .slide-in {\n    animation: slide-in var(--transition-timing-function) var(--transition-duration);\n  }\n\n  @keyframes slide-in {\n    0% {\n      opacity: 0;\n      transform: translateY(16px);\n    }\n\n    100% {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .items {\n    position: relative;\n    display: flex;\n    column-gap: 4px;\n    max-inline-size: calc(100% - 38px);\n    overflow-x: scroll;\n\n    &::after,\n    &::before {\n      inset-block-start: 0;\n      inset-block-end: 0;\n      inline-size: 30px;\n      position: absolute;\n      z-index: 1;\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n      content: '';\n      pointer-events: none;\n    }\n\n    &::before {\n      inset-inline-start: var(--s, 0);\n      box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 8%);\n    }\n\n    &::after {\n      inset-inline-end: 0;\n      transform: translateX(var(--s, 0));\n      box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 8%);\n    }\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .line {\n    &::after {\n      position: absolute;\n      display: block;\n      border-radius: 1px;\n      background-color: var(--primary-color);\n      content: '';\n      inline-size: var(--w);\n      inset-inline-start: var(--left);\n      block-size: 2px;\n      inset-block-end: -0.5px;\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n      transition-property: inline-size, block-size, inset-inline-start, background-color;\n    }\n  }\n\n  .card {\n    gap: 4px;\n\n    .tab {\n      display: block;\n      border: var(--border-base);\n      border-radius: var(--border-radius) var(--border-radius) 0 0;\n      background-color: var(--tab-bg);\n      transition:\n        border-color var(--transition-timing-function) var(--transition-duration),\n        background-color var(--transition-timing-function) var(--transition-duration);\n\n      &.active {\n        background-color: var(--tab-current-bg);\n        border-block-end-color: var(--tab-current-bg);\n      }\n    }\n  }\n\n  .tab.add {\n    position: sticky;\n    background-color: initial;\n    inset-inline-end: 0;\n  }\n\n  .warp-left::before {\n    opacity: 1;\n  }\n\n  .warp-right::after {\n    opacity: 1;\n  }\n`;\n\nexport const btnCss = css`\n  .remove {\n    display: inline-block;\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-secondary);\n    transition: color var(--transition-timing-function) var(--transition-duration);\n    margin-inline-start: 8px;\n\n    &:hover {\n      color: var(--error-color);\n    }\n  }\n\n  .btn:has(.remove) {\n    padding-inline-end: 10px;\n  }\n`;\n\nexport const addCss = css`\n  .btn {\n    padding: 4px;\n    font-size: var(--font-size-lg);\n  }\n`;\n"],"names":["addCss","btnCss","style","css"],"mappings":"+JAsKaA,MAAM,mBAANA,GAnBAC,MAAM,mBAANA,GAjJAC,KAAK,mBAALA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+IzB,CAAC,CAEYF,EAASE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;AAiB1B,CAAC,CAEYH,EAASG,GAAAA,KAAG,CAAA,CAAC;;;;;AAK1B,CAAC"}

package/lib/theme/index.js

@@ -1,6 +1,6 @@
-"use strict";var e,r;Object.defineProperty(exports,"__esModule",{value:!0}),function(e,r){for(var o in r)Object.defineProperty(e,o,{enumerable:!0,get:r[o]})}(exports,{ColorScheme:function(){return e},toneColor:function(){return s.toneColor},generateTheme:function(){return l},default:function(){return m}});const o=require("@swc/helpers/_/_interop_require_default"),a=require("solid-js"),t=/*#__PURE__*/o._(require("@moneko/common/lib/colorParse")),n=/*#__PURE__*/o._(require("@moneko/common/lib/mixColor")),i=/*#__PURE__*/o._(require("@moneko/common/lib/toneColor")),c=require("@moneko/css"),s=require("@moneko/common");function l(e,r){let o=(0,i.default)(e,r?.dark),a=(0,t.default)(o[5]),c=(0,t.default)(e);return{[`--${r.name}-text`]:a.setAlpha(.65).toRgbaString(),[`--${r.name}-secondary`]:a.setAlpha(.45).toRgbaString(),[`--${r.name}-heading`]:o[5],[`--${r.name}-active`]:o[30],[`--${r.name}-color`]:o[40],// [`--${option.name}-hover`]: obj[50],
+"use strict";var e,r;Object.defineProperty(exports,"__esModule",{value:!0}),function(e,r){for(var o in r)Object.defineProperty(e,o,{enumerable:!0,get:r[o]})}(exports,{ColorScheme:function(){return e},default:function(){return m},generateTheme:function(){return l},toneColor:function(){return s.toneColor}});const o=require("@swc/helpers/_/_interop_require_default"),a=require("solid-js"),t=/*#__PURE__*/o._(require("@moneko/common/lib/colorParse")),n=/*#__PURE__*/o._(require("@moneko/common/lib/mixColor")),i=/*#__PURE__*/o._(require("@moneko/common/lib/toneColor")),c=require("@moneko/css"),s=require("@moneko/common");function l(e,r){let o=(0,i.default)(e,r?.dark),a=(0,t.default)(o[5]),c=(0,t.default)(e);return{[`--${r.name}-text`]:a.setAlpha(.65).toRgbaString(),[`--${r.name}-secondary`]:a.setAlpha(.45).toRgbaString(),[`--${r.name}-heading`]:o[5],[`--${r.name}-active`]:o[30],[`--${r.name}-color`]:o[40],// [`--${option.name}-hover`]: obj[50],
 [`--${r.name}-hover`]:(0,n.default)(o[40],o[30],15),[`--${r.name}-secondary-bg`]:o[70],[`--${r.name}-border`]:o[80],// [`--${option.name}-outline`]: obj[90],
-[`--${r.name}-outline`]:(0,n.default)(o[90],o[40],5),[`--${r.name}-selection`]:o[90],[`--on-${r.name}-selection`]:o[10],[`--${r.name}-shadow`]:c.setAlpha(.12).toRgbaString(),[`--${r.name}-details-bg`]:o[95],[`--${r.name}-component-bg`]:o[98],[`--${r.name}-bg`]:o[99],[`--on-${r.name}-bg`]:o[5],[`--${r.name}-base-shadow`]:`0 3px 6px -4px ${c.setAlpha(.12).toRgbaString()}, 0 6px 16px 0 ${c.setAlpha(.08).toRgbaString()}, 0 9px 28px 8px ${c.setAlpha(.05).toRgbaString()}`}}(r=e||(e={}))./** 明亮 */light="light",r./** 暗黑 */dark="dark",r./** 跟随系统 */auto="auto";const m=(0,a.createRoot)(function(){let r=e[localStorage.getItem("color-scheme")]||"auto",o=window.matchMedia("(prefers-color-scheme: dark)"),[t,n]=(0,a.createSignal)(r),[i,s]=(0,a.createSignal)(o.matches),[m,d]=(0,a.createSignal)({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[b,g]=(0,a.createSignal)({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),u=(0,a.createMemo)(()=>l(m().primary,{name:"primary"})),p=(0,a.createMemo)(()=>l(m().warning,{name:"warning"})),f=(0,a.createMemo)(()=>l(m().success,{name:"success"})),h=(0,a.createMemo)(()=>l(m().error,{name:"error"})),x=(0,a.createMemo)(()=>(0,c.css)`
+[`--${r.name}-outline`]:(0,n.default)(o[90],o[40],5),[`--${r.name}-selection`]:o[90],[`--on-${r.name}-selection`]:o[10],[`--${r.name}-shadow`]:c.setAlpha(.12).toRgbaString(),[`--${r.name}-details-bg`]:o[95],[`--${r.name}-component-bg`]:o[98],[`--${r.name}-bg`]:o[99],[`--on-${r.name}-bg`]:o[5],[`--${r.name}-base-shadow`]:`0 3px 6px -4px ${c.setAlpha(.12).toRgbaString()}, 0 6px 16px 0 ${c.setAlpha(.08).toRgbaString()}, 0 9px 28px 8px ${c.setAlpha(.05).toRgbaString()}`}}(r=e||(e={})).light="light",r.dark="dark",r.auto="auto";const m=(0,a.createRoot)(function(){let r=e[localStorage.getItem("color-scheme")]||"auto",o=window.matchMedia("(prefers-color-scheme: dark)"),[t,n]=(0,a.createSignal)(r),[i,s]=(0,a.createSignal)(o.matches),[m,d]=(0,a.createSignal)({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[b,g]=(0,a.createSignal)({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),u=(0,a.createMemo)(()=>l(m().primary,{name:"primary"})),p=(0,a.createMemo)(()=>l(m().warning,{name:"warning"})),f=(0,a.createMemo)(()=>l(m().success,{name:"success"})),h=(0,a.createMemo)(()=>l(m().error,{name:"error"})),x=(0,a.createMemo)(()=>(0,c.css)`
       :root,
       :host {
         ${u()}

package/lib/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/theme/index.ts"],"sourcesContent":["import {\n  type Accessor,\n  type Setter,\n  createEffect,\n  createMemo,\n  createRoot,\n  createSignal,\n  getOwner,\n} from 'solid-js';\nimport { colorParse, mixColor, toneColor } from '@moneko/common';\nimport { css } from '@moneko/css';\nexport { toneColor } from '@moneko/common';\n\n/** 生成主题色调\n * @param {string} base 基础颜色\n * @param {ThemeOption} option 配置项\n * @returns {Record<string, string>} 主题色调\n */\nexport function generateTheme(base: string, option: ThemeOption): Record<string, string> {\n  const obj = toneColor(base, option?.dark);\n  const textColor = colorParse(obj[5]);\n  const baseColor = colorParse(base);\n\n  return {\n    [`--${option.name}-text`]: textColor.setAlpha(0.65).toRgbaString(),\n    [`--${option.name}-secondary`]: textColor.setAlpha(0.45).toRgbaString(),\n    [`--${option.name}-heading`]: obj[5],\n    [`--${option.name}-active`]: obj[30],\n    [`--${option.name}-color`]: obj[40],\n    // [`--${option.name}-hover`]: obj[50],\n    [`--${option.name}-hover`]: mixColor(obj[40], obj[30], 15),\n    [`--${option.name}-secondary-bg`]: obj[70],\n    [`--${option.name}-border`]: obj[80],\n    // [`--${option.name}-outline`]: obj[90],\n    [`--${option.name}-outline`]: mixColor(obj[90], obj[40], 5),\n    [`--${option.name}-selection`]: obj[90],\n    [`--on-${option.name}-selection`]: obj[10],\n    [`--${option.name}-shadow`]: baseColor.setAlpha(0.12).toRgbaString(),\n    [`--${option.name}-details-bg`]: obj[95],\n    [`--${option.name}-component-bg`]: obj[98],\n    [`--${option.name}-bg`]: obj[99],\n    [`--on-${option.name}-bg`]: obj[5],\n    [`--${option.name}-base-shadow`]: `0 3px 6px -4px ${baseColor\n      .setAlpha(0.12)\n      .toRgbaString()}, 0 6px 16px 0 ${baseColor\n      .setAlpha(0.08)\n      .toRgbaString()}, 0 9px 28px 8px ${baseColor.setAlpha(0.05).toRgbaString()}`,\n  };\n}\n\n/** 颜色模式 */\nexport enum ColorScheme {\n  /** 明亮 */\n  light = 'light',\n  /** 暗黑 */\n  dark = 'dark',\n  /** 跟随系统 */\n  auto = 'auto',\n}\n\nfunction createTheme() {\n  const preset =\n    ColorScheme[localStorage.getItem('color-scheme') as keyof typeof ColorScheme] || 'auto';\n  /** 检测 prefers-color-scheme 媒体查询是否为 light 模式 */\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  const [scheme, setScheme] = createSignal<keyof typeof ColorScheme>(preset);\n  const [isDark, setIsDark] = createSignal(media.matches);\n  const [light, setLight] = createSignal({\n    primary: '#5794ff',\n    warning: '#faad14',\n    error: '#ff4d4f',\n    success: '#52c41a',\n  });\n  const [dark, setDark] = createSignal({\n    primary: '#4d81dc',\n    warning: '#bb8314',\n    error: '#901c22',\n    success: '#419418',\n  });\n  const primary = createMemo(() => generateTheme(light().primary, { name: 'primary' }));\n  const warning = createMemo(() => generateTheme(light().warning, { name: 'warning' }));\n  const success = createMemo(() => generateTheme(light().success, { name: 'success' }));\n  const error = createMemo(() => generateTheme(light().error, { name: 'error' }));\n  const lightCss = createMemo(() => {\n    return css`\n      :root,\n      :host {\n        ${primary()}\n        ${warning()}\n        ${success()}\n        ${error()}\n        --bg: transparent;\n        --disable-color: rgb(0 0 0 / 25%);\n        --disable-bg: rgb(0 0 0 / 4%);\n        --disable-border: #d9d9d9;\n        --border-color: var(--primary-border);\n        --component-bg: var(--primary-bg);\n      }\n    `;\n  });\n  const darkPrimary = createMemo(() =>\n    generateTheme(dark().primary, { name: 'primary', dark: true }),\n  );\n  const darkWarning = createMemo(() =>\n    generateTheme(dark().warning, { name: 'warning', dark: true }),\n  );\n  const darkSuccess = createMemo(() =>\n    generateTheme(dark().success, { name: 'success', dark: true }),\n  );\n  const darkError = createMemo(() => generateTheme(dark().error, { name: 'error', dark: true }));\n  const darkCss = createMemo(() => {\n    return css`\n      :root,\n      :host {\n        ${darkPrimary()}\n        ${darkWarning()}\n        ${darkError()}\n        ${darkSuccess()}\n        --bg: #1c1c1c;\n        --disable-color: rgb(255 255 255 / 25%);\n        --disable-bg: rgb(255 255 255 / 8%);\n        --disable-border: #424242;\n        --border-color: #303030;\n        --component-bg: #141414;\n        --primary-shadow: rgb(0 0 0 / 12%);\n        --primary-selection: rgb(255 255 255 / 5%);\n        --primary-details-bg: rgb(255 255 255 / 3%);\n        --primary-component-bg: #000;\n      }\n    `;\n  });\n  const baseCss = css`\n    :root,\n    :host {\n      --font-size: 14px;\n      --font-size-sm: 12px;\n      --font-size-xs: 10px;\n      --font-size-lg: 16px;\n      --border-base: 1px solid var(--border-color);\n      --border-radius: 8px;\n      --text-color: var(--primary-text);\n      --text-secondary: var(--primary-secondary);\n      --text-heading: var(--primary-heading);\n      --text-selection: var(--primary-selection);\n      --box-shadow-base: var(--primary-base-shadow);\n      --transition-duration: 0.3s;\n\n      /* --transition-timing-function: cubic-bezier(0.94, -0.1, 0.1, 1.2); */\n      --transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n\n      font-size: var(--font-size);\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n        'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans';\n      color: var(--text-color, rgb(0 0 0 / 65%));\n      line-height: 1.8;\n    }\n\n    [disabled]:not([disabled='false']) {\n      cursor: not-allowed;\n      color: var(--disable-color);\n    }\n\n    ::selection {\n      background-color: var(--text-selection);\n    }\n\n    ::-webkit-scrollbar {\n      inline-size: 4px;\n      block-size: 4px;\n    }\n  `;\n\n  function update(e: MediaQueryListEvent) {\n    setIsDark(e.matches);\n  }\n  createEffect(() => {\n    const _ = scheme();\n\n    setIsDark(_ === 'dark' || (_ === 'auto' && media.matches));\n  });\n  const baseStyle = createMemo(() => baseCss + (isDark() ? darkCss() : lightCss()));\n\n  createEffect(() => {\n    if (scheme() === 'auto') {\n      // 监听 prefers-color-scheme 媒体查询变化，自动更新颜色方案\n      media.addEventListener('change', update);\n    } else {\n      media.removeEventListener('change', update);\n    }\n    localStorage.setItem('color-scheme', scheme());\n  });\n\n  return {\n    baseStyle,\n    dark,\n    setDark,\n    light,\n    setLight,\n    scheme,\n    setScheme,\n    isDark,\n  };\n}\n\n/** API */\nexport interface Theme {\n  /** 亮色样式的主要色 */\n  light: Accessor<Color>;\n  /** 设置亮色样式的主要色 */\n  setLight: Setter<Color>;\n  /** 黑色样式的主要色 */\n  dark: Accessor<Color>;\n  /** 设置黑色样式的主要色 */\n  setDark: Setter<Color>;\n  /** 颜色模式\n   * @default 'auto'\n   */\n  scheme: Accessor<keyof typeof ColorScheme>;\n  /** 设置颜色模式 */\n  setScheme: Setter<keyof typeof ColorScheme>;\n  /** 是否为色模式 */\n  isDark: Accessor<boolean>;\n  /** 基本都样式表, 响应 scheme 变化 */\n  baseStyle: Accessor<string>;\n}\n\n/** 主要色 */\ninterface Color {\n  /** 主要\n   * @default '#5794ff'\n   */\n  primary: string;\n  /** 警告\n   * @default '#faad14'\n   */\n  warning: string;\n  /** 错误\n   * @default '#ff4d4f'\n   */\n  error: string;\n  /** 成功\n   * @default '#52c41a'\n   */\n  success: string;\n}\n\nexport interface ThemeOption {\n  /** 是否采用暗色算法\n   * @default false\n   */\n  dark?: boolean;\n  /** 颜色名称 */\n  name: string;\n}\n\nexport default createRoot<Theme>(createTheme, getOwner());\n"],"names":["ColorScheme","toneColor","generateTheme","base","option","obj","dark","textColor","colorParse","baseColor","name","setAlpha","toRgbaString","mixColor","light","auto","createRoot","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","createSignal","isDark","setIsDark","matches","setLight","primary","warning","error","success","setDark","createMemo","lightCss","css","darkPrimary","darkWarning","darkSuccess","darkError","darkCss","baseCss","update","e","createEffect","_","baseStyle","addEventListener","removeEventListener","setItem","getOwner"],"mappings":"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"}
+{"version":3,"sources":["../../components/theme/index.ts"],"sourcesContent":["import {\n  type Accessor,\n  type Setter,\n  createEffect,\n  createMemo,\n  createRoot,\n  createSignal,\n  getOwner,\n} from 'solid-js';\nimport { colorParse, mixColor, toneColor } from '@moneko/common';\nimport { css } from '@moneko/css';\nexport { toneColor } from '@moneko/common';\n\n/** 生成主题色调\n * @param {string} base 基础颜色\n * @param {ThemeOption} option 配置项\n * @returns {Record<string, string>} 主题色调\n */\nexport function generateTheme(base: string, option: ThemeOption): Record<string, string> {\n  const obj = toneColor(base, option?.dark);\n  const textColor = colorParse(obj[5]);\n  const baseColor = colorParse(base);\n\n  return {\n    [`--${option.name}-text`]: textColor.setAlpha(0.65).toRgbaString(),\n    [`--${option.name}-secondary`]: textColor.setAlpha(0.45).toRgbaString(),\n    [`--${option.name}-heading`]: obj[5],\n    [`--${option.name}-active`]: obj[30],\n    [`--${option.name}-color`]: obj[40],\n    // [`--${option.name}-hover`]: obj[50],\n    [`--${option.name}-hover`]: mixColor(obj[40], obj[30], 15),\n    [`--${option.name}-secondary-bg`]: obj[70],\n    [`--${option.name}-border`]: obj[80],\n    // [`--${option.name}-outline`]: obj[90],\n    [`--${option.name}-outline`]: mixColor(obj[90], obj[40], 5),\n    [`--${option.name}-selection`]: obj[90],\n    [`--on-${option.name}-selection`]: obj[10],\n    [`--${option.name}-shadow`]: baseColor.setAlpha(0.12).toRgbaString(),\n    [`--${option.name}-details-bg`]: obj[95],\n    [`--${option.name}-component-bg`]: obj[98],\n    [`--${option.name}-bg`]: obj[99],\n    [`--on-${option.name}-bg`]: obj[5],\n    [`--${option.name}-base-shadow`]: `0 3px 6px -4px ${baseColor\n      .setAlpha(0.12)\n      .toRgbaString()}, 0 6px 16px 0 ${baseColor\n      .setAlpha(0.08)\n      .toRgbaString()}, 0 9px 28px 8px ${baseColor.setAlpha(0.05).toRgbaString()}`,\n  };\n}\n\n/** 颜色模式 */\nexport enum ColorScheme {\n  /** 明亮 */\n  light = 'light',\n  /** 暗黑 */\n  dark = 'dark',\n  /** 跟随系统 */\n  auto = 'auto',\n}\n\nfunction createTheme() {\n  const preset =\n    ColorScheme[localStorage.getItem('color-scheme') as keyof typeof ColorScheme] || 'auto';\n  /** 检测 prefers-color-scheme 媒体查询是否为 light 模式 */\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  const [scheme, setScheme] = createSignal<keyof typeof ColorScheme>(preset);\n  const [isDark, setIsDark] = createSignal(media.matches);\n  const [light, setLight] = createSignal({\n    primary: '#5794ff',\n    warning: '#faad14',\n    error: '#ff4d4f',\n    success: '#52c41a',\n  });\n  const [dark, setDark] = createSignal({\n    primary: '#4d81dc',\n    warning: '#bb8314',\n    error: '#901c22',\n    success: '#419418',\n  });\n  const primary = createMemo(() => generateTheme(light().primary, { name: 'primary' }));\n  const warning = createMemo(() => generateTheme(light().warning, { name: 'warning' }));\n  const success = createMemo(() => generateTheme(light().success, { name: 'success' }));\n  const error = createMemo(() => generateTheme(light().error, { name: 'error' }));\n  const lightCss = createMemo(() => {\n    return css`\n      :root,\n      :host {\n        ${primary()}\n        ${warning()}\n        ${success()}\n        ${error()}\n        --bg: transparent;\n        --disable-color: rgb(0 0 0 / 25%);\n        --disable-bg: rgb(0 0 0 / 4%);\n        --disable-border: #d9d9d9;\n        --border-color: var(--primary-border);\n        --component-bg: var(--primary-bg);\n      }\n    `;\n  });\n  const darkPrimary = createMemo(() =>\n    generateTheme(dark().primary, { name: 'primary', dark: true }),\n  );\n  const darkWarning = createMemo(() =>\n    generateTheme(dark().warning, { name: 'warning', dark: true }),\n  );\n  const darkSuccess = createMemo(() =>\n    generateTheme(dark().success, { name: 'success', dark: true }),\n  );\n  const darkError = createMemo(() => generateTheme(dark().error, { name: 'error', dark: true }));\n  const darkCss = createMemo(() => {\n    return css`\n      :root,\n      :host {\n        ${darkPrimary()}\n        ${darkWarning()}\n        ${darkError()}\n        ${darkSuccess()}\n        --bg: #1c1c1c;\n        --disable-color: rgb(255 255 255 / 25%);\n        --disable-bg: rgb(255 255 255 / 8%);\n        --disable-border: #424242;\n        --border-color: #303030;\n        --component-bg: #141414;\n        --primary-shadow: rgb(0 0 0 / 12%);\n        --primary-selection: rgb(255 255 255 / 5%);\n        --primary-details-bg: rgb(255 255 255 / 3%);\n        --primary-component-bg: #000;\n      }\n    `;\n  });\n  const baseCss = css`\n    :root,\n    :host {\n      --font-size: 14px;\n      --font-size-sm: 12px;\n      --font-size-xs: 10px;\n      --font-size-lg: 16px;\n      --border-base: 1px solid var(--border-color);\n      --border-radius: 8px;\n      --text-color: var(--primary-text);\n      --text-secondary: var(--primary-secondary);\n      --text-heading: var(--primary-heading);\n      --text-selection: var(--primary-selection);\n      --box-shadow-base: var(--primary-base-shadow);\n      --transition-duration: 0.3s;\n\n      /* --transition-timing-function: cubic-bezier(0.94, -0.1, 0.1, 1.2); */\n      --transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n\n      font-size: var(--font-size);\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n        'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans';\n      color: var(--text-color, rgb(0 0 0 / 65%));\n      line-height: 1.8;\n    }\n\n    [disabled]:not([disabled='false']) {\n      cursor: not-allowed;\n      color: var(--disable-color);\n    }\n\n    ::selection {\n      background-color: var(--text-selection);\n    }\n\n    ::-webkit-scrollbar {\n      inline-size: 4px;\n      block-size: 4px;\n    }\n  `;\n\n  function update(e: MediaQueryListEvent) {\n    setIsDark(e.matches);\n  }\n  createEffect(() => {\n    const _ = scheme();\n\n    setIsDark(_ === 'dark' || (_ === 'auto' && media.matches));\n  });\n  const baseStyle = createMemo(() => baseCss + (isDark() ? darkCss() : lightCss()));\n\n  createEffect(() => {\n    if (scheme() === 'auto') {\n      // 监听 prefers-color-scheme 媒体查询变化，自动更新颜色方案\n      media.addEventListener('change', update);\n    } else {\n      media.removeEventListener('change', update);\n    }\n    localStorage.setItem('color-scheme', scheme());\n  });\n\n  return {\n    baseStyle,\n    dark,\n    setDark,\n    light,\n    setLight,\n    scheme,\n    setScheme,\n    isDark,\n  };\n}\n\n/** API */\nexport interface Theme {\n  /** 亮色样式的主要色 */\n  light: Accessor<Color>;\n  /** 设置亮色样式的主要色 */\n  setLight: Setter<Color>;\n  /** 黑色样式的主要色 */\n  dark: Accessor<Color>;\n  /** 设置黑色样式的主要色 */\n  setDark: Setter<Color>;\n  /** 颜色模式\n   * @default 'auto'\n   */\n  scheme: Accessor<keyof typeof ColorScheme>;\n  /** 设置颜色模式 */\n  setScheme: Setter<keyof typeof ColorScheme>;\n  /** 是否为色模式 */\n  isDark: Accessor<boolean>;\n  /** 基本都样式表, 响应 scheme 变化 */\n  baseStyle: Accessor<string>;\n}\n\n/** 主要色 */\ninterface Color {\n  /** 主要\n   * @default '#5794ff'\n   */\n  primary: string;\n  /** 警告\n   * @default '#faad14'\n   */\n  warning: string;\n  /** 错误\n   * @default '#ff4d4f'\n   */\n  error: string;\n  /** 成功\n   * @default '#52c41a'\n   */\n  success: string;\n}\n\nexport interface ThemeOption {\n  /** 是否采用暗色算法\n   * @default false\n   */\n  dark?: boolean;\n  /** 颜色名称 */\n  name: string;\n}\n\nexport default createRoot<Theme>(createTheme, getOwner());\n"],"names":["ColorScheme","generateTheme","toneColor","base","option","obj","dark","textColor","colorParse","baseColor","name","setAlpha","toRgbaString","mixColor","createRoot","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","createSignal","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","createMemo","lightCss","css","darkPrimary","darkWarning","darkSuccess","darkError","darkCss","baseCss","update","e","createEffect","_","baseStyle","addEventListener","removeEventListener","setItem","getOwner"],"mappings":"mBAmDYA,qLA6MZ,OAA0D,mBAA1D,GA9OgBC,aAAa,mBAAbA,GAPPC,SAAS,mBAATA,WAAS,yEAHX,uCACyC,6DAAA,2DAAA,2CAC5B,yBACM,kBAOnB,SAASD,EAAcE,CAAY,CAAEC,CAAmB,EAC7D,IAAMC,EAAMH,GAAAA,SAAS,EAACC,EAAMC,GAAQE,MAC9BC,EAAYC,GAAAA,SAAU,EAACH,CAAG,CAAC,EAAE,EAC7BI,EAAYD,GAAAA,SAAU,EAACL,GAE7B,MAAO,CACL,CAAC,CAAC,EAAE,EAAEC,EAAOM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAEH,EAAUI,QAAQ,CAAC,KAAMC,YAAY,GAChE,CAAC,CAAC,EAAE,EAAER,EAAOM,IAAI,CAAC,UAAU,CAAC,CAAC,CAAEH,EAAUI,QAAQ,CAAC,KAAMC,YAAY,GACrE,CAAC,CAAC,EAAE,EAAER,EAAOM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAEL,CAAG,CAAC,EAAE,CACpC,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAEL,CAAG,CAAC,GAAG,CACpC,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAEL,CAAG,CAAC,GAAG,CACnC,uCAAuC;AACvC,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAEG,GAAAA,SAAQ,EAACR,CAAG,CAAC,GAAG,CAAEA,CAAG,CAAC,GAAG,CAAE,IACvD,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,aAAa,CAAC,CAAC,CAAEL,CAAG,CAAC,GAAG,CAC1C,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAEL,CAAG,CAAC,GAAG,CACpC,yCAAyC;AACzC,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAEG,GAAAA,SAAQ,EAACR,CAAG,CAAC,GAAG,CAAEA,CAAG,CAAC,GAAG,CAAE,GACzD,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,UAAU,CAAC,CAAC,CAAEL,CAAG,CAAC,GAAG,CACvC,CAAC,CAAC,KAAK,EAAED,EAAOM,IAAI,CAAC,UAAU,CAAC,CAAC,CAAEL,CAAG,CAAC,GAAG,CAC1C,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAED,EAAUE,QAAQ,CAAC,KAAMC,YAAY,GAClE,CAAC,CAAC,EAAE,EAAER,EAAOM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAEL,CAAG,CAAC,GAAG,CACxC,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,aAAa,CAAC,CAAC,CAAEL,CAAG,CAAC,GAAG,CAC1C,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,GAAG,CAAC,CAAC,CAAEL,CAAG,CAAC,GAAG,CAChC,CAAC,CAAC,KAAK,EAAED,EAAOM,IAAI,CAAC,GAAG,CAAC,CAAC,CAAEL,CAAG,CAAC,EAAE,CAClC,CAAC,CAAC,EAAE,EAAED,EAAOM,IAAI,CAAC,YAAY,CAAC,CAAC,CAAE,CAAC,eAAe,EAAED,EACjDE,QAAQ,CAAC,KACTC,YAAY,GAAG,eAAe,EAAEH,EAChCE,QAAQ,CAAC,KACTC,YAAY,GAAG,iBAAiB,EAAEH,EAAUE,QAAQ,CAAC,KAAMC,YAAY,GAAG,CAAC,AAChF,CACF,EAGYZ,EAAAA,IAAAA,uDA6MZ,EAAec,GAAAA,YAAU,EApMzB,WACE,IAAMC,EACJf,CAAW,CAACgB,aAAaC,OAAO,CAAC,gBAA4C,EAAI,OAE7EC,EAAQC,OAAOC,UAAU,CAAC,gCAC1B,CAACC,EAAQC,EAAU,CAAGC,GAAAA,cAAY,EAA2BR,GAC7D,CAACS,EAAQC,EAAU,CAAGF,GAAAA,cAAY,EAACL,EAAMQ,OAAO,EAChD,CAACC,EAAOC,EAAS,CAAGL,GAAAA,cAAY,EAAC,CACrCM,QAAS,UACTC,QAAS,UACTC,MAAO,UACPC,QAAS,SACX,GACM,CAAC1B,EAAM2B,EAAQ,CAAGV,GAAAA,cAAY,EAAC,CACnCM,QAAS,UACTC,QAAS,UACTC,MAAO,UACPC,QAAS,SACX,GACMH,EAAUK,GAAAA,YAAU,EAAC,IAAMjC,EAAc0B,IAAQE,OAAO,CAAE,CAAEnB,KAAM,SAAU,IAC5EoB,EAAUI,GAAAA,YAAU,EAAC,IAAMjC,EAAc0B,IAAQG,OAAO,CAAE,CAAEpB,KAAM,SAAU,IAC5EsB,EAAUE,GAAAA,YAAU,EAAC,IAAMjC,EAAc0B,IAAQK,OAAO,CAAE,CAAEtB,KAAM,SAAU,IAC5EqB,EAAQG,GAAAA,YAAU,EAAC,IAAMjC,EAAc0B,IAAQI,KAAK,CAAE,CAAErB,KAAM,OAAQ,IACtEyB,EAAWD,GAAAA,YAAU,EAAC,IACnBE,GAAAA,KAAG,CAAA,CAAC;;;QAGP,EAAEP,IAAU;QACZ,EAAEC,IAAU;QACZ,EAAEE,IAAU;QACZ,EAAED,IAAQ;;;;;;;;IAQd,CAAC,EAEGM,EAAcH,GAAAA,YAAU,EAAC,IAC7BjC,EAAcK,IAAOuB,OAAO,CAAE,CAAEnB,KAAM,UAAWJ,KAAM,CAAA,CAAK,IAExDgC,EAAcJ,GAAAA,YAAU,EAAC,IAC7BjC,EAAcK,IAAOwB,OAAO,CAAE,CAAEpB,KAAM,UAAWJ,KAAM,CAAA,CAAK,IAExDiC,EAAcL,GAAAA,YAAU,EAAC,IAC7BjC,EAAcK,IAAO0B,OAAO,CAAE,CAAEtB,KAAM,UAAWJ,KAAM,CAAA,CAAK,IAExDkC,EAAYN,GAAAA,YAAU,EAAC,IAAMjC,EAAcK,IAAOyB,KAAK,CAAE,CAAErB,KAAM,QAASJ,KAAM,CAAA,CAAK,IACrFmC,EAAUP,GAAAA,YAAU,EAAC,IAClBE,GAAAA,KAAG,CAAA,CAAC;;;QAGP,EAAEC,IAAc;QAChB,EAAEC,IAAc;QAChB,EAAEE,IAAY;QACd,EAAED,IAAc;;;;;;;;;;;;IAYpB,CAAC,EAEGG,EAAUN,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCpB,CAAC,CAED,SAASO,EAAOC,CAAsB,EACpCnB,EAAUmB,EAAElB,OAAO,CACrB,CACAmB,GAAAA,cAAY,EAAC,KACX,IAAMC,EAAIzB,IAEVI,EAAUqB,AAAM,SAANA,GAAiBA,AAAM,SAANA,GAAgB5B,EAAMQ,OAAO,CAC1D,GACA,IAAMqB,EAAYb,GAAAA,YAAU,EAAC,IAAMQ,EAAWlB,CAAAA,IAAWiB,IAAYN,GAAS,GAY9E,MAVAU,GAAAA,cAAY,EAAC,KACPxB,AAAa,SAAbA,IACF,0CAA0C;AAC1CH,EAAM8B,gBAAgB,CAAC,SAAUL,GAEjCzB,EAAM+B,mBAAmB,CAAC,SAAUN,GAEtC3B,aAAakC,OAAO,CAAC,eAAgB7B,IACvC,GAEO,CACL0B,UAAAA,EACAzC,KAAAA,EACA2B,QAAAA,EACAN,MAAAA,EACAC,SAAAA,EACAP,OAAAA,EACAC,UAAAA,EACAE,OAAAA,CACF,CACF,EAqD8C2B,GAAAA,UAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neko-ui",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "Web Components UI Libraries",
   "main": "es/index.js",
   "scripts": {
@@ -37,8 +37,8 @@
   "devDependencies": {
     "@commitlint/cli": "17.7.1",
     "@commitlint/config-conventional": "17.7.0",
-    "@moneko/cli": "2.2.1",
-    "@moneko/core": "3.1.0",
+    "@moneko/cli": "2.2.2",
+    "@moneko/core": "3.1.3",
     "@moneko/postcss": "1.0.30",
     "@moneko/solid": "1.2.1",
     "@solidjs/testing-library": "0.8.4",
@@ -61,11 +61,12 @@
   "dependencies": {
     "@moneko/common": "1.2.0",
     "@moneko/css": "1.0.5",
+    "@swc/helpers": "0.5.3",
     "custom-element-type": "1.0.3",
     "dayjs": "1.11.10",
     "marked-completed": "1.2.10",
     "solid-element": "1.8.0",
-    "solid-js": "1.8.1"
+    "solid-js": "1.8.3"
   },
   "files": [
     "es",
@@ -73,5 +74,8 @@
     "umd",
     "README.md",
     "LICENSE"
+  ],
+  "browserslist": [
+    "Chrome >=86"
   ]
 }