@squirkle-ui/icons 0.0.0-stage → 0.1.1

package/dist/types/index.d.ts

@@ -0,0 +1,33 @@
+import { addCollection, addIcons } from '@squirkle-ui/ui';
+import SqIconPicker from './SqIconPicker.vue';
+export { SqIconPicker, addCollection, addIcons };
+export declare const componentNames: readonly ["SqIconPicker"];
+/** `$alias` presets mapping friendly names to popular Iconify sets. */
+export declare const aliasPresets: {
+    readonly mdi: {
+        readonly home: "mdi:home-outline";
+        readonly user: "mdi:account-outline";
+        readonly settings: "mdi:cog-outline";
+        readonly bell: "mdi:bell-outline";
+        readonly heart: "mdi:heart-outline";
+        readonly cart: "mdi:cart-outline";
+        readonly chart: "mdi:chart-box-outline";
+        readonly mail: "mdi:email-outline";
+        readonly github: "mdi:github";
+    };
+    readonly lucide: {
+        readonly home: "lucide:home";
+        readonly user: "lucide:user";
+        readonly settings: "lucide:settings";
+        readonly bell: "lucide:bell";
+        readonly heart: "lucide:heart";
+        readonly cart: "lucide:shopping-cart";
+        readonly chart: "lucide:bar-chart-3";
+        readonly mail: "lucide:mail";
+        readonly github: "lucide:github";
+    };
+};
+/** Registers a preset so `<SqIcon icon="$home">` resolves to that set. */
+export declare function useIconPreset(name: keyof typeof aliasPresets): void;
+/** Warms the icon cache (batched Iconify API request) before icons render. */
+export declare function preloadIcons(names: string[]): void;

