neko-ui 2.8.21 → 2.8.23

package/lib/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/lib/popover/index.js

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

package/lib/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","defaultProps","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","theme","mp","mergeProps","trigger","local","splitProps","open","setOpen","createSignal","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","isElementInside","type","createEffect","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","isEqual","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","createMemo","isFunction","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","cx","size","popupClass","hostStyle","addEventListener","passive","passiveSupported","onCleanup","removeEventListener","onMount","documentElement","popoverCss","Show","css","class","children","destroyInactive","Portal","portalCss","popupCss","content","Empty","customElement","_","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","defaultProps","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","theme","mp","mergeProps","trigger","local","splitProps","open","setOpen","createSignal","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","isElementInside","type","createEffect","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","isEqual","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","createMemo","isFunction","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","cx","size","popupClass","hostStyle","addEventListener","passive","passiveSupported","onCleanup","removeEventListener","onMount","documentElement","popoverCss","Show","css","class","children","destroyInactive","Portal","portalCss","popupCss","content","Empty","customElement","_","opt","el","element","dispatchEvent","CustomEvent","detail","childNodes","values","removeAttribute"],"mappings":"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"}

package/lib/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":["createRoot","isDark","theme","baseCss","css","darkCss","createMemo","getOwner"],"mappings":"wGAmfA,+CAAA,qBAnfiD,sBAC7B,4BACF,yCAiflB,EA/eiBA,GAAAA,YAAU,EAAC,KAC1B,GAAM,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAClBC,EAAUC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2bpB,CAAC,CACKC,EAAUD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CpB,CAAC,CAID,MAFcE,GAAAA,YAAU,EAAC,IAAM,CAAC,EAAEL,IAAWI,EAAU,GAAG,EAAEF,EAAQ,CAAC,CAGvE,EAAGI,GAAAA,UAAQ"}
+{"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":["createRoot","isDark","theme","baseCss","css","darkCss","createMemo","getOwner"],"mappings":"wGAofA,+CAAA,qBApfiD,sBAC7B,4BAEF,yCAiflB,EA/eiBA,GAAAA,YAAU,EAAC,KAC1B,GAAM,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAClBC,EAAUC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2bpB,CAAC,CACKC,EAAUD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CpB,CAAC,CAID,MAFcE,GAAAA,YAAU,EAAC,IAAM,CAAC,EAAEL,IAAWI,EAAU,GAAG,EAAEF,EAAQ,CAAC,CAGvE,EAAGI,GAAAA,UAAQ"}

package/lib/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":"wGA6BA,+CAAA,wBA7BkB,gDAEX,4CACA,6CACA,2CACA,4CACA,8CACA,2CACA,kDACA,2CACA,6CACA,4CACA,gDACA,yDACA,8CACA,6CACA,4CACA,2CACA,6CACA,4CACA,2CACA,kDACA,4CACA,4CAEA,kEACA,0EACA,4DAEP,EAAeA,SAAK"}
+{"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":"wGA8BA,+CAAA,wBA7BkB,gDAEX,4CACA,6CACA,2CACA,4CACA,8CACA,2CACA,kDACA,2CACA,6CACA,4CACA,gDACA,yDACA,8CACA,6CACA,4CACA,2CACA,6CACA,4CACA,2CACA,kDACA,4CACA,4CAEA,kEACA,0EACA,4DAEP,EAAeA,SAAK"}

package/lib/provider/README.mdx

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

