@squirkle-ui/icons 0.0.0-stage → 0.1.1

package/dist/vue3/index.mjs

@@ -0,0 +1,204 @@
+import { vModel, SqVirtualScroll, SqTextField, SqShape, SqSelect, SqProgressCircular, SqIcon, useProxiedModel, config, resolveIcon, applyOptions } from "@squirkle-ui/ui";
+import { addCollection, addIcons } from "@squirkle-ui/ui";
+import { defineComponent, ref, computed, watch, onMounted, resolveComponent, openBlock, createElementBlock, createVNode, createElementVNode, createBlock, createCommentVNode, toDisplayString, withCtx, Fragment, renderList, normalizeClass } 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 () => {
+      const q = (query.value ?? "").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 = json.icons ?? [];
+      } 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 };
+  }
+});
+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 = resolveComponent("SqShape");
+  const _component_SqTextField = resolveComponent("SqTextField");
+  const _component_SqSelect = resolveComponent("SqSelect");
+  const _component_SqProgressCircular = resolveComponent("SqProgressCircular");
+  const _component_SqIcon = resolveComponent("SqIcon");
+  const _component_SqVirtualScroll = resolveComponent("SqVirtualScroll");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_SqShape),
+    createElementVNode("div", _hoisted_2, [
+      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 ? (openBlock(), 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"])) : createCommentVNode("v-if", true)
+    ]),
+    _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      createVNode(_component_SqProgressCircular, {
+        indeterminate: "",
+        size: 22,
+        width: 3
+      })
+    ])) : _ctx.error ? (openBlock(), createElementBlock(
+      "div",
+      _hoisted_4,
+      toDisplayString(_ctx.error),
+      1
+      /* TEXT */
+    )) : !_ctx.results.length ? (openBlock(), createElementBlock(
+      "div",
+      _hoisted_5,
+      toDisplayString(_ctx.query ? "No icons found" : "Type to search 200,000+ Iconify icons"),
+      1
+      /* TEXT */
+    )) : (openBlock(), createBlock(_component_SqVirtualScroll, {
+      key: 3,
+      items: _ctx.rows,
+      "item-height": 56,
+      height: _ctx.height
+    }, {
+      default: withCtx(({ item }) => [
+        createElementVNode("div", _hoisted_6, [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(item, (name) => {
+              return openBlock(), createElementBlock("button", {
+                key: name,
+                type: "button",
+                class: 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
+              }, [
+                createVNode(_component_SqIcon, {
+                  icon: name,
+                  size: "24px"
+                }, null, 8, ["icon"])
+              ], 10, _hoisted_7);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ])
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["items", "height"])),
+    _ctx.model ? (openBlock(), createElementBlock("div", _hoisted_8, [
+      createVNode(_component_SqIcon, {
+        icon: _ctx.model,
+        size: "20px"
+      }, null, 8, ["icon"]),
+      createElementVNode(
+        "code",
+        null,
+        toDisplayString(_ctx.model),
+        1
+        /* TEXT */
+      )
+    ])) : 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) {
+  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/vue3/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":["_openBlock","_createElementBlock","_createVNode","_createElementVNode","_createBlock","_createCommentVNode","_toDisplayString","_withCtx","_Fragment","_renderList","_normalizeClass"],"mappings":"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"}

package/dist/vue3/styles.css

@@ -0,0 +1,19 @@
+
+.sq-icon-picker { display: flex; flex-direction: column; gap: var(--sq-space-2); padding: var(--sq-space-3); width: 100%; max-width: 480px;
+}
+.sq-icon-picker__bar { display: flex; gap: var(--sq-space-2);
+}
+.sq-icon-picker__prefix { max-width: 140px;
+}
+.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);
+}
+.sq-icon-picker__row { display: flex; gap: 4px; height: 56px; padding: 4px 0;
+}
+.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;
+}
+.sq-icon-picker__cell:hover { background: color-mix(in srgb, var(--sq-primary) 10%, transparent); color: var(--sq-primary);
+}
+.sq-icon-picker__cell--active { background: var(--sq-primary) !important; color: var(--sq-on-primary) !important;
+}
+.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);
+}

package/package.json

@@ -1,6 +1,63 @@
 {
   "name": "@squirkle-ui/icons",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Iconify integration and icon browser for Squirkle UI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KheangLov/squirkle-ui.git",
+    "directory": "packages/icons"
+  },
+  "homepage": "https://github.com/KheangLov/squirkle-ui#readme",
+  "bugs": {
+    "url": "https://github.com/KheangLov/squirkle-ui/issues"
+  },
+  "keywords": [
+    "vue",
+    "icons",
+    "iconify",
+    "icon-picker"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue3/index.cjs",
+  "module": "./dist/vue3/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/vue3/index.mjs",
+      "require": "./dist/vue3/index.cjs"
+    },
+    "./vue2": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/vue2/index.mjs",
+      "require": "./dist/vue2/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./dist/types/*": {
+      "types": "./dist/types/*.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0 || ^3.3.0",
+    "@squirkle-ui/ui": "^0.1.1"
+  },
+  "dependencies": {
+    "@squirkle-ui/core": "^0.1.1"
+  },
+  "devDependencies": {
+    "@squirkle-ui/ui": "^0.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build.mjs icons"
+  }
 }