package/dist/vue2/index.cjs

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ui = require("@squirkle-ui/ui/vue2");
+const vue = require("vue");
+const core = require("@squirkle-ui/core");
+const _sfc_main = vue.defineComponent({
+  name: "SqIconPicker",
+  components: { SqIcon: ui.SqIcon, SqProgressCircular: ui.SqProgressCircular, SqSelect: ui.SqSelect, SqShape: ui.SqShape, SqTextField: ui.SqTextField, SqVirtualScroll: ui.SqVirtualScroll },
+  model: ui.vModel,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    /** Limit to icon sets, e.g. ['mdi', 'lucide', 'tabler']. */
+    prefixes: { type: Array, default: () => ["mdi", "lucide", "tabler", "ph", "solar"] },
+    columns: { type: Number, default: 8 },
+    height: { type: [Number, String], default: 280 },
+    limit: { type: Number, default: 400 },
+    placeholder: { type: String, default: "Search icons…" }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const model = ui.useProxiedModel(props, emit);
+    const query = vue.ref("home");
+    const prefix = vue.ref("all");
+    const results = vue.ref([]);
+    const loading = vue.ref(false);
+    const error = vue.ref("");
+    const prefixItems = vue.computed(() => [{ title: "All sets", value: "all" }, ...props.prefixes.map((p) => ({ title: p, value: p }))]);
+    let seq = 0;
+    const search = core.debounce(async () => {
+      var _a, _b;
+      const q = ((_a = query.value) != null ? _a : "").trim();
+      const api = ui.config.icons.api;
+      if (!q || !api) return results.value = [];
+      const my = ++seq;
+      loading.value = true;
+      error.value = "";
+      try {
+        const sets = prefix.value === "all" ? props.prefixes.join(",") : prefix.value;
+        const res = await fetch(`${api}/search?query=${encodeURIComponent(q)}&limit=${props.limit}&prefixes=${encodeURIComponent(sets)}`);
+        const json = await res.json();
+        if (my === seq) results.value = (_b = json.icons) != null ? _b : [];
+      } catch {
+        if (my === seq) error.value = "Icon search is unavailable (offline?)";
+      } finally {
+        if (my === seq) loading.value = false;
+      }
+    }, 250);
+    vue.watch([query, prefix], () => search());
+    vue.onMounted(() => search());
+    const rows = vue.computed(() => {
+      const out = [];
+      for (let i = 0; i < results.value.length; i += props.columns) out.push(results.value.slice(i, i + props.columns));
+      return out;
+    });
+    return { model, query, prefix, prefixItems, results, rows, loading, error };
+  }
+});
+function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render2) {
+    options.render = render2;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("div", { staticClass: "sq-icon-picker sq-surface", style: { "--sq-r": "var(--sq-radius-xl)", "--sq-bg": "var(--sq-surface-raised)", "--sq-bd": "var(--sq-border)", "--sq-bw": "1px" } }, [_c("SqShape"), _c("div", { staticClass: "sq-icon-picker__bar" }, [_c("SqTextField", { attrs: { "placeholder": _vm.placeholder, "prepend-inner-icon": "search", "density": "compact", "hide-details": "", "clearable": "" }, model: { value: _vm.query, callback: function($$v) {
+    _vm.query = $$v;
+  }, expression: "query" } }), _vm.prefixes.length > 1 ? _c("SqSelect", { staticClass: "sq-icon-picker__prefix", attrs: { "items": _vm.prefixItems, "density": "compact", "hide-details": "" }, model: { value: _vm.prefix, callback: function($$v) {
+    _vm.prefix = $$v;
+  }, expression: "prefix" } }) : _vm._e()], 1), _vm.loading ? _c("div", { staticClass: "sq-icon-picker__state" }, [_c("SqProgressCircular", { attrs: { "indeterminate": "", "size": 22, "width": 3 } })], 1) : _vm.error ? _c("div", { staticClass: "sq-icon-picker__state" }, [_vm._v(_vm._s(_vm.error))]) : !_vm.results.length ? _c("div", { staticClass: "sq-icon-picker__state" }, [_vm._v(_vm._s(_vm.query ? "No icons found" : "Type to search 200,000+ Iconify icons"))]) : _c("SqVirtualScroll", { attrs: { "items": _vm.rows, "item-height": 56, "height": _vm.height }, scopedSlots: _vm._u([{ key: "default", fn: function({ item }) {
+    return [_c("div", { staticClass: "sq-icon-picker__row" }, _vm._l(item, function(name) {
+      return _c("button", { key: name, staticClass: "sq-icon-picker__cell sq-squircle", class: { "sq-icon-picker__cell--active": name === _vm.model }, attrs: { "type": "button", "title": name, "aria-label": name, "aria-pressed": name === _vm.model ? "true" : "false" }, on: { "click": function($event) {
+        _vm.model = name;
+      } } }, [_c("SqIcon", { attrs: { "icon": name, "size": "24px" } })], 1);
+    }), 0)];
+  } }]) }), _vm.model ? _c("div", { staticClass: "sq-icon-picker__selected" }, [_c("SqIcon", { attrs: { "icon": _vm.model, "size": "20px" } }), _c("code", [_vm._v(_vm._s(_vm.model))])], 1) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns
+);
+const SqIconPicker = __component__.exports;
+const componentNames = ["SqIconPicker"];
+const aliasPresets = {
+  mdi: { home: "mdi:home-outline", user: "mdi:account-outline", settings: "mdi:cog-outline", bell: "mdi:bell-outline", heart: "mdi:heart-outline", cart: "mdi:cart-outline", chart: "mdi:chart-box-outline", mail: "mdi:email-outline", github: "mdi:github" },
+  lucide: { home: "lucide:home", user: "lucide:user", settings: "lucide:settings", bell: "lucide:bell", heart: "lucide:heart", cart: "lucide:shopping-cart", chart: "lucide:bar-chart-3", mail: "lucide:mail", github: "lucide:github" }
+};
+function useIconPreset(name) {
+  ui.applyOptions({ icons: { aliases: { ...aliasPresets[name] } } });
+}
+function preloadIcons(names) {
+  names.forEach((n) => ui.resolveIcon(n));
+}
+Object.defineProperty(exports, "addCollection", {
+  enumerable: true,
+  get: () => ui.addCollection
+});
+Object.defineProperty(exports, "addIcons", {
+  enumerable: true,
+  get: () => ui.addIcons
+});
+exports.SqIconPicker = SqIconPicker;
+exports.aliasPresets = aliasPresets;
+exports.componentNames = componentNames;
+exports.preloadIcons = preloadIcons;
+exports.useIconPreset = useIconPreset;
+//# sourceMappingURL=index.cjs.map

package/dist/vue2/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/SqIconPicker.vue","../../src/index.ts"],"sourcesContent":["<template>\n  <div class=\"sq-icon-picker sq-surface\" :style=\"{ '--sq-r': 'var(--sq-radius-xl)', '--sq-bg': 'var(--sq-surface-raised)', '--sq-bd': 'var(--sq-border)', '--sq-bw': '1px' }\">\n    <SqShape />\n    <div class=\"sq-icon-picker__bar\">\n      <SqTextField v-model=\"query\" :placeholder=\"placeholder\" prepend-inner-icon=\"search\" density=\"compact\" hide-details clearable />\n      <SqSelect v-if=\"prefixes.length > 1\" v-model=\"prefix\" :items=\"prefixItems\" density=\"compact\" hide-details class=\"sq-icon-picker__prefix\" />\n    </div>\n    <div v-if=\"loading\" class=\"sq-icon-picker__state\"><SqProgressCircular indeterminate :size=\"22\" :width=\"3\" /></div>\n    <div v-else-if=\"error\" class=\"sq-icon-picker__state\">{{ error }}</div>\n    <div v-else-if=\"!results.length\" class=\"sq-icon-picker__state\">{{ query ? 'No icons found' : 'Type to search 200,000+ Iconify icons' }}</div>\n    <SqVirtualScroll v-else :items=\"rows\" :item-height=\"56\" :height=\"height\">\n      <template #default=\"{ item }\">\n        <div class=\"sq-icon-picker__row\">\n          <button\n            v-for=\"name in item\"\n            :key=\"name\"\n            type=\"button\"\n            class=\"sq-icon-picker__cell sq-squircle\"\n            :class=\"{ 'sq-icon-picker__cell--active': name === model }\"\n            :title=\"name\"\n            :aria-label=\"name\"\n            :aria-pressed=\"name === model ? 'true' : 'false'\"\n            @click=\"model = name\"\n          ><SqIcon :icon=\"name\" size=\"24px\" /></button>\n        </div>\n      </template>\n    </SqVirtualScroll>\n    <div v-if=\"model\" class=\"sq-icon-picker__selected\"><SqIcon :icon=\"model\" size=\"20px\" /><code>{{ model }}</code></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, onMounted, ref, watch, type PropType } from 'vue'\nimport { debounce } from '@squirkle-ui/core'\nimport { SqIcon, SqProgressCircular, SqSelect, SqShape, SqTextField, SqVirtualScroll, config, useProxiedModel, vModel } from '@squirkle-ui/ui'\n\n/** Searchable Iconify browser (uses the configured Iconify API host). v-model = icon name, e.g. `mdi:home`. */\nexport default defineComponent({\n  name: 'SqIconPicker',\n  components: { SqIcon, SqProgressCircular, SqSelect, SqShape, SqTextField, SqVirtualScroll },\n  model: vModel,\n  props: {\n    modelValue: { type: String, default: undefined },\n    /** Limit to icon sets, e.g. ['mdi', 'lucide', 'tabler']. */\n    prefixes: { type: Array as PropType<string[]>, default: () => ['mdi', 'lucide', 'tabler', 'ph', 'solar'] },\n    columns: { type: Number, default: 8 },\n    height: { type: [Number, String], default: 280 },\n    limit: { type: Number, default: 400 },\n    placeholder: { type: String, default: 'Search icons…' },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    const model = useProxiedModel<string | undefined>(props, emit)\n    const query = ref('home')\n    const prefix = ref('all')\n    const results = ref<string[]>([])\n    const loading = ref(false)\n    const error = ref('')\n    const prefixItems = computed(() => [{ title: 'All sets', value: 'all' }, ...props.prefixes.map((p) => ({ title: p, value: p }))])\n    let seq = 0\n    const search = debounce(async () => {\n      const q = (query.value ?? '').trim()\n      const api = config.icons.api\n      if (!q || !api) return (results.value = [])\n      const my = ++seq\n      loading.value = true\n      error.value = ''\n      try {\n        const sets = prefix.value === 'all' ? props.prefixes.join(',') : prefix.value\n        const res = await fetch(`${api}/search?query=${encodeURIComponent(q)}&limit=${props.limit}&prefixes=${encodeURIComponent(sets)}`)\n        const json = (await res.json()) as { icons?: string[] }\n        if (my === seq) results.value = json.icons ?? []\n      } catch {\n        if (my === seq) error.value = 'Icon search is unavailable (offline?)'\n      } finally {\n        if (my === seq) loading.value = false\n      }\n    }, 250)\n    watch([query, prefix], () => search())\n    onMounted(() => search())\n    const rows = computed(() => {\n      const out: string[][] = []\n      for (let i = 0; i < results.value.length; i += props.columns) out.push(results.value.slice(i, i + props.columns))\n      return out\n    })\n    return { model, query, prefix, prefixItems, results, rows, loading, error }\n  },\n})\n</script>\n\n<style>\n.sq-icon-picker { display: flex; flex-direction: column; gap: var(--sq-space-2); padding: var(--sq-space-3); width: 100%; max-width: 480px; }\n.sq-icon-picker__bar { display: flex; gap: var(--sq-space-2); }\n.sq-icon-picker__prefix { max-width: 140px; }\n.sq-icon-picker__state { display: flex; align-items: center; justify-content: center; min-height: 120px; color: var(--sq-muted); font-size: var(--sq-text-sm); }\n.sq-icon-picker__row { display: flex; gap: 4px; height: 56px; padding: 4px 0; }\n.sq-icon-picker__cell { --sq-r: var(--sq-radius-md); flex: 1; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--sq-on-surface); cursor: pointer; max-width: 56px; }\n.sq-icon-picker__cell:hover { background: color-mix(in srgb, var(--sq-primary) 10%, transparent); color: var(--sq-primary); }\n.sq-icon-picker__cell--active { background: var(--sq-primary) !important; color: var(--sq-on-primary) !important; }\n.sq-icon-picker__selected { display: flex; align-items: center; gap: var(--sq-space-2); padding-top: var(--sq-space-2); border-top: 1px solid var(--sq-border); font-size: var(--sq-text-sm); }\n</style>\n","import { addCollection, addIcons, applyOptions, resolveIcon } from '@squirkle-ui/ui'\nimport SqIconPicker from './SqIconPicker.vue'\n\nexport { SqIconPicker, addCollection, addIcons }\nexport const componentNames = ['SqIconPicker'] as const\n\n/** `$alias` presets mapping friendly names to popular Iconify sets. */\nexport const aliasPresets = {\n  mdi: { home: 'mdi:home-outline', user: 'mdi:account-outline', settings: 'mdi:cog-outline', bell: 'mdi:bell-outline', heart: 'mdi:heart-outline', cart: 'mdi:cart-outline', chart: 'mdi:chart-box-outline', mail: 'mdi:email-outline', github: 'mdi:github' },\n  lucide: { home: 'lucide:home', user: 'lucide:user', settings: 'lucide:settings', bell: 'lucide:bell', heart: 'lucide:heart', cart: 'lucide:shopping-cart', chart: 'lucide:bar-chart-3', mail: 'lucide:mail', github: 'lucide:github' },\n} as const\n\n/** Registers a preset so `<SqIcon icon=\"$home\">` resolves to that set. */\nexport function useIconPreset(name: keyof typeof aliasPresets) {\n  applyOptions({ icons: { aliases: { ...aliasPresets[name] } } })\n}\n\n/** Warms the icon cache (batched Iconify API request) before icons render. */\nexport function preloadIcons(names: string[]) {\n  names.forEach((n) => resolveIcon(n))\n}\n"],"names":["defineComponent","SqIcon","SqProgressCircular","SqSelect","SqShape","SqTextField","SqVirtualScroll","vModel","useProxiedModel","ref","computed","debounce","config","watch","onMounted","applyOptions","resolveIcon"],"mappings":"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"}

