neko-ui 2.6.0-beta.0 → 2.6.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (237) hide show
  1. package/es/@moneko/app/index.js +1 -3
  2. package/es/@moneko/app/index.js.map +1 -1
  3. package/es/@moneko/coverage/index.js +1 -3
  4. package/es/@moneko/coverage/index.js.map +1 -1
  5. package/es/@moneko/locales/index.js +1 -1
  6. package/es/@moneko/locales/index.js.map +1 -1
  7. package/es/avatar/group.js +1 -1
  8. package/es/avatar/group.js.map +1 -1
  9. package/es/avatar/index.js +1 -1
  10. package/es/avatar/index.js.map +1 -1
  11. package/es/back-top/index.js +1 -1
  12. package/es/back-top/index.js.map +1 -1
  13. package/es/button/index.js +1 -1
  14. package/es/button/index.js.map +1 -1
  15. package/es/capture-screen/index.js +1 -11
  16. package/es/capture-screen/index.js.map +1 -1
  17. package/es/carousel/index.js +1 -1
  18. package/es/carousel/index.js.map +1 -1
  19. package/es/checkbox/index.js +1 -1
  20. package/es/checkbox/index.js.map +1 -1
  21. package/es/code/index.js +1 -13
  22. package/es/code/index.js.map +1 -1
  23. package/es/code/worker.js +1 -2
  24. package/es/code/worker.js.map +1 -1
  25. package/es/color-palette/index.js +1 -2
  26. package/es/color-palette/index.js.map +1 -1
  27. package/es/color-picker/index.js +1 -1
  28. package/es/color-picker/index.js.map +1 -1
  29. package/es/cron/begin-interval.js +1 -1
  30. package/es/cron/begin-interval.js.map +1 -1
  31. package/es/cron/day.js +1 -1
  32. package/es/cron/day.js.map +1 -1
  33. package/es/cron/index.js +1 -1
  34. package/es/cron/index.js.map +1 -1
  35. package/es/cron/item.js +1 -1
  36. package/es/cron/item.js.map +1 -1
  37. package/es/cron/period.js +1 -1
  38. package/es/cron/period.js.map +1 -1
  39. package/es/cron/some.js +1 -1
  40. package/es/cron/some.js.map +1 -1
  41. package/es/cron/week.js +1 -1
  42. package/es/cron/week.js.map +1 -1
  43. package/es/cron/year.js +1 -1
  44. package/es/cron/year.js.map +1 -1
  45. package/es/date-picker/date.js +1 -1
  46. package/es/date-picker/date.js.map +1 -1
  47. package/es/date-picker/index.js +1 -1
  48. package/es/date-picker/index.js.map +1 -1
  49. package/es/date-picker/month.js +1 -1
  50. package/es/date-picker/month.js.map +1 -1
  51. package/es/date-picker/panel.js +1 -1
  52. package/es/date-picker/panel.js.map +1 -1
  53. package/es/date-picker/time.js +1 -1
  54. package/es/date-picker/time.js.map +1 -1
  55. package/es/date-picker/year.js +1 -1
  56. package/es/date-picker/year.js.map +1 -1
  57. package/es/dropdown/index.js +1 -1
  58. package/es/dropdown/index.js.map +1 -1
  59. package/es/empty/index.js +1 -1
  60. package/es/empty/index.js.map +1 -1
  61. package/es/highlight-text/index.js +2 -14
  62. package/es/highlight-text/index.js.map +1 -1
  63. package/es/img/index.js +1 -1
  64. package/es/img/index.js.map +1 -1
  65. package/es/index.d.ts +1 -4
  66. package/es/index.js +1 -1
  67. package/es/index.js.map +1 -1
  68. package/es/input/index.js +1 -1
  69. package/es/input/index.js.map +1 -1
  70. package/es/input-number/index.js +1 -3
  71. package/es/input-number/index.js.map +1 -1
  72. package/es/md/index.js +1 -12
  73. package/es/md/index.js.map +1 -1
  74. package/es/menu/index.js +1 -1
  75. package/es/menu/index.js.map +1 -1
  76. package/es/pagination/index.js +1 -1
  77. package/es/pagination/index.js.map +1 -1
  78. package/es/popover/index.js +1 -2
  79. package/es/popover/index.js.map +1 -1
  80. package/es/prism/prism.js +1 -2
  81. package/es/prism/prism.js.map +1 -1
  82. package/es/provider/index.js +1 -1
  83. package/es/provider/index.js.map +1 -1
  84. package/es/radio/index.js +1 -1
  85. package/es/radio/index.js.map +1 -1
  86. package/es/segmented/index.js +1 -1
  87. package/es/segmented/index.js.map +1 -1
  88. package/es/select/index.js +1 -1
  89. package/es/select/index.js.map +1 -1
  90. package/es/skeleton/index.js +1 -1
  91. package/es/skeleton/index.js.map +1 -1
  92. package/es/spin/index.js +1 -1
  93. package/es/spin/index.js.map +1 -1
  94. package/es/switch/index.js +1 -1
  95. package/es/switch/index.js.map +1 -1
  96. package/es/table/index.js +1 -1
  97. package/es/table/index.js.map +1 -1
  98. package/es/tabs/index.js +1 -1
  99. package/es/tabs/index.js.map +1 -1
  100. package/es/tag/index.js +1 -1
  101. package/es/tag/index.js.map +1 -1
  102. package/es/theme/index.js +2 -9
  103. package/es/theme/index.js.map +1 -1
  104. package/es/tree/index.js +1 -1
  105. package/es/tree/index.js.map +1 -1
  106. package/es/typography/index.js +1 -1
  107. package/es/typography/index.js.map +1 -1
  108. package/lib/@moneko/app/index.js +1 -3
  109. package/lib/@moneko/app/index.js.map +1 -1
  110. package/lib/@moneko/coverage/index.js +1 -3
  111. package/lib/@moneko/coverage/index.js.map +1 -1
  112. package/lib/@moneko/locales/index.js +1 -1
  113. package/lib/@moneko/locales/index.js.map +1 -1
  114. package/lib/avatar/group.js +1 -1
  115. package/lib/avatar/group.js.map +1 -1
  116. package/lib/avatar/index.js +1 -1
  117. package/lib/avatar/index.js.map +1 -1
  118. package/lib/avatar/style.js +1 -1
  119. package/lib/avatar/style.js.map +1 -1
  120. package/lib/back-top/index.js +1 -1
  121. package/lib/back-top/index.js.map +1 -1
  122. package/lib/button/index.js +1 -1
  123. package/lib/button/index.js.map +1 -1
  124. package/lib/capture-screen/index.js +1 -11
  125. package/lib/capture-screen/index.js.map +1 -1
  126. package/lib/carousel/index.js +1 -1
  127. package/lib/carousel/index.js.map +1 -1
  128. package/lib/checkbox/index.js +1 -1
  129. package/lib/checkbox/index.js.map +1 -1
  130. package/lib/code/index.js +1 -13
  131. package/lib/code/index.js.map +1 -1
  132. package/lib/code/worker.js +1 -2
  133. package/lib/code/worker.js.map +1 -1
  134. package/lib/color-palette/index.js +1 -2
  135. package/lib/color-palette/index.js.map +1 -1
  136. package/lib/color-picker/index.js +1 -1
  137. package/lib/color-picker/index.js.map +1 -1
  138. package/lib/cron/begin-interval.js +1 -1
  139. package/lib/cron/begin-interval.js.map +1 -1
  140. package/lib/cron/day.js +1 -1
  141. package/lib/cron/day.js.map +1 -1
  142. package/lib/cron/hour.js +1 -1
  143. package/lib/cron/hour.js.map +1 -1
  144. package/lib/cron/index.js +1 -1
  145. package/lib/cron/index.js.map +1 -1
  146. package/lib/cron/item.js +1 -1
  147. package/lib/cron/item.js.map +1 -1
  148. package/lib/cron/minute.js +1 -1
  149. package/lib/cron/minute.js.map +1 -1
  150. package/lib/cron/month.js +1 -1
  151. package/lib/cron/month.js.map +1 -1
  152. package/lib/cron/period.js +1 -1
  153. package/lib/cron/period.js.map +1 -1
  154. package/lib/cron/second.js +1 -1
  155. package/lib/cron/second.js.map +1 -1
  156. package/lib/cron/some.js +1 -1
  157. package/lib/cron/some.js.map +1 -1
  158. package/lib/cron/week.js +1 -1
  159. package/lib/cron/week.js.map +1 -1
  160. package/lib/cron/year.js +1 -1
  161. package/lib/cron/year.js.map +1 -1
  162. package/lib/date-picker/date.js +1 -1
  163. package/lib/date-picker/date.js.map +1 -1
  164. package/lib/date-picker/dayjs.js +1 -1
  165. package/lib/date-picker/dayjs.js.map +1 -1
  166. package/lib/date-picker/index.js +1 -1
  167. package/lib/date-picker/index.js.map +1 -1
  168. package/lib/date-picker/month.js +1 -1
  169. package/lib/date-picker/month.js.map +1 -1
  170. package/lib/date-picker/panel.js +1 -1
  171. package/lib/date-picker/panel.js.map +1 -1
  172. package/lib/date-picker/time.js +1 -1
  173. package/lib/date-picker/time.js.map +1 -1
  174. package/lib/date-picker/year.js +1 -1
  175. package/lib/date-picker/year.js.map +1 -1
  176. package/lib/dropdown/index.js +1 -1
  177. package/lib/dropdown/index.js.map +1 -1
  178. package/lib/empty/index.js +1 -1
  179. package/lib/empty/index.js.map +1 -1
  180. package/lib/highlight-text/index.js +2 -14
  181. package/lib/highlight-text/index.js.map +1 -1
  182. package/lib/img/index.js +1 -1
  183. package/lib/img/index.js.map +1 -1
  184. package/lib/index.d.ts +1 -4
  185. package/lib/index.js +1 -1
  186. package/lib/index.js.map +1 -1
  187. package/lib/input/index.js +1 -1
  188. package/lib/input/index.js.map +1 -1
  189. package/lib/input-number/index.js +2 -4
  190. package/lib/input-number/index.js.map +1 -1
  191. package/lib/md/index.js +1 -12
  192. package/lib/md/index.js.map +1 -1
  193. package/lib/menu/index.js +1 -1
  194. package/lib/menu/index.js.map +1 -1
  195. package/lib/pagination/index.js +1 -1
  196. package/lib/pagination/index.js.map +1 -1
  197. package/lib/popover/index.js +1 -2
  198. package/lib/popover/index.js.map +1 -1
  199. package/lib/prism/css.js +1 -1
  200. package/lib/prism/css.js.map +1 -1
  201. package/lib/prism/prism.js +1 -2
  202. package/lib/prism/prism.js.map +1 -1
  203. package/lib/provider/index.js +1 -1
  204. package/lib/provider/index.js.map +1 -1
  205. package/lib/radio/index.js +1 -1
  206. package/lib/radio/index.js.map +1 -1
  207. package/lib/segmented/index.js +1 -1
  208. package/lib/segmented/index.js.map +1 -1
  209. package/lib/select/index.js +1 -1
  210. package/lib/select/index.js.map +1 -1
  211. package/lib/skeleton/index.js +1 -1
  212. package/lib/skeleton/index.js.map +1 -1
  213. package/lib/spin/index.js +1 -1
  214. package/lib/spin/index.js.map +1 -1
  215. package/lib/switch/index.js +1 -1
  216. package/lib/switch/index.js.map +1 -1
  217. package/lib/table/index.js +1 -1
  218. package/lib/table/index.js.map +1 -1
  219. package/lib/tabs/index.js +1 -1
  220. package/lib/tabs/index.js.map +1 -1
  221. package/lib/tag/index.js +1 -1
  222. package/lib/tag/index.js.map +1 -1
  223. package/lib/theme/index.js +2 -5
  224. package/lib/theme/index.js.map +1 -1
  225. package/lib/tree/index.js +1 -1
  226. package/lib/tree/index.js.map +1 -1
  227. package/lib/typography/index.js +1 -1
  228. package/lib/typography/index.js.map +1 -1
  229. package/package.json +6 -7
  230. package/umd/index.js +1 -1
  231. package/es/rive/index.d.ts +0 -125
  232. package/es/rive/index.js +0 -2
  233. package/es/rive/index.js.map +0 -1
  234. package/lib/rive/index.d.ts +0 -125
  235. package/lib/rive/index.js +0 -2
  236. package/lib/rive/index.js.map +0 -1
  237. package/umd/wasm/rive.wasm +0 -0
