neko-ui 2.9.8 → 2.10.0

package/es/basic-config/index.d.ts

@@ -1,3 +1,5 @@
+import type { JSX } from 'solid-js';
+export type JSXElement = JSX.Element | HTMLElement | string | number | boolean;
 export interface BasicConfig {
     /** 组件状态
      * @default 'normal'
@@ -36,11 +38,11 @@ export declare enum Status {
 }
 export interface BaseOption {
     /** 图标 */
-    icon?: JSX.Element;
+    icon?: JSXElement | (() => JSXElement);
     /** 值 */
     value?: string | number;
     /** 标题 */
-    label?: JSX.Element;
+    label?: JSXElement | (() => JSXElement);
     /** 不可用状态 */
     disabled?: boolean;
     /** 自定义类名 */

package/es/basic-config/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/basic-config/index.ts"],"sourcesContent":["export interface BasicConfig {\n  /** 组件状态\n   * @default 'normal'\n   */\n  status: keyof typeof Status;\n  /** 组件尺寸\n   * @default 'normal'\n   */\n  size: keyof typeof Size;\n  /** 自定义 'label'、'value'、'options' 等映射的key */\n  fieldName: Partial<{ [key in keyof typeof FieldName]: string }>;\n}\n\nexport enum Size {\n  /** 小 */\n  small = 'small',\n  /** 默认: 中 */\n  normal = 'normal',\n  /** 大 */\n  large = 'large',\n}\n\nexport enum Status {\n  /** 默认 */\n  normal = 'normal',\n  /** 成功 */\n  success = 'success',\n  /** 警告 */\n  warning = 'warning',\n  /** 错误 */\n  error = 'error',\n  /** 详细 */\n  info = 'info',\n  /** 主要 */\n  primary = 'primary',\n}\n\nexport interface BaseOption {\n  /** 图标 */\n  icon?: JSX.Element;\n  /** 值 */\n  value?: string | number;\n  /** 标题 */\n  label?: JSX.Element;\n  /** 不可用状态 */\n  disabled?: boolean;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式 */\n  style?: Record<string, unknown>;\n  /** 选项状态\n   * @default 'normal'\n   */\n  status?: Status;\n  /** 分组子选项 */\n  options?: (BaseOption | string)[];\n  [key: string]: Any;\n}\n\nexport enum FieldName {\n  /** 标题 */\n  label = 'label',\n  /** 值 */\n  value = 'value',\n  /** 分组子选项 */\n  options = 'options',\n  /** 子选项 */\n  children = 'children',\n  /** 图标 */\n  icon = 'icon',\n  /** 后缀图标 */\n  suffix = 'suffix',\n  /** 标题 */\n  title = 'title',\n  /** 副标题 */\n  subTitle = 'subTitle',\n  /** 键 */\n  key = 'key',\n  /** 名称 */\n  name = 'name',\n}\n\nexport function camelToKebab(str: string) {\n  return str\n    .replace(/([A-Z])/g, '-$1') // 在大写字母前添加 \"-\"\n    .toLowerCase(); // 转为小写\n}\nexport function clearAttribute(el: HTMLElement | ICustomElement, fields: string[]) {\n  fields.forEach((key) => {\n    const field = key as 'className';\n    const prev = el[field];\n\n    el.removeAttribute(camelToKebab(field));\n    el[field] = prev;\n  });\n}\n"],"names":["Size","Status","FieldName","camelToKebab","str","replace","toLowerCase","clearAttribute","el","fields","forEach","key","prev","removeAttribute"],"mappings":"IAaYA,EASAC,EAqCAC,mBA9CAF,EAAAA,OAAAA,6EASAC,EAAAA,SAAAA,4IAqCAC,EAAAA,YAAAA,sLAuBZ,QAAO,SAASC,aAAaC,CAAW,EACtC,OAAOA,EACJC,OAAO,CAAC,WAAY,OACpBC,WAAW,EAChB,CACA,OAAO,SAASC,eAAeC,CAAgC,CAAEC,CAAgB,EAC/EA,EAAOC,OAAO,CAAC,AAACC,IAEd,IAAMC,EAAOJ,CAAE,CADDG,EACQ,CAEtBH,EAAGK,eAAe,CAACV,aAHLQ,IAIdH,CAAE,CAJYG,EAIL,CAAGC,CACd,EACF"}
+{"version":3,"sources":["components/basic-config/index.ts"],"sourcesContent":["import type { JSX } from 'solid-js';\n\nexport type JSXElement = JSX.Element | HTMLElement | string | number | boolean;\nexport interface BasicConfig {\n  /** 组件状态\n   * @default 'normal'\n   */\n  status: keyof typeof Status;\n  /** 组件尺寸\n   * @default 'normal'\n   */\n  size: keyof typeof Size;\n  /** 自定义 'label'、'value'、'options' 等映射的key */\n  fieldName: Partial<{ [key in keyof typeof FieldName]: string }>;\n}\n\nexport enum Size {\n  /** 小 */\n  small = 'small',\n  /** 默认: 中 */\n  normal = 'normal',\n  /** 大 */\n  large = 'large',\n}\n\nexport enum Status {\n  /** 默认 */\n  normal = 'normal',\n  /** 成功 */\n  success = 'success',\n  /** 警告 */\n  warning = 'warning',\n  /** 错误 */\n  error = 'error',\n  /** 详细 */\n  info = 'info',\n  /** 主要 */\n  primary = 'primary',\n}\n\nexport interface BaseOption {\n  /** 图标 */\n  icon?: JSXElement | (() => JSXElement);\n  /** 值 */\n  value?: string | number;\n  /** 标题 */\n  label?: JSXElement | (() => JSXElement);\n  /** 不可用状态 */\n  disabled?: boolean;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式 */\n  style?: Record<string, unknown>;\n  /** 选项状态\n   * @default 'normal'\n   */\n  status?: Status;\n  /** 分组子选项 */\n  options?: (BaseOption | string)[];\n  [key: string]: Any;\n}\n\nexport enum FieldName {\n  /** 标题 */\n  label = 'label',\n  /** 值 */\n  value = 'value',\n  /** 分组子选项 */\n  options = 'options',\n  /** 子选项 */\n  children = 'children',\n  /** 图标 */\n  icon = 'icon',\n  /** 后缀图标 */\n  suffix = 'suffix',\n  /** 标题 */\n  title = 'title',\n  /** 副标题 */\n  subTitle = 'subTitle',\n  /** 键 */\n  key = 'key',\n  /** 名称 */\n  name = 'name',\n}\n\nexport function camelToKebab(str: string) {\n  return str\n    .replace(/([A-Z])/g, '-$1') // 在大写字母前添加 \"-\"\n    .toLowerCase(); // 转为小写\n}\nexport function clearAttribute(el: HTMLElement | ICustomElement, fields: string[]) {\n  fields.forEach((key) => {\n    const field = key as 'className';\n    const prev = el[field];\n\n    el.removeAttribute(camelToKebab(field));\n    el[field] = prev;\n  });\n}\n"],"names":["Size","Status","FieldName","camelToKebab","str","replace","toLowerCase","clearAttribute","el","fields","forEach","key","prev","removeAttribute"],"mappings":"IAgBYA,EASAC,EAqCAC,mBA9CAF,EAAAA,OAAAA,6EASAC,EAAAA,SAAAA,4IAqCAC,EAAAA,YAAAA,sLAuBZ,QAAO,SAASC,aAAaC,CAAW,EACtC,OAAOA,EACJC,OAAO,CAAC,WAAY,OACpBC,WAAW,EAChB,CACA,OAAO,SAASC,eAAeC,CAAgC,CAAEC,CAAgB,EAC/EA,EAAOC,OAAO,CAAC,AAACC,IAEd,IAAMC,EAAOJ,CAAE,CADDG,EACQ,CAEtBH,EAAGK,eAAe,CAACV,aAHLQ,IAIdH,CAAE,CAJYG,EAIL,CAAGC,CACd,EACF"}

package/es/button/index.d.ts

@@ -1,4 +1,5 @@
 import type { BasicConfig, CustomElement } from '..';
+import { type JSXElement } from '../basic-config';
 export interface ButtonProps {
     /** 自定义类名 */
     class?: string;
@@ -33,8 +34,8 @@ export interface ButtonProps {
      */
     size?: BasicConfig['size'];
     /** 按钮前面添加一个图标 */
-    icon?: (() => JSX.Element) | JSX.Element;
-    children?: JSX.Element;
+    icon?: (() => JSXElement) | JSXElement;
+    children?: JSXElement | string;
     onClick?(e: Event): void;
     loading?: boolean;
 }

package/es/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/button/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Match,\n  mergeProps,\n  Show,\n  splitProps,\n  Switch,\n} from 'solid-js';\nimport { Dynamic } from 'solid-js/web';\nimport { isFunction } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block, inline } from '../theme';\n\nimport loadingIcon from './loading';\nimport { style } from './style';\n\nexport interface ButtonProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 按钮类型 */\n  type?: 'success' | 'error' | 'primary' | 'warning' | 'default';\n  /** 透明背景 */\n  ghost?: boolean;\n  /** 实色背景 */\n  fill?: boolean;\n  /** 圆形按钮 */\n  circle?: boolean;\n  /** 虚线按钮 */\n  dashed?: boolean;\n  /** 扁平按钮 */\n  flat?: boolean;\n  /** 禁用按钮 */\n  disabled?: boolean;\n  /** 块按钮 */\n  block?: boolean;\n  /** 链接按钮 */\n  link?: boolean;\n  /** 危险按钮 */\n  danger?: boolean;\n  /** 自定义 tag\n   * @since 2.1.0\n   */\n  tag?: string;\n  /** 按钮尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 按钮前面添加一个图标 */\n  icon?: (() => JSX.Element) | JSX.Element;\n  children?: JSX.Element;\n  onClick?(e: Event): void;\n  loading?: boolean;\n}\nexport type ButtonElement = CustomElement<ButtonProps>;\n\nfunction Button(_: ButtonProps) {\n  const { baseStyle } = theme;\n  const _props = mergeProps({ size: 'normal', type: 'default' }, _);\n  const [local, other] = splitProps(_props, [\n    'ghost',\n    'fill',\n    'circle',\n    'dashed',\n    'flat',\n    'link',\n    'danger',\n    'children',\n    'block',\n    'size',\n    'type',\n    'class',\n    'icon',\n    'css',\n    'disabled',\n    'tag',\n    'loading',\n  ]);\n  let ref: HTMLButtonElement | undefined;\n  const [animating, setAnimating] = createSignal(false);\n\n  function handleClick() {\n    if (!local.disabled && !local.loading) {\n      setAnimating(true);\n    }\n  }\n  function handleAnimationEnd() {\n    setAnimating(false);\n  }\n  const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n  const hostStyle = createMemo(() => (local.block ? block : inline));\n\n  return (\n    <>\n      <style textContent={hostStyle()} />\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <Dynamic\n        ref={ref}\n        component={local.link ? 'a' : local.tag || 'button'}\n        class=\"btn\"\n        classList={{\n          [local.type]: true,\n          [local.size]: true,\n          loading: local.loading,\n          danger: local.danger,\n          block: local.block,\n          fill: local.fill,\n          circle: local.circle,\n          flat: local.flat,\n          dashed: local.dashed,\n          ghost: local.ghost,\n          link: local.link,\n          disabled: local.disabled,\n          without: animating(),\n        }}\n        part=\"button\"\n        onClick={handleClick}\n        onAnimationEnd={handleAnimationEnd}\n        disabled={local.disabled || local.loading}\n        role=\"button\"\n        {...other}\n      >\n        <Show when={local.icon || local.loading}>\n          <span class=\"icon\" part=\"icon\">\n            <Switch>\n              <Match when={local.icon}>{icon()}</Match>\n              <Match when={local.loading}>{loadingIcon()}</Match>\n            </Switch>\n          </span>\n        </Show>\n        <span class=\"label\" part=\"label\">\n          {local.children}\n        </span>\n      </Dynamic>\n    </>\n  );\n}\n\ncustomElement<ButtonProps>(\n  'n-button',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    ghost: void 0,\n    fill: void 0,\n    circle: void 0,\n    dashed: void 0,\n    flat: void 0,\n    disabled: void 0,\n    block: void 0,\n    link: void 0,\n    danger: void 0,\n    size: void 0,\n    icon: void 0,\n    tag: void 0,\n    loading: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n      el.replaceChildren();\n    });\n\n    return <Button {...props} />;\n  },\n);\nexport default Button;\n"],"names":["createEffect","createMemo","createSignal","Match","mergeProps","Show","splitProps","Switch","Dynamic","isFunction","css","customElement","clearAttribute","theme","block","inline","loadingIcon","style","Button","_","ref","baseStyle","local","other","size","type","animating","setAnimating","icon","hostStyle","link","tag","loading","danger","fill","circle","flat","dashed","ghost","disabled","without","children","class","opt","el","element","props","childNodes","values","replaceChildren"],"mappings":"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"}
+{"version":3,"sources":["components/button/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Match,\n  mergeProps,\n  Show,\n  splitProps,\n  Switch,\n} from 'solid-js';\nimport { Dynamic } from 'solid-js/web';\nimport { isFunction } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { block, inline } from '../theme';\n\nimport loadingIcon from './loading';\nimport { style } from './style';\n\nexport interface ButtonProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 按钮类型 */\n  type?: 'success' | 'error' | 'primary' | 'warning' | 'default';\n  /** 透明背景 */\n  ghost?: boolean;\n  /** 实色背景 */\n  fill?: boolean;\n  /** 圆形按钮 */\n  circle?: boolean;\n  /** 虚线按钮 */\n  dashed?: boolean;\n  /** 扁平按钮 */\n  flat?: boolean;\n  /** 禁用按钮 */\n  disabled?: boolean;\n  /** 块按钮 */\n  block?: boolean;\n  /** 链接按钮 */\n  link?: boolean;\n  /** 危险按钮 */\n  danger?: boolean;\n  /** 自定义 tag\n   * @since 2.1.0\n   */\n  tag?: string;\n  /** 按钮尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 按钮前面添加一个图标 */\n  icon?: (() => JSXElement) | JSXElement;\n  children?: JSXElement | string;\n  onClick?(e: Event): void;\n  loading?: boolean;\n}\nexport type ButtonElement = CustomElement<ButtonProps>;\n\nfunction Button(_: ButtonProps) {\n  const { baseStyle } = theme;\n  const _props = mergeProps({ size: 'normal', type: 'default' }, _);\n  const [local, other] = splitProps(_props, [\n    'ghost',\n    'fill',\n    'circle',\n    'dashed',\n    'flat',\n    'link',\n    'danger',\n    'children',\n    'block',\n    'size',\n    'type',\n    'class',\n    'icon',\n    'css',\n    'disabled',\n    'tag',\n    'loading',\n  ]);\n  let ref: HTMLButtonElement | undefined;\n  const [animating, setAnimating] = createSignal(false);\n\n  function handleClick() {\n    if (!local.disabled && !local.loading) {\n      setAnimating(true);\n    }\n  }\n  function handleAnimationEnd() {\n    setAnimating(false);\n  }\n  const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n  const hostStyle = createMemo(() => (local.block ? block : inline));\n\n  return (\n    <>\n      <style textContent={hostStyle()} />\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <Dynamic\n        ref={ref}\n        component={local.link ? 'a' : local.tag || 'button'}\n        class=\"btn\"\n        classList={{\n          [local.type]: true,\n          [local.size]: true,\n          loading: local.loading,\n          danger: local.danger,\n          block: local.block,\n          fill: local.fill,\n          circle: local.circle,\n          flat: local.flat,\n          dashed: local.dashed,\n          ghost: local.ghost,\n          link: local.link,\n          disabled: local.disabled,\n          without: animating(),\n        }}\n        part=\"button\"\n        onClick={handleClick}\n        onAnimationEnd={handleAnimationEnd}\n        disabled={local.disabled || local.loading}\n        role=\"button\"\n        {...other}\n      >\n        <Show when={local.icon || local.loading}>\n          <span class=\"icon\" part=\"icon\">\n            <Switch>\n              <Match when={local.icon}>{icon()}</Match>\n              <Match when={local.loading}>{loadingIcon()}</Match>\n            </Switch>\n          </span>\n        </Show>\n        <span class=\"label\" part=\"label\">\n          {local.children}\n        </span>\n      </Dynamic>\n    </>\n  );\n}\n\ncustomElement<ButtonProps>(\n  'n-button',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    ghost: void 0,\n    fill: void 0,\n    circle: void 0,\n    dashed: void 0,\n    flat: void 0,\n    disabled: void 0,\n    block: void 0,\n    link: void 0,\n    danger: void 0,\n    size: void 0,\n    icon: void 0,\n    tag: void 0,\n    loading: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n      el.replaceChildren();\n    });\n\n    return <Button {...props} />;\n  },\n);\nexport default Button;\n"],"names":["createEffect","createMemo","createSignal","Match","mergeProps","Show","splitProps","Switch","Dynamic","isFunction","css","customElement","clearAttribute","theme","block","inline","loadingIcon","style","Button","_","ref","baseStyle","local","other","size","type","animating","setAnimating","icon","hostStyle","link","tag","loading","danger","fill","circle","flat","dashed","ghost","disabled","without","children","class","opt","el","element","props","childNodes","values","replaceChildren"],"mappings":"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"}