package/lib/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/lib/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":["Provider","props","baseStyle","scheme","setScheme","theme","noShadowDOM","createEffect","onScheme","children","customElement","_","opt","el","element","mergeProps","dispatchEvent","CustomEvent","detail"],"mappings":"wGAqDA,+CAAA,+CArDyC,sBACE,8BACR,sEAGnC,SAASA,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CAW9C,MATAC,GAAAA,aAAW,IACXC,GAAAA,cAAY,EAAC,KACXN,EAAMO,QAAQ,GAAGL,IACnB,GACAI,GAAAA,cAAY,EAAC,KACPN,EAAME,MAAM,EACdC,EAAUH,EAAME,MAAM,CAE1B,iEAGwBD,0BACnBD,EAAMQ,QAAQ,EAGrB,CAaAC,GAAAA,eAAa,EAAgB,aAAc,CAACC,EAAGC,KAC7C,IAAMC,EAAKD,EAAIE,OAAO,CAChBb,EAAQc,GAAAA,YAAU,EACtB,CACEP,SAASL,CAAgC,EACvCU,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQf,CACV,GAEJ,CACF,EACAQ,GAGF,4BAAQX,EAAaC,EACvB,SACA,EAAeD"}
+{"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":["Provider","props","baseStyle","scheme","setScheme","theme","noShadowDOM","createEffect","onScheme","children","customElement","_","opt","el","element","mergeProps","dispatchEvent","CustomEvent","detail"],"mappings":"wGAsDA,+CAAA,+CAtDyC,sBACE,8BAGR,sEAEnC,SAASA,EAASC,CAAoB,EACpC,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CAW9C,MATAC,GAAAA,aAAW,IACXC,GAAAA,cAAY,EAAC,KACXN,EAAMO,QAAQ,GAAGL,IACnB,GACAI,GAAAA,cAAY,EAAC,KACPN,EAAME,MAAM,EACdC,EAAUH,EAAME,MAAM,CAE1B,iEAGwBD,0BACnBD,EAAMQ,QAAQ,EAGrB,CAaAC,GAAAA,eAAa,EAAgB,aAAc,CAACC,EAAGC,KAC7C,IAAMC,EAAKD,EAAIE,OAAO,CAChBb,EAAQc,GAAAA,YAAU,EACtB,CACEP,SAASL,CAAgC,EACvCU,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQf,CACV,GAEJ,CACF,EACAQ,GAGF,4BAAQX,EAAaC,EACvB,SACA,EAAeD"}

package/lib/radio/README.mdx

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

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/radio/index.js

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