package/dist/vue2/index.mjs

@@ -0,0 +1,111 @@
+import { vModel, SqVirtualScroll, SqTextField, SqShape, SqSelect, SqProgressCircular, SqIcon, useProxiedModel, config, resolveIcon, applyOptions } from "@squirkle-ui/ui/vue2";
+import { addCollection, addIcons } from "@squirkle-ui/ui/vue2";
+import { defineComponent, ref, computed, watch, onMounted } from "vue";
+import { debounce } from "@squirkle-ui/core";
+const _sfc_main = defineComponent({
+  name: "SqIconPicker",
+  components: { SqIcon, SqProgressCircular, SqSelect, SqShape, SqTextField, SqVirtualScroll },
+  model: vModel,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    /** Limit to icon sets, e.g. ['mdi', 'lucide', 'tabler']. */
+    prefixes: { type: Array, default: () => ["mdi", "lucide", "tabler", "ph", "solar"] },
+    columns: { type: Number, default: 8 },
+    height: { type: [Number, String], default: 280 },
+    limit: { type: Number, default: 400 },
+    placeholder: { type: String, default: "Search icons…" }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const model = useProxiedModel(props, emit);
+    const query = ref("home");
+    const prefix = ref("all");
+    const results = ref([]);
+    const loading = ref(false);
+    const error = ref("");
+    const prefixItems = computed(() => [{ title: "All sets", value: "all" }, ...props.prefixes.map((p) => ({ title: p, value: p }))]);
+    let seq = 0;
+    const search = debounce(async () => {
+      var _a, _b;
+      const q = ((_a = query.value) != null ? _a : "").trim();
+      const api = config.icons.api;
+      if (!q || !api) return results.value = [];
+      const my = ++seq;
+      loading.value = true;
+      error.value = "";
+      try {
+        const sets = prefix.value === "all" ? props.prefixes.join(",") : prefix.value;
+        const res = await fetch(`${api}/search?query=${encodeURIComponent(q)}&limit=${props.limit}&prefixes=${encodeURIComponent(sets)}`);
+        const json = await res.json();
+        if (my === seq) results.value = (_b = json.icons) != null ? _b : [];
+      } catch {
+        if (my === seq) error.value = "Icon search is unavailable (offline?)";
+      } finally {
+        if (my === seq) loading.value = false;
+      }
+    }, 250);
+    watch([query, prefix], () => search());
+    onMounted(() => search());
+    const rows = computed(() => {
+      const out = [];
+      for (let i = 0; i < results.value.length; i += props.columns) out.push(results.value.slice(i, i + props.columns));
+      return out;
+    });
+    return { model, query, prefix, prefixItems, results, rows, loading, error };
+  }
+});
+function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render2) {
+    options.render = render2;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("div", { staticClass: "sq-icon-picker sq-surface", style: { "--sq-r": "var(--sq-radius-xl)", "--sq-bg": "var(--sq-surface-raised)", "--sq-bd": "var(--sq-border)", "--sq-bw": "1px" } }, [_c("SqShape"), _c("div", { staticClass: "sq-icon-picker__bar" }, [_c("SqTextField", { attrs: { "placeholder": _vm.placeholder, "prepend-inner-icon": "search", "density": "compact", "hide-details": "", "clearable": "" }, model: { value: _vm.query, callback: function($$v) {
+    _vm.query = $$v;
+  }, expression: "query" } }), _vm.prefixes.length > 1 ? _c("SqSelect", { staticClass: "sq-icon-picker__prefix", attrs: { "items": _vm.prefixItems, "density": "compact", "hide-details": "" }, model: { value: _vm.prefix, callback: function($$v) {
+    _vm.prefix = $$v;
+  }, expression: "prefix" } }) : _vm._e()], 1), _vm.loading ? _c("div", { staticClass: "sq-icon-picker__state" }, [_c("SqProgressCircular", { attrs: { "indeterminate": "", "size": 22, "width": 3 } })], 1) : _vm.error ? _c("div", { staticClass: "sq-icon-picker__state" }, [_vm._v(_vm._s(_vm.error))]) : !_vm.results.length ? _c("div", { staticClass: "sq-icon-picker__state" }, [_vm._v(_vm._s(_vm.query ? "No icons found" : "Type to search 200,000+ Iconify icons"))]) : _c("SqVirtualScroll", { attrs: { "items": _vm.rows, "item-height": 56, "height": _vm.height }, scopedSlots: _vm._u([{ key: "default", fn: function({ item }) {
+    return [_c("div", { staticClass: "sq-icon-picker__row" }, _vm._l(item, function(name) {
+      return _c("button", { key: name, staticClass: "sq-icon-picker__cell sq-squircle", class: { "sq-icon-picker__cell--active": name === _vm.model }, attrs: { "type": "button", "title": name, "aria-label": name, "aria-pressed": name === _vm.model ? "true" : "false" }, on: { "click": function($event) {
+        _vm.model = name;
+      } } }, [_c("SqIcon", { attrs: { "icon": name, "size": "24px" } })], 1);
+    }), 0)];
+  } }]) }), _vm.model ? _c("div", { staticClass: "sq-icon-picker__selected" }, [_c("SqIcon", { attrs: { "icon": _vm.model, "size": "20px" } }), _c("code", [_vm._v(_vm._s(_vm.model))])], 1) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns
+);
+const SqIconPicker = __component__.exports;
+const componentNames = ["SqIconPicker"];
+const aliasPresets = {
+  mdi: { home: "mdi:home-outline", user: "mdi:account-outline", settings: "mdi:cog-outline", bell: "mdi:bell-outline", heart: "mdi:heart-outline", cart: "mdi:cart-outline", chart: "mdi:chart-box-outline", mail: "mdi:email-outline", github: "mdi:github" },
+  lucide: { home: "lucide:home", user: "lucide:user", settings: "lucide:settings", bell: "lucide:bell", heart: "lucide:heart", cart: "lucide:shopping-cart", chart: "lucide:bar-chart-3", mail: "lucide:mail", github: "lucide:github" }
+};
+function useIconPreset(name) {
+  applyOptions({ icons: { aliases: { ...aliasPresets[name] } } });
+}
+function preloadIcons(names) {
+  names.forEach((n) => resolveIcon(n));
+}
+export {
+  SqIconPicker,
+  addCollection,
+  addIcons,
+  aliasPresets,
+  componentNames,
+  preloadIcons,
+  useIconPreset
+};
+//# sourceMappingURL=index.mjs.map

package/dist/vue2/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/SqIconPicker.vue","../../src/index.ts"],"sourcesContent":["<template>\n  <div class=\"sq-icon-picker sq-surface\" :style=\"{ '--sq-r': 'var(--sq-radius-xl)', '--sq-bg': 'var(--sq-surface-raised)', '--sq-bd': 'var(--sq-border)', '--sq-bw': '1px' }\">\n    <SqShape />\n    <div class=\"sq-icon-picker__bar\">\n      <SqTextField v-model=\"query\" :placeholder=\"placeholder\" prepend-inner-icon=\"search\" density=\"compact\" hide-details clearable />\n      <SqSelect v-if=\"prefixes.length > 1\" v-model=\"prefix\" :items=\"prefixItems\" density=\"compact\" hide-details class=\"sq-icon-picker__prefix\" />\n    </div>\n    <div v-if=\"loading\" class=\"sq-icon-picker__state\"><SqProgressCircular indeterminate :size=\"22\" :width=\"3\" /></div>\n    <div v-else-if=\"error\" class=\"sq-icon-picker__state\">{{ error }}</div>\n    <div v-else-if=\"!results.length\" class=\"sq-icon-picker__state\">{{ query ? 'No icons found' : 'Type to search 200,000+ Iconify icons' }}</div>\n    <SqVirtualScroll v-else :items=\"rows\" :item-height=\"56\" :height=\"height\">\n      <template #default=\"{ item }\">\n        <div class=\"sq-icon-picker__row\">\n          <button\n            v-for=\"name in item\"\n            :key=\"name\"\n            type=\"button\"\n            class=\"sq-icon-picker__cell sq-squircle\"\n            :class=\"{ 'sq-icon-picker__cell--active': name === model }\"\n            :title=\"name\"\n            :aria-label=\"name\"\n            :aria-pressed=\"name === model ? 'true' : 'false'\"\n            @click=\"model = name\"\n          ><SqIcon :icon=\"name\" size=\"24px\" /></button>\n        </div>\n      </template>\n    </SqVirtualScroll>\n    <div v-if=\"model\" class=\"sq-icon-picker__selected\"><SqIcon :icon=\"model\" size=\"20px\" /><code>{{ model }}</code></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, onMounted, ref, watch, type PropType } from 'vue'\nimport { debounce } from '@squirkle-ui/core'\nimport { SqIcon, SqProgressCircular, SqSelect, SqShape, SqTextField, SqVirtualScroll, config, useProxiedModel, vModel } from '@squirkle-ui/ui'\n\n/** Searchable Iconify browser (uses the configured Iconify API host). v-model = icon name, e.g. `mdi:home`. */\nexport default defineComponent({\n  name: 'SqIconPicker',\n  components: { SqIcon, SqProgressCircular, SqSelect, SqShape, SqTextField, SqVirtualScroll },\n  model: vModel,\n  props: {\n    modelValue: { type: String, default: undefined },\n    /** Limit to icon sets, e.g. ['mdi', 'lucide', 'tabler']. */\n    prefixes: { type: Array as PropType<string[]>, default: () => ['mdi', 'lucide', 'tabler', 'ph', 'solar'] },\n    columns: { type: Number, default: 8 },\n    height: { type: [Number, String], default: 280 },\n    limit: { type: Number, default: 400 },\n    placeholder: { type: String, default: 'Search icons…' },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    const model = useProxiedModel<string | undefined>(props, emit)\n    const query = ref('home')\n    const prefix = ref('all')\n    const results = ref<string[]>([])\n    const loading = ref(false)\n    const error = ref('')\n    const prefixItems = computed(() => [{ title: 'All sets', value: 'all' }, ...props.prefixes.map((p) => ({ title: p, value: p }))])\n    let seq = 0\n    const search = debounce(async () => {\n      const q = (query.value ?? '').trim()\n      const api = config.icons.api\n      if (!q || !api) return (results.value = [])\n      const my = ++seq\n      loading.value = true\n      error.value = ''\n      try {\n        const sets = prefix.value === 'all' ? props.prefixes.join(',') : prefix.value\n        const res = await fetch(`${api}/search?query=${encodeURIComponent(q)}&limit=${props.limit}&prefixes=${encodeURIComponent(sets)}`)\n        const json = (await res.json()) as { icons?: string[] }\n        if (my === seq) results.value = json.icons ?? []\n      } catch {\n        if (my === seq) error.value = 'Icon search is unavailable (offline?)'\n      } finally {\n        if (my === seq) loading.value = false\n      }\n    }, 250)\n    watch([query, prefix], () => search())\n    onMounted(() => search())\n    const rows = computed(() => {\n      const out: string[][] = []\n      for (let i = 0; i < results.value.length; i += props.columns) out.push(results.value.slice(i, i + props.columns))\n      return out\n    })\n    return { model, query, prefix, prefixItems, results, rows, loading, error }\n  },\n})\n</script>\n\n<style>\n.sq-icon-picker { display: flex; flex-direction: column; gap: var(--sq-space-2); padding: var(--sq-space-3); width: 100%; max-width: 480px; }\n.sq-icon-picker__bar { display: flex; gap: var(--sq-space-2); }\n.sq-icon-picker__prefix { max-width: 140px; }\n.sq-icon-picker__state { display: flex; align-items: center; justify-content: center; min-height: 120px; color: var(--sq-muted); font-size: var(--sq-text-sm); }\n.sq-icon-picker__row { display: flex; gap: 4px; height: 56px; padding: 4px 0; }\n.sq-icon-picker__cell { --sq-r: var(--sq-radius-md); flex: 1; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--sq-on-surface); cursor: pointer; max-width: 56px; }\n.sq-icon-picker__cell:hover { background: color-mix(in srgb, var(--sq-primary) 10%, transparent); color: var(--sq-primary); }\n.sq-icon-picker__cell--active { background: var(--sq-primary) !important; color: var(--sq-on-primary) !important; }\n.sq-icon-picker__selected { display: flex; align-items: center; gap: var(--sq-space-2); padding-top: var(--sq-space-2); border-top: 1px solid var(--sq-border); font-size: var(--sq-text-sm); }\n</style>\n","import { addCollection, addIcons, applyOptions, resolveIcon } from '@squirkle-ui/ui'\nimport SqIconPicker from './SqIconPicker.vue'\n\nexport { SqIconPicker, addCollection, addIcons }\nexport const componentNames = ['SqIconPicker'] as const\n\n/** `$alias` presets mapping friendly names to popular Iconify sets. */\nexport const aliasPresets = {\n  mdi: { home: 'mdi:home-outline', user: 'mdi:account-outline', settings: 'mdi:cog-outline', bell: 'mdi:bell-outline', heart: 'mdi:heart-outline', cart: 'mdi:cart-outline', chart: 'mdi:chart-box-outline', mail: 'mdi:email-outline', github: 'mdi:github' },\n  lucide: { home: 'lucide:home', user: 'lucide:user', settings: 'lucide:settings', bell: 'lucide:bell', heart: 'lucide:heart', cart: 'lucide:shopping-cart', chart: 'lucide:bar-chart-3', mail: 'lucide:mail', github: 'lucide:github' },\n} as const\n\n/** Registers a preset so `<SqIcon icon=\"$home\">` resolves to that set. */\nexport function useIconPreset(name: keyof typeof aliasPresets) {\n  applyOptions({ icons: { aliases: { ...aliasPresets[name] } } })\n}\n\n/** Warms the icon cache (batched Iconify API request) before icons render. */\nexport function preloadIcons(names: string[]) {\n  names.forEach((n) => resolveIcon(n))\n}\n"],"names":[],"mappings":"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"}

