neko-ui 2.9.6 → 2.9.8-beta.0

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

@@ -1,3 +1,4 @@
+export type JSXElement = JSX.Element | HTMLElement | Element | string | number | boolean | symbol | null;
 export interface BasicConfig {
     /** 组件状态
      * @default 'normal'
@@ -36,11 +37,11 @@ export declare enum Status {
 }
 export interface BaseOption {
     /** 图标 */
-    icon?: JSX.Element;
+    icon?: JSXElement;
     /** 值 */
     value?: string | number;
     /** 标题 */
-    label?: JSX.Element;
+    label?: 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":["export type JSXElement =\n  | JSX.Element\n  | HTMLElement\n  | Element\n  | string\n  | number\n  | boolean\n  | symbol\n  | null;\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;\n  /** 值 */\n  value?: string | number;\n  /** 标题 */\n  label?: 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":"IAsBYA,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,9 +34,10 @@ 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;
 }
 export type ButtonElement = CustomElement<ButtonProps>;
 declare function Button(_: ButtonProps): import("solid-js").JSX.Element;

package/es/button/index.js

@@ -1 +1 @@
-import{template as e}from"solid-js/web";import{mergeProps as t}from"solid-js/web";import"solid-js/web";import{insert as o}from"solid-js/web";import{effect as i}from"solid-js/web";import{createComponent as l}from"solid-js/web";let r=e("<style> "),s=e("<style>"),n=e('<span class="icon" part="icon">'),d=e('<span class="label" part="label">');import{createEffect as a,createMemo as c,createSignal as m,mergeProps as f,Show as p,splitProps as b}from"solid-js";import{Dynamic as u}from"solid-js/web";import h from"@moneko/common/lib/isFunction";import{css as g}from"@moneko/css";import{customElement as v}from"solid-element";import{clearAttribute as k}from"../basic-config";import w,{inline as j}from"../theme";import{style as y}from"./style";function C(e){let a;let{baseStyle:v}=w,[k,j]=b(f({size:"normal",type:"default"},e),["ghost","fill","circle","dashed","flat","link","danger","children","block","size","type","class","icon","css","disabled","tag"]),[C,z]=m(!1),x=c(()=>h(k.icon)?k.icon():k.icon);return[(()=>{let e=r(),t=e.firstChild;return i(()=>t.data=v()),e})(),(()=>{let e=s();return e.textContent=y,e})(),l(p,{get when(){return k.css},get children(){let e=r(),t=e.firstChild;return i(()=>t.data=g(k.css)),e}}),l(u,t({ref(e){let t=a;"function"==typeof t?t(e):a=e},get component(){return k.link?"a":k.tag||"button"},class:"btn",get classList(){return{[k.type]:!0,[k.size]:!0,danger:k.danger,block:k.block,fill:k.fill,circle:k.circle,flat:k.flat,dashed:k.dashed,ghost:k.ghost,link:k.link,disabled:k.disabled,without:C()}},part:"button",onClick:function(){k.disabled||z(!0)},onAnimationEnd:function(){z(!1)},get disabled(){return k.disabled},role:"button"},j,{get children(){return[l(p,{get when(){return k.icon},get children(){let e=n();return o(e,x),e}}),(()=>{let e=d();return o(e,()=>k.children),e})()]}}))]}v("n-button",{class:void 0,css:void 0,type:void 0,ghost:void 0,fill:void 0,circle:void 0,dashed:void 0,flat:void 0,disabled:void 0,block:void 0,link:void 0,danger:void 0,size:void 0,icon:void 0,tag:void 0},(e,t)=>{let o=t.element,i=f({css:o.css,children:[...o.childNodes.values()]},e);return a(()=>{k(o,["css"]),o.replaceChildren()}),[(()=>{let e=s();return e.textContent=j,e})(),l(C,i)]});export default C;
+import{template as e}from"solid-js/web";import{mergeProps as t}from"solid-js/web";import"solid-js/web";import{insert as i}from"solid-js/web";import{effect as o}from"solid-js/web";import{createComponent as l}from"solid-js/web";let r=e("<style> "),n=e("<style>"),s=e('<span class="icon" part="icon">'),d=e('<span class="label" part="label">');import{createEffect as a,createMemo as c,createSignal as m,Match as f,mergeProps as g,Show as u,splitProps as p,Switch as b}from"solid-js";import{Dynamic as h}from"solid-js/web";import v from"@moneko/common/lib/isFunction";import{css as k}from"@moneko/css";import{customElement as w}from"solid-element";import{clearAttribute as j}from"../basic-config";import y,{block as C,inline as z}from"../theme";import x from"./loading";import{style as A}from"./style";function E(e){let a;let{baseStyle:w}=y,[j,E]=p(g({size:"normal",type:"default"},e),["ghost","fill","circle","dashed","flat","link","danger","children","block","size","type","class","icon","css","disabled","tag","loading"]),[F,L]=m(!1),N=c(()=>v(j.icon)?j.icon():j.icon),P=c(()=>j.block?C:z);return[(()=>{let e=r(),t=e.firstChild;return o(()=>t.data=P()),e})(),(()=>{let e=r(),t=e.firstChild;return o(()=>t.data=w()),e})(),(()=>{let e=n();return e.textContent=A,e})(),l(u,{get when(){return j.css},get children(){let e=r(),t=e.firstChild;return o(()=>t.data=k(j.css)),e}}),l(h,t({ref(e){let t=a;"function"==typeof t?t(e):a=e},get component(){return j.link?"a":j.tag||"button"},class:"btn",get classList(){return{[j.type]:!0,[j.size]:!0,loading:j.loading,danger:j.danger,block:j.block,fill:j.fill,circle:j.circle,flat:j.flat,dashed:j.dashed,ghost:j.ghost,link:j.link,disabled:j.disabled,without:F()}},part:"button",onClick:function(){j.disabled||j.loading||L(!0)},onAnimationEnd:function(){L(!1)},get disabled(){return j.disabled||j.loading},role:"button"},E,{get children(){return[l(u,{get when(){return j.icon||j.loading},get children(){let e=s();return i(e,l(b,{get children(){return[l(f,{get when(){return j.icon},get children(){return N()}}),l(f,{get when(){return j.loading},get children(){return x()}})]}})),e}}),(()=>{let e=d();return i(e,()=>j.children),e})()]}}))]}w("n-button",{class:void 0,css:void 0,type:void 0,ghost:void 0,fill:void 0,circle:void 0,dashed:void 0,flat:void 0,disabled:void 0,block:void 0,link:void 0,danger:void 0,size:void 0,icon:void 0,tag:void 0,loading:void 0},(e,t)=>{let i=t.element,o=g({css:i.css,children:[...i.childNodes.values()]},e);return a(()=>{j(i,["css"]),i.replaceChildren()}),l(E,o)});export default E;

