neko-ui 2.8.21 → 2.8.23

package/es/popover/examples/context-menu.md

@@ -0,0 +1,58 @@
+---
+title: 右键触发
+description: 将 `trigger` 为 `contextMenu`，将可以通过右键触发提示框显示
+order: 3
+---
+
+```html
+<n-popover trigger="contextMenu" style="width: 100%;">
+  <div style="width: 100%;opacity: 0.4;">右键点我</div>
+</n-popover>
+<script>
+  const el = container.querySelector('n-popover');
+  const c = document.createElement('a');
+
+  c.style.color = 'red';
+  c.textContent = '右键触发';
+  el.content = c;
+  el.css = `.popover {
+      display: block;
+      width: 100%;
+      height: 150px;
+      background-color: var(--disable-bg);
+      border-radius: 8px;
+      line-height: 150px;
+      text-align: center;
+      font-size: x-large;
+    }`;
+</script>
+```
+
+```jsx
+<n-popover
+  content={<a style="color: red;">右键触发</a>}
+  style={{ width: '100%' }}
+  trigger="contextMenu"
+  css={`
+    .popover {
+      display: block;
+      width: 100%;
+      height: 150px;
+      background-color: var(--disable-bg);
+      border-radius: 8px;
+      line-height: 150px;
+      text-align: center;
+      font-size: x-large;
+    }
+  `}
+>
+  <div
+    style={{
+      width: '100%',
+      opacity: 0.4,
+    }}
+  >
+    右键点我
+  </div>
+</n-popover>
+```

package/es/popover/examples/controlled.md

@@ -0,0 +1,47 @@
+---
+title: 受控
+description: 通过指定 `open` 属性来控制弹出
+order: 4
+---
+
+```html
+<n-popover
+  arrow="true"
+  trigger="click"
+  content="这是一个受控的popover, 通过修改 `open` 属性来控制弹出"
+  >受控</n-popover
+>
+<n-switch checked-text="打开" un-checked-text="关闭"></n-switch>
+<script>
+  const cl = container.querySelector('n-switch');
+  const el = container.querySelector('n-popover');
+
+  cl.onchange = function (e) {
+    el.open = e.detail;
+  };
+</script>
+```
+
+```jsx
+const [open, setOpen] = createSignal(false);
+
+render(
+  <>
+    <n-switch
+      checked-text="打开"
+      un-checked-text="关闭"
+      onChange={(e) => {
+        setOpen(e.detail);
+      }}
+    />
+    <n-popover
+      arrow
+      open={open}
+      content="这是一个受控的popover, 通过修改 `open` 属性来控制弹出"
+      trigger="click"
+    >
+      受控
+    </n-popover>
+  </>
+);
+```

package/es/popover/index.js

@@ -1,2 +1,2 @@
-var t,e;function o(){return(o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t}).apply(this,arguments)}import{use as n}from"solid-js/web";import{template as r}from"solid-js/web";import{spread as i}from"solid-js/web";import{mergeProps as l}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{effect as p}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let c=r("<style> "),u=r("<style>"),m=r("<span>"),g=r("<div>");import{Show as f,createEffect as h,createMemo as v,createSignal as w,mergeProps as b,onCleanup as C,onMount as x,splitProps as y}from"solid-js";import j from"@moneko/common/lib/isElementInside";import M from"@moneko/common/lib/isEqual";import k from"@moneko/common/lib/isFunction";import L from"@moneko/common/lib/passiveSupported";import{css as O,cx as E}from"@moneko/css";import{customElement as P}from"solid-element";import{Portal as T}from"solid-js/web";import{popoverCss as R,portalCss as $}from"./style";import W from"../empty";import S from"../theme";export var TriggerOption;(t=TriggerOption||(TriggerOption={})).hover="hover",t.click="click",t.contextMenu="contextMenu",t.none="none";export var Placement;function z(t){let e,r,P,z;let{isDark:H,baseStyle:I}=S,[B]=y(b({trigger:"hover"},t),["class","css","popupClass","popupCss","size","trigger","open","disabled","onOpenChange","dropdownMatchSelectWidth","destroyInactive","arrow","placement","getPopupContainer","children","content"]),[A,D]=w(null),[q,F]=w({}),[N,X]=w(!1),[Y,G]=w("");function J(t){B.disabled||(B.onOpenChange&&B.onOpenChange(t),void 0===B.open&&D(t))}function K(){!1===A()&&(D(null),J(null))}function Q(t){clearTimeout(P),P=setTimeout(()=>{var o;if(clearTimeout(P),(null==(o=t.target)?void 0:o.getAttribute("handle-closed"))==="false")return;let n=j(t.target,e);(A()&&!n||n&&"mousedown"!==t.type)&&J(!1)},"hover"===B.trigger?300:0)}h(()=>{void 0!==B.open&&D(B.open)}),h(()=>{A()&&B.dropdownMatchSelectWidth&&r&&G(`.portal {width: ${r.offsetWidth}px;}`)});let U=function(t){clearTimeout(z),z=setTimeout(()=>{if(clearTimeout(z),!e||!r||!t&&"contextMenu"===B.trigger)return;if((null==t?void 0:t.type)==="scroll"&&"contextMenu"===B.trigger){J(!1);return}let o=r.getBoundingClientRect(),n=e.getBoundingClientRect(),i=n.width/2-o.width/2,l=window.innerHeight-o.bottom,s=B.placement,p=!(null==s?void 0:s.startsWith("top"))&&l>.8*e.offsetHeight&&l>o.top||(null==s?void 0:s.startsWith("bottom")),a=B.arrow?8:4,d={};switch(B.placement){case"bottomLeft":case"left":case"topLeft":d.left=o.left,d["--x"]=-n.width/2+16;break;case"bottomRight":case"right":case"topRight":d.left=o.right-n.width,d["--x"]=n.width/2-16;break;default:d.left=Math.abs(i>o.left?o.left:o.left-i),d["--x"]=-(d.left-o.left+i)}p?d.top=o.bottom+a:d.bottom=window.innerHeight-o.top+a,F(t=>M(t,d)?t:d),X(t=>!p===t?t:!p)},32)};function V(t){clearTimeout(P),t.stopPropagation(),"contextMenu"===B.trigger&&"contextmenu"===t.type&&(t.preventDefault(),F(n=>o({},n,{left:t.clientX,top:t.clientY,"--x":-((null==e?void 0:e.getBoundingClientRect().width)||0)/2+16}))),J(!0)}let Z=v(()=>k(B.getPopupContainer)?B.getPopupContainer(r):document.body),_=v(()=>{let t={},e={click:"onMouseDown",hover:"onMouseEnter",contextMenu:"onContextMenu",none:void 0}[B.trigger],o={hover:"onMouseLeave",click:void 0,contextMenu:void 0,none:void 0}[B.trigger];return Object.assign(t,e&&{[e]:V},o&&{[o]:Q}),t}),tt=v(()=>{let t=q();return`.portal {${Object.keys(t).map(e=>`${e}:${t[e]}px;`).join("")}z-index: 1;}`}),te=v(()=>E("portal",B.arrow&&"arrow",`${A()?"in":"out"}-${N()?"up":"down"}`,B.size,B.popupClass)),to=v(()=>`:host {--popover-bg: ${H()?"#1f1f1f":"var(--component-bg)"};--popover-shadow-color: rgb(0 0 0 / 5%);}`);return h(()=>{A()&&(U(),window.addEventListener("scroll",U,{passive:L})),C(()=>{window.removeEventListener("scroll",U,!1)})}),x(()=>{"none"!==B.trigger&&document.documentElement.addEventListener("mousedown",Q,!1)}),C(()=>{clearTimeout(P),document.documentElement.removeEventListener("mousedown",Q,!1)}),[(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=I()),t})(),(()=>{let t=u();return t.textContent=R,t})(),a(f,{get when(){return B.css},get children(){let t=c(),e=t.firstChild;return p(()=>e.data=O(B.css)),t}}),(()=>{let t=m(),e=r;return"function"==typeof e?n(e,t):r=t,i(t,l({get class(){return E("popover",B.size,B.class)}},_),!1,!0),s(t,()=>B.children),t})(),a(f,{get when(){return null!==A()||!B.destroyInactive},get children(){return a(T,{useShadow:!0,get mount(){return Z()},get children(){return[(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=I()),t})(),(()=>{let t=u();return t.textContent=$,t})(),(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=to()),t})(),(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=tt()),t})(),(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=Y()),t})(),a(f,{get when(){return B.popupCss},get children(){let t=c(),e=t.firstChild;return p(()=>e.data=O(B.popupCss)),t}}),(()=>{let t=g(),o=e;return d(t,"animationend",K),"function"==typeof o?n(o,t):e=t,i(t,l({get class(){return te()}},_),!1,!0),s(t,a(f,{get when(){return B.content},get fallback(){return a(W,{})},get children(){return a(f,{get when(){return"string"==typeof B.content},get fallback(){return B.content},get children(){let t=g();return p(()=>t.innerHTML=B.content),t}})}})),t})()]}})}})]}(e=Placement||(Placement={})).bottomLeft="bottomLeft",e.bottom="bottom",e.bottomRight="bottomRight",e.topLeft="topLeft",e.top="top",e.topRight="topRight",e.left="left",e.right="right";export const defaultProps={class:void 0,css:void 0,content:void 0,getPopupContainer:void 0,trigger:void 0,open:void 0,onOpenChange:void 0,popupClass:void 0,popupCss:void 0,destroyInactive:!0,disabled:void 0,arrow:void 0,placement:void 0,dropdownMatchSelectWidth:void 0};P("n-popover",defaultProps,(t,e)=>{let o=e.element,n=b({onOpenChange(t){o.dispatchEvent(new CustomEvent("openchange",{detail:t}))},children:[...o.childNodes.values()]},t);return h(()=>{o.removeAttribute("css")}),a(z,n)});export default z;
+var t,e;function o(){return(o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t}).apply(this,arguments)}import{use as n}from"solid-js/web";import{template as r}from"solid-js/web";import{spread as i}from"solid-js/web";import{mergeProps as l}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{effect as p}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let c=r("<style> "),u=r("<style>"),m=r("<span>"),g=r("<div>");import{createEffect as f,createMemo as h,createSignal as v,mergeProps as w,onCleanup as b,onMount as C,Show as x,splitProps as y}from"solid-js";import{Portal as j}from"solid-js/web";import M from"@moneko/common/lib/isElementInside";import k from"@moneko/common/lib/isEqual";import L from"@moneko/common/lib/isFunction";import O from"@moneko/common/lib/passiveSupported";import{css as E,cx as P}from"@moneko/css";import{customElement as T}from"solid-element";import R from"../empty";import $ from"../theme";import{popoverCss as W,portalCss as S}from"./style";export var TriggerOption;(t=TriggerOption||(TriggerOption={})).hover="hover",t.click="click",t.contextMenu="contextMenu",t.none="none";export var Placement;function z(t){let e,r,T,z;let{isDark:H,baseStyle:I}=$,[B]=y(w({trigger:"hover"},t),["class","css","popupClass","popupCss","size","trigger","open","disabled","onOpenChange","dropdownMatchSelectWidth","destroyInactive","arrow","placement","getPopupContainer","children","content"]),[A,D]=v(null),[q,F]=v({}),[N,X]=v(!1),[Y,G]=v("");function J(t){B.disabled||(B.onOpenChange&&B.onOpenChange(t),void 0===B.open&&D(t))}function K(){!1===A()&&(D(null),J(null))}function Q(t){clearTimeout(T),T=setTimeout(()=>{if(clearTimeout(T),t.target&&"false"===t.target.getAttribute("handle-closed"))return;let o=M(t.target,e);(A()&&!o||o&&"mousedown"!==t.type)&&J(!1)},"hover"===B.trigger?300:0)}f(()=>{void 0!==B.open&&D(B.open)}),f(()=>{A()&&B.dropdownMatchSelectWidth&&r&&G(`.portal {width: ${r.offsetWidth}px;}`)});let U=function(t){clearTimeout(z),z=setTimeout(()=>{if(clearTimeout(z),!e||!r||!t&&"contextMenu"===B.trigger)return;if((null==t?void 0:t.type)==="scroll"&&"contextMenu"===B.trigger){J(!1);return}let o=r.getBoundingClientRect(),n=e.getBoundingClientRect(),i=n.width/2-o.width/2,l=window.innerHeight-o.bottom,s=B.placement,p=!(null==s?void 0:s.startsWith("top"))&&l>.8*e.offsetHeight&&l>o.top||(null==s?void 0:s.startsWith("bottom")),a=B.arrow?8:4,d={};switch(B.placement){case"bottomLeft":case"left":case"topLeft":d.left=o.left,d["--x"]=-n.width/2+16;break;case"bottomRight":case"right":case"topRight":d.left=o.right-n.width,d["--x"]=n.width/2-16;break;default:d.left=Math.abs(i>o.left?o.left:o.left-i),d["--x"]=-(d.left-o.left+i)}p?d.top=o.bottom+a:d.bottom=window.innerHeight-o.top+a,F(t=>k(t,d)?t:d),X(t=>!p===t?t:!p)},32)};function V(t){clearTimeout(T),t.stopPropagation(),"contextMenu"===B.trigger&&"contextmenu"===t.type&&(t.preventDefault(),F(n=>o({},n,{left:t.clientX,top:t.clientY,"--x":-((null==e?void 0:e.getBoundingClientRect().width)||0)/2+16}))),J(!0)}let Z=h(()=>L(B.getPopupContainer)?B.getPopupContainer(r):document.body),_=h(()=>{let t={},e={click:"onMouseDown",hover:"onMouseEnter",contextMenu:"onContextMenu",none:void 0}[B.trigger],o={hover:"onMouseLeave",click:void 0,contextMenu:void 0,none:void 0}[B.trigger];return Object.assign(t,e&&{[e]:V},o&&{[o]:Q}),t}),tt=h(()=>{let t=q();return`.portal {${Object.keys(t).map(e=>`${e}:${t[e]}px;`).join("")}z-index: 1;}`}),te=h(()=>P("portal",B.arrow&&"arrow",`${A()?"in":"out"}-${N()?"up":"down"}`,B.size,B.popupClass)),to=h(()=>`:host {--popover-bg: ${H()?"#1f1f1f":"var(--component-bg)"};--popover-shadow-color: rgb(0 0 0 / 5%);}`);return f(()=>{A()&&(U(),window.addEventListener("scroll",U,{passive:O})),b(()=>{window.removeEventListener("scroll",U,!1)})}),C(()=>{"none"!==B.trigger&&document.documentElement.addEventListener("mousedown",Q,!1)}),b(()=>{clearTimeout(T),document.documentElement.removeEventListener("mousedown",Q,!1)}),[(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=I()),t})(),(()=>{let t=u();return t.textContent=W,t})(),a(x,{get when(){return B.css},get children(){let t=c(),e=t.firstChild;return p(()=>e.data=E(B.css)),t}}),(()=>{let t=m(),e=r;return"function"==typeof e?n(e,t):r=t,i(t,l({get class(){return P("popover",B.size,B.class)}},_),!1,!0),s(t,()=>B.children),t})(),a(x,{get when(){return null!==A()||!B.destroyInactive},get children(){return a(j,{useShadow:!0,get mount(){return Z()},get children(){return[(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=I()),t})(),(()=>{let t=u();return t.textContent=S,t})(),(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=to()),t})(),(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=tt()),t})(),(()=>{let t=c(),e=t.firstChild;return p(()=>e.data=Y()),t})(),a(x,{get when(){return B.popupCss},get children(){let t=c(),e=t.firstChild;return p(()=>e.data=E(B.popupCss)),t}}),(()=>{let t=g(),o=e;return d(t,"animationend",K),"function"==typeof o?n(o,t):e=t,i(t,l({get class(){return te()}},_),!1,!0),s(t,a(x,{get when(){return B.content},get fallback(){return a(R,{})},get children(){return a(x,{get when(){return"string"==typeof B.content},get fallback(){return B.content},get children(){let t=g();return p(()=>t.innerHTML=B.content),t}})}})),t})()]}})}})]}(e=Placement||(Placement={})).bottomLeft="bottomLeft",e.bottom="bottom",e.bottomRight="bottomRight",e.topLeft="topLeft",e.top="top",e.topRight="topRight",e.left="left",e.right="right";export const defaultProps={class:void 0,css:void 0,content:void 0,getPopupContainer:void 0,trigger:void 0,open:void 0,onOpenChange:void 0,popupClass:void 0,popupCss:void 0,destroyInactive:!0,disabled:void 0,arrow:void 0,placement:void 0,dropdownMatchSelectWidth:void 0};T("n-popover",defaultProps,(t,e)=>{let o=e.element,n=w({onOpenChange(t){o.dispatchEvent(new CustomEvent("openchange",{detail:t}))},children:[...o.childNodes.values()]},t);return f(()=>{o.removeAttribute("css")}),a(z,n)});export default z;
 //# sourceMappingURL=index.js.map