package/lib/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":["Radio","props","baseStyle","theme","value","setValue","createSignal","defaultValue","fieldNames","createMemo","Object","assign","FieldName","onChange","item","disabled","next","onKeyUp","e","key","options","getOptions","createEffect","style","Show","css","For","readOnly","handleChange","fieldName","bind","label","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"kGAwJA,+CAAA,+CAxJ8E,sBACtD,yBACM,2BACR,qBACI,+BACH,+BACL,kRAiClB,SAASA,EAAMC,CAAiB,EAC9B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrB,CAACC,EAAOC,EAAS,CAAGC,GAAAA,cAAY,EAACL,EAAMM,YAAY,EACnDC,EAAaC,GAAAA,YAAU,EAAC,IAAMC,OAAOC,MAAM,CAAC,CAAC,EAAGC,WAAS,CAAEX,EAAMO,UAAU,GAEjF,SAASK,EAASC,CAAiB,EACjC,GAAI,CAACb,EAAMc,QAAQ,EAAI,CAACD,EAAKC,QAAQ,CAAE,CACrC,IAAMC,EAAOF,CAAI,CAACN,IAAaJ,KAAK,CAAC,CAErCC,EAASW,GACTf,EAAMY,QAAQ,GAAGG,EACnB,CACF,CACA,SAASC,EAAQH,CAAiB,CAAEI,CAAgB,EACpC,UAAVA,EAAEC,GAAG,EACPN,EAASC,EAEb,CACA,IAAMM,EAAUX,GAAAA,YAAU,EAAC,IAClBY,GAAAA,SAAU,EAACpB,EAAMmB,OAAO,CAAEZ,MAOnC,MAJAc,GAAAA,cAAY,EAAC,KACXjB,EAASJ,EAAMG,KAAK,CACtB,iEAIwBF,gDACAqB,OAAK,6BACxBC,MAAI,oBAAOvB,EAAMwB,GAAG,wEACCA,GAAAA,KAAG,EAACxB,EAAMwB,GAAG,mEAGhCC,KAAG,oBAAON,cACR,AAACN,IACA,IAAMa,EAAW1B,EAAMc,QAAQ,EAAID,EAAKC,QAAQ,CAC1Ca,EAAe,KACnBf,EAASC,EACX,EACMe,EAAYrB,IAElB,4FAOaoB,uCADAX,EAAQa,IAAI,CAAC,KAAMhB,uCAFlBa,EAAW,GAAK,wCACXA,qCAYHC,cAHAD,kCACA,uBAKTb,CAAI,CAACe,EAAUE,KAAK,CAAC,yBAlBjBC,GAAAA,IAAE,EAAC,OAAQlB,EAAKmB,KAAK,CAAEnB,EAAKoB,MAAM,IAUjCjC,EAAMkC,IAAI,sJACTrB,CAAI,CAACe,EAAUzB,KAAK,CAAC,6BAGnBU,CAAI,CAACe,EAAUzB,KAAK,CAAC,GAAKA,UAQ3C,wCAjCY4B,GAAAA,IAAE,EAAC,MAAO/B,EAAMmC,MAAM,CAAEnC,EAAMgC,KAAK,UAsCzD,CAIAI,GAAAA,eAAa,EACX,UACA,CACEJ,MAAO,KAAK,EACZR,IAAK,KAAK,EACVU,KAAM,KAAK,EACXpB,SAAU,KAAK,EACfX,MAAO,KAAK,EACZG,aAAc,KAAK,EACnBa,QAAS,EAAE,CACXP,SAAU,KAAK,EACfL,WAAY,KAAK,EACjB4B,OAAQ,KAAK,CACf,EACA,CAACE,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBxC,EAAQyC,GAAAA,YAAU,EACtB,CACEN,OAAQI,EAAGJ,MAAM,EAAI,aACrBvB,SAASG,CAAY,EACnBwB,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ7B,CACV,GAEJ,CACF,EACAsB,GAQF,MALAhB,GAAAA,cAAY,EAAC,KACXkB,EAAGM,eAAe,CAAC,WACnBN,EAAGM,eAAe,CAAC,eACnBN,EAAGM,eAAe,CAAC,MACrB,yBACQ9C,EAAUC,EACpB,SAEF,EAAeD"}
+{"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":["Radio","props","baseStyle","theme","value","setValue","createSignal","defaultValue","fieldNames","createMemo","Object","assign","FieldName","onChange","item","disabled","next","onKeyUp","e","key","options","getOptions","createEffect","style","Show","css","For","readOnly","handleChange","fieldName","bind","label","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"kGA0JA,+CAAA,+CA1J8E,sBACtD,yBACM,2BAGJ,+BACH,+BACL,uBAEI,gRAgCtB,SAASA,EAAMC,CAAiB,EAC9B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrB,CAACC,EAAOC,EAAS,CAAGC,GAAAA,cAAY,EAACL,EAAMM,YAAY,EACnDC,EAAaC,GAAAA,YAAU,EAAC,IAAMC,OAAOC,MAAM,CAAC,CAAC,EAAGC,WAAS,CAAEX,EAAMO,UAAU,GAEjF,SAASK,EAASC,CAAiB,EACjC,GAAI,CAACb,EAAMc,QAAQ,EAAI,CAACD,EAAKC,QAAQ,CAAE,CACrC,IAAMC,EAAOF,CAAI,CAACN,IAAaJ,KAAK,CAAC,CAErCC,EAASW,GACTf,EAAMY,QAAQ,GAAGG,EACnB,CACF,CACA,SAASC,EAAQH,CAAiB,CAAEI,CAAgB,EACpC,UAAVA,EAAEC,GAAG,EACPN,EAASC,EAEb,CACA,IAAMM,EAAUX,GAAAA,YAAU,EAAC,IAClBY,GAAAA,SAAU,EAACpB,EAAMmB,OAAO,CAAEZ,MAOnC,MAJAc,GAAAA,cAAY,EAAC,KACXjB,EAASJ,EAAMG,KAAK,CACtB,iEAIwBF,gDACAqB,OAAK,6BACxBC,MAAI,oBAAOvB,EAAMwB,GAAG,wEACCA,GAAAA,KAAG,EAACxB,EAAMwB,GAAG,mEAGhCC,KAAG,oBAAON,cACR,AAACN,IACA,IAAMa,EAAW1B,EAAMc,QAAQ,EAAID,EAAKC,QAAQ,CAC1Ca,EAAe,KACnBf,EAASC,EACX,EACMe,EAAYrB,IAElB,4FAOaoB,uCADAX,EAAQa,IAAI,CAAC,KAAMhB,uCAFlBa,EAAW,GAAK,wCACXA,qCAYHC,cAHAD,kCACA,uBAKTb,CAAI,CAACe,EAAUE,KAAK,CAAC,yBAlBjBC,GAAAA,IAAE,EAAC,OAAQlB,EAAKmB,KAAK,CAAEnB,EAAKoB,MAAM,IAUjCjC,EAAMkC,IAAI,sJACTrB,CAAI,CAACe,EAAUzB,KAAK,CAAC,6BAGnBU,CAAI,CAACe,EAAUzB,KAAK,CAAC,GAAKA,UAQ3C,wCAjCY4B,GAAAA,IAAE,EAAC,MAAO/B,EAAMmC,MAAM,CAAEnC,EAAMgC,KAAK,UAsCzD,CAIAI,GAAAA,eAAa,EACX,UACA,CACEJ,MAAO,KAAK,EACZR,IAAK,KAAK,EACVU,KAAM,KAAK,EACXpB,SAAU,KAAK,EACfX,MAAO,KAAK,EACZG,aAAc,KAAK,EACnBa,QAAS,EAAE,CACXP,SAAU,KAAK,EACfL,WAAY,KAAK,EACjB4B,OAAQ,KAAK,CACf,EACA,CAACE,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBxC,EAAQyC,GAAAA,YAAU,EACtB,CACEN,OAAQI,EAAGJ,MAAM,EAAI,aACrBvB,SAASG,CAAY,EACnBwB,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ7B,CACV,GAEJ,CACF,EACAsB,GAQF,MALAhB,GAAAA,cAAY,EAAC,KACXkB,EAAGM,eAAe,CAAC,WACnBN,EAAGM,eAAe,CAAC,eACnBN,EAAGM,eAAe,CAAC,MACrB,yBACQ9C,EAAUC,EACpB,SAEF,EAAeD"}

package/lib/segmented/README.mdx

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

package/lib/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']} />
+```

package/lib/segmented/examples/custom-field-names.md

@@ -0,0 +1,43 @@
+---
+title: 自定义字段名
+description: 自定义节点 'label'、'value'、'options' 的字段
+order: 6
+---
+
+```html
+<n-segmented default-value="3"></n-segmented>
+<script>
+  const el = container.querySelector('n-segmented');
+
+  el.fieldNames = {
+    label: 'name',
+    value: 'code',
+  };
+  el.options = [
+    { code: 1, name: '选项1' },
+    { code: 2, name: '选项2' },
+    { code: 3, name: '选项3' },
+  ];
+  el.onchange = function (e) {
+    console.log(e.detail);
+  };
+</script>
+```
+
+```jsx
+<n-segmented
+  default-value={3}
+  field-names={{
+    label: 'name',
+    value: 'code',
+  }}
+  options={[
+    { code: 1, name: '选项1' },
+    { code: 2, name: '选项2' },
+    { code: 3, name: '选项3' },
+  ]}
+  onchange={(e) => {
+    console.log(e.detail);
+  }}
+/>
+```