package/es/button/style.js

@@ -81,8 +81,8 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
     gap: 3px;
     line-height: 1;
     cursor: pointer;
-    transition-property: color, background-color, border-color, width, height, transform, padding,
-      opacity;
+    transition-property:
+      color, background-color, border-color, width, height, transform, padding, opacity;
     transition-timing-function: linear;
     touch-action: manipulation;
     box-sizing: border-box;

package/es/button/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n  let _cls = `.${type}`,\n    fillCls = `.${type}.fill`;\n\n  if (type === 'error') {\n    _cls = `.${type},.danger`;\n    fillCls = `.${type}.fill,.danger.fill`;\n  }\n\n  return css`\n    ${_cls}:not(.disabled) {\n      --btn-border: var(--${type}-border);\n      --btn-bg: var(--${type}-selection);\n      --btn-hover-bg: var(--btn-bg);\n      --btn-hover-color: var(--${type}-hover);\n      --btn-active-color: var(--${type}-active);\n      --btn-outline-color: var(--${type}-outline);\n      --btn-color: var(--${type}-color);\n    }\n    ${fillCls} {\n      --btn-bg: var(--${type}-color);\n      --btn-border: var(--${type}-color);\n      --btn-hover-bg: var(--${type}-hover);\n      --btn-active-bg: var(--${type}-active);\n    }\n  `;\n}\n\nexport const style = css`\n  .btn,\n  .label,\n  .icon {\n    transition-duration: var(--transition-duration);\n  }\n\n  .label {\n    display: block;\n    line-height: normal;\n    overflow: hidden;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition-property: color;\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    color: inherit;\n    transition-property: color;\n  }\n\n  .fill {\n    &:not(.disabled, .default) {\n      .label,\n      .icon {\n        color: #fff !important;\n      }\n\n      &:hover {\n        --btn-bg: var(--btn-hover-color) !important;\n      }\n\n      &:active {\n        --btn-bg: var(--btn-active-color) !important;\n      }\n    }\n  }\n\n  .fill.danger.default {\n    .label,\n    .icon {\n      color: #fff !important;\n    }\n  }\n\n  .btn {\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--btn-border);\n    border-radius: var(--border-radius);\n    padding: 0 16px;\n    inline-size: fit-content;\n    min-inline-size: var(--btn-size);\n    block-size: fit-content;\n    min-block-size: var(--btn-size);\n    font-size: var(--font-size);\n    color: var(--btn-color);\n    background-color: var(--btn-bg);\n    outline-offset: 4px;\n    gap: 3px;\n    line-height: 1;\n    cursor: pointer;\n    transition-property: color, background-color, border-color, width, height, transform, padding,\n      opacity;\n    transition-timing-function: linear;\n    touch-action: manipulation;\n    box-sizing: border-box;\n    user-select: none;\n    outline: none;\n\n    &:has(.icon) {\n      padding: 0 10px;\n    }\n\n    &:not(.disabled) {\n      &:active {\n        transform: scale(0.98);\n\n        .label,\n        .icon {\n          color: var(--btn-active-color);\n        }\n\n        &:not(.link, .flat) {\n          border-color: var(--btn-active-color);\n        }\n\n        &:not(.link) {\n          background-color: var(--btn-hover-bg);\n        }\n      }\n\n      &:hover:not(.link) {\n        background-color: var(--btn-hover-bg);\n      }\n\n      &:hover:not(.link, .flat),\n      &:focus:not(.link, .flat) {\n        border-color: var(--btn-hover-color);\n      }\n\n      &:hover .label,\n      &:focus .label,\n      &:hover .icon,\n      &:focus .icon {\n        color: var(--btn-hover-color);\n      }\n    }\n\n    &.loading {\n      opacity: 0.7;\n      cursor: not-allowed;\n    }\n\n    &.disabled {\n      --btn-color: var(--disable-color);\n      --btn-bg: var(--disable-bg);\n      --btn-border: var(--disable-border);\n\n      cursor: not-allowed;\n    }\n  }\n\n  .normal {\n    --btn-size: 32px;\n  }\n\n  .small {\n    --btn-size: 24px;\n\n    gap: 2px;\n    padding: 0 7px;\n    font-size: var(--font-size-xs);\n\n    &:has(.icon) {\n      padding: 0 5px;\n    }\n  }\n\n  .large {\n    --btn-size: 40px;\n\n    font-size: var(--font-size-lg);\n    gap: 4px;\n\n    &:has(.icon) {\n      padding: 0 12px;\n    }\n  }\n\n  .default:not(.disabled) {\n    --btn-outline-color: var(--primary-outline);\n    --btn-color: var(--text-color);\n    --btn-bg: var(--component-bg);\n    --btn-border: var(--border-color);\n    --btn-hover-color: var(--primary-hover);\n    --btn-active-color: var(--primary-active);\n  }\n\n  ${btnColor('primary')}\n  ${btnColor('error')}\n  ${btnColor('success')}\n  ${btnColor('warning')}\n  \n\n  .dashed {\n    border-style: dashed;\n  }\n\n  .link {\n    --btn-bg: transparent !important;\n    --btn-border: transparent !important;\n\n    border-color: transparent !important;\n    background-color: transparent !important;\n\n    &::after {\n      content: none;\n    }\n  }\n\n  .flat {\n    --btn-border: transparent !important;\n\n    background-color: transparent;\n\n    &:not(.disabled, .link).default {\n      --btn-hover-bg: rgb(0 0 0 / 6%);\n    }\n  }\n\n  .ghost {\n    background-color: transparent !important;\n  }\n\n  .circle {\n    border-radius: 50% !important;\n    padding: 0;\n    min-inline-size: var(--btn-size);\n    max-inline-size: var(--btn-size);\n    min-block-size: var(--btn-size);\n    max-block-size: var(--btn-size);\n    text-align: center;\n    line-height: var(--btn-size);\n  }\n\n  .block {\n    display: flex;\n    inline-size: 100%;\n  }\n\n  .without:not(.link, .flat)::before {\n    animation: btn-wave-effect var(--transition-duration) cubic-bezier(1, 1, 1, 1);\n    position: absolute;\n    z-index: -1;\n    display: block;\n    border-radius: inherit;\n    opacity: 0.2;\n    box-shadow: 0 0 0 0 var(--btn-outline-color);\n    inset: 0;\n    animation-fill-mode: forwards;\n    content: '';\n    pointer-events: none;\n  }\n\n  @keyframes btn-wave-effect {\n    0% {\n      opacity: 1;\n      box-shadow: 0 0 0 var(--btn-hover-color);\n    }\n\n    /* 25% {\n      opacity: 1;\n      box-shadow: 0 0 0 4px var(--btn-hover-color);\n    } */\n\n    100% {\n      opacity: 0;\n      box-shadow: 0 0 0 6px var(--btn-outline-color);\n    }\n  }\n`;\n"],"names":["css","btnColor","type","_cls","fillCls","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAIlC,SAASC,EAASC,CAAyB,EACzC,IAAIC,EAAO,CAAC,CAAC,EAAED,EAAK,CAAC,CACnBE,EAAU,CAAC,CAAC,EAAEF,EAAK,KAAK,CAAC,CAO3B,MALa,UAATA,IACFC,EAAO,CAAC,CAAC,EAAED,EAAK,QAAQ,CAAC,CACzBE,EAAU,CAAC,CAAC,EAAEF,EAAK,kBAAkB,CAAC,EAGjCF,CAAG,CAAC;IACT,EAAEG,EAAK;0BACe,EAAED,EAAK;sBACX,EAAEA,EAAK;;+BAEE,EAAEA,EAAK;gCACN,EAAEA,EAAK;iCACN,EAAEA,EAAK;yBACf,EAAEA,EAAK;;IAE5B,EAAEE,EAAQ;sBACQ,EAAEF,EAAK;0BACH,EAAEA,EAAK;4BACL,EAAEA,EAAK;6BACN,EAAEA,EAAK;;EAElC,CAAC,AACH,CAEA,OAAO,MAAMG,MAAQL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoKvB,EAAEC,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+ExB,CAAC,AAAC"}
+{"version":3,"sources":["components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n  let _cls = `.${type}`,\n    fillCls = `.${type}.fill`;\n\n  if (type === 'error') {\n    _cls = `.${type},.danger`;\n    fillCls = `.${type}.fill,.danger.fill`;\n  }\n\n  return css`\n    ${_cls}:not(.disabled) {\n      --btn-border: var(--${type}-border);\n      --btn-bg: var(--${type}-selection);\n      --btn-hover-bg: var(--btn-bg);\n      --btn-hover-color: var(--${type}-hover);\n      --btn-active-color: var(--${type}-active);\n      --btn-outline-color: var(--${type}-outline);\n      --btn-color: var(--${type}-color);\n    }\n    ${fillCls} {\n      --btn-bg: var(--${type}-color);\n      --btn-border: var(--${type}-color);\n      --btn-hover-bg: var(--${type}-hover);\n      --btn-active-bg: var(--${type}-active);\n    }\n  `;\n}\n\nexport const style = css`\n  .btn,\n  .label,\n  .icon {\n    transition-duration: var(--transition-duration);\n  }\n\n  .label {\n    display: block;\n    line-height: normal;\n    overflow: hidden;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition-property: color;\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    color: inherit;\n    transition-property: color;\n  }\n\n  .fill {\n    &:not(.disabled, .default) {\n      .label,\n      .icon {\n        color: #fff !important;\n      }\n\n      &:hover {\n        --btn-bg: var(--btn-hover-color) !important;\n      }\n\n      &:active {\n        --btn-bg: var(--btn-active-color) !important;\n      }\n    }\n  }\n\n  .fill.danger.default {\n    .label,\n    .icon {\n      color: #fff !important;\n    }\n  }\n\n  .btn {\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--btn-border);\n    border-radius: var(--border-radius);\n    padding: 0 16px;\n    inline-size: fit-content;\n    min-inline-size: var(--btn-size);\n    block-size: fit-content;\n    min-block-size: var(--btn-size);\n    font-size: var(--font-size);\n    color: var(--btn-color);\n    background-color: var(--btn-bg);\n    outline-offset: 4px;\n    gap: 3px;\n    line-height: 1;\n    cursor: pointer;\n    transition-property:\n      color, background-color, border-color, width, height, transform, padding, opacity;\n    transition-timing-function: linear;\n    touch-action: manipulation;\n    box-sizing: border-box;\n    user-select: none;\n    outline: none;\n\n    &:has(.icon) {\n      padding: 0 10px;\n    }\n\n    &:not(.disabled) {\n      &:active {\n        transform: scale(0.98);\n\n        .label,\n        .icon {\n          color: var(--btn-active-color);\n        }\n\n        &:not(.link, .flat) {\n          border-color: var(--btn-active-color);\n        }\n\n        &:not(.link) {\n          background-color: var(--btn-hover-bg);\n        }\n      }\n\n      &:hover:not(.link) {\n        background-color: var(--btn-hover-bg);\n      }\n\n      &:hover:not(.link, .flat),\n      &:focus:not(.link, .flat) {\n        border-color: var(--btn-hover-color);\n      }\n\n      &:hover .label,\n      &:focus .label,\n      &:hover .icon,\n      &:focus .icon {\n        color: var(--btn-hover-color);\n      }\n    }\n\n    &.loading {\n      opacity: 0.7;\n      cursor: not-allowed;\n    }\n\n    &.disabled {\n      --btn-color: var(--disable-color);\n      --btn-bg: var(--disable-bg);\n      --btn-border: var(--disable-border);\n\n      cursor: not-allowed;\n    }\n  }\n\n  .normal {\n    --btn-size: 32px;\n  }\n\n  .small {\n    --btn-size: 24px;\n\n    gap: 2px;\n    padding: 0 7px;\n    font-size: var(--font-size-xs);\n\n    &:has(.icon) {\n      padding: 0 5px;\n    }\n  }\n\n  .large {\n    --btn-size: 40px;\n\n    font-size: var(--font-size-lg);\n    gap: 4px;\n\n    &:has(.icon) {\n      padding: 0 12px;\n    }\n  }\n\n  .default:not(.disabled) {\n    --btn-outline-color: var(--primary-outline);\n    --btn-color: var(--text-color);\n    --btn-bg: var(--component-bg);\n    --btn-border: var(--border-color);\n    --btn-hover-color: var(--primary-hover);\n    --btn-active-color: var(--primary-active);\n  }\n\n  ${btnColor('primary')}\n  ${btnColor('error')}\n  ${btnColor('success')}\n  ${btnColor('warning')}\n  \n\n  .dashed {\n    border-style: dashed;\n  }\n\n  .link {\n    --btn-bg: transparent !important;\n    --btn-border: transparent !important;\n\n    border-color: transparent !important;\n    background-color: transparent !important;\n\n    &::after {\n      content: none;\n    }\n  }\n\n  .flat {\n    --btn-border: transparent !important;\n\n    background-color: transparent;\n\n    &:not(.disabled, .link).default {\n      --btn-hover-bg: rgb(0 0 0 / 6%);\n    }\n  }\n\n  .ghost {\n    background-color: transparent !important;\n  }\n\n  .circle {\n    border-radius: 50% !important;\n    padding: 0;\n    min-inline-size: var(--btn-size);\n    max-inline-size: var(--btn-size);\n    min-block-size: var(--btn-size);\n    max-block-size: var(--btn-size);\n    text-align: center;\n    line-height: var(--btn-size);\n  }\n\n  .block {\n    display: flex;\n    inline-size: 100%;\n  }\n\n  .without:not(.link, .flat)::before {\n    animation: btn-wave-effect var(--transition-duration) cubic-bezier(1, 1, 1, 1);\n    position: absolute;\n    z-index: -1;\n    display: block;\n    border-radius: inherit;\n    opacity: 0.2;\n    box-shadow: 0 0 0 0 var(--btn-outline-color);\n    inset: 0;\n    animation-fill-mode: forwards;\n    content: '';\n    pointer-events: none;\n  }\n\n  @keyframes btn-wave-effect {\n    0% {\n      opacity: 1;\n      box-shadow: 0 0 0 var(--btn-hover-color);\n    }\n\n    /* 25% {\n      opacity: 1;\n      box-shadow: 0 0 0 4px var(--btn-hover-color);\n    } */\n\n    100% {\n      opacity: 0;\n      box-shadow: 0 0 0 6px var(--btn-outline-color);\n    }\n  }\n`;\n"],"names":["css","btnColor","type","_cls","fillCls","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAIlC,SAASC,EAASC,CAAyB,EACzC,IAAIC,EAAO,CAAC,CAAC,EAAED,EAAK,CAAC,CACnBE,EAAU,CAAC,CAAC,EAAEF,EAAK,KAAK,CAAC,CAO3B,MALa,UAATA,IACFC,EAAO,CAAC,CAAC,EAAED,EAAK,QAAQ,CAAC,CACzBE,EAAU,CAAC,CAAC,EAAEF,EAAK,kBAAkB,CAAC,EAGjCF,CAAG,CAAC;IACT,EAAEG,EAAK;0BACe,EAAED,EAAK;sBACX,EAAEA,EAAK;;+BAEE,EAAEA,EAAK;gCACN,EAAEA,EAAK;iCACN,EAAEA,EAAK;yBACf,EAAEA,EAAK;;IAE5B,EAAEE,EAAQ;sBACQ,EAAEF,EAAK;0BACH,EAAEA,EAAK;4BACL,EAAEA,EAAK;6BACN,EAAEA,EAAK;;EAElC,CAAC,AACH,CAEA,OAAO,MAAMG,MAAQL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoKvB,EAAEC,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+ExB,CAAC,AAAC"}

package/es/carousel/index.d.ts

@@ -1,11 +1,12 @@
 import type { CustomElement } from '..';
+import { type JSXElement } from '../basic-config';
 export interface CarouselProps {
     /** 自定义类名 */
     class?: string;
     /** 自定义样式表 */
     css?: string;
     /** 轮播的内容 */
-    children?: JSX.Element[];
+    children?: JSXElement[];
     /** 当前内容的位置
      * @default 0
      */
@@ -15,7 +16,7 @@ export interface CarouselProps {
     /** 设置自动播放时长, 不设置时不自动播放 */
     autoplay?: number;
     /** 自定义头部 */
-    header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);
+    header?: (current: number) => JSXElement;
     /** 切换显示的位置时的回调方法 */
     onChange?: (e: number) => void;
 }

package/es/carousel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/carousel/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Index,\n  mergeProps,\n  onCleanup,\n  Show,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { style } from './style';\n\nexport interface CarouselProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 轮播的内容 */\n  children?: JSX.Element[];\n  /** 当前内容的位置\n   * @default 0\n   */\n  offset?: number;\n  /** 开启指示器 */\n  dots?: boolean;\n  /** 设置自动播放时长, 不设置时不自动播放 */\n  autoplay?: number;\n  /** 自定义头部 */\n  header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);\n  /** 切换显示的位置时的回调方法 */\n  onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ autoplay: -1, children: [] }, _props);\n  const [left, setLeft] = createSignal(0);\n  const [right, setRight] = createSignal(1);\n  const [offset, setOffset] = createSignal(0);\n  const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n  let playTimer: NodeJS.Timeout | undefined;\n\n  function onOffsetChange() {\n    const _dir = direction();\n\n    if (_dir === -1) {\n      setOffset(left());\n    } else if (_dir === 1) {\n      setOffset(right());\n    }\n    setDirection(0);\n    if (isFunction(props.onChange)) {\n      props.onChange(offset());\n    }\n  }\n  function handlePrev() {\n    setDirection(-1);\n  }\n  function handleNext() {\n    setDirection(1);\n  }\n  function handleDot(idx: number, e: Event) {\n    e.stopPropagation();\n    const _offset = offset();\n    const _current = Math.floor(_offset / 20) * 20 + idx;\n\n    if (_current > _offset) {\n      setDirection(1);\n      setRight(_current);\n    } else if (_current < _offset) {\n      setDirection(-1);\n      setLeft(_current);\n    }\n  }\n  function getPrevNext(idx: number, arr: JSX.Element[]) {\n    let _prev = idx - 1,\n      _next = idx + 1;\n\n    if (_prev < 0) {\n      _prev = arr.length - 1;\n    }\n    if (_next > arr.length - 1) {\n      _next = 0;\n    }\n    return [_prev, _next];\n  }\n  const list = createMemo(() => [...props.children]);\n  const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n  createEffect(() => {\n    if (props.offset !== void 0) {\n      setOffset(Number(props.offset));\n    }\n  });\n  createEffect(() => {\n    const [_prev, _next] = getPrevNext(offset(), list());\n\n    setLeft(_prev);\n    setRight(_next);\n  });\n  createEffect(() => {\n    clearInterval(playTimer);\n    const autoplay = Number(props.autoplay);\n\n    if (autoplay > 0) {\n      playTimer = setInterval(() => {\n        if (autoplay < 1) {\n          clearInterval(playTimer);\n        }\n        handleNext();\n      }, autoplay);\n    }\n  });\n\n  onCleanup(() => {\n    clearInterval(playTimer);\n  });\n  const header = createMemo(() =>\n    isFunction(props.header) ? props.header(offset()) : props.header,\n  );\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <section class={cx('carousel', props.class)}>\n        <section class=\"list\" data-dir={direction()}>\n          <div class=\"item\">{list()[left()]}</div>\n          <div class=\"item\" onAnimationEnd={onOffsetChange}>\n            {list()[offset()]}\n          </div>\n          <div class=\"item\">{list()[right()]}</div>\n        </section>\n        <slot name=\"header\" />\n        <Show when={header()}>\n          <section class=\"header\">{header()}</section>\n        </Show>\n        <div class=\"prev\" onClick={handlePrev} />\n        <div class=\"next\" onClick={handleNext} />\n        <Show when={props.dots}>\n          <div class=\"dots\">\n            <Index each={dotLen()}>\n              {(_, idx) => {\n                return (\n                  <i\n                    class=\"dot\"\n                    classList={{\n                      active: idx === (offset() % 20) + direction(),\n                    }}\n                    onClick={handleDot.bind(null, idx)}\n                  />\n                );\n              }}\n            </Index>\n          </div>\n        </Show>\n      </section>\n    </>\n  );\n}\n\ncustomElement<CarouselProps>(\n  'n-carousel',\n  {\n    children: void 0,\n    autoplay: void 0,\n    class: void 0,\n    css: void 0,\n    offset: void 0,\n    dots: void 0,\n    header: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: number) {\n          el.offset = key;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: key,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Carousel {...props} />\n      </>\n    );\n  },\n);\nexport default Carousel;\n"],"names":["createEffect","createMemo","createSignal","Index","mergeProps","onCleanup","Show","isFunction","css","cx","customElement","clearAttribute","theme","block","style","Carousel","_props","playTimer","baseStyle","props","autoplay","children","left","setLeft","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","dotLen","Array","length","fill","Number","arr","_prev","_next","clearInterval","setInterval","header","dots","_","bind","class","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"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"}
+{"version":3,"sources":["components/carousel/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Index,\n  mergeProps,\n  onCleanup,\n  Show,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { style } from './style';\n\nexport interface CarouselProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 轮播的内容 */\n  children?: JSXElement[];\n  /** 当前内容的位置\n   * @default 0\n   */\n  offset?: number;\n  /** 开启指示器 */\n  dots?: boolean;\n  /** 设置自动播放时长, 不设置时不自动播放 */\n  autoplay?: number;\n  /** 自定义头部 */\n  header?: (current: number) => JSXElement;\n  /** 切换显示的位置时的回调方法 */\n  onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ autoplay: -1, children: [] }, _props);\n  const [left, setLeft] = createSignal(0);\n  const [right, setRight] = createSignal(1);\n  const [offset, setOffset] = createSignal(0);\n  const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n  let playTimer: NodeJS.Timeout | undefined;\n\n  function onOffsetChange() {\n    const _dir = direction();\n\n    if (_dir === -1) {\n      setOffset(left());\n    } else if (_dir === 1) {\n      setOffset(right());\n    }\n    setDirection(0);\n    if (isFunction(props.onChange)) {\n      props.onChange(offset());\n    }\n  }\n  function handlePrev() {\n    setDirection(-1);\n  }\n  function handleNext() {\n    setDirection(1);\n  }\n  function handleDot(idx: number, e: Event) {\n    e.stopPropagation();\n    const _offset = offset();\n    const _current = Math.floor(_offset / 20) * 20 + idx;\n\n    if (_current > _offset) {\n      setDirection(1);\n      setRight(_current);\n    } else if (_current < _offset) {\n      setDirection(-1);\n      setLeft(_current);\n    }\n  }\n  function getPrevNext(idx: number, arr: JSXElement[]) {\n    let _prev = idx - 1,\n      _next = idx + 1;\n\n    if (_prev < 0) {\n      _prev = arr.length - 1;\n    }\n    if (_next > arr.length - 1) {\n      _next = 0;\n    }\n    return [_prev, _next];\n  }\n  const list = createMemo(() => [...props.children]);\n  const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n  createEffect(() => {\n    if (props.offset !== void 0) {\n      setOffset(Number(props.offset));\n    }\n  });\n  createEffect(() => {\n    const [_prev, _next] = getPrevNext(offset(), list());\n\n    setLeft(_prev);\n    setRight(_next);\n  });\n  createEffect(() => {\n    clearInterval(playTimer);\n    const autoplay = Number(props.autoplay);\n\n    if (autoplay > 0) {\n      playTimer = setInterval(() => {\n        if (autoplay < 1) {\n          clearInterval(playTimer);\n        }\n        handleNext();\n      }, autoplay);\n    }\n  });\n\n  onCleanup(() => {\n    clearInterval(playTimer);\n  });\n  const header = createMemo(() =>\n    isFunction(props.header) ? props.header(offset()) : props.header,\n  );\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <section class={cx('carousel', props.class)}>\n        <section class=\"list\" data-dir={direction()}>\n          <div class=\"item\">{list()[left()]}</div>\n          <div class=\"item\" onAnimationEnd={onOffsetChange}>\n            {list()[offset()]}\n          </div>\n          <div class=\"item\">{list()[right()]}</div>\n        </section>\n        <slot name=\"header\" />\n        <Show when={header()}>\n          <section class=\"header\">{header()}</section>\n        </Show>\n        <div class=\"prev\" onClick={handlePrev} />\n        <div class=\"next\" onClick={handleNext} />\n        <Show when={props.dots}>\n          <div class=\"dots\">\n            <Index each={dotLen()}>\n              {(_, idx) => {\n                return (\n                  <i\n                    class=\"dot\"\n                    classList={{\n                      active: idx === (offset() % 20) + direction(),\n                    }}\n                    onClick={handleDot.bind(null, idx)}\n                  />\n                );\n              }}\n            </Index>\n          </div>\n        </Show>\n      </section>\n    </>\n  );\n}\n\ncustomElement<CarouselProps>(\n  'n-carousel',\n  {\n    children: void 0,\n    autoplay: void 0,\n    class: void 0,\n    css: void 0,\n    offset: void 0,\n    dots: void 0,\n    header: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: number) {\n          el.offset = key;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: key,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Carousel {...props} />\n      </>\n    );\n  },\n);\nexport default Carousel;\n"],"names":["createEffect","createMemo","createSignal","Index","mergeProps","onCleanup","Show","isFunction","css","cx","customElement","clearAttribute","theme","block","style","Carousel","_props","playTimer","baseStyle","props","autoplay","children","left","setLeft","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","dotLen","Array","length","fill","Number","arr","_prev","_next","clearInterval","setInterval","header","dots","_","bind","class","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"+qBAAA,QACEA,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,SAAAA,CAAK,CACLC,cAAAA,CAAU,CACVC,aAAAA,CAAS,CACTC,QAAAA,CAAI,KACC,UAAW,AAClB,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAyB,iBAAkB,AAClE,QAAOC,GAASC,SAAAA,CAAK,KAAQ,UAAW,AAExC,QAASC,SAAAA,CAAK,KAAQ,SAAU,CAwBhC,SAASC,EAASC,CAAqB,MAOjCC,EANJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGN,EAChBO,EAAQf,EAAW,CAAEgB,SAAU,GAAIC,SAAU,EAAE,AAAC,EAAGL,GACnD,CAACM,EAAMC,EAAQ,CAAGrB,EAAa,GAC/B,CAACsB,EAAOC,EAAS,CAAGvB,EAAa,GACjC,CAACwB,EAAQC,EAAU,CAAGzB,EAAa,GACnC,CAAC0B,EAAWC,EAAa,CAAG3B,EAAyB,GAG3D,SAAS4B,IACP,IAAMC,EAAOH,GAETG,AAAS,CAAA,KAATA,EACFJ,EAAUL,KACQ,IAATS,GACTJ,EAAUH,KAEZK,EAAa,GACTtB,EAAWY,EAAMa,QAAQ,GAC3Bb,EAAMa,QAAQ,CAACN,IAEnB,CACA,SAASO,IACPJ,EAAa,GACf,CACA,SAASK,IACPL,EAAa,EACf,CACA,SAASM,EAAUC,CAAW,CAAEC,CAAQ,EACtCA,EAAEC,eAAe,GACjB,IAAMC,EAAUb,IACVc,EAAWC,AAA2B,GAA3BA,KAAKC,KAAK,CAACH,EAAU,IAAWH,CAE7CI,CAAAA,EAAWD,GACbV,EAAa,GACbJ,EAASe,IACAA,EAAWD,IACpBV,EAAa,IACbN,EAAQiB,GAEZ,CAaA,IAAMG,EAAO1C,EAAW,IAAM,IAAIkB,EAAME,QAAQ,CAAC,EAC3CuB,EAAS3C,EAAW,IAAM4C,MAAMF,IAAOG,MAAM,CAAG,GAAK,GAAKH,IAAOG,MAAM,EAAEC,IAAI,CAAC,OAEpF/C,EAAa,KACU,KAAK,IAAtBmB,EAAMO,MAAM,EACdC,EAAUqB,OAAO7B,EAAMO,MAAM,EAEjC,GACA1B,EAAa,SApBQoC,EAAaa,MAC5BC,EACFC,EAmBF,GAAM,CAACD,EAAOC,EAAM,EArBDf,EAqBgBV,IArBHuB,EAqBaN,IApBzCO,EAAQd,EAAM,EAChBe,EAAQf,EAAM,EAEZc,EAAQ,GACVA,CAAAA,EAAQD,EAAIH,MAAM,CAAG,CAAA,EAEnBK,EAAQF,EAAIH,MAAM,CAAG,GACvBK,CAAAA,EAAQ,CAAA,EAEH,CAACD,EAAOC,EAAM,EAarB5B,EAAQ2B,GACRzB,EAAS0B,EACX,GACAnD,EAAa,KACXoD,cAAcnC,GACd,IAAMG,EAAW4B,OAAO7B,EAAMC,QAAQ,EAElCA,EAAW,GACbH,CAAAA,EAAYoC,YAAY,KAClBjC,EAAW,GACbgC,cAAcnC,GAEhBiB,GACF,EAAGd,EAAQ,CAEf,GAEAf,EAAU,KACR+C,cAAcnC,EAChB,GACA,IAAMqC,EAASrD,EAAW,IACxBM,EAAWY,EAAMmC,MAAM,EAAInC,EAAMmC,MAAM,CAAC5B,KAAYP,EAAMmC,MAAM,EAGlE,0DAEwBpC,gDACAJ,UACnBR,qBAAWa,EAAMX,GAAG,8DACCA,EAAIW,EAAMX,GAAG,qJAIZmC,GAAM,CAACrB,IAAO,qBACCQ,WAC/Ba,GAAM,CAACjB,IAAS,UAEAiB,GAAM,CAACnB,IAAQ,sBAGnClB,qBAAWgD,yCACeA,uBAEArB,kBACAC,YAC1B5B,qBAAWa,EAAMoC,IAAI,wCAEjBpD,qBAAYyC,cACV,CAACY,EAAGpB,uCAOUD,EAAUsB,IAAI,CAAC,KAAMrB,2CAFpBA,IAAQ,AAACV,IAAW,GAAME,uCAtBlCnB,EAAG,WAAYU,EAAMuC,KAAK,IACR9B,2GAiCxC,CAEAlB,EACE,aACA,CACEW,SAAU,KAAK,EACfD,SAAU,KAAK,EACfsC,MAAO,KAAK,EACZlD,IAAK,KAAK,EACVkB,OAAQ,KAAK,EACb6B,KAAM,KAAK,EACXD,OAAQ,KAAK,EACbtB,SAAU,KAAK,CACjB,EACA,CAACwB,EAAGG,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChB1C,EAAQf,EACZ,CACE4B,SAAS8B,CAAW,EAClBF,EAAGlC,MAAM,CAAGoC,EACZF,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAN,GAOF,OAJAxD,EAAa,KACXW,EAAeiD,EAAI,CAAC,MAAM,EAC1BA,EAAGM,eAAe,EACpB,yCAGwBrD,UACnBE,EAAaI,GAGpB,EAEF,gBAAeJ,CAAS"}

package/es/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/checkbox/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\nimport { clearAttribute, FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"checkbox\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n  /** 一个 bool 值; */\n  value?: boolean;\n  /** 默认值 */\n  defaultValue?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n  checkAll?: never;\n  options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n  /** 全选 */\n  checkAll?: boolean;\n  /** 值;\n   * 当设置了value时, 将是受控模式;\n   * 受控模式可通过 onChange 事件更新 value\n   **/\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n  /** 渲染选项所使用的数据,\n   * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n   * */\n  options?: (CheckboxOption | string)[];\n  /** 值修改时的回调方法 */\n  onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n  /** 不确定状态 */\n  indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  createEffect(() => {\n    const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n    let val: (string | number)[] = [];\n\n    if (Array.isArray(_val)) {\n      val = _val;\n    } else if (typeof _val !== 'undefined') {\n      val = [_val as unknown as string];\n    }\n\n    setValue(val);\n  });\n  const options = createMemo(() => {\n    const fieldName = fieldNames();\n\n    if (typeof props.options === 'undefined') {\n      return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n    }\n    const checkAll: CheckboxOption[] = [\n      { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n    ];\n    const arr = props.checkAll ? checkAll : [];\n\n    return arr.concat(getOptions(props.options || [], fieldName));\n  });\n\n  const all = createMemo(() => {\n    const allVal: (string | number)[] = [];\n    const fieldName = fieldNames();\n\n    options().forEach((item) => {\n      if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n        allVal.push(item[fieldName.value]!);\n      }\n    });\n\n    return allVal;\n  });\n\n  function getIndeterminate() {\n    let _indeterminate = false;\n\n    all().forEach((v) => {\n      if (value().length && !value().includes(v)) {\n        _indeterminate = true;\n      }\n    });\n    return _indeterminate;\n  }\n  const checkedAll = createMemo(() => {\n    let checked = true;\n    const alls = all();\n\n    for (let i = 0, len = alls.length; i < len; i++) {\n      if (!value().includes(alls[i])) {\n        checked = false;\n        break;\n      }\n    }\n    return checked;\n  });\n\n  function onChange(item: CheckboxOption) {\n    if (!props.disabled && !item.disabled) {\n      const isIndeterminate = 'indeterminate' in item;\n      let newVal = isIndeterminate ? [] : [...value()];\n      const val = item[fieldNames().value]!;\n\n      if (isIndeterminate) {\n        if (!checkedAll()) {\n          newVal = all();\n        }\n      } else {\n        const idx = newVal.indexOf(val);\n\n        if (idx !== -1) {\n          newVal.splice(idx, 1);\n        } else {\n          newVal.push(val);\n        }\n      }\n      if (typeof props.value === 'undefined') {\n        setValue(newVal);\n      }\n      props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n    }\n  }\n  function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n    e.preventDefault();\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <section class={cx('box', props.layout, props.class)}>\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const fieldName = fieldNames();\n            const realVal = item[fieldName.value]!;\n\n            if ('indeterminate' in item) {\n              createEffect(() => {\n                item.ref.indeterminate = getIndeterminate();\n              });\n            }\n            return (\n              <span\n                class={cx('item', item.class, item.status)}\n                aria-disabled={readOnly}\n                tabindex={readOnly ? -1 : 0}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={onChange.bind(null, item)}\n              >\n                <input\n                  ref={item.ref}\n                  class=\"checkbox\"\n                  type=\"checkbox\"\n                  name={props.name}\n                  value={realVal as string}\n                  disabled={readOnly}\n                  checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n                  onChange={onChange.bind(null, item)}\n                />\n                <label>{item[fieldName.label]}</label>\n              </span>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n  'n-checkbox',\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: void 0,\n    onChange: void 0,\n    fieldNames: void 0,\n    checkAll: 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 | number)[] | boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['options', 'fieldNames', 'css']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Checkbox {...props} />\n      </>\n    );\n  },\n);\nexport default Checkbox;\n"],"names":["createEffect","createMemo","createSignal","For","mergeProps","Show","css","cx","customElement","clearAttribute","FieldName","getOptions","theme","inline","style","Checkbox","props","baseStyle","value","setValue","fieldNames","Object","assign","_val","defaultValue","val","Array","isArray","options","fieldName","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","readOnly","realVal","_indeterminate","ref","v","bind","class","status","name","layout","_","opt","el","element","next","dispatchEvent","CustomEvent","detail"],"mappings":"yeAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AACzF,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,CAAEC,aAAAA,CAAS,KAAQ,iBAAkB,AAC5D,QAAOC,MAAgB,gBAAiB,AACxC,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,AAEzC,QAASC,SAAAA,CAAK,KAAQ,SAAU,CA0DhC,SAASC,EAASC,CAA6C,EAC7D,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAChB,CAACM,EAAOC,EAAS,CAAGjB,EAAkC,EAAE,EACxDkB,EAAanB,EAAW,IAAMoB,OAAOC,MAAM,CAAC,CAAC,EAAGZ,EAAWM,EAAMI,UAAU,GAEjFpB,EAAa,KACX,IAAMuB,EAAO,AAAuB,KAAA,IAAhBP,EAAME,KAAK,CAAmBF,EAAMQ,YAAY,CAAGR,EAAME,KAAK,CAC9EO,EAA2B,EAAE,CAE7BC,MAAMC,OAAO,CAACJ,GAChBE,EAAMF,EACmB,KAAA,IAATA,GAChBE,CAAAA,EAAM,CAACF,EAA0B,AAAD,EAGlCJ,EAASM,EACX,GACA,IAAMG,EAAU3B,EAAW,KACzB,IAAM4B,EAAYT,IAElB,GAAI,AAAyB,KAAA,IAAlBJ,EAAMY,OAAO,CACtB,OAAOjB,EAAW,CAAC,CAAEO,MAAO,CAAE,EAAoB,CAAEW,GAEtD,IAAMC,EAA6B,CACjC,CAAE,CAACD,EAAUX,KAAK,CAAC,CAAE,MAAO,CAACW,EAAUE,KAAK,CAAC,CAAE,KAAMC,cAAe,CAAA,CAAM,EAC3E,CAGD,MAAOC,AAFKjB,CAAAA,EAAMc,QAAQ,CAAGA,EAAW,EAAE,AAAD,EAE9BI,MAAM,CAACvB,EAAWK,EAAMY,OAAO,EAAI,EAAE,CAAEC,GACpD,GAEMM,EAAMlC,EAAW,KACrB,IAAMmC,EAA8B,EAAE,CAChCP,EAAYT,IAQlB,OANAQ,IAAUS,OAAO,CAAC,AAACC,IACX,kBAAmBA,GAAS,AAAiC,KAAA,IAA1BA,CAAI,CAACT,EAAUX,KAAK,CAAC,EAC5DkB,EAAOG,IAAI,CAACD,CAAI,CAACT,EAAUX,KAAK,CAAC,CAErC,GAEOkB,CACT,GAYMI,EAAavC,EAAW,KAC5B,IAAIwC,EAAU,CAAA,EACRC,EAAOP,IAEb,IAAK,IAAIQ,EAAI,EAAGC,EAAMF,EAAKG,MAAM,CAAEF,EAAIC,EAAKD,IAC1C,GAAI,CAACzB,IAAQ4B,QAAQ,CAACJ,CAAI,CAACC,EAAE,EAAG,CAC9BF,EAAU,CAAA,EACV,KACF,CAEF,OAAOA,CACT,GAEA,SAASM,EAAST,CAAoB,EACpC,GAAI,CAACtB,EAAMgC,QAAQ,EAAI,CAACV,EAAKU,QAAQ,CAAE,CACrC,IAAMC,EAAkB,kBAAmBX,EACvCY,EAASD,EAAkB,EAAE,CAAG,IAAI/B,IAAQ,CAC1CO,EAAMa,CAAI,CAAClB,IAAaF,KAAK,CAAC,CAEpC,GAAI+B,EACGT,KACHU,CAAAA,EAASf,GAAI,MAEV,CACL,IAAMgB,EAAMD,EAAOE,OAAO,CAAC3B,EAEvB0B,AAAQ,CAAA,KAARA,EACFD,EAAOG,MAAM,CAACF,EAAK,GAEnBD,EAAOX,IAAI,CAACd,EAEhB,CAC2B,KAAA,IAAhBT,EAAME,KAAK,EACpBC,EAAS+B,SAEXlC,EAAM+B,QAAQ,EAAd/B,EAAM+B,QAAQ,MAAd/B,EAAkB,AAAyB,KAAA,IAAlBA,EAAMY,OAAO,CAAmB,CAAC,CAACsB,CAAM,CAAC,EAAE,CAAGA,EACzE,CACF,CACA,SAASI,EAAQhB,CAAoB,CAAEiB,CAAgB,EACrDA,EAAEC,cAAc,GACF,UAAVD,EAAEE,GAAG,EACPV,EAAST,EAEb,CAEA,0DAEwBrB,gDACAH,UACnBT,qBAAWW,EAAMV,GAAG,8DACCA,EAAIU,EAAMV,GAAG,qCAGhCH,qBAAUyB,cACR,AAACU,IACA,IAAMoB,EAAW1C,EAAMgC,QAAQ,EAAIV,EAAKU,QAAQ,CAC1CnB,EAAYT,IACZuC,EAAUrB,CAAI,CAACT,EAAUX,KAAK,CAAC,CAOrC,MALI,kBAAmBoB,GACrBtC,EAAa,KArEvB,IAAI4D,CAsEQtB,CAAAA,EAAKuB,GAAG,CAAC7B,aAAa,EAtE9B4B,EAAiB,CAAA,EAErBzB,IAAME,OAAO,CAAC,AAACyB,IACT5C,IAAQ2B,MAAM,EAAI,CAAC3B,IAAQ4B,QAAQ,CAACgB,IACtCF,CAAAA,EAAiB,CAAA,CAAG,CAExB,GACOA,EAgEG,oCAWStB,EAAKuB,GAAG,oCAHNd,EAASgB,IAAI,CAAC,KAAMzB,mBADpBgB,EAAQS,IAAI,CAAC,KAAMzB,2BAFboB,kBACLA,EAAW,GAAK,gBAYdX,EAASgB,IAAI,CAAC,KAAMzB,gCAPzBA,EAAKuB,GAAG,WAINF,aACGD,UAIJpB,CAAI,CAACT,EAAUE,KAAK,CAAC,cAhBtBxB,EAAG,OAAQ+B,EAAK0B,KAAK,CAAE1B,EAAK2B,MAAM,IAUjCjD,EAAMkD,IAAI,8GAGP,kBAAmB5B,EAAOE,IAAetB,IAAQ4B,QAAQ,CAACa,SAM3E,eAjCYpD,EAAG,MAAOS,EAAMmD,MAAM,CAAEnD,EAAMgD,KAAK,UAsCzD,CAKAxD,EACE,aACA,CACEwD,MAAO,KAAK,EACZ1D,IAAK,KAAK,EACV4D,KAAM,KAAK,EACXlB,SAAU,KAAK,EACf9B,MAAO,KAAK,EACZM,aAAc,KAAK,EACnBI,QAAS,KAAK,EACdmB,SAAU,KAAK,EACf3B,WAAY,KAAK,EACjBU,SAAU,KAAK,EACfqC,OAAQ,KAAK,CACf,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBvD,EAAQZ,EACZ,CACE+D,OAAQG,EAAGH,MAAM,EAAI,aACrBpB,SAASyB,CAAmC,EAC1CF,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAJ,GAMF,OAHApE,EAAa,KACXS,EAAe6D,EAAI,CAAC,UAAW,aAAc,MAAM,CACrD,yCAGwBzD,UACnBE,EAAaC,GAGpB,EAEF,gBAAeD,CAAS"}
+{"version":3,"sources":["components/checkbox/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\nimport { clearAttribute, FieldName, type JSXElement } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"checkbox\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n  /** 一个 bool 值; */\n  value?: boolean;\n  /** 默认值 */\n  defaultValue?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n  checkAll?: never;\n  options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n  /** 全选 */\n  checkAll?: boolean;\n  /** 值;\n   * 当设置了value时, 将是受控模式;\n   * 受控模式可通过 onChange 事件更新 value\n   **/\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n  /** 渲染选项所使用的数据,\n   * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n   * */\n  options?: (CheckboxOption | string)[];\n  /** 值修改时的回调方法 */\n  onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n  /** 不确定状态 */\n  indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  createEffect(() => {\n    const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n    let val: (string | number)[] = [];\n\n    if (Array.isArray(_val)) {\n      val = _val;\n    } else if (typeof _val !== 'undefined') {\n      val = [_val as unknown as string];\n    }\n\n    setValue(val);\n  });\n  const options = createMemo(() => {\n    const fieldName = fieldNames();\n\n    if (typeof props.options === 'undefined') {\n      return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n    }\n    const checkAll: CheckboxOption[] = [\n      { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n    ];\n    const arr = props.checkAll ? checkAll : [];\n\n    return arr.concat(getOptions(props.options || [], fieldName));\n  });\n\n  const all = createMemo(() => {\n    const allVal: (string | number)[] = [];\n    const fieldName = fieldNames();\n\n    options().forEach((item) => {\n      if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n        allVal.push(item[fieldName.value]!);\n      }\n    });\n\n    return allVal;\n  });\n\n  function getIndeterminate() {\n    let _indeterminate = false;\n\n    all().forEach((v) => {\n      if (value().length && !value().includes(v)) {\n        _indeterminate = true;\n      }\n    });\n    return _indeterminate;\n  }\n  const checkedAll = createMemo(() => {\n    let checked = true;\n    const alls = all();\n\n    for (let i = 0, len = alls.length; i < len; i++) {\n      if (!value().includes(alls[i])) {\n        checked = false;\n        break;\n      }\n    }\n    return checked;\n  });\n\n  function onChange(item: CheckboxOption) {\n    if (!props.disabled && !item.disabled) {\n      const isIndeterminate = 'indeterminate' in item;\n      let newVal = isIndeterminate ? [] : [...value()];\n      const val = item[fieldNames().value]!;\n\n      if (isIndeterminate) {\n        if (!checkedAll()) {\n          newVal = all();\n        }\n      } else {\n        const idx = newVal.indexOf(val);\n\n        if (idx !== -1) {\n          newVal.splice(idx, 1);\n        } else {\n          newVal.push(val);\n        }\n      }\n      if (typeof props.value === 'undefined') {\n        setValue(newVal);\n      }\n      props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n    }\n  }\n  function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n    e.preventDefault();\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <section class={cx('box', props.layout, props.class)}>\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const fieldName = fieldNames();\n            const realVal = item[fieldName.value]!;\n\n            if ('indeterminate' in item) {\n              createEffect(() => {\n                item.ref.indeterminate = getIndeterminate();\n              });\n            }\n            return (\n              <span\n                class={cx('item', item.class, item.status)}\n                aria-disabled={readOnly}\n                tabindex={readOnly ? -1 : 0}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={onChange.bind(null, item)}\n              >\n                <input\n                  ref={item.ref}\n                  class=\"checkbox\"\n                  type=\"checkbox\"\n                  name={props.name}\n                  value={realVal as string}\n                  disabled={readOnly}\n                  checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n                  onChange={onChange.bind(null, item)}\n                />\n                <label>{item[fieldName.label] as JSXElement}</label>\n              </span>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n  'n-checkbox',\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: void 0,\n    onChange: void 0,\n    fieldNames: void 0,\n    checkAll: 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 | number)[] | boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['options', 'fieldNames', 'css']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Checkbox {...props} />\n      </>\n    );\n  },\n);\nexport default Checkbox;\n"],"names":["createEffect","createMemo","createSignal","For","mergeProps","Show","css","cx","customElement","clearAttribute","FieldName","getOptions","theme","inline","style","Checkbox","props","baseStyle","value","setValue","fieldNames","Object","assign","_val","defaultValue","val","Array","isArray","options","fieldName","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","readOnly","realVal","_indeterminate","ref","v","bind","class","status","name","layout","_","opt","el","element","next","dispatchEvent","CustomEvent","detail"],"mappings":"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"}

package/es/code/index.d.ts

@@ -1,5 +1,6 @@
 import { type JSX } from 'solid-js';
 import type { CustomElement } from '..';
+import { type JSXElement } from '../basic-config';
 export type LanguageBase = 'bash' | 'shell' | 'sh' | 'clike' | 'css' | 'docker' | 'dockerfile' | 'git' | 'javascript' | 'js' | 'json' | 'webmanifest' | 'jsx' | 'tsx' | 'less' | 'html' | 'mathml' | 'svg' | 'xml' | 'ssml' | 'atom' | 'rss' | 'regex' | 'rust' | 'sql' | 'swift' | 'toml' | 'typescript' | 'ts' | 'yaml' | 'yml' | 'matlab';
 type ExcludeLanguage<T extends LanguageBase, U extends LanguageBase> = T extends U ? never : T;
 export type Language = LanguageBase | {
@@ -24,7 +25,7 @@ export interface CodeProps {
     title?: string;
     /** 编辑修改时的回调 */
     onChange?(code: string): void;
-    children?: JSX.Element;
+    children?: JSXElement;
 }
 export type CodeElement = CustomElement<CodeProps>;
 declare function Code(props: CodeProps): JSX.Element;

package/es/code/index.js

@@ -1 +1 @@
-function t(t,e,o,i,r,n,l){try{var s=t[n](l),a=s.value}catch(t){o(t);return}s.done?e(a):Promise.resolve(a).then(i,r)}import{use as e}from"solid-js/web";import{template as o}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{classList as a}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let c=o("<style> "),h=o("<style>"),m=o('<div class="toolbar">'),u=o("<pre><code>");import{createEffect as g,createMemo as f,createResource as p,createSignal as v,createUniqueId as w,mergeProps as C,onCleanup as b,Show as y,untrack as S}from"solid-js";import k from"@moneko/common/lib/isFunction";import j from"@moneko/common/lib/setClipboard";import{css as $}from"@moneko/css";import{customElement as x}from"solid-element";import{clearAttribute as E}from"../basic-config";import A from"../theme";import{CopyIcon as P}from"./copy-icon";import{darkCss as _,lightCss as z,style as H}from"./style";function T(o){let l,C;let{isDark:x}=A,E=/%[0-9A-Fa-f]{2}/,T=w(),[W,F]=v(""),[L,R]=v();function I(){var e;return e=function*(){return window.Prism?(window.Prism.disableWorkerMessageHandler=!0,window.Prism.manual=!0,window.Prism):(yield import("../prism")).default},(I=function(){var o=this,i=arguments;return new Promise(function(r,n){var l=e.apply(o,i);function s(e){t(l,r,n,s,a,"next",e)}function a(e){t(l,r,n,s,a,"throw",e)}s(void 0)})}).apply(this,arguments)}let[M]=p("prism",function(){return I.apply(this,arguments)}),O=f(()=>{var t;return o.title||(null==(t=o.language)?void 0:t.split(" ").pop())});function U(){j(S(W),l)}g(()=>{let t=o.code||"";E.test(t)&&(t=decodeURIComponent(t)),l.normalize(),t!==l.textContent&&F(t)});let q=function(t){t.target.normalize();let e=t.target.textContent;B(o.language,e,!0),k(o.onChange)&&o.onChange(e)};function B(t="markup",e,o,i={}){C&&(clearTimeout(C),C=void 0);let r=M();e&&r&&(C=setTimeout(()=>{if(clearTimeout(C),CSS.highlights){o&&CSS.highlights.forEach((t,e)=>{e.startsWith(T)&&t.clear()});let n=t.split(" "),s=r.languages[n[0]];s&&function t(e,o,i,r=0){let n=r;if(Array.isArray(o)){for(let r=0,l=o.length;r<l;r++){let l=o[r];if("object"!=typeof l){n+=l.length;continue}n=t(e,l,i,n)}return n}if("object"==typeof o&&o.type&&e.firstChild){var l;let r=(null!=(l=o.alias)?l:o.type).toString(),s=T+r,a=new Range;["deleted","inserted"].includes(r)?a.setStart(e.firstChild,n+2):a.setStart(e.firstChild,n),Array.isArray(o.content)?n=t(e,o.content,i,n):"string"==typeof o.content&&(n+=o.content.length),a.setEnd(e.firstChild,n),function(t,e,o,i){let r=CSS.highlights.get(t);r?r.add(o):CSS.highlights.set(t,new Highlight().add(o)),void 0===i[t]&&(i[t]=`::highlight(${t}){color:var(--${e});background-color:var(--${e}-bg);text-decoration:var(--${e}-text-decoration);text-shadow:var(--${e}-text-shadow);-webkit-text-stroke-width:var(--${e}-stroke-width);-webkit-text-stroke-color:var(--${e}-stroke-color);}`)}(s,r,a,i)}return n}(l,r.tokenize(e,s),i),n.length>1||"git"===n[0]?B(n[1],e,!1,i):R(Object.values(i).join(""))}else throw Error("不支持 CSS Highlights");C=void 0},0))}return g(()=>{B(o.language,W(),!0)}),b(()=>{if(CSS.highlights)for(let t of CSS.highlights.keys())t.startsWith(T)&&CSS.highlights.delete(t)}),[(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=x()?_:z),t})(),(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=L()),t})(),(()=>{let t=h();return t.textContent=H,t})(),s(y,{get when(){return o.css},get children(){let t=c(),e=t.firstChild;return n(()=>e.data=$(o.css)),t}}),(()=>{let t=u(),c=t.firstChild,h=l;return r(t,s(y,{get when(){return o.toolbar},get children(){let t=m();return r(t,s(P,{class:"toolbar-copy",onClick:U})),n(()=>i(t,"data-language",O())),t}}),c),d(c,"input",q,!0),"function"==typeof h?e(h,c):l=c,i(c,"spellcheck",!1),r(c,W),n(e=>{let r={[`language-${o.language}`]:!!o.language,"not-toolbar":!o.toolbar,[o.class]:!o.edit},n=o.edit;return e._v$=a(t,r,e._v$),n!==e._v$2&&i(c,"contenteditable",e._v$2=n),e},{_v$:void 0,_v$2:void 0}),t})()]}x("n-code",{class:void 0,code:void 0,language:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,onChange:void 0,title:void 0},(t,e)=>{let{baseStyle:o}=A,i=e.element,r=C({code:i.textContent,css:i.css,onChange(t){i.dispatchEvent(new CustomEvent("change",{detail:t}))}},t);return g(()=>{E(i,["css","code","title"]),i.replaceChildren()}),[(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=o()),t})(),s(T,r)]});export default T;l(["input"]);
+function t(t,e,o,i,r,n,l){try{var s=t[n](l),a=s.value}catch(t){o(t);return}s.done?e(a):Promise.resolve(a).then(i,r)}import{use as e}from"solid-js/web";import{template as o}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{classList as a}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let c=o("<style> "),h=o("<style>"),m=o('<div class="toolbar">'),u=o("<pre><code>");import{createEffect as g,createMemo as f,createResource as p,createSignal as v,createUniqueId as w,mergeProps as C,onCleanup as b,Show as y,untrack as S}from"solid-js";import k from"@moneko/common/lib/isFunction";import j from"@moneko/common/lib/setClipboard";import{css as $}from"@moneko/css";import{customElement as x}from"solid-element";import{clearAttribute as E}from"../basic-config";import A from"../theme";import{CopyIcon as P}from"./copy-icon";import{darkCss as _,lightCss as z,style as H}from"./style";function T(o){let l,C;let{isDark:x}=A,E=/%[0-9A-Fa-f]{2}/,T=w(),[W,F]=v(""),[L,R]=v();function I(){var e;return e=function*(){return window.Prism?(window.Prism.disableWorkerMessageHandler=!0,window.Prism.manual=!0,window.Prism):(yield import("../prism")).default},(I=function(){var o=this,i=arguments;return new Promise(function(r,n){var l=e.apply(o,i);function s(e){t(l,r,n,s,a,"next",e)}function a(e){t(l,r,n,s,a,"throw",e)}s(void 0)})}).apply(this,arguments)}let[M]=p("prism",function(){return I.apply(this,arguments)}),O=f(()=>{var t;return o.title||(null==(t=o.language)?void 0:t.split(" ").pop())});function U(){j(S(W),l)}g(()=>{let t=o.code||"";E.test(t)&&(t=decodeURIComponent(t)),l&&(l.normalize(),t!==l.textContent&&F(t))});let q=function(t){t.target.normalize();let e=t.target.textContent;B(o.language,e,!0),k(o.onChange)&&o.onChange(e)};function B(t="markup",e,o,i={}){C&&(clearTimeout(C),C=void 0);let r=M();e&&r&&(C=setTimeout(()=>{if(clearTimeout(C),CSS.highlights){o&&CSS.highlights.forEach((t,e)=>{e.startsWith(T)&&t.clear()});let n=t.split(" "),s=r.languages[n[0]];s&&l&&function t(e,o,i,r=0){let n=r;if(Array.isArray(o)){for(let r=0,l=o.length;r<l;r++){let l=o[r];if("object"!=typeof l){n+=l.length;continue}n=t(e,l,i,n)}return n}if("object"==typeof o&&o.type&&e.firstChild){var l;let r=(null!=(l=o.alias)?l:o.type).toString(),s=T+r,a=new Range;["deleted","inserted"].includes(r)?a.setStart(e.firstChild,n+2):a.setStart(e.firstChild,n),Array.isArray(o.content)?n=t(e,o.content,i,n):"string"==typeof o.content&&(n+=o.content.length),a.setEnd(e.firstChild,n),function(t,e,o,i){let r=CSS.highlights.get(t);r?r.add(o):CSS.highlights.set(t,new Highlight().add(o)),void 0===i[t]&&(i[t]=`::highlight(${t}){color:var(--${e});background-color:var(--${e}-bg);text-decoration:var(--${e}-text-decoration);text-shadow:var(--${e}-text-shadow);-webkit-text-stroke-width:var(--${e}-stroke-width);-webkit-text-stroke-color:var(--${e}-stroke-color);}`)}(s,r,a,i)}return n}(l,r.tokenize(e,s),i),n.length>1||"git"===n[0]?B(n[1],e,!1,i):R(Object.values(i).join(""))}else throw Error("不支持 CSS Highlights");C=void 0},0))}return g(()=>{B(o.language,W(),!0)}),b(()=>{if(CSS.highlights)for(let t of CSS.highlights.keys())t.startsWith(T)&&CSS.highlights.delete(t)}),[(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=x()?_:z),t})(),(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=L()),t})(),(()=>{let t=h();return t.textContent=H,t})(),s(y,{get when(){return o.css},get children(){let t=c(),e=t.firstChild;return n(()=>e.data=$(o.css)),t}}),(()=>{let t=u(),c=t.firstChild,h=l;return r(t,s(y,{get when(){return o.toolbar},get children(){let t=m();return r(t,s(P,{class:"toolbar-copy",onClick:U})),n(()=>i(t,"data-language",O())),t}}),c),d(c,"input",q,!0),"function"==typeof h?e(h,c):l=c,i(c,"spellcheck",!1),r(c,W),n(e=>{let r={[`language-${o.language}`]:!!o.language,"not-toolbar":!o.toolbar,[o.class]:!o.edit},n=o.edit;return e._v$=a(t,r,e._v$),n!==e._v$2&&i(c,"contenteditable",e._v$2=n),e},{_v$:void 0,_v$2:void 0}),t})()]}x("n-code",{class:void 0,code:void 0,language:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,onChange:void 0,title:void 0},(t,e)=>{let{baseStyle:o}=A,i=e.element,r=C({code:i.textContent,css:i.css,onChange(t){i.dispatchEvent(new CustomEvent("change",{detail:t}))}},t);return g(()=>{E(i,["css","code","title"]),i.replaceChildren()}),[(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=o()),t})(),s(T,r)]});export default T;l(["input"]);