package/dist/vue3/index.cjs

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ui = require("@squirkle-ui/ui");
+const vue = require("vue");
+const core = require("@squirkle-ui/core");
+const _sfc_main = vue.defineComponent({
+  name: "SqIconPicker",
+  components: { SqIcon: ui.SqIcon, SqProgressCircular: ui.SqProgressCircular, SqSelect: ui.SqSelect, SqShape: ui.SqShape, SqTextField: ui.SqTextField, SqVirtualScroll: ui.SqVirtualScroll },
+  model: ui.vModel,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    /** Limit to icon sets, e.g. ['mdi', 'lucide', 'tabler']. */
+    prefixes: { type: Array, default: () => ["mdi", "lucide", "tabler", "ph", "solar"] },
+    columns: { type: Number, default: 8 },
+    height: { type: [Number, String], default: 280 },
+    limit: { type: Number, default: 400 },
+    placeholder: { type: String, default: "Search icons…" }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const model = ui.useProxiedModel(props, emit);
+    const query = vue.ref("home");
+    const prefix = vue.ref("all");
+    const results = vue.ref([]);
+    const loading = vue.ref(false);
+    const error = vue.ref("");
+    const prefixItems = vue.computed(() => [{ title: "All sets", value: "all" }, ...props.prefixes.map((p) => ({ title: p, value: p }))]);
+    let seq = 0;
+    const search = core.debounce(async () => {
+      const q = (query.value ?? "").trim();
+      const api = ui.config.icons.api;
+      if (!q || !api) return results.value = [];
+      const my = ++seq;
+      loading.value = true;
+      error.value = "";
+      try {
+        const sets = prefix.value === "all" ? props.prefixes.join(",") : prefix.value;
+        const res = await fetch(`${api}/search?query=${encodeURIComponent(q)}&limit=${props.limit}&prefixes=${encodeURIComponent(sets)}`);
+        const json = await res.json();
+        if (my === seq) results.value = json.icons ?? [];
+      } catch {
+        if (my === seq) error.value = "Icon search is unavailable (offline?)";
+      } finally {
+        if (my === seq) loading.value = false;
+      }
+    }, 250);
+    vue.watch([query, prefix], () => search());
+    vue.onMounted(() => search());
+    const rows = vue.computed(() => {
+      const out = [];
+      for (let i = 0; i < results.value.length; i += props.columns) out.push(results.value.slice(i, i + props.columns));
+      return out;
+    });
+    return { model, query, prefix, prefixItems, results, rows, loading, error };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  class: "sq-icon-picker sq-surface",
+  style: { "--sq-r": "var(--sq-radius-xl)", "--sq-bg": "var(--sq-surface-raised)", "--sq-bd": "var(--sq-border)", "--sq-bw": "1px" }
+};
+const _hoisted_2 = { class: "sq-icon-picker__bar" };
+const _hoisted_3 = {
+  key: 0,
+  class: "sq-icon-picker__state"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "sq-icon-picker__state"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "sq-icon-picker__state"
+};
+const _hoisted_6 = { class: "sq-icon-picker__row" };
+const _hoisted_7 = ["title", "aria-label", "aria-pressed", "onClick"];
+const _hoisted_8 = {
+  key: 4,
+  class: "sq-icon-picker__selected"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SqShape = vue.resolveComponent("SqShape");
+  const _component_SqTextField = vue.resolveComponent("SqTextField");
+  const _component_SqSelect = vue.resolveComponent("SqSelect");
+  const _component_SqProgressCircular = vue.resolveComponent("SqProgressCircular");
+  const _component_SqIcon = vue.resolveComponent("SqIcon");
+  const _component_SqVirtualScroll = vue.resolveComponent("SqVirtualScroll");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.createVNode(_component_SqShape),
+    vue.createElementVNode("div", _hoisted_2, [
+      vue.createVNode(_component_SqTextField, {
+        modelValue: _ctx.query,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.query = $event),
+        placeholder: _ctx.placeholder,
+        "prepend-inner-icon": "search",
+        density: "compact",
+        "hide-details": "",
+        clearable: ""
+      }, null, 8, ["modelValue", "placeholder"]),
+      _ctx.prefixes.length > 1 ? (vue.openBlock(), vue.createBlock(_component_SqSelect, {
+        key: 0,
+        modelValue: _ctx.prefix,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.prefix = $event),
+        items: _ctx.prefixItems,
+        density: "compact",
+        "hide-details": "",
+        class: "sq-icon-picker__prefix"
+      }, null, 8, ["modelValue", "items"])) : vue.createCommentVNode("v-if", true)
+    ]),
+    _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+      vue.createVNode(_component_SqProgressCircular, {
+        indeterminate: "",
+        size: 22,
+        width: 3
+      })
+    ])) : _ctx.error ? (vue.openBlock(), vue.createElementBlock(
+      "div",
+      _hoisted_4,
+      vue.toDisplayString(_ctx.error),
+      1
+      /* TEXT */
+    )) : !_ctx.results.length ? (vue.openBlock(), vue.createElementBlock(
+      "div",
+      _hoisted_5,
+      vue.toDisplayString(_ctx.query ? "No icons found" : "Type to search 200,000+ Iconify icons"),
+      1
+      /* TEXT */
+    )) : (vue.openBlock(), vue.createBlock(_component_SqVirtualScroll, {
+      key: 3,
+      items: _ctx.rows,
+      "item-height": 56,
+      height: _ctx.height
+    }, {
+      default: vue.withCtx(({ item }) => [
+        vue.createElementVNode("div", _hoisted_6, [
+          (vue.openBlock(true), vue.createElementBlock(
+            vue.Fragment,
+            null,
+            vue.renderList(item, (name) => {
+              return vue.openBlock(), vue.createElementBlock("button", {
+                key: name,
+                type: "button",
+                class: vue.normalizeClass(["sq-icon-picker__cell sq-squircle", { "sq-icon-picker__cell--active": name === _ctx.model }]),
+                title: name,
+                "aria-label": name,
+                "aria-pressed": name === _ctx.model ? "true" : "false",
+                onClick: ($event) => _ctx.model = name
+              }, [
+                vue.createVNode(_component_SqIcon, {
+                  icon: name,
+                  size: "24px"
+                }, null, 8, ["icon"])
+              ], 10, _hoisted_7);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ])
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["items", "height"])),
+    _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+      vue.createVNode(_component_SqIcon, {
+        icon: _ctx.model,
+        size: "20px"
+      }, null, 8, ["icon"]),
+      vue.createElementVNode(
+        "code",
+        null,
+        vue.toDisplayString(_ctx.model),
+        1
+        /* TEXT */
+      )
+    ])) : vue.createCommentVNode("v-if", true)
+  ]);
+}
+const SqIconPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const componentNames = ["SqIconPicker"];
+const aliasPresets = {
+  mdi: { home: "mdi:home-outline", user: "mdi:account-outline", settings: "mdi:cog-outline", bell: "mdi:bell-outline", heart: "mdi:heart-outline", cart: "mdi:cart-outline", chart: "mdi:chart-box-outline", mail: "mdi:email-outline", github: "mdi:github" },
+  lucide: { home: "lucide:home", user: "lucide:user", settings: "lucide:settings", bell: "lucide:bell", heart: "lucide:heart", cart: "lucide:shopping-cart", chart: "lucide:bar-chart-3", mail: "lucide:mail", github: "lucide:github" }
+};
+function useIconPreset(name) {
+  ui.applyOptions({ icons: { aliases: { ...aliasPresets[name] } } });
+}
+function preloadIcons(names) {
+  names.forEach((n) => ui.resolveIcon(n));
+}
+Object.defineProperty(exports, "addCollection", {
+  enumerable: true,
+  get: () => ui.addCollection
+});
+Object.defineProperty(exports, "addIcons", {
+  enumerable: true,
+  get: () => ui.addIcons
+});
+exports.SqIconPicker = SqIconPicker;
+exports.aliasPresets = aliasPresets;
+exports.componentNames = componentNames;
+exports.preloadIcons = preloadIcons;
+exports.useIconPreset = useIconPreset;
+//# sourceMappingURL=index.cjs.map

package/dist/vue3/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/SqIconPicker.vue","../../src/index.ts"],"sourcesContent":["<template>\n  <div class=\"sq-icon-picker sq-surface\" :style=\"{ '--sq-r': 'var(--sq-radius-xl)', '--sq-bg': 'var(--sq-surface-raised)', '--sq-bd': 'var(--sq-border)', '--sq-bw': '1px' }\">\n    <SqShape />\n    <div class=\"sq-icon-picker__bar\">\n      <SqTextField v-model=\"query\" :placeholder=\"placeholder\" prepend-inner-icon=\"search\" density=\"compact\" hide-details clearable />\n      <SqSelect v-if=\"prefixes.length > 1\" v-model=\"prefix\" :items=\"prefixItems\" density=\"compact\" hide-details class=\"sq-icon-picker__prefix\" />\n    </div>\n    <div v-if=\"loading\" class=\"sq-icon-picker__state\"><SqProgressCircular indeterminate :size=\"22\" :width=\"3\" /></div>\n    <div v-else-if=\"error\" class=\"sq-icon-picker__state\">{{ error }}</div>\n    <div v-else-if=\"!results.length\" class=\"sq-icon-picker__state\">{{ query ? 'No icons found' : 'Type to search 200,000+ Iconify icons' }}</div>\n    <SqVirtualScroll v-else :items=\"rows\" :item-height=\"56\" :height=\"height\">\n      <template #default=\"{ item }\">\n        <div class=\"sq-icon-picker__row\">\n          <button\n            v-for=\"name in item\"\n            :key=\"name\"\n            type=\"button\"\n            class=\"sq-icon-picker__cell sq-squircle\"\n            :class=\"{ 'sq-icon-picker__cell--active': name === model }\"\n            :title=\"name\"\n            :aria-label=\"name\"\n            :aria-pressed=\"name === model ? 'true' : 'false'\"\n            @click=\"model = name\"\n          ><SqIcon :icon=\"name\" size=\"24px\" /></button>\n        </div>\n      </template>\n    </SqVirtualScroll>\n    <div v-if=\"model\" class=\"sq-icon-picker__selected\"><SqIcon :icon=\"model\" size=\"20px\" /><code>{{ model }}</code></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, onMounted, ref, watch, type PropType } from 'vue'\nimport { debounce } from '@squirkle-ui/core'\nimport { SqIcon, SqProgressCircular, SqSelect, SqShape, SqTextField, SqVirtualScroll, config, useProxiedModel, vModel } from '@squirkle-ui/ui'\n\n/** Searchable Iconify browser (uses the configured Iconify API host). v-model = icon name, e.g. `mdi:home`. */\nexport default defineComponent({\n  name: 'SqIconPicker',\n  components: { SqIcon, SqProgressCircular, SqSelect, SqShape, SqTextField, SqVirtualScroll },\n  model: vModel,\n  props: {\n    modelValue: { type: String, default: undefined },\n    /** Limit to icon sets, e.g. ['mdi', 'lucide', 'tabler']. */\n    prefixes: { type: Array as PropType<string[]>, default: () => ['mdi', 'lucide', 'tabler', 'ph', 'solar'] },\n    columns: { type: Number, default: 8 },\n    height: { type: [Number, String], default: 280 },\n    limit: { type: Number, default: 400 },\n    placeholder: { type: String, default: 'Search icons…' },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    const model = useProxiedModel<string | undefined>(props, emit)\n    const query = ref('home')\n    const prefix = ref('all')\n    const results = ref<string[]>([])\n    const loading = ref(false)\n    const error = ref('')\n    const prefixItems = computed(() => [{ title: 'All sets', value: 'all' }, ...props.prefixes.map((p) => ({ title: p, value: p }))])\n    let seq = 0\n    const search = debounce(async () => {\n      const q = (query.value ?? '').trim()\n      const api = config.icons.api\n      if (!q || !api) return (results.value = [])\n      const my = ++seq\n      loading.value = true\n      error.value = ''\n      try {\n        const sets = prefix.value === 'all' ? props.prefixes.join(',') : prefix.value\n        const res = await fetch(`${api}/search?query=${encodeURIComponent(q)}&limit=${props.limit}&prefixes=${encodeURIComponent(sets)}`)\n        const json = (await res.json()) as { icons?: string[] }\n        if (my === seq) results.value = json.icons ?? []\n      } catch {\n        if (my === seq) error.value = 'Icon search is unavailable (offline?)'\n      } finally {\n        if (my === seq) loading.value = false\n      }\n    }, 250)\n    watch([query, prefix], () => search())\n    onMounted(() => search())\n    const rows = computed(() => {\n      const out: string[][] = []\n      for (let i = 0; i < results.value.length; i += props.columns) out.push(results.value.slice(i, i + props.columns))\n      return out\n    })\n    return { model, query, prefix, prefixItems, results, rows, loading, error }\n  },\n})\n</script>\n\n<style>\n.sq-icon-picker { display: flex; flex-direction: column; gap: var(--sq-space-2); padding: var(--sq-space-3); width: 100%; max-width: 480px; }\n.sq-icon-picker__bar { display: flex; gap: var(--sq-space-2); }\n.sq-icon-picker__prefix { max-width: 140px; }\n.sq-icon-picker__state { display: flex; align-items: center; justify-content: center; min-height: 120px; color: var(--sq-muted); font-size: var(--sq-text-sm); }\n.sq-icon-picker__row { display: flex; gap: 4px; height: 56px; padding: 4px 0; }\n.sq-icon-picker__cell { --sq-r: var(--sq-radius-md); flex: 1; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--sq-on-surface); cursor: pointer; max-width: 56px; }\n.sq-icon-picker__cell:hover { background: color-mix(in srgb, var(--sq-primary) 10%, transparent); color: var(--sq-primary); }\n.sq-icon-picker__cell--active { background: var(--sq-primary) !important; color: var(--sq-on-primary) !important; }\n.sq-icon-picker__selected { display: flex; align-items: center; gap: var(--sq-space-2); padding-top: var(--sq-space-2); border-top: 1px solid var(--sq-border); font-size: var(--sq-text-sm); }\n</style>\n","import { addCollection, addIcons, applyOptions, resolveIcon } from '@squirkle-ui/ui'\nimport SqIconPicker from './SqIconPicker.vue'\n\nexport { SqIconPicker, addCollection, addIcons }\nexport const componentNames = ['SqIconPicker'] as const\n\n/** `$alias` presets mapping friendly names to popular Iconify sets. */\nexport const aliasPresets = {\n  mdi: { home: 'mdi:home-outline', user: 'mdi:account-outline', settings: 'mdi:cog-outline', bell: 'mdi:bell-outline', heart: 'mdi:heart-outline', cart: 'mdi:cart-outline', chart: 'mdi:chart-box-outline', mail: 'mdi:email-outline', github: 'mdi:github' },\n  lucide: { home: 'lucide:home', user: 'lucide:user', settings: 'lucide:settings', bell: 'lucide:bell', heart: 'lucide:heart', cart: 'lucide:shopping-cart', chart: 'lucide:bar-chart-3', mail: 'lucide:mail', github: 'lucide:github' },\n} as const\n\n/** Registers a preset so `<SqIcon icon=\"$home\">` resolves to that set. */\nexport function useIconPreset(name: keyof typeof aliasPresets) {\n  applyOptions({ icons: { aliases: { ...aliasPresets[name] } } })\n}\n\n/** Warms the icon cache (batched Iconify API request) before icons render. */\nexport function preloadIcons(names: string[]) {\n  names.forEach((n) => resolveIcon(n))\n}\n"],"names":["defineComponent","SqIcon","SqProgressCircular","SqSelect","SqShape","SqTextField","SqVirtualScroll","vModel","useProxiedModel","ref","computed","debounce","config","watch","onMounted","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_createBlock","_createCommentVNode","_toDisplayString","_withCtx","_Fragment","_renderList","_normalizeClass","applyOptions","resolveIcon"],"mappings":";;;;;AAqCA,MAAA,YAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,EAAA,QAAEC,GAAAA,4BAAQC,GAAAA,8BAAoBC,GAAAA,UAAA,SAAUC,GAAAA,SAAA,aAASC,GAAAA,8BAAaC,mBAAA;AAAA,EAC1E,OAAOC,GAAAA;AAAAA,EACP,OAAO;AAAA,IACL,YAAY,EAAE,MAAM,QAAQ,SAAS,OAAA;AAAA;AAAA,IAErC,UAAU,EAAE,MAAM,OAA6B,SAAS,MAAM,CAAC,OAAO,UAAU,UAAU,MAAM,OAAO,EAAA;AAAA,IACvG,SAAS,EAAE,MAAM,QAAQ,SAAS,EAAA;AAAA,IAClC,QAAQ,EAAE,MAAM,CAAC,QAAQ,MAAM,GAAG,SAAS,IAAA;AAAA,IAC3C,OAAO,EAAE,MAAM,QAAQ,SAAS,IAAA;AAAA,IAChC,aAAa,EAAE,MAAM,QAAQ,SAAS,gBAAA;AAAA,EAAgB;AAAA,EAExD,OAAO,CAAC,mBAAmB;AAAA,EAC3B,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,QAAQC,GAAAA,gBAAoC,OAAO,IAAI;AAC7D,UAAM,QAAQC,IAAAA,IAAI,MAAM;AACxB,UAAM,SAASA,IAAAA,IAAI,KAAK;AACxB,UAAM,UAAUA,IAAAA,IAAc,EAAE;AAChC,UAAM,UAAUA,IAAAA,IAAI,KAAK;AACzB,UAAM,QAAQA,IAAAA,IAAI,EAAE;AACpB,UAAM,cAAcC,IAAAA,SAAS,MAAM,CAAC,EAAE,OAAO,YAAY,OAAO,MAAA,GAAS,GAAG,MAAM,SAAS,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,CAAC,CAAC;AAChI,QAAI,MAAM;AACV,UAAM,SAASC,KAAAA,SAAS,YAAY;AAClC,YAAM,KAAK,MAAM,SAAS,IAAI,KAAA;AAC9B,YAAM,MAAMC,UAAO,MAAM;AACzB,UAAI,CAAC,KAAK,CAAC,IAAK,QAAQ,QAAQ,QAAQ,CAAA;AACxC,YAAM,KAAK,EAAE;AACb,cAAQ,QAAQ;AAChB,YAAM,QAAQ;AACd,UAAI;AACF,cAAM,OAAO,OAAO,UAAU,QAAQ,MAAM,SAAS,KAAK,GAAG,IAAI,OAAO;AACxE,cAAM,MAAM,MAAM,MAAM,GAAG,GAAG,iBAAiB,mBAAmB,CAAC,CAAC,UAAU,MAAM,KAAK,aAAa,mBAAmB,IAAI,CAAC,EAAE;AAChI,cAAM,OAAQ,MAAM,IAAI,KAAA;AACxB,YAAI,OAAO,IAAK,SAAQ,QAAQ,KAAK,SAAS,CAAA;AAAA,MAChD,QAAQ;AACN,YAAI,OAAO,IAAK,OAAM,QAAQ;AAAA,MAChC,UAAA;AACE,YAAI,OAAO,IAAK,SAAQ,QAAQ;AAAA,MAClC;AAAA,IACF,GAAG,GAAG;AACNC,QAAAA,MAAM,CAAC,OAAO,MAAM,GAAG,MAAM,QAAQ;AACrCC,QAAAA,UAAU,MAAM,QAAQ;AACxB,UAAM,OAAOJ,IAAAA,SAAS,MAAM;AAC1B,YAAM,MAAkB,CAAA;AACxB,eAAS,IAAI,GAAG,IAAI,QAAQ,MAAM,QAAQ,KAAK,MAAM,QAAS,KAAI,KAAK,QAAQ,MAAM,MAAM,GAAG,IAAI,MAAM,OAAO,CAAC;AAChH,aAAO;AAAA,IACT,CAAC;AACD,WAAO,EAAE,OAAO,OAAO,QAAQ,aAAa,SAAS,MAAM,SAAS,MAAA;AAAA,EACtE;AACF,CAAC;;;;;;;;;EAtFM,OAAM;AAAA,EAA6B,OAAO,EAAA,UAAA,uBAAA,WAAA,4BAAA,WAAA,oBAAA,WAAA,MAAA;;AAExC,MAAA,aAAA,EAAA,OAAM,sBAAA;;;EAIS,OAAM;;;;EACH,OAAM;;;;EACI,OAAM;;AAG9B,MAAA,aAAA,EAAA,OAAM,sBAAA;;;;EAeG,OAAM;;;;;;;;;AA1B1B,SAAAK,cAAA,GAAAC,uBA2BM,OA3BN,YA2BM;AAAA,IA1BJC,IAAAA,YAAW,kBAAA;AAAA,IACXC,IAAAA,mBAGM,OAHN,YAGM;AAAA,MAFJD,IAAAA,YAA+H,wBAAA;AAAA,QAAA,YAAzG,KAAA;AAAA,QAAA,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAA,KAAA,QAAK;AAAA,QAAG,aAAa,KAAA;AAAA,QAAa,sBAAmB;AAAA,QAAS,SAAQ;AAAA,QAAU,gBAAA;AAAA,QAAa,WAAA;AAAA,MAAA,GAAA,MAAA,GAAA,CAAA,cAAA,aAAA,CAAA;AAAA,MACnG,KAAA,SAAS,SAAM,sBAA/BE,IAAAA,YAA2I,qBAAA;AAAA,QAAA,KAAA;AAAA,QAA7F,YAAA,KAAA;AAAA,QAAA,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAA,KAAA,SAAM;AAAA,QAAG,OAAO,KAAA;AAAA,QAAa,SAAQ;AAAA,QAAU,gBAAA;AAAA,QAAa,OAAM;AAAA,MAAA,GAAA,MAAA,GAAA,CAAA,cAAA,OAAA,CAAA,KAAAC,IAAAA,mBAAA,QAAA,IAAA;AAAA;IAEvG,KAAA,WAAAL,IAAAA,UAAA,GAAXC,IAAAA,mBAAkH,OAAlH,YAAkH;AAAA,MAAhEC,IAAAA,YAA0D,+BAAA;AAAA,QAAtC,eAAA;AAAA,QAAe,MAAM;AAAA,QAAK,OAAO;AAAA,MAAA,CAAA;AAAA,UACvF,KAAA,SAAAF,IAAAA,UAAA,GAAhBC,IAAAA;AAAAA,MAAsE;AAAA,MAAtE;AAAA,MAAsEK,IAAAA,gBAAd,KAAA,KAAK;AAAA,MAAA;AAAA;AAAA,IAAA,KAAA,CAC5C,aAAQ,UAAAN,IAAAA,UAAA,GAAzBC,IAAAA;AAAAA,MAA6I;AAAA,MAA7I;AAAA,MAA6IK,IAAAA,gBAA3E,KAAA,QAAK,mBAAA,uCAAA;AAAA,MAAA;AAAA;AAAA,IAAA,MAAAN,IAAAA,UAAA,GACvEI,IAAAA,YAgBkB,4BAAA;AAAA,MAAA,KAAA;AAAA,MAhBO,OAAO,KAAA;AAAA,MAAO,eAAa;AAAA,MAAK,QAAQ,KAAA;AAAA,IAAA,GAAA;AAAA,MACpD,SAAOG,IAAAA,QAChB,CAYM,EAbc,WAAI;AAAA,QACxBJ,IAAAA,mBAYM,OAZN,YAYM;AAAA,WAAAH,IAAAA,UAAA,IAAA,GAXJC,IAAAA;AAAAA,YAU6CO,IAAAA;AAAAA,YAAA;AAAA,YAAAC,eAT5B,MAAI,CAAZ,SAAI;sCADbR,IAAAA,mBAU6C,UAAA;AAAA,gBAR1C,KAAK;AAAA,gBACN,MAAK;AAAA,gBACL,OAAKS,IAAAA,eAAA,CAAC,oCAAkC,EAAA,gCACE,SAAS,KAAA,MAAA,CAAK,CAAA;AAAA,gBACvD,OAAO;AAAA,gBACP,cAAY;AAAA,gBACZ,gBAAc,SAAS,KAAA,QAAK,SAAA;AAAA,gBAC5B,SAAK,YAAE,KAAA,QAAQ;AAAA,cAAA,GAAA;AAAA,gBACjBR,IAAAA,YAAmC,mBAAA;AAAA,kBAA1B,MAAM;AAAA,kBAAM,MAAK;AAAA,gBAAA,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA;AAAA;;;;;;;;;;IAItB,KAAA,SAAAF,IAAAA,UAAA,GAAXC,IAAAA,mBAAqH,OAArH,YAAqH;AAAA,MAAlEC,IAAAA,YAAoC,mBAAA;AAAA,QAA3B,MAAM,KAAA;AAAA,QAAO,MAAK;AAAA,MAAA,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA;AAAA,MAASC,IAAAA;AAAAA,QAAwB;AAAA,QAAA;AAAA,QAAAG,IAAAA,gBAAf,KAAA,KAAK;AAAA,QAAA;AAAA;AAAA,MAAA;AAAA,IAAA,CAAA,KAAAD,IAAAA,mBAAA,QAAA,IAAA;AAAA;;;ACvBlG,MAAM,iBAAiB,CAAC,cAAc;AAGtC,MAAM,eAAe;AAAA,EAC1B,KAAK,EAAE,MAAM,oBAAoB,MAAM,uBAAuB,UAAU,mBAAmB,MAAM,oBAAoB,OAAO,qBAAqB,MAAM,oBAAoB,OAAO,yBAAyB,MAAM,qBAAqB,QAAQ,aAAA;AAAA,EAC9O,QAAQ,EAAE,MAAM,eAAe,MAAM,eAAe,UAAU,mBAAmB,MAAM,eAAe,OAAO,gBAAgB,MAAM,wBAAwB,OAAO,sBAAsB,MAAM,eAAe,QAAQ,gBAAA;AACvN;AAGO,SAAS,cAAc,MAAiC;AAC7DM,kBAAa,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,aAAa,IAAI,EAAA,EAAE,GAAK;AAChE;AAGO,SAAS,aAAa,OAAiB;AAC5C,QAAM,QAAQ,CAAC,MAAMC,GAAAA,YAAY,CAAC,CAAC;AACrC;;;;;;;;;;;;;;"}