npm - @lumal/icons-vue - Versions diffs - 0.0.2-beta → 0.0.4-beta - Mend

@lumal/icons-vue 0.0.2-beta → 0.0.4-beta

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 (20) hide show

package/CHANGELOG.md +25 -0
package/README.md +41 -0
package/dist/icons-vue.css +1 -1
package/dist/index.cjs +1 -1
package/dist/index.js +257 -128
package/dist/src/components/LumalIcon.vue.d.ts +3 -0
package/dist/src/components/LumalIcon.vue.d.ts.map +1 -1
package/dist/src/components/LumalIconPicker.vue.d.ts +13 -1
package/dist/src/components/LumalIconPicker.vue.d.ts.map +1 -1
package/dist/src/components/LumalIconPickerDialog.vue.d.ts +11 -1
package/dist/src/components/LumalIconPickerDialog.vue.d.ts.map +1 -1
package/dist/src/composables/useIconMorph.d.ts +12 -0
package/dist/src/composables/useIconMorph.d.ts.map +1 -0
package/dist/src/index.d.ts +1 -0
package/dist/src/index.d.ts.map +1 -1
package/dist/src/runtime/morph.d.ts +6 -0
package/dist/src/runtime/morph.d.ts.map +1 -0
package/dist/src/types.d.ts +9 -0
package/dist/src/types.d.ts.map +1 -0
package/package.json +4 -2

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,25 @@
+# @lumal/icons-vue
+## 0.0.4-beta (2026-10-20)
+### Minor Changes
+- LumalIcon 增加 morph 和 morphSpring，复用通用转换并动态加载官方 Vue 绑定；SSR、减少动画或加载失败时保留静态图标。
+- 图标选择器及弹窗公开 group-select 插槽与类型，允许消费应用接入 UI 分组控件，不在图标包中依赖 Element Plus。
+### Patch Changes
+- 修复名称换行、弹窗分页与尺寸布局，补充选择回写、组件复用和动画清理测试。
+- 同步 @lumal/icons 至 0.0.4-beta，保持静态图标不加载 Morphicons 引擎。
+## 0.0.3-beta (2026-10-16)
+### Patch Changes
+- 修复直接传入 component、Iconify 和 local-svg 图标定义时的分支解析。
+- 图标选择弹窗增加 Teleport、键盘焦点约束与焦点恢复，并使用 useTemplateRef。
+- 明确 SVG 仅接受可信静态资源，格式校验不等于安全净化。
+## 0.0.2-beta (2026-08-01)
+- Version bump only, to stay in lockstep with the other @lumal packages.

package/README.md CHANGED Viewed