package/es/popover/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/popover/index.tsx"],"sourcesContent":["import {\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n} from 'solid-js';\nimport { isElementInside, isEqual, isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport { popoverCss, portalCss } from './style';\nimport Empty from '../empty';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface PopoverProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  content?: (() => JSX.Element) | JSX.Element;\n  /** 挂载到指定的元素，值为一个返回对应 DOM 元素 默认 document.body */\n  getPopupContainer?: (node?: HTMLElement | null) => HTMLElement;\n  /** 触发行为\n   * @default 'hover'\n   */\n  trigger?: keyof typeof TriggerOption;\n  /** 打开内容气泡 */\n  open?: boolean | null;\n  /** 内容打开关闭时的回调方法 */\n  onOpenChange?: (open: boolean | null) => void;\n  /** 气泡的自定义类名 */\n  popupClass?: string;\n  /** 气泡的自定义样式表 */\n  popupCss?: string;\n  /** 关闭后是否销毁  */\n  destroyInactive?: boolean;\n  /** 不可用状态  */\n  disabled?: boolean;\n  /** 添加一个箭头显示  */\n  arrow?: boolean;\n  /** 指定气泡显示的方向 */\n  placement?: keyof typeof Placement;\n  /** 气泡宽度与触发dom一致  */\n  dropdownMatchSelectWidth?: boolean;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  children?: JSX.Element;\n}\n\nexport enum TriggerOption {\n  /** 鼠标移入 */\n  hover = 'hover',\n  /** 点击 */\n  click = 'click',\n  /** 右键 */\n  contextMenu = 'contextMenu',\n  /** 无 */\n  none = 'none',\n}\n\nexport enum Placement {\n  /** 左下 */\n  bottomLeft = 'bottomLeft',\n  /** 下 */\n  bottom = 'bottom',\n  /** 右下 */\n  bottomRight = 'bottomRight',\n  /** 左上 */\n  topLeft = 'topLeft',\n  /** 上 */\n  top = 'top',\n  /** 右上 */\n  topRight = 'topRight',\n  /** 左 */\n  left = 'left',\n  /** 右 */\n  right = 'right',\n}\n\ntype Posi = {\n  left?: number;\n  top?: number;\n  right?: number;\n  bottom?: number;\n  '--x'?: number;\n};\n\ntype EventMap = {\n  click?: string;\n  hover?: string;\n  contextMenu?: string;\n  none?: never;\n  [key: string]: string | undefined;\n};\nfunction Popover(props: PopoverProps) {\n  const { isDark, baseStyle } = theme;\n  const mp = mergeProps(\n    {\n      trigger: 'hover',\n    },\n    props,\n  );\n  const [local] = splitProps(mp, [\n    'class',\n    'css',\n    'popupClass',\n    'popupCss',\n    'size',\n    'trigger',\n    'open',\n    'disabled',\n    'onOpenChange',\n    'dropdownMatchSelectWidth',\n    'destroyInactive',\n    'arrow',\n    'placement',\n    'getPopupContainer',\n    'children',\n    'content',\n  ]);\n  let ref: HTMLDivElement | undefined;\n  let childRef: HTMLSpanElement | undefined;\n  let closeTimer: NodeJS.Timeout | undefined;\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [posi, setPosi] = createSignal<Posi>({});\n  const [up, setUp] = createSignal<boolean>(false);\n  const [width, setWidth] = createSignal('');\n\n  createEffect(() => {\n    if (local.open !== void 0) {\n      setOpen(local.open);\n    }\n  });\n  function openChange(next: boolean | null) {\n    if (!local.disabled) {\n      if (local.onOpenChange) {\n        local.onOpenChange(next);\n      }\n      if (local.open === void 0) {\n        setOpen(next);\n      }\n    }\n  }\n  function exit() {\n    if (open() === false) {\n      setOpen(null);\n      openChange(null);\n    }\n  }\n  createEffect(() => {\n    if (open() && local.dropdownMatchSelectWidth && childRef) {\n      setWidth(`.portal {width: ${childRef.offsetWidth}px;}`);\n    }\n  });\n\n  function close(e: MouseEvent | Event) {\n    clearTimeout(closeTimer);\n    closeTimer = setTimeout(\n      () => {\n        clearTimeout(closeTimer);\n        if ((e.target as HTMLElement)?.getAttribute('handle-closed') === 'false') {\n          return;\n        }\n        const isContains = isElementInside(e.target as Element, ref);\n\n        if ((open() && !isContains) || (isContains && e.type !== 'mousedown')) {\n          openChange(false);\n        }\n      },\n      local.trigger === 'hover' ? 300 : 0,\n    );\n  }\n  let portalTimer: NodeJS.Timeout | undefined;\n  const showPortal = function (e?: Event): void {\n    clearTimeout(portalTimer);\n    portalTimer = setTimeout(() => {\n      clearTimeout(portalTimer);\n      if (!ref || !childRef || (!e && local.trigger === 'contextMenu')) {\n        return;\n      }\n      if (e?.type === 'scroll' && local.trigger === 'contextMenu') {\n        openChange(false);\n        return;\n      }\n      const elRect = childRef!.getBoundingClientRect();\n      const portalRect = ref!.getBoundingClientRect();\n      const offsetX = portalRect.width / 2 - elRect.width / 2;\n      const margin = window.innerHeight - elRect.bottom;\n      const _placement = local.placement;\n\n      const _isBottom =\n        (!_placement?.startsWith('top') &&\n          margin > ref!.offsetHeight * 0.8 &&\n          margin > elRect.top) ||\n        _placement?.startsWith('bottom');\n      const arrowHeight = local.arrow ? 8 : 4;\n      const _posi: Posi = {};\n\n      switch (local.placement) {\n        case 'bottomLeft':\n        case 'left':\n        case 'topLeft':\n          _posi.left = elRect.left;\n          _posi['--x'] = -portalRect.width / 2 + 16;\n          break;\n        case 'bottomRight':\n        case 'right':\n        case 'topRight':\n          _posi.left = elRect.right - portalRect.width;\n          _posi['--x'] = portalRect.width / 2 - 16;\n          break;\n        case 'bottom':\n        case 'top':\n        default:\n          _posi.left = Math.abs(offsetX > elRect.left ? elRect.left : elRect.left - offsetX);\n          _posi['--x'] = -(_posi.left - elRect.left + offsetX);\n          break;\n      }\n      if (_isBottom) {\n        _posi.top = elRect.bottom + arrowHeight;\n      } else {\n        _posi.bottom = window.innerHeight - elRect.top + arrowHeight;\n      }\n      setPosi((prev) => {\n        return isEqual(prev, _posi) ? prev : _posi;\n      });\n      setUp((prev) => {\n        return prev === !_isBottom ? prev : !_isBottom;\n      });\n    }, 32);\n  };\n\n  function handleOpen(e: MouseEvent) {\n    clearTimeout(closeTimer);\n    e.stopPropagation();\n    if (local.trigger === 'contextMenu' && e.type === 'contextmenu') {\n      e.preventDefault();\n      setPosi((prev) => ({\n        ...prev,\n        left: e.clientX,\n        top: e.clientY,\n        ['--x']: -(ref?.getBoundingClientRect().width || 0) / 2 + 16,\n      }));\n    }\n    openChange(true);\n  }\n\n  const container = createMemo(() => {\n    if (isFunction(local.getPopupContainer)) {\n      return local.getPopupContainer(childRef);\n    }\n    return document.body;\n  });\n  const childrenProps = createMemo(() => {\n    const _props: Partial<Record<keyof EventMap, void>> = {};\n\n    const openEvent: EventMap = {\n      click: 'onMouseDown',\n      hover: 'onMouseEnter',\n      contextMenu: 'onContextMenu',\n      none: void 0,\n    };\n    const closeEvent: EventMap = {\n      hover: 'onMouseLeave',\n      click: void 0,\n      contextMenu: void 0,\n      none: void 0,\n    };\n\n    const openFn = openEvent[local.trigger];\n    const closeFn = closeEvent[local.trigger];\n\n    Object.assign(\n      _props,\n      openFn && {\n        [openFn]: handleOpen,\n      },\n      closeFn && {\n        [closeFn]: close,\n      },\n    );\n\n    return _props;\n  });\n\n  const portalStyle = createMemo(() => {\n    const p = posi();\n\n    return `.portal {${Object.keys(p)\n      .map((k) => `${k}:${p[k as keyof Posi]}px;`)\n      .join('')}z-index: 1;}`;\n  });\n  const portalCls = createMemo(() => {\n    return cx(\n      'portal',\n      local.arrow && 'arrow',\n      `${open() ? 'in' : 'out'}-${up() ? 'up' : 'down'}`,\n      local.size,\n      local.popupClass,\n    );\n  });\n  const hostStyle = createMemo(() => {\n    return `:host {--popover-bg: ${\n      isDark() ? '#1f1f1f' : 'var(--component-bg)'\n    };--popover-shadow-color: rgb(0 0 0 / 5%);}`;\n  });\n\n  createEffect(() => {\n    if (open()) {\n      showPortal();\n\n      window.addEventListener('scroll', showPortal, {\n        passive: passiveSupported,\n      });\n    }\n    onCleanup(() => {\n      window.removeEventListener('scroll', showPortal, false);\n    });\n  });\n  onMount(() => {\n    if (local.trigger !== 'none') {\n      document.documentElement.addEventListener('mousedown', close, false);\n    }\n  });\n  onCleanup(() => {\n    clearTimeout(closeTimer);\n    document.documentElement.removeEventListener('mousedown', close, false);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={popoverCss} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <span ref={childRef} class={cx('popover', local.size, local.class)} {...childrenProps()}>\n        {local.children}\n      </span>\n      <Show when={open() !== null || !local.destroyInactive}>\n        <Portal useShadow mount={container()}>\n          <style textContent={baseStyle()} />\n          <style textContent={portalCss} />\n          <style textContent={hostStyle()} />\n          <style textContent={portalStyle()} />\n          <style textContent={width()} />\n          <Show when={local.popupCss}>\n            <style textContent={css(local.popupCss)} />\n          </Show>\n          <div ref={ref} onAnimationEnd={exit} class={portalCls()} {...childrenProps()}>\n            <Show when={local.content} fallback={<Empty />}>\n              <Show when={typeof local.content === 'string'} fallback={local.content}>\n                {/* eslint-disable-next-line solid/no-innerhtml */}\n                <div innerHTML={local.content} />\n              </Show>\n            </Show>\n          </div>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport type PopoverElement = CustomElement<PopoverProps, 'onOpenChange'>;\n\nexport const defaultProps = {\n  class: void 0,\n  css: void 0,\n  content: void 0,\n  getPopupContainer: void 0,\n  trigger: void 0,\n  open: void 0,\n  onOpenChange: void 0,\n  popupClass: void 0,\n  popupCss: void 0,\n  destroyInactive: true,\n  disabled: void 0,\n  arrow: void 0,\n  placement: void 0,\n  dropdownMatchSelectWidth: void 0,\n};\ncustomElement<PopoverProps>('n-popover', defaultProps, (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      onOpenChange(next: boolean | null) {\n        el.dispatchEvent(\n          new CustomEvent('openchange', {\n            detail: next,\n          }),\n        );\n      },\n      children: [...el.childNodes.values()],\n    },\n    _,\n  );\n\n  createEffect(() => {\n    el.removeAttribute('css');\n  });\n  return <Popover {...props} />;\n});\nexport default Popover;\n"],"names":["TriggerOption","Placement","Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","splitProps","isElementInside","isEqual","isFunction","passiveSupported","css","cx","customElement","Portal","popoverCss","portalCss","Empty","theme","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","local","trigger","open","setOpen","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","type","dropdownMatchSelectWidth","offsetWidth","showPortal","elRect","getBoundingClientRect","portalRect","offsetX","margin","window","innerHeight","bottom","_placement","placement","_isBottom","startsWith","offsetHeight","top","arrowHeight","arrow","_posi","left","right","Math","abs","prev","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","size","popupClass","hostStyle","addEventListener","passive","removeEventListener","documentElement","class","children","destroyInactive","popupCss","content","defaultProps","_","opt","el","element","dispatchEvent","CustomEvent","detail","childNodes","values","removeAttribute"],"mappings":"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"}
+{"version":3,"sources":["../../components/popover/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  Show,\n  splitProps,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { isElementInside, isEqual, isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement } from '..';\nimport Empty from '../empty';\nimport theme from '../theme';\n\nimport { popoverCss, portalCss } from './style';\n\nexport interface PopoverProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  content?: (() => JSX.Element) | JSX.Element;\n  /** 挂载到指定的元素，值为一个返回对应 DOM 元素 默认 document.body */\n  getPopupContainer?: (node?: HTMLElement | null) => HTMLElement;\n  /** 触发行为\n   * @default 'hover'\n   */\n  trigger?: keyof typeof TriggerOption;\n  /** 打开内容气泡 */\n  open?: boolean | null;\n  /** 内容打开关闭时的回调方法 */\n  onOpenChange?: (open: boolean | null) => void;\n  /** 气泡的自定义类名 */\n  popupClass?: string;\n  /** 气泡的自定义样式表 */\n  popupCss?: string;\n  /** 关闭后是否销毁  */\n  destroyInactive?: boolean;\n  /** 不可用状态  */\n  disabled?: boolean;\n  /** 添加一个箭头显示  */\n  arrow?: boolean;\n  /** 指定气泡显示的方向 */\n  placement?: keyof typeof Placement;\n  /** 气泡宽度与触发dom一致  */\n  dropdownMatchSelectWidth?: boolean;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  children?: JSX.Element;\n}\n\nexport enum TriggerOption {\n  /** 鼠标移入 */\n  hover = 'hover',\n  /** 点击 */\n  click = 'click',\n  /** 右键 */\n  contextMenu = 'contextMenu',\n  /** 无 */\n  none = 'none',\n}\n\nexport enum Placement {\n  /** 左下 */\n  bottomLeft = 'bottomLeft',\n  /** 下 */\n  bottom = 'bottom',\n  /** 右下 */\n  bottomRight = 'bottomRight',\n  /** 左上 */\n  topLeft = 'topLeft',\n  /** 上 */\n  top = 'top',\n  /** 右上 */\n  topRight = 'topRight',\n  /** 左 */\n  left = 'left',\n  /** 右 */\n  right = 'right',\n}\n\ninterface Posi {\n  left?: number;\n  top?: number;\n  right?: number;\n  bottom?: number;\n  '--x'?: number;\n}\n\ninterface EventMap {\n  click?: string;\n  hover?: string;\n  contextMenu?: string;\n  none?: never;\n  [key: string]: string | undefined;\n}\nfunction Popover(props: PopoverProps) {\n  const { isDark, baseStyle } = theme;\n  const mp = mergeProps(\n    {\n      trigger: 'hover',\n    },\n    props,\n  );\n  const [local] = splitProps(mp, [\n    'class',\n    'css',\n    'popupClass',\n    'popupCss',\n    'size',\n    'trigger',\n    'open',\n    'disabled',\n    'onOpenChange',\n    'dropdownMatchSelectWidth',\n    'destroyInactive',\n    'arrow',\n    'placement',\n    'getPopupContainer',\n    'children',\n    'content',\n  ]);\n  let ref: HTMLDivElement | undefined;\n  let childRef: HTMLSpanElement | undefined;\n  let closeTimer: NodeJS.Timeout | undefined;\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [posi, setPosi] = createSignal<Posi>({});\n  const [up, setUp] = createSignal<boolean>(false);\n  const [width, setWidth] = createSignal('');\n\n  createEffect(() => {\n    if (local.open !== void 0) {\n      setOpen(local.open);\n    }\n  });\n  function openChange(next: boolean | null) {\n    if (!local.disabled) {\n      if (local.onOpenChange) {\n        local.onOpenChange(next);\n      }\n      if (local.open === void 0) {\n        setOpen(next);\n      }\n    }\n  }\n  function exit() {\n    if (open() === false) {\n      setOpen(null);\n      openChange(null);\n    }\n  }\n  createEffect(() => {\n    if (open() && local.dropdownMatchSelectWidth && childRef) {\n      setWidth(`.portal {width: ${childRef.offsetWidth}px;}`);\n    }\n  });\n\n  function close(e: MouseEvent | Event) {\n    clearTimeout(closeTimer);\n    closeTimer = setTimeout(\n      () => {\n        clearTimeout(closeTimer);\n        if (e.target && (e.target as HTMLElement).getAttribute('handle-closed') === 'false') {\n          return;\n        }\n        const isContains = isElementInside(e.target as Element, ref);\n\n        if ((open() && !isContains) || (isContains && e.type !== 'mousedown')) {\n          openChange(false);\n        }\n      },\n      local.trigger === 'hover' ? 300 : 0,\n    );\n  }\n  let portalTimer: NodeJS.Timeout | undefined;\n  const showPortal = function (e?: Event): void {\n    clearTimeout(portalTimer);\n    portalTimer = setTimeout(() => {\n      clearTimeout(portalTimer);\n      if (!ref || !childRef || (!e && local.trigger === 'contextMenu')) {\n        return;\n      }\n      if (e?.type === 'scroll' && local.trigger === 'contextMenu') {\n        openChange(false);\n        return;\n      }\n      const elRect = childRef.getBoundingClientRect();\n      const portalRect = ref.getBoundingClientRect();\n      const offsetX = portalRect.width / 2 - elRect.width / 2;\n      const margin = window.innerHeight - elRect.bottom;\n      const _placement = local.placement;\n\n      const _isBottom =\n        (!_placement?.startsWith('top') &&\n          margin > ref.offsetHeight * 0.8 &&\n          margin > elRect.top) ||\n        _placement?.startsWith('bottom');\n      const arrowHeight = local.arrow ? 8 : 4;\n      const _posi: Posi = {};\n\n      switch (local.placement) {\n        case 'bottomLeft':\n        case 'left':\n        case 'topLeft':\n          _posi.left = elRect.left;\n          _posi['--x'] = -portalRect.width / 2 + 16;\n          break;\n        case 'bottomRight':\n        case 'right':\n        case 'topRight':\n          _posi.left = elRect.right - portalRect.width;\n          _posi['--x'] = portalRect.width / 2 - 16;\n          break;\n        case 'bottom':\n        case 'top':\n        default:\n          _posi.left = Math.abs(offsetX > elRect.left ? elRect.left : elRect.left - offsetX);\n          _posi['--x'] = -(_posi.left - elRect.left + offsetX);\n          break;\n      }\n      if (_isBottom) {\n        _posi.top = elRect.bottom + arrowHeight;\n      } else {\n        _posi.bottom = window.innerHeight - elRect.top + arrowHeight;\n      }\n      setPosi((prev) => {\n        return isEqual(prev, _posi) ? prev : _posi;\n      });\n      setUp((prev) => {\n        return prev === !_isBottom ? prev : !_isBottom;\n      });\n    }, 32);\n  };\n\n  function handleOpen(e: MouseEvent) {\n    clearTimeout(closeTimer);\n    e.stopPropagation();\n    if (local.trigger === 'contextMenu' && e.type === 'contextmenu') {\n      e.preventDefault();\n      setPosi((prev) => ({\n        ...prev,\n        left: e.clientX,\n        top: e.clientY,\n        ['--x']: -(ref?.getBoundingClientRect().width || 0) / 2 + 16,\n      }));\n    }\n    openChange(true);\n  }\n\n  const container = createMemo(() => {\n    if (isFunction(local.getPopupContainer)) {\n      return local.getPopupContainer(childRef);\n    }\n    return document.body;\n  });\n  const childrenProps = createMemo(() => {\n    const _props: Partial<Record<keyof EventMap, void>> = {};\n\n    const openEvent: EventMap = {\n      click: 'onMouseDown',\n      hover: 'onMouseEnter',\n      contextMenu: 'onContextMenu',\n      none: void 0,\n    };\n    const closeEvent: EventMap = {\n      hover: 'onMouseLeave',\n      click: void 0,\n      contextMenu: void 0,\n      none: void 0,\n    };\n\n    const openFn = openEvent[local.trigger];\n    const closeFn = closeEvent[local.trigger];\n\n    Object.assign(\n      _props,\n      openFn && {\n        [openFn]: handleOpen,\n      },\n      closeFn && {\n        [closeFn]: close,\n      },\n    );\n\n    return _props;\n  });\n\n  const portalStyle = createMemo(() => {\n    const p = posi();\n\n    return `.portal {${Object.keys(p)\n      .map((k) => `${k}:${p[k as keyof Posi]}px;`)\n      .join('')}z-index: 1;}`;\n  });\n  const portalCls = createMemo(() => {\n    return cx(\n      'portal',\n      local.arrow && 'arrow',\n      `${open() ? 'in' : 'out'}-${up() ? 'up' : 'down'}`,\n      local.size,\n      local.popupClass,\n    );\n  });\n  const hostStyle = createMemo(() => {\n    return `:host {--popover-bg: ${\n      isDark() ? '#1f1f1f' : 'var(--component-bg)'\n    };--popover-shadow-color: rgb(0 0 0 / 5%);}`;\n  });\n\n  createEffect(() => {\n    if (open()) {\n      showPortal();\n\n      window.addEventListener('scroll', showPortal, {\n        passive: passiveSupported,\n      });\n    }\n    onCleanup(() => {\n      window.removeEventListener('scroll', showPortal, false);\n    });\n  });\n  onMount(() => {\n    if (local.trigger !== 'none') {\n      document.documentElement.addEventListener('mousedown', close, false);\n    }\n  });\n  onCleanup(() => {\n    clearTimeout(closeTimer);\n    document.documentElement.removeEventListener('mousedown', close, false);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={popoverCss} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <span ref={childRef} class={cx('popover', local.size, local.class)} {...childrenProps()}>\n        {local.children}\n      </span>\n      <Show when={open() !== null || !local.destroyInactive}>\n        <Portal useShadow mount={container()}>\n          <style textContent={baseStyle()} />\n          <style textContent={portalCss} />\n          <style textContent={hostStyle()} />\n          <style textContent={portalStyle()} />\n          <style textContent={width()} />\n          <Show when={local.popupCss}>\n            <style textContent={css(local.popupCss)} />\n          </Show>\n          <div ref={ref} onAnimationEnd={exit} class={portalCls()} {...childrenProps()}>\n            <Show when={local.content} fallback={<Empty />}>\n              <Show when={typeof local.content === 'string'} fallback={local.content}>\n                {/* eslint-disable-next-line solid/no-innerhtml */}\n                <div innerHTML={local.content} />\n              </Show>\n            </Show>\n          </div>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport type PopoverElement = CustomElement<PopoverProps, 'onOpenChange'>;\n\nexport const defaultProps = {\n  class: void 0,\n  css: void 0,\n  content: void 0,\n  getPopupContainer: void 0,\n  trigger: void 0,\n  open: void 0,\n  onOpenChange: void 0,\n  popupClass: void 0,\n  popupCss: void 0,\n  destroyInactive: true,\n  disabled: void 0,\n  arrow: void 0,\n  placement: void 0,\n  dropdownMatchSelectWidth: void 0,\n};\ncustomElement<PopoverProps>('n-popover', defaultProps, (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      onOpenChange(next: boolean | null) {\n        el.dispatchEvent(\n          new CustomEvent('openchange', {\n            detail: next,\n          }),\n        );\n      },\n      children: [...el.childNodes.values()],\n    },\n    _,\n  );\n\n  createEffect(() => {\n    el.removeAttribute('css');\n  });\n  return <Popover {...props} />;\n});\nexport default Popover;\n"],"names":["TriggerOption","Placement","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","Show","splitProps","Portal","isElementInside","isEqual","isFunction","passiveSupported","css","cx","customElement","Empty","theme","popoverCss","portalCss","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","local","trigger","open","setOpen","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","type","dropdownMatchSelectWidth","offsetWidth","showPortal","elRect","getBoundingClientRect","portalRect","offsetX","margin","window","innerHeight","bottom","_placement","placement","_isBottom","startsWith","offsetHeight","top","arrowHeight","arrow","_posi","left","right","Math","abs","prev","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","size","popupClass","hostStyle","addEventListener","passive","removeEventListener","documentElement","class","children","destroyInactive","popupCss","content","defaultProps","_","opt","el","element","dispatchEvent","CustomEvent","detail","childNodes","values","removeAttribute"],"mappings":"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"}

package/es/prism/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/prism/css.ts"],"sourcesContent":["import { createMemo, createRoot, getOwner } from 'solid-js';\nimport { css } from '@moneko/css';\nimport theme from '../theme';\n\nconst prismCss = createRoot(() => {\n  const { isDark } = theme;\n  const baseCss = css`\n    [data-copy]::before {\n      position: absolute;\n      inset-block-start: 32px;\n      inset-inline: 0;\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      inline-size: fit-content;\n      font-size: var(--font-size-sm);\n      transition:\n        background-color 0.3s,\n        color 0.3s,\n        border-color 0.3s;\n      animation-fill-mode: forwards;\n      content: '复制成功';\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      content: '复制成功';\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\n        var(--transition-timing-function);\n    }\n\n    @keyframes copy-slide-in {\n      from {\n        transform: translate3d(0, -100%, 0) scale(0);\n        opacity: 0;\n      }\n\n      to {\n        transform: translate3d(0, 0, 0) scale(1);\n        opacity: 1;\n      }\n    }\n\n    @keyframes copy-slide-out {\n      from {\n        transform: translate3d(0, 0, 0) scale(1);\n        opacity: 1;\n      }\n\n      to {\n        transform: translate3d(0, -100%, 0) scale(0);\n        opacity: 0;\n      }\n    }\n\n    pre > code {\n      display: block;\n      overflow: auto;\n      margin: 0 16px 8px;\n      padding: 32px 0 8px;\n      max-inline-size: 100%;\n      font-size: var(--font-size);\n      white-space: pre-wrap;\n      line-height: 1.8;\n      pointer-events: auto;\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n      transition-property: box-shadow, background-color, border-color, color;\n    }\n\n    code[class*='language-'],\n    pre[class*='language-'] {\n      color: var(--code-color, #90a4ae);\n\n      &::selection,\n      & ::selection {\n        background-color: var(--text-selection);\n        text-shadow: 0 1px var(--primary-shadow);\n      }\n    }\n\n    .language-css > code,\n    .language-sass > code,\n    .language-scss > code {\n      color: var(--code-lang-style-color, #f76d47);\n    }\n\n    .line-numbers-rows,\n    .toolbar::after,\n    .toolbar-copy::after,\n    pre {\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n    }\n\n    [class*='language-'] .namespace {\n      opacity: 0.7;\n    }\n\n    .tag {\n      color: var(--token-tag, #e53935);\n    }\n\n    .atrule {\n      color: var(--token-atrule, #7c4dff);\n    }\n\n    .attr-name {\n      color: var(--token-attr-name, #39adb5);\n    }\n\n    .attr-value {\n      color: var(--token-attr-value, #f6a434);\n    }\n\n    .attribute {\n      color: var(--token-attribute, #f6a434);\n    }\n\n    .boolean {\n      color: var(--token-boolean, #7c4dff);\n    }\n\n    .builtin {\n      color: var(--token-builtin, #39adb5);\n    }\n\n    .cdata {\n      color: var(--token-cdata, #39adb5);\n    }\n\n    .char {\n      color: var(--token-char, #39adb5);\n    }\n\n    .class {\n      color: var(--token-class, #39adb5);\n    }\n\n    .class-name,\n    .maybe-class-name {\n      color: var(--token-class-name, #6182b8);\n    }\n\n    .comment {\n      color: var(--token-comment, #aabfc9);\n    }\n\n    .constant {\n      color: var(--token-constant, #7c4dff);\n    }\n\n    .deleted {\n      color: var(--token-deleted, #e53935);\n    }\n\n    .doctype {\n      color: var(--token-doctype, #aabfc9);\n    }\n\n    .entity {\n      color: var(--token-entity, #e53935);\n    }\n\n    .function {\n      color: var(--token-function, #7c4dff);\n    }\n\n    .hexcode {\n      color: var(--token-hexcode, #f76d47);\n    }\n\n    .id {\n      font-weight: bold;\n      color: var(--token-id, #7c4dff);\n    }\n\n    .important {\n      font-weight: bold;\n      color: var(--token-important, #7c4dff);\n    }\n\n    .inserted {\n      color: var(--token-inserted, #39adb5);\n    }\n\n    .keyword {\n      color: var(--token-keyword, #7c4dff);\n    }\n\n    .number {\n      color: var(--token-number, #f76d47);\n    }\n\n    .operator {\n      color: var(--token-operator, #39adb5);\n    }\n\n    .prolog {\n      color: var(--token-prolog, #aabfc9);\n    }\n\n    .property {\n      color: var(--token-property, #39adb5);\n    }\n\n    .pseudo-class {\n      color: var(--token-pseudo-class, #f6a434);\n    }\n\n    .pseudo-element {\n      color: var(--token-pseudo-element, #f6a434);\n    }\n\n    .punctuation {\n      color: var(--token-punctuation, #39adb5);\n    }\n\n    .regex {\n      color: var(--token-regex, #6182b8);\n    }\n\n    .selector {\n      color: var(--token-selector, #e53935);\n    }\n\n    .string {\n      color: var(--token-string, #f6a434);\n    }\n\n    .symbol {\n      color: var(--token-symbol, #7c4dff);\n    }\n\n    .unit {\n      color: var(--token-unit, #f76d47);\n    }\n\n    .url {\n      color: var(--token-url, #e53935);\n    }\n\n    .variable {\n      color: var(--token-variable, #e53935);\n    }\n\n    code[class*='language-'],\n    pre,\n    .n-editor textarea {\n      font-family: 'Liberation Mono', Monaco, Menlo, Consolas, 'Source Code Pro', 'Ubuntu Mono',\n        'Microsoft Yahei', '微软雅黑', Courier, 'Helvetica Neue', 'Lantinghei SC', STXihei,\n        WenQuanYi, sans-serif;\n      text-align: start;\n      white-space: pre-wrap;\n      word-wrap: normal;\n      word-break: normal;\n      word-spacing: normal;\n      tab-size: 4;\n      hyphens: none;\n    }\n\n    .deleted:not(.prefix) {\n      display: block;\n      color: inherit;\n      background-color: rgb(255 0 0 / 10%);\n    }\n\n    .inserted:not(.prefix) {\n      display: block;\n      color: inherit;\n      background-color: rgb(0 255 128 / 10%);\n    }\n\n    span .inline-color-wrapper {\n      display: inline-block;\n      overflow: hidden;\n      margin: 0 0.333ch;\n      border: var(--border-base);\n      background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 0 / 10px 10px;\n      outline: 1px solid rgb(0 0 0 / 50%);\n      inline-size: 1.333ch;\n      block-size: 1.333ch;\n      box-sizing: border-box;\n    }\n\n    span .inline-color {\n      display: block;\n      inline-size: 120%;\n      block-size: 120%;\n    }\n\n    pre,\n    .n-editor {\n      position: relative;\n      display: block;\n      overflow: visible;\n      margin: auto;\n      border-radius: var(--border-radius);\n      max-inline-size: 100%;\n      font-size: var(--font-size);\n      white-space: pre-wrap;\n      background-color: var(--primary-component-bg);\n      box-shadow: 0 2px 8px 0 var(--primary-shadow);\n      line-height: 20px;\n      transition-property: color, background-color, box-shadow;\n    }\n\n    pre .toolbar::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      z-index: 1;\n      display: block;\n      overflow: hidden;\n      border-radius: var(--border-radius) var(--border-radius) 0 0;\n      inline-size: 100%;\n      block-size: 24px;\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      line-height: 24px;\n      text-transform: uppercase;\n      backdrop-filter: blur(10px);\n      content: attr(data-language) '';\n      transition-property: background-color, border-color, color;\n    }\n\n    pre .toolbar::before {\n      position: absolute;\n      inset-block-start: 10px;\n      inset-inline-start: 12px;\n      z-index: 3;\n      display: inline-block;\n      border-radius: var(--border-radius);\n      inline-size: 4px;\n      block-size: 4px;\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    }\n\n    pre .toolbar .toolbar-copy {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 8px;\n      z-index: 3;\n      border: none;\n      padding: 0;\n      background: none;\n      outline: none;\n      cursor: pointer;\n    }\n\n    pre .toolbar .toolbar-copy:active {\n      transform: scale(0.95);\n    }\n\n    .toolbar .toolbar-copy::after {\n      user-select: none;\n      display: block;\n      font-size: 24px;\n      font-family: sans-serif;\n      color: var(--text-color);\n      line-height: 24px;\n      content: '⎘';\n      transition-property: color, transform;\n    }\n\n    .toolbar .toolbar-copy:hover::after {\n      color: var(--primary-color, #5794ff);\n    }\n\n    pre.line-numbers > code {\n      margin: 0 10px 0 54px;\n      white-space: inherit;\n      counter-reset: linenumber;\n    }\n\n    pre.line-numbers .line-numbers-rows {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      overflow-y: auto;\n      border-inline-end: 1px solid var(--border-color);\n      border-radius: var(--border-radius) 0 0 var(--border-radius);\n      padding: 32px 0 8px;\n      inline-size: 44px;\n      max-block-size: inherit;\n      font-size: 100%;\n      background-color: var(--primary-component-bg);\n      letter-spacing: -1px;\n      user-select: none;\n      pointer-events: none;\n      transition-property: background-color, border-color;\n    }\n\n    .line-numbers-rows > span {\n      display: block;\n      counter-increment: linenumber;\n    }\n\n    .line-numbers-rows > span::before {\n      display: block;\n      padding-inline-end: 0.8em;\n      text-align: end;\n      color: #999;\n      opacity: 0.5;\n      content: counter(linenumber);\n    }\n\n    pre::-webkit-scrollbar,\n    pre ::-webkit-scrollbar {\n      display: none;\n    }\n\n    @media print {\n      code[class*='language-'],\n      pre[class*='language-'] {\n        text-shadow: none;\n      }\n    }\n  `;\n  const darkCss = css`\n    :host {\n      --code-color: #eee;\n      --code-lang-style-color: #fd9170;\n      --code-toolbar-bg: rgb(63 63 63 / 70%);\n      --token-atrule: #c792ea;\n      --token-attr-name: #ffcb6b;\n      --token-attr-value: #a5e844;\n      --token-attribute: #a5e844;\n      --token-boolean: #c792ea;\n      --token-builtin: #ffcb6b;\n      --token-cdata: #80cbc4;\n      --token-char: #80cbc4;\n      --token-class: #ffcb6b;\n      --token-class-name: #f2ff00;\n      --token-comment: #616161;\n      --token-constant: #c792ea;\n      --token-deleted: #f66;\n      --token-doctype: #616161;\n      --token-entity: #f66;\n      --token-function: #c792ea;\n      --token-hexcode: #f2ff00;\n      --token-id: #c792ea;\n      --token-important: #c792ea;\n      --token-inserted: #80cbc4;\n      --token-keyword: #c792ea;\n      --token-number: #fd9170;\n      --token-operator: #89ddff;\n      --token-prolog: #616161;\n      --token-property: #80cbc4;\n      --token-pseudo-class: #a5e844;\n      --token-pseudo-element: #a5e844;\n      --token-punctuation: #89ddff;\n      --token-regex: #f2ff00;\n      --token-selector: #f66;\n      --token-string: #a5e844;\n      --token-symbol: #c792ea;\n      --token-tag: #f66;\n      --token-unit: #fd9170;\n      --token-url: #f66;\n      --token-variable: #f66;\n    }\n  `;\n\n  const style = createMemo(() => `${isDark() ? darkCss : ''}${baseCss}`);\n\n  return style;\n}, getOwner());\n\nexport default prismCss;\n"],"names":["createMemo","createRoot","getOwner","css","theme","prismCss","isDark","baseCss","darkCss"],"mappings":"AAAA,OAASA,cAAAA,CAAU,CAAEC,cAAAA,CAAU,CAAEC,YAAAA,CAAQ,KAAQ,UAAW,AAC5D,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAAOC,MAAW,UAAW,CAE7B,IAAMC,EAAWJ,EAAW,KAC1B,GAAM,CAAEK,OAAAA,CAAM,CAAE,CAAGF,EACbG,EAAUJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2bpB,CAAC,CACKK,EAAUL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CpB,CAAC,CAID,OAFcH,EAAW,IAAM,CAAC,EAAEM,IAAWE,EAAU,GAAG,EAAED,EAAQ,CAAC,CAGvE,EAAGL,IAEH,gBAAeG,CAAS"}
+{"version":3,"sources":["../../components/prism/css.ts"],"sourcesContent":["import { createMemo, createRoot, getOwner } from 'solid-js';\nimport { css } from '@moneko/css';\n\nimport theme from '../theme';\n\nconst prismCss = createRoot(() => {\n  const { isDark } = theme;\n  const baseCss = css`\n    [data-copy]::before {\n      position: absolute;\n      inset-block-start: 32px;\n      inset-inline: 0;\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      inline-size: fit-content;\n      font-size: var(--font-size-sm);\n      transition:\n        background-color 0.3s,\n        color 0.3s,\n        border-color 0.3s;\n      animation-fill-mode: forwards;\n      content: '复制成功';\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      content: '复制成功';\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\n        var(--transition-timing-function);\n    }\n\n    @keyframes copy-slide-in {\n      from {\n        transform: translate3d(0, -100%, 0) scale(0);\n        opacity: 0;\n      }\n\n      to {\n        transform: translate3d(0, 0, 0) scale(1);\n        opacity: 1;\n      }\n    }\n\n    @keyframes copy-slide-out {\n      from {\n        transform: translate3d(0, 0, 0) scale(1);\n        opacity: 1;\n      }\n\n      to {\n        transform: translate3d(0, -100%, 0) scale(0);\n        opacity: 0;\n      }\n    }\n\n    pre > code {\n      display: block;\n      overflow: auto;\n      margin: 0 16px 8px;\n      padding: 32px 0 8px;\n      max-inline-size: 100%;\n      font-size: var(--font-size);\n      white-space: pre-wrap;\n      line-height: 1.8;\n      pointer-events: auto;\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n      transition-property: box-shadow, background-color, border-color, color;\n    }\n\n    code[class*='language-'],\n    pre[class*='language-'] {\n      color: var(--code-color, #90a4ae);\n\n      &::selection,\n      & ::selection {\n        background-color: var(--text-selection);\n        text-shadow: 0 1px var(--primary-shadow);\n      }\n    }\n\n    .language-css > code,\n    .language-sass > code,\n    .language-scss > code {\n      color: var(--code-lang-style-color, #f76d47);\n    }\n\n    .line-numbers-rows,\n    .toolbar::after,\n    .toolbar-copy::after,\n    pre {\n      transition-duration: var(--transition-duration);\n      transition-timing-function: var(--transition-timing-function);\n    }\n\n    [class*='language-'] .namespace {\n      opacity: 0.7;\n    }\n\n    .tag {\n      color: var(--token-tag, #e53935);\n    }\n\n    .atrule {\n      color: var(--token-atrule, #7c4dff);\n    }\n\n    .attr-name {\n      color: var(--token-attr-name, #39adb5);\n    }\n\n    .attr-value {\n      color: var(--token-attr-value, #f6a434);\n    }\n\n    .attribute {\n      color: var(--token-attribute, #f6a434);\n    }\n\n    .boolean {\n      color: var(--token-boolean, #7c4dff);\n    }\n\n    .builtin {\n      color: var(--token-builtin, #39adb5);\n    }\n\n    .cdata {\n      color: var(--token-cdata, #39adb5);\n    }\n\n    .char {\n      color: var(--token-char, #39adb5);\n    }\n\n    .class {\n      color: var(--token-class, #39adb5);\n    }\n\n    .class-name,\n    .maybe-class-name {\n      color: var(--token-class-name, #6182b8);\n    }\n\n    .comment {\n      color: var(--token-comment, #aabfc9);\n    }\n\n    .constant {\n      color: var(--token-constant, #7c4dff);\n    }\n\n    .deleted {\n      color: var(--token-deleted, #e53935);\n    }\n\n    .doctype {\n      color: var(--token-doctype, #aabfc9);\n    }\n\n    .entity {\n      color: var(--token-entity, #e53935);\n    }\n\n    .function {\n      color: var(--token-function, #7c4dff);\n    }\n\n    .hexcode {\n      color: var(--token-hexcode, #f76d47);\n    }\n\n    .id {\n      font-weight: bold;\n      color: var(--token-id, #7c4dff);\n    }\n\n    .important {\n      font-weight: bold;\n      color: var(--token-important, #7c4dff);\n    }\n\n    .inserted {\n      color: var(--token-inserted, #39adb5);\n    }\n\n    .keyword {\n      color: var(--token-keyword, #7c4dff);\n    }\n\n    .number {\n      color: var(--token-number, #f76d47);\n    }\n\n    .operator {\n      color: var(--token-operator, #39adb5);\n    }\n\n    .prolog {\n      color: var(--token-prolog, #aabfc9);\n    }\n\n    .property {\n      color: var(--token-property, #39adb5);\n    }\n\n    .pseudo-class {\n      color: var(--token-pseudo-class, #f6a434);\n    }\n\n    .pseudo-element {\n      color: var(--token-pseudo-element, #f6a434);\n    }\n\n    .punctuation {\n      color: var(--token-punctuation, #39adb5);\n    }\n\n    .regex {\n      color: var(--token-regex, #6182b8);\n    }\n\n    .selector {\n      color: var(--token-selector, #e53935);\n    }\n\n    .string {\n      color: var(--token-string, #f6a434);\n    }\n\n    .symbol {\n      color: var(--token-symbol, #7c4dff);\n    }\n\n    .unit {\n      color: var(--token-unit, #f76d47);\n    }\n\n    .url {\n      color: var(--token-url, #e53935);\n    }\n\n    .variable {\n      color: var(--token-variable, #e53935);\n    }\n\n    code[class*='language-'],\n    pre,\n    .n-editor textarea {\n      font-family: 'Liberation Mono', Monaco, Menlo, Consolas, 'Source Code Pro', 'Ubuntu Mono',\n        'Microsoft Yahei', '微软雅黑', Courier, 'Helvetica Neue', 'Lantinghei SC', STXihei,\n        WenQuanYi, sans-serif;\n      text-align: start;\n      white-space: pre-wrap;\n      word-wrap: normal;\n      word-break: normal;\n      word-spacing: normal;\n      tab-size: 4;\n      hyphens: none;\n    }\n\n    .deleted:not(.prefix) {\n      display: block;\n      color: inherit;\n      background-color: rgb(255 0 0 / 10%);\n    }\n\n    .inserted:not(.prefix) {\n      display: block;\n      color: inherit;\n      background-color: rgb(0 255 128 / 10%);\n    }\n\n    span .inline-color-wrapper {\n      display: inline-block;\n      overflow: hidden;\n      margin: 0 0.333ch;\n      border: var(--border-base);\n      background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 0 / 10px 10px;\n      outline: 1px solid rgb(0 0 0 / 50%);\n      inline-size: 1.333ch;\n      block-size: 1.333ch;\n      box-sizing: border-box;\n    }\n\n    span .inline-color {\n      display: block;\n      inline-size: 120%;\n      block-size: 120%;\n    }\n\n    pre,\n    .n-editor {\n      position: relative;\n      display: block;\n      overflow: visible;\n      margin: auto;\n      border-radius: var(--border-radius);\n      max-inline-size: 100%;\n      font-size: var(--font-size);\n      white-space: pre-wrap;\n      background-color: var(--primary-component-bg);\n      box-shadow: 0 2px 8px 0 var(--primary-shadow);\n      line-height: 20px;\n      transition-property: color, background-color, box-shadow;\n    }\n\n    pre .toolbar::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      z-index: 1;\n      display: block;\n      overflow: hidden;\n      border-radius: var(--border-radius) var(--border-radius) 0 0;\n      inline-size: 100%;\n      block-size: 24px;\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      line-height: 24px;\n      text-transform: uppercase;\n      backdrop-filter: blur(10px);\n      content: attr(data-language) '';\n      transition-property: background-color, border-color, color;\n    }\n\n    pre .toolbar::before {\n      position: absolute;\n      inset-block-start: 10px;\n      inset-inline-start: 12px;\n      z-index: 3;\n      display: inline-block;\n      border-radius: var(--border-radius);\n      inline-size: 4px;\n      block-size: 4px;\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    }\n\n    pre .toolbar .toolbar-copy {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 8px;\n      z-index: 3;\n      border: none;\n      padding: 0;\n      background: none;\n      outline: none;\n      cursor: pointer;\n    }\n\n    pre .toolbar .toolbar-copy:active {\n      transform: scale(0.95);\n    }\n\n    .toolbar .toolbar-copy::after {\n      user-select: none;\n      display: block;\n      font-size: 24px;\n      font-family: sans-serif;\n      color: var(--text-color);\n      line-height: 24px;\n      content: '⎘';\n      transition-property: color, transform;\n    }\n\n    .toolbar .toolbar-copy:hover::after {\n      color: var(--primary-color, #5794ff);\n    }\n\n    pre.line-numbers > code {\n      margin: 0 10px 0 54px;\n      white-space: inherit;\n      counter-reset: linenumber;\n    }\n\n    pre.line-numbers .line-numbers-rows {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      overflow-y: auto;\n      border-inline-end: 1px solid var(--border-color);\n      border-radius: var(--border-radius) 0 0 var(--border-radius);\n      padding: 32px 0 8px;\n      inline-size: 44px;\n      max-block-size: inherit;\n      font-size: 100%;\n      background-color: var(--primary-component-bg);\n      letter-spacing: -1px;\n      user-select: none;\n      pointer-events: none;\n      transition-property: background-color, border-color;\n    }\n\n    .line-numbers-rows > span {\n      display: block;\n      counter-increment: linenumber;\n    }\n\n    .line-numbers-rows > span::before {\n      display: block;\n      padding-inline-end: 0.8em;\n      text-align: end;\n      color: #999;\n      opacity: 0.5;\n      content: counter(linenumber);\n    }\n\n    pre::-webkit-scrollbar,\n    pre ::-webkit-scrollbar {\n      display: none;\n    }\n\n    @media print {\n      code[class*='language-'],\n      pre[class*='language-'] {\n        text-shadow: none;\n      }\n    }\n  `;\n  const darkCss = css`\n    :host {\n      --code-color: #eee;\n      --code-lang-style-color: #fd9170;\n      --code-toolbar-bg: rgb(63 63 63 / 70%);\n      --token-atrule: #c792ea;\n      --token-attr-name: #ffcb6b;\n      --token-attr-value: #a5e844;\n      --token-attribute: #a5e844;\n      --token-boolean: #c792ea;\n      --token-builtin: #ffcb6b;\n      --token-cdata: #80cbc4;\n      --token-char: #80cbc4;\n      --token-class: #ffcb6b;\n      --token-class-name: #f2ff00;\n      --token-comment: #616161;\n      --token-constant: #c792ea;\n      --token-deleted: #f66;\n      --token-doctype: #616161;\n      --token-entity: #f66;\n      --token-function: #c792ea;\n      --token-hexcode: #f2ff00;\n      --token-id: #c792ea;\n      --token-important: #c792ea;\n      --token-inserted: #80cbc4;\n      --token-keyword: #c792ea;\n      --token-number: #fd9170;\n      --token-operator: #89ddff;\n      --token-prolog: #616161;\n      --token-property: #80cbc4;\n      --token-pseudo-class: #a5e844;\n      --token-pseudo-element: #a5e844;\n      --token-punctuation: #89ddff;\n      --token-regex: #f2ff00;\n      --token-selector: #f66;\n      --token-string: #a5e844;\n      --token-symbol: #c792ea;\n      --token-tag: #f66;\n      --token-unit: #fd9170;\n      --token-url: #f66;\n      --token-variable: #f66;\n    }\n  `;\n\n  const style = createMemo(() => `${isDark() ? darkCss : ''}${baseCss}`);\n\n  return style;\n}, getOwner());\n\nexport default prismCss;\n"],"names":["createMemo","createRoot","getOwner","css","theme","prismCss","isDark","baseCss","darkCss"],"mappings":"AAAA,OAASA,cAAAA,CAAU,CAAEC,cAAAA,CAAU,CAAEC,YAAAA,CAAQ,KAAQ,UAAW,AAC5D,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAOC,MAAW,UAAW,CAE7B,IAAMC,EAAWJ,EAAW,KAC1B,GAAM,CAAEK,OAAAA,CAAM,CAAE,CAAGF,EACbG,EAAUJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2bpB,CAAC,CACKK,EAAUL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CpB,CAAC,CAID,OAFcH,EAAW,IAAM,CAAC,EAAEM,IAAWE,EAAU,GAAG,EAAED,EAAQ,CAAC,CAGvE,EAAGL,IAEH,gBAAeG,CAAS"}

package/es/prism/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/prism/index.ts"],"sourcesContent":["import Prism from 'prismjs';\n// language\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-clike.js';\nimport 'prismjs/components/prism-css.js';\nimport 'prismjs/components/prism-diff.js';\nimport 'prismjs/components/prism-docker.js';\nimport 'prismjs/components/prism-git.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-jsx.js';\nimport 'prismjs/components/prism-latex.js';\nimport 'prismjs/components/prism-less.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-markup-templating.js';\nimport 'prismjs/components/prism-markup.js';\nimport 'prismjs/components/prism-regex.js';\nimport 'prismjs/components/prism-rust.js';\nimport 'prismjs/components/prism-sql.js';\nimport 'prismjs/components/prism-swift.js';\nimport 'prismjs/components/prism-toml.js';\nimport 'prismjs/components/prism-tsx.js';\nimport 'prismjs/components/prism-typescript.js';\nimport 'prismjs/components/prism-wasm.js';\nimport 'prismjs/components/prism-yaml.js';\n// plugins\nimport 'prismjs/plugins/diff-highlight/prism-diff-highlight.js';\nimport 'prismjs/plugins/highlight-keywords/prism-highlight-keywords.js';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers.js';\n\nexport default Prism;\n"],"names":["Prism"],"mappings":"AAAA,OAAOA,MAAW,SAAU,AAE5B,OAAO,kCAAmC,AAC1C,OAAO,mCAAoC,AAC3C,OAAO,iCAAkC,AACzC,OAAO,kCAAmC,AAC1C,OAAO,oCAAqC,AAC5C,OAAO,iCAAkC,AACzC,OAAO,wCAAyC,AAChD,OAAO,iCAAkC,AACzC,OAAO,mCAAoC,AAC3C,OAAO,kCAAmC,AAC1C,OAAO,sCAAuC,AAC9C,OAAO,+CAAgD,AACvD,OAAO,oCAAqC,AAC5C,OAAO,mCAAoC,AAC3C,OAAO,kCAAmC,AAC1C,OAAO,iCAAkC,AACzC,OAAO,mCAAoC,AAC3C,OAAO,kCAAmC,AAC1C,OAAO,iCAAkC,AACzC,OAAO,wCAAyC,AAChD,OAAO,kCAAmC,AAC1C,OAAO,kCAAmC,AAE1C,OAAO,wDAAyD,AAChE,OAAO,gEAAiE,AACxE,OAAO,oDAAqD,AAE5D,gBAAeA,CAAM"}
+{"version":3,"sources":["../../components/prism/index.ts"],"sourcesContent":["// language\nimport Prism from 'prismjs';\n\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-clike.js';\nimport 'prismjs/components/prism-css.js';\nimport 'prismjs/components/prism-diff.js';\nimport 'prismjs/components/prism-docker.js';\nimport 'prismjs/components/prism-git.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-jsx.js';\nimport 'prismjs/components/prism-latex.js';\nimport 'prismjs/components/prism-less.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-markup-templating.js';\nimport 'prismjs/components/prism-markup.js';\nimport 'prismjs/components/prism-regex.js';\nimport 'prismjs/components/prism-rust.js';\nimport 'prismjs/components/prism-sql.js';\nimport 'prismjs/components/prism-swift.js';\nimport 'prismjs/components/prism-toml.js';\nimport 'prismjs/components/prism-tsx.js';\nimport 'prismjs/components/prism-typescript.js';\nimport 'prismjs/components/prism-wasm.js';\nimport 'prismjs/components/prism-yaml.js';\n// plugins\nimport 'prismjs/plugins/diff-highlight/prism-diff-highlight.js';\nimport 'prismjs/plugins/highlight-keywords/prism-highlight-keywords.js';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers.js';\n\nexport default Prism;\n"],"names":["Prism"],"mappings":"AACA,OAAOA,MAAW,SAAU,AAE5B,OAAO,kCAAmC,AAC1C,OAAO,mCAAoC,AAC3C,OAAO,iCAAkC,AACzC,OAAO,kCAAmC,AAC1C,OAAO,oCAAqC,AAC5C,OAAO,iCAAkC,AACzC,OAAO,wCAAyC,AAChD,OAAO,iCAAkC,AACzC,OAAO,mCAAoC,AAC3C,OAAO,kCAAmC,AAC1C,OAAO,sCAAuC,AAC9C,OAAO,+CAAgD,AACvD,OAAO,oCAAqC,AAC5C,OAAO,mCAAoC,AAC3C,OAAO,kCAAmC,AAC1C,OAAO,iCAAkC,AACzC,OAAO,mCAAoC,AAC3C,OAAO,kCAAmC,AAC1C,OAAO,iCAAkC,AACzC,OAAO,wCAAyC,AAChD,OAAO,kCAAmC,AAC1C,OAAO,kCAAmC,AAE1C,OAAO,wDAAyD,AAChE,OAAO,gEAAiE,AACxE,OAAO,oDAAqD,AAE5D,gBAAeA,CAAM"}

package/es/provider/README.mdx

@@ -0,0 +1,10 @@
+---
+title: 响应内部变化
+subtitle: n-provider
+type: 全局
+icon: 🐩
+---
+
+# Provider
+
+> 与组件共享响应性, 当你在其它应用中希望获得 Neko UI 内部的响应性时, 可以考虑使用

package/es/provider/examples/scheme.md

@@ -0,0 +1,14 @@
+---
+title: 响应 scheme 变化
+order: 1
+---
+
+```tsx
+<n-provider
+  onScheme={function (e: CustomEvent<'light' | 'dark' | 'auto'>) {
+    console.log(`scheme change: ${e.detail};`);
+  }}
+>
+  <span>试试点击左上角的图标切换主题, 查看控制台输出</span>
+</n-provider>
+```

package/es/provider/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/provider/index.tsx"],"sourcesContent":["import { createEffect, mergeProps } from 'solid-js';\nimport { customElement, noShadowDOM } from 'solid-element';\nimport theme, { ColorScheme } from '../theme';\nimport type { CustomElement } from '..';\n\nfunction Provider(props: ProviderProps) {\n  const { baseStyle, scheme, setScheme } = theme;\n\n  noShadowDOM();\n  createEffect(() => {\n    props.onScheme?.(scheme());\n  });\n  createEffect(() => {\n    if (props.scheme) {\n      setScheme(props.scheme);\n    }\n  });\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      {props.children}\n    </>\n  );\n}\nexport interface ProviderProps {\n  /** 主题, 等同于使用 setScheme\n   * @default 'auto'\n   */\n  scheme?: keyof typeof ColorScheme;\n  /** 包裹的子项 */\n  children?: JSX.Element;\n  /** 响应 scheme 变化 */\n  onScheme?(scheme: keyof typeof ColorScheme): void;\n}\nexport type ProviderElement = CustomElement<ProviderProps, 'onScheme'>;\n\ncustomElement<ProviderProps>('n-provider', (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      onScheme(scheme: keyof typeof ColorScheme) {\n        el.dispatchEvent(\n          new CustomEvent('scheme', {\n            detail: scheme,\n          }),\n        );\n      },\n    },\n    _,\n  );\n\n  return <Provider {...props} />;\n});\nexport default Provider;\n"],"names":["createEffect","mergeProps","customElement","noShadowDOM","theme","Provider","props","baseStyle","scheme","setScheme","onScheme","children","_","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"oLAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACpD,QAASC,iBAAAA,CAAa,CAAEC,eAAAA,CAAW,KAAQ,eAAgB,AAC3D,QAAOC,MAA4B,UAAW,CAG9C,SAASC,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAWzC,OATAD,IACAH,EAAa,WACXM,EAAMI,QAAQ,EAAdJ,EAAMI,QAAQ,MAAdJ,EAAiBE,IACnB,GACAR,EAAa,KACPM,EAAME,MAAM,EACdC,EAAUH,EAAME,MAAM,CAE1B,uDAGwBD,iBACnBD,EAAMK,QAAQ,EAGrB,CAaAT,EAA6B,aAAc,CAACU,EAAGC,KAC7C,IAAMC,EAAKD,EAAIE,OAAO,CActB,SAAQV,EAbMJ,EACZ,CACES,SAASF,CAAgC,EACvCM,EAAGE,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQV,CACV,GAEJ,CACF,EACAI,GAIJ,EACA,gBAAeP,CAAS"}
+{"version":3,"sources":["../../components/provider/index.tsx"],"sourcesContent":["import { createEffect, mergeProps } from 'solid-js';\nimport { customElement, noShadowDOM } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport theme, { ColorScheme } from '../theme';\n\nfunction Provider(props: ProviderProps) {\n  const { baseStyle, scheme, setScheme } = theme;\n\n  noShadowDOM();\n  createEffect(() => {\n    props.onScheme?.(scheme());\n  });\n  createEffect(() => {\n    if (props.scheme) {\n      setScheme(props.scheme);\n    }\n  });\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      {props.children}\n    </>\n  );\n}\nexport interface ProviderProps {\n  /** 主题, 等同于使用 setScheme\n   * @default 'auto'\n   */\n  scheme?: keyof typeof ColorScheme;\n  /** 包裹的子项 */\n  children?: JSX.Element;\n  /** 响应 scheme 变化 */\n  onScheme?(scheme: keyof typeof ColorScheme): void;\n}\nexport type ProviderElement = CustomElement<ProviderProps, 'onScheme'>;\n\ncustomElement<ProviderProps>('n-provider', (_, opt) => {\n  const el = opt.element;\n  const props = mergeProps(\n    {\n      onScheme(scheme: keyof typeof ColorScheme) {\n        el.dispatchEvent(\n          new CustomEvent('scheme', {\n            detail: scheme,\n          }),\n        );\n      },\n    },\n    _,\n  );\n\n  return <Provider {...props} />;\n});\nexport default Provider;\n"],"names":["createEffect","mergeProps","customElement","noShadowDOM","theme","Provider","props","baseStyle","scheme","setScheme","onScheme","children","_","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"oLAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACpD,QAASC,iBAAAA,CAAa,CAAEC,eAAAA,CAAW,KAAQ,eAAgB,AAG3D,QAAOC,MAA4B,UAAW,CAE9C,SAASC,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAWzC,OATAD,IACAH,EAAa,WACXM,EAAMI,QAAQ,EAAdJ,EAAMI,QAAQ,MAAdJ,EAAiBE,IACnB,GACAR,EAAa,KACPM,EAAME,MAAM,EACdC,EAAUH,EAAME,MAAM,CAE1B,uDAGwBD,iBACnBD,EAAMK,QAAQ,EAGrB,CAaAT,EAA6B,aAAc,CAACU,EAAGC,KAC7C,IAAMC,EAAKD,EAAIE,OAAO,CActB,SAAQV,EAbMJ,EACZ,CACES,SAASF,CAAgC,EACvCM,EAAGE,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQV,CACV,GAEJ,CACF,EACAI,GAIJ,EACA,gBAAeP,CAAS"}

package/es/radio/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: 单选框
+subtitle: n-radio
+icon: ◉
+---
+
+# Radio 单选框
+
+> Radio 用于在多个选项中选中单个选项

package/es/radio/examples/basic.md

@@ -0,0 +1,19 @@
+---
+title: 基本使用
+description: 最简单的用法
+order: 1
+---
+
+```html
+<n-radio></n-radio>
+<script>
+  const el = container.querySelector('n-radio');
+
+  el.options = ['React', 'Vue', 'SolidJS', 'Flutter'];
+  el.value = 'Vue';
+</script>
+```
+
+```jsx
+<n-radio options={['React', 'Vue', 'SolidJS', 'Flutter']} />
+```

package/es/radio/examples/disabled-option.md

@@ -0,0 +1,19 @@
+---
+title: 禁用选项
+description: 禁用单个选项
+order: 2
+---
+
+```html
+<n-radio></n-radio>
+<script>
+  const el = container.querySelector('n-radio');
+
+  el.options = ['React', 'Vue', { value: 'SolidJS', disabled: true }, 'Flutter'];
+  el.value = 'Vue';
+</script>
+```
+
+```jsx
+<n-radio options={['React', 'Vue', { value: 'SolidJS', disabled: true }, 'Flutter']} />
+```

package/es/radio/examples/disabled.md

@@ -0,0 +1,19 @@
+---
+title: 禁用全部
+description: 禁用全部选项
+order: 3
+---
+
+```html
+<n-radio disabled="true"></n-radio>
+<script>
+  const el = container.querySelector('n-radio');
+
+  el.options = ['React', 'Vue', 'SolidJS', 'Flutter'];
+  el.value = 'Vue';
+</script>
+```
+
+```jsx
+<n-radio disabled value="Vue" options={['React', 'Vue', 'SolidJS', 'Flutter']} />
+```

package/es/radio/examples/field-names.md

@@ -0,0 +1,39 @@
+---
+title: 自定义字段
+description: 自定义节点 'label'、'value'、'options' 的字段
+order: 5
+---
+
+```html
+<n-radio value="b"></n-radio>
+<script>
+  const el = container.querySelector('n-radio');
+
+  el.options = [
+    { code: 'a', name: '选项-1' },
+    { code: 'b', name: '选项-2' },
+    { code: 'c', name: '选项-3' },
+    { code: 'd', name: '选项-4' },
+  ];
+  el.fieldNames = {
+    label: 'name',
+    value: 'code',
+  };
+</script>
+```
+
+```jsx
+<n-radio
+  value="b"
+  field-names={{
+    label: 'name',
+    value: 'code',
+  }}
+  options={[
+    { code: 'a', name: '选项-1' },
+    { code: 'b', name: '选项-2' },
+    { code: 'c', name: '选项-3' },
+    { code: 'd', name: '选项-4' },
+  ]}
+/>
+```

package/es/radio/examples/layout-vertical.md

@@ -0,0 +1,19 @@
+---
+title: 垂直排列
+description: 通过设置 `vertical` 属性来使用垂直排列
+order: 4
+---
+
+```html
+<n-radio layout="vertical"></n-radio>
+<script>
+  const el = container.querySelector('n-radio');
+
+  el.options = ['React', 'Vue', 'SolidJS', 'Flutter'];
+  el.value = 'Vue';
+</script>
+```
+
+```jsx
+<n-radio layout="vertical" value="Vue" options={['React', 'Vue', 'SolidJS', 'Flutter']} />
+```

package/es/radio/examples/status.md

@@ -0,0 +1,31 @@
+---
+title: 状态
+description: radio提供5种内置的状态
+order: 6
+---
+
+```html
+<n-radio value="b"></n-radio>
+<script>
+  const el = container.querySelector('n-radio');
+
+  el.options = [
+    { value: 'a', label: '默认' },
+    { value: 'b', label: '成功', status: 'success' },
+    { value: 'c', label: '警告', status: 'warning' },
+    { value: 'd', label: '错误', status: 'error' },
+  ];
+</script>
+```
+
+```jsx
+<n-radio
+  value="b"
+  options={[
+    { value: 'a', label: '默认' },
+    { value: 'b', label: '成功', status: 'success' },
+    { value: 'c', label: '警告', status: 'warning' },
+    { value: 'd', label: '错误', status: 'error' },
+  ]}
+/>
+```

package/es/radio/index.js

@@ -1,2 +1,2 @@
-import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{insert as i}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as a}from"solid-js/web";import{addEventListener as r}from"solid-js/web";let n=e("<style> "),d=e("<style>"),m=e('<section part="box">'),u=e('<div part="item"><input class="radio" type="radio"><label class="label" part="label">');import{For as c,Show as b,createEffect as f,createMemo as v,createSignal as p,mergeProps as h}from"solid-js";import{css as g,cx as y}from"@moneko/css";import{customElement as j}from"solid-element";import{style as w}from"./style";import{FieldName as C}from"../basic-config";import k from"../get-options";import x from"../theme";function $(e){let{baseStyle:l}=x,[h,j]=p(e.defaultValue),$=v(()=>Object.assign({},C,e.fieldNames));function _(t){if(!e.disabled&&!t.disabled){let i=t[$().value];j(i),null==e.onChange||e.onChange.call(e,i)}}function E(e,t){"Enter"===t.key&&_(e)}let A=v(()=>k(e.options,$()));return f(()=>{j(e.value)}),[(()=>{let e=n(),t=e.firstChild;return o(()=>t.data=l()),e})(),(()=>{let e=d();return e.textContent=w,e})(),s(b,{get when(){return e.css},get children(){let t=n(),i=t.firstChild;return o(()=>i.data=g(e.css)),t}}),(()=>{let l=m();return i(l,s(c,{get each(){return A()},children:l=>{let s=e.disabled||l.disabled,n=()=>{_(l)},d=$();return(()=>{let m=u(),c=m.firstChild,b=c.nextSibling;return r(m,"click",n,!0),r(m,"keyup",E.bind(null,l),!0),t(m,"tabindex",s?-1:0),t(m,"aria-disabled",s),r(c,"change",n),c.disabled=s,t(c,"tabindex",-1),i(b,()=>l[d.label]),o(i=>{let o=y("item",l.class,l.status),s=e.name;return o!==i._v$&&a(m,i._v$=o),s!==i._v$2&&t(c,"name",i._v$2=s),i},{_v$:void 0,_v$2:void 0}),o(()=>c.value=l[d.value]),o(()=>c.checked=l[d.value]===h()),m})()}})),o(()=>a(l,y("box",e.layout,e.class))),l})()]}j("n-radio",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:[],onChange:void 0,fieldNames:void 0,layout:void 0},(e,t)=>{let i=t.element,o=h({layout:i.layout||"horizontal",onChange(e){i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return f(()=>{i.removeAttribute("options"),i.removeAttribute("field-names"),i.removeAttribute("css")}),s($,o)});export default $;l(["click","keyup"]);
+import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{insert as i}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as a}from"solid-js/web";import{addEventListener as r}from"solid-js/web";let n=e("<style> "),d=e("<style>"),m=e('<section part="box">'),u=e('<div part="item"><input class="radio" type="radio"><label class="label" part="label">');import{createEffect as c,createMemo as b,createSignal as f,For as v,mergeProps as p,Show as h}from"solid-js";import{css as g,cx as y}from"@moneko/css";import{customElement as j}from"solid-element";import{FieldName as w}from"../basic-config";import C from"../get-options";import k from"../theme";import{style as x}from"./style";function $(e){let{baseStyle:l}=k,[p,j]=f(e.defaultValue),$=b(()=>Object.assign({},w,e.fieldNames));function _(t){if(!e.disabled&&!t.disabled){let i=t[$().value];j(i),null==e.onChange||e.onChange.call(e,i)}}function E(e,t){"Enter"===t.key&&_(e)}let A=b(()=>C(e.options,$()));return c(()=>{j(e.value)}),[(()=>{let e=n(),t=e.firstChild;return o(()=>t.data=l()),e})(),(()=>{let e=d();return e.textContent=x,e})(),s(h,{get when(){return e.css},get children(){let t=n(),i=t.firstChild;return o(()=>i.data=g(e.css)),t}}),(()=>{let l=m();return i(l,s(v,{get each(){return A()},children:l=>{let s=e.disabled||l.disabled,n=()=>{_(l)},d=$();return(()=>{let m=u(),c=m.firstChild,b=c.nextSibling;return r(m,"click",n,!0),r(m,"keyup",E.bind(null,l),!0),t(m,"tabindex",s?-1:0),t(m,"aria-disabled",s),r(c,"change",n),c.disabled=s,t(c,"tabindex",-1),i(b,()=>l[d.label]),o(i=>{let o=y("item",l.class,l.status),s=e.name;return o!==i._v$&&a(m,i._v$=o),s!==i._v$2&&t(c,"name",i._v$2=s),i},{_v$:void 0,_v$2:void 0}),o(()=>c.value=l[d.value]),o(()=>c.checked=l[d.value]===p()),m})()}})),o(()=>a(l,y("box",e.layout,e.class))),l})()]}j("n-radio",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:[],onChange:void 0,fieldNames:void 0,layout:void 0},(e,t)=>{let i=t.element,o=p({layout:i.layout||"horizontal",onChange(e){i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return c(()=>{i.removeAttribute("options"),i.removeAttribute("field-names"),i.removeAttribute("css")}),s($,o)});export default $;l(["click","keyup"]);
 //# sourceMappingURL=index.js.map

package/es/radio/index.js.map

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

package/es/segmented/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据展示
+title: 分段控制器
+subtitle: n-segmented
+icon: 💮
+---
+
+# Segmented 分段控制器
+
+> 展示多个选项并允许用户选择其中单个选项

package/es/segmented/examples/basic.md

@@ -0,0 +1,18 @@
+---
+title: 基本使用
+description: 最简单的用法
+order: 1
+---
+
+```html
+<n-segmented default-value="Vue"></n-segmented>
+<script>
+  const el = container.querySelector('n-segmented');
+
+  el.options = ['React', 'Vue', 'SolidJS', 'Flutter'];
+</script>
+```
+
+```jsx
+<n-segmented default-value="Vue" options={['React', 'Vue', 'SolidJS', 'Flutter']} />
+```