package/es/code/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/code/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createResource,\n  createSignal,\n  createUniqueId,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport type { TokenStream } from 'prismjs';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme from '../theme';\n\nimport { CopyIcon } from './copy-icon';\nimport { darkCss, lightCss, style } from './style';\n\nexport type LanguageBase =\n  | 'bash'\n  | 'shell'\n  | 'sh'\n  | 'clike'\n  | 'css'\n  | 'docker'\n  | 'dockerfile'\n  | 'git'\n  | 'javascript'\n  | 'js'\n  | 'json'\n  | 'webmanifest'\n  | 'jsx'\n  | 'tsx'\n  | 'less'\n  | 'html'\n  | 'mathml'\n  | 'svg'\n  | 'xml'\n  | 'ssml'\n  | 'atom'\n  | 'rss'\n  | 'regex'\n  | 'rust'\n  | 'sql'\n  | 'swift'\n  | 'toml'\n  | 'typescript'\n  | 'ts'\n  | 'yaml'\n  | 'yml'\n  | 'matlab';\n\ntype ExcludeLanguage<T extends LanguageBase, U extends LanguageBase> = T extends U ? never : T;\n\nexport type Language =\n  | LanguageBase\n  | {\n      [T in LanguageBase]: `${T} ${ExcludeLanguage<LanguageBase, T>}`;\n    }[LanguageBase];\nexport interface CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言（支持多种语言配置：如 `html css javascript`）\n   * @default 'markup'\n   */\n  language?: Language;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 工具条上显示的文字 */\n  title?: string;\n  /** 编辑修改时的回调 */\n  onChange?(code: string): void;\n  children?: JSX.Element;\n}\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n  const { isDark } = theme;\n  let codeEl: HTMLPreElement;\n  let timer: NodeJS.Timeout | undefined;\n  const decoded = /%[0-9A-Fa-f]{2}/;\n  const id = createUniqueId();\n  const [code, setCode] = createSignal<string>('');\n  const [highlightCss, setHighlightCss] = createSignal<string>();\n\n  async function fetchPrism() {\n    if (!window.Prism) {\n      return (await import('../prism')).default;\n    }\n    window.Prism.disableWorkerMessageHandler = true;\n    window.Prism.manual = true;\n    return window.Prism;\n  }\n  const [prismJS] = createResource('prism', fetchPrism);\n  const title = createMemo(() => props.title || props.language?.split(' ').pop());\n\n  createEffect(() => {\n    let _next = props.code || '';\n\n    if (decoded.test(_next)) {\n      _next = decodeURIComponent(_next);\n    }\n    codeEl.normalize();\n    if (_next !== codeEl.textContent) {\n      setCode(_next);\n    }\n  });\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  const change: JSX.InputEventHandlerUnion<HTMLElement, InputEvent> = function (e) {\n    e.target.normalize();\n    const next = e.target.textContent;\n\n    syntax(props.language, next, true);\n    if (isFunction(props.onChange)) {\n      props.onChange(next);\n    }\n  };\n\n  function updateRang(\n    key: string,\n    token: string,\n    range: AbstractRange,\n    selection: Record<string, string>,\n  ) {\n    const highlight = CSS.highlights.get(key);\n\n    if (highlight) {\n      highlight.add(range);\n    } else {\n      CSS.highlights.set(key, new Highlight().add(range));\n    }\n    if (selection[key] === void 0) {\n      selection[key] =\n        `::highlight(${key}){color:var(--${token});background-color:var(--${token}-bg);text-decoration:var(--${token}-text-decoration);text-shadow:var(--${token}-text-shadow);-webkit-text-stroke-width:var(--${token}-stroke-width);-webkit-text-stroke-color:var(--${token}-stroke-color);}`;\n    }\n  }\n  function highlighter(\n    el: HTMLPreElement,\n    tokenize: TokenStream,\n    selection: Record<string, string>,\n    start = 0,\n  ) {\n    let pos = start;\n\n    if (Array.isArray(tokenize)) {\n      for (let i = 0, len = tokenize.length; i < len; i++) {\n        const token = tokenize[i];\n\n        if (typeof token !== 'object') {\n          pos += token.length;\n          continue;\n        }\n        pos = highlighter(el, token, selection, pos);\n      }\n      return pos;\n    }\n    if (typeof tokenize === 'object' && tokenize.type) {\n      if (el.firstChild) {\n        const token = (tokenize.alias ?? tokenize.type).toString();\n        const key = id + token;\n        const range = new Range();\n\n        if (['deleted', 'inserted'].includes(token)) {\n          // diff\n          range.setStart(el.firstChild, pos + 2);\n        } else {\n          range.setStart(el.firstChild, pos);\n        }\n        if (Array.isArray(tokenize.content)) {\n          pos = highlighter(el, tokenize.content, selection, pos);\n        } else if (typeof tokenize.content === 'string') {\n          pos += tokenize.content.length;\n        }\n        range.setEnd(el.firstChild, pos);\n        updateRang(key, token, range, selection);\n      }\n    }\n\n    return pos;\n  }\n  function syntax(\n    language: Language = 'markup' as Language,\n    value: string | null,\n    clear?: boolean,\n    prevCss = {},\n  ) {\n    if (timer) {\n      clearTimeout(timer);\n      timer = void 0;\n    }\n    const Prism = prismJS();\n\n    if (!value || !Prism) return;\n    timer = setTimeout(() => {\n      clearTimeout(timer);\n      if (CSS.highlights) {\n        if (clear) {\n          CSS.highlights.forEach((highlight, key) => {\n            if (key.startsWith(id)) {\n              highlight.clear();\n            }\n          });\n        }\n        const grammars = language.split(' ') as Language[],\n          grammar = Prism.languages[grammars[0]];\n\n        if (grammar) {\n          highlighter(codeEl, Prism.tokenize(value, grammar), prevCss);\n        }\n        if (grammars.length > 1 || grammars[0] === 'git') {\n          syntax(grammars[1], value, false, prevCss);\n        } else {\n          setHighlightCss(Object.values(prevCss).join(''));\n        }\n      } else {\n        throw Error('不支持 CSS Highlights');\n      }\n      timer = void 0;\n    }, 0);\n  }\n  createEffect(() => {\n    syntax(props.language, code(), true);\n  });\n  onCleanup(() => {\n    if (CSS.highlights) {\n      for (const key of CSS.highlights.keys()) {\n        if (key.startsWith(id)) {\n          CSS.highlights.delete(key);\n        }\n      }\n    }\n  });\n\n  return (\n    <>\n      <style textContent={isDark() ? darkCss : lightCss} />\n      <style textContent={highlightCss()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <pre\n        classList={{\n          [`language-${props.language}`]: !!props.language,\n          'not-toolbar': !props.toolbar,\n          [props.class!]: !props.edit,\n        }}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-language={title()}>\n            <CopyIcon class=\"toolbar-copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl!} contenteditable={props.edit} spellcheck={false} onInput={change}>\n          {code()}\n        </code>\n      </pre>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    language: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    onChange: void 0,\n    title: void 0,\n  },\n  (_, opt) => {\n    const { baseStyle } = theme;\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        code: el.textContent,\n        css: el.css,\n        onChange(val: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css', 'code', 'title']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={baseStyle()} />\n        <Code {...props} />\n      </>\n    );\n  },\n);\nexport default Code;\n"],"names":["createEffect","createMemo","createResource","createSignal","createUniqueId","mergeProps","onCleanup","Show","untrack","isFunction","setClipboard","css","customElement","clearAttribute","theme","CopyIcon","darkCss","lightCss","style","Code","props","codeEl","timer","isDark","decoded","id","code","setCode","highlightCss","setHighlightCss","fetchPrism","window","Prism","disableWorkerMessageHandler","manual","default","prismJS","title","language","split","pop","copy","_next","test","decodeURIComponent","normalize","textContent","change","e","target","next","syntax","onChange","value","clear","prevCss","clearTimeout","setTimeout","CSS","highlights","forEach","highlight","key","startsWith","grammars","grammar","languages","highlighter","el","tokenize","selection","start","pos","Array","isArray","i","len","length","token","type","firstChild","alias","toString","range","Range","includes","setStart","content","setEnd","updateRang","get","add","set","Highlight","Object","values","join","Error","keys","delete","toolbar","class","edit","children","_","opt","baseStyle","element","val","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"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"}
+{"version":3,"sources":["components/code/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createResource,\n  createSignal,\n  createUniqueId,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport type { TokenStream } from 'prismjs';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme from '../theme';\n\nimport { CopyIcon } from './copy-icon';\nimport { darkCss, lightCss, style } from './style';\n\nexport type LanguageBase =\n  | 'bash'\n  | 'shell'\n  | 'sh'\n  | 'clike'\n  | 'css'\n  | 'docker'\n  | 'dockerfile'\n  | 'git'\n  | 'javascript'\n  | 'js'\n  | 'json'\n  | 'webmanifest'\n  | 'jsx'\n  | 'tsx'\n  | 'less'\n  | 'html'\n  | 'mathml'\n  | 'svg'\n  | 'xml'\n  | 'ssml'\n  | 'atom'\n  | 'rss'\n  | 'regex'\n  | 'rust'\n  | 'sql'\n  | 'swift'\n  | 'toml'\n  | 'typescript'\n  | 'ts'\n  | 'yaml'\n  | 'yml'\n  | 'matlab';\n\ntype ExcludeLanguage<T extends LanguageBase, U extends LanguageBase> = T extends U ? never : T;\n\nexport type Language =\n  | LanguageBase\n  | {\n      [T in LanguageBase]: `${T} ${ExcludeLanguage<LanguageBase, T>}`;\n    }[LanguageBase];\nexport interface CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言（支持多种语言配置：如 `html css javascript`）\n   * @default 'markup'\n   */\n  language?: Language;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 工具条上显示的文字 */\n  title?: string;\n  /** 编辑修改时的回调 */\n  onChange?(code: string): void;\n  children?: JSXElement;\n}\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n  const { isDark } = theme;\n  let codeEl: HTMLPreElement | undefined;\n  let timer: NodeJS.Timeout | undefined;\n  const decoded = /%[0-9A-Fa-f]{2}/;\n  const id = createUniqueId();\n  const [code, setCode] = createSignal<string>('');\n  const [highlightCss, setHighlightCss] = createSignal<string>();\n\n  async function fetchPrism() {\n    if (!window.Prism) {\n      return (await import('../prism')).default;\n    }\n    window.Prism.disableWorkerMessageHandler = true;\n    window.Prism.manual = true;\n    return window.Prism;\n  }\n  const [prismJS] = createResource('prism', fetchPrism);\n  const title = createMemo(() => props.title || props.language?.split(' ').pop());\n\n  createEffect(() => {\n    let _next = props.code || '';\n\n    if (decoded.test(_next)) {\n      _next = decodeURIComponent(_next);\n    }\n    if (codeEl) {\n      codeEl.normalize();\n      if (_next !== codeEl.textContent) {\n        setCode(_next);\n      }\n    }\n  });\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  const change: JSX.InputEventHandlerUnion<HTMLElement, InputEvent> = function (e) {\n    e.target.normalize();\n    const next = e.target.textContent;\n\n    syntax(props.language, next, true);\n    if (isFunction(props.onChange)) {\n      props.onChange(next);\n    }\n  };\n\n  function updateRang(\n    key: string,\n    token: string,\n    range: AbstractRange,\n    selection: Record<string, string>,\n  ) {\n    const highlight = CSS.highlights.get(key);\n\n    if (highlight) {\n      highlight.add(range);\n    } else {\n      CSS.highlights.set(key, new Highlight().add(range));\n    }\n    if (selection[key] === void 0) {\n      selection[key] =\n        `::highlight(${key}){color:var(--${token});background-color:var(--${token}-bg);text-decoration:var(--${token}-text-decoration);text-shadow:var(--${token}-text-shadow);-webkit-text-stroke-width:var(--${token}-stroke-width);-webkit-text-stroke-color:var(--${token}-stroke-color);}`;\n    }\n  }\n  function highlighter(\n    el: HTMLPreElement,\n    tokenize: TokenStream,\n    selection: Record<string, string>,\n    start = 0,\n  ) {\n    let pos = start;\n\n    if (Array.isArray(tokenize)) {\n      for (let i = 0, len = tokenize.length; i < len; i++) {\n        const token = tokenize[i];\n\n        if (typeof token !== 'object') {\n          pos += token.length;\n          continue;\n        }\n        pos = highlighter(el, token, selection, pos);\n      }\n      return pos;\n    }\n    if (typeof tokenize === 'object' && tokenize.type) {\n      if (el.firstChild) {\n        const token = (tokenize.alias ?? tokenize.type).toString();\n        const key = id + token;\n        const range = new Range();\n\n        if (['deleted', 'inserted'].includes(token)) {\n          // diff\n          range.setStart(el.firstChild, pos + 2);\n        } else {\n          range.setStart(el.firstChild, pos);\n        }\n        if (Array.isArray(tokenize.content)) {\n          pos = highlighter(el, tokenize.content, selection, pos);\n        } else if (typeof tokenize.content === 'string') {\n          pos += tokenize.content.length;\n        }\n        range.setEnd(el.firstChild, pos);\n        updateRang(key, token, range, selection);\n      }\n    }\n\n    return pos;\n  }\n  function syntax(\n    language: Language = 'markup' as Language,\n    value: string | null,\n    clear?: boolean,\n    prevCss = {},\n  ) {\n    if (timer) {\n      clearTimeout(timer);\n      timer = void 0;\n    }\n    const Prism = prismJS();\n\n    if (!value || !Prism) return;\n    timer = setTimeout(() => {\n      clearTimeout(timer);\n      if (CSS.highlights) {\n        if (clear) {\n          CSS.highlights.forEach((highlight, key) => {\n            if (key.startsWith(id)) {\n              highlight.clear();\n            }\n          });\n        }\n        const grammars = language.split(' ') as Language[],\n          grammar = Prism.languages[grammars[0]];\n\n        if (grammar && codeEl) {\n          highlighter(codeEl, Prism.tokenize(value, grammar), prevCss);\n        }\n        if (grammars.length > 1 || grammars[0] === 'git') {\n          syntax(grammars[1], value, false, prevCss);\n        } else {\n          setHighlightCss(Object.values(prevCss).join(''));\n        }\n      } else {\n        throw Error('不支持 CSS Highlights');\n      }\n      timer = void 0;\n    }, 0);\n  }\n  createEffect(() => {\n    syntax(props.language, code(), true);\n  });\n  onCleanup(() => {\n    if (CSS.highlights) {\n      for (const key of CSS.highlights.keys()) {\n        if (key.startsWith(id)) {\n          CSS.highlights.delete(key);\n        }\n      }\n    }\n  });\n\n  return (\n    <>\n      <style textContent={isDark() ? darkCss : lightCss} />\n      <style textContent={highlightCss()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <pre\n        classList={{\n          [`language-${props.language}`]: !!props.language,\n          'not-toolbar': !props.toolbar,\n          [props.class!]: !props.edit,\n        }}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-language={title()}>\n            <CopyIcon class=\"toolbar-copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl} contenteditable={props.edit} spellcheck={false} onInput={change}>\n          {code()}\n        </code>\n      </pre>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    language: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    onChange: void 0,\n    title: void 0,\n  },\n  (_, opt) => {\n    const { baseStyle } = theme;\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        code: el.textContent,\n        css: el.css,\n        onChange(val: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css', 'code', 'title']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={baseStyle()} />\n        <Code {...props} />\n      </>\n    );\n  },\n);\nexport default Code;\n"],"names":["createEffect","createMemo","createResource","createSignal","createUniqueId","mergeProps","onCleanup","Show","untrack","isFunction","setClipboard","css","customElement","clearAttribute","theme","CopyIcon","darkCss","lightCss","style","Code","props","codeEl","timer","isDark","decoded","id","code","setCode","highlightCss","setHighlightCss","fetchPrism","window","Prism","disableWorkerMessageHandler","manual","default","prismJS","title","language","split","pop","copy","_next","test","decodeURIComponent","normalize","textContent","change","e","target","next","syntax","onChange","value","clear","prevCss","clearTimeout","setTimeout","CSS","highlights","forEach","highlight","key","startsWith","grammars","grammar","languages","highlighter","el","tokenize","selection","start","pos","Array","isArray","i","len","length","token","type","firstChild","alias","toString","range","Range","includes","setStart","content","setEnd","updateRang","get","add","set","Highlight","Object","values","join","Error","keys","delete","toolbar","class","edit","children","_","opt","baseStyle","element","val","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"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"}

package/es/code/style.js

@@ -1,6 +1,7 @@
 import{css as o}from"@moneko/css";export const style=o`
   :host {
-    --code-font-stack: 'Liberation Mono', monaco, menlo, consolas, 'Source Code Pro', 'Ubuntu Mono',
+    --code-font-stack:
+      'Liberation Mono', monaco, menlo, consolas, 'Source Code Pro', 'Ubuntu Mono',
       'Microsoft Yahei', '微软雅黑', courier, 'Helvetica Neue', 'Lantinghei SC', stxihei, wenquanyi,
       sans-serif;
 

package/es/code/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  :host {\n    --code-font-stack: 'Liberation Mono', monaco, menlo, consolas, 'Source Code Pro', 'Ubuntu Mono',\n      'Microsoft Yahei', '微软雅黑', courier, 'Helvetica Neue', 'Lantinghei SC', stxihei, wenquanyi,\n      sans-serif;\n\n    position: relative;\n    display: block;\n    box-sizing: border-box;\n  }\n\n  .toolbar::after,\n  .toolbar-copy,\n  pre,\n  code {\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--transition-timing-function);\n  }\n\n  [data-copy]::before {\n    position: absolute;\n    z-index: 1;\n    display: inline-block;\n    margin: auto;\n    border: 1px solid;\n    border-radius: var(--border-radius);\n    padding: 4px 8px;\n    font-size: var(--font-size-sm);\n    transition:\n      background-color 0.3s,\n      color 0.3s,\n      border-color 0.3s;\n    content: '复制成功';\n    inline-size: fit-content;\n    animation-fill-mode: forwards;\n    inset-block-start: 32px;\n    inset-inline: 0;\n  }\n\n  [data-copy='success']::before {\n    border-color: var(--success-border);\n    color: var(--success-color);\n    background-color: var(--success-bg);\n    animation: copy-slide-in var(--transition-duration) var(--transition-timing-function);\n  }\n\n  [data-copy='failure']::before {\n    border-color: var(--error-border);\n    color: var(--error-color);\n    background-color: var(--error-bg);\n    animation:\n      copy-slide-in var(--transition-duration) var(--transition-timing-function),\n      error 1s var(--transition-timing-function) 1s;\n    content: '复制失败';\n  }\n\n  [data-copy-exit]::before {\n    animation: copy-slide-out var(--transition-duration) forwards var(--transition-timing-function);\n  }\n\n  pre,\n  code {\n    display: block;\n    border: none;\n    border-radius: var(--border-radius);\n    font-size: var(--font-size);\n    font-family: var(--code-font-stack);\n    text-align: start;\n    white-space: pre-wrap;\n    outline: none;\n    text-shadow: none;\n    overflow-wrap: normal;\n    tab-size: 4;\n    hyphens: none;\n    max-inline-size: 100%;\n    line-height: 1.8;\n    transition-property: box-shadow, background-color, border-color, color;\n  }\n\n  pre {\n    position: relative;\n    overflow: visible;\n    margin: auto;\n    color: var(--code-color);\n    background-color: var(--primary-component-bg);\n    box-shadow: 0 2px 8px 0 var(--primary-shadow);\n  }\n\n  pre > code {\n    overflow: auto;\n    padding: 32px 16px 8px;\n    pointer-events: auto;\n  }\n\n  pre.language-css,\n  pre.language-less,\n  pre.language-regex {\n    color: var(--code-lang-style-color);\n  }\n\n  pre > .toolbar::after {\n    position: absolute;\n    z-index: 2;\n    display: block;\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n    font-size: var(--font-size);\n    font-family: Ubuntu, sans-serif;\n    font-weight: bold;\n    text-align: center;\n    color: var(--text-color);\n    background-color: var(--code-toolbar-bg, rgb(220 224 229 / 50%));\n    box-shadow: 0 1px 5px rgb(0 0 0 / 10%);\n    text-transform: uppercase;\n    backdrop-filter: blur(10px);\n    content: attr(data-language) '';\n    block-size: 24px;\n    inline-size: 100%;\n    line-height: 24px;\n    transition-property: background-color, border-color, color;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n  }\n\n  pre > .toolbar::before {\n    position: absolute;\n    z-index: 3;\n    display: inline-block;\n    border-radius: var(--border-radius);\n    text-align: center;\n    background-color: #fc625d;\n    box-shadow:\n      0 0 0 4px #fc625d,\n      20px 0 0 4px #fdbc40,\n      40px 0 0 4px #35cd4b;\n    cursor: pointer;\n    content: '';\n    block-size: 4px;\n    inline-size: 4px;\n    inset-block-start: 10px;\n    inset-inline-start: 12px;\n  }\n\n  pre > .toolbar > .toolbar-copy {\n    position: absolute;\n    z-index: 3;\n    border: none;\n    padding: 0;\n    font-size: var(--font-size, 14px);\n    color: var(--text-color);\n    background: none;\n    outline: none;\n    cursor: pointer;\n    inset-block-start: 5px;\n    inset-inline-end: 5px;\n  }\n\n  .toolbar > .toolbar-copy:hover {\n    color: var(--primary-color, #5794ff);\n  }\n\n  pre > .toolbar > .toolbar-copy:active {\n    transform: scale(0.95);\n  }\n\n  .not-toolbar > code {\n    padding-block-start: 8px !important;\n  }\n\n  pre::-webkit-scrollbar {\n    block-size: 5px;\n    inline-size: 5px;\n  }\n\n  @keyframes copy-slide-in {\n    from {\n      opacity: 0;\n      transform: translate3d(0, -100%, 0) scale(0);\n    }\n\n    to {\n      opacity: 1;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n  }\n\n  @keyframes copy-slide-out {\n    from {\n      opacity: 1;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    to {\n      opacity: 0;\n      transform: translate3d(0, -100%, 0) scale(0);\n    }\n  }\n`;\nexport const darkCss = css({\n  ':host': {\n    '--code-color': '#eee',\n    '--code-lang-style-color': '#fd9170',\n    '--code-toolbar-bg': 'rgb(63, 63, 63, 0.7)',\n    '--atrule': '#c792ea',\n    '--attr-name': '#9cdcfe',\n    '--attr-value': '#ce9178',\n    '--attr-equals': '#ccc',\n    '--attribute': '#a5e844',\n    '--boolean': '#c792ea',\n    '--builtin': '#ffcb6b',\n    '--cdata': '#80cbc4',\n    '--char': '#80cbc4',\n    '--class': '#ffcb6b',\n    '--class-name': '#f2ff00',\n    '--comment': '#616161',\n    '--constant': '#c792ea',\n    '--doctype': '#616161',\n    '--entity': '#f66',\n    '--function': '#dcdcaa',\n    '--hexcode': '#f2ff00',\n    '--id': '#c792ea',\n    '--important': '#c792ea',\n    '--keyword': '#c792ea',\n    '--number': '#fd9170',\n    '--operator': '#569cd6',\n    '--prolog': '#616161',\n    '--property': '#80cbc4',\n    '--pseudo-class': '#a5e844',\n    '--pseudo-element': '#a5e844',\n    '--punctuation': '#89ddff',\n    '--regex': '#f2ff00',\n    '--selector': '#f66',\n    '--string': '#a5e844',\n    '--symbol': '#c792ea',\n    '--tag': '#569cd6',\n    '--unit': '#fd9170',\n    '--url': '#f66',\n    '--variable': '#f66',\n    '--inserted-bg': 'rgba(0, 255, 128, .15)',\n    '--deleted-bg': 'rgba(255, 0, 0, .15)',\n  },\n});\nexport const lightCss = css({\n  ':host': {\n    '--code-color': '#90a4ae',\n    '--code-lang-style-color': '#f76d47',\n    '--namespace': 'rgba(56, 64, 68, 0.7)',\n    '--tag': '#4b69c6',\n    '--atrule': '#7c4dff',\n    '--attr-name': '#39adb5',\n    '--attr-value': '#f6a434',\n    '--attr-equals': '#90a4ae',\n    '--attribute': '#f6a434',\n    '--boolean': '#7c4dff',\n    '--builtin': '#39adb5',\n    '--cdata': '#39adb5',\n    '--char': '#39adb5',\n    '--class': '#39adb5',\n    '--class-name': '#6182b8',\n    '--comment': '#aabfc9',\n    '--constant': '#7c4dff',\n    '--doctype': '#aabfc9',\n    '--entity': '#e53935',\n    '--hexcode': '#f76d47',\n    '--id': '#7c4dff',\n    '--important': '#7c4dff',\n    '--keyword': '#7c4dff',\n    '--number': '#f76d47',\n    '--operator': '#91b3e0',\n    '--prolog': '#aabfc9',\n    '--property': '#39adb5',\n    '--pseudo-class': '#f6a434',\n    '--pseudo-element': '#f6a434',\n    '--punctuation': '#39adb5',\n    '--regex': '#6182b8',\n    '--selector': '#e53935',\n    '--string': '#f6a434',\n    '--symbol': '#7c4dff',\n    '--unit': '#f76d47',\n    '--url': '#e53935',\n    '--variable': '#e53935',\n    '--function': '#4078f2',\n    '--name': '#39adb5',\n    '--prefix-inserted': 'green',\n    '--prefix-deleted': 'red',\n    '--inserted-bg': 'rgba(0, 255, 128, .1)',\n    '--deleted-bg': 'rgba(255, 0, 0, .1)',\n  },\n});\n"],"names":["css","style","darkCss","lightCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoMzB,CAAC,AAAC,AACF,QAAO,MAAME,QAAUF,EAAI,CACzB,QAAS,CACP,eAAgB,OAChB,0BAA2B,UAC3B,oBAAqB,uBACrB,WAAY,UACZ,cAAe,UACf,eAAgB,UAChB,gBAAiB,OACjB,cAAe,UACf,YAAa,UACb,YAAa,UACb,UAAW,UACX,SAAU,UACV,UAAW,UACX,eAAgB,UAChB,YAAa,UACb,aAAc,UACd,YAAa,UACb,WAAY,OACZ,aAAc,UACd,YAAa,UACb,OAAQ,UACR,cAAe,UACf,YAAa,UACb,WAAY,UACZ,aAAc,UACd,WAAY,UACZ,aAAc,UACd,iBAAkB,UAClB,mBAAoB,UACpB,gBAAiB,UACjB,UAAW,UACX,aAAc,OACd,WAAY,UACZ,WAAY,UACZ,QAAS,UACT,SAAU,UACV,QAAS,OACT,aAAc,OACd,gBAAiB,yBACjB,eAAgB,sBAClB,CACF,EAAG,AACH,QAAO,MAAMG,SAAWH,EAAI,CAC1B,QAAS,CACP,eAAgB,UAChB,0BAA2B,UAC3B,cAAe,wBACf,QAAS,UACT,WAAY,UACZ,cAAe,UACf,eAAgB,UAChB,gBAAiB,UACjB,cAAe,UACf,YAAa,UACb,YAAa,UACb,UAAW,UACX,SAAU,UACV,UAAW,UACX,eAAgB,UAChB,YAAa,UACb,aAAc,UACd,YAAa,UACb,WAAY,UACZ,YAAa,UACb,OAAQ,UACR,cAAe,UACf,YAAa,UACb,WAAY,UACZ,aAAc,UACd,WAAY,UACZ,aAAc,UACd,iBAAkB,UAClB,mBAAoB,UACpB,gBAAiB,UACjB,UAAW,UACX,aAAc,UACd,WAAY,UACZ,WAAY,UACZ,SAAU,UACV,QAAS,UACT,aAAc,UACd,aAAc,UACd,SAAU,UACV,oBAAqB,QACrB,mBAAoB,MACpB,gBAAiB,wBACjB,eAAgB,qBAClB,CACF,EAAG"}
+{"version":3,"sources":["components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  :host {\n    --code-font-stack:\n      'Liberation Mono', monaco, menlo, consolas, 'Source Code Pro', 'Ubuntu Mono',\n      'Microsoft Yahei', '微软雅黑', courier, 'Helvetica Neue', 'Lantinghei SC', stxihei, wenquanyi,\n      sans-serif;\n\n    position: relative;\n    display: block;\n    box-sizing: border-box;\n  }\n\n  .toolbar::after,\n  .toolbar-copy,\n  pre,\n  code {\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--transition-timing-function);\n  }\n\n  [data-copy]::before {\n    position: absolute;\n    z-index: 1;\n    display: inline-block;\n    margin: auto;\n    border: 1px solid;\n    border-radius: var(--border-radius);\n    padding: 4px 8px;\n    font-size: var(--font-size-sm);\n    transition:\n      background-color 0.3s,\n      color 0.3s,\n      border-color 0.3s;\n    content: '复制成功';\n    inline-size: fit-content;\n    animation-fill-mode: forwards;\n    inset-block-start: 32px;\n    inset-inline: 0;\n  }\n\n  [data-copy='success']::before {\n    border-color: var(--success-border);\n    color: var(--success-color);\n    background-color: var(--success-bg);\n    animation: copy-slide-in var(--transition-duration) var(--transition-timing-function);\n  }\n\n  [data-copy='failure']::before {\n    border-color: var(--error-border);\n    color: var(--error-color);\n    background-color: var(--error-bg);\n    animation:\n      copy-slide-in var(--transition-duration) var(--transition-timing-function),\n      error 1s var(--transition-timing-function) 1s;\n    content: '复制失败';\n  }\n\n  [data-copy-exit]::before {\n    animation: copy-slide-out var(--transition-duration) forwards var(--transition-timing-function);\n  }\n\n  pre,\n  code {\n    display: block;\n    border: none;\n    border-radius: var(--border-radius);\n    font-size: var(--font-size);\n    font-family: var(--code-font-stack);\n    text-align: start;\n    white-space: pre-wrap;\n    outline: none;\n    text-shadow: none;\n    overflow-wrap: normal;\n    tab-size: 4;\n    hyphens: none;\n    max-inline-size: 100%;\n    line-height: 1.8;\n    transition-property: box-shadow, background-color, border-color, color;\n  }\n\n  pre {\n    position: relative;\n    overflow: visible;\n    margin: auto;\n    color: var(--code-color);\n    background-color: var(--primary-component-bg);\n    box-shadow: 0 2px 8px 0 var(--primary-shadow);\n  }\n\n  pre > code {\n    overflow: auto;\n    padding: 32px 16px 8px;\n    pointer-events: auto;\n  }\n\n  pre.language-css,\n  pre.language-less,\n  pre.language-regex {\n    color: var(--code-lang-style-color);\n  }\n\n  pre > .toolbar::after {\n    position: absolute;\n    z-index: 2;\n    display: block;\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n    font-size: var(--font-size);\n    font-family: Ubuntu, sans-serif;\n    font-weight: bold;\n    text-align: center;\n    color: var(--text-color);\n    background-color: var(--code-toolbar-bg, rgb(220 224 229 / 50%));\n    box-shadow: 0 1px 5px rgb(0 0 0 / 10%);\n    text-transform: uppercase;\n    backdrop-filter: blur(10px);\n    content: attr(data-language) '';\n    block-size: 24px;\n    inline-size: 100%;\n    line-height: 24px;\n    transition-property: background-color, border-color, color;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n  }\n\n  pre > .toolbar::before {\n    position: absolute;\n    z-index: 3;\n    display: inline-block;\n    border-radius: var(--border-radius);\n    text-align: center;\n    background-color: #fc625d;\n    box-shadow:\n      0 0 0 4px #fc625d,\n      20px 0 0 4px #fdbc40,\n      40px 0 0 4px #35cd4b;\n    cursor: pointer;\n    content: '';\n    block-size: 4px;\n    inline-size: 4px;\n    inset-block-start: 10px;\n    inset-inline-start: 12px;\n  }\n\n  pre > .toolbar > .toolbar-copy {\n    position: absolute;\n    z-index: 3;\n    border: none;\n    padding: 0;\n    font-size: var(--font-size, 14px);\n    color: var(--text-color);\n    background: none;\n    outline: none;\n    cursor: pointer;\n    inset-block-start: 5px;\n    inset-inline-end: 5px;\n  }\n\n  .toolbar > .toolbar-copy:hover {\n    color: var(--primary-color, #5794ff);\n  }\n\n  pre > .toolbar > .toolbar-copy:active {\n    transform: scale(0.95);\n  }\n\n  .not-toolbar > code {\n    padding-block-start: 8px !important;\n  }\n\n  pre::-webkit-scrollbar {\n    block-size: 5px;\n    inline-size: 5px;\n  }\n\n  @keyframes copy-slide-in {\n    from {\n      opacity: 0;\n      transform: translate3d(0, -100%, 0) scale(0);\n    }\n\n    to {\n      opacity: 1;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n  }\n\n  @keyframes copy-slide-out {\n    from {\n      opacity: 1;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    to {\n      opacity: 0;\n      transform: translate3d(0, -100%, 0) scale(0);\n    }\n  }\n`;\nexport const darkCss = css({\n  ':host': {\n    '--code-color': '#eee',\n    '--code-lang-style-color': '#fd9170',\n    '--code-toolbar-bg': 'rgb(63, 63, 63, 0.7)',\n    '--atrule': '#c792ea',\n    '--attr-name': '#9cdcfe',\n    '--attr-value': '#ce9178',\n    '--attr-equals': '#ccc',\n    '--attribute': '#a5e844',\n    '--boolean': '#c792ea',\n    '--builtin': '#ffcb6b',\n    '--cdata': '#80cbc4',\n    '--char': '#80cbc4',\n    '--class': '#ffcb6b',\n    '--class-name': '#f2ff00',\n    '--comment': '#616161',\n    '--constant': '#c792ea',\n    '--doctype': '#616161',\n    '--entity': '#f66',\n    '--function': '#dcdcaa',\n    '--hexcode': '#f2ff00',\n    '--id': '#c792ea',\n    '--important': '#c792ea',\n    '--keyword': '#c792ea',\n    '--number': '#fd9170',\n    '--operator': '#569cd6',\n    '--prolog': '#616161',\n    '--property': '#80cbc4',\n    '--pseudo-class': '#a5e844',\n    '--pseudo-element': '#a5e844',\n    '--punctuation': '#89ddff',\n    '--regex': '#f2ff00',\n    '--selector': '#f66',\n    '--string': '#a5e844',\n    '--symbol': '#c792ea',\n    '--tag': '#569cd6',\n    '--unit': '#fd9170',\n    '--url': '#f66',\n    '--variable': '#f66',\n    '--inserted-bg': 'rgba(0, 255, 128, .15)',\n    '--deleted-bg': 'rgba(255, 0, 0, .15)',\n  },\n});\nexport const lightCss = css({\n  ':host': {\n    '--code-color': '#90a4ae',\n    '--code-lang-style-color': '#f76d47',\n    '--namespace': 'rgba(56, 64, 68, 0.7)',\n    '--tag': '#4b69c6',\n    '--atrule': '#7c4dff',\n    '--attr-name': '#39adb5',\n    '--attr-value': '#f6a434',\n    '--attr-equals': '#90a4ae',\n    '--attribute': '#f6a434',\n    '--boolean': '#7c4dff',\n    '--builtin': '#39adb5',\n    '--cdata': '#39adb5',\n    '--char': '#39adb5',\n    '--class': '#39adb5',\n    '--class-name': '#6182b8',\n    '--comment': '#aabfc9',\n    '--constant': '#7c4dff',\n    '--doctype': '#aabfc9',\n    '--entity': '#e53935',\n    '--hexcode': '#f76d47',\n    '--id': '#7c4dff',\n    '--important': '#7c4dff',\n    '--keyword': '#7c4dff',\n    '--number': '#f76d47',\n    '--operator': '#91b3e0',\n    '--prolog': '#aabfc9',\n    '--property': '#39adb5',\n    '--pseudo-class': '#f6a434',\n    '--pseudo-element': '#f6a434',\n    '--punctuation': '#39adb5',\n    '--regex': '#6182b8',\n    '--selector': '#e53935',\n    '--string': '#f6a434',\n    '--symbol': '#7c4dff',\n    '--unit': '#f76d47',\n    '--url': '#e53935',\n    '--variable': '#e53935',\n    '--function': '#4078f2',\n    '--name': '#39adb5',\n    '--prefix-inserted': 'green',\n    '--prefix-deleted': 'red',\n    '--inserted-bg': 'rgba(0, 255, 128, .1)',\n    '--deleted-bg': 'rgba(255, 0, 0, .1)',\n  },\n});\n"],"names":["css","style","darkCss","lightCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqMzB,CAAC,AAAC,AACF,QAAO,MAAME,QAAUF,EAAI,CACzB,QAAS,CACP,eAAgB,OAChB,0BAA2B,UAC3B,oBAAqB,uBACrB,WAAY,UACZ,cAAe,UACf,eAAgB,UAChB,gBAAiB,OACjB,cAAe,UACf,YAAa,UACb,YAAa,UACb,UAAW,UACX,SAAU,UACV,UAAW,UACX,eAAgB,UAChB,YAAa,UACb,aAAc,UACd,YAAa,UACb,WAAY,OACZ,aAAc,UACd,YAAa,UACb,OAAQ,UACR,cAAe,UACf,YAAa,UACb,WAAY,UACZ,aAAc,UACd,WAAY,UACZ,aAAc,UACd,iBAAkB,UAClB,mBAAoB,UACpB,gBAAiB,UACjB,UAAW,UACX,aAAc,OACd,WAAY,UACZ,WAAY,UACZ,QAAS,UACT,SAAU,UACV,QAAS,OACT,aAAc,OACd,gBAAiB,yBACjB,eAAgB,sBAClB,CACF,EAAG,AACH,QAAO,MAAMG,SAAWH,EAAI,CAC1B,QAAS,CACP,eAAgB,UAChB,0BAA2B,UAC3B,cAAe,wBACf,QAAS,UACT,WAAY,UACZ,cAAe,UACf,eAAgB,UAChB,gBAAiB,UACjB,cAAe,UACf,YAAa,UACb,YAAa,UACb,UAAW,UACX,SAAU,UACV,UAAW,UACX,eAAgB,UAChB,YAAa,UACb,aAAc,UACd,YAAa,UACb,WAAY,UACZ,YAAa,UACb,OAAQ,UACR,cAAe,UACf,YAAa,UACb,WAAY,UACZ,aAAc,UACd,WAAY,UACZ,aAAc,UACd,iBAAkB,UAClB,mBAAoB,UACpB,gBAAiB,UACjB,UAAW,UACX,aAAc,UACd,WAAY,UACZ,WAAY,UACZ,SAAU,UACV,QAAS,UACT,aAAc,UACd,aAAc,UACd,SAAU,UACV,oBAAqB,QACrB,mBAAoB,MACpB,gBAAiB,wBACjB,eAAgB,qBAClB,CACF,EAAG"}

package/es/collapse/index.d.ts

@@ -0,0 +1,13 @@
+import { type JSXElement } from '../basic-config';
+declare const Collapse: (_props: CollapseProps) => import("solid-js").JSX.Element;
+export interface CollapseProps {
+    /** 自定义类名 */
+    class?: string;
+    /** 自定义样式表 */
+    css?: string;
+    title: JSXElement;
+    /** 内容 */
+    children: JSXElement[];
+}
+export type CollapseElement = CustomElement<CollapseProps>;
+export default Collapse;

package/es/collapse/index.js

@@ -0,0 +1,51 @@
+import{template as t}from"solid-js/web";import{memo as e}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as o}from"solid-js/web";import{createComponent as i}from"solid-js/web";let n=t("<style>"),a=t("<style> "),s=t('<details><summary></summary><div class="content" part="content">');import{createEffect as l,createMemo as m,Index as d,mergeProps as p}from"solid-js";import{css as c}from"@moneko/css";import{customElement as u}from"solid-element";import{clearAttribute as f}from"../basic-config";import b,{block as g}from"../theme";let y=c`
+  details {
+    overflow: hidden;
+    border-radius: var(--border-radius);
+    padding: 12px 24px;
+    background-color: var(--collapse-bg);
+    box-sizing: border-box;
+    box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));
+    user-select: auto;
+  }
+
+  details,
+  details > summary,
+  details > summary::before {
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-timing-function);
+    transition-property: background-color, transform, border-color;
+  }
+
+  details > summary {
+    font-weight: 500;
+    outline: none;
+    cursor: pointer;
+    transform: translateX(-18px);
+  }
+
+  details > summary::-webkit-details-marker,
+  details > summary::marker {
+    display: none;
+    color: transparent;
+  }
+
+  details > summary::before {
+    display: inline-block;
+    margin-inline-end: 4px;
+    inline-size: 14px;
+    font-weight: lighter;
+    text-align: center;
+    opacity: 0.5;
+    content: '⛌';
+    transform: rotate(45deg);
+  }
+
+  details[open] > summary::before {
+    transform: rotate(0);
+  }
+
+  details > .content {
+    padding: 10px 0 0;
+  }
+`,x=t=>{let{baseStyle:l}=b,c=p({autoplay:-1,children:[]},t),u=m(()=>[...c.children]);return[(()=>{let t=n();return t.textContent=g,t})(),(()=>{let t=a(),e=t.firstChild;return o(()=>e.data=l()),t})(),(()=>{let t=n();return t.textContent=y,t})(),(()=>{let t=s(),o=t.firstChild,n=o.nextSibling;return r(o,()=>c.title),r(n,i(d,{get each(){return u()},children:t=>e(t)})),t})()]};u("n-collapse",{class:void 0,css:void 0,title:void 0,children:[]},(t,e)=>{let r=e.element;return l(()=>{f(r,["css","title"]),r.replaceChildren()}),i(x,t)});export default x;

package/es/collapse/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/collapse/index.tsx"],"sourcesContent":["import { createEffect, createMemo, Index, mergeProps } from 'solid-js';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { block } from '../theme';\n\nconst style = css`\n  details {\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    padding: 12px 24px;\n    background-color: var(--collapse-bg);\n    box-sizing: border-box;\n    box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));\n    user-select: auto;\n  }\n\n  details,\n  details > summary,\n  details > summary::before {\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--transition-timing-function);\n    transition-property: background-color, transform, border-color;\n  }\n\n  details > summary {\n    font-weight: 500;\n    outline: none;\n    cursor: pointer;\n    transform: translateX(-18px);\n  }\n\n  details > summary::-webkit-details-marker,\n  details > summary::marker {\n    display: none;\n    color: transparent;\n  }\n\n  details > summary::before {\n    display: inline-block;\n    margin-inline-end: 4px;\n    inline-size: 14px;\n    font-weight: lighter;\n    text-align: center;\n    opacity: 0.5;\n    content: '⛌';\n    transform: rotate(45deg);\n  }\n\n  details[open] > summary::before {\n    transform: rotate(0);\n  }\n\n  details > .content {\n    padding: 10px 0 0;\n  }\n`;\nconst Collapse = (_props: CollapseProps) => {\n  const { baseStyle } = theme;\n  const props = mergeProps({ autoplay: -1, children: [] }, _props);\n  const list = createMemo(() => [...props.children]);\n\n  return (\n    <>\n      <style textContent={block} />\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <details>\n        <summary>{props.title}</summary>\n        <div class=\"content\" part=\"content\">\n          <Index each={list()}>\n            {(item) => {\n              return <>{item()}</>;\n            }}\n          </Index>\n        </div>\n      </details>\n    </>\n  );\n};\n\nexport interface CollapseProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  title: JSXElement;\n  /** 内容 */\n  children: JSXElement[];\n}\nexport type CollapseElement = CustomElement<CollapseProps>;\n\ncustomElement<CollapseProps>(\n  'n-collapse',\n  {\n    class: void 0,\n    css: void 0,\n    title: void 0,\n    children: [],\n  },\n  (props, opt) => {\n    const el = opt.element;\n\n    createEffect(() => {\n      clearAttribute(el, ['css', 'title']);\n      el.replaceChildren();\n    });\n    return <Collapse {...props} />;\n  },\n);\nexport default Collapse;\n"],"names":["createEffect","createMemo","Index","mergeProps","css","customElement","clearAttribute","theme","block","style","Collapse","_props","baseStyle","props","autoplay","children","list","title","item","class","opt","el","element","replaceChildren"],"mappings":"iTAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,SAAAA,CAAK,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACvE,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAE9C,QAASC,kBAAAA,CAAc,KAAyB,iBAAkB,AAClE,QAAOC,GAASC,SAAAA,CAAK,KAAQ,UAAW,CAExC,IAAMC,EAAQL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDlB,CAAC,CACKM,EAAW,AAACC,IAChB,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAChBM,EAAQV,EAAW,CAAEW,SAAU,GAAIC,SAAU,EAAE,AAAC,EAAGJ,GACnDK,EAAOf,EAAW,IAAM,IAAIY,EAAME,QAAQ,CAAC,EAEjD,4CAEwBP,2DACAI,gDACAH,sEAERI,EAAMI,KAAK,QAElBf,qBAAYc,cACV,AAACE,KACUA,YAOxB,EAaAb,EACE,aACA,CACEc,MAAO,KAAK,EACZf,IAAK,KAAK,EACVa,MAAO,KAAK,EACZF,SAAU,EAAE,AACd,EACA,CAACF,EAAOO,KACN,IAAMC,EAAKD,EAAIE,OAAO,CAMtB,OAJAtB,EAAa,KACXM,EAAee,EAAI,CAAC,MAAO,QAAQ,EACnCA,EAAGE,eAAe,EACpB,KACQb,EAAaG,EACvB,EAEF,gBAAeH,CAAS"}

package/es/color-palette/style.js

@@ -114,7 +114,8 @@ import{css as r}from"@moneko/css";export const style=r`
   }
 
   .opacity {
-    background: linear-gradient(
+    background:
+      linear-gradient(
         to right,
         hsl(calc(var(--h)) 100% 50% / 0%),
         hsl(calc(var(--h)) 100% 50% / 100%)

package/es/color-palette/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/color-palette/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .palette {\n    --alpha-gradient: repeating-conic-gradient(#eee 0 25%, transparent 0 50%) 0 / 10px 10px;\n\n    inline-size: 100%;\n    box-sizing: border-box;\n    user-select: none;\n  }\n\n  .preview,\n  .preview::after,\n  .color i,\n  .color i::before {\n    border-radius: var(--border-radius);\n  }\n\n  .preview {\n    margin-inline-start: 6px;\n    inline-size: 46px;\n    min-block-size: 26px;\n    line-height: 1;\n    font-family: sans-serif;\n    text-align: center;\n    color: #fff;\n    cursor: pointer;\n    background: var(--alpha-gradient);\n\n    &::after {\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      background-color: var(--c);\n      box-shadow:\n        rgb(0 0 0 / 10%) 0 0 0 1px inset,\n        rgb(0 0 0 / 10%) 0 0 4px inset;\n      text-shadow: var(--text-shadow);\n      content: '';\n    }\n\n    &:hover::after {\n      font-size: 24px;\n      content: '⎘';\n    }\n\n    &[data-copy='success']::after {\n      font-size: 16px;\n      line-height: 26px;\n      content: '✓';\n    }\n  }\n\n  .form {\n    display: flex;\n    gap: 6px;\n  }\n\n  .input {\n    flex: 1;\n  }\n\n  .picker {\n    position: relative;\n    border-radius: 4px;\n    block-size: 150px;\n    background:\n      linear-gradient(to top, hsl(0deg 0% 0% / calc(var(--a))), transparent) 0 / 100%,\n      linear-gradient(\n          to left,\n          hsl(calc(var(--h)) 100% 50% / calc(var(--a))),\n          hsl(0deg 0% 100% / calc(var(--a)))\n        )\n        0 / 100%,\n      var(--alpha-gradient);\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n    user-select: none;\n    cursor: crosshair;\n\n    &:active {\n      opacity: 0.99;\n    }\n\n    &::after {\n      position: absolute;\n      inset-block-start: calc((100 - var(--v)) * 1%);\n      inset-inline-start: calc(var(--s) * 1%);\n      border-radius: 3px;\n      inline-size: 6px;\n      block-size: 6px;\n      pointer-events: none;\n      content: '';\n      transform: translate(-50%, -50%);\n      box-shadow:\n        inset 0 0 0 1px #fff,\n        0 0 1px rgb(0 0 0 / 20%),\n        inset 0 0 2.5px 0 rgb(0 0 0 / 20%);\n    }\n  }\n\n  .chooser {\n    display: flex;\n    padding: 8px 0;\n  }\n\n  .range {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    flex: 1;\n  }\n\n  .hue {\n    background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);\n  }\n\n  .opacity {\n    background: linear-gradient(\n        to right,\n        hsl(calc(var(--h)) 100% 50% / 0%),\n        hsl(calc(var(--h)) 100% 50% / 100%)\n      ),\n      var(--alpha-gradient);\n  }\n\n  .slider {\n    flex: 1;\n    display: block;\n    margin: 0;\n    border-radius: 5px;\n    inline-size: 100%;\n    block-size: 10px;\n    outline: 0;\n    cursor: pointer;\n    pointer-events: all;\n    appearance: none;\n\n    &::-webkit-slider-runnable-track {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      position: relative;\n      border-radius: 50%;\n      inline-size: 10px;\n      block-size: 10px;\n      background: #fff;\n      box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n      transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n      transform: scale(1.2);\n    }\n\n    &::-moz-range-thumb {\n      position: relative;\n      border: 0;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n      transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n      inline-size: 10px;\n      block-size: 10px;\n      transform: scale(1.2);\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n\n    &::-webkit-slider-thumb:active,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1.5);\n    }\n\n    &::-moz-range-thumb:active,\n    &:focus::-moz-range-thumb {\n      transform: scale(1.5);\n    }\n  }\n\n  .color {\n    display: flex;\n    padding-block-start: 8px;\n    gap: 5px 9px;\n    flex-wrap: wrap;\n\n    i {\n      position: relative;\n      border: 0;\n      font-size: 28px;\n      text-align: center;\n      background-color: var(--c, transparent);\n      outline: 0;\n      cursor: pointer;\n      inline-size: 20px;\n      block-size: 20px;\n      font-style: normal;\n      line-height: 17px;\n\n      &::before,\n      &::after {\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n        inline-size: 100%;\n        block-size: 100%;\n        content: '';\n      }\n\n      &::before {\n        z-index: -1;\n        background: var(--alpha-gradient);\n      }\n\n      &.eye-dropper::before {\n        content: '⍝';\n      }\n\n      &::after {\n        border-radius: inherit;\n        background-color: var(--c, transparent);\n        opacity: 0;\n        transition:\n          var(--transition-duration) transform var(--transition-timing-function),\n          var(--transition-duration) opacity var(--transition-timing-function);\n      }\n\n      &:hover::after {\n        transform: translate3d(2px, 2px, 0);\n        opacity: 0.3;\n      }\n    }\n  }\n`;\n\nexport const switchCss = css`\n  .switch {\n    block-size: 25px;\n    line-height: 25px;\n    float: inline-start;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n    inline-size: 46px;\n    font-size: 12px;\n    text-align: center;\n    color: var(--on-primary-selection);\n    background-color: var(--primary-selection);\n    text-transform: uppercase;\n    outline-color: var(--primary-outline);\n    transition-property: background-color, color, outline-color, border-radius, transform;\n    transition-timing-function: var(--transition-timing-function);\n    transition-duration: var(--transition-duration);\n\n    &:hover {\n      color: var(--primary-hover);\n    }\n\n    &:active {\n      color: var(--primary-active);\n      transform: scale(0.98);\n    }\n  }\n`;\n"],"names":["css","style","switchCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwOzB,CAAC,AAAC,AAEF,QAAO,MAAME,UAAYF,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B7B,CAAC,AAAC"}
+{"version":3,"sources":["components/color-palette/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .palette {\n    --alpha-gradient: repeating-conic-gradient(#eee 0 25%, transparent 0 50%) 0 / 10px 10px;\n\n    inline-size: 100%;\n    box-sizing: border-box;\n    user-select: none;\n  }\n\n  .preview,\n  .preview::after,\n  .color i,\n  .color i::before {\n    border-radius: var(--border-radius);\n  }\n\n  .preview {\n    margin-inline-start: 6px;\n    inline-size: 46px;\n    min-block-size: 26px;\n    line-height: 1;\n    font-family: sans-serif;\n    text-align: center;\n    color: #fff;\n    cursor: pointer;\n    background: var(--alpha-gradient);\n\n    &::after {\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      background-color: var(--c);\n      box-shadow:\n        rgb(0 0 0 / 10%) 0 0 0 1px inset,\n        rgb(0 0 0 / 10%) 0 0 4px inset;\n      text-shadow: var(--text-shadow);\n      content: '';\n    }\n\n    &:hover::after {\n      font-size: 24px;\n      content: '⎘';\n    }\n\n    &[data-copy='success']::after {\n      font-size: 16px;\n      line-height: 26px;\n      content: '✓';\n    }\n  }\n\n  .form {\n    display: flex;\n    gap: 6px;\n  }\n\n  .input {\n    flex: 1;\n  }\n\n  .picker {\n    position: relative;\n    border-radius: 4px;\n    block-size: 150px;\n    background:\n      linear-gradient(to top, hsl(0deg 0% 0% / calc(var(--a))), transparent) 0 / 100%,\n      linear-gradient(\n          to left,\n          hsl(calc(var(--h)) 100% 50% / calc(var(--a))),\n          hsl(0deg 0% 100% / calc(var(--a)))\n        )\n        0 / 100%,\n      var(--alpha-gradient);\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n    user-select: none;\n    cursor: crosshair;\n\n    &:active {\n      opacity: 0.99;\n    }\n\n    &::after {\n      position: absolute;\n      inset-block-start: calc((100 - var(--v)) * 1%);\n      inset-inline-start: calc(var(--s) * 1%);\n      border-radius: 3px;\n      inline-size: 6px;\n      block-size: 6px;\n      pointer-events: none;\n      content: '';\n      transform: translate(-50%, -50%);\n      box-shadow:\n        inset 0 0 0 1px #fff,\n        0 0 1px rgb(0 0 0 / 20%),\n        inset 0 0 2.5px 0 rgb(0 0 0 / 20%);\n    }\n  }\n\n  .chooser {\n    display: flex;\n    padding: 8px 0;\n  }\n\n  .range {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    flex: 1;\n  }\n\n  .hue {\n    background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);\n  }\n\n  .opacity {\n    background:\n      linear-gradient(\n        to right,\n        hsl(calc(var(--h)) 100% 50% / 0%),\n        hsl(calc(var(--h)) 100% 50% / 100%)\n      ),\n      var(--alpha-gradient);\n  }\n\n  .slider {\n    flex: 1;\n    display: block;\n    margin: 0;\n    border-radius: 5px;\n    inline-size: 100%;\n    block-size: 10px;\n    outline: 0;\n    cursor: pointer;\n    pointer-events: all;\n    appearance: none;\n\n    &::-webkit-slider-runnable-track {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      position: relative;\n      border-radius: 50%;\n      inline-size: 10px;\n      block-size: 10px;\n      background: #fff;\n      box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n      transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n      transform: scale(1.2);\n    }\n\n    &::-moz-range-thumb {\n      position: relative;\n      border: 0;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n      transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n      inline-size: 10px;\n      block-size: 10px;\n      transform: scale(1.2);\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n\n    &::-webkit-slider-thumb:active,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1.5);\n    }\n\n    &::-moz-range-thumb:active,\n    &:focus::-moz-range-thumb {\n      transform: scale(1.5);\n    }\n  }\n\n  .color {\n    display: flex;\n    padding-block-start: 8px;\n    gap: 5px 9px;\n    flex-wrap: wrap;\n\n    i {\n      position: relative;\n      border: 0;\n      font-size: 28px;\n      text-align: center;\n      background-color: var(--c, transparent);\n      outline: 0;\n      cursor: pointer;\n      inline-size: 20px;\n      block-size: 20px;\n      font-style: normal;\n      line-height: 17px;\n\n      &::before,\n      &::after {\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n        inline-size: 100%;\n        block-size: 100%;\n        content: '';\n      }\n\n      &::before {\n        z-index: -1;\n        background: var(--alpha-gradient);\n      }\n\n      &.eye-dropper::before {\n        content: '⍝';\n      }\n\n      &::after {\n        border-radius: inherit;\n        background-color: var(--c, transparent);\n        opacity: 0;\n        transition:\n          var(--transition-duration) transform var(--transition-timing-function),\n          var(--transition-duration) opacity var(--transition-timing-function);\n      }\n\n      &:hover::after {\n        transform: translate3d(2px, 2px, 0);\n        opacity: 0.3;\n      }\n    }\n  }\n`;\n\nexport const switchCss = css`\n  .switch {\n    block-size: 25px;\n    line-height: 25px;\n    float: inline-start;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n    inline-size: 46px;\n    font-size: 12px;\n    text-align: center;\n    color: var(--on-primary-selection);\n    background-color: var(--primary-selection);\n    text-transform: uppercase;\n    outline-color: var(--primary-outline);\n    transition-property: background-color, color, outline-color, border-radius, transform;\n    transition-timing-function: var(--transition-timing-function);\n    transition-duration: var(--transition-duration);\n\n    &:hover {\n      color: var(--primary-hover);\n    }\n\n    &:active {\n      color: var(--primary-active);\n      transform: scale(0.98);\n    }\n  }\n`;\n"],"names":["css","style","switchCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyOzB,CAAC,AAAC,AAEF,QAAO,MAAME,UAAYF,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B7B,CAAC,AAAC"}