package/es/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/button/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, mergeProps, Show, splitProps } 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, { inline } from '../theme';\n\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}\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  ]);\n  let ref: HTMLButtonElement | undefined;\n  const [animating, setAnimating] = createSignal(false);\n\n  function handleClick() {\n    if (!local.disabled) {\n      setAnimating(true);\n    }\n  }\n  function handleAnimationEnd() {\n    setAnimating(false);\n  }\n  const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n\n  return (\n    <>\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          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}\n        role=\"button\"\n        {...other}\n      >\n        <Show when={local.icon}>\n          <span class=\"icon\" part=\"icon\">\n            {icon()}\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  },\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 (\n      <>\n        <style textContent={inline} />\n        <Button {...props} />\n      </>\n    );\n  },\n);\nexport default Button;\n"],"names":["createEffect","createMemo","createSignal","mergeProps","Show","splitProps","Dynamic","isFunction","css","customElement","clearAttribute","theme","inline","style","Button","_","ref","baseStyle","local","other","size","type","animating","setAnimating","icon","link","tag","danger","block","fill","circle","flat","dashed","ghost","disabled","without","children","class","opt","el","element","props","childNodes","values","replaceChildren"],"mappings":"oVAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAChG,QAASC,WAAAA,CAAO,KAAQ,cAAe,AACvC,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,AAEzC,QAASC,SAAAA,CAAK,KAAQ,SAAU,CA0ChC,SAASC,EAAOC,CAAc,MAqBxBC,EApBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGN,EAEhB,CAACO,EAAOC,EAAM,CAAGd,EADRF,EAAW,CAAEiB,KAAM,SAAUC,KAAM,SAAU,EAAGN,GACrB,CACxC,QACA,OACA,SACA,SACA,OACA,OACA,SACA,WACA,QACA,OACA,OACA,QACA,OACA,MACA,WACA,MACD,EAEK,CAACO,EAAWC,EAAa,CAAGrB,EAAa,CAAA,GAUzCsB,EAAOvB,EAAW,IAAOM,EAAWW,EAAMM,IAAI,EAAIN,EAAMM,IAAI,GAAKN,EAAMM,IAAI,EAEjF,0DAEwBP,gDACAJ,UACnBT,qBAAWc,EAAMV,GAAG,8DACCA,EAAIU,EAAMV,GAAG,UAElCF,kBACMU,4BAAAA,4BACME,EAAMO,IAAI,CAAG,IAAMP,EAAMQ,GAAG,EAAI,4CAEhC,CACT,CAACR,EAAMG,IAAI,CAAC,CAAE,CAAA,EACd,CAACH,EAAME,IAAI,CAAC,CAAE,CAAA,EACdO,OAAQT,EAAMS,MAAM,CACpBC,MAAOV,EAAMU,KAAK,CAClBC,KAAMX,EAAMW,IAAI,CAChBC,OAAQZ,EAAMY,MAAM,CACpBC,KAAMb,EAAMa,IAAI,CAChBC,OAAQd,EAAMc,MAAM,CACpBC,MAAOf,EAAMe,KAAK,CAClBR,KAAMP,EAAMO,IAAI,CAChBS,SAAUhB,EAAMgB,QAAQ,CACxBC,QAASb,GACX,yBAlCN,WACOJ,EAAMgB,QAAQ,EACjBX,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBL,EAAMgB,QAAQ,iBAEpBf,2BAEHf,qBAAWc,EAAMM,IAAI,sCAEjBA,uCAIFN,EAAMkB,QAAQ,aAKzB,CAEA3B,EACE,WACA,CACE4B,MAAO,KAAK,EACZ7B,IAAK,KAAK,EACVa,KAAM,KAAK,EACXY,MAAO,KAAK,EACZJ,KAAM,KAAK,EACXC,OAAQ,KAAK,EACbE,OAAQ,KAAK,EACbD,KAAM,KAAK,EACXG,SAAU,KAAK,EACfN,MAAO,KAAK,EACZH,KAAM,KAAK,EACXE,OAAQ,KAAK,EACbP,KAAM,KAAK,EACXI,KAAM,KAAK,EACXE,IAAK,KAAK,CACZ,EACA,CAACX,EAAGuB,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQtC,EACZ,CACEK,IAAK+B,EAAG/B,GAAG,CACX4B,SAAU,IAAIG,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACA5B,GAQF,OALAf,EAAa,KACXU,EAAe6B,EAAI,CAAC,MAAM,EAC1BA,EAAGK,eAAe,EACpB,yCAIwBhC,UACnBE,EAAW2B,GAGlB,EAEF,gBAAe3B,CAAO"}
+{"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/loading.d.ts

@@ -0,0 +1,2 @@
+declare const loadingIcon: () => SVGSVGElement;
+export default loadingIcon;

package/es/button/loading.js

@@ -0,0 +1 @@
+import e from"../icon";export default(()=>e({children:[{qualifiedName:"g",style:"transform-box:fill-box; transform-origin:center;",children:[{qualifiedName:"path",d:"M512 64c247.2 0 448 200.8 448 448h-64c0-212-172-384-384-384V64zm0 832c-212 0-384-172-384-384H64c0 247.2 200.8 448 448 448v-64z"},{qualifiedName:"animateTransform",attributeName:"transform",type:"rotate",form:"0",to:"360",dur:"1s",repeatCount:"indefinite"}]}]}));

package/es/button/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/button/loading.ts"],"sourcesContent":["import icon from '../icon';\n\nconst loadingIcon = () =>\n  icon({\n    children: [\n      {\n        qualifiedName: 'g',\n        style: 'transform-box:fill-box; transform-origin:center;',\n        children: [\n          {\n            qualifiedName: 'path',\n            d: 'M512 64c247.2 0 448 200.8 448 448h-64c0-212-172-384-384-384V64zm0 832c-212 0-384-172-384-384H64c0 247.2 200.8 448 448 448v-64z',\n          },\n          {\n            qualifiedName: 'animateTransform',\n            attributeName: 'transform',\n            type: 'rotate',\n            form: '0',\n            to: '360',\n            dur: '1s',\n            repeatCount: 'indefinite',\n          },\n        ],\n      },\n    ],\n  });\n\nexport default loadingIcon;\n"],"names":["icon","children","qualifiedName","style","d","attributeName","type","form","to","dur","repeatCount"],"mappings":"AAAA,OAAOA,MAAU,SAAU,AA2B3B,eAzBoB,CAAA,IAClBA,EAAK,CACHC,SAAU,CACR,CACEC,cAAe,IACfC,MAAO,mDACPF,SAAU,CACR,CACEC,cAAe,OACfE,EAAG,gIACL,EACA,CACEF,cAAe,mBACfG,cAAe,YACfC,KAAM,SACNC,KAAM,IACNC,GAAI,MACJC,IAAK,KACLC,YAAa,YACf,EACD,AACH,EACD,AACH,EAAC,CAEwB"}

package/es/button/style.js

@@ -16,7 +16,8 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
     }
   `}export const style=o`
   .btn,
