@talex-touch/tuffex 0.3.3

package/dist/lib/icon/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const withInstall = require('../utils/withInstall.js');
+const TxIcon$1 = require('./src/TxIcon.vue.js');
+const TxStatusIcon$1 = require('./src/TxStatusIcon.vue.js');
+
+const TxStatusIcon = withInstall.withInstall(TxStatusIcon$1.default);
+TxIcon$1.default.install = (app) => {
+  app.component("TuffIcon", TxIcon$1.default);
+  app.component("TxIcon", TxIcon$1.default);
+  app.component("TxStatusIcon", TxStatusIcon);
+};
+const TxIcon = TxIcon$1.default;
+
+exports.TuffIcon = TxIcon$1.default;
+exports.default = TxIcon$1.default;
+exports.TxIcon = TxIcon;
+exports.TxStatusIcon = TxStatusIcon;

package/dist/lib/icon/src/TxIcon.vue.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TxIcon_vue_vue_type_script_setup_true_lang = require('./TxIcon.vue2.js');
+;/* empty css             */
+const _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const TuffIcon = /* @__PURE__ */ _pluginVue_exportHelper.default(TxIcon_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-c9011f35"]]);
+
+exports.default = TuffIcon;

package/dist/lib/icon/src/TxIcon.vue2.js

@@ -0,0 +1,214 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const types = require('./types.js');
+
+const _hoisted_1 = ["title", "data-icon-type", "data-icon-value"];
+const _hoisted_2 = {
+  key: 0,
+  class: "tuff-icon__empty"
+};
+const _hoisted_3 = ["alt", "src"];
+const _hoisted_4 = {
+  key: 1,
+  class: "tuff-icon__error"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "tuff-icon__loading"
+};
+const _hoisted_6 = {
+  key: 3,
+  class: "tuff-icon__emoji"
+};
+const _hoisted_7 = {
+  key: 4,
+  class: "tuff-icon__class"
+};
+const _hoisted_8 = {
+  key: 5,
+  class: "tuff-icon__builtin"
+};
+const _hoisted_9 = ["viewBox"];
+const _hoisted_10 = ["d"];
+const _hoisted_11 = ["alt", "src"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TuffIcon"
+  },
+  __name: "TxIcon",
+  props: {
+    icon: { default: null },
+    name: { default: "" },
+    alt: { default: "" },
+    size: { default: void 0 },
+    empty: { default: "" },
+    colorful: { type: Boolean, default: false },
+    urlResolver: { default: void 0 },
+    svgFetcher: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const injectedConfig = vue.inject(types.TX_ICON_CONFIG_KEY, {});
+    const urlResolver = vue.computed(() => props.urlResolver ?? injectedConfig.urlResolver);
+    const svgFetcher = vue.computed(() => props.svgFetcher ?? injectedConfig.svgFetcher);
+    const fileProtocol = vue.computed(() => injectedConfig.fileProtocol ?? "");
+    const builtinIcons = {
+      "chevron-down": {
+        viewBox: "0 0 24 24",
+        path: "M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"
+      },
+      "close": {
+        viewBox: "0 0 24 24",
+        path: "M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.954.95-1.414-1.414 4.95-4.95-4.95-4.95 1.414-1.414z"
+      },
+      "search": {
+        viewBox: "0 0 24 24",
+        path: "M10 2a8 8 0 105.293 14.293l4.7074.707 1.414-1.414-4.707-4.707A8 8 0 0010 2zm0 2a6 6 0 11012 6 6 0 010-12z"
+      },
+      "user": {
+        viewBox: "0 0 24 24",
+        path: "M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z"
+      },
+      "star": {
+        viewBox: "0 0 24 24",
+        path: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 29.19 8.6229.24l5.46 4.73L5.82 21z"
+      },
+      "star-half": {
+        viewBox: "0 0 24 24",
+        path: "M12 2l2.19 6.62 7.81.62-5.9 4.73 1.82 7.03L12 17.77V2z"
+      }
+    };
+    const safeIcon = vue.computed(() => {
+      if (props.icon)
+        return props.icon;
+      const name = (props.name ?? "").trim();
+      if (!name)
+        return { type: "emoji", value: "" };
+      if (name.startsWith("i-"))
+        return { type: "class", value: name };
+      if (name in builtinIcons)
+        return { type: "builtin", value: name };
+      return { type: "class", value: name };
+    });
+    const isLoading = vue.computed(() => safeIcon.value.status === "loading");
+    const isError = vue.computed(() => safeIcon.value.status === "error");
+    const isAddressable = vue.computed(() => safeIcon.value.type === "url" || safeIcon.value.type === "file");
+    const resolvedUrl = vue.computed(() => {
+      const icon = safeIcon.value;
+      const rawValue = icon.value;
+      if (!isAddressable.value || !rawValue)
+        return rawValue;
+      if (urlResolver.value) {
+        return urlResolver.value(rawValue, icon.type);
+      }
+      if (icon.type === "file" && fileProtocol.value) {
+        return `${fileProtocol.value}${rawValue}`;
+      }
+      if (icon.type === "url" && rawValue.startsWith("/") && !rawValue.startsWith("/api/") && fileProtocol.value) {
+        return `${fileProtocol.value}${rawValue}`;
+      }
+      return rawValue;
+    });
+    const isSvg = vue.computed(() => {
+      const v = resolvedUrl.value;
+      return typeof v === "string" && v.toLowerCase().endsWith(".svg");
+    });
+    const shouldUseMask = vue.computed(() => isSvg.value && !props.colorful);
+    const builtin = vue.computed(() => {
+      if (safeIcon.value.type !== "builtin")
+        return null;
+      return builtinIcons[safeIcon.value.value] ?? null;
+    });
+    const svgContent = vue.ref("");
+    const svgDataUrl = vue.computed(() => {
+      return `data:image/svg+xml;utf8,${encodeURIComponent(svgContent.value ?? "")}`;
+    });
+    async function fetchSvg(url) {
+      try {
+        let content;
+        if (svgFetcher.value) {
+          content = await svgFetcher.value(url);
+        } else {
+          const res = await fetch(url);
+          if (!res.ok) {
+            svgContent.value = "";
+            return;
+          }
+          content = await res.text();
+        }
+        svgContent.value = content;
+      } catch {
+        svgContent.value = "";
+      }
+    }
+    vue.watch(
+      () => ({ url: resolvedUrl.value, shouldUseMask: shouldUseMask.value, type: safeIcon.value.type }),
+      (v) => {
+        if (isAddressable.value && v.shouldUseMask && v.url) {
+          fetchSvg(v.url);
+          return;
+        }
+        svgContent.value = "";
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("span", {
+        class: "tuff-icon",
+        title: __props.alt,
+        role: "img",
+        "data-icon-type": safeIcon.value.type,
+        "data-icon-value": safeIcon.value.value,
+        style: vue.normalizeStyle({ fontSize: __props.size ? `${__props.size}px` : void 0 })
+      }, [
+        !safeIcon.value.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+            __props.empty ? (vue.openBlock(), vue.createElementBlock("img", {
+              key: 0,
+              alt: __props.alt,
+              src: __props.empty
+            }, null, 8, _hoisted_3)) : vue.createCommentVNode("", true)
+          ], true)
+        ])) : isError.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [..._cache[0] || (_cache[0] = [
+          vue.createElementVNode("i", { class: "i-ri-image-line" }, null, -1)
+        ])])) : isLoading.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, [..._cache[1] || (_cache[1] = [
+          vue.createElementVNode("span", { class: "tuff-icon__loading-skeleton" }, [
+            vue.createElementVNode("span", { class: "tuff-icon__loading-shimmer" })
+          ], -1)
+        ])])) : safeIcon.value.type === "emoji" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, vue.toDisplayString(safeIcon.value.value || "⚠️"), 1)) : safeIcon.value.type === "class" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, [
+          vue.createElementVNode("i", {
+            class: vue.normalizeClass(safeIcon.value.value)
+          }, null, 2)
+        ])) : safeIcon.value.type === "builtin" && builtin.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, [
+          (vue.openBlock(), vue.createElementBlock("svg", {
+            viewBox: builtin.value.viewBox,
+            width: "1em",
+            height: "1em",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, [
+            vue.createElementVNode("path", {
+              d: builtin.value.path,
+              fill: "currentColor"
+            }, null, 8, _hoisted_10)
+          ], 8, _hoisted_9))
+        ])) : isAddressable.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 6 }, [
+          shouldUseMask.value && svgContent.value ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            class: "tuff-icon__svg-mask",
+            style: vue.normalizeStyle({ WebkitMaskImage: `url('${svgDataUrl.value}')`, maskImage: `url('${svgDataUrl.value}')` })
+          }, null, 4)) : (vue.openBlock(), vue.createElementBlock("img", {
+            key: 1,
+            alt: __props.alt,
+            src: resolvedUrl.value
+          }, null, 8, _hoisted_11))
+        ], 64)) : vue.createCommentVNode("", true)
+      ], 12, _hoisted_1);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/icon/src/TxStatusIcon.vue.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TxStatusIcon_vue_vue_type_script_setup_true_lang = require('./TxStatusIcon.vue2.js');
+;/* empty css                   */
+const _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const TxStatusIconComponent = /* @__PURE__ */ _pluginVue_exportHelper.default(TxStatusIcon_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-563daa0b"]]);
+
+exports.default = TxStatusIconComponent;

package/dist/lib/icon/src/TxStatusIcon.vue2.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const TxIcon = require('./TxIcon.vue.js');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "TxStatusIcon" },
+  __name: "TxStatusIcon",
+  props: {
+    icon: { default: null },
+    name: { default: "" },
+    alt: { default: "" },
+    size: { default: 18 },
+    empty: { default: "" },
+    colorful: { type: Boolean, default: true },
+    tone: { default: "none" },
+    indicatorSize: { default: void 0 },
+    indicatorOffset: { default: 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const indicatorSize = vue.computed(() => {
+      if (typeof props.indicatorSize === "number" && props.indicatorSize > 0)
+        return props.indicatorSize;
+      const base = Math.round((props.size ?? 18) * 0.32);
+      return Math.max(6, Math.min(12, base));
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("span", {
+        class: "tx-status-icon",
+        style: vue.normalizeStyle({
+          "--tx-status-icon-size": `${__props.size}px`,
+          "--tx-status-indicator-size": `${indicatorSize.value}px`,
+          "--tx-status-indicator-offset": `${__props.indicatorOffset}px`
+        })
+      }, [
+        vue.createVNode(TxIcon.default, {
+          class: "tx-status-icon__icon",
+          icon: __props.icon,
+          name: __props.name,
+          alt: __props.alt,
+          size: __props.size,
+          empty: __props.empty,
+          colorful: __props.colorful
+        }, null, 8, ["icon", "name", "alt", "size", "empty", "colorful"]),
+        __props.tone !== "none" ? (vue.openBlock(), vue.createElementBlock("span", {
+          key: 0,
+          class: vue.normalizeClass(["tx-status-icon__indicator", `is-${__props.tone}`]),
+          "aria-hidden": "true"
+        }, null, 2)) : vue.createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/icon/src/types.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const TX_ICON_CONFIG_KEY = Symbol("tx-icon-config");
+
+exports.TX_ICON_CONFIG_KEY = TX_ICON_CONFIG_KEY;

package/dist/lib/image-gallery/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const withInstall = require('../utils/withInstall.js');
+const TxImageGallery = require('./src/TxImageGallery.vue.js');
+
+const ImageGallery = withInstall.withInstall(TxImageGallery.default);
+
+exports.TxImageGallery = TxImageGallery.default;
+exports.ImageGallery = ImageGallery;
+exports.default = ImageGallery;

package/dist/lib/image-gallery/src/TxImageGallery.vue.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TxImageGallery_vue_vue_type_script_setup_true_lang = require('./TxImageGallery.vue2.js');
+;/* empty css                     */
+const _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const TxImageGallery = /* @__PURE__ */ _pluginVue_exportHelper.default(TxImageGallery_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-fecf32bb"]]);
+
+exports.default = TxImageGallery;

package/dist/lib/image-gallery/src/TxImageGallery.vue2.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const TxModal = require('../../modal/src/TxModal.vue.js');
+
+const _hoisted_1 = { class: "tx-image-gallery" };
+const _hoisted_2 = { class: "tx-image-gallery__grid" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = ["src", "alt"];
+const _hoisted_5 = {
+  key: 0,
+  class: "tx-image-gallery__viewer"
+};
+const _hoisted_6 = ["src", "alt"];
+const _hoisted_7 = { class: "tx-image-gallery__footer" };
+const _hoisted_8 = ["disabled"];
+const _hoisted_9 = { class: "tx-image-gallery__count" };
+const _hoisted_10 = ["disabled"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TxImageGallery"
+  },
+  __name: "TxImageGallery",
+  props: {
+    items: {},
+    startIndex: { default: 0 }
+  },
+  emits: ["open", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = vue.ref(false);
+    const index = vue.ref(0);
+    const list = vue.computed(() => props.items ?? []);
+    vue.watch(
+      () => props.startIndex,
+      (v) => {
+        index.value = Math.min(Math.max(0, v ?? 0), Math.max(0, list.value.length - 1));
+      },
+      { immediate: true }
+    );
+    const current = vue.computed(() => {
+      return list.value[index.value] ?? null;
+    });
+    function openAt(i) {
+      index.value = Math.min(Math.max(0, i), Math.max(0, list.value.length - 1));
+      visible.value = true;
+      const item = list.value[index.value];
+      if (item)
+        emit("open", { index: index.value, item });
+    }
+    function close() {
+      visible.value = false;
+      emit("close");
+    }
+    function prev() {
+      if (index.value > 0)
+        index.value -= 1;
+    }
+    function next() {
+      if (index.value < list.value.length - 1)
+        index.value += 1;
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (item, i) => {
+            return vue.openBlock(), vue.createElementBlock("button", {
+              key: item.id,
+              type: "button",
+              class: "tx-image-gallery__thumb",
+              onClick: ($event) => openAt(i)
+            }, [
+              vue.createElementVNode("img", {
+                src: item.url,
+                alt: item.name || "",
+                loading: "lazy"
+              }, null, 8, _hoisted_4)
+            ], 8, _hoisted_3);
+          }), 128))
+        ]),
+        vue.createVNode(TxModal.default, {
+          modelValue: visible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+          title: current.value?.name || "Preview",
+          width: "min(92vw, 880px)",
+          onClose: close
+        }, {
+          footer: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_7, [
+              vue.createElementVNode("button", {
+                type: "button",
+                class: "tx-image-gallery__nav",
+                disabled: index.value <= 0,
+                onClick: prev
+              }, " Prev ", 8, _hoisted_8),
+              vue.createElementVNode("div", _hoisted_9, vue.toDisplayString(index.value + 1) + " / " + vue.toDisplayString(list.value.length), 1),
+              vue.createElementVNode("button", {
+                type: "button",
+                class: "tx-image-gallery__nav",
+                disabled: index.value >= list.value.length - 1,
+                onClick: next
+              }, " Next ", 8, _hoisted_10)
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            current.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+              vue.createElementVNode("img", {
+                src: current.value.url,
+                alt: current.value.name || ""
+              }, null, 8, _hoisted_6)
+            ])) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/image-uploader/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const withInstall = require('../utils/withInstall.js');
+const TxImageUploader = require('./src/TxImageUploader.vue.js');
+
+const ImageUploader = withInstall.withInstall(TxImageUploader.default);
+
+exports.TxImageUploader = TxImageUploader.default;
+exports.ImageUploader = ImageUploader;
+exports.default = ImageUploader;

package/dist/lib/image-uploader/src/TxImageUploader.vue.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TxImageUploader_vue_vue_type_script_setup_true_lang = require('./TxImageUploader.vue2.js');
+;/* empty css                      */
+const _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const TxImageUploader = /* @__PURE__ */ _pluginVue_exportHelper.default(TxImageUploader_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-1f977943"]]);
+
+exports.default = TxImageUploader;

package/dist/lib/image-uploader/src/TxImageUploader.vue2.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+
+const _hoisted_1 = ["multiple", "accept", "disabled"];
+const _hoisted_2 = { class: "tx-image-uploader__grid" };
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = ["src", "alt"];
+const _hoisted_5 = ["aria-label", "onClick"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TxImageUploader"
+  },
+  __name: "TxImageUploader",
+  props: {
+    modelValue: {},
+    multiple: { type: Boolean, default: true },
+    accept: { default: "image/*" },
+    disabled: { type: Boolean, default: false },
+    max: { default: 9 }
+  },
+  emits: ["update:modelValue", "change", "remove"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const inputRef = vue.ref(null);
+    const value = vue.computed(() => props.modelValue ?? []);
+    const objectUrls = /* @__PURE__ */ new Set();
+    function uid() {
+      return `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+    }
+    function sync(next) {
+      emit("update:modelValue", next);
+      emit("change", next);
+    }
+    function pick() {
+      if (props.disabled)
+        return;
+      inputRef.value?.click();
+    }
+    function onInputChange(e) {
+      const el = e.target;
+      const files = Array.from(el.files ?? []);
+      el.value = "";
+      if (!files.length)
+        return;
+      const remain = Math.max(0, (props.max ?? 9) - value.value.length);
+      const take = remain > 0 ? files.slice(0, remain) : [];
+      if (!take.length)
+        return;
+      const added = take.map((f) => {
+        const url = URL.createObjectURL(f);
+        objectUrls.add(url);
+        return {
+          id: uid(),
+          url,
+          name: f.name,
+          file: f
+        };
+      });
+      sync([...value.value, ...added]);
+    }
+    function remove(id) {
+      const cur = value.value;
+      const idx = cur.findIndex((i) => i.id === id);
+      if (idx < 0)
+        return;
+      const removed = cur[idx];
+      if (removed?.file && removed.url && objectUrls.has(removed.url)) {
+        URL.revokeObjectURL(removed.url);
+        objectUrls.delete(removed.url);
+      }
+      const next = cur.slice(0, idx).concat(cur.slice(idx + 1));
+      emit("update:modelValue", next);
+      emit("remove", { id, value: next });
+      emit("change", next);
+    }
+    vue.onBeforeUnmount(() => {
+      for (const url of objectUrls) {
+        URL.revokeObjectURL(url);
+      }
+      objectUrls.clear();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["tx-image-uploader", { "tx-image-uploader--disabled": __props.disabled }])
+      }, [
+        vue.createElementVNode("input", {
+          ref_key: "inputRef",
+          ref: inputRef,
+          class: "tx-image-uploader__input",
+          type: "file",
+          multiple: __props.multiple,
+          accept: __props.accept,
+          disabled: __props.disabled,
+          onChange: onInputChange
+        }, null, 40, _hoisted_1),
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createElementVNode("button", {
+            type: "button",
+            class: "tx-image-uploader__add",
+            disabled: __props.disabled || value.value.length >= (__props.max ?? 9),
+            onClick: pick
+          }, [..._cache[0] || (_cache[0] = [
+            vue.createElementVNode("i", {
+              class: "i-carbon-add",
+              "aria-hidden": "true"
+            }, null, -1),
+            vue.createElementVNode("span", { class: "tx-image-uploader__add-text" }, "Upload", -1)
+          ])], 8, _hoisted_3),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value.value, (item) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: item.id,
+              class: "tx-image-uploader__item"
+            }, [
+              vue.createElementVNode("img", {
+                src: item.url,
+                alt: item.name || "",
+                loading: "lazy"
+              }, null, 8, _hoisted_4),
+              vue.createElementVNode("button", {
+                type: "button",
+                class: "tx-image-uploader__remove",
+                "aria-label": `Remove ${item.name || "image"}`,
+                onClick: ($event) => remove(item.id)
+              }, [..._cache[1] || (_cache[1] = [
+                vue.createElementVNode("i", {
+                  class: "i-carbon-close",
+                  "aria-hidden": "true"
+                }, null, -1)
+              ])], 8, _hoisted_5)
+            ]);
+          }), 128))
+        ])
+      ], 2);
+    };
+  }
+});
+
+exports.default = _sfc_main;