neko-ui 2.7.0 → 2.7.1

package/es/radio/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/radio/index.tsx"],"sourcesContent":["import { For, createComponent, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\nexport interface RadioOption extends Omit<BaseOption, 'icon'> {\n  /** 值 */\n  value?: string;\n}\n\nexport interface RadioProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"radio\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值 */\n  value?: string;\n  /** 默认值 */\n  defaultValue?: string;\n  /** 选项数据 */\n  options?: (RadioOption | string)[];\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 值修改时的回调方法 */\n  onChange?(val: string): void;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n}\n\nfunction Radio(props: RadioProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal(props.defaultValue);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  function onChange(item: RadioOption) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value]!;\n\n      setValue(next);\n      props.onChange?.(next);\n    }\n  }\n  function onKeyUp(item: RadioOption, e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n  const options = createMemo(() => {\n    return getOptions(props.options, fieldNames());\n  });\n\n  createEffect(() => {\n    setValue(props.value);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('box', props.layout, props.class)} part=\"box\">\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const handleChange = () => {\n              onChange(item);\n            };\n            const fieldName = fieldNames();\n\n            return (\n              <div\n                class={cx('item', item.class, item.status)}\n                part=\"item\"\n                tabindex={readOnly ? -1 : 0}\n                aria-disabled={readOnly}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={handleChange}\n              >\n                <input\n                  class=\"radio\"\n                  type=\"radio\"\n                  name={props.name}\n                  value={item[fieldName.value]}\n                  disabled={readOnly}\n                  tabindex={-1}\n                  checked={item[fieldName.value] === value()}\n                  onChange={handleChange}\n                />\n                <label class=\"label\" part=\"label\">\n                  {item[fieldName.label]}\n                </label>\n              </div>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type RadioElement = CustomElement<RadioProps>;\n\ncustomElement<RadioProps>(\n  'n-radio',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: [],\n    onChange: void 0,\n    fieldNames: void 0,\n    layout: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        layout: el.layout || 'horizontal',\n        onChange(next: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Radio, props);\n  },\n);\nexport default Radio;\n"],"names":["For","createComponent","createEffect","createMemo","createSignal","mergeProps","css","cx","customElement","style","FieldName","getOptions","theme","Radio","props","baseStyle","value","setValue","defaultValue","fieldNames","Object","assign","onChange","item","disabled","next","onKeyUp","e","key","options","readOnly","handleChange","fieldName","bind","label","class","status","name","layout","_","opt","el","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"ieAAA,QAASA,OAAAA,CAAG,CAAEC,mBAAAA,CAAe,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACpG,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAASC,aAAAA,CAAS,KAAQ,iBAAkB,AAC5C,QAAOC,MAAgB,gBAAiB,AACxC,QAAOC,MAAW,UAAW,CAiC7B,SAASC,EAAMC,CAAiB,EAC9B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGH,EAChB,CAACI,EAAOC,EAAS,CAAGb,EAAaU,EAAMI,YAAY,EACnDC,EAAahB,EAAW,IAAMiB,OAAOC,MAAM,CAAC,CAAC,EAAGX,EAAWI,EAAMK,UAAU,GAEjF,SAASG,EAASC,CAAiB,EACjC,GAAI,CAACT,EAAMU,QAAQ,EAAI,CAACD,EAAKC,QAAQ,CAAE,CACrC,IAAMC,EAAOF,CAAI,CAACJ,IAAaH,KAAK,CAAC,CAErCC,EAASQ,SACTX,EAAMQ,QAAQ,EAAdR,EAAMQ,QAAQ,MAAdR,EAAiBW,EACnB,CACF,CACA,SAASC,EAAQH,CAAiB,CAAEI,CAAgB,EACpC,UAAVA,EAAEC,GAAG,EACPN,EAASC,EAEb,CACA,IAAMM,EAAU1B,EAAW,IAClBQ,EAAWG,EAAMe,OAAO,CAAEV,MAOnC,OAJAjB,EAAa,KACXe,EAASH,EAAME,KAAK,CACtB,+BAKOD,YACAN,gBACAH,EAAIQ,EAAMR,GAAG,2CAGbN,qBAAU6B,cACR,AAACN,IACA,IAAMO,EAAWhB,EAAMU,QAAQ,EAAID,EAAKC,QAAQ,CAC1CO,EAAe,KACnBT,EAASC,EACX,EACMS,EAAYb,IAElB,wEAOaY,kBADAL,EAAQO,IAAI,CAAC,KAAMV,sBAFlBO,EAAW,GAAK,uBACXA,gBAYHC,cAHAD,iBACA,YAKTP,CAAI,CAACS,EAAUE,KAAK,CAAC,cAlBjB3B,EAAG,OAAQgB,EAAKY,KAAK,CAAEZ,EAAKa,MAAM,IAUjCtB,EAAMuB,IAAI,4GACTd,CAAI,CAACS,EAAUhB,KAAK,CAAC,kBAGnBO,CAAI,CAACS,EAAUhB,KAAK,CAAC,GAAKA,UAQ3C,eAjCYT,EAAG,MAAOO,EAAMwB,MAAM,CAAExB,EAAMqB,KAAK,UAsCzD,CAIA3B,EACE,UACA,CACE2B,MAAO,KAAK,EACZ7B,IAAK,KAAK,EACV+B,KAAM,KAAK,EACXb,SAAU,KAAK,EACfR,MAAO,KAAK,EACZE,aAAc,KAAK,EACnBW,QAAS,EAAE,CACXP,SAAU,KAAK,EACfH,WAAY,KAAK,EACjBmB,OAAQ,KAAK,CACf,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChB5B,EAAQT,EACZ,CACEiC,OAAQG,EAAGH,MAAM,EAAI,aACrBhB,SAASG,CAAY,EACnBgB,EAAGE,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQpB,CACV,GAEJ,CACF,EACAc,GAQF,OALArC,EAAa,KACXuC,EAAGK,eAAe,CAAC,WACnBL,EAAGK,eAAe,CAAC,eACnBL,EAAGK,eAAe,CAAC,MACrB,GACO7C,EAAgBY,EAAOC,EAChC,EAEF,gBAAeD,CAAM"}
+{"version":3,"sources":["../../components/radio/index.tsx"],"sourcesContent":["import { For, createComponent, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\nexport interface RadioOption extends Omit<BaseOption, 'icon'> {\n  /** 值 */\n  value?: string;\n}\n\nexport interface RadioProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"radio\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值 */\n  value?: string;\n  /** 默认值 */\n  defaultValue?: string;\n  /** 选项数据 */\n  options?: (RadioOption | string)[];\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 值修改时的回调方法 */\n  onChange?(val: string): void;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n}\n\nfunction Radio(props: RadioProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal(props.defaultValue);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  function onChange(item: RadioOption) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value]!;\n\n      setValue(next);\n      props.onChange?.(next);\n    }\n  }\n  function onKeyUp(item: RadioOption, e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n  const options = createMemo(() => {\n    return getOptions(props.options, fieldNames());\n  });\n\n  createEffect(() => {\n    setValue(props.value);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('box', props.layout, props.class)} part=\"box\">\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const handleChange = () => {\n              onChange(item);\n            };\n            const fieldName = fieldNames();\n\n            return (\n              <div\n                class={cx('item', item.class, item.status)}\n                part=\"item\"\n                tabindex={readOnly ? -1 : 0}\n                aria-disabled={readOnly}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={handleChange}\n              >\n                <input\n                  class=\"radio\"\n                  type=\"radio\"\n                  name={props.name}\n                  value={item[fieldName.value]}\n                  disabled={readOnly}\n                  tabindex={-1}\n                  checked={item[fieldName.value] === value()}\n                  onChange={handleChange}\n                />\n                <label class=\"label\" part=\"label\">\n                  {item[fieldName.label]}\n                </label>\n              </div>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type RadioElement = CustomElement<RadioProps>;\n\ncustomElement<RadioProps>(\n  'n-radio',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: [],\n    onChange: void 0,\n    fieldNames: void 0,\n    layout: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        layout: el.layout || 'horizontal',\n        onChange(next: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Radio, props);\n  },\n);\nexport default Radio;\n"],"names":["For","createComponent","createEffect","createMemo","createSignal","mergeProps","css","cx","customElement","style","FieldName","getOptions","theme","Radio","props","baseStyle","value","setValue","defaultValue","fieldNames","Object","assign","onChange","item","disabled","next","onKeyUp","e","key","options","readOnly","handleChange","fieldName","bind","label","class","status","name","layout","_","opt","el","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"rangeMappings":"","mappings":"ieAAA,QAASA,OAAAA,CAAG,CAAEC,mBAAAA,CAAe,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACpG,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAASC,aAAAA,CAAS,KAAQ,iBAAkB,AAC5C,QAAOC,MAAgB,gBAAiB,AACxC,QAAOC,MAAW,UAAW,CAiC7B,SAASC,EAAMC,CAAiB,EAC9B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGH,EAChB,CAACI,EAAOC,EAAS,CAAGb,EAAaU,EAAMI,YAAY,EACnDC,EAAahB,EAAW,IAAMiB,OAAOC,MAAM,CAAC,CAAC,EAAGX,EAAWI,EAAMK,UAAU,GAEjF,SAASG,EAASC,CAAiB,EACjC,GAAI,CAACT,EAAMU,QAAQ,EAAI,CAACD,EAAKC,QAAQ,CAAE,CACrC,IAAMC,EAAOF,CAAI,CAACJ,IAAaH,KAAK,CAAC,CAErCC,EAASQ,SACTX,EAAMQ,QAAQ,EAAdR,EAAMQ,QAAQ,MAAdR,EAAiBW,EACnB,CACF,CACA,SAASC,EAAQH,CAAiB,CAAEI,CAAgB,EACpC,UAAVA,EAAEC,GAAG,EACPN,EAASC,EAEb,CACA,IAAMM,EAAU1B,EAAW,IAClBQ,EAAWG,EAAMe,OAAO,CAAEV,MAOnC,OAJAjB,EAAa,KACXe,EAASH,EAAME,KAAK,CACtB,+BAKOD,YACAN,gBACAH,EAAIQ,EAAMR,GAAG,2CAGbN,qBAAU6B,cACR,AAACN,IACA,IAAMO,EAAWhB,EAAMU,QAAQ,EAAID,EAAKC,QAAQ,CAC1CO,EAAe,KACnBT,EAASC,EACX,EACMS,EAAYb,IAElB,wEAOaY,kBADAL,EAAQO,IAAI,CAAC,KAAMV,sBAFlBO,EAAW,GAAK,uBACXA,gBAYHC,cAHAD,iBACA,YAKTP,CAAI,CAACS,EAAUE,KAAK,CAAC,cAlBjB3B,EAAG,OAAQgB,EAAKY,KAAK,CAAEZ,EAAKa,MAAM,IAUjCtB,EAAMuB,IAAI,4GACTd,CAAI,CAACS,EAAUhB,KAAK,CAAC,kBAGnBO,CAAI,CAACS,EAAUhB,KAAK,CAAC,GAAKA,UAQ3C,eAjCYT,EAAG,MAAOO,EAAMwB,MAAM,CAAExB,EAAMqB,KAAK,UAsCzD,CAIA3B,EACE,UACA,CACE2B,MAAO,KAAK,EACZ7B,IAAK,KAAK,EACV+B,KAAM,KAAK,EACXb,SAAU,KAAK,EACfR,MAAO,KAAK,EACZE,aAAc,KAAK,EACnBW,QAAS,EAAE,CACXP,SAAU,KAAK,EACfH,WAAY,KAAK,EACjBmB,OAAQ,KAAK,CACf,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChB5B,EAAQT,EACZ,CACEiC,OAAQG,EAAGH,MAAM,EAAI,aACrBhB,SAASG,CAAY,EACnBgB,EAAGE,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQpB,CACV,GAEJ,CACF,EACAc,GAQF,OALArC,EAAa,KACXuC,EAAGK,eAAe,CAAC,WACnBL,EAAGK,eAAe,CAAC,eACnBL,EAAGK,eAAe,CAAC,MACrB,GACO7C,EAAgBY,EAAOC,EAChC,EAEF,gBAAeD,CAAM"}

package/es/radio/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/radio/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .box {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 16px;\n\n    .item,\n    .item .label {\n      display: inline-flex;\n      gap: 6px;\n      justify-content: flex-start;\n      align-items: center;\n      box-sizing: border-box;\n      cursor: pointer;\n      inline-size: fit-content;\n    }\n\n    .item {\n      outline: 0;\n\n      .radio {\n        position: relative;\n        display: inline-block;\n        margin: 0;\n        border: 1px solid var(--border-color);\n        border-radius: 50%;\n        background-color: var(--component-bg);\n        outline: none;\n        transition: 120ms border-color linear;\n        appearance: none;\n        inline-size: 16px;\n        block-size: 16px;\n        pointer-events: none;\n        user-select: none;\n\n        &::before {\n          position: absolute;\n          display: inline-block;\n          margin: auto;\n          border-radius: 50%;\n          box-shadow: inset 0 0 0 8px var(--primary-color);\n          inset-block: 0 0;\n          inset-inline: 0 0;\n          content: '';\n          inline-size: 10px;\n          block-size: 10px;\n          transform: scale(0);\n          transition: 120ms transform var(--transition-timing-function);\n        }\n\n        &:active {\n          border-color: var(--primary-active);\n\n          &::before {\n            --primary-color: var(--primary-active);\n          }\n        }\n\n        &:checked {\n          border-color: var(--primary-color);\n\n          &::before {\n            transform: scale(1);\n          }\n        }\n\n        &:disabled {\n          border-color: var(--disable-border);\n\n          &::before {\n            --primary-color: var(--disable-border);\n          }\n        }\n\n        &:not(:disabled, :checked):hover {\n          border-color: var(--primary-hover);\n\n          &::before {\n            --primary-color: var(--primary-hover);\n          }\n        }\n      }\n\n      .label {\n        color: var(--text-color);\n        outline: 0;\n        cursor: inherit;\n      }\n\n      &:has(:checked) {\n        --text-color: var(--primary-color);\n      }\n\n      &:not([aria-disabled]:not([aria-disabled='false'])):focus .radio {\n        box-shadow: 0 0 0 3px var(--primary-outline);\n\n        &:not(:checked) {\n          border-color: var(--primary-hover);\n        }\n      }\n\n      &[aria-disabled]:not([aria-disabled='false']) {\n        --text-color: var(--disable-color);\n\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  .horizontal {\n    flex-direction: row;\n  }\n\n  .vertical {\n    flex-direction: column;\n  }\n\n  ${['success', 'error', 'warning']\n    .map(\n      (s) =>\n        `.${s} {--border-color: var(--${s}-border);--primary-hover: var(--${s}-hover);--primary-outline: var(--${s}-outline);--primary-color: var(--${s}-color);--primary-active: var(--${s}-active);--component-bg: var(--${s}-bg);}`,\n    )\n    .join('')}\n`;\n"],"names":["css","style","map","s","join"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqHvB,EAAE,CAAC,UAAW,QAAS,UAAU,CAC9BE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,wBAAwB,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,+BAA+B,EAAEA,EAAE,MAAM,CAAC,EAEjOC,IAAI,CAAC,IAAI;AACd,CAAC,AAAC"}
+{"version":3,"sources":["../../components/radio/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .box {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 16px;\n\n    .item,\n    .item .label {\n      display: inline-flex;\n      gap: 6px;\n      justify-content: flex-start;\n      align-items: center;\n      box-sizing: border-box;\n      cursor: pointer;\n      inline-size: fit-content;\n    }\n\n    .item {\n      outline: 0;\n\n      .radio {\n        position: relative;\n        display: inline-block;\n        margin: 0;\n        border: 1px solid var(--border-color);\n        border-radius: 50%;\n        background-color: var(--component-bg);\n        outline: none;\n        transition: 120ms border-color linear;\n        appearance: none;\n        inline-size: 16px;\n        block-size: 16px;\n        pointer-events: none;\n        user-select: none;\n\n        &::before {\n          position: absolute;\n          display: inline-block;\n          margin: auto;\n          border-radius: 50%;\n          box-shadow: inset 0 0 0 8px var(--primary-color);\n          inset-block: 0 0;\n          inset-inline: 0 0;\n          content: '';\n          inline-size: 10px;\n          block-size: 10px;\n          transform: scale(0);\n          transition: 120ms transform var(--transition-timing-function);\n        }\n\n        &:active {\n          border-color: var(--primary-active);\n\n          &::before {\n            --primary-color: var(--primary-active);\n          }\n        }\n\n        &:checked {\n          border-color: var(--primary-color);\n\n          &::before {\n            transform: scale(1);\n          }\n        }\n\n        &:disabled {\n          border-color: var(--disable-border);\n\n          &::before {\n            --primary-color: var(--disable-border);\n          }\n        }\n\n        &:not(:disabled, :checked):hover {\n          border-color: var(--primary-hover);\n\n          &::before {\n            --primary-color: var(--primary-hover);\n          }\n        }\n      }\n\n      .label {\n        color: var(--text-color);\n        outline: 0;\n        cursor: inherit;\n      }\n\n      &:has(:checked) {\n        --text-color: var(--primary-color);\n      }\n\n      &:not([aria-disabled]:not([aria-disabled='false'])):focus .radio {\n        box-shadow: 0 0 0 3px var(--primary-outline);\n\n        &:not(:checked) {\n          border-color: var(--primary-hover);\n        }\n      }\n\n      &[aria-disabled]:not([aria-disabled='false']) {\n        --text-color: var(--disable-color);\n\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  .horizontal {\n    flex-direction: row;\n  }\n\n  .vertical {\n    flex-direction: column;\n  }\n\n  ${['success', 'error', 'warning']\n    .map(\n      (s) =>\n        `.${s} {--border-color: var(--${s}-border);--primary-hover: var(--${s}-hover);--primary-outline: var(--${s}-outline);--primary-color: var(--${s}-color);--primary-active: var(--${s}-active);--component-bg: var(--${s}-bg);}`,\n    )\n    .join('')}\n`;\n"],"names":["css","style","map","s","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqHvB,EAAE,CAAC,UAAW,QAAS,UAAU,CAC9BE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,wBAAwB,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,+BAA+B,EAAEA,EAAE,MAAM,CAAC,EAEjOC,IAAI,CAAC,IAAI;AACd,CAAC,AAAC"}

package/es/segmented/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/segmented/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport '../typography';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\nexport interface SegmentedProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"radio\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值 */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  options?: (BaseOption | string | number)[];\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 值修改时的回调方法 */\n  onChange?(val: string | number): void;\n}\n\nfunction Segmented(props: SegmentedProps) {\n  const { baseStyle, isDark } = theme;\n  const [value, setValue] = createSignal(props.defaultValue);\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  let box: HTMLDivElement | undefined;\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --segmented-bg: #000;\n          --segmented-current-bg: #1f1f1f;\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --segmented-bg: var(--primary-details-bg);\n        --segmented-current-bg: #fff;\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  function onChange(item: BaseOption) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (isFunction(props.onChange)) {\n        props.onChange(next);\n      }\n      if (props.value === void 0) {\n        setValue(next);\n      }\n    }\n  }\n  function onKeyUp(key: string, item: BaseOption) {\n    if (key === 'Enter') {\n      onChange(item);\n    }\n  }\n  const options = createMemo(() => {\n    return getOptions(props.options, fieldNames());\n  });\n\n  createEffect(() => {\n    setValue((props.value !== void 0 && props.value) || props.defaultValue);\n  });\n\n  createEffect(() => {\n    const val = options().find((o) => o[fieldNames().value] === value());\n    const timer = setTimeout(() => {\n      clearTimeout(timer);\n      const el = val?.ref;\n\n      if (el) {\n        setOffsetStyle(\n          `.box {--w: ${el.offsetWidth}px;--h: ${el.offsetHeight}px;--left: ${el.offsetLeft}px;}`,\n        );\n      } else {\n        setOffsetStyle('');\n      }\n    }, 0);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {cssVar()}\n        {style}\n        {offsetStyle()}\n        {css(props.css)}\n      </style>\n      <div ref={box} class={cx('box', props.class)}>\n        <For each={options()}>\n          {(item, i) => {\n            const readOnly = props.disabled || item.disabled;\n            const handleChange = () => onChange(item);\n            const fieldName = fieldNames();\n\n            return (\n              <>\n                <input\n                  class=\"segmented\"\n                  type=\"radio\"\n                  name={props.name}\n                  value={item[fieldName.value]}\n                  disabled={readOnly}\n                  checked={item[fieldName.value] === value()}\n                  onChange={handleChange}\n                />\n                <label\n                  class={cx('label', item.class)}\n                  tabindex={readOnly ? -1 : 0}\n                  onKeyUp={({ key }) => onKeyUp(key, item)}\n                  onClick={handleChange}\n                  aria-disabled={readOnly}\n                  ref={options()[i()].ref}\n                >\n                  <Show when={item[fieldName.icon]}>\n                    <span class=\"icon\">{item[fieldName.icon]}</span>\n                  </Show>\n                  {item[fieldName.label]}\n                  <Show when={item[fieldName.suffix]}>\n                    <n-typography type=\"secondary\">{item[fieldName.suffix]}</n-typography>\n                  </Show>\n                </label>\n              </>\n            );\n          }}\n        </For>\n      </div>\n    </>\n  );\n}\n\nexport type SegmentedElement = CustomElement<SegmentedProps>;\n\ncustomElement<SegmentedProps>(\n  'n-segmented',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: [],\n    onChange: void 0,\n    fieldNames: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        name: el.name,\n        disabled: el.disabled,\n        value: el.value,\n        defaultValue: el.defaultValue,\n        options: el.options,\n        fieldNames: el.fieldNames,\n        onChange(next: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Segmented, props);\n  },\n);\nexport default Segmented;\n"],"names":["For","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","isFunction","css","cx","customElement","style","FieldName","getOptions","theme","Segmented","props","box","baseStyle","isDark","value","setValue","defaultValue","offsetStyle","setOffsetStyle","cssVar","fieldNames","Object","assign","onChange","item","disabled","next","options","val","find","o","timer","setTimeout","clearTimeout","el","ref","offsetWidth","offsetHeight","offsetLeft","i","readOnly","handleChange","fieldName","name","key","icon","label","suffix","class","_","opt","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}
+{"version":3,"sources":["../../components/segmented/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport '../typography';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\nexport interface SegmentedProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"radio\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值 */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  options?: (BaseOption | string | number)[];\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 值修改时的回调方法 */\n  onChange?(val: string | number): void;\n}\n\nfunction Segmented(props: SegmentedProps) {\n  const { baseStyle, isDark } = theme;\n  const [value, setValue] = createSignal(props.defaultValue);\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  let box: HTMLDivElement | undefined;\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --segmented-bg: #000;\n          --segmented-current-bg: #1f1f1f;\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --segmented-bg: var(--primary-details-bg);\n        --segmented-current-bg: #fff;\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  function onChange(item: BaseOption) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (isFunction(props.onChange)) {\n        props.onChange(next);\n      }\n      if (props.value === void 0) {\n        setValue(next);\n      }\n    }\n  }\n  function onKeyUp(key: string, item: BaseOption) {\n    if (key === 'Enter') {\n      onChange(item);\n    }\n  }\n  const options = createMemo(() => {\n    return getOptions(props.options, fieldNames());\n  });\n\n  createEffect(() => {\n    setValue((props.value !== void 0 && props.value) || props.defaultValue);\n  });\n\n  createEffect(() => {\n    const val = options().find((o) => o[fieldNames().value] === value());\n    const timer = setTimeout(() => {\n      clearTimeout(timer);\n      const el = val?.ref;\n\n      if (el) {\n        setOffsetStyle(\n          `.box {--w: ${el.offsetWidth}px;--h: ${el.offsetHeight}px;--left: ${el.offsetLeft}px;}`,\n        );\n      } else {\n        setOffsetStyle('');\n      }\n    }, 0);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {cssVar()}\n        {style}\n        {offsetStyle()}\n        {css(props.css)}\n      </style>\n      <div ref={box} class={cx('box', props.class)}>\n        <For each={options()}>\n          {(item, i) => {\n            const readOnly = props.disabled || item.disabled;\n            const handleChange = () => onChange(item);\n            const fieldName = fieldNames();\n\n            return (\n              <>\n                <input\n                  class=\"segmented\"\n                  type=\"radio\"\n                  name={props.name}\n                  value={item[fieldName.value]}\n                  disabled={readOnly}\n                  checked={item[fieldName.value] === value()}\n                  onChange={handleChange}\n                />\n                <label\n                  class={cx('label', item.class)}\n                  tabindex={readOnly ? -1 : 0}\n                  onKeyUp={({ key }) => onKeyUp(key, item)}\n                  onClick={handleChange}\n                  aria-disabled={readOnly}\n                  ref={options()[i()].ref}\n                >\n                  <Show when={item[fieldName.icon]}>\n                    <span class=\"icon\">{item[fieldName.icon]}</span>\n                  </Show>\n                  {item[fieldName.label]}\n                  <Show when={item[fieldName.suffix]}>\n                    <n-typography type=\"secondary\">{item[fieldName.suffix]}</n-typography>\n                  </Show>\n                </label>\n              </>\n            );\n          }}\n        </For>\n      </div>\n    </>\n  );\n}\n\nexport type SegmentedElement = CustomElement<SegmentedProps>;\n\ncustomElement<SegmentedProps>(\n  'n-segmented',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: [],\n    onChange: void 0,\n    fieldNames: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        name: el.name,\n        disabled: el.disabled,\n        value: el.value,\n        defaultValue: el.defaultValue,\n        options: el.options,\n        fieldNames: el.fieldNames,\n        onChange(next: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Segmented, props);\n  },\n);\nexport default Segmented;\n"],"names":["For","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","isFunction","css","cx","customElement","style","FieldName","getOptions","theme","Segmented","props","box","baseStyle","isDark","value","setValue","defaultValue","offsetStyle","setOffsetStyle","cssVar","fieldNames","Object","assign","onChange","item","disabled","next","options","val","find","o","timer","setTimeout","clearTimeout","el","ref","offsetWidth","offsetHeight","offsetLeft","i","readOnly","handleChange","fieldName","name","key","icon","label","suffix","class","_","opt","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"rangeMappings":";;;;;;;;;;","mappings":"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"}

package/es/segmented/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/segmented/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .box {\n    position: relative;\n    display: flex;\n    border-radius: var(--border-radius);\n    padding: 2px;\n    max-inline-size: 100%;\n    min-block-size: 28px;\n    background-color: var(--segmented-bg);\n    line-height: 28px;\n    inline-size: fit-content;\n\n    &::before {\n      position: absolute;\n      display: block;\n      border-radius: var(--border-radius);\n      background-color: var(--segmented-current-bg);\n      box-shadow: 0 2px 8px 0 var(--primary-shadow);\n      content: '';\n      inline-size: var(--w);\n      block-size: var(--h);\n      inset-block-start: 2px;\n      inset-inline-start: var(--left);\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  .label {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    padding: 0 12px;\n    color: var(--text-color);\n    outline: 0;\n    transition:\n      0.3s background-color var(--transition-timing-function),\n      var(--transition-duration) color var(--transition-timing-function);\n    cursor: pointer;\n    box-sizing: border-box;\n    /* stylelint-disable-next-line */\n    display: -webkit-box;\n    -webkit-box-orient: block-axis;\n    -webkit-line-clamp: var(--rows, 1);\n    word-break: break-word;\n    word-wrap: break-word;\n    font-size: var(--font-size);\n\n    &:hover,\n    &:focus {\n      background-color: var(--primary-selection);\n    }\n\n    &[aria-disabled]:not([aria-disabled='false']) {\n      cursor: not-allowed;\n      color: var(--disable-color);\n\n      &:hover,\n      &:focus {\n        background-color: transparent;\n      }\n    }\n\n    .icon {\n      margin-inline-end: 6px;\n    }\n  }\n\n  .segmented {\n    display: none;\n    pointer-events: none;\n\n    &:checked + .label {\n      color: var(--text-heading);\n      background-color: transparent;\n\n      &[aria-disabled]:not([aria-disabled='false']) {\n        color: var(--disable-color);\n      }\n    }\n  }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFzB,CAAC,AAAC"}
+{"version":3,"sources":["../../components/segmented/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .box {\n    position: relative;\n    display: flex;\n    border-radius: var(--border-radius);\n    padding: 2px;\n    max-inline-size: 100%;\n    min-block-size: 28px;\n    background-color: var(--segmented-bg);\n    line-height: 28px;\n    inline-size: fit-content;\n\n    &::before {\n      position: absolute;\n      display: block;\n      border-radius: var(--border-radius);\n      background-color: var(--segmented-current-bg);\n      box-shadow: 0 2px 8px 0 var(--primary-shadow);\n      content: '';\n      inline-size: var(--w);\n      block-size: var(--h);\n      inset-block-start: 2px;\n      inset-inline-start: var(--left);\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  .label {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    padding: 0 12px;\n    color: var(--text-color);\n    outline: 0;\n    transition:\n      0.3s background-color var(--transition-timing-function),\n      var(--transition-duration) color var(--transition-timing-function);\n    cursor: pointer;\n    box-sizing: border-box;\n    /* stylelint-disable-next-line */\n    display: -webkit-box;\n    -webkit-box-orient: block-axis;\n    -webkit-line-clamp: var(--rows, 1);\n    word-break: break-word;\n    word-wrap: break-word;\n    font-size: var(--font-size);\n\n    &:hover,\n    &:focus {\n      background-color: var(--primary-selection);\n    }\n\n    &[aria-disabled]:not([aria-disabled='false']) {\n      cursor: not-allowed;\n      color: var(--disable-color);\n\n      &:hover,\n      &:focus {\n        background-color: transparent;\n      }\n    }\n\n    .icon {\n      margin-inline-end: 6px;\n    }\n  }\n\n  .segmented {\n    display: none;\n    pointer-events: none;\n\n    &:checked + .label {\n      color: var(--text-heading);\n      background-color: transparent;\n\n      &[aria-disabled]:not([aria-disabled='false']) {\n        color: var(--disable-color);\n      }\n    }\n  }\n`;\n"],"names":["css","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFzB,CAAC,AAAC"}

package/es/select/index.js.map

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

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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HzB,CAAC,AAAC"}

package/es/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/skeleton/index.tsx"],"sourcesContent":["import { For, Show, createComponent, createMemo, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nconst style = css`\n  :host {\n    display: block;\n    inline-size: 100%;\n  }\n\n  .skeleton {\n    display: flex;\n    inline-size: 100%;\n    gap: 16px;\n  }\n\n  .avatar,\n  .title,\n  .paragraph > div {\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    background: var(--skeleton-bg);\n    transition: background-color var(--transition-duration) var(--transition-timing-function);\n  }\n\n  .avatar {\n    border-radius: 50%;\n    inline-size: 32px;\n    block-size: 32px;\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .title {\n    margin-block-end: 16px;\n    inline-size: 32%;\n    block-size: 32px;\n  }\n\n  .paragraph {\n    display: flex;\n    padding: 0;\n    flex-direction: column;\n    gap: 12px;\n\n    & > div {\n      inline-size: 100%;\n      block-size: 16px;\n      list-style: none;\n\n      &:last-of-type {\n        inline-size: 65%;\n      }\n    }\n  }\n\n  .active {\n    &::after {\n      display: block;\n      block-size: 100%;\n      animation: skeleton-effect 1.4s var(--transition-timing-function) infinite;\n      background: var(--skeleton-bg-active);\n      content: '';\n      transition: background-color var(--transition-duration) var(--transition-timing-function);\n    }\n  }\n\n  @keyframes skeleton-effect {\n    to {\n      background-position-x: -20%;\n    }\n  }\n`;\n\nexport interface SkeletonProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 行\n   * @default 3\n   */\n  rows?: number;\n  /** 显示动画\n   * @default false\n   */\n  active?: boolean;\n  /** 显示头像\n   * @default false\n   */\n  avatar?: boolean;\n  /** 显示标题\n   * @default false\n   */\n  title?: boolean;\n}\n\nfunction Skeleton(props: SkeletonProps) {\n  const { baseStyle, isDark } = theme;\n  const activeCls = createMemo(() => props.active && 'active');\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>\n        {baseStyle()}\n        {cssVar()}\n        {style}\n        {css(props.css)}\n      </style>\n      <div class={cx('skeleton', props.class)}>\n        <Show when={props.avatar}>\n          <div class={cx('avatar', activeCls())} />\n        </Show>\n        <div class=\"body\">\n          <Show when={props.title}>\n            <div class={cx('title', activeCls())} />\n          </Show>\n          <div class=\"paragraph\">\n            <For each={rows()}>{() => <div class={cx(activeCls())} />}</For>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport type SkeletonElement = CustomElement<SkeletonProps>;\ncustomElement<SkeletonProps>(\n  'n-skeleton',\n  {\n    rows: 3,\n    active: void 0,\n    avatar: void 0,\n    title: void 0,\n    css: void 0,\n    class: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        rows: el.rows,\n        active: el.active,\n        avatar: el.avatar,\n        title: el.title,\n        css: el.css,\n      },\n      _,\n    );\n\n    return createComponent(Skeleton, props);\n  },\n);\nexport default Skeleton;\n"],"names":["For","Show","createComponent","createMemo","mergeProps","css","cx","customElement","theme","style","Skeleton","props","baseStyle","isDark","activeCls","active","rows","Array","fill","cssVar","avatar","title","class","_","opt","el","element"],"mappings":"iSAAA,QAASA,OAAAA,CAAG,CAAEC,QAAAA,CAAI,CAAEC,mBAAAA,CAAe,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAC9E,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAAOC,MAAW,UAAW,CAG7B,IAAMC,EAAQJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsElB,CAAC,CAyBD,SAASK,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGL,EACxBM,EAAYX,EAAW,IAAMQ,EAAMI,MAAM,EAAI,UAC7CC,EAAOb,EAAW,IAAMc,MAAMN,EAAMK,IAAI,EAAEE,IAAI,CAAC,IAC/CC,EAAShB,EAAW,IACxB,AAAIU,IACKR,CAAG,CAAC;;;;;;;;;;;MAWX,CAAC,CAGIA,CAAG,CAAC;;;;;;;;;;;IAWX,CAAC,EAGH,kCAGOO,YACAO,YACAV,gBACAJ,EAAIM,EAAMN,GAAG,yEAGbJ,qBAAWU,EAAMS,MAAM,4CACVd,EAAG,SAAUQ,qBAGxBb,qBAAWU,EAAMU,KAAK,4CACTf,EAAG,QAASQ,qBAGvBd,qBAAUgB,cAAS,qCAAkBV,EAAGQ,0BATnCR,EAAG,WAAYK,EAAMW,KAAK,UAe5C,CAGAf,EACE,aACA,CACES,KAAM,EACND,OAAQ,KAAK,EACbK,OAAQ,KAAK,EACbC,MAAO,KAAK,EACZhB,IAAK,KAAK,EACViB,MAAO,KAAK,CACd,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAYtB,OAAOxB,EAAgBQ,EAXTN,EACZ,CACEY,KAAMS,EAAGT,IAAI,CACbD,OAAQU,EAAGV,MAAM,CACjBK,OAAQK,EAAGL,MAAM,CACjBC,MAAOI,EAAGJ,KAAK,CACfhB,IAAKoB,EAAGpB,GAAG,AACb,EACAkB,GAIJ,EAEF,gBAAeb,CAAS"}
+{"version":3,"sources":["../../components/skeleton/index.tsx"],"sourcesContent":["import { For, Show, createComponent, createMemo, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nconst style = css`\n  :host {\n    display: block;\n    inline-size: 100%;\n  }\n\n  .skeleton {\n    display: flex;\n    inline-size: 100%;\n    gap: 16px;\n  }\n\n  .avatar,\n  .title,\n  .paragraph > div {\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    background: var(--skeleton-bg);\n    transition: background-color var(--transition-duration) var(--transition-timing-function);\n  }\n\n  .avatar {\n    border-radius: 50%;\n    inline-size: 32px;\n    block-size: 32px;\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .title {\n    margin-block-end: 16px;\n    inline-size: 32%;\n    block-size: 32px;\n  }\n\n  .paragraph {\n    display: flex;\n    padding: 0;\n    flex-direction: column;\n    gap: 12px;\n\n    & > div {\n      inline-size: 100%;\n      block-size: 16px;\n      list-style: none;\n\n      &:last-of-type {\n        inline-size: 65%;\n      }\n    }\n  }\n\n  .active {\n    &::after {\n      display: block;\n      block-size: 100%;\n      animation: skeleton-effect 1.4s var(--transition-timing-function) infinite;\n      background: var(--skeleton-bg-active);\n      content: '';\n      transition: background-color var(--transition-duration) var(--transition-timing-function);\n    }\n  }\n\n  @keyframes skeleton-effect {\n    to {\n      background-position-x: -20%;\n    }\n  }\n`;\n\nexport interface SkeletonProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 行\n   * @default 3\n   */\n  rows?: number;\n  /** 显示动画\n   * @default false\n   */\n  active?: boolean;\n  /** 显示头像\n   * @default false\n   */\n  avatar?: boolean;\n  /** 显示标题\n   * @default false\n   */\n  title?: boolean;\n}\n\nfunction Skeleton(props: SkeletonProps) {\n  const { baseStyle, isDark } = theme;\n  const activeCls = createMemo(() => props.active && 'active');\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>\n        {baseStyle()}\n        {cssVar()}\n        {style}\n        {css(props.css)}\n      </style>\n      <div class={cx('skeleton', props.class)}>\n        <Show when={props.avatar}>\n          <div class={cx('avatar', activeCls())} />\n        </Show>\n        <div class=\"body\">\n          <Show when={props.title}>\n            <div class={cx('title', activeCls())} />\n          </Show>\n          <div class=\"paragraph\">\n            <For each={rows()}>{() => <div class={cx(activeCls())} />}</For>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport type SkeletonElement = CustomElement<SkeletonProps>;\ncustomElement<SkeletonProps>(\n  'n-skeleton',\n  {\n    rows: 3,\n    active: void 0,\n    avatar: void 0,\n    title: void 0,\n    css: void 0,\n    class: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        rows: el.rows,\n        active: el.active,\n        avatar: el.avatar,\n        title: el.title,\n        css: el.css,\n      },\n      _,\n    );\n\n    return createComponent(Skeleton, props);\n  },\n);\nexport default Skeleton;\n"],"names":["For","Show","createComponent","createMemo","mergeProps","css","cx","customElement","theme","style","Skeleton","props","baseStyle","isDark","activeCls","active","rows","Array","fill","cssVar","avatar","title","class","_","opt","el","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"iSAAA,QAASA,OAAAA,CAAG,CAAEC,QAAAA,CAAI,CAAEC,mBAAAA,CAAe,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAC9E,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAAOC,MAAW,UAAW,CAG7B,IAAMC,EAAQJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsElB,CAAC,CAyBD,SAASK,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGL,EACxBM,EAAYX,EAAW,IAAMQ,EAAMI,MAAM,EAAI,UAC7CC,EAAOb,EAAW,IAAMc,MAAMN,EAAMK,IAAI,EAAEE,IAAI,CAAC,IAC/CC,EAAShB,EAAW,IACxB,AAAIU,IACKR,CAAG,CAAC;;;;;;;;;;;MAWX,CAAC,CAGIA,CAAG,CAAC;;;;;;;;;;;IAWX,CAAC,EAGH,kCAGOO,YACAO,YACAV,gBACAJ,EAAIM,EAAMN,GAAG,yEAGbJ,qBAAWU,EAAMS,MAAM,4CACVd,EAAG,SAAUQ,qBAGxBb,qBAAWU,EAAMU,KAAK,4CACTf,EAAG,QAASQ,qBAGvBd,qBAAUgB,cAAS,qCAAkBV,EAAGQ,0BATnCR,EAAG,WAAYK,EAAMW,KAAK,UAe5C,CAGAf,EACE,aACA,CACES,KAAM,EACND,OAAQ,KAAK,EACbK,OAAQ,KAAK,EACbC,MAAO,KAAK,EACZhB,IAAK,KAAK,EACViB,MAAO,KAAK,CACd,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAYtB,OAAOxB,EAAgBQ,EAXTN,EACZ,CACEY,KAAMS,EAAGT,IAAI,CACbD,OAAQU,EAAGV,MAAM,CACjBK,OAAQK,EAAGL,MAAM,CACjBC,MAAOI,EAAGJ,KAAK,CACfhB,IAAKoB,EAAGpB,GAAG,AACb,EACAkB,GAIJ,EAEF,gBAAeb,CAAS"}

package/es/spin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/spin/index.tsx"],"sourcesContent":["import { createComponent, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nconst style = css`\n  .box {\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spin {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\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: 16px;\n      font-size: large;\n      text-align: center;\n      inline-size: 32px;\n      block-size: 32px;\n      inset-block: 0 0;\n      inset-inline: 0 0;\n      box-sizing: border-box;\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>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <div class={cx('box', props.spin && 'spin', props.class)}>\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\ncustomElement<SpinProps>('n-spin', { class: void 0, css: void 0, spin: void 0 }, (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      children: [...el.childNodes.values()],\n    },\n    _,\n  );\n\n  return createComponent(Spin, props);\n});\nexport default Spin;\n"],"names":["createComponent","mergeProps","css","cx","customElement","theme","style","Spin","props","baseStyle","children","spin","class","_","opt","el","element","childNodes","values"],"mappings":"iNAAA,QAASA,mBAAAA,CAAe,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACvD,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAAOC,MAAW,UAAW,CAG7B,IAAMC,EAAQJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDlB,CAAC,CAaD,SAASK,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAEtB,kCAGOI,YACAH,gBACAJ,EAAIM,EAAMN,GAAG,wDAGQM,EAAME,QAAQ,YAD1BP,EAAG,MAAOK,EAAMG,IAAI,EAAI,OAAQH,EAAMI,KAAK,UAK7D,CAIAR,EAAyB,SAAU,CAAEQ,MAAO,KAAK,EAAGV,IAAK,KAAK,EAAGS,KAAM,KAAK,CAAE,EAAG,CAACE,EAAGC,IAS5Ed,EAAgBO,EAPTN,EACZ,CACES,SAAU,IAAIK,AAHPD,EAAIE,OAAO,CAGDC,UAAU,CAACC,MAAM,GAAG,AACvC,EACAL,IAKJ,gBAAeN,CAAK"}
+{"version":3,"sources":["../../components/spin/index.tsx"],"sourcesContent":["import { createComponent, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nconst style = css`\n  .box {\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spin {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\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: 16px;\n      font-size: large;\n      text-align: center;\n      inline-size: 32px;\n      block-size: 32px;\n      inset-block: 0 0;\n      inset-inline: 0 0;\n      box-sizing: border-box;\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>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <div class={cx('box', props.spin && 'spin', props.class)}>\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\ncustomElement<SpinProps>('n-spin', { class: void 0, css: void 0, spin: void 0 }, (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      children: [...el.childNodes.values()],\n    },\n    _,\n  );\n\n  return createComponent(Spin, props);\n});\nexport default Spin;\n"],"names":["createComponent","mergeProps","css","cx","customElement","theme","style","Spin","props","baseStyle","children","spin","class","_","opt","el","element","childNodes","values"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"iNAAA,QAASA,mBAAAA,CAAe,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACvD,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAAOC,MAAW,UAAW,CAG7B,IAAMC,EAAQJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDlB,CAAC,CAaD,SAASK,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAEtB,kCAGOI,YACAH,gBACAJ,EAAIM,EAAMN,GAAG,wDAGQM,EAAME,QAAQ,YAD1BP,EAAG,MAAOK,EAAMG,IAAI,EAAI,OAAQH,EAAMI,KAAK,UAK7D,CAIAR,EAAyB,SAAU,CAAEQ,MAAO,KAAK,EAAGV,IAAK,KAAK,EAAGS,KAAM,KAAK,CAAE,EAAG,CAACE,EAAGC,IAS5Ed,EAAgBO,EAPTN,EACZ,CACES,SAAU,IAAIK,AAHPD,EAAIE,OAAO,CAGDC,UAAU,CAACC,MAAM,GAAG,AACvC,EACAL,IAKJ,gBAAeN,CAAK"}

package/es/switch/index.js.map

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

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 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 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIzB,CAAC,AAAC"}

package/es/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","For","Show","batch","createComponent","createEffect","createMemo","createSignal","mergeProps","splitProps","untrack","isObject","isString","isUndefined","css","cx","customElement","styles","theme","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","removeAttribute"],"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","For","Show","batch","createComponent","createEffect","createMemo","createSignal","mergeProps","splitProps","untrack","isObject","isString","isUndefined","css","cx","customElement","styles","theme","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","removeAttribute"],"rangeMappings":"","mappings":"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"}

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 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 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwH1B,CAAC,AAAC"}

package/es/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/tabs/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  untrack,\n} from 'solid-js';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { addCss, btnCss, style } from './style';\nimport { FieldName } from '../basic-config';\nimport '../button';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, ButtonElement, CustomElement } from '..';\n\nexport interface TabsProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值(指定值时为受控模式,配合onChange使用) */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  items?: (TabOption | string)[];\n  /** 标签页居中 */\n  centered?: boolean;\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 标签页的显示类型\n   * @default 'line'\n   */\n  type?: 'line' | 'card';\n  /** 值修改时的回调方法 */\n  onChange?(val: string, item: TabOption, e: Event): void;\n  /** 显示添加按钮 */\n  add?: boolean;\n  /** 删除和添加时的回调方法 */\n  onEdit?: (type: 'add' | 'remove', item: TabOption, e: Event) => void;\n  /** 给标签页左右添加的附加内容 */\n  extra?: {\n    left?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n    right?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  };\n}\n\nexport interface TabOption extends Omit<BaseOption, 'options'> {\n  /** 内容 */\n  content?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 标签可关闭 */\n  closable?: boolean;\n}\n\nfunction Tabs(props: TabsProps) {\n  const { baseStyle, isDark } = theme;\n  let box: HTMLDivElement | undefined;\n  let add: ButtonElement | undefined;\n  const [value, setValue] = createSignal<string | number>();\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  const [wrap, setWrap] = createSignal({ left: false, right: false });\n  let wrapRef: HTMLDivElement | undefined;\n\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --tab-current-bg: var(--component-bg);\n          --tab-bg: rgb(255 255 255 / 4%);\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --tab-bg: var(--primary-details-bg);\n        --tab-current-bg: var(--component-bg);\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n  const items = createMemo<TabOption[]>(() => {\n    return getOptions(props.items, fieldNames());\n  });\n  const current = createMemo(() => {\n    return items().find((o) => o[fieldNames().value] === value());\n  });\n\n  function onChange(item: TabOption, e: Event) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (props.value === void 0) {\n        setValue(next);\n      }\n      if (isFunction(props.onChange)) {\n        props.onChange(next, item, e);\n      }\n    }\n  }\n  function onKeyUp(item: TabOption, e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      onChange(item, e);\n    }\n  }\n  function handleEdit(type: 'remove' | 'add', item: TabOption | undefined, e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n    if (isFunction(props.onEdit)) {\n      props.onEdit(type, item, e);\n    }\n  }\n  function handleWheel(e?: WheelEvent) {\n    if (wrapRef) {\n      const pwid = box!.offsetWidth;\n      const addWid = add?.offsetWidth || 0;\n      const scrollWidth = wrapRef.scrollWidth;\n\n      if (scrollWidth > pwid - addWid) {\n        let deltaY = 0;\n\n        if (e) {\n          if (!passiveSupported) {\n            e.stopPropagation();\n            e.preventDefault();\n          }\n          deltaY = e.deltaX !== 0 ? e.deltaX : e.deltaY;\n        }\n        const nl = wrapRef.scrollLeft + deltaY;\n\n        wrapRef.scrollTo({\n          left: nl,\n        });\n        setWrap({\n          left: nl > 0,\n          right: scrollWidth > nl + wrapRef.offsetWidth,\n        });\n      } else {\n        setWrap({\n          left: false,\n          right: false,\n        });\n      }\n      const el = untrack(current)?.ref;\n\n      setOffsetStyle(\n        `.tabs {--w: ${el.offsetWidth}px;--left: ${\n          el.offsetLeft - wrapRef!.scrollLeft + wrapRef.offsetLeft\n        }px;--s:${wrapRef!.scrollLeft}px}`,\n      );\n    }\n  }\n  createEffect(() => {\n    let _val = untrack(value);\n\n    if (props.value !== void 0) {\n      _val = props.value;\n    } else if (props.defaultValue !== void 0) {\n      _val = props.defaultValue;\n    } else if (items()[0]) {\n      _val = items()[0][fieldNames().value];\n    }\n    if (_val !== untrack(value)) {\n      setValue(_val);\n    }\n  });\n\n  createEffect(() => {\n    let timer: NodeJS.Timeout | undefined, whellTimer: NodeJS.Timeout | undefined;\n    const el = current()?.ref;\n\n    if (el) {\n      timer = setTimeout(() => {\n        clearTimeout(timer);\n        if (wrapRef) {\n          setWrap({\n            left: false,\n            right: false,\n          });\n          wrapRef.scrollTo({\n            left: el.offsetLeft - wrapRef.offsetLeft,\n            behavior: 'smooth',\n          });\n        }\n\n        setOffsetStyle(\n          `.tabs {--w: ${el.offsetWidth}px;--left: ${\n            el.offsetLeft - wrapRef!.scrollLeft + wrapRef!.offsetLeft\n          }px;--s:${wrapRef!.scrollLeft}px}`,\n        );\n        whellTimer = setTimeout(() => {\n          clearTimeout(whellTimer);\n          handleWheel();\n        }, 300);\n      }, 0);\n    } else {\n      setOffsetStyle('');\n    }\n    onCleanup(() => {\n      clearTimeout(timer);\n      clearTimeout(whellTimer);\n    });\n  });\n  const [ani, setAni] = createSignal('slide-in');\n\n  createEffect(() => {\n    setAni('slide-in');\n    return current()?.content;\n  });\n  const left = createMemo(() =>\n    isFunction(props.extra?.left) ? (props.extra!.left() as JSX.Element) : props.extra?.left,\n  );\n  const right = createMemo(() =>\n    isFunction(props.extra?.right) ? (props.extra!.right() as JSX.Element) : props.extra?.right,\n  );\n  const content = createMemo(() => {\n    const _content = current()?.content;\n\n    return isFunction(_content) ? (_content() as JSX.Element) : _content;\n  });\n\n  function onAnimationEnd() {\n    setAni('');\n  }\n  onMount(() => {\n    box?.addEventListener('wheel', handleWheel, {\n      passive: passiveSupported,\n    });\n  });\n  onCleanup(() => {\n    box?.removeEventListener('wheel', handleWheel, false);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {cssVar()}\n        {style}\n        {offsetStyle()}\n        {css(props.css)}\n      </style>\n      <div\n        ref={box}\n        class={cx('tabs', props.type, props.class, props.centered && 'centered')}\n        aria-disabled={props.disabled}\n      >\n        <Show when={left()}>{left()}</Show>\n        <div\n          ref={wrapRef}\n          class={cx('items', wrap().left && 'warp-left', wrap().right && 'warp-right')}\n        >\n          <For each={items()}>\n            {(item, i) => {\n              const readOnly = createMemo(() => props.disabled || item.disabled);\n              const { icon, value: val, label } = fieldNames();\n              const isActive = createMemo(() => value() !== void 0 && item[val] === value());\n\n              return (\n                <n-button\n                  link={true}\n                  type={isActive() ? 'primary' : 'default'}\n                  class={cx('tab', isActive() && 'active', item.class)}\n                  tabindex={readOnly() ? -1 : 0}\n                  onKeyUp={onKeyUp.bind(null, item)}\n                  onClick={onChange.bind(null, item)}\n                  disabled={readOnly()}\n                  icon={item[icon]}\n                  ref={items()[i()].ref}\n                  css={btnCss}\n                >\n                  {item[label]}\n                  <Show when={item.closable}>\n                    <span class=\"remove\" onClick={handleEdit.bind(null, 'remove', item)}>\n                      ⛌\n                    </span>\n                  </Show>\n                </n-button>\n              );\n            }}\n          </For>\n        </div>\n        <Show when={props.add}>\n          <n-button\n            ref={add}\n            link={true}\n            class=\"tab add\"\n            css={addCss}\n            onClick={handleEdit.bind(null, 'add', void 0)}\n          >\n            ＋\n          </n-button>\n        </Show>\n        <Show when={right()}>{right()}</Show>\n      </div>\n      <Show when={current()?.content}>\n        <div class={cx('content', ani())} onAnimationEnd={onAnimationEnd}>\n          {content()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport type TabsElement = CustomElement<TabsProps, 'onChange' | 'onEdit'>;\n\ncustomElement<TabsProps>(\n  'n-tabs',\n  {\n    class: void 0,\n    css: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    centered: void 0,\n    items: [],\n    type: 'line' as TabsProps['type'],\n    fieldNames: void 0,\n    add: void 0,\n    extra: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(next: string, item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [next, item, e],\n            }),\n          );\n        },\n        onEdit(type: 'add' | 'remove', item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('edit', {\n              detail: [type, item, e],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('items');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Tabs, props);\n  },\n);\nexport default Tabs;\n"],"names":["For","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","untrack","isFunction","passiveSupported","css","cx","customElement","addCss","btnCss","style","FieldName","getOptions","theme","Tabs","props","box","add","wrapRef","baseStyle","isDark","value","setValue","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","fieldNames","Object","assign","items","current","find","o","onChange","item","e","disabled","next","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","deltaX","nl","scrollLeft","scrollTo","el","ref","offsetLeft","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","ani","setAni","content","extra","_content","onAnimationEnd","addEventListener","passive","removeEventListener","i","readOnly","icon","val","label","isActive","bind","closable","class","centered","_","opt","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}
+{"version":3,"sources":["../../components/tabs/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  untrack,\n} from 'solid-js';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { addCss, btnCss, style } from './style';\nimport { FieldName } from '../basic-config';\nimport '../button';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, ButtonElement, CustomElement } from '..';\n\nexport interface TabsProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值(指定值时为受控模式,配合onChange使用) */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  items?: (TabOption | string)[];\n  /** 标签页居中 */\n  centered?: boolean;\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 标签页的显示类型\n   * @default 'line'\n   */\n  type?: 'line' | 'card';\n  /** 值修改时的回调方法 */\n  onChange?(val: string, item: TabOption, e: Event): void;\n  /** 显示添加按钮 */\n  add?: boolean;\n  /** 删除和添加时的回调方法 */\n  onEdit?: (type: 'add' | 'remove', item: TabOption, e: Event) => void;\n  /** 给标签页左右添加的附加内容 */\n  extra?: {\n    left?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n    right?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  };\n}\n\nexport interface TabOption extends Omit<BaseOption, 'options'> {\n  /** 内容 */\n  content?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 标签可关闭 */\n  closable?: boolean;\n}\n\nfunction Tabs(props: TabsProps) {\n  const { baseStyle, isDark } = theme;\n  let box: HTMLDivElement | undefined;\n  let add: ButtonElement | undefined;\n  const [value, setValue] = createSignal<string | number>();\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  const [wrap, setWrap] = createSignal({ left: false, right: false });\n  let wrapRef: HTMLDivElement | undefined;\n\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --tab-current-bg: var(--component-bg);\n          --tab-bg: rgb(255 255 255 / 4%);\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --tab-bg: var(--primary-details-bg);\n        --tab-current-bg: var(--component-bg);\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n  const items = createMemo<TabOption[]>(() => {\n    return getOptions(props.items, fieldNames());\n  });\n  const current = createMemo(() => {\n    return items().find((o) => o[fieldNames().value] === value());\n  });\n\n  function onChange(item: TabOption, e: Event) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (props.value === void 0) {\n        setValue(next);\n      }\n      if (isFunction(props.onChange)) {\n        props.onChange(next, item, e);\n      }\n    }\n  }\n  function onKeyUp(item: TabOption, e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      onChange(item, e);\n    }\n  }\n  function handleEdit(type: 'remove' | 'add', item: TabOption | undefined, e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n    if (isFunction(props.onEdit)) {\n      props.onEdit(type, item, e);\n    }\n  }\n  function handleWheel(e?: WheelEvent) {\n    if (wrapRef) {\n      const pwid = box!.offsetWidth;\n      const addWid = add?.offsetWidth || 0;\n      const scrollWidth = wrapRef.scrollWidth;\n\n      if (scrollWidth > pwid - addWid) {\n        let deltaY = 0;\n\n        if (e) {\n          if (!passiveSupported) {\n            e.stopPropagation();\n            e.preventDefault();\n          }\n          deltaY = e.deltaX !== 0 ? e.deltaX : e.deltaY;\n        }\n        const nl = wrapRef.scrollLeft + deltaY;\n\n        wrapRef.scrollTo({\n          left: nl,\n        });\n        setWrap({\n          left: nl > 0,\n          right: scrollWidth > nl + wrapRef.offsetWidth,\n        });\n      } else {\n        setWrap({\n          left: false,\n          right: false,\n        });\n      }\n      const el = untrack(current)?.ref;\n\n      setOffsetStyle(\n        `.tabs {--w: ${el.offsetWidth}px;--left: ${\n          el.offsetLeft - wrapRef!.scrollLeft + wrapRef.offsetLeft\n        }px;--s:${wrapRef!.scrollLeft}px}`,\n      );\n    }\n  }\n  createEffect(() => {\n    let _val = untrack(value);\n\n    if (props.value !== void 0) {\n      _val = props.value;\n    } else if (props.defaultValue !== void 0) {\n      _val = props.defaultValue;\n    } else if (items()[0]) {\n      _val = items()[0][fieldNames().value];\n    }\n    if (_val !== untrack(value)) {\n      setValue(_val);\n    }\n  });\n\n  createEffect(() => {\n    let timer: NodeJS.Timeout | undefined, whellTimer: NodeJS.Timeout | undefined;\n    const el = current()?.ref;\n\n    if (el) {\n      timer = setTimeout(() => {\n        clearTimeout(timer);\n        if (wrapRef) {\n          setWrap({\n            left: false,\n            right: false,\n          });\n          wrapRef.scrollTo({\n            left: el.offsetLeft - wrapRef.offsetLeft,\n            behavior: 'smooth',\n          });\n        }\n\n        setOffsetStyle(\n          `.tabs {--w: ${el.offsetWidth}px;--left: ${\n            el.offsetLeft - wrapRef!.scrollLeft + wrapRef!.offsetLeft\n          }px;--s:${wrapRef!.scrollLeft}px}`,\n        );\n        whellTimer = setTimeout(() => {\n          clearTimeout(whellTimer);\n          handleWheel();\n        }, 300);\n      }, 0);\n    } else {\n      setOffsetStyle('');\n    }\n    onCleanup(() => {\n      clearTimeout(timer);\n      clearTimeout(whellTimer);\n    });\n  });\n  const [ani, setAni] = createSignal('slide-in');\n\n  createEffect(() => {\n    setAni('slide-in');\n    return current()?.content;\n  });\n  const left = createMemo(() =>\n    isFunction(props.extra?.left) ? (props.extra!.left() as JSX.Element) : props.extra?.left,\n  );\n  const right = createMemo(() =>\n    isFunction(props.extra?.right) ? (props.extra!.right() as JSX.Element) : props.extra?.right,\n  );\n  const content = createMemo(() => {\n    const _content = current()?.content;\n\n    return isFunction(_content) ? (_content() as JSX.Element) : _content;\n  });\n\n  function onAnimationEnd() {\n    setAni('');\n  }\n  onMount(() => {\n    box?.addEventListener('wheel', handleWheel, {\n      passive: passiveSupported,\n    });\n  });\n  onCleanup(() => {\n    box?.removeEventListener('wheel', handleWheel, false);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {cssVar()}\n        {style}\n        {offsetStyle()}\n        {css(props.css)}\n      </style>\n      <div\n        ref={box}\n        class={cx('tabs', props.type, props.class, props.centered && 'centered')}\n        aria-disabled={props.disabled}\n      >\n        <Show when={left()}>{left()}</Show>\n        <div\n          ref={wrapRef}\n          class={cx('items', wrap().left && 'warp-left', wrap().right && 'warp-right')}\n        >\n          <For each={items()}>\n            {(item, i) => {\n              const readOnly = createMemo(() => props.disabled || item.disabled);\n              const { icon, value: val, label } = fieldNames();\n              const isActive = createMemo(() => value() !== void 0 && item[val] === value());\n\n              return (\n                <n-button\n                  link={true}\n                  type={isActive() ? 'primary' : 'default'}\n                  class={cx('tab', isActive() && 'active', item.class)}\n                  tabindex={readOnly() ? -1 : 0}\n                  onKeyUp={onKeyUp.bind(null, item)}\n                  onClick={onChange.bind(null, item)}\n                  disabled={readOnly()}\n                  icon={item[icon]}\n                  ref={items()[i()].ref}\n                  css={btnCss}\n                >\n                  {item[label]}\n                  <Show when={item.closable}>\n                    <span class=\"remove\" onClick={handleEdit.bind(null, 'remove', item)}>\n                      ⛌\n                    </span>\n                  </Show>\n                </n-button>\n              );\n            }}\n          </For>\n        </div>\n        <Show when={props.add}>\n          <n-button\n            ref={add}\n            link={true}\n            class=\"tab add\"\n            css={addCss}\n            onClick={handleEdit.bind(null, 'add', void 0)}\n          >\n            ＋\n          </n-button>\n        </Show>\n        <Show when={right()}>{right()}</Show>\n      </div>\n      <Show when={current()?.content}>\n        <div class={cx('content', ani())} onAnimationEnd={onAnimationEnd}>\n          {content()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport type TabsElement = CustomElement<TabsProps, 'onChange' | 'onEdit'>;\n\ncustomElement<TabsProps>(\n  'n-tabs',\n  {\n    class: void 0,\n    css: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    centered: void 0,\n    items: [],\n    type: 'line' as TabsProps['type'],\n    fieldNames: void 0,\n    add: void 0,\n    extra: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(next: string, item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [next, item, e],\n            }),\n          );\n        },\n        onEdit(type: 'add' | 'remove', item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('edit', {\n              detail: [type, item, e],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('items');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Tabs, props);\n  },\n);\nexport default Tabs;\n"],"names":["For","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","untrack","isFunction","passiveSupported","css","cx","customElement","addCss","btnCss","style","FieldName","getOptions","theme","Tabs","props","box","add","wrapRef","baseStyle","isDark","value","setValue","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","fieldNames","Object","assign","items","current","find","o","onChange","item","e","disabled","next","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","deltaX","nl","scrollLeft","scrollTo","el","ref","offsetLeft","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","ani","setAni","content","extra","_content","onAnimationEnd","addEventListener","passive","removeEventListener","i","readOnly","icon","val","label","isActive","bind","closable","class","centered","_","opt","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"rangeMappings":";;;;;;;;;;","mappings":"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"}

package/es/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: 0 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":["css","style","btnCss","addCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8IzB,CAAC,AAAC,AAEF,QAAO,MAAME,OAASF,CAAG,CAAC;;;;;;;;;;;;;;;;;AAiB1B,CAAC,AAAC,AAEF,QAAO,MAAMG,OAASH,CAAG,CAAC;;;;;AAK1B,CAAC,AAAC"}
+{"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: 0 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":["css","style","btnCss","addCss"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8IzB,CAAC,AAAC,AAEF,QAAO,MAAME,OAASF,CAAG,CAAC;;;;;;;;;;;;;;;;;AAiB1B,CAAC,AAAC,AAEF,QAAO,MAAMG,OAASH,CAAG,CAAC;;;;;AAK1B,CAAC,AAAC"}