@@ -1,4 +1,2 @@
1
- /** 虚拟模块 @app
2
- * @ignore optional
3
- */export{};
1
+ export{};
4
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../components/@moneko/app/index.ts"],"sourcesContent":["/** 虚拟模块 @app\n * @ignore optional\n */\nexport interface Api {\n /** 应用名称 */\n name: string;\n /** 应用名称(大写) */\n projectName: string;\n /** 应用描述 */\n description: string;\n /** 应用版本 */\n version: string;\n /** 应用类型 */\n type: 'mobile' | 'site' | 'backstage' | 'micro' | 'library';\n /** 开发者 */\n author: Author;\n /** 存储库 */\n repository: Repository;\n /** 路由模式 */\n routerMode: 'hash' | 'browser';\n /** 根路由 */\n base: string;\n /** 类名前缀 */\n prefixCls?: string;\n /** 主题风格 */\n theme?: string;\n}\n\n/** 开发者\n * @ignore optional\n */\ninterface Author {\n /** 名称 */\n name: string;\n /** 主页 */\n url?: string;\n /** 邮箱 */\n email?: string;\n}\n\n/** 存储库\n * @ignore optional\n */\ninterface Repository {\n /** 类型 */\n type?: string;\n /** 存储库地址 */\n url?: string;\n /** 存储库目录 */\n directory?: string;\n}\n"],"names":[],"mappings":"AAAA;;CAEC"}
1
+ {"version":3,"sources":["../../../components/@moneko/app/index.ts"],"names":[],"mappings":""}
@@ -1,4 +1,2 @@
1
- /** 文件级覆盖率
2
- * @ignore optional
3
- */export{};
1
+ export{};
4
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../components/@moneko/coverage/index.ts"],"sourcesContent":["/** 文件级覆盖率\n * @ignore optional\n */\nexport interface CoverageType {\n /** 语句(statement coverage) */\n statements: string;\n /** 语句覆盖: 是不是每个语句都执行了 */\n coveredstatements: string;\n /** 条件(branch coverage) */\n conditionals: string;\n /** 条件覆盖: 是不是每个条件代码块都执行了 */\n coveredconditionals: string;\n /** 函数(function coverage) */\n methods: string;\n /** 函数覆盖: 是不是每个函数都调用了 */\n coveredmethods: string;\n}\n/** 项目级覆盖率\n * @ignore optional\n */\nexport interface ProjectCoverageType {\n /** 元素 */\n elements: string;\n /** 覆盖元素 */\n coveredelements: string;\n complexity: string;\n loc: string;\n ncloc: string;\n /** 经过测试的组件 */\n packages: string;\n /** 经过测试的文件 */\n files: string;\n /** 经过测试的类 */\n classes: string;\n}\n"],"names":[],"mappings":"AAAA;;CAEC"}
1
+ {"version":3,"sources":["../../../components/@moneko/coverage/index.ts"],"names":[],"mappings":""}
@@ -1,2 +1,2 @@
1
- /** 语言配置 */export{};
1
+ export{};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../components/@moneko/locales/index.ts"],"sourcesContent":["/** 语言配置 */\nexport interface LocaleConfig {\n /** 语言名称 (未设置时使用文件名)*/\n language?: string;\n /** 描述 */\n title: string;\n /** Icon */\n icon?: string;\n /** 翻译字典 */\n translation: Record<string, string>;\n}\n"],"names":[],"mappings":"AAAA,SAAS"}
1
+ {"version":3,"sources":["../../../components/@moneko/locales/index.ts"],"names":[],"mappings":""}
@@ -1,4 +1,4 @@
1
- import{template as e}from"solid-js/web";import{spread as r}from"solid-js/web";import{mergeProps as t}from"solid-js/web";import{insert as n}from"solid-js/web";import{getOwner as i}from"solid-js/web";import{effect as a}from"solid-js/web";import{createComponent as o}from"solid-js/web";let s=/*#__PURE__*/e("<style>"),l=/*#__PURE__*/e('<n-popover trigger="click"><n-avatar>',!0,!1),p=/*#__PURE__*/e("<div>"),m=/*#__PURE__*/e("<n-avatar>",!0,!1),d=/*#__PURE__*/e('<div class="more">');import{For as u,Show as v,createMemo as c,mergeProps as g,splitProps as f}from"solid-js";import{css as w,cx as x}from"@moneko/css";import{customElement as h}from"solid-element";import"../avatar";import"../popover";let $=w`
1
+ import{template as e}from"solid-js/web";import{spread as r}from"solid-js/web";import{mergeProps as t}from"solid-js/web";import{insert as n}from"solid-js/web";import{getOwner as i}from"solid-js/web";import{effect as a}from"solid-js/web";import{createComponent as o}from"solid-js/web";let s=e("<style>"),l=e('<n-popover trigger="click"><n-avatar>',!0,!1),p=e("<div>"),m=e("<n-avatar>",!0,!1),d=e('<div class="more">');import{For as u,Show as v,createMemo as c,mergeProps as g,splitProps as f}from"solid-js";import{css as w,cx as x}from"@moneko/css";import{customElement as h}from"solid-element";import"../avatar";import"../popover";let $=w`
2
2
  .group {
3
3
  display: inline-flex;
4
4
  align-items: center;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/avatar/group.tsx"],"sourcesContent":["import { For, Show, createMemo, mergeProps, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport '../avatar';\nimport '../popover';\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\n\nconst style = css`\n .group {\n display: inline-flex;\n align-items: center;\n\n & > n-avatar {\n display: flex;\n }\n\n & > n-avatar:not(:first-child),\n & > n-popover {\n margin-inline-start: -4%;\n transition: margin-inline-start var(--transition-duration);\n\n &:hover:not(n-popover) {\n margin-inline-start: 4px;\n\n &:has(+ n-avatar),\n &:has(+ n-popover) {\n margin-inline-end: calc(4% + 4px);\n }\n }\n }\n }\n`;\n\nconst moreCss = css`\n .more {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow-y: auto;\n padding: 8px;\n max-inline-size: 60vi;\n max-block-size: 80vb;\n gap: 8px;\n flex-wrap: wrap;\n\n & > n-avatar {\n display: flex;\n }\n }\n`;\n\nexport interface AvatarGroupProps {\n /** 头像数据 */\n data?: Omit<AvatarProps, 'size'>[];\n /** 头像尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 最多显示个数 */\n maxCount?: number;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n data: [],\n size: void 0,\n class: void 0,\n maxCount: void 0,\n css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n const props = mergeProps(defaultProps, _props);\n const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n const data = createMemo(() => local.data || []);\n const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n const more = createMemo(() => {\n const _data = data();\n const len = _data.length - (local.maxCount || _data.length);\n\n if (len > 0) {\n return _data.slice(-len);\n }\n return [];\n });\n\n return (\n <>\n <style>\n {style}\n {css(local.css)}\n </style>\n <div {...other} class={cx('group', local.class)}>\n <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n <Show when={more().length}>\n <n-popover\n arrow={true}\n trigger=\"click\"\n popup-css={moreCss}\n content={\n <div class=\"more\">\n <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n </div>\n }\n >\n <n-avatar size={local.size} username={`+${more().length}`} />\n </n-popover>\n </Show>\n </div>\n </>\n );\n}\n\ncustomElement<AvatarGroupProps>('n-avatar-group', defaultProps, AvatarGroup);\n\nexport default AvatarGroup;\n"],"names":["For","Show","createMemo","mergeProps","splitProps","css","cx","customElement","style","moreCss","defaultProps","data","size","class","maxCount","AvatarGroup","_props","props","local","other","showAvatar","slice","more","_data","len","length","a"],"mappings":"geAAA,QAASA,OAAAA,CAAG,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACzE,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,OAAO,WAAY,AACnB,OAAO,YAAa,CAGpB,IAAMC,EAAQH,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAEKI,EAAUJ,CAAG,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CAkBKK,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfT,IAAK,KAAK,CACZ,EAEA,SAASU,EAAYC,CAAwB,EAC3C,IAAMC,EAAQd,EAAWO,EAAcM,GACjC,CAACE,EAAOC,EAAM,CAAGf,EAAWa,EAAO,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EN,EAAOT,EAAW,IAAMgB,EAAMP,IAAI,EAAI,EAAE,EACxCS,EAAalB,EAAW,IAAMS,IAAOU,KAAK,CAAC,EAAGH,EAAMJ,QAAQ,GAC5DQ,EAAOpB,EAAW,KACtB,IAAMqB,EAAQZ,IACRa,EAAMD,EAAME,MAAM,CAAIP,CAAAA,EAAMJ,QAAQ,EAAIS,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,kCAGOhB,gBACAH,EAAIa,EAAMb,GAAG,2CAEPc,sBAAcb,EAAG,QAASY,EAAML,KAAK,kBAC3Cb,qBAAUoB,cAAe,AAACM,gCAAoBA,qBAASR,EAAMN,IAAI,6CACjEX,qBAAWqB,IAAOG,MAAM,yDAEd,CAAA,aAEIhB,yCAGNT,qBAAUsB,cAAS,AAACI,gCAAoBA,qBAASR,EAAMN,IAAI,gFAIhDM,EAAMN,IAAI,GAAY,CAAC,CAAC,EAAEU,IAAOG,MAAM,CAAC,CAAC,oHAMrE,CAEAlB,EAAgC,iBAAkBG,EAAcK,EAEhE,gBAAeA,CAAY"}
1
+ {"version":3,"sources":["../../components/avatar/group.tsx"],"sourcesContent":["import { For, Show, createMemo, mergeProps, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport '../avatar';\nimport '../popover';\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\n\nconst style = css`\n .group {\n display: inline-flex;\n align-items: center;\n\n & > n-avatar {\n display: flex;\n }\n\n & > n-avatar:not(:first-child),\n & > n-popover {\n margin-inline-start: -4%;\n transition: margin-inline-start var(--transition-duration);\n\n &:hover:not(n-popover) {\n margin-inline-start: 4px;\n\n &:has(+ n-avatar),\n &:has(+ n-popover) {\n margin-inline-end: calc(4% + 4px);\n }\n }\n }\n }\n`;\n\nconst moreCss = css`\n .more {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow-y: auto;\n padding: 8px;\n max-inline-size: 60vi;\n max-block-size: 80vb;\n gap: 8px;\n flex-wrap: wrap;\n\n & > n-avatar {\n display: flex;\n }\n }\n`;\n\nexport interface AvatarGroupProps {\n /** 头像数据 */\n data?: Omit<AvatarProps, 'size'>[];\n /** 头像尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 最多显示个数 */\n maxCount?: number;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n data: [],\n size: void 0,\n class: void 0,\n maxCount: void 0,\n css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n const props = mergeProps(defaultProps, _props);\n const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n const data = createMemo(() => local.data || []);\n const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n const more = createMemo(() => {\n const _data = data();\n const len = _data.length - (local.maxCount || _data.length);\n\n if (len > 0) {\n return _data.slice(-len);\n }\n return [];\n });\n\n return (\n <>\n <style>\n {style}\n {css(local.css)}\n </style>\n <div {...other} class={cx('group', local.class)}>\n <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n <Show when={more().length}>\n <n-popover\n arrow={true}\n trigger=\"click\"\n popup-css={moreCss}\n content={\n <div class=\"more\">\n <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n </div>\n }\n >\n <n-avatar size={local.size} username={`+${more().length}`} />\n </n-popover>\n </Show>\n </div>\n </>\n );\n}\n\ncustomElement<AvatarGroupProps>('n-avatar-group', defaultProps, AvatarGroup);\n\nexport default AvatarGroup;\n"],"names":["For","Show","createMemo","mergeProps","splitProps","css","cx","customElement","style","moreCss","defaultProps","data","size","class","maxCount","AvatarGroup","_props","props","local","other","showAvatar","slice","more","_data","len","length","a"],"mappings":"+ZAAA,QAASA,OAAAA,CAAG,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACzE,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,OAAO,WAAY,AACnB,OAAO,YAAa,CAGpB,IAAMC,EAAQH,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAEKI,EAAUJ,CAAG,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CAkBKK,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfT,IAAK,KAAK,CACZ,EAEA,SAASU,EAAYC,CAAwB,EAC3C,IAAMC,EAAQd,EAAWO,EAAcM,GACjC,CAACE,EAAOC,EAAM,CAAGf,EAAWa,EAAO,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EN,EAAOT,EAAW,IAAMgB,EAAMP,IAAI,EAAI,EAAE,EACxCS,EAAalB,EAAW,IAAMS,IAAOU,KAAK,CAAC,EAAGH,EAAMJ,QAAQ,GAC5DQ,EAAOpB,EAAW,KACtB,IAAMqB,EAAQZ,IACRa,EAAMD,EAAME,MAAM,CAAIP,CAAAA,EAAMJ,QAAQ,EAAIS,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,kCAGOhB,gBACAH,EAAIa,EAAMb,GAAG,2CAEPc,sBAAcb,EAAG,QAASY,EAAML,KAAK,kBAC3Cb,qBAAUoB,cAAe,AAACM,gCAAoBA,qBAASR,EAAMN,IAAI,6CACjEX,qBAAWqB,IAAOG,MAAM,yDAEd,CAAA,aAEIhB,yCAGNT,qBAAUsB,cAAS,AAACI,gCAAoBA,qBAASR,EAAMN,IAAI,gFAIhDM,EAAMN,IAAI,GAAY,CAAC,CAAC,EAAEU,IAAOG,MAAM,CAAC,CAAC,oHAMrE,CAEAlB,EAAgC,iBAAkBG,EAAcK,EAEhE,gBAAeA,CAAY"}
@@ -1,4 +1,4 @@
1
- import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{spread as r}from"solid-js/web";import{setAttribute as s}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as i}from"solid-js/web";import{effect as l}from"solid-js/web";import{createComponent as a}from"solid-js/web";let n=/*#__PURE__*/t("<style>"),m=/*#__PURE__*/t("<img>"),c=/*#__PURE__*/t("<span>"),d=/*#__PURE__*/t("<div>"),p=/*#__PURE__*/t('<svg viewBox="0 0 1 1" aria-hidden="true" overflow="hidden"><defs><clipPath id="clipPathAvatar" clipPathUnits="objectBoundingBox"><path d="M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z" fill="#7483AB">');import{Match as h,Switch as u,createEffect as v,createMemo as f,createSignal as L,mergeProps as A,splitProps as w}from"solid-js";import{css as b,cx as g}from"@moneko/css";import{customElement as y}from"solid-element";import{style as j}from"./style";import $ from"../theme";function z(t){let y,z;let{baseStyle:P}=$,x={small:"24px",normal:"32px",large:"40px"},C=A({size:32},t),[_,B]=w(C,["class","css","src","alt","size","color","username"]),[V,W]=L(1),H=f(()=>{let e=x[_.size]||`${_.size}px`;return b`
1
+ import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{spread as r}from"solid-js/web";import{setAttribute as s}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as i}from"solid-js/web";import{effect as l}from"solid-js/web";import{createComponent as a}from"solid-js/web";let n=t("<style>"),m=t("<img>"),c=t("<span>"),d=t("<div>"),p=t('<svg viewBox="0 0 1 1" aria-hidden="true" overflow="hidden"><defs><clipPath id="clipPathAvatar" clipPathUnits="objectBoundingBox"><path d="M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z" fill="#7483AB">');import{Match as h,Switch as u,createEffect as v,createMemo as f,createSignal as L,mergeProps as A,splitProps as w}from"solid-js";import{css as b,cx as g}from"@moneko/css";import{customElement as y}from"solid-element";import{style as j}from"./style";import $ from"../theme";function z(t){let y,z;let{baseStyle:P}=$,x={small:"24px",normal:"32px",large:"40px"},C=A({size:32},t),[_,B]=w(C,["class","css","src","alt","size","color","username"]),[V,W]=L(1),H=f(()=>{let e=x[_.size]||`${_.size}px`;return b`
2
2
  .avatar {
3
3
  --avatar-color: ${_.color};
4
4
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/avatar/index.tsx"],"sourcesContent":["import {\n Match,\n Switch,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n splitProps,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '../index';\n\nexport interface AvatarProps {\n /** 头像 */\n src?: string;\n /** 替代文本 */\n alt?: string;\n /** 尺寸\n * @default 'normal'\n */\n size?: number | BasicConfig['size'];\n /** 用户名 */\n username?: string;\n /** 背景颜色 */\n color?: string;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\nexport type AvatarElement = CustomElement<AvatarProps>;\n\nfunction Avatar(_: AvatarProps) {\n const { baseStyle } = theme;\n const avatarSize: Record<string, string> = {\n small: '24px',\n normal: '32px',\n large: '40px',\n };\n\n const props = mergeProps({ size: 32 }, _);\n const [local, other] = splitProps(props, [\n 'class',\n 'css',\n 'src',\n 'alt',\n 'size',\n 'color',\n 'username',\n ]);\n let box: HTMLDivElement | undefined;\n let label: HTMLSpanElement | undefined;\n const [scale, setScale] = createSignal(1);\n\n const _style = createMemo(() => {\n const size = avatarSize[local.size] || `${local.size}px`;\n\n return css`\n .avatar {\n --avatar-color: ${local.color};\n\n inline-size: ${size};\n block-size: ${size};\n }\n `;\n });\n\n createEffect(() => {\n if (label && box) {\n if (label.clientWidth + 6 > box.clientWidth) {\n setScale((box.clientWidth - 6) / label.clientWidth);\n }\n }\n });\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {_style()}\n {css(local.css)}\n </style>\n <div ref={box} class={cx('avatar', local.class)} {...other}>\n <Switch>\n <Match when={typeof local.src === 'string'}>\n <img src={local.src} alt={local.alt} />\n </Match>\n <Match when={local.username}>\n <span ref={label} style={{ transform: `scale(${scale()})` }}>\n {local.username}\n </span>\n </Match>\n </Switch>\n </div>\n <svg\n viewBox=\"0 0 1 1\"\n aria-hidden=\"true\"\n style={{ position: 'absolute', width: '0', height: '0' }}\n overflow=\"hidden\"\n >\n <defs>\n <clipPath id=\"clipPathAvatar\" clipPathUnits=\"objectBoundingBox\">\n <path\n d=\"M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z\"\n fill=\"#7483AB\"\n />\n </clipPath>\n </defs>\n </svg>\n </>\n );\n}\n\ncustomElement<AvatarProps>(\n 'n-avatar',\n {\n css: void 0,\n size: void 0,\n src: void 0,\n alt: void 0,\n username: void 0,\n color: void 0,\n class: void 0,\n },\n Avatar,\n);\nexport default Avatar;\n"],"names":["Match","Switch","createEffect","createMemo","createSignal","mergeProps","splitProps","css","cx","customElement","style","theme","Avatar","_","box","label","baseStyle","avatarSize","small","normal","large","props","size","local","other","scale","setScale","_style","color","clientWidth","class","src","alt","username"],"mappings":"80EAAA,QACEA,SAAAA,CAAK,CACLC,UAAAA,CAAM,CACNC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,cAAAA,CAAU,KACL,UAAW,AAClB,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAW,UAAW,CAuB7B,SAASC,EAAOC,CAAc,MAkBxBC,EACAC,EAlBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAChBM,EAAqC,CACzCC,MAAO,OACPC,OAAQ,OACRC,MAAO,MACT,EAEMC,EAAQhB,EAAW,CAAEiB,KAAM,EAAG,EAAGT,GACjC,CAACU,EAAOC,EAAM,CAAGlB,EAAWe,EAAO,CACvC,QACA,MACA,MACA,MACA,OACA,QACA,WACD,EAGK,CAACI,EAAOC,EAAS,CAAGtB,EAAa,GAEjCuB,EAASxB,EAAW,KACxB,IAAMmB,EAAOL,CAAU,CAACM,EAAMD,IAAI,CAAC,EAAI,CAAC,EAAEC,EAAMD,IAAI,CAAC,EAAE,CAAC,CAExD,OAAOf,CAAG,CAAC;;wBAES,EAAEgB,EAAMK,KAAK,CAAC;;qBAEjB,EAAEN,EAAK;oBACR,EAAEA,EAAK;;IAEvB,CAAC,AACH,GAUA,OARApB,EAAa,KACPa,GAASD,GACPC,EAAMc,WAAW,CAAG,EAAIf,EAAIe,WAAW,EACzCH,EAAS,AAACZ,CAAAA,EAAIe,WAAW,CAAG,CAAA,EAAKd,EAAMc,WAAW,CAGxD,+BAKOb,YACAN,YACAiB,gBACApB,EAAIgB,EAAMhB,GAAG,gCAENO,oCAAAA,8BAAYN,EAAG,SAAUe,EAAMO,KAAK,IAAON,gBAClDvB,2BACED,oBAAY,AAAqB,UAArB,OAAOuB,EAAMQ,GAAG,8CACjBR,EAAMQ,GAAG,GAAOR,EAAMS,GAAG,0GAEpChC,qBAAYuB,EAAMU,QAAQ,6BACdlB,oCAAAA,YACRQ,EAAMU,QAAQ,SAD8BR,oCAAT,CAAC,MAAM,EAAEA,IAAQ,CAAC,CAAC,+JAuBrE,CAEAhB,EACE,WACA,CACEF,IAAK,KAAK,EACVe,KAAM,KAAK,EACXS,IAAK,KAAK,EACVC,IAAK,KAAK,EACVC,SAAU,KAAK,EACfL,MAAO,KAAK,EACZE,MAAO,KAAK,CACd,EACAlB,EAEF,gBAAeA,CAAO"}
1
+ {"version":3,"sources":["../../components/avatar/index.tsx"],"sourcesContent":["import {\n Match,\n Switch,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n splitProps,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '../index';\n\nexport interface AvatarProps {\n /** 头像 */\n src?: string;\n /** 替代文本 */\n alt?: string;\n /** 尺寸\n * @default 'normal'\n */\n size?: number | BasicConfig['size'];\n /** 用户名 */\n username?: string;\n /** 背景颜色 */\n color?: string;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\nexport type AvatarElement = CustomElement<AvatarProps>;\n\nfunction Avatar(_: AvatarProps) {\n const { baseStyle } = theme;\n const avatarSize: Record<string, string> = {\n small: '24px',\n normal: '32px',\n large: '40px',\n };\n\n const props = mergeProps({ size: 32 }, _);\n const [local, other] = splitProps(props, [\n 'class',\n 'css',\n 'src',\n 'alt',\n 'size',\n 'color',\n 'username',\n ]);\n let box: HTMLDivElement | undefined;\n let label: HTMLSpanElement | undefined;\n const [scale, setScale] = createSignal(1);\n\n const _style = createMemo(() => {\n const size = avatarSize[local.size] || `${local.size}px`;\n\n return css`\n .avatar {\n --avatar-color: ${local.color};\n\n inline-size: ${size};\n block-size: ${size};\n }\n `;\n });\n\n createEffect(() => {\n if (label && box) {\n if (label.clientWidth + 6 > box.clientWidth) {\n setScale((box.clientWidth - 6) / label.clientWidth);\n }\n }\n });\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {_style()}\n {css(local.css)}\n </style>\n <div ref={box} class={cx('avatar', local.class)} {...other}>\n <Switch>\n <Match when={typeof local.src === 'string'}>\n <img src={local.src} alt={local.alt} />\n </Match>\n <Match when={local.username}>\n <span ref={label} style={{ transform: `scale(${scale()})` }}>\n {local.username}\n </span>\n </Match>\n </Switch>\n </div>\n <svg\n viewBox=\"0 0 1 1\"\n aria-hidden=\"true\"\n style={{ position: 'absolute', width: '0', height: '0' }}\n overflow=\"hidden\"\n >\n <defs>\n <clipPath id=\"clipPathAvatar\" clipPathUnits=\"objectBoundingBox\">\n <path\n d=\"M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z\"\n fill=\"#7483AB\"\n />\n </clipPath>\n </defs>\n </svg>\n </>\n );\n}\n\ncustomElement<AvatarProps>(\n 'n-avatar',\n {\n css: void 0,\n size: void 0,\n src: void 0,\n alt: void 0,\n username: void 0,\n color: void 0,\n class: void 0,\n },\n Avatar,\n);\nexport default Avatar;\n"],"names":["Match","Switch","createEffect","createMemo","createSignal","mergeProps","splitProps","css","cx","customElement","style","theme","Avatar","_","box","label","baseStyle","avatarSize","small","normal","large","props","size","local","other","scale","setScale","_style","color","clientWidth","class","src","alt","username"],"mappings":"6wEAAA,QACEA,SAAAA,CAAK,CACLC,UAAAA,CAAM,CACNC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,cAAAA,CAAU,KACL,UAAW,AAClB,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAW,UAAW,CAuB7B,SAASC,EAAOC,CAAc,MAkBxBC,EACAC,EAlBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAChBM,EAAqC,CACzCC,MAAO,OACPC,OAAQ,OACRC,MAAO,MACT,EAEMC,EAAQhB,EAAW,CAAEiB,KAAM,EAAG,EAAGT,GACjC,CAACU,EAAOC,EAAM,CAAGlB,EAAWe,EAAO,CACvC,QACA,MACA,MACA,MACA,OACA,QACA,WACD,EAGK,CAACI,EAAOC,EAAS,CAAGtB,EAAa,GAEjCuB,EAASxB,EAAW,KACxB,IAAMmB,EAAOL,CAAU,CAACM,EAAMD,IAAI,CAAC,EAAI,CAAC,EAAEC,EAAMD,IAAI,CAAC,EAAE,CAAC,CAExD,OAAOf,CAAG,CAAC;;wBAES,EAAEgB,EAAMK,KAAK,CAAC;;qBAEjB,EAAEN,EAAK;oBACR,EAAEA,EAAK;;IAEvB,CAAC,AACH,GAUA,OARApB,EAAa,KACPa,GAASD,GACPC,EAAMc,WAAW,CAAG,EAAIf,EAAIe,WAAW,EACzCH,EAAS,AAACZ,CAAAA,EAAIe,WAAW,CAAG,CAAA,EAAKd,EAAMc,WAAW,CAGxD,+BAKOb,YACAN,YACAiB,gBACApB,EAAIgB,EAAMhB,GAAG,gCAENO,oCAAAA,8BAAYN,EAAG,SAAUe,EAAMO,KAAK,IAAON,gBAClDvB,2BACED,oBAAY,AAAqB,UAArB,OAAOuB,EAAMQ,GAAG,8CACjBR,EAAMQ,GAAG,GAAOR,EAAMS,GAAG,0GAEpChC,qBAAYuB,EAAMU,QAAQ,6BACdlB,oCAAAA,YACRQ,EAAMU,QAAQ,SAD8BR,oCAAT,CAAC,MAAM,EAAEA,IAAQ,CAAC,CAAC,+JAuBrE,CAEAhB,EACE,WACA,CACEF,IAAK,KAAK,EACVe,KAAM,KAAK,EACXS,IAAK,KAAK,EACVC,IAAK,KAAK,EACVC,SAAU,KAAK,EACfL,MAAO,KAAK,EACZE,MAAO,KAAK,CACd,EACAlB,EAEF,gBAAeA,CAAO"}
@@ -1,2 +1,2 @@
1
- import{template as t}from"solid-js/web";import{spread as e}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as i}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{addEventListener as l}from"solid-js/web";let n=/*#__PURE__*/t("<style>"),m=/*#__PURE__*/t("<div>");import{Show as a,createComponent as c,createEffect as u,createMemo as p,createSignal as d,mergeProps as b,onCleanup as g,onMount as f,splitProps as v}from"solid-js";import y from"@moneko/common/lib/getMaxZindex";import h from"@moneko/common/lib/getScrollTop";import w from"@moneko/common/lib/isFunction";import{css as k,cx as j}from"@moneko/css";import{customElement as H}from"solid-element";import{Portal as x}from"solid-js/web";import{style as E}from"./style";import L from"../theme";function S(t){let{baseStyle:r,isDark:c}=L,u=b({target:window,visibilityHeight:400},t),[H,S]=v(u,["class","target","mount","css","visibilityHeight"]),[T,z]=d(null),A=p(()=>w(H.target)?H.target():H.target),C=p(()=>{let t=c()?"rgb(255 255 255 / 45%)":"var(--primary-border)";return`:host {--back-top-bg: ${t};}`});function D(){var t;null==(t=A())||t.scrollTo({top:0,behavior:"smooth"})}function F(){!1===T()&&z(null)}function M(t){t.preventDefault();let e=0,o=0,i=A();i&&(e=h(i),o=i.offsetHeight||0);let r=e>o/3||e>H.visibilityHeight;return!!T()!==r&&z(r),!1}return f(()=>{A().addEventListener("scroll",M,!1)}),g(()=>{A().removeEventListener("scroll",M,!1)}),s(a,{get when(){return null!==T()},get children(){return s(x,{useShadow:!0,get mount(){return H.mount},get children(){return[(()=>{let t=n();return i(t,r,null),i(t,C,null),i(t,E,null),i(t,()=>k(H.css),null),t})(),(()=>{let t=m();return l(t,"click",D,!0),l(t,"animationend",F),e(t,o({get class(){return j("back-top",!1===T()&&"back-top-out",H.class)},get style(){return{"z-index":y().toString()}}},S),!1,!1),t})()]}})}})}H("n-back-top",{class:void 0,css:void 0,visibilityHeight:void 0,mount:void 0,target:void 0},(t,e)=>{let o=e.element;o.mount||(o.style.position="sticky",o.style.bottom="24px",o.style.right="24px",o.style.display="block",o.style.pointerEvents="none");let i=b({css:o.css,visibilityHeight:o.visibilityHeight,mount:o.renderRoot,target:o.target},t);return u(()=>{o.removeAttribute("css")}),c(S,i)});export default S;r(["click"]);
1
+ import{template as t}from"solid-js/web";import{spread as e}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as i}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{addEventListener as l}from"solid-js/web";let n=t("<style>"),m=t("<div>");import{Show as a,createComponent as c,createEffect as u,createMemo as p,createSignal as d,mergeProps as b,onCleanup as g,onMount as f,splitProps as v}from"solid-js";import y from"@moneko/common/lib/getMaxZindex";import h from"@moneko/common/lib/getScrollTop";import w from"@moneko/common/lib/isFunction";import{css as k,cx as j}from"@moneko/css";import{customElement as H}from"solid-element";import{Portal as x}from"solid-js/web";import{style as E}from"./style";import L from"../theme";function S(t){let{baseStyle:r,isDark:c}=L,u=b({target:window,visibilityHeight:400},t),[H,S]=v(u,["class","target","mount","css","visibilityHeight"]),[T,z]=d(null),A=p(()=>w(H.target)?H.target():H.target),C=p(()=>{let t=c()?"rgb(255 255 255 / 45%)":"var(--primary-border)";return`:host {--back-top-bg: ${t};}`});function D(){var t;null==(t=A())||t.scrollTo({top:0,behavior:"smooth"})}function F(){!1===T()&&z(null)}function M(t){t.preventDefault();let e=0,o=0,i=A();i&&(e=h(i),o=i.offsetHeight||0);let r=e>o/3||e>H.visibilityHeight;return!!T()!==r&&z(r),!1}return f(()=>{A().addEventListener("scroll",M,!1)}),g(()=>{A().removeEventListener("scroll",M,!1)}),s(a,{get when(){return null!==T()},get children(){return s(x,{useShadow:!0,get mount(){return H.mount},get children(){return[(()=>{let t=n();return i(t,r,null),i(t,C,null),i(t,E,null),i(t,()=>k(H.css),null),t})(),(()=>{let t=m();return l(t,"click",D,!0),l(t,"animationend",F),e(t,o({get class(){return j("back-top",!1===T()&&"back-top-out",H.class)},get style(){return{"z-index":y().toString()}}},S),!1,!1),t})()]}})}})}H("n-back-top",{class:void 0,css:void 0,visibilityHeight:void 0,mount:void 0,target:void 0},(t,e)=>{let o=e.element;o.mount||(o.style.position="sticky",o.style.bottom="24px",o.style.right="24px",o.style.display="block",o.style.pointerEvents="none");let i=b({css:o.css,visibilityHeight:o.visibilityHeight,mount:o.renderRoot,target:o.target},t);return u(()=>{o.removeAttribute("css")}),c(S,i)});export default S;r(["click"]);
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/back-top/index.tsx"],"sourcesContent":["import {\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n onMount,\n splitProps,\n} from 'solid-js';\nimport { getMaxZindex, getScrollTop, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface BackTopProps {\n /** 设置需要监听其滚动事件的元素\n * @default window\n */\n target?: HTMLElement | (() => HTMLElement);\n /** 挂载到指定的元素\n * @default body\n */\n mount?: HTMLElement;\n /** 滚动高度达到此参数值才出现 BackTop */\n visibilityHeight?: number;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\n\nfunction BackTop(_: BackTopProps) {\n const { baseStyle, isDark } = theme;\n const props = mergeProps({ target: window as unknown as HTMLElement, visibilityHeight: 400 }, _);\n const [local, other] = splitProps(props, ['class', 'target', 'mount', 'css', 'visibilityHeight']);\n const [show, setShow] = createSignal<boolean | null>(null);\n const target = createMemo(() => (isFunction(local.target) ? local.target() : local.target));\n\n const themeStyle = createMemo(() => {\n const bg = isDark() ? 'rgb(255 255 255 / 45%)' : 'var(--primary-border)';\n\n return `:host {--back-top-bg: ${bg};}`;\n });\n\n function handleBackTop() {\n target()?.scrollTo({\n top: 0,\n behavior: 'smooth',\n });\n }\n function exit() {\n if (show() === false) {\n setShow(null);\n }\n }\n function handleScrollY(e: Event) {\n e.preventDefault();\n let scrollTop = 0;\n let offsetHeight = 0;\n const _target = target();\n\n if (_target) {\n scrollTop = getScrollTop(_target);\n offsetHeight = _target.offsetHeight || 0;\n }\n const nextShow = scrollTop > offsetHeight / 3 || scrollTop > local.visibilityHeight;\n\n if (Boolean(show()) !== nextShow) {\n setShow(nextShow);\n }\n return false;\n }\n\n onMount(() => {\n target().addEventListener('scroll', handleScrollY, false);\n });\n onCleanup(() => {\n target().removeEventListener('scroll', handleScrollY, false);\n });\n return (\n <Show when={show() !== null}>\n <Portal useShadow mount={local.mount}>\n <style>\n {baseStyle()}\n {themeStyle()}\n {style}\n {css(local.css)}\n </style>\n <div\n onAnimationEnd={exit}\n class={cx('back-top', show() === false && 'back-top-out', local.class)}\n onClick={handleBackTop}\n style={{ 'z-index': getMaxZindex().toString() }}\n {...other}\n />\n </Portal>\n </Show>\n );\n}\n\nexport type BackTopElement = CustomElement<BackTopProps>;\n\ncustomElement<BackTopProps>(\n 'n-back-top',\n {\n class: void 0,\n css: void 0,\n visibilityHeight: void 0,\n mount: void 0,\n target: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n\n if (!el.mount) {\n el.style.position = 'sticky';\n el.style.bottom = '24px';\n el.style.right = '24px';\n el.style.display = 'block';\n el.style.pointerEvents = 'none';\n }\n const props = mergeProps(\n {\n css: el.css,\n visibilityHeight: el.visibilityHeight,\n mount: el.renderRoot as HTMLElement,\n target: el.target,\n },\n _,\n );\n\n createEffect(() => {\n el.removeAttribute('css');\n });\n return createComponent(BackTop, props);\n },\n);\nexport default BackTop;\n"],"names":["Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","splitProps","getMaxZindex","getScrollTop","isFunction","css","cx","customElement","Portal","style","theme","BackTop","_","baseStyle","isDark","props","target","window","visibilityHeight","local","other","show","setShow","themeStyle","bg","handleBackTop","scrollTo","top","behavior","exit","handleScrollY","e","preventDefault","scrollTop","offsetHeight","_target","nextShow","Boolean","addEventListener","removeEventListener","mount","class","toString","opt","el","element","position","bottom","right","display","pointerEvents","renderRoot","removeAttribute"],"mappings":"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"}
1
+ {"version":3,"sources":["../../components/back-top/index.tsx"],"sourcesContent":["import {\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n onMount,\n splitProps,\n} from 'solid-js';\nimport { getMaxZindex, getScrollTop, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface BackTopProps {\n /** 设置需要监听其滚动事件的元素\n * @default window\n */\n target?: HTMLElement | (() => HTMLElement);\n /** 挂载到指定的元素\n * @default body\n */\n mount?: HTMLElement;\n /** 滚动高度达到此参数值才出现 BackTop */\n visibilityHeight?: number;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\n\nfunction BackTop(_: BackTopProps) {\n const { baseStyle, isDark } = theme;\n const props = mergeProps({ target: window as unknown as HTMLElement, visibilityHeight: 400 }, _);\n const [local, other] = splitProps(props, ['class', 'target', 'mount', 'css', 'visibilityHeight']);\n const [show, setShow] = createSignal<boolean | null>(null);\n const target = createMemo(() => (isFunction(local.target) ? local.target() : local.target));\n\n const themeStyle = createMemo(() => {\n const bg = isDark() ? 'rgb(255 255 255 / 45%)' : 'var(--primary-border)';\n\n return `:host {--back-top-bg: ${bg};}`;\n });\n\n function handleBackTop() {\n target()?.scrollTo({\n top: 0,\n behavior: 'smooth',\n });\n }\n function exit() {\n if (show() === false) {\n setShow(null);\n }\n }\n function handleScrollY(e: Event) {\n e.preventDefault();\n let scrollTop = 0;\n let offsetHeight = 0;\n const _target = target();\n\n if (_target) {\n scrollTop = getScrollTop(_target);\n offsetHeight = _target.offsetHeight || 0;\n }\n const nextShow = scrollTop > offsetHeight / 3 || scrollTop > local.visibilityHeight;\n\n if (Boolean(show()) !== nextShow) {\n setShow(nextShow);\n }\n return false;\n }\n\n onMount(() => {\n target().addEventListener('scroll', handleScrollY, false);\n });\n onCleanup(() => {\n target().removeEventListener('scroll', handleScrollY, false);\n });\n return (\n <Show when={show() !== null}>\n <Portal useShadow mount={local.mount}>\n <style>\n {baseStyle()}\n {themeStyle()}\n {style}\n {css(local.css)}\n </style>\n <div\n onAnimationEnd={exit}\n class={cx('back-top', show() === false && 'back-top-out', local.class)}\n onClick={handleBackTop}\n style={{ 'z-index': getMaxZindex().toString() }}\n {...other}\n />\n </Portal>\n </Show>\n );\n}\n\nexport type BackTopElement = CustomElement<BackTopProps>;\n\ncustomElement<BackTopProps>(\n 'n-back-top',\n {\n class: void 0,\n css: void 0,\n visibilityHeight: void 0,\n mount: void 0,\n target: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n\n if (!el.mount) {\n el.style.position = 'sticky';\n el.style.bottom = '24px';\n el.style.right = '24px';\n el.style.display = 'block';\n el.style.pointerEvents = 'none';\n }\n const props = mergeProps(\n {\n css: el.css,\n visibilityHeight: el.visibilityHeight,\n mount: el.renderRoot as HTMLElement,\n target: el.target,\n },\n _,\n );\n\n createEffect(() => {\n el.removeAttribute('css');\n });\n return createComponent(BackTop, props);\n },\n);\nexport default BackTop;\n"],"names":["Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","splitProps","getMaxZindex","getScrollTop","isFunction","css","cx","customElement","Portal","style","theme","BackTop","_","baseStyle","isDark","props","target","window","visibilityHeight","local","other","show","setShow","themeStyle","bg","handleBackTop","scrollTo","top","behavior","exit","handleScrollY","e","preventDefault","scrollTop","offsetHeight","_target","nextShow","Boolean","addEventListener","removeEventListener","mount","class","toString","opt","el","element","position","bottom","right","display","pointerEvents","renderRoot","removeAttribute"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{template as e}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as t}from"solid-js/web";import{createComponent as i}from"solid-js/web";let l=/*#__PURE__*/e("<style>"),n=/*#__PURE__*/e('<span class="icon" part="icon">'),r=/*#__PURE__*/e('<span class="label" part="label">');import{Show as s,createComponent as d,createEffect as c,createMemo as a,createSignal as m,mergeProps as p,splitProps as f}from"solid-js";import u from"@moneko/common/lib/isFunction";import{css as b,cx as g}from"@moneko/css";import{customElement as h}from"solid-element";import{Dynamic as v}from"solid-js/web";import{style as k}from"./style";import w from"../theme";function j(e){let d;let{baseStyle:c}=w,h=p({size:"normal",type:"default"},e),[j,y]=f(h,["ghost","fill","circle","dashed","flat","link","danger","children","block","size","type","class","icon","css","disabled","tag"]),[z,C]=m(!1),A=a(()=>u(j.icon)?j.icon():j.icon);return[(()=>{let e=l();return t(e,c,null),t(e,k,null),t(e,()=>b(j.css),null),e})(),i(v,o({ref(e){let o=d;"function"==typeof o?o(e):d=e},get component(){return j.link?"a":j.tag||"button"},get class(){return g("btn",j.type,j.size,j.danger&&"danger",j.block&&"block",j.fill&&"fill",j.circle&&"circle",j.flat&&"flat",j.dashed&&"dashed",j.ghost&&"ghost",j.link&&"link",j.disabled&&"disabled",z()&&"without")},part:"button",onClick:function(){j.disabled||C(!0)},onAnimationEnd:function(){C(!1)},get disabled(){return j.disabled},role:"button"},y,{get children(){return[i(s,{get when(){return j.icon},get children(){let e=n();return t(e,A),e}}),(()=>{let e=r();return t(e,()=>j.children),e})()]}}))]}h("n-button",{class:void 0,css:void 0,type:void 0,ghost:void 0,fill:void 0,circle:void 0,dashed:void 0,flat:void 0,disabled:void 0,block:void 0,link:void 0,danger:void 0,size:void 0,icon:void 0,tag:void 0},(e,o)=>{let t=o.element,i=p({css:t.css,children:[...t.childNodes.values()]},e);return c(()=>{t.replaceChildren(),t.removeAttribute("css")}),d(j,i)});export default j;
1
+ import{template as e}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as t}from"solid-js/web";import{createComponent as i}from"solid-js/web";let l=e("<style>"),n=e('<span class="icon" part="icon">'),r=e('<span class="label" part="label">');import{Show as s,createComponent as d,createEffect as c,createMemo as a,createSignal as m,mergeProps as p,splitProps as f}from"solid-js";import u from"@moneko/common/lib/isFunction";import{css as b,cx as g}from"@moneko/css";import{customElement as h}from"solid-element";import{Dynamic as v}from"solid-js/web";import{style as k}from"./style";import w from"../theme";function j(e){let d;let{baseStyle:c}=w,h=p({size:"normal",type:"default"},e),[j,y]=f(h,["ghost","fill","circle","dashed","flat","link","danger","children","block","size","type","class","icon","css","disabled","tag"]),[z,C]=m(!1),A=a(()=>u(j.icon)?j.icon():j.icon);return[(()=>{let e=l();return t(e,c,null),t(e,k,null),t(e,()=>b(j.css),null),e})(),i(v,o({ref(e){let o=d;"function"==typeof o?o(e):d=e},get component(){return j.link?"a":j.tag||"button"},get class(){return g("btn",j.type,j.size,j.danger&&"danger",j.block&&"block",j.fill&&"fill",j.circle&&"circle",j.flat&&"flat",j.dashed&&"dashed",j.ghost&&"ghost",j.link&&"link",j.disabled&&"disabled",z()&&"without")},part:"button",onClick:function(){j.disabled||C(!0)},onAnimationEnd:function(){C(!1)},get disabled(){return j.disabled},role:"button"},y,{get children(){return[i(s,{get when(){return j.icon},get children(){let e=n();return t(e,A),e}}),(()=>{let e=r();return t(e,()=>j.children),e})()]}}))]}h("n-button",{class:void 0,css:void 0,type:void 0,ghost:void 0,fill:void 0,circle:void 0,dashed:void 0,flat:void 0,disabled:void 0,block:void 0,link:void 0,danger:void 0,size:void 0,icon:void 0,tag:void 0},(e,o)=>{let t=o.element,i=p({css:t.css,children:[...t.childNodes.values()]},e);return c(()=>{t.replaceChildren(),t.removeAttribute("css")}),d(j,i)});export default j;
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/button/index.tsx"],"sourcesContent":["import {\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n splitProps,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Dynamic } from 'solid-js/web';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface ButtonProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 按钮类型 */\n type?: 'success' | 'error' | 'primary' | 'warning' | 'default';\n /** 透明背景 */\n ghost?: boolean;\n /** 实色背景 */\n fill?: boolean;\n /** 圆形按钮 */\n circle?: boolean;\n /** 虚线按钮 */\n dashed?: boolean;\n /** 扁平按钮 */\n flat?: boolean;\n /** 禁用按钮 */\n disabled?: boolean;\n /** 块按钮 */\n block?: boolean;\n /** 链接按钮 */\n link?: boolean;\n /** 危险按钮 */\n danger?: boolean;\n /** 自定义 tag\n * @since 2.1.0\n */\n tag?: string;\n /** 按钮尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 按钮前面添加一个图标 */\n icon?: (() => JSX.Element) | JSX.Element;\n children?: JSX.Element;\n}\nexport type ButtonElement = CustomElement<ButtonProps>;\n\nfunction Button(_: ButtonProps) {\n const { baseStyle } = theme;\n const _props = mergeProps({ size: 'normal', type: 'default' }, _);\n const [local, other] = splitProps(_props, [\n 'ghost',\n 'fill',\n 'circle',\n 'dashed',\n 'flat',\n 'link',\n 'danger',\n 'children',\n 'block',\n 'size',\n 'type',\n 'class',\n 'icon',\n 'css',\n 'disabled',\n 'tag',\n ]);\n let ref: HTMLButtonElement | undefined;\n const [animating, setAnimating] = createSignal(false);\n\n function handleClick() {\n if (!local.disabled) {\n setAnimating(true);\n }\n }\n function handleAnimationEnd() {\n setAnimating(false);\n }\n const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {css(local.css)}\n </style>\n <Dynamic\n ref={ref}\n component={local.link ? 'a' : local.tag || 'button'}\n class={cx(\n 'btn',\n local.type,\n local.size,\n local.danger && 'danger',\n local.block && 'block',\n local.fill && 'fill',\n local.circle && 'circle',\n local.flat && 'flat',\n local.dashed && 'dashed',\n local.ghost && 'ghost',\n local.link && 'link',\n local.disabled && 'disabled',\n animating() && 'without',\n )}\n part=\"button\"\n onClick={handleClick}\n onAnimationEnd={handleAnimationEnd}\n disabled={local.disabled}\n role=\"button\"\n {...other}\n >\n <Show when={local.icon}>\n <span class=\"icon\" part=\"icon\">\n {icon()}\n </span>\n </Show>\n <span class=\"label\" part=\"label\">\n {local.children}\n </span>\n </Dynamic>\n </>\n );\n}\n\ncustomElement<ButtonProps>(\n 'n-button',\n {\n class: void 0,\n css: void 0,\n type: void 0,\n ghost: void 0,\n fill: void 0,\n circle: void 0,\n dashed: void 0,\n flat: void 0,\n disabled: void 0,\n block: void 0,\n link: void 0,\n danger: void 0,\n size: void 0,\n icon: void 0,\n tag: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n css: el.css,\n children: [...el.childNodes.values()],\n },\n _,\n );\n\n createEffect(() => {\n el.replaceChildren();\n el.removeAttribute('css');\n });\n\n return createComponent(Button, props);\n },\n);\nexport default Button;\n"],"names":["Show","createComponent","createEffect","createMemo","createSignal","mergeProps","splitProps","isFunction","css","cx","customElement","Dynamic","style","theme","Button","_","ref","baseStyle","_props","size","type","local","other","animating","setAnimating","icon","link","tag","danger","block","fill","circle","flat","dashed","ghost","disabled","children","class","opt","el","element","props","childNodes","values","replaceChildren","removeAttribute"],"mappings":"qUAAA,QACEA,QAAAA,CAAI,CACJC,mBAAAA,CAAe,CACfC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,cAAAA,CAAU,KACL,UAAW,AAClB,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,WAAAA,CAAO,KAAQ,cAAe,AACvC,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAW,UAAW,CA0C7B,SAASC,EAAOC,CAAc,MAqBxBC,EApBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAChBK,EAASb,EAAW,CAAEc,KAAM,SAAUC,KAAM,SAAU,EAAGL,GACzD,CAACM,EAAOC,EAAM,CAAGhB,EAAWY,EAAQ,CACxC,QACA,OACA,SACA,SACA,OACA,OACA,SACA,WACA,QACA,OACA,OACA,QACA,OACA,MACA,WACA,MACD,EAEK,CAACK,EAAWC,EAAa,CAAGpB,EAAa,CAAA,GAUzCqB,EAAOtB,EAAW,IAAOI,EAAWc,EAAMI,IAAI,EAAIJ,EAAMI,IAAI,GAAKJ,EAAMI,IAAI,EAEjF,kCAGOR,YACAL,gBACAJ,EAAIa,EAAMb,GAAG,gBAEfG,kBACMK,4BAAAA,4BACMK,EAAMK,IAAI,CAAG,IAAML,EAAMM,GAAG,EAAI,6BACpClB,EACL,MACAY,EAAMD,IAAI,CACVC,EAAMF,IAAI,CACVE,EAAMO,MAAM,EAAI,SAChBP,EAAMQ,KAAK,EAAI,QACfR,EAAMS,IAAI,EAAI,OACdT,EAAMU,MAAM,EAAI,SAChBV,EAAMW,IAAI,EAAI,OACdX,EAAMY,MAAM,EAAI,SAChBZ,EAAMa,KAAK,EAAI,QACfb,EAAMK,IAAI,EAAI,OACdL,EAAMc,QAAQ,EAAI,WAClBZ,KAAe,kCAjCvB,WACOF,EAAMc,QAAQ,EACjBX,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBH,EAAMc,QAAQ,iBAEpBb,2BAEHtB,qBAAWqB,EAAMI,IAAI,sCAEjBA,uCAIFJ,EAAMe,QAAQ,aAKzB,CAEA1B,EACE,WACA,CACE2B,MAAO,KAAK,EACZ7B,IAAK,KAAK,EACVY,KAAM,KAAK,EACXc,MAAO,KAAK,EACZJ,KAAM,KAAK,EACXC,OAAQ,KAAK,EACbE,OAAQ,KAAK,EACbD,KAAM,KAAK,EACXG,SAAU,KAAK,EACfN,MAAO,KAAK,EACZH,KAAM,KAAK,EACXE,OAAQ,KAAK,EACbT,KAAM,KAAK,EACXM,KAAM,KAAK,EACXE,IAAK,KAAK,CACZ,EACA,CAACZ,EAAGuB,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQpC,EACZ,CACEG,IAAK+B,EAAG/B,GAAG,CACX4B,SAAU,IAAIG,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACA5B,GAQF,OALAb,EAAa,KACXqC,EAAGK,eAAe,GAClBL,EAAGM,eAAe,CAAC,MACrB,GAEO5C,EAAgBa,EAAQ2B,EACjC,EAEF,gBAAe3B,CAAO"}
1
+ {"version":3,"sources":["../../components/button/index.tsx"],"sourcesContent":["import {\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n splitProps,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Dynamic } from 'solid-js/web';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface ButtonProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 按钮类型 */\n type?: 'success' | 'error' | 'primary' | 'warning' | 'default';\n /** 透明背景 */\n ghost?: boolean;\n /** 实色背景 */\n fill?: boolean;\n /** 圆形按钮 */\n circle?: boolean;\n /** 虚线按钮 */\n dashed?: boolean;\n /** 扁平按钮 */\n flat?: boolean;\n /** 禁用按钮 */\n disabled?: boolean;\n /** 块按钮 */\n block?: boolean;\n /** 链接按钮 */\n link?: boolean;\n /** 危险按钮 */\n danger?: boolean;\n /** 自定义 tag\n * @since 2.1.0\n */\n tag?: string;\n /** 按钮尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 按钮前面添加一个图标 */\n icon?: (() => JSX.Element) | JSX.Element;\n children?: JSX.Element;\n}\nexport type ButtonElement = CustomElement<ButtonProps>;\n\nfunction Button(_: ButtonProps) {\n const { baseStyle } = theme;\n const _props = mergeProps({ size: 'normal', type: 'default' }, _);\n const [local, other] = splitProps(_props, [\n 'ghost',\n 'fill',\n 'circle',\n 'dashed',\n 'flat',\n 'link',\n 'danger',\n 'children',\n 'block',\n 'size',\n 'type',\n 'class',\n 'icon',\n 'css',\n 'disabled',\n 'tag',\n ]);\n let ref: HTMLButtonElement | undefined;\n const [animating, setAnimating] = createSignal(false);\n\n function handleClick() {\n if (!local.disabled) {\n setAnimating(true);\n }\n }\n function handleAnimationEnd() {\n setAnimating(false);\n }\n const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {css(local.css)}\n </style>\n <Dynamic\n ref={ref}\n component={local.link ? 'a' : local.tag || 'button'}\n class={cx(\n 'btn',\n local.type,\n local.size,\n local.danger && 'danger',\n local.block && 'block',\n local.fill && 'fill',\n local.circle && 'circle',\n local.flat && 'flat',\n local.dashed && 'dashed',\n local.ghost && 'ghost',\n local.link && 'link',\n local.disabled && 'disabled',\n animating() && 'without',\n )}\n part=\"button\"\n onClick={handleClick}\n onAnimationEnd={handleAnimationEnd}\n disabled={local.disabled}\n role=\"button\"\n {...other}\n >\n <Show when={local.icon}>\n <span class=\"icon\" part=\"icon\">\n {icon()}\n </span>\n </Show>\n <span class=\"label\" part=\"label\">\n {local.children}\n </span>\n </Dynamic>\n </>\n );\n}\n\ncustomElement<ButtonProps>(\n 'n-button',\n {\n class: void 0,\n css: void 0,\n type: void 0,\n ghost: void 0,\n fill: void 0,\n circle: void 0,\n dashed: void 0,\n flat: void 0,\n disabled: void 0,\n block: void 0,\n link: void 0,\n danger: void 0,\n size: void 0,\n icon: void 0,\n tag: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n css: el.css,\n children: [...el.childNodes.values()],\n },\n _,\n );\n\n createEffect(() => {\n el.replaceChildren();\n el.removeAttribute('css');\n });\n\n return createComponent(Button, props);\n },\n);\nexport default Button;\n"],"names":["Show","createComponent","createEffect","createMemo","createSignal","mergeProps","splitProps","isFunction","css","cx","customElement","Dynamic","style","theme","Button","_","ref","baseStyle","_props","size","type","local","other","animating","setAnimating","icon","link","tag","danger","block","fill","circle","flat","dashed","ghost","disabled","children","class","opt","el","element","props","childNodes","values","replaceChildren","removeAttribute"],"mappings":"8RAAA,QACEA,QAAAA,CAAI,CACJC,mBAAAA,CAAe,CACfC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,cAAAA,CAAU,KACL,UAAW,AAClB,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,WAAAA,CAAO,KAAQ,cAAe,AACvC,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAW,UAAW,CA0C7B,SAASC,EAAOC,CAAc,MAqBxBC,EApBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAChBK,EAASb,EAAW,CAAEc,KAAM,SAAUC,KAAM,SAAU,EAAGL,GACzD,CAACM,EAAOC,EAAM,CAAGhB,EAAWY,EAAQ,CACxC,QACA,OACA,SACA,SACA,OACA,OACA,SACA,WACA,QACA,OACA,OACA,QACA,OACA,MACA,WACA,MACD,EAEK,CAACK,EAAWC,EAAa,CAAGpB,EAAa,CAAA,GAUzCqB,EAAOtB,EAAW,IAAOI,EAAWc,EAAMI,IAAI,EAAIJ,EAAMI,IAAI,GAAKJ,EAAMI,IAAI,EAEjF,kCAGOR,YACAL,gBACAJ,EAAIa,EAAMb,GAAG,gBAEfG,kBACMK,4BAAAA,4BACMK,EAAMK,IAAI,CAAG,IAAML,EAAMM,GAAG,EAAI,6BACpClB,EACL,MACAY,EAAMD,IAAI,CACVC,EAAMF,IAAI,CACVE,EAAMO,MAAM,EAAI,SAChBP,EAAMQ,KAAK,EAAI,QACfR,EAAMS,IAAI,EAAI,OACdT,EAAMU,MAAM,EAAI,SAChBV,EAAMW,IAAI,EAAI,OACdX,EAAMY,MAAM,EAAI,SAChBZ,EAAMa,KAAK,EAAI,QACfb,EAAMK,IAAI,EAAI,OACdL,EAAMc,QAAQ,EAAI,WAClBZ,KAAe,kCAjCvB,WACOF,EAAMc,QAAQ,EACjBX,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBH,EAAMc,QAAQ,iBAEpBb,2BAEHtB,qBAAWqB,EAAMI,IAAI,sCAEjBA,uCAIFJ,EAAMe,QAAQ,aAKzB,CAEA1B,EACE,WACA,CACE2B,MAAO,KAAK,EACZ7B,IAAK,KAAK,EACVY,KAAM,KAAK,EACXc,MAAO,KAAK,EACZJ,KAAM,KAAK,EACXC,OAAQ,KAAK,EACbE,OAAQ,KAAK,EACbD,KAAM,KAAK,EACXG,SAAU,KAAK,EACfN,MAAO,KAAK,EACZH,KAAM,KAAK,EACXE,OAAQ,KAAK,EACbT,KAAM,KAAK,EACXM,KAAM,KAAK,EACXE,IAAK,KAAK,CACZ,EACA,CAACZ,EAAGuB,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQpC,EACZ,CACEG,IAAK+B,EAAG/B,GAAG,CACX4B,SAAU,IAAIG,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACA5B,GAQF,OALAb,EAAa,KACXqC,EAAGK,eAAe,GAClBL,EAAGM,eAAe,CAAC,MACrB,GAEO5C,EAAgBa,EAAQ2B,EACjC,EAEF,gBAAe3B,CAAO"}
@@ -1,12 +1,2 @@
1
- import{_ as e}from"@swc/helpers/_/_async_to_generator";import{_ as r}from"@swc/helpers/_/_extends";import{use as t}from"solid-js/web";import{template as o}from"solid-js/web";import{spread as n}from"solid-js/web";import{mergeProps as a}from"solid-js/web";import{memo as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as s}from"solid-js/web";import{effect as c}from"solid-js/web";import{delegateEvents as d}from"solid-js/web";import{createComponent as p}from"solid-js/web";import{className as u}from"solid-js/web";import{addEventListener as v}from"solid-js/web";let m=/*#__PURE__*/o("<style>"),f=/*#__PURE__*/o('<n-button class="btn">',!0,!1),w=/*#__PURE__*/o('<n-button type="error" class="btn">',!0,!1),R=/*#__PURE__*/o('<div class="record"><n-button class="btn"><span>',!0,!1),b=/*#__PURE__*/o('<div class="view"><span></span><video autoplay>'),C=/*#__PURE__*/o('<div><div class="controller"><n-button class="btn">',!0,!1);import{Show as h,createComponent as S,createEffect as E,createMemo as g,createSignal as x,mergeProps as T,onCleanup as _,splitProps as j,untrack as y}from"solid-js";import k from"@moneko/common/lib/downloadBlob";import $ from"@moneko/common/lib/isFunction";import{css as D,cx as A}from"@moneko/css";import{customElement as O}from"solid-element";import{style as B}from"./style";import"../button";import L from"../theme";let M={video:!0,audio:{echoCancellation:!0,noiseSuppression:!0,sampleRate:44100}},F={inactive:"primary",paused:"warning",recording:"success"};function I(o){let d;let{baseStyle:S}=L,O=T({options:M,captureScreenText:"捕获屏幕",stopCaptureText:"停止捕获",startRecorderText:"开始录制",stopRecorderText:"停止录制",pausedRecorderText:"暂停录制",recorderingText:"录制中",onErrorRecorder:null},o),[I,N]=j(O,["options","preview","controls","recorder","filename","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","onStopRecorder","onStartRecorder","onStopCapture","onStartCapture","onRecorderDataAvailable","onErrorCapture","onSaveRecorder","class","css"]),P=[],[q,z]=x(null),[G,H]=x(null),[J,K]=x("inactive");// 开始录制
2
- function Q(){let e=y(q);if(e){switch($(I.onStartRecorder)&&I.onStartRecorder(e.state),e.state){case"inactive":e.start();break;case"paused":e.resume();break;default:e.pause()}K(e.state)}}function U(e){null==P||P.push(e.data),null==I.onRecorderDataAvailable||I.onRecorderDataAvailable.call(I,e)}// 停止录制
3
- function V(){let e=y(q);e&&("inactive"!==e.state&&e.stop(),K(e.state)),null==I.onStopRecorder||I.onStopRecorder.call(I)}function W(){if(!(null==P?void 0:P.length))return;// 将录制内容保存到本地
4
- let e=new Blob(P,{type:"video/webm"}),r=I.filename||new Date().toISOString(),t=`${r}.webm`;null==P||P.splice(0),I.onSaveRecorder&&I.onSaveRecorder(e,t),// 保存文件
5
- k(e,t)}// 停止捕获屏幕
6
- function X(){// 如果在录制则先停止
7
- V();let e=y(G);if(e){let r=e.getTracks();null==r||r.forEach(e=>e.stop()),H(null)}null==I.onStopCapture||I.onStopCapture.call(I)}function Y(){return Z.apply(this,arguments)}function Z(){return(Z=// 开始捕获屏幕
8
- e(function*(){X();try{let e=yield navigator.mediaDevices.getDisplayMedia(r({},M,I.options));e&&(// 监听停止捕获屏幕
9
- e.addEventListener("inactive",X,!1),H(e)),null==I.onStartCapture||I.onStartCapture.call(I,e)}catch(e){null==I.onErrorCapture||I.onErrorCapture.call(I,e)}})).apply(this,arguments)}E(()=>{let e=G();I.preview&&d&&e&&(d.srcObject=e)}),E(()=>{let e=G();if(null==e?void 0:e.active){let r=new MediaRecorder(e);r.onstop=W,r.onerror=I.onErrorRecorder,// 每次timeslice记录毫秒级媒体时(或未记录整个媒体时,如果timeslice未指定)定期触发
10
- r.ondataavailable=U,z(r)}else z(null)}),_(()=>{let e=y(q);// 未录制时不需要停止
11
- e&&(null==e?void 0:e.state)!=="inactive"&&e.stop();let r=y(G);if(r){let e=r.getTracks();e.forEach(e=>e.stop())}});let ee=g(()=>({paused:I.pausedRecorderText,recording:I.recorderingText,inactive:I.startRecorderText})[J()]);return[(()=>{let e=m();return l(e,S,null),l(e,B,null),l(e,()=>D(I.css),null),e})(),(()=>{let e=C(),r=e.firstChild,o=r.firstChild;return n(e,a({get class(){return A("capture-screen",I.class)}},N),!1,!0),v(o,"click",Y,!0),o._$owner=s(),l(o,()=>I.captureScreenText),l(r,p(h,{get when(){return G()},get children(){return[(()=>{let e=f();return v(e,"click",X,!0),e.danger=!0,e._$owner=s(),l(e,()=>I.stopCaptureText),e})(),p(h,{get when(){return I.recorder},get children(){let e=R(),r=e.firstChild,t=r.firstChild;return v(r,"click",Q,!0),r._$owner=s(),l(t,ee),l(e,p(h,{get when(){return"inactive"!==J()},get children(){let e=w();return v(e,"click",V,!0),e._$owner=s(),l(e,()=>I.stopRecorderText),e}}),null),c(()=>r.type=F[J()]),e}})]}}),null),l(e,p(h,{get when(){return i(()=>!!I.preview)()&&G()},get children(){let e=b(),r=e.firstChild,o=r.nextSibling,n=d;return"function"==typeof n?t(n,o):d=o,c(e=>{let t=A("recording"===J()&&"recording","paused"===J()&&"paused"),n=I.controls&&null!==G();return t!==e._v$&&u(r,e._v$=t),n!==e._v$2&&(o.controls=e._v$2=n),e},{_v$:void 0,_v$2:void 0}),e}}),null),e})()]}O("n-capture-screen",{class:void 0,css:void 0,options:void 0,preview:void 0,controls:void 0,recorder:void 0,filename:void 0,captureScreenText:void 0,stopCaptureText:void 0,startRecorderText:void 0,stopRecorderText:void 0,pausedRecorderText:void 0,recorderingText:void 0,onErrorRecorder:void 0,onStopRecorder:void 0,onStartRecorder:void 0,onRecorderDataAvailable:void 0,onErrorCapture:void 0,onStopCapture:void 0,onStartCapture:void 0,onSaveRecorder:void 0},(e,r)=>{let t=r.element,o=T({onErrorRecorder(e){t.dispatchEvent(new CustomEvent("errorrecorder",{detail:e}))},onStopRecorder(){t.dispatchEvent(new CustomEvent("stoprecorder",{detail:null}))},onStartRecorder(e){t.dispatchEvent(new CustomEvent("startrecorder",{detail:e}))},onRecorderDataAvailable(e){t.dispatchEvent(new CustomEvent("recorderdataavailable",{detail:e}))},onErrorCapture(e){t.dispatchEvent(new CustomEvent("errorcapture",{detail:e}))},onStopCapture(){t.dispatchEvent(new CustomEvent("stopcapture",{detail:null}))},onStartCapture(e){t.dispatchEvent(new CustomEvent("startcapture",{detail:e}))},onSaveRecorder(e,r){t.dispatchEvent(new CustomEvent("saverecorder",{detail:[e,r]}))}},e);return S(I,o)});export default I;d(["click"]);
1
+ import{_ as e}from"@swc/helpers/_/_async_to_generator";import{_ as r}from"@swc/helpers/_/_extends";import{use as t}from"solid-js/web";import{template as o}from"solid-js/web";import{spread as n}from"solid-js/web";import{mergeProps as a}from"solid-js/web";import{memo as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as s}from"solid-js/web";import{effect as c}from"solid-js/web";import{delegateEvents as d}from"solid-js/web";import{createComponent as p}from"solid-js/web";import{className as u}from"solid-js/web";import{addEventListener as v}from"solid-js/web";let m=o("<style>"),f=o('<n-button class="btn">',!0,!1),w=o('<n-button type="error" class="btn">',!0,!1),R=o('<div class="record"><n-button class="btn"><span>',!0,!1),b=o('<div class="view"><span></span><video autoplay>'),C=o('<div><div class="controller"><n-button class="btn">',!0,!1);import{Show as h,createComponent as S,createEffect as E,createMemo as g,createSignal as x,mergeProps as T,onCleanup as _,splitProps as j,untrack as y}from"solid-js";import k from"@moneko/common/lib/downloadBlob";import $ from"@moneko/common/lib/isFunction";import{css as D,cx as A}from"@moneko/css";import{customElement as O}from"solid-element";import{style as B}from"./style";import"../button";import L from"../theme";let M={video:!0,audio:{echoCancellation:!0,noiseSuppression:!0,sampleRate:44100}},F={inactive:"primary",paused:"warning",recording:"success"};function I(o){let d;let{baseStyle:S}=L,O=T({options:M,captureScreenText:"捕获屏幕",stopCaptureText:"停止捕获",startRecorderText:"开始录制",stopRecorderText:"停止录制",pausedRecorderText:"暂停录制",recorderingText:"录制中",onErrorRecorder:null},o),[I,N]=j(O,["options","preview","controls","recorder","filename","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","onStopRecorder","onStartRecorder","onStopCapture","onStartCapture","onRecorderDataAvailable","onErrorCapture","onSaveRecorder","class","css"]),P=[],[q,z]=x(null),[G,H]=x(null),[J,K]=x("inactive");function Q(){let e=y(q);if(e){switch($(I.onStartRecorder)&&I.onStartRecorder(e.state),e.state){case"inactive":e.start();break;case"paused":e.resume();break;default:e.pause()}K(e.state)}}function U(e){null==P||P.push(e.data),null==I.onRecorderDataAvailable||I.onRecorderDataAvailable.call(I,e)}function V(){let e=y(q);e&&("inactive"!==e.state&&e.stop(),K(e.state)),null==I.onStopRecorder||I.onStopRecorder.call(I)}function W(){if(!(null==P?void 0:P.length))return;let e=new Blob(P,{type:"video/webm"}),r=I.filename||new Date().toISOString(),t=`${r}.webm`;null==P||P.splice(0),I.onSaveRecorder&&I.onSaveRecorder(e,t),k(e,t)}function X(){V();let e=y(G);if(e){let r=e.getTracks();null==r||r.forEach(e=>e.stop()),H(null)}null==I.onStopCapture||I.onStopCapture.call(I)}function Y(){return Z.apply(this,arguments)}function Z(){return(Z=e(function*(){X();try{let e=yield navigator.mediaDevices.getDisplayMedia(r({},M,I.options));e&&(e.addEventListener("inactive",X,!1),H(e)),null==I.onStartCapture||I.onStartCapture.call(I,e)}catch(e){null==I.onErrorCapture||I.onErrorCapture.call(I,e)}})).apply(this,arguments)}E(()=>{let e=G();I.preview&&d&&e&&(d.srcObject=e)}),E(()=>{let e=G();if(null==e?void 0:e.active){let r=new MediaRecorder(e);r.onstop=W,r.onerror=I.onErrorRecorder,r.ondataavailable=U,z(r)}else z(null)}),_(()=>{let e=y(q);e&&(null==e?void 0:e.state)!=="inactive"&&e.stop();let r=y(G);if(r){let e=r.getTracks();e.forEach(e=>e.stop())}});let ee=g(()=>({paused:I.pausedRecorderText,recording:I.recorderingText,inactive:I.startRecorderText})[J()]);return[(()=>{let e=m();return l(e,S,null),l(e,B,null),l(e,()=>D(I.css),null),e})(),(()=>{let e=C(),r=e.firstChild,o=r.firstChild;return n(e,a({get class(){return A("capture-screen",I.class)}},N),!1,!0),v(o,"click",Y,!0),o._$owner=s(),l(o,()=>I.captureScreenText),l(r,p(h,{get when(){return G()},get children(){return[(()=>{let e=f();return v(e,"click",X,!0),e.danger=!0,e._$owner=s(),l(e,()=>I.stopCaptureText),e})(),p(h,{get when(){return I.recorder},get children(){let e=R(),r=e.firstChild,t=r.firstChild;return v(r,"click",Q,!0),r._$owner=s(),l(t,ee),l(e,p(h,{get when(){return"inactive"!==J()},get children(){let e=w();return v(e,"click",V,!0),e._$owner=s(),l(e,()=>I.stopRecorderText),e}}),null),c(()=>r.type=F[J()]),e}})]}}),null),l(e,p(h,{get when(){return i(()=>!!I.preview)()&&G()},get children(){let e=b(),r=e.firstChild,o=r.nextSibling,n=d;return"function"==typeof n?t(n,o):d=o,c(e=>{let t=A("recording"===J()&&"recording","paused"===J()&&"paused"),n=I.controls&&null!==G();return t!==e._v$&&u(r,e._v$=t),n!==e._v$2&&(o.controls=e._v$2=n),e},{_v$:void 0,_v$2:void 0}),e}}),null),e})()]}O("n-capture-screen",{class:void 0,css:void 0,options:void 0,preview:void 0,controls:void 0,recorder:void 0,filename:void 0,captureScreenText:void 0,stopCaptureText:void 0,startRecorderText:void 0,stopRecorderText:void 0,pausedRecorderText:void 0,recorderingText:void 0,onErrorRecorder:void 0,onStopRecorder:void 0,onStartRecorder:void 0,onRecorderDataAvailable:void 0,onErrorCapture:void 0,onStopCapture:void 0,onStartCapture:void 0,onSaveRecorder:void 0},(e,r)=>{let t=r.element,o=T({onErrorRecorder(e){t.dispatchEvent(new CustomEvent("errorrecorder",{detail:e}))},onStopRecorder(){t.dispatchEvent(new CustomEvent("stoprecorder",{detail:null}))},onStartRecorder(e){t.dispatchEvent(new CustomEvent("startrecorder",{detail:e}))},onRecorderDataAvailable(e){t.dispatchEvent(new CustomEvent("recorderdataavailable",{detail:e}))},onErrorCapture(e){t.dispatchEvent(new CustomEvent("errorcapture",{detail:e}))},onStopCapture(){t.dispatchEvent(new CustomEvent("stopcapture",{detail:null}))},onStartCapture(e){t.dispatchEvent(new CustomEvent("startcapture",{detail:e}))},onSaveRecorder(e,r){t.dispatchEvent(new CustomEvent("saverecorder",{detail:[e,r]}))}},e);return S(I,o)});export default I;d(["click"]);
12
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/capture-screen/index.tsx"],"sourcesContent":["import {\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n splitProps,\n untrack,\n} from 'solid-js';\nimport { downloadBlob, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport '../button';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\ndeclare interface MediaRecorderDataAvailableEvent extends Event {\n /** MediaRecorderDataAvailableEvent */\n data: Any;\n}\n\nexport interface CaptureScreenProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** MediaStreamConstraints */\n options?: MediaStreamConstraints;\n /** 是否预览 */\n preview?: boolean;\n /** 预览时是否显示控制器 */\n controls?: boolean;\n /** 录制时配置项 */\n recorder?: boolean;\n /** 录制文件名称 */\n filename?: string;\n /** 捕获屏幕按钮文字 */\n captureScreenText?: string;\n /** 停止捕获按钮文字 */\n stopCaptureText?: string;\n /** 开始录制按钮文字 */\n startRecorderText?: string;\n /** 停止录制按钮文字 */\n stopRecorderText?: string;\n /** 暂停录制按钮文字 */\n pausedRecorderText?: string;\n /** 录制中按钮文字 */\n recorderingText?: string;\n /** 录制错误回调方法 */\n onErrorRecorder?: (e: Event) => void;\n /** 停止录制回调方法 */\n onStopRecorder?: () => void;\n /** 开始录制回调方法 */\n onStartRecorder?: (state: MediaRecorder['state']) => void;\n /** 记录媒体时触发 */\n onRecorderDataAvailable?: (e: MediaRecorderDataAvailableEvent) => void;\n /** 捕获屏幕错误回调方法 */\n onErrorCapture?: (err: unknown) => void;\n /** 停止捕获屏幕回调方法 */\n onStopCapture?: () => void;\n /** 开始捕获屏幕回调方法 */\n onStartCapture?: (stream?: MediaStream) => void;\n /** 自定义保存录制文件方法 */\n onSaveRecorder?: (blob: Blob, fileName: string) => void;\n}\nexport type CaptureScreenElement = CustomElement<\n CaptureScreenProps,\n | 'onErrorRecorder'\n | 'onStopRecorder'\n | 'onStartRecorder'\n | 'onRecorderDataAvailable'\n | 'onErrorCapture'\n | 'onStopCapture'\n | 'onStartCapture'\n | 'onSaveRecorder'\n>;\n\nconst displayMediaOptions: MediaStreamConstraints = {\n video: true,\n audio: {\n echoCancellation: true,\n noiseSuppression: true,\n sampleRate: 44100,\n },\n};\n\nconst btnStatusDic: Record<MediaRecorder['state'], 'primary' | 'warning' | 'success'> = {\n inactive: 'primary',\n paused: 'warning',\n recording: 'success',\n};\n\nfunction CaptureScreen(_: CaptureScreenProps) {\n const { baseStyle } = theme;\n const _props = mergeProps(\n {\n options: displayMediaOptions,\n captureScreenText: '捕获屏幕',\n stopCaptureText: '停止捕获',\n startRecorderText: '开始录制',\n stopRecorderText: '停止录制',\n pausedRecorderText: '暂停录制',\n recorderingText: '录制中',\n onErrorRecorder: null,\n },\n _,\n );\n const [local, props] = splitProps(_props, [\n 'options',\n 'preview',\n 'controls',\n 'recorder',\n 'filename',\n 'captureScreenText',\n 'stopCaptureText',\n 'startRecorderText',\n 'stopRecorderText',\n 'pausedRecorderText',\n 'recorderingText',\n 'onErrorRecorder',\n 'onStopRecorder',\n 'onStartRecorder',\n 'onStopCapture',\n 'onStartCapture',\n 'onRecorderDataAvailable',\n 'onErrorCapture',\n 'onSaveRecorder',\n 'class',\n 'css',\n ]);\n let videoElem: HTMLVideoElement | undefined;\n const chunks: Blob[] = [];\n const [mediaRecorder, setMediaRecorder] = createSignal<MediaRecorder | null>(null);\n const [mediaStream, setMediaStream] = createSignal<MediaStream | null>(null);\n const [recordState, setRecordState] = createSignal<MediaRecorder['state']>('inactive');\n\n // 开始录制\n function handleStartRecorder() {\n const mr = untrack(mediaRecorder);\n\n if (mr) {\n if (isFunction(local.onStartRecorder)) {\n local.onStartRecorder(mr.state);\n }\n switch (mr.state) {\n case 'inactive': // 不活跃\n mr.start();\n break;\n case 'paused': // 暂停\n mr.resume();\n break;\n case 'recording': // 录制中\n default:\n mr.pause();\n break;\n }\n setRecordState(mr.state);\n }\n }\n function handleRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n chunks?.push(e.data as Blob);\n local.onRecorderDataAvailable?.(e);\n }\n // 停止录制\n function stopRecorder() {\n const mr = untrack(mediaRecorder);\n\n // 未录制时不需要停止\n if (mr) {\n if (mr.state !== 'inactive') {\n mr.stop();\n }\n setRecordState(mr.state);\n }\n local.onStopRecorder?.();\n }\n function handleSaveRecorder() {\n if (!chunks?.length) return;\n // 将录制内容保存到本地\n const blob: Blob = new Blob(chunks, {\n type: 'video/webm',\n });\n const name = local.filename || new Date().toISOString();\n const fileName = `${name}.webm`;\n\n chunks?.splice(0);\n if (local.onSaveRecorder) {\n local.onSaveRecorder(blob, fileName);\n }\n // 保存文件\n downloadBlob(blob, fileName);\n }\n\n // 停止捕获屏幕\n function stopCapture() {\n // 如果在录制则先停止\n stopRecorder();\n const ms = untrack(mediaStream);\n\n if (ms) {\n const tracks = ms.getTracks();\n\n tracks?.forEach((track: MediaStreamTrack) => track.stop());\n setMediaStream(null);\n }\n local.onStopCapture?.();\n }\n\n // 开始捕获屏幕\n async function startCapture() {\n stopCapture();\n try {\n const stream = await navigator.mediaDevices.getDisplayMedia({\n ...displayMediaOptions,\n ...local.options,\n });\n\n if (stream) {\n // 监听停止捕获屏幕\n stream.addEventListener('inactive', stopCapture, false);\n setMediaStream(stream);\n }\n local.onStartCapture?.(stream);\n } catch (err) {\n local.onErrorCapture?.(err);\n }\n }\n\n createEffect(() => {\n const ms = mediaStream();\n\n if (local.preview && videoElem && ms) {\n videoElem.srcObject = ms;\n }\n });\n\n createEffect(() => {\n const ms = mediaStream();\n\n if (ms?.active) {\n const recorderInstance = new MediaRecorder(ms);\n\n recorderInstance.onstop = handleSaveRecorder;\n recorderInstance.onerror = local.onErrorRecorder;\n // 每次timeslice记录毫秒级媒体时(或未记录整个媒体时,如果timeslice未指定)定期触发\n recorderInstance.ondataavailable = handleRecorderDataAvailable;\n setMediaRecorder(recorderInstance);\n } else {\n setMediaRecorder(null);\n }\n });\n\n onCleanup(() => {\n const mr = untrack(mediaRecorder);\n\n // 未录制时不需要停止\n if (mr && mr?.state !== 'inactive') {\n mr.stop();\n }\n const ms = untrack(mediaStream);\n\n if (ms) {\n const tracks = ms.getTracks();\n\n tracks.forEach((track: MediaStreamTrack) => track.stop());\n }\n });\n const recorderText = createMemo(() => {\n return {\n paused: local.pausedRecorderText,\n recording: local.recorderingText,\n inactive: local.startRecorderText,\n }[recordState()];\n });\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {css(local.css)}\n </style>\n <div class={cx('capture-screen', local.class)} {...props}>\n <div class=\"controller\">\n <n-button onClick={startCapture} class=\"btn\">\n {local.captureScreenText}\n </n-button>\n <Show when={mediaStream()}>\n <>\n <n-button danger={true} onClick={stopCapture} class=\"btn\">\n {local.stopCaptureText}\n </n-button>\n <Show when={local.recorder}>\n <div class=\"record\">\n <n-button\n type={btnStatusDic[recordState()]}\n onClick={handleStartRecorder}\n class=\"btn\"\n >\n <span>{recorderText()}</span>\n </n-button>\n <Show when={recordState() !== 'inactive'}>\n <n-button type=\"error\" onClick={stopRecorder} class=\"btn\">\n {local.stopRecorderText}\n </n-button>\n </Show>\n </div>\n </Show>\n </>\n </Show>\n </div>\n <Show when={local.preview && mediaStream()}>\n <div class=\"view\">\n <span\n class={cx(\n recordState() === 'recording' && 'recording',\n recordState() === 'paused' && 'paused',\n )}\n />\n <video ref={videoElem} autoplay controls={local.controls && mediaStream() !== null} />\n </div>\n </Show>\n </div>\n </>\n );\n}\n\ncustomElement<CaptureScreenProps>(\n 'n-capture-screen',\n {\n class: void 0,\n css: void 0,\n options: void 0,\n preview: void 0,\n controls: void 0,\n recorder: void 0,\n filename: void 0,\n captureScreenText: void 0,\n stopCaptureText: void 0,\n startRecorderText: void 0,\n stopRecorderText: void 0,\n pausedRecorderText: void 0,\n recorderingText: void 0,\n onErrorRecorder: void 0,\n onStopRecorder: void 0,\n onStartRecorder: void 0,\n onRecorderDataAvailable: void 0,\n onErrorCapture: void 0,\n onStopCapture: void 0,\n onStartCapture: void 0,\n onSaveRecorder: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onErrorRecorder(e: Event) {\n el.dispatchEvent(\n new CustomEvent('errorrecorder', {\n detail: e,\n }),\n );\n },\n onStopRecorder() {\n el.dispatchEvent(\n new CustomEvent('stoprecorder', {\n detail: null,\n }),\n );\n },\n onStartRecorder(state: MediaRecorder['state']) {\n el.dispatchEvent(\n new CustomEvent('startrecorder', {\n detail: state,\n }),\n );\n },\n onRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n el.dispatchEvent(\n new CustomEvent('recorderdataavailable', {\n detail: e,\n }),\n );\n },\n onErrorCapture(e: unknown) {\n el.dispatchEvent(\n new CustomEvent('errorcapture', {\n detail: e,\n }),\n );\n },\n onStopCapture() {\n el.dispatchEvent(\n new CustomEvent('stopcapture', {\n detail: null,\n }),\n );\n },\n onStartCapture(stream?: MediaStream) {\n el.dispatchEvent(\n new CustomEvent('startcapture', {\n detail: stream,\n }),\n );\n },\n onSaveRecorder(blob: Blob, fileName: string) {\n el.dispatchEvent(\n new CustomEvent('saverecorder', {\n detail: [blob, fileName],\n }),\n );\n },\n },\n _,\n );\n\n return createComponent(CaptureScreen, props);\n },\n);\n\nexport default CaptureScreen;\n"],"names":["Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","splitProps","untrack","downloadBlob","isFunction","css","cx","customElement","style","theme","displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","_props","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","local","props","chunks","mediaRecorder","setMediaRecorder","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","onStartRecorder","state","start","resume","pause","handleRecorderDataAvailable","e","push","data","onRecorderDataAvailable","stopRecorder","stop","onStopRecorder","handleSaveRecorder","length","blob","Blob","type","name","filename","Date","toISOString","fileName","splice","onSaveRecorder","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","recorderText","class","recorder","controls","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
1
+ {"version":3,"sources":["../../components/capture-screen/index.tsx"],"sourcesContent":["import {\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n splitProps,\n untrack,\n} from 'solid-js';\nimport { downloadBlob, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport '../button';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\ndeclare interface MediaRecorderDataAvailableEvent extends Event {\n /** MediaRecorderDataAvailableEvent */\n data: Any;\n}\n\nexport interface CaptureScreenProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** MediaStreamConstraints */\n options?: MediaStreamConstraints;\n /** 是否预览 */\n preview?: boolean;\n /** 预览时是否显示控制器 */\n controls?: boolean;\n /** 录制时配置项 */\n recorder?: boolean;\n /** 录制文件名称 */\n filename?: string;\n /** 捕获屏幕按钮文字 */\n captureScreenText?: string;\n /** 停止捕获按钮文字 */\n stopCaptureText?: string;\n /** 开始录制按钮文字 */\n startRecorderText?: string;\n /** 停止录制按钮文字 */\n stopRecorderText?: string;\n /** 暂停录制按钮文字 */\n pausedRecorderText?: string;\n /** 录制中按钮文字 */\n recorderingText?: string;\n /** 录制错误回调方法 */\n onErrorRecorder?: (e: Event) => void;\n /** 停止录制回调方法 */\n onStopRecorder?: () => void;\n /** 开始录制回调方法 */\n onStartRecorder?: (state: MediaRecorder['state']) => void;\n /** 记录媒体时触发 */\n onRecorderDataAvailable?: (e: MediaRecorderDataAvailableEvent) => void;\n /** 捕获屏幕错误回调方法 */\n onErrorCapture?: (err: unknown) => void;\n /** 停止捕获屏幕回调方法 */\n onStopCapture?: () => void;\n /** 开始捕获屏幕回调方法 */\n onStartCapture?: (stream?: MediaStream) => void;\n /** 自定义保存录制文件方法 */\n onSaveRecorder?: (blob: Blob, fileName: string) => void;\n}\nexport type CaptureScreenElement = CustomElement<\n CaptureScreenProps,\n | 'onErrorRecorder'\n | 'onStopRecorder'\n | 'onStartRecorder'\n | 'onRecorderDataAvailable'\n | 'onErrorCapture'\n | 'onStopCapture'\n | 'onStartCapture'\n | 'onSaveRecorder'\n>;\n\nconst displayMediaOptions: MediaStreamConstraints = {\n video: true,\n audio: {\n echoCancellation: true,\n noiseSuppression: true,\n sampleRate: 44100,\n },\n};\n\nconst btnStatusDic: Record<MediaRecorder['state'], 'primary' | 'warning' | 'success'> = {\n inactive: 'primary',\n paused: 'warning',\n recording: 'success',\n};\n\nfunction CaptureScreen(_: CaptureScreenProps) {\n const { baseStyle } = theme;\n const _props = mergeProps(\n {\n options: displayMediaOptions,\n captureScreenText: '捕获屏幕',\n stopCaptureText: '停止捕获',\n startRecorderText: '开始录制',\n stopRecorderText: '停止录制',\n pausedRecorderText: '暂停录制',\n recorderingText: '录制中',\n onErrorRecorder: null,\n },\n _,\n );\n const [local, props] = splitProps(_props, [\n 'options',\n 'preview',\n 'controls',\n 'recorder',\n 'filename',\n 'captureScreenText',\n 'stopCaptureText',\n 'startRecorderText',\n 'stopRecorderText',\n 'pausedRecorderText',\n 'recorderingText',\n 'onErrorRecorder',\n 'onStopRecorder',\n 'onStartRecorder',\n 'onStopCapture',\n 'onStartCapture',\n 'onRecorderDataAvailable',\n 'onErrorCapture',\n 'onSaveRecorder',\n 'class',\n 'css',\n ]);\n let videoElem: HTMLVideoElement | undefined;\n const chunks: Blob[] = [];\n const [mediaRecorder, setMediaRecorder] = createSignal<MediaRecorder | null>(null);\n const [mediaStream, setMediaStream] = createSignal<MediaStream | null>(null);\n const [recordState, setRecordState] = createSignal<MediaRecorder['state']>('inactive');\n\n // 开始录制\n function handleStartRecorder() {\n const mr = untrack(mediaRecorder);\n\n if (mr) {\n if (isFunction(local.onStartRecorder)) {\n local.onStartRecorder(mr.state);\n }\n switch (mr.state) {\n case 'inactive': // 不活跃\n mr.start();\n break;\n case 'paused': // 暂停\n mr.resume();\n break;\n case 'recording': // 录制中\n default:\n mr.pause();\n break;\n }\n setRecordState(mr.state);\n }\n }\n function handleRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n chunks?.push(e.data as Blob);\n local.onRecorderDataAvailable?.(e);\n }\n // 停止录制\n function stopRecorder() {\n const mr = untrack(mediaRecorder);\n\n // 未录制时不需要停止\n if (mr) {\n if (mr.state !== 'inactive') {\n mr.stop();\n }\n setRecordState(mr.state);\n }\n local.onStopRecorder?.();\n }\n function handleSaveRecorder() {\n if (!chunks?.length) return;\n // 将录制内容保存到本地\n const blob: Blob = new Blob(chunks, {\n type: 'video/webm',\n });\n const name = local.filename || new Date().toISOString();\n const fileName = `${name}.webm`;\n\n chunks?.splice(0);\n if (local.onSaveRecorder) {\n local.onSaveRecorder(blob, fileName);\n }\n // 保存文件\n downloadBlob(blob, fileName);\n }\n\n // 停止捕获屏幕\n function stopCapture() {\n // 如果在录制则先停止\n stopRecorder();\n const ms = untrack(mediaStream);\n\n if (ms) {\n const tracks = ms.getTracks();\n\n tracks?.forEach((track: MediaStreamTrack) => track.stop());\n setMediaStream(null);\n }\n local.onStopCapture?.();\n }\n\n // 开始捕获屏幕\n async function startCapture() {\n stopCapture();\n try {\n const stream = await navigator.mediaDevices.getDisplayMedia({\n ...displayMediaOptions,\n ...local.options,\n });\n\n if (stream) {\n // 监听停止捕获屏幕\n stream.addEventListener('inactive', stopCapture, false);\n setMediaStream(stream);\n }\n local.onStartCapture?.(stream);\n } catch (err) {\n local.onErrorCapture?.(err);\n }\n }\n\n createEffect(() => {\n const ms = mediaStream();\n\n if (local.preview && videoElem && ms) {\n videoElem.srcObject = ms;\n }\n });\n\n createEffect(() => {\n const ms = mediaStream();\n\n if (ms?.active) {\n const recorderInstance = new MediaRecorder(ms);\n\n recorderInstance.onstop = handleSaveRecorder;\n recorderInstance.onerror = local.onErrorRecorder;\n // 每次timeslice记录毫秒级媒体时(或未记录整个媒体时,如果timeslice未指定)定期触发\n recorderInstance.ondataavailable = handleRecorderDataAvailable;\n setMediaRecorder(recorderInstance);\n } else {\n setMediaRecorder(null);\n }\n });\n\n onCleanup(() => {\n const mr = untrack(mediaRecorder);\n\n // 未录制时不需要停止\n if (mr && mr?.state !== 'inactive') {\n mr.stop();\n }\n const ms = untrack(mediaStream);\n\n if (ms) {\n const tracks = ms.getTracks();\n\n tracks.forEach((track: MediaStreamTrack) => track.stop());\n }\n });\n const recorderText = createMemo(() => {\n return {\n paused: local.pausedRecorderText,\n recording: local.recorderingText,\n inactive: local.startRecorderText,\n }[recordState()];\n });\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {css(local.css)}\n </style>\n <div class={cx('capture-screen', local.class)} {...props}>\n <div class=\"controller\">\n <n-button onClick={startCapture} class=\"btn\">\n {local.captureScreenText}\n </n-button>\n <Show when={mediaStream()}>\n <>\n <n-button danger={true} onClick={stopCapture} class=\"btn\">\n {local.stopCaptureText}\n </n-button>\n <Show when={local.recorder}>\n <div class=\"record\">\n <n-button\n type={btnStatusDic[recordState()]}\n onClick={handleStartRecorder}\n class=\"btn\"\n >\n <span>{recorderText()}</span>\n </n-button>\n <Show when={recordState() !== 'inactive'}>\n <n-button type=\"error\" onClick={stopRecorder} class=\"btn\">\n {local.stopRecorderText}\n </n-button>\n </Show>\n </div>\n </Show>\n </>\n </Show>\n </div>\n <Show when={local.preview && mediaStream()}>\n <div class=\"view\">\n <span\n class={cx(\n recordState() === 'recording' && 'recording',\n recordState() === 'paused' && 'paused',\n )}\n />\n <video ref={videoElem} autoplay controls={local.controls && mediaStream() !== null} />\n </div>\n </Show>\n </div>\n </>\n );\n}\n\ncustomElement<CaptureScreenProps>(\n 'n-capture-screen',\n {\n class: void 0,\n css: void 0,\n options: void 0,\n preview: void 0,\n controls: void 0,\n recorder: void 0,\n filename: void 0,\n captureScreenText: void 0,\n stopCaptureText: void 0,\n startRecorderText: void 0,\n stopRecorderText: void 0,\n pausedRecorderText: void 0,\n recorderingText: void 0,\n onErrorRecorder: void 0,\n onStopRecorder: void 0,\n onStartRecorder: void 0,\n onRecorderDataAvailable: void 0,\n onErrorCapture: void 0,\n onStopCapture: void 0,\n onStartCapture: void 0,\n onSaveRecorder: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onErrorRecorder(e: Event) {\n el.dispatchEvent(\n new CustomEvent('errorrecorder', {\n detail: e,\n }),\n );\n },\n onStopRecorder() {\n el.dispatchEvent(\n new CustomEvent('stoprecorder', {\n detail: null,\n }),\n );\n },\n onStartRecorder(state: MediaRecorder['state']) {\n el.dispatchEvent(\n new CustomEvent('startrecorder', {\n detail: state,\n }),\n );\n },\n onRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n el.dispatchEvent(\n new CustomEvent('recorderdataavailable', {\n detail: e,\n }),\n );\n },\n onErrorCapture(e: unknown) {\n el.dispatchEvent(\n new CustomEvent('errorcapture', {\n detail: e,\n }),\n );\n },\n onStopCapture() {\n el.dispatchEvent(\n new CustomEvent('stopcapture', {\n detail: null,\n }),\n );\n },\n onStartCapture(stream?: MediaStream) {\n el.dispatchEvent(\n new CustomEvent('startcapture', {\n detail: stream,\n }),\n );\n },\n onSaveRecorder(blob: Blob, fileName: string) {\n el.dispatchEvent(\n new CustomEvent('saverecorder', {\n detail: [blob, fileName],\n }),\n );\n },\n },\n _,\n );\n\n return createComponent(CaptureScreen, props);\n },\n);\n\nexport default CaptureScreen;\n"],"names":["Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","splitProps","untrack","downloadBlob","isFunction","css","cx","customElement","style","theme","displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","_props","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","local","props","chunks","mediaRecorder","setMediaRecorder","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","onStartRecorder","state","start","resume","pause","handleRecorderDataAvailable","e","push","data","onRecorderDataAvailable","stopRecorder","stop","onStopRecorder","handleSaveRecorder","length","blob","Blob","type","name","filename","Date","toISOString","fileName","splice","onSaveRecorder","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","recorderText","class","recorder","controls","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as l}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=/*#__PURE__*/e("<style>"),c=/*#__PURE__*/e('<section class="header">'),m=/*#__PURE__*/e('<div class="dots">'),v=/*#__PURE__*/e('<section><section class="list"><div class="item"></div><div class="item"></div><div class="item"></div></section><slot name="header"></slot><div class="prev"></div><div class="next">'),f=/*#__PURE__*/e("<i>");import{Index as u,Show as h,createComponent as p,createEffect as g,createMemo as b,createSignal as w,mergeProps as j,onCleanup as C}from"solid-js";import x from"@moneko/common/lib/isFunction";import{css as $,cx as _}from"@moneko/css";import{customElement as k}from"solid-element";import{style as y}from"./style";import S from"../theme";function E(e){let n;let{baseStyle:p}=S,k=j({autoplay:-1,children:[]},e),[E,I]=w(0),[N,A]=w(1),[F,L]=w(0),[M,O]=w(0);function P(){let e=M();-1===e?L(E()):1===e&&L(N()),O(0),x(k.onChange)&&k.onChange(F())}function q(){O(-1)}function z(){O(1)}function B(e,t){t.stopPropagation();let i=F(),l=20*Math.floor(i/20)+e;l>i?(O(1),A(l)):l<i&&(O(-1),I(l))}let D=b(()=>[...k.children]),G=b(()=>Array(D().length>20?20:D().length).fill(null));g(()=>{void 0!==k.offset&&L(Number(k.offset))}),g(()=>{var e,t;let i,l;let[o,n]=(e=F(),t=D(),i=e-1,l=e+1,i<0&&(i=t.length-1),l>t.length-1&&(l=0),[i,l]);I(o),A(n)}),g(()=>{clearInterval(n);let e=Number(k.autoplay);e>0&&(n=setInterval(()=>{e<1&&clearInterval(n),z()},e))}),C(()=>{clearInterval(n)});let H=b(()=>x(k.header)?k.header(F()):k.header);return[(()=>{let e=d();return i(e,p,null),i(e,y,null),i(e,()=>$(k.css),null),e})(),(()=>{let e=v(),n=e.firstChild,d=n.firstChild,p=d.nextSibling,g=p.nextSibling,b=n.nextSibling,w=b.nextSibling,j=w.nextSibling;return i(d,()=>D()[E()]),a(p,"animationend",P),i(p,()=>D()[F()]),i(g,()=>D()[N()]),b._$owner=l(),i(e,r(h,{get when(){return H()},get children(){let e=c();return i(e,H),e}}),w),a(w,"click",q,!0),a(j,"click",z,!0),i(e,r(h,{get when(){return k.dots},get children(){let e=m();return i(e,r(u,{get each(){return G()},children:(e,t)=>(()=>{let e=f();return a(e,"click",B.bind(null,t),!0),o(()=>s(e,_("dot",t===F()%20+M()&&"active"))),e})()})),e}}),null),o(i=>{let l=_("carousel",k.class),o=M();return l!==i._v$&&s(e,i._v$=l),o!==i._v$2&&t(n,"data-dir",i._v$2=o),i},{_v$:void 0,_v$2:void 0}),e})()]}k("n-carousel",{children:void 0,autoplay:void 0,class:void 0,css:void 0,offset:void 0,dots:void 0,header:void 0,onChange:void 0},(e,t)=>{let i=t.element,l=j({onChange(e){i.offset=e,i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return g(()=>{i.replaceChildren()}),p(E,l)});export default E;n(["click"]);
1
+ import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as l}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=e("<style>"),c=e('<section class="header">'),m=e('<div class="dots">'),v=e('<section><section class="list"><div class="item"></div><div class="item"></div><div class="item"></div></section><slot name="header"></slot><div class="prev"></div><div class="next">'),f=e("<i>");import{Index as u,Show as h,createComponent as p,createEffect as g,createMemo as b,createSignal as w,mergeProps as j,onCleanup as C}from"solid-js";import x from"@moneko/common/lib/isFunction";import{css as $,cx as _}from"@moneko/css";import{customElement as k}from"solid-element";import{style as y}from"./style";import S from"../theme";function E(e){let n;let{baseStyle:p}=S,k=j({autoplay:-1,children:[]},e),[E,I]=w(0),[N,A]=w(1),[F,L]=w(0),[M,O]=w(0);function P(){let e=M();-1===e?L(E()):1===e&&L(N()),O(0),x(k.onChange)&&k.onChange(F())}function q(){O(-1)}function z(){O(1)}function B(e,t){t.stopPropagation();let i=F(),l=20*Math.floor(i/20)+e;l>i?(O(1),A(l)):l<i&&(O(-1),I(l))}let D=b(()=>[...k.children]),G=b(()=>Array(D().length>20?20:D().length).fill(null));g(()=>{void 0!==k.offset&&L(Number(k.offset))}),g(()=>{var e,t;let i,l;let[o,n]=(e=F(),t=D(),i=e-1,l=e+1,i<0&&(i=t.length-1),l>t.length-1&&(l=0),[i,l]);I(o),A(n)}),g(()=>{clearInterval(n);let e=Number(k.autoplay);e>0&&(n=setInterval(()=>{e<1&&clearInterval(n),z()},e))}),C(()=>{clearInterval(n)});let H=b(()=>x(k.header)?k.header(F()):k.header);return[(()=>{let e=d();return i(e,p,null),i(e,y,null),i(e,()=>$(k.css),null),e})(),(()=>{let e=v(),n=e.firstChild,d=n.firstChild,p=d.nextSibling,g=p.nextSibling,b=n.nextSibling,w=b.nextSibling,j=w.nextSibling;return i(d,()=>D()[E()]),a(p,"animationend",P),i(p,()=>D()[F()]),i(g,()=>D()[N()]),b._$owner=l(),i(e,r(h,{get when(){return H()},get children(){let e=c();return i(e,H),e}}),w),a(w,"click",q,!0),a(j,"click",z,!0),i(e,r(h,{get when(){return k.dots},get children(){let e=m();return i(e,r(u,{get each(){return G()},children:(e,t)=>(()=>{let e=f();return a(e,"click",B.bind(null,t),!0),o(()=>s(e,_("dot",t===F()%20+M()&&"active"))),e})()})),e}}),null),o(i=>{let l=_("carousel",k.class),o=M();return l!==i._v$&&s(e,i._v$=l),o!==i._v$2&&t(n,"data-dir",i._v$2=o),i},{_v$:void 0,_v$2:void 0}),e})()]}k("n-carousel",{children:void 0,autoplay:void 0,class:void 0,css:void 0,offset:void 0,dots:void 0,header:void 0,onChange:void 0},(e,t)=>{let i=t.element,l=j({onChange(e){i.offset=e,i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return g(()=>{i.replaceChildren()}),p(E,l)});export default E;n(["click"]);
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n Index,\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CarouselProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 轮播的内容 */\n children?: JSX.Element[];\n /** 当前内容的位置\n * @default 0\n */\n offset?: number;\n /** 开启指示器 */\n dots?: boolean;\n /** 设置自动播放时长, 不设置时不自动播放 */\n autoplay?: number;\n /** 自定义头部 */\n header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);\n /** 切换显示的位置时的回调方法 */\n onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n const { baseStyle } = theme;\n const props = mergeProps({ autoplay: -1, children: [] }, _props);\n const [left, setLeft] = createSignal(0);\n const [right, setRight] = createSignal(1);\n const [offset, setOffset] = createSignal(0);\n const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n let playTimer: NodeJS.Timeout | undefined;\n\n function onOffsetChange() {\n const _dir = direction();\n\n if (_dir === -1) {\n setOffset(left());\n } else if (_dir === 1) {\n setOffset(right());\n }\n setDirection(0);\n if (isFunction(props.onChange)) {\n props.onChange(offset());\n }\n }\n function handlePrev() {\n setDirection(-1);\n }\n function handleNext() {\n setDirection(1);\n }\n function handleDot(idx: number, e: Event) {\n e.stopPropagation();\n const _offset = offset();\n const _current = Math.floor(_offset / 20) * 20 + idx;\n\n if (_current > _offset) {\n setDirection(1);\n setRight(_current);\n } else if (_current < _offset) {\n setDirection(-1);\n setLeft(_current);\n }\n }\n function getPrevNext(idx: number, arr: JSX.Element[]) {\n let _prev = idx - 1,\n _next = idx + 1;\n\n if (_prev < 0) {\n _prev = arr.length - 1;\n }\n if (_next > arr.length - 1) {\n _next = 0;\n }\n return [_prev, _next];\n }\n const list = createMemo(() => [...props.children]);\n const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n createEffect(() => {\n if (props.offset !== void 0) {\n setOffset(Number(props.offset));\n }\n });\n createEffect(() => {\n const [_prev, _next] = getPrevNext(offset(), list());\n\n setLeft(_prev);\n setRight(_next);\n });\n createEffect(() => {\n clearInterval(playTimer);\n const autoplay = Number(props.autoplay);\n\n if (autoplay > 0) {\n playTimer = setInterval(() => {\n if (autoplay < 1) {\n clearInterval(playTimer);\n }\n handleNext();\n }, autoplay);\n }\n });\n\n onCleanup(() => {\n clearInterval(playTimer);\n });\n const header = createMemo(() =>\n isFunction(props.header) ? props.header(offset()) : props.header,\n );\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {css(props.css)}\n </style>\n <section class={cx('carousel', props.class)}>\n <section class=\"list\" data-dir={direction()}>\n <div class=\"item\">{list()[left()]}</div>\n <div class=\"item\" onAnimationEnd={onOffsetChange}>\n {list()[offset()]}\n </div>\n <div class=\"item\">{list()[right()]}</div>\n </section>\n <slot name=\"header\" />\n <Show when={header()}>\n <section class=\"header\">{header()}</section>\n </Show>\n <div class=\"prev\" onClick={handlePrev} />\n <div class=\"next\" onClick={handleNext} />\n <Show when={props.dots}>\n <div class=\"dots\">\n <Index each={dotLen()}>\n {(_, idx) => {\n return (\n <i\n class={cx('dot', idx === (offset() % 20) + direction() && 'active')}\n onClick={handleDot.bind(null, idx)}\n />\n );\n }}\n </Index>\n </div>\n </Show>\n </section>\n </>\n );\n}\n\ncustomElement<CarouselProps>(\n 'n-carousel',\n {\n children: void 0,\n autoplay: void 0,\n class: void 0,\n css: void 0,\n offset: void 0,\n dots: void 0,\n header: void 0,\n onChange: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onChange(key: number) {\n el.offset = key;\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: key,\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n el.replaceChildren();\n });\n return createComponent(Carousel, props);\n },\n);\nexport default Carousel;\n"],"names":["Index","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","isFunction","css","cx","customElement","style","theme","Carousel","_props","playTimer","baseStyle","props","autoplay","children","left","setLeft","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","dotLen","Array","length","fill","Number","arr","_prev","_next","clearInterval","setInterval","header","dots","_","bind","class","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"otBAAA,QACEA,SAAAA,CAAK,CACLC,QAAAA,CAAI,CACJC,mBAAAA,CAAe,CACfC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,aAAAA,CAAS,KACJ,UAAW,AAClB,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAW,UAAW,CAyB7B,SAASC,EAASC,CAAqB,MAOjCC,EANJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAChBK,EAAQZ,EAAW,CAAEa,SAAU,GAAIC,SAAU,EAAE,AAAC,EAAGL,GACnD,CAACM,EAAMC,EAAQ,CAAGjB,EAAa,GAC/B,CAACkB,EAAOC,EAAS,CAAGnB,EAAa,GACjC,CAACoB,EAAQC,EAAU,CAAGrB,EAAa,GACnC,CAACsB,EAAWC,EAAa,CAAGvB,EAAyB,GAG3D,SAASwB,IACP,IAAMC,EAAOH,GAETG,AAAS,CAAA,KAATA,EACFJ,EAAUL,KACQ,IAATS,GACTJ,EAAUH,KAEZK,EAAa,GACTpB,EAAWU,EAAMa,QAAQ,GAC3Bb,EAAMa,QAAQ,CAACN,IAEnB,CACA,SAASO,IACPJ,EAAa,GACf,CACA,SAASK,IACPL,EAAa,EACf,CACA,SAASM,EAAUC,CAAW,CAAEC,CAAQ,EACtCA,EAAEC,eAAe,GACjB,IAAMC,EAAUb,IACVc,EAAWC,AAA2B,GAA3BA,KAAKC,KAAK,CAACH,EAAU,IAAWH,CAE7CI,CAAAA,EAAWD,GACbV,EAAa,GACbJ,EAASe,IACAA,EAAWD,IACpBV,EAAa,IACbN,EAAQiB,GAEZ,CAaA,IAAMG,EAAOtC,EAAW,IAAM,IAAIc,EAAME,QAAQ,CAAC,EAC3CuB,EAASvC,EAAW,IAAMwC,MAAMF,IAAOG,MAAM,CAAG,GAAK,GAAKH,IAAOG,MAAM,EAAEC,IAAI,CAAC,OAEpF3C,EAAa,KACU,KAAK,IAAtBe,EAAMO,MAAM,EACdC,EAAUqB,OAAO7B,EAAMO,MAAM,EAEjC,GACAtB,EAAa,SApBQgC,EAAaa,MAC5BC,EACFC,EAmBF,GAAM,CAACD,EAAOC,EAAM,EArBDf,EAqBgBV,IArBHuB,EAqBaN,IApBzCO,EAAQd,EAAM,EAChBe,EAAQf,EAAM,EAEZc,EAAQ,GACVA,CAAAA,EAAQD,EAAIH,MAAM,CAAG,CAAA,EAEnBK,EAAQF,EAAIH,MAAM,CAAG,GACvBK,CAAAA,EAAQ,CAAA,EAEH,CAACD,EAAOC,EAAM,EAarB5B,EAAQ2B,GACRzB,EAAS0B,EACX,GACA/C,EAAa,KACXgD,cAAcnC,GACd,IAAMG,EAAW4B,OAAO7B,EAAMC,QAAQ,EAElCA,EAAW,GACbH,CAAAA,EAAYoC,YAAY,KAClBjC,EAAW,GACbgC,cAAcnC,GAEhBiB,GACF,EAAGd,EAAQ,CAEf,GAEAZ,EAAU,KACR4C,cAAcnC,EAChB,GACA,IAAMqC,EAASjD,EAAW,IACxBI,EAAWU,EAAMmC,MAAM,EAAInC,EAAMmC,MAAM,CAAC5B,KAAYP,EAAMmC,MAAM,EAGlE,kCAGOpC,YACAL,gBACAH,EAAIS,EAAMT,GAAG,2JAIOiC,GAAM,CAACrB,IAAO,qBACCQ,WAC/Ba,GAAM,CAACjB,IAAS,UAEAiB,GAAM,CAACnB,IAAQ,sBAGnCtB,qBAAWoD,yCACeA,uBAEArB,kBACAC,YAC1BhC,qBAAWiB,EAAMoC,IAAI,wCAEjBtD,qBAAY2C,cACV,CAACY,EAAGpB,uCAIUD,EAAUsB,IAAI,CAAC,KAAMrB,iBADvBzB,EAAG,MAAOyB,IAAQ,AAACV,IAAW,GAAME,KAAe,4CApBxDjB,EAAG,WAAYQ,EAAMuC,KAAK,IACR9B,2GA8BxC,CAEAhB,EACE,aACA,CACES,SAAU,KAAK,EACfD,SAAU,KAAK,EACfsC,MAAO,KAAK,EACZhD,IAAK,KAAK,EACVgB,OAAQ,KAAK,EACb6B,KAAM,KAAK,EACXD,OAAQ,KAAK,EACbtB,SAAU,KAAK,CACjB,EACA,CAACwB,EAAGG,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChB1C,EAAQZ,EACZ,CACEyB,SAAS8B,CAAW,EAClBF,EAAGlC,MAAM,CAAGoC,EACZF,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAN,GAMF,OAHApD,EAAa,KACXwD,EAAGM,eAAe,EACpB,GACO/D,EAAgBY,EAAUI,EACnC,EAEF,gBAAeJ,CAAS"}
1
+ {"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n Index,\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CarouselProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 轮播的内容 */\n children?: JSX.Element[];\n /** 当前内容的位置\n * @default 0\n */\n offset?: number;\n /** 开启指示器 */\n dots?: boolean;\n /** 设置自动播放时长, 不设置时不自动播放 */\n autoplay?: number;\n /** 自定义头部 */\n header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);\n /** 切换显示的位置时的回调方法 */\n onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n const { baseStyle } = theme;\n const props = mergeProps({ autoplay: -1, children: [] }, _props);\n const [left, setLeft] = createSignal(0);\n const [right, setRight] = createSignal(1);\n const [offset, setOffset] = createSignal(0);\n const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n let playTimer: NodeJS.Timeout | undefined;\n\n function onOffsetChange() {\n const _dir = direction();\n\n if (_dir === -1) {\n setOffset(left());\n } else if (_dir === 1) {\n setOffset(right());\n }\n setDirection(0);\n if (isFunction(props.onChange)) {\n props.onChange(offset());\n }\n }\n function handlePrev() {\n setDirection(-1);\n }\n function handleNext() {\n setDirection(1);\n }\n function handleDot(idx: number, e: Event) {\n e.stopPropagation();\n const _offset = offset();\n const _current = Math.floor(_offset / 20) * 20 + idx;\n\n if (_current > _offset) {\n setDirection(1);\n setRight(_current);\n } else if (_current < _offset) {\n setDirection(-1);\n setLeft(_current);\n }\n }\n function getPrevNext(idx: number, arr: JSX.Element[]) {\n let _prev = idx - 1,\n _next = idx + 1;\n\n if (_prev < 0) {\n _prev = arr.length - 1;\n }\n if (_next > arr.length - 1) {\n _next = 0;\n }\n return [_prev, _next];\n }\n const list = createMemo(() => [...props.children]);\n const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n createEffect(() => {\n if (props.offset !== void 0) {\n setOffset(Number(props.offset));\n }\n });\n createEffect(() => {\n const [_prev, _next] = getPrevNext(offset(), list());\n\n setLeft(_prev);\n setRight(_next);\n });\n createEffect(() => {\n clearInterval(playTimer);\n const autoplay = Number(props.autoplay);\n\n if (autoplay > 0) {\n playTimer = setInterval(() => {\n if (autoplay < 1) {\n clearInterval(playTimer);\n }\n handleNext();\n }, autoplay);\n }\n });\n\n onCleanup(() => {\n clearInterval(playTimer);\n });\n const header = createMemo(() =>\n isFunction(props.header) ? props.header(offset()) : props.header,\n );\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {css(props.css)}\n </style>\n <section class={cx('carousel', props.class)}>\n <section class=\"list\" data-dir={direction()}>\n <div class=\"item\">{list()[left()]}</div>\n <div class=\"item\" onAnimationEnd={onOffsetChange}>\n {list()[offset()]}\n </div>\n <div class=\"item\">{list()[right()]}</div>\n </section>\n <slot name=\"header\" />\n <Show when={header()}>\n <section class=\"header\">{header()}</section>\n </Show>\n <div class=\"prev\" onClick={handlePrev} />\n <div class=\"next\" onClick={handleNext} />\n <Show when={props.dots}>\n <div class=\"dots\">\n <Index each={dotLen()}>\n {(_, idx) => {\n return (\n <i\n class={cx('dot', idx === (offset() % 20) + direction() && 'active')}\n onClick={handleDot.bind(null, idx)}\n />\n );\n }}\n </Index>\n </div>\n </Show>\n </section>\n </>\n );\n}\n\ncustomElement<CarouselProps>(\n 'n-carousel',\n {\n children: void 0,\n autoplay: void 0,\n class: void 0,\n css: void 0,\n offset: void 0,\n dots: void 0,\n header: void 0,\n onChange: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onChange(key: number) {\n el.offset = key;\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: key,\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n el.replaceChildren();\n });\n return createComponent(Carousel, props);\n },\n);\nexport default Carousel;\n"],"names":["Index","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","isFunction","css","cx","customElement","style","theme","Carousel","_props","playTimer","baseStyle","props","autoplay","children","left","setLeft","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","dotLen","Array","length","fill","Number","arr","_prev","_next","clearInterval","setInterval","header","dots","_","bind","class","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=/*#__PURE__*/t("<style>"),u=/*#__PURE__*/t("<section>"),m=/*#__PURE__*/t('<span><input class="checkbox" type="checkbox"><label>');import{For as c,createComponent as v,createEffect as f,createMemo as p,createSignal as b,mergeProps as h}from"solid-js";import{css as g,cx as k}from"@moneko/css";import{customElement as y}from"solid-element";import{style as j}from"./style";import{FieldName as w}from"../basic-config";import x from"../get-options";import A from"../theme";function C(t){let{baseStyle:n}=A,[v,h]=b([]),y=p(()=>Object.assign({},w,t.fieldNames));f(()=>{let e=void 0===t.value?t.defaultValue:t.value,i=[];Array.isArray(e)?i=e:void 0!==e&&(i=[e]),h(i)});let C=p(()=>{let e=y();if(void 0===t.options)return x([{value:1}],e);let i=[{[e.value]:"all",[e.label]:"全选",indeterminate:!1}],l=t.checkAll?i:[];return l.concat(x(t.options||[],e))}),E=p(()=>{let e=[],t=y();return C().forEach(i=>{"indeterminate"in i||void 0===i[t.value]||e.push(i[t.value])}),e}),$=p(()=>{let e=!0,t=E();for(let i=0,l=t.length;i<l;i++)if(!v().includes(t[i])){e=!1;break}return e});function _(e){if(!t.disabled&&!e.disabled){let i="indeterminate"in e,l=i?[]:[...v()],o=e[y().value];if(i)$()||(l=E());else{let e=l.indexOf(o);-1!==e?l.splice(e,1):l.push(o)}void 0===t.value&&h(l),null==t.onChange||t.onChange.call(t,void 0===t.options?!!l[0]:l)}}function N(e,t){t.preventDefault(),"Enter"===t.key&&_(e)}return[(()=>{let e=d();return l(e,n,null),l(e,j,null),l(e,()=>g(t.css),null),e})(),(()=>{let n=u();return l(n,r(c,{get each(){return C()},children:n=>{let r=t.disabled||n.disabled,d=y(),u=n[d.value];return"indeterminate"in n&&f(()=>{let e;n.ref.indeterminate=(e=!1,E().forEach(t=>{v().length&&!v().includes(t)&&(e=!0)}),e)}),(()=>{let c=m(),f=c.firstChild,p=n.ref,b=f.nextSibling;return a(c,"click",_.bind(null,n),!0),a(c,"keyup",N.bind(null,n),!0),i(c,"aria-disabled",r),i(c,"tabindex",r?-1:0),a(f,"change",_.bind(null,n)),"function"==typeof p?e(p,f):n.ref=f,f.value=u,f.disabled=r,l(b,()=>n[d.label]),o(e=>{let l=k("item",n.class,n.status),o=t.name;return l!==e._v$&&s(c,e._v$=l),o!==e._v$2&&i(f,"name",e._v$2=o),e},{_v$:void 0,_v$2:void 0}),o(()=>f.checked="indeterminate"in n?$():v().includes(u)),c})()}})),o(()=>s(n,k("box",t.layout,t.class))),n})()]}y("n-checkbox",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:void 0,onChange:void 0,fieldNames:void 0,checkAll:void 0,layout:void 0},(e,t)=>{let i=t.element,l=h({layout:i.layout||"horizontal",onChange(e){i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return f(()=>{i.removeAttribute("options"),i.removeAttribute("field-names"),i.removeAttribute("css")}),v(C,l)});export default C;n(["click","keyup"]);
1
+ import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=t("<style>"),u=t("<section>"),m=t('<span><input class="checkbox" type="checkbox"><label>');import{For as c,createComponent as v,createEffect as f,createMemo as p,createSignal as b,mergeProps as h}from"solid-js";import{css as g,cx as k}from"@moneko/css";import{customElement as y}from"solid-element";import{style as j}from"./style";import{FieldName as w}from"../basic-config";import x from"../get-options";import A from"../theme";function C(t){let{baseStyle:n}=A,[v,h]=b([]),y=p(()=>Object.assign({},w,t.fieldNames));f(()=>{let e=void 0===t.value?t.defaultValue:t.value,i=[];Array.isArray(e)?i=e:void 0!==e&&(i=[e]),h(i)});let C=p(()=>{let e=y();if(void 0===t.options)return x([{value:1}],e);let i=[{[e.value]:"all",[e.label]:"全选",indeterminate:!1}],l=t.checkAll?i:[];return l.concat(x(t.options||[],e))}),E=p(()=>{let e=[],t=y();return C().forEach(i=>{"indeterminate"in i||void 0===i[t.value]||e.push(i[t.value])}),e}),$=p(()=>{let e=!0,t=E();for(let i=0,l=t.length;i<l;i++)if(!v().includes(t[i])){e=!1;break}return e});function _(e){if(!t.disabled&&!e.disabled){let i="indeterminate"in e,l=i?[]:[...v()],o=e[y().value];if(i)$()||(l=E());else{let e=l.indexOf(o);-1!==e?l.splice(e,1):l.push(o)}void 0===t.value&&h(l),null==t.onChange||t.onChange.call(t,void 0===t.options?!!l[0]:l)}}function N(e,t){t.preventDefault(),"Enter"===t.key&&_(e)}return[(()=>{let e=d();return l(e,n,null),l(e,j,null),l(e,()=>g(t.css),null),e})(),(()=>{let n=u();return l(n,r(c,{get each(){return C()},children:n=>{let r=t.disabled||n.disabled,d=y(),u=n[d.value];return"indeterminate"in n&&f(()=>{let e;n.ref.indeterminate=(e=!1,E().forEach(t=>{v().length&&!v().includes(t)&&(e=!0)}),e)}),(()=>{let c=m(),f=c.firstChild,p=n.ref,b=f.nextSibling;return a(c,"click",_.bind(null,n),!0),a(c,"keyup",N.bind(null,n),!0),i(c,"aria-disabled",r),i(c,"tabindex",r?-1:0),a(f,"change",_.bind(null,n)),"function"==typeof p?e(p,f):n.ref=f,f.value=u,f.disabled=r,l(b,()=>n[d.label]),o(e=>{let l=k("item",n.class,n.status),o=t.name;return l!==e._v$&&s(c,e._v$=l),o!==e._v$2&&i(f,"name",e._v$2=o),e},{_v$:void 0,_v$2:void 0}),o(()=>f.checked="indeterminate"in n?$():v().includes(u)),c})()}})),o(()=>s(n,k("box",t.layout,t.class))),n})()]}y("n-checkbox",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:void 0,onChange:void 0,fieldNames:void 0,checkAll:void 0,layout:void 0},(e,t)=>{let i=t.element,l=h({layout:i.layout||"horizontal",onChange(e){i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return f(()=>{i.removeAttribute("options"),i.removeAttribute("field-names"),i.removeAttribute("css")}),v(C,l)});export default C;n(["click","keyup"]);
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/checkbox/index.tsx"],"sourcesContent":["import { For, createComponent, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** input[type=\"checkbox\"] 的 name 属性 */\n name?: string;\n /** 只读 */\n disabled?: boolean;\n /** 选项排列方式\n * @default 'horizontal'\n */\n layout?: 'vertical' | 'horizontal';\n /** 自定义节点 'label'、'value'、'options' 的字段 */\n fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n /** 一个 bool 值; */\n value?: boolean;\n /** 默认值 */\n defaultValue?: boolean;\n /** 值修改时的回调方法 */\n onChange?: (val: boolean) => void;\n checkAll?: never;\n options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n /** 全选 */\n checkAll?: boolean;\n /** 值;\n * 当设置了value时, 将是受控模式;\n * 受控模式可通过 onChange 事件更新 value\n **/\n value?: (string | number)[];\n /** 默认值 */\n defaultValue?: (string | number)[];\n /** 渲染选项所使用的数据,\n * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n * */\n options?: (CheckboxOption | string)[];\n /** 值修改时的回调方法 */\n onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n /** 不确定状态 */\n indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n const { baseStyle } = theme;\n const [value, setValue] = createSignal<(string | number)[]>([]);\n const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n createEffect(() => {\n const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n let val: (string | number)[] = [];\n\n if (Array.isArray(_val)) {\n val = _val;\n } else if (typeof _val !== 'undefined') {\n val = [_val as unknown as string];\n }\n\n setValue(val);\n });\n const options = createMemo(() => {\n const fieldName = fieldNames();\n\n if (typeof props.options === 'undefined') {\n return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n }\n const checkAll: CheckboxOption[] = [\n { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n ];\n const arr = props.checkAll ? checkAll : [];\n\n return arr.concat(getOptions(props.options || [], fieldName));\n });\n\n const all = createMemo(() => {\n const allVal: (string | number)[] = [];\n const fieldName = fieldNames();\n\n options().forEach((item) => {\n if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n allVal.push(item[fieldName.value]!);\n }\n });\n\n return allVal;\n });\n\n function getIndeterminate() {\n let _indeterminate = false;\n\n all().forEach((v) => {\n if (value().length && !value().includes(v)) {\n _indeterminate = true;\n }\n });\n return _indeterminate;\n }\n const checkedAll = createMemo(() => {\n let checked = true;\n const alls = all();\n\n for (let i = 0, len = alls.length; i < len; i++) {\n if (!value().includes(alls[i])) {\n checked = false;\n break;\n }\n }\n return checked;\n });\n\n function onChange(item: CheckboxOption) {\n if (!props.disabled && !item.disabled) {\n const isIndeterminate = 'indeterminate' in item;\n let newVal = isIndeterminate ? [] : [...value()];\n const val = item[fieldNames().value]!;\n\n if (isIndeterminate) {\n if (!checkedAll()) {\n newVal = all();\n }\n } else {\n const idx = newVal.indexOf(val);\n\n if (idx !== -1) {\n newVal.splice(idx, 1);\n } else {\n newVal.push(val);\n }\n }\n if (typeof props.value === 'undefined') {\n setValue(newVal);\n }\n props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n }\n }\n function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n e.preventDefault();\n if (e.key === 'Enter') {\n onChange(item);\n }\n }\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {css(props.css)}\n </style>\n <section class={cx('box', props.layout, props.class)}>\n <For each={options()}>\n {(item) => {\n const readOnly = props.disabled || item.disabled;\n const fieldName = fieldNames();\n const realVal = item[fieldName.value]!;\n\n if ('indeterminate' in item) {\n createEffect(() => {\n item.ref.indeterminate = getIndeterminate();\n });\n }\n return (\n <span\n class={cx('item', item.class, item.status)}\n aria-disabled={readOnly}\n tabindex={readOnly ? -1 : 0}\n onKeyUp={onKeyUp.bind(null, item)}\n onClick={onChange.bind(null, item)}\n >\n <input\n ref={item.ref}\n class=\"checkbox\"\n type=\"checkbox\"\n name={props.name}\n value={realVal as string}\n disabled={readOnly}\n checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n onChange={onChange.bind(null, item)}\n />\n <label>{item[fieldName.label]}</label>\n </span>\n );\n }}\n </For>\n </section>\n </>\n );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n 'n-checkbox',\n {\n class: void 0,\n css: void 0,\n name: void 0,\n disabled: void 0,\n value: void 0,\n defaultValue: void 0,\n options: void 0,\n onChange: void 0,\n fieldNames: void 0,\n checkAll: void 0,\n layout: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n layout: el.layout || 'horizontal',\n onChange(next: (string | number)[] | boolean) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: next,\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n el.removeAttribute('options');\n el.removeAttribute('field-names');\n el.removeAttribute('css');\n });\n return createComponent(Checkbox, props);\n },\n);\nexport default Checkbox;\n"],"names":["For","createComponent","createEffect","createMemo","createSignal","mergeProps","css","cx","customElement","style","FieldName","getOptions","theme","Checkbox","props","baseStyle","value","setValue","fieldNames","Object","assign","_val","defaultValue","val","Array","isArray","options","fieldName","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","readOnly","realVal","_indeterminate","ref","v","bind","class","status","name","layout","_","opt","el","element","next","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}
1
+ {"version":3,"sources":["../../components/checkbox/index.tsx"],"sourcesContent":["import { For, createComponent, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** input[type=\"checkbox\"] 的 name 属性 */\n name?: string;\n /** 只读 */\n disabled?: boolean;\n /** 选项排列方式\n * @default 'horizontal'\n */\n layout?: 'vertical' | 'horizontal';\n /** 自定义节点 'label'、'value'、'options' 的字段 */\n fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n /** 一个 bool 值; */\n value?: boolean;\n /** 默认值 */\n defaultValue?: boolean;\n /** 值修改时的回调方法 */\n onChange?: (val: boolean) => void;\n checkAll?: never;\n options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n /** 全选 */\n checkAll?: boolean;\n /** 值;\n * 当设置了value时, 将是受控模式;\n * 受控模式可通过 onChange 事件更新 value\n **/\n value?: (string | number)[];\n /** 默认值 */\n defaultValue?: (string | number)[];\n /** 渲染选项所使用的数据,\n * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n * */\n options?: (CheckboxOption | string)[];\n /** 值修改时的回调方法 */\n onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n /** 不确定状态 */\n indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n const { baseStyle } = theme;\n const [value, setValue] = createSignal<(string | number)[]>([]);\n const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n createEffect(() => {\n const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n let val: (string | number)[] = [];\n\n if (Array.isArray(_val)) {\n val = _val;\n } else if (typeof _val !== 'undefined') {\n val = [_val as unknown as string];\n }\n\n setValue(val);\n });\n const options = createMemo(() => {\n const fieldName = fieldNames();\n\n if (typeof props.options === 'undefined') {\n return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n }\n const checkAll: CheckboxOption[] = [\n { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n ];\n const arr = props.checkAll ? checkAll : [];\n\n return arr.concat(getOptions(props.options || [], fieldName));\n });\n\n const all = createMemo(() => {\n const allVal: (string | number)[] = [];\n const fieldName = fieldNames();\n\n options().forEach((item) => {\n if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n allVal.push(item[fieldName.value]!);\n }\n });\n\n return allVal;\n });\n\n function getIndeterminate() {\n let _indeterminate = false;\n\n all().forEach((v) => {\n if (value().length && !value().includes(v)) {\n _indeterminate = true;\n }\n });\n return _indeterminate;\n }\n const checkedAll = createMemo(() => {\n let checked = true;\n const alls = all();\n\n for (let i = 0, len = alls.length; i < len; i++) {\n if (!value().includes(alls[i])) {\n checked = false;\n break;\n }\n }\n return checked;\n });\n\n function onChange(item: CheckboxOption) {\n if (!props.disabled && !item.disabled) {\n const isIndeterminate = 'indeterminate' in item;\n let newVal = isIndeterminate ? [] : [...value()];\n const val = item[fieldNames().value]!;\n\n if (isIndeterminate) {\n if (!checkedAll()) {\n newVal = all();\n }\n } else {\n const idx = newVal.indexOf(val);\n\n if (idx !== -1) {\n newVal.splice(idx, 1);\n } else {\n newVal.push(val);\n }\n }\n if (typeof props.value === 'undefined') {\n setValue(newVal);\n }\n props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n }\n }\n function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n e.preventDefault();\n if (e.key === 'Enter') {\n onChange(item);\n }\n }\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {css(props.css)}\n </style>\n <section class={cx('box', props.layout, props.class)}>\n <For each={options()}>\n {(item) => {\n const readOnly = props.disabled || item.disabled;\n const fieldName = fieldNames();\n const realVal = item[fieldName.value]!;\n\n if ('indeterminate' in item) {\n createEffect(() => {\n item.ref.indeterminate = getIndeterminate();\n });\n }\n return (\n <span\n class={cx('item', item.class, item.status)}\n aria-disabled={readOnly}\n tabindex={readOnly ? -1 : 0}\n onKeyUp={onKeyUp.bind(null, item)}\n onClick={onChange.bind(null, item)}\n >\n <input\n ref={item.ref}\n class=\"checkbox\"\n type=\"checkbox\"\n name={props.name}\n value={realVal as string}\n disabled={readOnly}\n checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n onChange={onChange.bind(null, item)}\n />\n <label>{item[fieldName.label]}</label>\n </span>\n );\n }}\n </For>\n </section>\n </>\n );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n 'n-checkbox',\n {\n class: void 0,\n css: void 0,\n name: void 0,\n disabled: void 0,\n value: void 0,\n defaultValue: void 0,\n options: void 0,\n onChange: void 0,\n fieldNames: void 0,\n checkAll: void 0,\n layout: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n layout: el.layout || 'horizontal',\n onChange(next: (string | number)[] | boolean) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: next,\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n el.removeAttribute('options');\n el.removeAttribute('field-names');\n el.removeAttribute('css');\n });\n return createComponent(Checkbox, props);\n },\n);\nexport default Checkbox;\n"],"names":["For","createComponent","createEffect","createMemo","createSignal","mergeProps","css","cx","customElement","style","FieldName","getOptions","theme","Checkbox","props","baseStyle","value","setValue","fieldNames","Object","assign","_val","defaultValue","val","Array","isArray","options","fieldName","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","readOnly","realVal","_indeterminate","ref","v","bind","class","status","name","layout","_","opt","el","element","next","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}
package/es/code/index.js CHANGED
@@ -1,14 +1,2 @@
1
- import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as i}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=/*#__PURE__*/t('<div class="toolbar"><button class="toolbar-copy">'),m=/*#__PURE__*/t("<pre><code>"),u=/*#__PURE__*/t("<style>"),c=/*#__PURE__*/t("<div><textarea>");import{Show as v,createComponent as p,createEffect as f,createSignal as g,mergeProps as b,untrack as h}from"solid-js";import w from"@moneko/common/lib/isFunction";import $ from"@moneko/common/lib/setClipboard";import{css as _,cx as C}from"@moneko/css";import{customElement as j}from"solid-element";import{style as y}from"./style";import k from"../prism/css";import"../prism/prism.js";import P from"../theme";function x(t){let n;let{baseStyle:p}=P,[b,j]=g(""),[x,E]=g(20);function N(){$(h(b),n)}function A(){return(()=>{let u=m(),c=u.firstChild,p=n;return r(u,l(v,{get when(){return t.toolbar},get children(){let e=d(),r=e.firstChild;return a(r,"click",N,!0),i(()=>{var r;return o(e,"data-lang",null==(r=t.lang)?void 0:r.split(" ")[0])}),e}}),c),"function"==typeof p?e(p,c):n=c,i(e=>{let o=C(`language-${t.lang}`,t.lineNumber&&"line-numbers",!t.toolbar&&"not-toolbar",!t.edit&&t.class),r=`language-${t.lang}`;return o!==e._v$&&s(u,e._v$=o),r!==e._v$2&&s(c,e._v$2=r),e},{_v$:void 0,_v$2:void 0}),u})()}function L({target:e}){let o=`${e.value}${/\n$/.test(e.value)?"​":""}`;j(o),w(t.onChange)&&t.onChange(o)}return(// const work = new Worker(new URL("./worker.ts", import.meta.url), {
2
- // name: "wastedTime",
3
- // /* webpackEntryOptions: { filename: "workers/[name].js" } */
4
- // });
5
- // work.addEventListener('message', update);
6
- // work.postMessage({
7
- // lang: props.lang,
8
- // code: code(),
9
- // });
10
- // onCleanup(() => {
11
- // work.terminate();
12
- // });
13
- f(()=>{if(t.code){let e=t.code.replace(/^\n/,"");try{j(decodeURIComponent(e))}catch(t){j(e)}}else j("")}),f(()=>{!function(e){var o;if(!e.code)return;let r=e.lang||"markup";/^diff-([\w-]+)/i.test(r)&&(window.Prism.languages[r]=window.Prism.languages.diff),o={data:window.Prism.highlight(e.code,window.Prism.languages[r],r)},n.innerHTML=o.data,E(n.getBoundingClientRect().height-(t.toolbar?40:16))}({lang:t.lang,code:b()})}),[(()=>{let e=u();return r(e,p,null),r(e,k,null),r(e,y,null),r(e,()=>_(t.css),null),e})(),l(v,{get when(){return t.edit},get fallback(){return A()},get children(){let e=c(),o=e.firstChild;return a(o,"input",L,!0),r(e,A,null),i(r=>{let i=C("n-editor",t.class),n=C(t.lineNumber&&"line-numbers",!t.toolbar&&"not-toolbar"),l=`${x()}px`;return i!==r._v$3&&s(e,r._v$3=i),n!==r._v$4&&s(o,r._v$4=n),l!==r._v$5&&(null!=(r._v$5=l)?o.style.setProperty("height",l):o.style.removeProperty("height")),r},{_v$3:void 0,_v$4:void 0,_v$5:void 0}),i(()=>o.value=b()),e}})])}j("n-code",{class:void 0,code:void 0,lang:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,lineNumber:void 0,onChange:void 0},(e,t)=>{let o=t.element,r=b({code:o.textContent,css:o.css,onChange(e){o.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return f(()=>{o.replaceChildren(),o.removeAttribute("css")}),p(x,r)});export default x;n(["click","input"]);
1
+ import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as i}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=t('<div class="toolbar"><button class="toolbar-copy">'),m=t("<pre><code>"),u=t("<style>"),c=t("<div><textarea>");import{Show as v,createComponent as p,createEffect as f,createSignal as g,mergeProps as b,untrack as h}from"solid-js";import w from"@moneko/common/lib/isFunction";import $ from"@moneko/common/lib/setClipboard";import{css as _,cx as C}from"@moneko/css";import{customElement as j}from"solid-element";import{style as y}from"./style";import k from"../prism/css";import"../prism/prism.js";import P from"../theme";function x(t){let n;let{baseStyle:p}=P,[b,j]=g(""),[x,E]=g(20);function N(){$(h(b),n)}function A(){return(()=>{let u=m(),c=u.firstChild,p=n;return r(u,l(v,{get when(){return t.toolbar},get children(){let e=d(),r=e.firstChild;return a(r,"click",N,!0),i(()=>{var r;return o(e,"data-lang",null==(r=t.lang)?void 0:r.split(" ")[0])}),e}}),c),"function"==typeof p?e(p,c):n=c,i(e=>{let o=C(`language-${t.lang}`,t.lineNumber&&"line-numbers",!t.toolbar&&"not-toolbar",!t.edit&&t.class),r=`language-${t.lang}`;return o!==e._v$&&s(u,e._v$=o),r!==e._v$2&&s(c,e._v$2=r),e},{_v$:void 0,_v$2:void 0}),u})()}function L({target:e}){let o=`${e.value}${/\n$/.test(e.value)?"​":""}`;j(o),w(t.onChange)&&t.onChange(o)}return f(()=>{if(t.code){let e=t.code.replace(/^\n/,"");try{j(decodeURIComponent(e))}catch(t){j(e)}}else j("")}),f(()=>{!function(e){var o;if(!e.code)return;let r=e.lang||"markup";/^diff-([\w-]+)/i.test(r)&&(window.Prism.languages[r]=window.Prism.languages.diff),o={data:window.Prism.highlight(e.code,window.Prism.languages[r],r)},n.innerHTML=o.data,E(n.getBoundingClientRect().height-(t.toolbar?40:16))}({lang:t.lang,code:b()})}),[(()=>{let e=u();return r(e,p,null),r(e,k,null),r(e,y,null),r(e,()=>_(t.css),null),e})(),l(v,{get when(){return t.edit},get fallback(){return A()},get children(){let e=c(),o=e.firstChild;return a(o,"input",L,!0),r(e,A,null),i(r=>{let i=C("n-editor",t.class),n=C(t.lineNumber&&"line-numbers",!t.toolbar&&"not-toolbar"),l=`${x()}px`;return i!==r._v$3&&s(e,r._v$3=i),n!==r._v$4&&s(o,r._v$4=n),l!==r._v$5&&(null!=(r._v$5=l)?o.style.setProperty("height",l):o.style.removeProperty("height")),r},{_v$3:void 0,_v$4:void 0,_v$5:void 0}),i(()=>o.value=b()),e}})]}j("n-code",{class:void 0,code:void 0,lang:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,lineNumber:void 0,onChange:void 0},(e,t)=>{let o=t.element,r=b({code:o.textContent,css:o.css,onChange(e){o.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return f(()=>{o.replaceChildren(),o.removeAttribute("css")}),p(x,r)});export default x;n(["click","input"]);
14
2
  //# sourceMappingURL=index.js.map