-  .label {
+  .label,
+  .icon {
     transition-duration: var(--transition-duration);
   }
 
@@ -30,9 +31,17 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
     transition-property: color;
   }
 
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    color: inherit;
+    transition-property: color;
+  }
+
   .fill {
     &:not(.disabled, .default) {
-      .label {
+      .label,
+      .icon {
         color: #fff !important;
       }
 
@@ -47,12 +56,14 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
   }
 
   .fill.danger.default {
-    .label {
+    .label,
+    .icon {
       color: #fff !important;
     }
   }
 
   .btn {
+    position: relative;
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -70,21 +81,24 @@ 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;
+    transition-property: color, background-color, border-color, width, height, transform, padding,
+      opacity;
+    transition-timing-function: linear;
     touch-action: manipulation;
     box-sizing: border-box;
     user-select: none;
     outline: none;
 
     &:has(.icon) {
-      padding: 4px 10px;
+      padding: 0 10px;
     }
 
     &:not(.disabled) {
       &:active {
         transform: scale(0.98);
 
-        .label {
+        .label,
+        .icon {
           color: var(--btn-active-color);
         }
 
@@ -107,11 +121,18 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
       }
 
       &:hover .label,
-      &:focus .label {
+      &:focus .label,
+      &:hover .icon,
+      &:focus .icon {
         color: var(--btn-hover-color);
       }
     }
 
+    &.loading {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+
     &.disabled {
       --btn-color: var(--disable-color);
       --btn-bg: var(--disable-bg);
@@ -133,7 +154,7 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
     font-size: var(--font-size-xs);
 
     &:has(.icon) {
-      padding: 4px 5px;
+      padding: 0 5px;
     }
   }
 
@@ -144,7 +165,7 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
     gap: 4px;
 
     &:has(.icon) {
-      padding: 4px 12px;
+      padding: 0 12px;
     }
   }
 
@@ -205,6 +226,7 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
   }
 
   .block {
+    display: flex;
     inline-size: 100%;
   }
 

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    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  .fill {\n    &:not(.disabled, .default) {\n      .label {\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      color: #fff !important;\n    }\n  }\n\n  .btn {\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;\n    touch-action: manipulation;\n    box-sizing: border-box;\n    user-select: none;\n    outline: none;\n\n    &:has(.icon) {\n      padding: 4px 10px;\n    }\n\n    &:not(.disabled) {\n      &:active {\n        transform: scale(0.98);\n\n        .label {\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        color: var(--btn-hover-color);\n      }\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: 4px 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: 4px 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    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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+IvB,EAAEC,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8ExB,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: 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"}

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":"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"}

package/es/code/copy-icon.d.ts

@@ -0,0 +1,4 @@
+export declare const CopyIcon: (opt: {
+    class: string;
+    onClick: VoidFunction;
+}) => SVGSVGElement;

package/es/code/copy-icon.js

@@ -0,0 +1 @@
+import c from"../icon";export const CopyIcon=a=>{let s=c({class:a.class,"aria-label":"copy",children:[{qualifiedName:"path",d:"M672 832H224c-52.928 0-96-43.072-96-96V160c0-52.928 43.072-96 96-96h448c52.928 0 96 43.072 96 96v576c0 52.928-43.072 96-96 96zM224 128c-17.632 0-32 14.368-32 32v576c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V160c0-17.632-14.336-32-32-32H224z"},{qualifiedName:"path",d:"M800 960H320c-17.664 0-32-14.304-32-32s14.336-32 32-32h480c17.664 0 32-14.336 32-32V256c0-17.664 14.304-32 32-32s32 14.336 32 32v608c0 52.928-43.072 96-96 96zM544 320H288c-17.664 0-32-14.336-32-32s14.336-32 32-32h256c17.696 0 32 14.336 32 32s-14.304 32-32 32zm64 160H288.032c-17.664 0-32-14.336-32-32s14.336-32 32-32H608c17.696 0 32 14.336 32 32s-14.304 32-32 32z"},{qualifiedName:"path",d:"M608 640H288c-17.664 0-32-14.304-32-32s14.336-32 32-32h320c17.696 0 32 14.304 32 32s-14.304 32-32 32z"}]});return s.onclick=a.onClick,s};

package/es/code/copy-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/code/copy-icon.tsx"],"sourcesContent":["import icon from '../icon';\n\nexport const CopyIcon = (opt: { class: string; onClick: VoidFunction }) => {\n  const copy = icon({\n    class: opt.class,\n    'aria-label': 'copy',\n    children: [\n      {\n        qualifiedName: 'path',\n        d: 'M672 832H224c-52.928 0-96-43.072-96-96V160c0-52.928 43.072-96 96-96h448c52.928 0 96 43.072 96 96v576c0 52.928-43.072 96-96 96zM224 128c-17.632 0-32 14.368-32 32v576c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V160c0-17.632-14.336-32-32-32H224z',\n      },\n      {\n        qualifiedName: 'path',\n        d: 'M800 960H320c-17.664 0-32-14.304-32-32s14.336-32 32-32h480c17.664 0 32-14.336 32-32V256c0-17.664 14.304-32 32-32s32 14.336 32 32v608c0 52.928-43.072 96-96 96zM544 320H288c-17.664 0-32-14.336-32-32s14.336-32 32-32h256c17.696 0 32 14.336 32 32s-14.304 32-32 32zm64 160H288.032c-17.664 0-32-14.336-32-32s14.336-32 32-32H608c17.696 0 32 14.336 32 32s-14.304 32-32 32z',\n      },\n      {\n        qualifiedName: 'path',\n        d: 'M608 640H288c-17.664 0-32-14.304-32-32s14.336-32 32-32h320c17.696 0 32 14.304 32 32s-14.304 32-32 32z',\n      },\n    ],\n  });\n\n  copy.onclick = opt.onClick;\n  return copy;\n};\n"],"names":["icon","CopyIcon","opt","copy","class","children","qualifiedName","d","onclick","onClick"],"mappings":"AAAA,OAAOA,MAAU,SAAU,AAE3B,QAAO,MAAMC,SAAW,AAACC,IACvB,IAAMC,EAAOH,EAAK,CAChBI,MAAOF,EAAIE,KAAK,CAChB,aAAc,OACdC,SAAU,CACR,CACEC,cAAe,OACfC,EAAG,8PACL,EACA,CACED,cAAe,OACfC,EAAG,6WACL,EACA,CACED,cAAe,OACfC,EAAG,uGACL,EACD,AACH,GAGA,OADAJ,EAAKK,OAAO,CAAGN,EAAIO,OAAO,CACnBN,CACT,CAAE"}

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 | {
@@ -20,9 +21,11 @@ export interface CodeProps {
     edit?: boolean;
     /** 开启代码块工具条 */
     toolbar?: boolean;
+    /** 工具条上显示的文字 */
+    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{mergeProps as r}from"solid-js/web";import{insert as n}from"solid-js/web";import{effect as l}from"solid-js/web";import{delegateEvents as s}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{classList as d}from"solid-js/web";import{addEventListener as c}from"solid-js/web";let h=o("<style> "),m=o("<style>"),g=o('<div class="toolbar"><button class="toolbar-copy" aria-label="copy">'),u=o("<pre><code>");import{createEffect as f,createMemo as p,createResource as v,createSignal as b,createUniqueId as w,mergeProps as C,onCleanup as y,Show as S,untrack as k}from"solid-js";import j from"@moneko/common/lib/isFunction";import $ from"@moneko/common/lib/setClipboard";import{css as x}from"@moneko/css";import{customElement as E}from"solid-element";import{clearAttribute as P}from"../basic-config";import A from"../theme";import{darkCss as _,lightCss as z,style as H}from"./style";function T(o){let r,s;let{isDark:C}=A,E=/%[0-9A-Fa-f]{2}/,P=w(),[T,W]=b(""),[F,L]=b();function R(){var e;return e=function*(){return window.Prism?(window.Prism.disableWorkerMessageHandler=!0,window.Prism.manual=!0,window.Prism):(yield import("../prism")).default},(R=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[I]=v("prism",function(){return R.apply(this,arguments)}),M=p(()=>{var t;return null==(t=o.language)?void 0:t.split(" ").pop()});function O(){$(k(T),r)}f(()=>{let t=o.code||"";E.test(t)&&(t=decodeURIComponent(t)),r.normalize(),t!==r.textContent&&W(t)});let U=function(t){t.target.normalize();let e=t.target.textContent;q(o.language,e,!0),j(o.onChange)&&o.onChange(e)};function q(t="markup",e,o,i={}){s&&(clearTimeout(s),s=void 0);let n=I();e&&n&&(s=setTimeout(()=>{if(clearTimeout(s),CSS.highlights){o&&CSS.highlights.forEach((t,e)=>{e.startsWith(P)&&t.clear()});let l=t.split(" "),s=n.languages[l[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=P+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}(r,n.tokenize(e,s),i),l.length>1||"git"===l[0]?q(l[1],e,!1,i):L(Object.values(i).join(""))}else throw Error("不支持 CSS Highlights");s=void 0},0))}return f(()=>{q(o.language,T(),!0)}),y(()=>{if(CSS.highlights)for(let t of CSS.highlights.keys())t.startsWith(P)&&CSS.highlights.delete(t)}),[(()=>{let t=h(),e=t.firstChild;return l(()=>e.data=C()?_:z),t})(),(()=>{let t=h(),e=t.firstChild;return l(()=>e.data=F()),t})(),(()=>{let t=m();return t.textContent=H,t})(),a(S,{get when(){return o.css},get children(){let t=h(),e=t.firstChild;return l(()=>e.data=x(o.css)),t}}),(()=>{let t=u(),s=t.firstChild,h=r;return n(t,a(S,{get when(){return o.toolbar},get children(){let t=g();return c(t.firstChild,"click",O,!0),l(()=>i(t,"data-language",M())),t}}),s),c(s,"input",U,!0),"function"==typeof h?e(h,s):r=s,i(s,"spellcheck",!1),n(s,T),l(e=>{let r={[`language-${o.language}`]:!!o.language,"not-toolbar":!o.toolbar,[o.class]:!o.edit},n=o.edit;return e._v$=d(t,r,e._v$),n!==e._v$2&&i(s,"contenteditable",e._v$2=n),e},{_v$:void 0,_v$2:void 0}),t})()]}E("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},(t,e)=>{let{baseStyle:o}=A,i=e.element,n=C({code:i.textContent,css:i.css,onChange(t){i.dispatchEvent(new CustomEvent("change",{detail:t}))}},t);return f(()=>{P(i,["css","code"]),i.replaceChildren()}),[(()=>{let t=h(),e=t.firstChild;return l(()=>e.data=o()),t})(),a(T,r({language:"atom"},n))]});export default T;s(["click","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.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"]);

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 { 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  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.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            <button class=\"toolbar-copy\" aria-label=\"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  },\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']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={baseStyle()} />\n        <Code language={'atom'} {...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","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":"wpBAAA,QACEA,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,kBAAAA,CAAc,CACdC,gBAAAA,CAAY,CACZC,kBAAAA,CAAc,CAEdC,cAAAA,CAAU,CACVC,aAAAA,CAAS,CACTC,QAAAA,CAAI,CACJC,WAAAA,CAAO,KACF,UAAW,AAClB,QAASC,MAAgC,+BAAiB,AAA1D,QAAqBC,MAAoB,iCAAiB,AAC1D,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,MAAW,UAAW,AAE7B,QAASC,WAAAA,CAAO,CAAEC,YAAAA,CAAQ,CAAEC,SAAAA,CAAK,KAAQ,SAAU,CAgEnD,SAASC,EAAKC,CAAgB,MAExBC,EACAC,EAFJ,GAAM,CAAEC,OAAAA,CAAM,CAAE,CAAGR,EAGbS,EAAU,kBACVC,EAAKpB,IACL,CAACqB,EAAMC,EAAQ,CAAGvB,EAAqB,IACvC,CAACwB,EAAcC,EAAgB,CAAGzB,aAEzB0B,mBAAf,mBACE,AAAKC,OAAOC,KAAK,EAGjBD,OAAOC,KAAK,CAACC,2BAA2B,CAAG,CAAA,EAC3CF,OAAOC,KAAK,CAACE,MAAM,CAAG,CAAA,EACfH,OAAOC,KAAK,EAJV,AAAC,CAAA,MAAM,MAAM,CAAC,WAAU,EAAGG,OAAO,AAK7C,GAPeL,qMAQf,GAAM,CAACM,EAAQ,CAAGjC,EAAe,0BARlB2B,0BASTO,EAAQnC,EAAW,SAAMkB,gBAAAA,EAAAA,EAAMkB,QAAQ,SAAdlB,EAAgBmB,KAAK,CAAC,KAAKC,GAAG,KAc7D,SAASC,IACP9B,EAAaF,EAAQiB,GAAOL,EAC9B,CAdApB,EAAa,KACX,IAAIyC,EAAQtB,EAAMM,IAAI,EAAI,GAEtBF,EAAQmB,IAAI,CAACD,IACfA,CAAAA,EAAQE,mBAAmBF,EAAK,EAElCrB,EAAOwB,SAAS,GACZH,IAAUrB,EAAOyB,WAAW,EAC9BnB,EAAQe,EAEZ,GAKA,IAAMK,EAA8D,SAAUC,CAAC,EAC7EA,EAAEC,MAAM,CAACJ,SAAS,GAClB,IAAMK,EAAOF,EAAEC,MAAM,CAACH,WAAW,CAEjCK,EAAO/B,EAAMkB,QAAQ,CAAEY,EAAM,CAAA,GACzBxC,EAAWU,EAAMgC,QAAQ,GAC3BhC,EAAMgC,QAAQ,CAACF,EAEnB,EAgEA,SAASC,EACPb,EAAqB,QAAoB,CACzCe,CAAoB,CACpBC,CAAe,CACfC,EAAU,CAAC,CAAC,EAERjC,IACFkC,aAAalC,GACbA,EAAQ,KAAK,GAEf,IAAMU,EAAQI,IAETiB,GAAUrB,GACfV,CAAAA,EAAQmC,WAAW,KAEjB,GADAD,aAAalC,GACToC,IAAIC,UAAU,CAAE,CACdL,GACFI,IAAIC,UAAU,CAACC,OAAO,CAAC,CAACC,EAAWC,KAC7BA,EAAIC,UAAU,CAACtC,IACjBoC,EAAUP,KAAK,EAEnB,GAEF,IAAMU,EAAW1B,EAASC,KAAK,CAAC,KAC9B0B,EAAUjC,EAAMkC,SAAS,CAACF,CAAQ,CAAC,EAAE,CAAC,CAEpCC,GACFE,AAvER,SAASA,EACPC,CAAkB,CAClBC,CAAqB,CACrBC,CAAiC,CACjCC,EAAQ,CAAC,EAET,IAAIC,EAAMD,EAEV,GAAIE,MAAMC,OAAO,CAACL,GAAW,CAC3B,IAAK,IAAIM,EAAI,EAAGC,EAAMP,EAASQ,MAAM,CAAEF,EAAIC,EAAKD,IAAK,CACnD,IAAMG,EAAQT,CAAQ,CAACM,EAAE,CAEzB,GAAI,AAAiB,UAAjB,OAAOG,EAAoB,CAC7BN,GAAOM,EAAMD,MAAM,CACnB,QACF,CACAL,EAAML,EAAYC,EAAIU,EAAOR,EAAWE,EAC1C,CACA,OAAOA,CACT,CACA,GAAI,AAAoB,UAApB,OAAOH,GAAyBA,EAASU,IAAI,EAC3CX,EAAGY,UAAU,CAAE,KACFX,EAAf,IAAMS,EAAQ,AAACT,CAAAA,OAAAA,EAAAA,EAASY,KAAK,EAAdZ,EAAkBA,EAASU,IAAI,AAAD,EAAGG,QAAQ,GAClDpB,EAAMrC,EAAKqD,EACXK,EAAQ,IAAIC,MAEd,CAAC,UAAW,WAAW,CAACC,QAAQ,CAACP,GAEnCK,EAAMG,QAAQ,CAAClB,EAAGY,UAAU,CAAER,EAAM,GAEpCW,EAAMG,QAAQ,CAAClB,EAAGY,UAAU,CAAER,GAE5BC,MAAMC,OAAO,CAACL,EAASkB,OAAO,EAChCf,EAAML,EAAYC,EAAIC,EAASkB,OAAO,CAAEjB,EAAWE,GACd,UAA5B,OAAOH,EAASkB,OAAO,EAChCf,CAAAA,GAAOH,EAASkB,OAAO,CAACV,MAAM,AAAD,EAE/BM,EAAMK,MAAM,CAACpB,EAAGY,UAAU,CAAER,GAC5BiB,AAxDN,SACE3B,CAAW,CACXgB,CAAa,CACbK,CAAoB,CACpBb,CAAiC,EAEjC,IAAMT,EAAYH,IAAIC,UAAU,CAAC+B,GAAG,CAAC5B,GAEjCD,EACFA,EAAU8B,GAAG,CAACR,GAEdzB,IAAIC,UAAU,CAACiC,GAAG,CAAC9B,EAAK,IAAI+B,YAAYF,GAAG,CAACR,IAEvB,KAAK,IAAxBb,CAAS,CAACR,EAAI,EAChBQ,CAAAA,CAAS,CAACR,EAAI,CACZ,CAAC,YAAY,EAAEA,EAAI,cAAc,EAAEgB,EAAM,yBAAyB,EAAEA,EAAM,2BAA2B,EAAEA,EAAM,oCAAoC,EAAEA,EAAM,8CAA8C,EAAEA,EAAM,+CAA+C,EAAEA,EAAM,gBAAgB,CAAC,AAAD,CAE5R,EAuCiBhB,EAAKgB,EAAOK,EAAOb,EAChC,CAGF,OAAOE,CACT,EA4BoBnD,EAAQW,EAAMqC,QAAQ,CAAChB,EAAOY,GAAUV,GAElDS,EAASa,MAAM,CAAG,GAAKb,AAAgB,QAAhBA,CAAQ,CAAC,EAAE,CACpCb,EAAOa,CAAQ,CAAC,EAAE,CAAEX,EAAO,CAAA,EAAOE,GAElC1B,EAAgBiE,OAAOC,MAAM,CAACxC,GAASyC,IAAI,CAAC,IAEhD,MACE,MAAMC,MAAM,sBAEd3E,EAAQ,KAAK,CACf,EAAG,EAAC,CACN,CAcA,OAbArB,EAAa,KACXkD,EAAO/B,EAAMkB,QAAQ,CAAEZ,IAAQ,CAAA,EACjC,GACAnB,EAAU,KACR,GAAImD,IAAIC,UAAU,CAChB,IAAK,IAAMG,KAAOJ,IAAIC,UAAU,CAACuC,IAAI,GAC/BpC,EAAIC,UAAU,CAACtC,IACjBiC,IAAIC,UAAU,CAACwC,MAAM,CAACrC,EAI9B,uDAIwBvC,IAAWP,EAAUC,4DACrBW,gDACAV,UACnBV,qBAAWY,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,yCActBS,eALVb,qBAAWY,EAAMgF,OAAO,yDAEmC3D,gCADtBJ,0BAIuCU,kCAAlE1B,qBAAkD,CAAA,OAC1DK,eAZQ,CACT,CAAC,CAAC,SAAS,EAAEN,EAAMkB,QAAQ,CAAC,CAAC,CAAC,CAAE,CAAC,CAAClB,EAAMkB,QAAQ,CAChD,cAAe,CAAClB,EAAMgF,OAAO,CAC7B,CAAChF,EAAMiF,KAAK,CAAE,CAAE,CAACjF,EAAMkF,IAAI,AAC7B,IAOqClF,EAAMkF,IAAI,0GAMvD,CAEAzF,EACE,SACA,CACEwF,MAAO,KAAK,EACZ3E,KAAM,KAAK,EACXY,SAAU,KAAK,EACfiE,SAAU,KAAK,EACfD,KAAM,KAAK,EACXF,QAAS,KAAK,EACdxF,IAAK,KAAK,EACVwC,SAAU,KAAK,CACjB,EACA,CAACoD,EAAGC,KACF,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAG3F,EAChBqD,EAAKqC,EAAIE,OAAO,CAChBvF,EAAQd,EACZ,CACEoB,KAAM0C,EAAGtB,WAAW,CACpBlC,IAAKwD,EAAGxD,GAAG,CACXwC,SAASwD,CAAW,EAClBxC,EAAGyC,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAJ,GAOF,OAJAvG,EAAa,KACXa,EAAesD,EAAI,CAAC,MAAO,OAAO,EAClCA,EAAG4C,eAAe,EACpB,uDAGwBN,aACnBvF,cAAe,QAAYC,IAGlC,EAEF,gBAAeD,CAAK"}
+{"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;\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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"}

package/es/code/style.js

@@ -10,7 +10,7 @@ import{css as o}from"@moneko/css";export const style=o`
   }
 
   .toolbar::after,
-  .toolbar-copy::after,
+  .toolbar-copy,
   pre,
   code {
     transition-duration: var(--transition-duration);
@@ -145,30 +145,21 @@ import{css as o}from"@moneko/css";export const style=o`
     z-index: 3;
     border: none;
     padding: 0;
+    font-size: var(--font-size, 14px);
+    color: var(--text-color);
     background: none;
     outline: none;
     cursor: pointer;
-    inset-block-start: 0;
-    inset-inline-end: 8px;
+    inset-block-start: 5px;
+    inset-inline-end: 5px;
   }
 
-  pre > .toolbar > .toolbar-copy:active {
-    transform: scale(0.95);
-  }
-
-  .toolbar > .toolbar-copy::after {
-    display: block;
-    font-size: 24px;
-    font-family: sans-serif;
-    color: var(--text-color);
-    user-select: none;
-    content: '⎘';
-    line-height: 24px;
-    transition-property: color, transform;
+  .toolbar > .toolbar-copy:hover {
+    color: var(--primary-color, #5794ff);
   }
 
-  .toolbar > .toolbar-copy:hover::after {
-    color: var(--primary-color, #5794ff);
+  pre > .toolbar > .toolbar-copy:active {
+    transform: scale(0.95);
   }
 
   .not-toolbar > code {