@lumal/icons-vue 0.0.1-beta

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lumal contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# @lumal/icons-vue
+
+`@lumal/icons` 的 Vue 3 组件与响应式适配层，提供 `LumalIcon`、`LumalIconPicker`、`LumalIconPickerDialog` 和 `useIconRegistry`。
+
+```vue
+<script setup lang="ts">
+import { LumalIcon } from '@lumal/icons-vue'
+import '@lumal/icons-vue/style.css'
+</script>
+
+<template>
+  <LumalIcon name="lumal:settings" color="#1677ff" :size="20" />
+</template>
+```
+
+SVG 改色、渐变、合成、Data URI 和注册表等纯 TypeScript 能力由 `@lumal/icons` 提供。

package/dist/icons-vue.css

@@ -0,0 +1,2 @@
+.lumal-icon[data-v-111a6ce8]{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-111a6ce8],.lumal-icon__component[data-v-111a6ce8]{width:100%;height:100%}.lumal-icon__svg[data-v-111a6ce8] 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}}
+/*$vite$:1*/

package/dist/index.cjs

@@ -0,0 +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-111a6ce8`]]),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;

package/dist/index.js

@@ -0,0 +1,253 @@
+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";
+//#region src/composables/useIconRegistry.ts
+function P() {
+	let e = _(0);
+	f(ee(() => {
+		e.value += 1;
+	}));
+	let n = t(() => (e.value, A())), r = t(() => (e.value, j()));
+	function i(t) {
+		return e.value, N(t);
+	}
+	return {
+		groups: r,
+		icons: n,
+		resolve: i
+	};
+}
+//#endregion
+//#region src/components/LumalIcon.vue?vue&type=script&setup=true&lang.ts
+var F = ["title"], I = ["innerHTML"], L = /*@__PURE__*/ s({
+	__name: "LumalIcon",
+	props: {
+		name: {},
+		icon: {},
+		size: {},
+		color: {},
+		gradient: {},
+		title: {}
+	},
+	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;
+			}
+			return typeof a.icon == "function" || typeof a.icon == "object" ? a.icon : void 0;
+		}), f = t(() => {
+			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", {
+			key: 0,
+			class: "lumal-icon",
+			style: d(m.value),
+			title: _.value,
+			"aria-hidden": "true"
+		}, [u.value ? (p(), n(g(u.value), {
+			key: 0,
+			class: "lumal-icon__component"
+		})) : f.value ? (p(), n(y(O), {
+			key: 1,
+			class: "lumal-icon__component",
+			icon: f.value
+		}, null, 8, ["icon"])) : (p(), i("span", {
+			key: 2,
+			class: "lumal-icon__svg",
+			innerHTML: l.value
+		}, null, 8, I))], 12, F)) : r("", !0);
+	}
+}), R = (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-111a6ce8"]]), B = { class: "lumal-icon-picker" }, V = { class: "lumal-icon-picker__toolbar" }, H = {
+	key: 0,
+	class: "lumal-icon-picker__field"
+}, U = {
+	key: 1,
+	class: "lumal-icon-picker__field"
+}, W = ["value"], G = {
+	class: "lumal-icon-picker__summary",
+	role: "status"
+}, K = {
+	key: 0,
+	class: "lumal-icon-picker__grid",
+	role: "listbox",
+	"aria-label": "图标列表"
+}, q = [
+	"aria-label",
+	"aria-selected",
+	"title",
+	"onClick"
+], J = { key: 0 }, Y = {
+	key: 1,
+	class: "lumal-icon-picker__empty"
+}, X = {
+	key: 2,
+	class: "lumal-icon-picker__pagination"
+}, Z = ["disabled"], Q = ["disabled"], $ = /*#__PURE__*/ R(/* @__PURE__ */ s({
+	__name: "LumalIconPicker",
+	props: /*@__PURE__*/ c({
+		group: { default: "" },
+		pageSize: { default: 48 },
+		searchable: {
+			type: Boolean,
+			default: !0
+		},
+		showLabels: {
+			type: Boolean,
+			default: !1
+		},
+		storageKey: { default: "" }
+	}, {
+		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) => ({
+				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);
+				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);
+		});
+		w([
+			f,
+			g,
+			y
+		], () => {
+			_.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);
+		}
+		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,
+				type: "search",
+				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", {
+				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", {
+				key: e.key,
+				class: u(["lumal-icon-picker__item", { "is-selected": d.value === e.key }]),
+				type: "button",
+				role: "option",
+				"aria-label": e.label || e.key,
+				"aria-selected": d.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", {
+					type: "button",
+					disabled: _.value <= 1,
+					onClick: s[2] ||= (e) => --_.value
+				}, " 上一页 ", 8, Z),
+				a("span", null, "第 " + v(_.value) + " / " + v(k.value) + " 页", 1),
+				a("button", {
+					type: "button",
+					disabled: _.value >= k.value,
+					onClick: s[3] ||= (e) => _.value += 1
+				}, " 下一页 ", 8, Q)
+			])) : r("", !0)
+		]));
+	}
+}), [["__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({
+	__name: "LumalIconPickerDialog",
+	props: /*@__PURE__*/ c({
+		cancelText: { default: "取消" },
+		confirmText: { default: "确认选择" },
+		title: { default: "选择图标" }
+	}, {
+		visible: {
+			type: Boolean,
+			default: !1
+		},
+		visibleModifiers: {},
+		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");
+		}
+		function h() {
+			u.value && (c.value = u.value, s.value = !1, n("confirm", u.value));
+		}
+		return (t, n) => s.value ? (p(), i("div", {
+			key: 0,
+			class: "lumal-icon-picker-dialog",
+			role: "presentation",
+			onMousedown: D(f, ["self"])
+		}, [a("section", {
+			ref_key: "dialogRef",
+			ref: d,
+			class: "lumal-icon-picker-dialog__body",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": e.title,
+			tabindex: "-1",
+			onKeydown: E(f, ["esc"])
+		}, [
+			a("header", ne, [a("h3", null, v(e.title), 1), a("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", {
+				type: "button",
+				onClick: f
+			}, v(e.cancelText), 1), a("button", {
+				type: "button",
+				class: "is-primary",
+				disabled: !u.value,
+				onClick: h
+			}, v(e.confirmText), 9, ae)])
+		], 40, te)], 32)) : r("", !0);
+	}
+}), [["__scopeId", "data-v-9bd629e7"]]);
+//#endregion
+export { z as LumalIcon, $ as LumalIconPicker, oe as LumalIconPickerDialog, P as useIconRegistry };

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

@@ -0,0 +1,15 @@
+import type { IconDefinition, IconGradientOptions } from '@lumal/icons';
+import type { Component } from 'vue';
+/***********************属性定义*********************/
+type __VLS_Props = {
+    name?: string;
+    icon?: Component | IconDefinition<Component> | string;
+    size?: number | string;
+    color?: string;
+    gradient?: IconGradientOptions;
+    title?: string;
+};
+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;
+export default _default;
+//# sourceMappingURL=LumalIcon.vue.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,28 @@
+import type { IconDefinition } from '@lumal/icons';
+type __VLS_Props = {
+    group?: string;
+    pageSize?: number;
+    searchable?: boolean;
+    showLabels?: boolean;
+    storageKey?: string;
+};
+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, {
+    select: (icon: IconDefinition<unknown>) => any;
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((icon: IconDefinition<unknown>) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    group: string;
+    pageSize: number;
+    searchable: boolean;
+    showLabels: boolean;
+    storageKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=LumalIconPicker.vue.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,29 @@
+/***********************属性与事件*********************/
+type __VLS_Props = {
+    cancelText?: string;
+    confirmText?: string;
+    title?: string;
+};
+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, {
+    "update:modelValue": (value: string | undefined) => any;
+    cancel: () => any;
+    confirm: (icon: string) => any;
+    "update:visible": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((icon: string) => any) | undefined;
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+}>, {
+    title: string;
+    cancelText: string;
+    confirmText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=LumalIconPickerDialog.vue.d.ts.map

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

@@ -0,0 +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"}

package/dist/src/composables/useIconRegistry.d.ts

@@ -0,0 +1,10 @@
+import type { IconDefinition, IconGroupDefinition, IconKey } from '@lumal/icons';
+import type { ComputedRef } from 'vue';
+export interface UseIconRegistryReturn {
+    groups: ComputedRef<IconGroupDefinition[]>;
+    icons: ComputedRef<IconDefinition[]>;
+    resolve: (key: IconKey) => IconDefinition | undefined;
+}
+/***********************Vue 响应式适配*********************/
+export declare function useIconRegistry(): UseIconRegistryReturn;
+//# sourceMappingURL=useIconRegistry.d.ts.map

package/dist/src/composables/useIconRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIconRegistry.d.ts","sourceRoot":"","sources":["../../../src/composables/useIconRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAStC,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,WAAW,CAAC,mBAAmB,EAAE,CAAC,CAAA;IAC1C,KAAK,EAAE,WAAW,CAAC,cAAc,EAAE,CAAC,CAAA;IACpC,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,cAAc,GAAG,SAAS,CAAA;CACtD;AAED,uDAAuD;AACvD,wBAAgB,eAAe,IAAI,qBAAqB,CA2BvD"}

package/dist/src/index.d.ts

@@ -0,0 +1,7 @@
+import LumalIcon from './components/LumalIcon.vue';
+import LumalIconPicker from './components/LumalIconPicker.vue';
+import LumalIconPickerDialog from './components/LumalIconPickerDialog.vue';
+export { LumalIcon, LumalIconPicker, LumalIconPickerDialog, };
+export { useIconRegistry } from './composables/useIconRegistry';
+export type { UseIconRegistryReturn } from './composables/useIconRegistry';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@lumal/icons-vue",
+  "type": "module",
+  "version": "0.0.1-beta",
+  "description": "Vue components and reactive adapters for @lumal/icons.",
+  "license": "MIT",
+  "keywords": [
+    "lumal",
+    "vue",
+    "icons",
+    "iconify",
+    "svg"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/icons-vue.css"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@iconify/vue": "^5.0.0",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@lumal/icons": "0.0.1-beta"
+  },
+  "scripts": {
+    "build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly --outDir dist && node ../../scripts/clean-package-dist.mjs dist",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --config ../../vitest.config.ts tests"
+  }
+}