@@ -14,3 +14,44 @@ import '@lumal/icons-vue/style.css'
 ```
 SVG 改色、渐变、合成、Data URI 和注册表等纯 TypeScript 能力由 `@lumal/icons` 提供。
+## 选择器布局
+`LumalIconPicker` 的 `pageSize` 默认 48；启用 `showLabels` 时格子会加宽，名称完整换行显示。搜索和原生分组控件高度一致，默认 32px，可跟随 `--el-component-size` 调整，不引入 Element Plus 运行时。
+`LumalIconPickerDialog` 每页 48 个图标，桌面为 8 列，小屏幕为 6 或 4 列，完整页面不会出现不足一行的尾行；末页按实际剩余数量展示。Admin 图标库默认每页 72 个，可切换到 96 个。
+弹窗高度随视口限制固定，搜索、分组切换或末页图标变少不会改变外框高度；头尾固定，中间内容独立滚动，并预留滚动条宽度。
+## 分组控件适配
+`LumalIconPicker` 默认使用原生分组下拉框，不强制依赖 Element Plus。`LumalIconPicker` 与 `LumalIconPickerDialog` 都提供 `group-select` 插槽，接收 `{ modelValue, groups, setGroup }`；类型 `LumalIconPickerGroupSelectSlotProps` 从本包导出。
+Vue + Element Plus 应用可在该插槽内使用 `ElSelect` / `ElOption`，将 `modelValue` 作为当前值，并在更新时调用 `setGroup`。弹窗中的下拉层应设置 `:teleported="false"`，避免离开弹窗的焦点边界。Element Plus 组件、样式及 `@element-plus/icons-vue` 图标集由应用自行引入，不进入两个图标包的依赖。
+分组插槽外层不使用原生 `label` 包裹，避免内联选项层选择后再次激活控件；自定义分组控件应保留 `aria-label` 等可访问名称。
+Admin 已接入 Element Plus 分组控件，并将官方图标集预生成为应用侧可信 SVG，按需注册到 `element-plus` 分组。所有图标仍通过 `LumalIcon` 渲染，完整 Vue 组件图标集不进入运行时。
+Admin 的 Iconify 分组预置 16 个离线示例图标，包含 15 个 Lucide 常用图标及原有徽标，支持中文搜索；数据与许可留在应用侧，不引入整套图标集依赖或远程请求。
+## 状态形变
+当前源码在同一个 `LumalIcon` 中提供可选形变；已发布版本请以安装包的声明文件为准。
+```vue
+<LumalIcon :name="iconName" morph morph-spring="smooth" :size="20" />
+```
+- `morph?: boolean` 默认 `false`。
+- `morphSpring?: LumalIconMorphSpring` 默认 `'smooth'`；从本包导出该类型，可选 `'smooth' | 'snappy' | 'bouncy'`。
+- 首次直接显示，后续形状变化才播放。保留实例，不使用 `:key="iconName"`；连续切换从中间形状继续，改色或缩放不重播。
+- 支持带有效 `viewBox` 的可信单色 SVG（注册名称、直接定义、SVG 字符串）。组件、Iconify、渐变及无法保真转换的 SVG 保持静态渲染。
+- 复用 `@lumal/icons/morph` 的通用转换，再按需加载 `morphicons@2.0.0` 官方 Vue 绑定；填充归一化就绪前、SSR 和加载失败时均保留原始静态 SVG。静态消费者不加载引擎，ESM/CJS 均可消费。
+- 遵守系统减少动画设置，关闭、卸载和失败时清理动画。保留尺寸、颜色继承和标题；图标按钮仍需提供 `aria-label`。
+形变不限定 Vue：非 Vue 项目可使用 `@lumal/icons/morph` 的 `createIconMorph` DOM 控制器或 `prepareIconMorph` 转换数据，并安装其可选 Morphicons peer。Vue 包已将 Morphicons 作为依赖，内核静态入口仍无强制运行时依赖。SVG/Data URI 输出和选择器不受影响。
+Admin 图标示例新增懒加载的“形变动画”标签，并在主题、侧栏、内容最大化和表格全屏入口使用状态形变。完整边界见仓库 `docs/icons.md`。
+`LumalIcon` 接受注册名或直接 `IconDefinition`（component / iconify / local-svg）。SVG 使用 HTML 渲染，仅接受可信静态资源；注册和渲染不自动净化，单色格式校验不是完整 sanitizer。图标选择弹窗通过 Teleport 挂载到 body，约束 Tab、支持 Escape，并在关闭/卸载时恢复焦点。

package/dist/icons-vue.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.lumal-icon[data-v-d5c4f92d]{width:var(--lumal-icon-size);height:var(--lumal-icon-size);vertical-align:-.125em;justify-content:center;align-items:center;line-height:1;display:inline-flex}.lumal-icon__svg[data-v-d5c4f92d],.lumal-icon__component[data-v-d5c4f92d]{width:100%;height:100%}.lumal-icon__svg[data-v-d5c4f92d] svg{width:100%;height:100%;display:block}.lumal-icon-picker[data-v-937c0d9c]{gap:12px;display:grid}.lumal-icon-picker__toolbar[data-v-937c0d9c]{grid-template-columns:minmax(0,1fr) minmax(140px,200px);gap:12px;display:grid}.lumal-icon-picker__field[data-v-937c0d9c]{gap:6px;display:grid}.lumal-icon-picker__field-label[data-v-937c0d9c],.lumal-icon-picker__summary[data-v-937c0d9c],.lumal-icon-picker__empty[data-v-937c0d9c]{color:var(--el-text-color-secondary,CanvasText);font-size:13px}.lumal-icon-picker__field input[data-v-937c0d9c],.lumal-icon-picker__field select[data-v-937c0d9c],.lumal-icon-picker__pagination button[data-v-937c0d9c]{border:1px solid var(--el-border-color,currentColor);border-radius:var(--lumal-radius-base,8px);min-height:44px;color:var(--el-text-color-primary,CanvasText);background:var(--el-bg-color,Canvas);padding:0 12px}.lumal-icon-picker__summary[data-v-937c0d9c],.lumal-icon-picker__empty[data-v-937c0d9c]{margin:0}.lumal-icon-picker__grid[data-v-937c0d9c]{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;display:grid}.lumal-icon-picker__item[data-v-937c0d9c]{border:1px solid var(--el-border-color-lighter,currentColor);border-radius:var(--lumal-radius-small,6px);min-width:44px;min-height:52px;color:var(--el-text-color-regular,CanvasText);background:var(--el-bg-color,Canvas);cursor:pointer;transition:border-color var(--lumal-motion-fast,.16s), background-color var(--lumal-motion-fast,.16s);flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:8px;display:inline-flex}.lumal-icon-picker__item[data-v-937c0d9c]:hover,.lumal-icon-picker__item.is-selected[data-v-937c0d9c]{border-color:var(--el-color-primary,Highlight);background:var(--el-color-primary-light-9,Canvas)}.lumal-icon-picker__item[data-v-937c0d9c]:focus-visible,.lumal-icon-picker__field input[data-v-937c0d9c]:focus-visible,.lumal-icon-picker__field select[data-v-937c0d9c]:focus-visible,.lumal-icon-picker__pagination button[data-v-937c0d9c]:focus-visible{outline:2px solid var(--el-color-primary,Highlight);outline-offset:2px}.lumal-icon-picker__item span[data-v-937c0d9c]{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;overflow:hidden}.lumal-icon-picker__pagination[data-v-937c0d9c]{justify-content:center;align-items:center;gap:12px;display:flex}.lumal-icon-picker__pagination button[data-v-937c0d9c]:disabled{cursor:not-allowed;opacity:.5}@media (width<=640px){.lumal-icon-picker__toolbar[data-v-937c0d9c]{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.lumal-icon-picker__item[data-v-937c0d9c]{transition:none}}.lumal-icon-picker-dialog[data-v-9bd629e7]{z-index:var(--lumal-z-dialog,500);background:color-mix(in srgb, CanvasText 48%, transparent);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.lumal-icon-picker-dialog__body[data-v-9bd629e7]{border-radius:var(--lumal-radius-large,12px);width:min(680px,100%);max-height:min(680px,88dvh);color:var(--el-text-color-primary,CanvasText);background:var(--el-bg-color,Canvas);box-shadow:var(--lumal-shadow-dialog,0 18px 48px color-mix(in srgb, CanvasText 18%, transparent));display:grid;overflow:hidden}.lumal-icon-picker-dialog__header[data-v-9bd629e7],.lumal-icon-picker-dialog__footer[data-v-9bd629e7]{justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 20px;display:flex}.lumal-icon-picker-dialog__header[data-v-9bd629e7]{border-bottom:1px solid var(--el-border-color-lighter,currentColor)}.lumal-icon-picker-dialog__header h3[data-v-9bd629e7]{margin:0;font-size:17px}.lumal-icon-picker-dialog__content[data-v-9bd629e7]{min-height:0;padding:20px;overflow:auto}.lumal-icon-picker-dialog__footer[data-v-9bd629e7]{border-top:1px solid var(--el-border-color-lighter,currentColor);justify-content:flex-end}.lumal-icon-picker-dialog button[data-v-9bd629e7]{border:1px solid var(--el-border-color,currentColor);border-radius:var(--lumal-radius-base,8px);min-width:44px;min-height:44px;color:inherit;background:var(--el-bg-color,Canvas);cursor:pointer;padding:0 14px}.lumal-icon-picker-dialog button.is-primary[data-v-9bd629e7]{border-color:var(--el-color-primary,Highlight);color:var(--el-color-white,HighlightText);background:var(--el-color-primary,Highlight)}.lumal-icon-picker-dialog button[data-v-9bd629e7]:disabled{cursor:not-allowed;opacity:.5}@media (width<=640px){.lumal-icon-picker-dialog[data-v-9bd629e7]{align-items:flex-end;padding:0}.lumal-icon-picker-dialog__body[data-v-9bd629e7]{border-radius:var(--lumal-radius-large,12px) var(--lumal-radius-large,12px) 0 0;max-height:92dvh}}
+.lumal-icon[data-v-42fa0af8]{width:var(--lumal-icon-size);height:var(--lumal-icon-size);vertical-align:-.125em;justify-content:center;align-items:center;line-height:1;display:inline-flex}.lumal-icon__svg[data-v-42fa0af8],.lumal-icon__component[data-v-42fa0af8]{width:100%;height:100%}.lumal-icon__svg[data-v-42fa0af8] svg{width:100%;height:100%;display:block}.lumal-icon-picker[data-v-0b9c266c]{gap:12px;min-width:0;display:grid}.lumal-icon-picker__toolbar[data-v-0b9c266c]{grid-template-columns:minmax(0,1fr) minmax(140px,200px);align-items:start;gap:12px;display:grid}.lumal-icon-picker__field[data-v-0b9c266c]{gap:6px;min-width:0;display:grid}.lumal-icon-picker__field-label[data-v-0b9c266c],.lumal-icon-picker__summary[data-v-0b9c266c],.lumal-icon-picker__empty[data-v-0b9c266c]{color:var(--el-text-color-secondary,CanvasText);font-size:13px}.lumal-icon-picker__field input[data-v-0b9c266c],.lumal-icon-picker__field select[data-v-0b9c266c],.lumal-icon-picker__pagination button[data-v-0b9c266c]{box-sizing:border-box;height:var(--el-component-size,32px);min-height:var(--el-component-size,32px);border:1px solid var(--el-border-color,currentColor);border-radius:var(--lumal-radius-base,8px);color:var(--el-text-color-primary,CanvasText);background:var(--el-bg-color,Canvas);font:inherit;font-size:var(--lumal-font-size-base,14px);padding:0 12px}.lumal-icon-picker__field input[data-v-0b9c266c],.lumal-icon-picker__field select[data-v-0b9c266c]{width:100%;min-width:0}.lumal-icon-picker__summary[data-v-0b9c266c],.lumal-icon-picker__empty[data-v-0b9c266c]{margin:0}.lumal-icon-picker__grid[data-v-0b9c266c]{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;display:grid}.lumal-icon-picker--show-labels .lumal-icon-picker__grid[data-v-0b9c266c]{grid-template-columns:repeat(auto-fill,minmax(min(96px,100%),1fr));grid-auto-rows:minmax(84px,auto)}.lumal-icon-picker__item[data-v-0b9c266c]{border:1px solid var(--el-border-color-lighter,currentColor);border-radius:var(--lumal-radius-small,6px);min-width:44px;min-height:52px;color:var(--el-text-color-regular,CanvasText);background:var(--el-bg-color,Canvas);cursor:pointer;transition:border-color var(--lumal-motion-fast,.16s), background-color var(--lumal-motion-fast,.16s);flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:8px;display:inline-flex}.lumal-icon-picker__item[data-v-0b9c266c]:hover,.lumal-icon-picker__item.is-selected[data-v-0b9c266c]{border-color:var(--el-color-primary,Highlight);background:var(--el-color-primary-light-9,Canvas)}.lumal-icon-picker__item[data-v-0b9c266c]:focus-visible,.lumal-icon-picker__field input[data-v-0b9c266c]:focus-visible,.lumal-icon-picker__field select[data-v-0b9c266c]:focus-visible,.lumal-icon-picker__pagination button[data-v-0b9c266c]:focus-visible{outline:2px solid var(--el-color-primary,Highlight);outline-offset:2px}.lumal-icon-picker__item-label[data-v-0b9c266c]{width:100%;max-width:100%;font-size:calc(var(--lumal-font-size-base,14px) - 2px);text-align:center;white-space:normal;overflow-wrap:anywhere;line-height:1.4}.lumal-icon-picker__pagination[data-v-0b9c266c]{justify-content:center;align-items:center;gap:12px;display:flex}.lumal-icon-picker__pagination button[data-v-0b9c266c]:disabled{cursor:not-allowed;opacity:.5}@media (width<=640px){.lumal-icon-picker__toolbar[data-v-0b9c266c]{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.lumal-icon-picker__item[data-v-0b9c266c]{transition:none}}.lumal-icon-picker-dialog[data-v-ee548916]{z-index:var(--lumal-z-dialog,500);background:color-mix(in srgb, CanvasText 48%, transparent);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.lumal-icon-picker-dialog__body[data-v-ee548916]{border-radius:var(--lumal-radius-large,12px);width:min(680px,100%);height:min(680px,88dvh);color:var(--el-text-color-primary,CanvasText);background:var(--el-bg-color,Canvas);box-shadow:var(--lumal-shadow-dialog,0 18px 48px color-mix(in srgb, CanvasText 18%, transparent));grid-template-rows:auto minmax(0,1fr) auto;display:grid;overflow:hidden}.lumal-icon-picker-dialog__header[data-v-ee548916],.lumal-icon-picker-dialog__footer[data-v-ee548916]{justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 20px;display:flex}.lumal-icon-picker-dialog__header[data-v-ee548916]{border-bottom:1px solid var(--el-border-color-lighter,currentColor)}.lumal-icon-picker-dialog__header h3[data-v-ee548916]{margin:0;font-size:17px}.lumal-icon-picker-dialog__content[data-v-ee548916]{scrollbar-gutter:stable;min-height:0;padding:20px;overflow:auto}.lumal-icon-picker-dialog__content[data-v-ee548916] .lumal-icon-picker__grid{grid-template-columns:repeat(8,minmax(0,1fr))}.lumal-icon-picker-dialog__footer[data-v-ee548916]{border-top:1px solid var(--el-border-color-lighter,currentColor);justify-content:flex-end}.lumal-icon-picker-dialog button[data-v-ee548916]{border:1px solid var(--el-border-color,currentColor);border-radius:var(--lumal-radius-base,8px);min-width:44px;min-height:44px;color:inherit;background:var(--el-bg-color,Canvas);cursor:pointer;padding:0 14px}.lumal-icon-picker-dialog button.is-primary[data-v-ee548916]{border-color:var(--el-color-primary,Highlight);color:var(--el-color-white,HighlightText);background:var(--el-color-primary,Highlight)}.lumal-icon-picker-dialog button[data-v-ee548916]:disabled{cursor:not-allowed;opacity:.5}@media (width<=640px){.lumal-icon-picker-dialog[data-v-ee548916]{align-items:flex-end;padding:0}.lumal-icon-picker-dialog__body[data-v-ee548916]{border-radius:var(--lumal-radius-large,12px) var(--lumal-radius-large,12px) 0 0;height:min(680px,92dvh)}}@media (width<=480px){.lumal-icon-picker-dialog__content[data-v-ee548916] .lumal-icon-picker__grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (width<=360px){.lumal-icon-picker-dialog__content[data-v-ee548916] .lumal-icon-picker__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
 /*$vite$:1*/

package/dist/index.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("@iconify/vue"),n=require("@lumal/icons");function r(){let t=(0,e.shallowRef)(0);(0,e.onScopeDispose)((0,n.subscribeIconRegistry)(()=>{t.value+=1}));let r=(0,e.computed)(()=>(t.value,(0,n.getRegisteredIconDefinitions)())),i=(0,e.computed)(()=>(t.value,(0,n.getRegisteredIconGroups)()));function a(e){return t.value,(0,n.resolveIconDefinition)(e)}return{groups:i,icons:r,resolve:a}}var i=[`title`],a=[`innerHTML`],o=(0,e.defineComponent)({__name:`LumalIcon`,props:{name:{},icon:{},size:{},color:{},gradient:{},title:{}},setup(o){let s=o,c=`lumal-icon-gradient-${(0,e.useId)()}`,l=r(),u=(0,e.computed)(()=>{if(s.name)return l.resolve(s.name)}),d=(0,e.computed)(()=>{let e=s.icon,t=u.value?.svgText??(typeof e==`string`&&e.trim().startsWith(`<svg`)?e:``)??(typeof e==`object`&&e&&`svgText`in e?String(e.svgText??``):``);return t?s.gradient?(0,n.applySvgGradient)(t,{...s.gradient,id:s.gradient.id??c}):(0,n.recolorSvgString)(t,s.color):``}),f=(0,e.computed)(()=>{let e=u.value?.component;if(typeof e==`function`\|\|typeof e==`object`&&e)return e;if(typeof s.icon==`object`&&s.icon&&`component`in s.icon){let e=s.icon.component;return typeof e==`function`\|\|typeof e==`object`&&e?e:void 0}return typeof s.icon==`function`\|\|typeof s.icon==`object`?s.icon:void 0}),p=(0,e.computed)(()=>{if(u.value?.source===`iconify`)return u.value.icon;if(typeof s.icon==`object`&&s.icon&&`source`in s.icon&&s.icon.source===`iconify`)return s.icon.icon}),m=(0,e.computed)(()=>({"--lumal-icon-size":typeof s.size==`number`?`${s.size}px`:s.size??`1em`,color:s.color})),h=(0,e.computed)(()=>!!(d.value\|\|f.value\|\|p.value)),g=(0,e.computed)(()=>s.title??u.value?.label);return(n,r)=>h.value?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{key:0,class:`lumal-icon`,style:(0,e.normalizeStyle)(m.value),title:g.value,"aria-hidden":`true`},[f.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(f.value),{key:0,class:`lumal-icon__component`})):p.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.Icon),{key:1,class:`lumal-icon__component`,icon:p.value},null,8,[`icon`])):((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{key:2,class:`lumal-icon__svg`,innerHTML:d.value},null,8,a))],12,i)):(0,e.createCommentVNode)(``,!0)}}),s=(e,t)=>{let n=e.__vccOpts\|\|e;for(let[e,r]of t)n[e]=r;return n},c=s(o,[[`__scopeId`,`data-v-d5c4f92d`]]),l={class:`lumal-icon-picker`},u={class:`lumal-icon-picker__toolbar`},d={key:0,class:`lumal-icon-picker__field`},f={key:1,class:`lumal-icon-picker__field`},p=[`value`],m={class:`lumal-icon-picker__summary`,role:`status`},h={key:0,class:`lumal-icon-picker__grid`,role:`listbox`,"aria-label":`图标列表`},g=[`aria-label`,`aria-selected`,`title`,`onClick`],_={key:0},v={key:1,class:`lumal-icon-picker__empty`},y={key:2,class:`lumal-icon-picker__pagination`},b=[`disabled`],x=[`disabled`],S=s((0,e.defineComponent)({__name:`LumalIconPicker`,props:(0,e.mergeModels)({group:{default:``},pageSize:{default:48},searchable:{type:Boolean,default:!0},showLabels:{type:Boolean,default:!1},storageKey:{default:``}},{modelValue:{},modelModifiers:{}}),emits:(0,e.mergeModels)([`select`],[`update:modelValue`]),setup(t,{emit:n}){let i=t,a=n,o=(0,e.useModel)(t,`modelValue`),s=(0,e.ref)(``),S=(0,e.ref)(i.group),C=(0,e.ref)(1),w=(0,e.computed)(()=>Math.max(1,i.pageSize)),T=r(),E=T.icons,D=(0,e.computed)(()=>{let e=T.groups.value,t=new Set(e.map(e=>e.key)),n=E.value.map(e=>e.group).filter(e=>typeof e==`string`&&!t.has(e)).filter((e,t,n)=>n.indexOf(e)===t).map(e=>({key:e,label:e}));return[...e,...n]}),O=(0,e.computed)(()=>{let e=s.value.trim().toLocaleLowerCase();return E.value.filter(t=>{let n=!S.value\|\|t.group===S.value,r=!e\|\|t.key.toLocaleLowerCase().includes(e)\|\|t.label?.toLocaleLowerCase().includes(e);return n&&r})}),k=(0,e.computed)(()=>Math.max(1,Math.ceil(O.value.length/w.value))),A=(0,e.computed)(()=>{let e=(C.value-1)*w.value;return O.value.slice(e,e+w.value)});(0,e.watch)([s,S,w],()=>{C.value=1}),(0,e.watch)(()=>i.group,e=>{S.value=e}),(0,e.watch)(k,e=>{C.value=Math.min(C.value,e)}),i.storageKey&&typeof localStorage<`u`&&!o.value&&(o.value=localStorage.getItem(i.storageKey)??void 0);function j(e){o.value=e.key,i.storageKey&&typeof localStorage<`u`&&localStorage.setItem(i.storageKey,e.key),a(`select`,e)}return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,l,[(0,e.createElementVNode)(`div`,u,[t.searchable?((0,e.openBlock)(),(0,e.createElementBlock)(`label`,d,[r[4]\|\|=(0,e.createElementVNode)(`span`,{class:`lumal-icon-picker__field-label`},`搜索图标`,-1),(0,e.withDirectives)((0,e.createElementVNode)(`input`,{"onUpdate:modelValue":r[0]\|\|=e=>s.value=e,type:`search`,placeholder:`输入名称或 key`},null,512),[[e.vModelText,s.value]])])):(0,e.createCommentVNode)(``,!0),D.value.length?((0,e.openBlock)(),(0,e.createElementBlock)(`label`,f,[r[6]\|\|=(0,e.createElementVNode)(`span`,{class:`lumal-icon-picker__field-label`},`图标分组`,-1),(0,e.withDirectives)((0,e.createElementVNode)(`select`,{"onUpdate:modelValue":r[1]\|\|=e=>S.value=e},[r[5]\|\|=(0,e.createElementVNode)(`option`,{value:``},`全部分组`,-1),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(D.value,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`option`,{key:t.key,value:t.key},(0,e.toDisplayString)(t.label),9,p))),128))],512),[[e.vModelSelect,S.value]])])):(0,e.createCommentVNode)(``,!0)]),(0,e.createElementVNode)(`p`,m,` 共 `+(0,e.toDisplayString)(O.value.length)+` 个图标 `,1),A.value.length?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,h,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(A.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:n.key,class:(0,e.normalizeClass)([`lumal-icon-picker__item`,{"is-selected":o.value===n.key}]),type:`button`,role:`option`,"aria-label":n.label\|\|n.key,"aria-selected":o.value===n.key,title:n.label\|\|n.key,onClick:e=>j(n)},[(0,e.createVNode)(c,{name:n.key},null,8,[`name`]),t.showLabels?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,_,(0,e.toDisplayString)(n.label\|\|n.key),1)):(0,e.createCommentVNode)(``,!0)],10,g))),128))])):((0,e.openBlock)(),(0,e.createElementBlock)(`p`,v,` 未找到匹配图标 `)),k.value>1?((0,e.openBlock)(),(0,e.createElementBlock)(`footer`,y,[(0,e.createElementVNode)(`button`,{type:`button`,disabled:C.value<=1,onClick:r[2]\|\|=e=>--C.value},` 上一页 `,8,b),(0,e.createElementVNode)(`span`,null,`第 `+(0,e.toDisplayString)(C.value)+` / `+(0,e.toDisplayString)(k.value)+` 页`,1),(0,e.createElementVNode)(`button`,{type:`button`,disabled:C.value>=k.value,onClick:r[3]\|\|=e=>C.value+=1},` 下一页 `,8,x)])):(0,e.createCommentVNode)(``,!0)]))}}),[[`__scopeId`,`data-v-937c0d9c`]]),C=[`aria-label`],w={class:`lumal-icon-picker-dialog__header`},T={class:`lumal-icon-picker-dialog__content`},E={class:`lumal-icon-picker-dialog__footer`},D=[`disabled`],O=s((0,e.defineComponent)({__name:`LumalIconPickerDialog`,props:(0,e.mergeModels)({cancelText:{default:`取消`},confirmText:{default:`确认选择`},title:{default:`选择图标`}},{visible:{type:Boolean,default:!1},visibleModifiers:{},modelValue:{},modelModifiers:{}}),emits:(0,e.mergeModels)([`cancel`,`confirm`],[`update:visible`,`update:modelValue`]),setup(t,{emit:n}){let r=n,i=(0,e.useModel)(t,`visible`),a=(0,e.useModel)(t,`modelValue`),o=(0,e.ref)(``),s=(0,e.ref)();(0,e.watch)(i,async t=>{t&&(o.value=a.value??``,await(0,e.nextTick)(),s.value?.focus())},{immediate:!0});function c(){i.value=!1,r(`cancel`)}function l(){o.value&&(a.value=o.value,i.value=!1,r(`confirm`,o.value))}return(n,r)=>i.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`lumal-icon-picker-dialog`,role:`presentation`,onMousedown:(0,e.withModifiers)(c,[`self`])},[(0,e.createElementVNode)(`section`,{ref_key:`dialogRef`,ref:s,class:`lumal-icon-picker-dialog__body`,role:`dialog`,"aria-modal":`true`,"aria-label":t.title,tabindex:`-1`,onKeydown:(0,e.withKeys)(c,[`esc`])},[(0,e.createElementVNode)(`header`,w,[(0,e.createElementVNode)(`h3`,null,(0,e.toDisplayString)(t.title),1),(0,e.createElementVNode)(`button`,{type:`button`,"aria-label":`关闭图标选择器`,onClick:c},` × `)]),(0,e.createElementVNode)(`div`,T,[(0,e.createVNode)(S,{modelValue:o.value,"onUpdate:modelValue":r[0]\|\|=e=>o.value=e},null,8,[`modelValue`])]),(0,e.createElementVNode)(`footer`,E,[(0,e.createElementVNode)(`button`,{type:`button`,onClick:c},(0,e.toDisplayString)(t.cancelText),1),(0,e.createElementVNode)(`button`,{type:`button`,class:`is-primary`,disabled:!o.value,onClick:l},(0,e.toDisplayString)(t.confirmText),9,D)])],40,C)],32)):(0,e.createCommentVNode)(``,!0)}}),[[`__scopeId`,`data-v-9bd629e7`]]);exports.LumalIcon=c,exports.LumalIconPicker=S,exports.LumalIconPickerDialog=O,exports.useIconRegistry=r;
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("@iconify/vue"),n=require("@lumal/icons"),r=require("@lumal/icons/morph");var i;function a(){return i??=import(`morphicons/vue`).then(e=>({MorphIcon:e.MorphIcon})).catch(e=>{throw i=void 0,e}),i}function o(t,n){let i=(0,e.shallowRef)(!1),o=(0,e.shallowRef)(!1),s=(0,e.shallowRef)(),c;return(0,e.onMounted)(()=>{i.value=!0}),(0,e.watch)([i,()=>(0,e.toValue)(n)],([e,t],n,r)=>{if(o.value=!1,!e\|\|!t)return;let i=typeof window.matchMedia==`function`?window.matchMedia(`(prefers-reduced-motion: reduce)`):void 0,a=()=>{o.value=i?.matches??!1};a(),typeof i?.addEventListener==`function`?i.addEventListener(`change`,a):i?.addListener?.(a),r(()=>{typeof i?.removeEventListener==`function`?i.removeEventListener(`change`,a):i?.removeListener?.(a)})},{flush:`sync`}),(0,e.watch)([i,o,()=>(0,e.toValue)(t),()=>(0,e.toValue)(n)],async([e,t,n,i],o,l)=>{let u=!1;if(l(()=>{u=!0}),!e\|\|t\|\|!i\|\|!n){s.value=void 0;return}try{let e=await(0,r.prepareIconMorph)(n);if(u)return;if(!e){s.value=void 0;return}if(c??=await a(),u)return;s.value={...e,icon:s.value?.shape===e.shape?s.value.icon:e.icon,component:c.MorphIcon}}catch{u\|\|(s.value=void 0)}},{immediate:!0}),{state:s,reset:()=>{s.value=void 0}}}function s(){let t=(0,e.shallowRef)(0);(0,e.onScopeDispose)((0,n.subscribeIconRegistry)(()=>{t.value+=1}));let r=(0,e.computed)(()=>(t.value,(0,n.getRegisteredIconDefinitions)())),i=(0,e.computed)(()=>(t.value,(0,n.getRegisteredIconGroups)()));function a(e){return t.value,(0,n.resolveIconDefinition)(e)}return{groups:i,icons:r,resolve:a}}var c=[`title`],l=[`innerHTML`],u=(0,e.defineComponent)({__name:`LumalIcon`,props:{name:{},icon:{},size:{},color:{},gradient:{},title:{},morph:{type:Boolean},morphSpring:{}},setup(r){let i=r,a=`lumal-icon-gradient-${(0,e.useId)()}`,u=s(),d=(0,e.computed)(()=>{let e=i.name?u.resolve(i.name):void 0;if(e)return e;let t=i.icon;return t&&typeof t==`object`&&`source`in t&&`key`in t?t:void 0}),f=(0,e.computed)(()=>{let e=i.icon;return d.value?.svgText??(typeof e==`string`&&e.trim().startsWith(`<svg`)?e:``)}),p=(0,e.computed)(()=>{let e=f.value;return e?i.gradient?(0,n.applySvgGradient)(e,{...i.gradient,id:i.gradient.id??a}):(0,n.recolorSvgString)(e,i.color):``}),m=(0,e.computed)(()=>{if(d.value){let t=d.value.source===`component`?d.value.component:void 0;return typeof t==`function`\|\|typeof t==`object`&&t?(0,e.toRaw)(t):void 0}return typeof i.icon==`function`\|\|typeof i.icon==`object`?(0,e.toRaw)(i.icon):void 0}),h=(0,e.computed)(()=>{if(d.value?.source===`iconify`)return d.value.icon}),{state:g,reset:_}=o(f,()=>i.morph===!0&&!i.gradient&&!m.value&&!h.value);(0,e.onErrorCaptured)(()=>{if(g.value)return _(),!1});let v=(0,e.computed)(()=>({"--lumal-icon-size":typeof i.size==`number`?`${i.size}px`:i.size??`1em`,color:i.color})),y=(0,e.computed)(()=>!!(p.value\|\|m.value\|\|h.value)),b=(0,e.computed)(()=>i.title??d.value?.label);return(n,i)=>y.value?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{key:0,class:`lumal-icon`,style:(0,e.normalizeStyle)(v.value),title:b.value,"aria-hidden":`true`},[m.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(m.value),{key:0,class:`lumal-icon__component`})):h.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.Icon),{key:1,class:`lumal-icon__component`,icon:h.value},null,8,[`icon`])):(0,e.unref)(g)?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)((0,e.unref)(g).component),{key:2,class:`lumal-icon__component`,icon:(0,e.unref)(g).icon,spring:r.morphSpring??`smooth`,color:(0,e.unref)(g).color,"stroke-width":(0,e.unref)(g).strokeWidth,"stroke-linecap":(0,e.unref)(g).linecap,"stroke-linejoin":(0,e.unref)(g).linejoin,"reduced-motion":`user`,size:`100%`},null,8,[`icon`,`spring`,`color`,`stroke-width`,`stroke-linecap`,`stroke-linejoin`])):((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{key:3,class:`lumal-icon__svg`,innerHTML:p.value},null,8,l))],12,c)):(0,e.createCommentVNode)(``,!0)}}),d=(e,t)=>{let n=e.__vccOpts\|\|e;for(let[e,r]of t)n[e]=r;return n},f=d(u,[[`__scopeId`,`data-v-42fa0af8`]]),p={class:`lumal-icon-picker__toolbar`},m={key:0,class:`lumal-icon-picker__field`},h={key:1,class:`lumal-icon-picker__field`},g=[`value`],_={class:`lumal-icon-picker__summary`,role:`status`},v={key:0,class:`lumal-icon-picker__grid`,role:`listbox`,"aria-label":`图标列表`},y=[`aria-label`,`aria-selected`,`title`,`onClick`],b={key:0,class:`lumal-icon-picker__item-label`},x={key:1,class:`lumal-icon-picker__empty`},S={key:2,class:`lumal-icon-picker__pagination`},C=[`disabled`],w=[`disabled`],T=d((0,e.defineComponent)({__name:`LumalIconPicker`,props:(0,e.mergeModels)({group:{default:``},pageSize:{default:48},searchable:{type:Boolean,default:!0},showLabels:{type:Boolean,default:!1},storageKey:{default:``}},{modelValue:{},modelModifiers:{}}),emits:(0,e.mergeModels)([`select`],[`update:modelValue`]),setup(t,{emit:n}){let r=t,i=n,a=(0,e.useModel)(t,`modelValue`),o=(0,e.shallowRef)(``),c=(0,e.shallowRef)(r.group),l=(0,e.shallowRef)(1),u=(0,e.computed)(()=>Math.max(1,r.pageSize)),d=s(),T=d.icons,E=(0,e.computed)(()=>{let e=d.groups.value,t=new Set(e.map(e=>e.key)),n=T.value.map(e=>e.group).filter(e=>typeof e==`string`&&!t.has(e)).filter((e,t,n)=>n.indexOf(e)===t).map(e=>({key:e,label:e}));return[...e,...n]}),D=(0,e.computed)(()=>{let e=o.value.trim().toLocaleLowerCase();return T.value.filter(t=>{let n=!c.value\|\|t.group===c.value,r=!e\|\|t.key.toLocaleLowerCase().includes(e)\|\|t.label?.toLocaleLowerCase().includes(e);return n&&r})}),O=(0,e.computed)(()=>Math.max(1,Math.ceil(D.value.length/u.value))),k=(0,e.computed)(()=>{let e=(l.value-1)*u.value;return D.value.slice(e,e+u.value)});function A(e){c.value=e}(0,e.watch)([o,c,u],()=>{l.value=1}),(0,e.watch)(()=>r.group,e=>{c.value=e}),(0,e.watch)(O,e=>{l.value=Math.min(l.value,e)}),r.storageKey&&typeof localStorage<`u`&&!a.value&&(a.value=localStorage.getItem(r.storageKey)??void 0);function j(e){a.value=e.key,r.storageKey&&typeof localStorage<`u`&&localStorage.setItem(r.storageKey,e.key),i(`select`,e)}return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)([`lumal-icon-picker`,{"lumal-icon-picker--show-labels":t.showLabels}])},[(0,e.createElementVNode)(`div`,p,[t.searchable?((0,e.openBlock)(),(0,e.createElementBlock)(`label`,m,[r[4]\|\|=(0,e.createElementVNode)(`span`,{class:`lumal-icon-picker__field-label`},`搜索图标`,-1),(0,e.withDirectives)((0,e.createElementVNode)(`input`,{"onUpdate:modelValue":r[0]\|\|=e=>o.value=e,type:`search`,"aria-label":`搜索图标`,placeholder:`输入名称或 key`},null,512),[[e.vModelText,o.value]])])):(0,e.createCommentVNode)(``,!0),E.value.length?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,h,[r[6]\|\|=(0,e.createElementVNode)(`span`,{class:`lumal-icon-picker__field-label`},`图标分组`,-1),(0,e.renderSlot)(n.$slots,`group-select`,{modelValue:c.value,groups:E.value,setGroup:A},()=>[(0,e.withDirectives)((0,e.createElementVNode)(`select`,{"onUpdate:modelValue":r[1]\|\|=e=>c.value=e,"aria-label":`图标分组`},[r[5]\|\|=(0,e.createElementVNode)(`option`,{value:``},` 全部分组 `,-1),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(E.value,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`option`,{key:t.key,value:t.key},(0,e.toDisplayString)(t.label),9,g))),128))],512),[[e.vModelSelect,c.value]])],!0)])):(0,e.createCommentVNode)(``,!0)]),(0,e.createElementVNode)(`p`,_,` 共 `+(0,e.toDisplayString)(D.value.length)+` 个图标 `,1),k.value.length?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,v,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(k.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:n.key,class:(0,e.normalizeClass)([`lumal-icon-picker__item`,{"is-selected":a.value===n.key}]),type:`button`,role:`option`,"aria-label":n.label\|\|n.key,"aria-selected":a.value===n.key,title:n.label\|\|n.key,onClick:e=>j(n)},[(0,e.createVNode)(f,{name:n.key,size:28},null,8,[`name`]),t.showLabels?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,b,(0,e.toDisplayString)(n.label\|\|n.key),1)):(0,e.createCommentVNode)(``,!0)],10,y))),128))])):((0,e.openBlock)(),(0,e.createElementBlock)(`p`,x,` 未找到匹配图标 `)),O.value>1?((0,e.openBlock)(),(0,e.createElementBlock)(`footer`,S,[(0,e.createElementVNode)(`button`,{type:`button`,disabled:l.value<=1,onClick:r[2]\|\|=e=>--l.value},` 上一页 `,8,C),(0,e.createElementVNode)(`span`,null,`第 `+(0,e.toDisplayString)(l.value)+` / `+(0,e.toDisplayString)(O.value)+` 页`,1),(0,e.createElementVNode)(`button`,{type:`button`,disabled:l.value>=O.value,onClick:r[3]\|\|=e=>l.value+=1},` 下一页 `,8,w)])):(0,e.createCommentVNode)(``,!0)],2))}}),[[`__scopeId`,`data-v-0b9c266c`]]),E=[`aria-label`],D={class:`lumal-icon-picker-dialog__header`},O={class:`lumal-icon-picker-dialog__content`},k={class:`lumal-icon-picker-dialog__footer`},A=[`disabled`],j=d((0,e.defineComponent)({__name:`LumalIconPickerDialog`,props:(0,e.mergeModels)({cancelText:{default:`取消`},confirmText:{default:`确认选择`},title:{default:`选择图标`}},{visible:{type:Boolean,default:!1},visibleModifiers:{},modelValue:{},modelModifiers:{}}),emits:(0,e.mergeModels)([`cancel`,`confirm`],[`update:visible`,`update:modelValue`]),setup(t,{emit:n}){let r=n,i=(0,e.useModel)(t,`visible`),a=(0,e.useModel)(t,`modelValue`),o=(0,e.shallowRef)(``),s=(0,e.useTemplateRef)(`dialogRef`),c;function l(e){i.value&&s.value&&!s.value.contains(e.target)&&s.value.focus()}function u(e){if(e.key===`Escape`&&(e.preventDefault(),e.stopPropagation(),d()),e.key!==`Tab`)return;let t=[...s.value?.querySelectorAll(`button, input, select, textarea, a[href], [tabindex]`)??[]].filter(e=>e.tabIndex>=0&&!e.matches(`:disabled`)&&!e.closest(`[hidden], [inert]`)),n=t[0],r=t.at(-1);(!n\|\|(e.shiftKey?document.activeElement===n\|\|document.activeElement===s.value:document.activeElement===r\|\|document.activeElement===s.value))&&(e.preventDefault(),(e.shiftKey?r:n)?.focus())}(0,e.watch)(i,async t=>{if(!(typeof document>`u`)){if(!t){document.removeEventListener(`focusin`,l);let t=c;await(0,e.nextTick)(),!i.value&&t?.isConnected&&t.focus();return}c=document.activeElement instanceof HTMLElement?document.activeElement:void 0,o.value=a.value??``,await(0,e.nextTick)(),i.value&&(s.value?.focus(),document.addEventListener(`focusin`,l))}},{immediate:!0}),(0,e.onBeforeUnmount)(()=>{document.removeEventListener(`focusin`,l),c?.isConnected&&c.focus()});function d(){i.value=!1,r(`cancel`)}function p(){o.value&&(a.value=o.value,i.value=!1,r(`confirm`,o.value))}return(n,r)=>((0,e.openBlock)(),(0,e.createBlock)(e.Teleport,{to:`body`},[i.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`lumal-icon-picker-dialog`,role:`presentation`,onMousedown:(0,e.withModifiers)(d,[`self`])},[(0,e.createElementVNode)(`section`,{ref_key:`dialogRef`,ref:s,class:`lumal-icon-picker-dialog__body`,role:`dialog`,"aria-modal":`true`,"aria-label":t.title,tabindex:`-1`,onKeydown:u},[(0,e.createElementVNode)(`header`,D,[(0,e.createElementVNode)(`h3`,null,(0,e.toDisplayString)(t.title),1),(0,e.createElementVNode)(`button`,{type:`button`,"aria-label":`关闭图标选择器`,title:`关闭图标选择器`,onClick:d},[(0,e.createVNode)(f,{name:`lumal:close`,size:18})])]),(0,e.createElementVNode)(`div`,O,[(0,e.createVNode)(T,{modelValue:o.value,"onUpdate:modelValue":r[0]\|\|=e=>o.value=e},(0,e.createSlots)({_:2},[n.$slots[`group-select`]?{name:`group-select`,fn:(0,e.withCtx)(t=>[(0,e.renderSlot)(n.$slots,`group-select`,(0,e.normalizeProps)((0,e.guardReactiveProps)(t)),void 0,!0)]),key:`0`}:void 0]),1032,[`modelValue`])]),(0,e.createElementVNode)(`footer`,k,[(0,e.createElementVNode)(`button`,{type:`button`,onClick:d},(0,e.toDisplayString)(t.cancelText),1),(0,e.createElementVNode)(`button`,{type:`button`,class:`is-primary`,disabled:!o.value,onClick:p},(0,e.toDisplayString)(t.confirmText),9,A)])],40,E)],32)):(0,e.createCommentVNode)(``,!0)]))}}),[[`__scopeId`,`data-v-ee548916`]]);exports.LumalIcon=f,exports.LumalIconPicker=T,exports.LumalIconPickerDialog=j,exports.useIconRegistry=s;

package/dist/index.js CHANGED Viewed

@@ -1,25 +1,84 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onScopeDispose as f, openBlock as p, ref as m, renderList as h, resolveDynamicComponent as g, shallowRef as _, toDisplayString as v, unref as y, useId as b, useModel as x, vModelSelect as S, vModelText as C, watch as w, withDirectives as T, withKeys as E, withModifiers as D } from "vue";
-import { Icon as O } from "@iconify/vue";
-import { applySvgGradient as k, getRegisteredIconDefinitions as A, getRegisteredIconGroups as j, recolorSvgString as M, resolveIconDefinition as N, subscribeIconRegistry as ee } from "@lumal/icons";
+import { Fragment as e, Teleport as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createSlots as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeModels as d, nextTick as f, normalizeClass as p, normalizeProps as m, normalizeStyle as h, onBeforeUnmount as g, onErrorCaptured as _, onMounted as v, onScopeDispose as y, openBlock as b, renderList as x, renderSlot as S, resolveDynamicComponent as C, shallowRef as w, toDisplayString as T, toRaw as E, toValue as D, unref as O, useId as k, useModel as A, useTemplateRef as ee, vModelSelect as j, vModelText as M, watch as N, withCtx as te, withDirectives as P, withModifiers as ne } from "vue";
+import { Icon as F } from "@iconify/vue";
+import { applySvgGradient as I, getRegisteredIconDefinitions as L, getRegisteredIconGroups as R, recolorSvgString as z, resolveIconDefinition as B, subscribeIconRegistry as V } from "@lumal/icons";
+import { prepareIconMorph as H } from "@lumal/icons/morph";
+//#region src/runtime/morph.ts
+var U;
+function W() {
+	return U ??= import("morphicons/vue").then((e) => ({ MorphIcon: e.MorphIcon })).catch((e) => {
+		throw U = void 0, e;
+	}), U;
+}
+//#endregion
+//#region src/composables/useIconMorph.ts
+function G(e, t) {
+	let n = w(!1), r = w(!1), i = w(), a;
+	return v(() => {
+		n.value = !0;
+	}), N([n, () => D(t)], ([e, t], n, i) => {
+		if (r.value = !1, !e || !t) return;
+		let a = typeof window.matchMedia == "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : void 0, o = () => {
+			r.value = a?.matches ?? !1;
+		};
+		o(), typeof a?.addEventListener == "function" ? a.addEventListener("change", o) : a?.addListener?.(o), i(() => {
+			typeof a?.removeEventListener == "function" ? a.removeEventListener("change", o) : a?.removeListener?.(o);
+		});
+	}, { flush: "sync" }), N([
+		n,
+		r,
+		() => D(e),
+		() => D(t)
+	], async ([e, t, n, r], o, s) => {
+		let c = !1;
+		if (s(() => {
+			c = !0;
+		}), !e || t || !r || !n) {
+			i.value = void 0;
+			return;
+		}
+		try {
+			let e = await H(n);
+			if (c) return;
+			if (!e) {
+				i.value = void 0;
+				return;
+			}
+			if (a ??= await W(), c) return;
+			i.value = {
+				...e,
+				icon: i.value?.shape === e.shape ? i.value.icon : e.icon,
+				component: a.MorphIcon
+			};
+		} catch {
+			c || (i.value = void 0);
+		}
+	}, { immediate: !0 }), {
+		state: i,
+		reset: () => {
+			i.value = void 0;
+		}
+	};
+}
+//#endregion
 //#region src/composables/useIconRegistry.ts
-function P() {
-	let e = _(0);
-	f(ee(() => {
+function K() {
+	let e = w(0);
+	y(V(() => {
 		e.value += 1;
 	}));
-	let n = t(() => (e.value, A())), r = t(() => (e.value, j()));
+	let t = n(() => (e.value, L())), r = n(() => (e.value, R()));
 	function i(t) {
-		return e.value, N(t);
+		return e.value, B(t);
 	}
 	return {
 		groups: r,
-		icons: n,
+		icons: t,
 		resolve: i
 	};
 }
 //#endregion
 //#region src/components/LumalIcon.vue?vue&type=script&setup=true&lang.ts
-var F = ["title"], I = ["innerHTML"], L = /*@__PURE__*/ s({
+var q = ["title"], J = ["innerHTML"], Y = /*@__PURE__*/ l({
 	__name: "LumalIcon",
 	props: {
 		name: {},
@@ -27,83 +86,113 @@ var F = ["title"], I = ["innerHTML"], L = /*@__PURE__*/ s({
 		size: {},
 		color: {},
 		gradient: {},
-		title: {}
+		title: {},
+		morph: { type: Boolean },
+		morphSpring: {}
 	},
 	setup(e) {
-		let a = e, o = `lumal-icon-gradient-${b()}`, s = P(), c = t(() => {
-			if (a.name) return s.resolve(a.name);
-		}), l = t(() => {
-			let e = a.icon, t = c.value?.svgText ?? (typeof e == "string" && e.trim().startsWith("<svg") ? e : "") ?? (typeof e == "object" && e && "svgText" in e ? String(e.svgText ?? "") : "");
-			return t ? a.gradient ? k(t, {
-				...a.gradient,
-				id: a.gradient.id ?? o
-			}) : M(t, a.color) : "";
-		}), u = t(() => {
-			let e = c.value?.component;
-			if (typeof e == "function" || typeof e == "object" && e) return e;
-			if (typeof a.icon == "object" && a.icon && "component" in a.icon) {
-				let e = a.icon.component;
-				return typeof e == "function" || typeof e == "object" && e ? e : void 0;
+		let t = e, o = `lumal-icon-gradient-${k()}`, s = K(), c = n(() => {
+			let e = t.name ? s.resolve(t.name) : void 0;
+			if (e) return e;
+			let n = t.icon;
+			return n && typeof n == "object" && "source" in n && "key" in n ? n : void 0;
+		}), l = n(() => {
+			let e = t.icon;
+			return c.value?.svgText ?? (typeof e == "string" && e.trim().startsWith("<svg") ? e : "");
+		}), u = n(() => {
+			let e = l.value;
+			return e ? t.gradient ? I(e, {
+				...t.gradient,
+				id: t.gradient.id ?? o
+			}) : z(e, t.color) : "";
+		}), d = n(() => {
+			if (c.value) {
+				let e = c.value.source === "component" ? c.value.component : void 0;
+				return typeof e == "function" || typeof e == "object" && e ? E(e) : void 0;
 			}
-			return typeof a.icon == "function" || typeof a.icon == "object" ? a.icon : void 0;
-		}), f = t(() => {
+			return typeof t.icon == "function" || typeof t.icon == "object" ? E(t.icon) : void 0;
+		}), f = n(() => {
 			if (c.value?.source === "iconify") return c.value.icon;
-			if (typeof a.icon == "object" && a.icon && "source" in a.icon && a.icon.source === "iconify") return a.icon.icon;
-		}), m = t(() => ({
-			"--lumal-icon-size": typeof a.size == "number" ? `${a.size}px` : a.size ?? "1em",
-			color: a.color
-		})), h = t(() => !!(l.value || u.value || f.value)), _ = t(() => a.title ?? c.value?.label);
-		return (e, t) => h.value ? (p(), i("span", {
+		}), { state: p, reset: m } = G(l, () => t.morph === !0 && !t.gradient && !d.value && !f.value);
+		_(() => {
+			if (p.value) return m(), !1;
+		});
+		let g = n(() => ({
+			"--lumal-icon-size": typeof t.size == "number" ? `${t.size}px` : t.size ?? "1em",
+			color: t.color
+		})), v = n(() => !!(u.value || d.value || f.value)), y = n(() => t.title ?? c.value?.label);
+		return (t, n) => v.value ? (b(), a("span", {
 			key: 0,
 			class: "lumal-icon",
-			style: d(m.value),
-			title: _.value,
+			style: h(g.value),
+			title: y.value,
 			"aria-hidden": "true"
-		}, [u.value ? (p(), n(g(u.value), {
+		}, [d.value ? (b(), r(C(d.value), {
 			key: 0,
 			class: "lumal-icon__component"
-		})) : f.value ? (p(), n(y(O), {
+		})) : f.value ? (b(), r(O(F), {
 			key: 1,
 			class: "lumal-icon__component",
 			icon: f.value
-		}, null, 8, ["icon"])) : (p(), i("span", {
+		}, null, 8, ["icon"])) : O(p) ? (b(), r(C(O(p).component), {
 			key: 2,
+			class: "lumal-icon__component",
+			icon: O(p).icon,
+			spring: e.morphSpring ?? "smooth",
+			color: O(p).color,
+			"stroke-width": O(p).strokeWidth,
+			"stroke-linecap": O(p).linecap,
+			"stroke-linejoin": O(p).linejoin,
+			"reduced-motion": "user",
+			size: "100%"
+		}, null, 8, [
+			"icon",
+			"spring",
+			"color",
+			"stroke-width",
+			"stroke-linecap",
+			"stroke-linejoin"
+		])) : (b(), a("span", {
+			key: 3,
 			class: "lumal-icon__svg",
-			innerHTML: l.value
-		}, null, 8, I))], 12, F)) : r("", !0);
+			innerHTML: u.value
+		}, null, 8, J))], 12, q)) : i("", !0);
 	}
-}), R = (e, t) => {
+}), X = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, z = /*#__PURE__*/ R(L, [["__scopeId", "data-v-d5c4f92d"]]), B = { class: "lumal-icon-picker" }, V = { class: "lumal-icon-picker__toolbar" }, H = {
+}, Z = /*#__PURE__*/ X(Y, [["__scopeId", "data-v-42fa0af8"]]), re = { class: "lumal-icon-picker__toolbar" }, ie = {
 	key: 0,
 	class: "lumal-icon-picker__field"
-}, U = {
+}, ae = {
 	key: 1,
 	class: "lumal-icon-picker__field"
-}, W = ["value"], G = {
+}, oe = ["value"], se = {
 	class: "lumal-icon-picker__summary",
 	role: "status"
-}, K = {
+}, ce = {
 	key: 0,
 	class: "lumal-icon-picker__grid",
 	role: "listbox",
 	"aria-label": "图标列表"
-}, q = [
+}, le = [
 	"aria-label",
 	"aria-selected",
 	"title",
 	"onClick"
-], J = { key: 0 }, Y = {
+], ue = {
+	key: 0,
+	class: "lumal-icon-picker__item-label"
+}, de = {
 	key: 1,
 	class: "lumal-icon-picker__empty"
-}, X = {
+}, fe = {
 	key: 2,
 	class: "lumal-icon-picker__pagination"
-}, Z = ["disabled"], Q = ["disabled"], $ = /*#__PURE__*/ R(/* @__PURE__ */ s({
+}, pe = ["disabled"], me = ["disabled"], Q = /*#__PURE__*/ X(/* @__PURE__ */ l({
 	__name: "LumalIconPicker",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ d({
 		group: { default: "" },
 		pageSize: { default: 48 },
 		searchable: {
@@ -119,76 +208,90 @@ var F = ["title"], I = ["innerHTML"], L = /*@__PURE__*/ s({
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c(["select"], ["update:modelValue"]),
-	setup(n, { emit: s }) {
-		let c = n, l = s, d = x(n, "modelValue"), f = m(""), g = m(c.group), _ = m(1), y = t(() => Math.max(1, c.pageSize)), b = P(), E = b.icons, D = t(() => {
-			let e = b.groups.value, t = new Set(e.map((e) => e.key)), n = E.value.map((e) => e.group).filter((e) => typeof e == "string" && !t.has(e)).filter((e, t, n) => n.indexOf(e) === t).map((e) => ({
+	emits: /*@__PURE__*/ d(["select"], ["update:modelValue"]),
+	setup(t, { emit: r }) {
+		let s = t, l = r, u = A(t, "modelValue"), d = w(""), f = w(s.group), m = w(1), h = n(() => Math.max(1, s.pageSize)), g = K(), _ = g.icons, v = n(() => {
+			let e = g.groups.value, t = new Set(e.map((e) => e.key)), n = _.value.map((e) => e.group).filter((e) => typeof e == "string" && !t.has(e)).filter((e, t, n) => n.indexOf(e) === t).map((e) => ({
 				key: e,
 				label: e
 			}));
 			return [...e, ...n];
-		}), O = t(() => {
-			let e = f.value.trim().toLocaleLowerCase();
-			return E.value.filter((t) => {
-				let n = !g.value || t.group === g.value, r = !e || t.key.toLocaleLowerCase().includes(e) || t.label?.toLocaleLowerCase().includes(e);
+		}), y = n(() => {
+			let e = d.value.trim().toLocaleLowerCase();
+			return _.value.filter((t) => {
+				let n = !f.value || t.group === f.value, r = !e || t.key.toLocaleLowerCase().includes(e) || t.label?.toLocaleLowerCase().includes(e);
 				return n && r;
 			});
-		}), k = t(() => Math.max(1, Math.ceil(O.value.length / y.value))), A = t(() => {
-			let e = (_.value - 1) * y.value;
-			return O.value.slice(e, e + y.value);
+		}), C = n(() => Math.max(1, Math.ceil(y.value.length / h.value))), E = n(() => {
+			let e = (m.value - 1) * h.value;
+			return y.value.slice(e, e + h.value);
 		});
-		w([
+		function D(e) {
+			f.value = e;
+		}
+		N([
+			d,
 			f,
-			g,
-			y
+			h
 		], () => {
-			_.value = 1;
-		}), w(() => c.group, (e) => {
-			g.value = e;
-		}), w(k, (e) => {
-			_.value = Math.min(_.value, e);
-		}), c.storageKey && typeof localStorage < "u" && !d.value && (d.value = localStorage.getItem(c.storageKey) ?? void 0);
-		function j(e) {
-			d.value = e.key, c.storageKey && typeof localStorage < "u" && localStorage.setItem(c.storageKey, e.key), l("select", e);
+			m.value = 1;
+		}), N(() => s.group, (e) => {
+			f.value = e;
+		}), N(C, (e) => {
+			m.value = Math.min(m.value, e);
+		}), s.storageKey && typeof localStorage < "u" && !u.value && (u.value = localStorage.getItem(s.storageKey) ?? void 0);
+		function O(e) {
+			u.value = e.key, s.storageKey && typeof localStorage < "u" && localStorage.setItem(s.storageKey, e.key), l("select", e);
 		}
-		return (t, s) => (p(), i("div", B, [
-			a("div", V, [n.searchable ? (p(), i("label", H, [s[4] ||= a("span", { class: "lumal-icon-picker__field-label" }, "搜索图标", -1), T(a("input", {
-				"onUpdate:modelValue": s[0] ||= (e) => f.value = e,
+		return (n, r) => (b(), a("div", { class: p(["lumal-icon-picker", { "lumal-icon-picker--show-labels": t.showLabels }]) }, [
+			o("div", re, [t.searchable ? (b(), a("label", ie, [r[4] ||= o("span", { class: "lumal-icon-picker__field-label" }, "搜索图标", -1), P(o("input", {
+				"onUpdate:modelValue": r[0] ||= (e) => d.value = e,
 				type: "search",
+				"aria-label": "搜索图标",
 				placeholder: "输入名称或 key"
-			}, null, 512), [[C, f.value]])])) : r("", !0), D.value.length ? (p(), i("label", U, [s[6] ||= a("span", { class: "lumal-icon-picker__field-label" }, "图标分组", -1), T(a("select", { "onUpdate:modelValue": s[1] ||= (e) => g.value = e }, [s[5] ||= a("option", { value: "" }, "全部分组", -1), (p(!0), i(e, null, h(D.value, (e) => (p(), i("option", {
+			}, null, 512), [[M, d.value]])])) : i("", !0), v.value.length ? (b(), a("div", ae, [r[6] ||= o("span", { class: "lumal-icon-picker__field-label" }, "图标分组", -1), S(n.$slots, "group-select", {
+				modelValue: f.value,
+				groups: v.value,
+				setGroup: D
+			}, () => [P(o("select", {
+				"onUpdate:modelValue": r[1] ||= (e) => f.value = e,
+				"aria-label": "图标分组"
+			}, [r[5] ||= o("option", { value: "" }, " 全部分组 ", -1), (b(!0), a(e, null, x(v.value, (e) => (b(), a("option", {
 				key: e.key,
 				value: e.key
-			}, v(e.label), 9, W))), 128))], 512), [[S, g.value]])])) : r("", !0)]),
-			a("p", G, " 共 " + v(O.value.length) + " 个图标 ", 1),
-			A.value.length ? (p(), i("div", K, [(p(!0), i(e, null, h(A.value, (e) => (p(), i("button", {
+			}, T(e.label), 9, oe))), 128))], 512), [[j, f.value]])], !0)])) : i("", !0)]),
+			o("p", se, " 共 " + T(y.value.length) + " 个图标 ", 1),
+			E.value.length ? (b(), a("div", ce, [(b(!0), a(e, null, x(E.value, (e) => (b(), a("button", {
 				key: e.key,
-				class: u(["lumal-icon-picker__item", { "is-selected": d.value === e.key }]),
+				class: p(["lumal-icon-picker__item", { "is-selected": u.value === e.key }]),
 				type: "button",
 				role: "option",
 				"aria-label": e.label || e.key,
-				"aria-selected": d.value === e.key,
+				"aria-selected": u.value === e.key,
 				title: e.label || e.key,
-				onClick: (t) => j(e)
-			}, [o(z, { name: e.key }, null, 8, ["name"]), n.showLabels ? (p(), i("span", J, v(e.label || e.key), 1)) : r("", !0)], 10, q))), 128))])) : (p(), i("p", Y, " 未找到匹配图标 ")),
-			k.value > 1 ? (p(), i("footer", X, [
-				a("button", {
+				onClick: (t) => O(e)
+			}, [c(Z, {
+				name: e.key,
+				size: 28
+			}, null, 8, ["name"]), t.showLabels ? (b(), a("span", ue, T(e.label || e.key), 1)) : i("", !0)], 10, le))), 128))])) : (b(), a("p", de, " 未找到匹配图标 ")),
+			C.value > 1 ? (b(), a("footer", fe, [
+				o("button", {
 					type: "button",
-					disabled: _.value <= 1,
-					onClick: s[2] ||= (e) => --_.value
-				}, " 上一页 ", 8, Z),
-				a("span", null, "第 " + v(_.value) + " / " + v(k.value) + " 页", 1),
-				a("button", {
+					disabled: m.value <= 1,
+					onClick: r[2] ||= (e) => --m.value
+				}, " 上一页 ", 8, pe),
+				o("span", null, "第 " + T(m.value) + " / " + T(C.value) + " 页", 1),
+				o("button", {
 					type: "button",
-					disabled: _.value >= k.value,
-					onClick: s[3] ||= (e) => _.value += 1
-				}, " 下一页 ", 8, Q)
-			])) : r("", !0)
-		]));
+					disabled: m.value >= C.value,
+					onClick: r[3] ||= (e) => m.value += 1
+				}, " 下一页 ", 8, me)
+			])) : i("", !0)
+		], 2));
 	}
-}), [["__scopeId", "data-v-937c0d9c"]]), te = ["aria-label"], ne = { class: "lumal-icon-picker-dialog__header" }, re = { class: "lumal-icon-picker-dialog__content" }, ie = { class: "lumal-icon-picker-dialog__footer" }, ae = ["disabled"], oe = /*#__PURE__*/ R(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-0b9c266c"]]), he = ["aria-label"], ge = { class: "lumal-icon-picker-dialog__header" }, $ = { class: "lumal-icon-picker-dialog__content" }, _e = { class: "lumal-icon-picker-dialog__footer" }, ve = ["disabled"], ye = /*#__PURE__*/ X(/* @__PURE__ */ l({
 	__name: "LumalIconPickerDialog",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ d({
 		cancelText: { default: "取消" },
 		confirmText: { default: "确认选择" },
 		title: { default: "选择图标" }
@@ -201,53 +304,79 @@ var F = ["title"], I = ["innerHTML"], L = /*@__PURE__*/ s({
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c(["cancel", "confirm"], ["update:visible", "update:modelValue"]),
-	setup(e, { emit: t }) {
-		let n = t, s = x(e, "visible"), c = x(e, "modelValue"), u = m(""), d = m();
-		w(s, async (e) => {
-			e && (u.value = c.value ?? "", await l(), d.value?.focus());
-		}, { immediate: !0 });
-		function f() {
-			s.value = !1, n("cancel");
+	emits: /*@__PURE__*/ d(["cancel", "confirm"], ["update:visible", "update:modelValue"]),
+	setup(e, { emit: n }) {
+		let l = n, d = A(e, "visible"), p = A(e, "modelValue"), h = w(""), _ = ee("dialogRef"), v;
+		function y(e) {
+			d.value && _.value && !_.value.contains(e.target) && _.value.focus();
+		}
+		function x(e) {
+			if (e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), C()), e.key !== "Tab") return;
+			let t = [..._.value?.querySelectorAll("button, input, select, textarea, a[href], [tabindex]") ?? []].filter((e) => e.tabIndex >= 0 && !e.matches(":disabled") && !e.closest("[hidden], [inert]")), n = t[0], r = t.at(-1);
+			(!n || (e.shiftKey ? document.activeElement === n || document.activeElement === _.value : document.activeElement === r || document.activeElement === _.value)) && (e.preventDefault(), (e.shiftKey ? r : n)?.focus());
+		}
+		N(d, async (e) => {
+			if (!(typeof document > "u")) {
+				if (!e) {
+					document.removeEventListener("focusin", y);
+					let e = v;
+					await f(), !d.value && e?.isConnected && e.focus();
+					return;
+				}
+				v = document.activeElement instanceof HTMLElement ? document.activeElement : void 0, h.value = p.value ?? "", await f(), d.value && (_.value?.focus(), document.addEventListener("focusin", y));
+			}
+		}, { immediate: !0 }), g(() => {
+			document.removeEventListener("focusin", y), v?.isConnected && v.focus();
+		});
+		function C() {
+			d.value = !1, l("cancel");
 		}
-		function h() {
-			u.value && (c.value = u.value, s.value = !1, n("confirm", u.value));
+		function E() {
+			h.value && (p.value = h.value, d.value = !1, l("confirm", h.value));
 		}
-		return (t, n) => s.value ? (p(), i("div", {
+		return (n, l) => (b(), r(t, { to: "body" }, [d.value ? (b(), a("div", {
 			key: 0,
 			class: "lumal-icon-picker-dialog",
 			role: "presentation",
-			onMousedown: D(f, ["self"])
-		}, [a("section", {
+			onMousedown: ne(C, ["self"])
+		}, [o("section", {
 			ref_key: "dialogRef",
-			ref: d,
+			ref: _,
 			class: "lumal-icon-picker-dialog__body",
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": e.title,
 			tabindex: "-1",
-			onKeydown: E(f, ["esc"])
+			onKeydown: x
 		}, [
-			a("header", ne, [a("h3", null, v(e.title), 1), a("button", {
+			o("header", ge, [o("h3", null, T(e.title), 1), o("button", {
 				type: "button",
 				"aria-label": "关闭图标选择器",
-				onClick: f
-			}, " × ")]),
-			a("div", re, [o($, {
-				modelValue: u.value,
-				"onUpdate:modelValue": n[0] ||= (e) => u.value = e
-			}, null, 8, ["modelValue"])]),
-			a("footer", ie, [a("button", {
+				title: "关闭图标选择器",
+				onClick: C
+			}, [c(Z, {
+				name: "lumal:close",
+				size: 18
+			})])]),
+			o("div", $, [c(Q, {
+				modelValue: h.value,
+				"onUpdate:modelValue": l[0] ||= (e) => h.value = e
+			}, s({ _: 2 }, [n.$slots["group-select"] ? {
+				name: "group-select",
+				fn: te((e) => [S(n.$slots, "group-select", m(u(e)), void 0, !0)]),
+				key: "0"
+			} : void 0]), 1032, ["modelValue"])]),
+			o("footer", _e, [o("button", {
 				type: "button",
-				onClick: f
-			}, v(e.cancelText), 1), a("button", {
+				onClick: C
+			}, T(e.cancelText), 1), o("button", {
 				type: "button",
 				class: "is-primary",
-				disabled: !u.value,
-				onClick: h
-			}, v(e.confirmText), 9, ae)])
-		], 40, te)], 32)) : r("", !0);
+				disabled: !h.value,
+				onClick: E
+			}, T(e.confirmText), 9, ve)])
+		], 40, he)], 32)) : i("", !0)]));
 	}
-}), [["__scopeId", "data-v-9bd629e7"]]);
+}), [["__scopeId", "data-v-ee548916"]]);
 //#endregion
-export { z as LumalIcon, $ as LumalIconPicker, oe as LumalIconPickerDialog, P as useIconRegistry };
+export { Z as LumalIcon, Q as LumalIconPicker, ye as LumalIconPickerDialog, K as useIconRegistry };

package/dist/src/components/LumalIcon.vue.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { IconDefinition, IconGradientOptions } from '@lumal/icons';
 import type { Component } from 'vue';
+import type { LumalIconMorphSpring } from '../types';
 /***********************属性定义*********************/
 type __VLS_Props = {
     name?: string;
@@ -8,6 +9,8 @@ type __VLS_Props = {
     color?: string;
     gradient?: IconGradientOptions;
     title?: string;
+    morph?: boolean;
+    morphSpring?: LumalIconMorphSpring;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/src/components/LumalIcon.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LumalIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/LumalIcon.vue"],"names":[],"mappings":"~~AAuIA~~,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;~~AAMpC~~,kDAAkD;AAClD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,GAAG,MAAM,CAAA;IACrD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;~~CACf~~,CAAC;~~AAyJF~~,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"LumalIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/LumalIcon.vue"],"names":[],"mappings":"AAgKA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AACpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAOpD,kDAAkD;AAClD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,GAAG,MAAM,CAAA;IACrD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,WAAW,CAAC,EAAE,oBAAoB,CAAA;CACnC,CAAC;AA6LF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/src/components/LumalIconPicker.vue.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import type { IconDefinition } from '@lumal/icons';
+import type { LumalIconPickerGroupSelectSlotProps } from '../types';
+/***********************属性与事件*********************/
 type __VLS_Props = {
     group?: string;
     pageSize?: number;
@@ -6,11 +8,15 @@ type __VLS_Props = {
     showLabels?: boolean;
     storageKey?: string;
 };
+type __VLS_Slots = {
+    'group-select'?: (props: LumalIconPickerGroupSelectSlotProps) => unknown;
+};
 type __VLS_ModelProps = {
+    /***********************筛选与分页*********************/
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (icon: IconDefinition<unknown>) => any;
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
@@ -23,6 +29,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     showLabels: boolean;
     storageKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 //# sourceMappingURL=LumalIconPicker.vue.d.ts.map

package/dist/src/components/LumalIconPicker.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LumalIconPicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/LumalIconPicker.vue"],"names":[],"mappings":"~~AA4PA~~,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;~~AAKlD~~,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAC;~~AA2EF~~,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAYF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;~~AA6LxD~~,QAAA,MAAM,~~YAAY~~;;;;;;;~~WA3RR~~,MAAM;cACH,MAAM;gBACJ,OAAO;gBACP,OAAO;gBACP,MAAM;~~6EA2RnB~~,CAAC;~~wBACkB~~,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"LumalIconPicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/LumalIconPicker.vue"],"names":[],"mappings":"AAmSA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,UAAU,CAAA;AAKnE,mDAAmD;AACnD,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAC;AAcF,KAAK,WAAW,GAAG;IACjB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mCAAmC,KAAK,OAAO,CAAA;CACzE,CAAC;AAsEF,KAAK,gBAAgB,GAAG;IACxB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAYF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA+MxD,QAAA,MAAM,UAAU;;;;;;;WAzTN,MAAM;cACH,MAAM;gBACJ,OAAO;gBACP,OAAO;gBACP,MAAM;6EAyTnB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/src/components/LumalIconPickerDialog.vue.d.ts CHANGED Viewed

@@ -1,15 +1,19 @@
+import type { LumalIconPickerGroupSelectSlotProps } from '../types';
 /***********************属性与事件*********************/
 type __VLS_Props = {
     cancelText?: string;
     confirmText?: string;
     title?: string;
 };
+type __VLS_Slots = {
+    'group-select'?: (props: LumalIconPickerGroupSelectSlotProps) => unknown;
+};
 type __VLS_ModelProps = {
     'visible'?: boolean;
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
     cancel: () => any;
     confirm: (icon: string) => any;
@@ -24,6 +28,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     cancelText: string;
     confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 //# sourceMappingURL=LumalIconPickerDialog.vue.d.ts.map

package/dist/src/components/LumalIconPickerDialog.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LumalIconPickerDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/LumalIconPickerDialog.vue"],"names":[],"mappings":"~~AAkLA~~,mDAAmD;AACnD,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;~~AA+CF~~,KAAK,gBAAgB,GAAG;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAWF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;~~AAqGxD~~,QAAA,MAAM,~~YAAY~~;;;;;;;;;;;~~WAnKR~~,MAAM;gBAFD,MAAM;iBACL,MAAM;~~6EAwKpB~~,CAAC;~~wBACkB~~,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"LumalIconPickerDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/LumalIconPickerDialog.vue"],"names":[],"mappings":"AAyPA,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,UAAU,CAAA;AAKnE,mDAAmD;AACnD,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAaF,KAAK,WAAW,GAAG;IACjB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mCAAmC,KAAK,OAAO,CAAA;CACzE,CAAC;AAgFF,KAAK,gBAAgB,GAAG;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAWF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAoJxD,QAAA,MAAM,UAAU;;;;;;;;;;;WAlQN,MAAM;gBAFD,MAAM;iBACL,MAAM;6EAuQpB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/src/composables/useIconMorph.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { PreparedIconMorph } from '@lumal/icons/morph';
+import type { MaybeRefOrGetter } from 'vue';
+import type { MorphRuntime } from '../runtime/morph';
+export declare function useIconMorph(svgText: MaybeRefOrGetter<string>, enabled: MaybeRefOrGetter<boolean>): {
+    state: import("vue").ShallowRef<(PreparedIconMorph & {
+        component: MorphRuntime["MorphIcon"];
+    }) | undefined, (PreparedIconMorph & {
+        component: MorphRuntime["MorphIcon"];
+    }) | undefined>;
+    reset: () => void;
+};
+//# sourceMappingURL=useIconMorph.d.ts.map

package/dist/src/composables/useIconMorph.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useIconMorph.d.ts","sourceRoot":"","sources":["../../../src/composables/useIconMorph.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAKpD,wBAAgB,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC;;mBAIrC,YAAY,CAAC,WAAW,CAAC;;mBAAzB,YAAY,CAAC,WAAW,CAAC;;;EA6ErF"}

package/dist/src/index.d.ts CHANGED Viewed

@@ -4,4 +4,5 @@ import LumalIconPickerDialog from './components/LumalIconPickerDialog.vue';
 export { LumalIcon, LumalIconPicker, LumalIconPickerDialog, };
 export { useIconRegistry } from './composables/useIconRegistry';
 export type { UseIconRegistryReturn } from './composables/useIconRegistry';
+export type { LumalIconMorphSpring, LumalIconPickerGroupSelectSlotProps } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,eAAe,MAAM,kCAAkC,CAAA;AAC9D,OAAO,qBAAqB,MAAM,wCAAwC,CAAA;AAE1E,OAAO,EACL,SAAS,EACT,eAAe,EACf,qBAAqB,GACtB,CAAA;AACD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,eAAe,MAAM,kCAAkC,CAAA;AAC9D,OAAO,qBAAqB,MAAM,wCAAwC,CAAA;AAE1E,OAAO,EACL,SAAS,EACT,eAAe,EACf,qBAAqB,GACtB,CAAA;AACD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAC1E,YAAY,EAAE,oBAAoB,EAAE,mCAAmC,EAAE,MAAM,SAAS,CAAA"}

package/dist/src/runtime/morph.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export interface MorphRuntime {
+    MorphIcon: typeof import('morphicons/vue')['MorphIcon'];
+}
+/** 通用转换由 @lumal/icons/morph 负责，此处只按需加载官方 Vue 绑定。 */
+export declare function loadMorphRuntime(): Promise<MorphRuntime>;
+//# sourceMappingURL=morph.d.ts.map

package/dist/src/runtime/morph.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"morph.d.ts","sourceRoot":"","sources":["../../../src/runtime/morph.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,cAAc,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAA;CACxD;AAID,oDAAoD;AACpD,wBAAgB,gBAAgB,IAAI,OAAO,CAAC,YAAY,CAAC,CAMxD"}

package/dist/src/types.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { IconGroupDefinition } from '@lumal/icons';
+export type { LumalIconMorphSpring } from '@lumal/icons/morph';
+/***********************选择器插槽类型*********************/
+export interface LumalIconPickerGroupSelectSlotProps {
+    modelValue: string;
+    groups: IconGroupDefinition[];
+    setGroup: (group: string) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAEvD,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE9D,qDAAqD;AACrD,MAAM,WAAW,mCAAmC;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,mBAAmB,EAAE,CAAA;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@lumal/icons-vue",
   "type": "module",
-  "version": "0.0.2-beta",
+  "version": "0.0.4-beta",
   "description": "Vue components and reactive adapters for @lumal/icons.",
   "license": "MIT",
   "keywords": [
@@ -29,6 +29,7 @@
   "module": "./dist/index.js",
   "types": "./dist/src/index.d.ts",
   "files": [
+    "CHANGELOG.md",
     "README.md",
     "dist"
   ],
@@ -37,7 +38,8 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@lumal/icons": "0.0.2-beta"
+    "@lumal/icons": "0.0.4-beta",
+    "morphicons": "2.0.0"
   },
   "scripts": {
     "build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly --outDir dist && node ../../scripts/clean-package-dist.mjs dist",