@talex-touch/tuffex 0.3.3

package/dist/lib/select/src/TxSelect.vue2.js

@@ -0,0 +1,297 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const vue$1 = require('@floating-ui/vue');
+const TxCard = require('../../card/src/TxCard.vue.js');
+const TxInput = require('../../input/src/TxInput.vue.js');
+const TxSearchInput = require('../../search-input/src/TxSearchInput.vue.js');
+
+const _hoisted_1 = {
+  key: 0,
+  class: "tuff-select__search"
+};
+const _hoisted_2 = { class: "tuff-select__list" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TuffSelect"
+  },
+  __name: "TxSelect",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "请选择" },
+    disabled: { type: Boolean, default: false },
+    searchable: { type: Boolean, default: false },
+    searchPlaceholder: { default: "Search" },
+    editable: { type: Boolean, default: false },
+    remote: { type: Boolean, default: false },
+    dropdownMaxHeight: { default: 280 },
+    dropdownOffset: { default: 6 }
+  },
+  emits: ["update:modelValue", "change", "search"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isOpen = vue.ref(false);
+    const selectRef = vue.ref(null);
+    const selectedLabel = vue.ref("");
+    const searchInputRef = vue.ref(null);
+    const searchQuery = vue.ref("");
+    const triggerInputRef = vue.ref(null);
+    const isEditable = vue.computed(() => props.editable || props.remote);
+    const triggerText = vue.computed({
+      get: () => isEditable.value ? searchQuery.value : selectedLabel.value,
+      set: (v) => {
+        if (!isEditable.value)
+          return;
+        searchQuery.value = v;
+        if (props.remote)
+          emit("search", v);
+      }
+    });
+    const dropdownRef = vue.ref(null);
+    const cleanupAutoUpdate = vue.ref(null);
+    const optionLabelMap = vue.ref(/* @__PURE__ */ new Map());
+    const { floatingStyles, update } = vue$1.useFloating(selectRef, dropdownRef, {
+      placement: "bottom-start",
+      strategy: "fixed",
+      middleware: [
+        vue$1.offset(() => props.dropdownOffset),
+        vue$1.flip({ padding: 8 }),
+        vue$1.shift({ padding: 8 }),
+        vue$1.size({
+          padding: 8,
+          apply({ rects, availableHeight, elements }) {
+            const h = Math.min(availableHeight, props.dropdownMaxHeight);
+            Object.assign(elements.floating.style, {
+              minWidth: `${rects.reference.width}px`,
+              maxWidth: `${rects.reference.width}px`,
+              height: `${h}px`,
+              maxHeight: `${h}px`,
+              overflow: "hidden"
+            });
+          }
+        })
+      ]
+    });
+    const currentValue = vue.computed({
+      get: () => props.modelValue,
+      set: (val) => {
+        emit("update:modelValue", val);
+        emit("change", val);
+      }
+    });
+    function toggle() {
+      if (props.disabled)
+        return;
+      isOpen.value = !isOpen.value;
+    }
+    function close() {
+      isOpen.value = false;
+    }
+    function clear() {
+      currentValue.value = "";
+      selectedLabel.value = "";
+    }
+    function handleSelect(value, label) {
+      currentValue.value = value;
+      selectedLabel.value = label;
+      if (isEditable.value)
+        searchQuery.value = label;
+      close();
+    }
+    function registerOption(value, label) {
+      optionLabelMap.value.set(value, label);
+      if (currentValue.value === value && !selectedLabel.value) {
+        selectedLabel.value = label;
+      }
+    }
+    function handleClickOutside(event) {
+      if (!isOpen.value)
+        return;
+      const target = event.target;
+      const inReference = !!selectRef.value && !!target && selectRef.value.contains(target);
+      const inFloating = !!dropdownRef.value && !!target && dropdownRef.value.contains(target);
+      if (!inReference && !inFloating)
+        close();
+    }
+    function handleEsc(event) {
+      if (event.key !== "Escape")
+        return;
+      if (!isOpen.value)
+        return;
+      close();
+    }
+    async function updatePosition() {
+      await update();
+    }
+    function scrollSelectedIntoView() {
+      if (!dropdownRef.value)
+        return;
+      const el = dropdownRef.value.querySelector(".tuff-select-item.is-selected");
+      if (!el)
+        return;
+      requestAnimationFrame(() => {
+        el.scrollIntoView({ block: "nearest" });
+      });
+    }
+    vue.provide("tuffSelect", {
+      currentValue,
+      handleSelect,
+      registerOption,
+      searchQuery: vue.computed(() => props.remote ? "" : searchQuery.value)
+    });
+    __expose({
+      open: () => isOpen.value = true,
+      close,
+      toggle,
+      focus: () => triggerInputRef.value?.focus?.(),
+      blur: () => triggerInputRef.value?.blur?.(),
+      clear
+    });
+    vue.onMounted(() => {
+      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("keydown", handleEsc);
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleEsc);
+    });
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        currentValue.value = val;
+        const label = optionLabelMap.value.get(val);
+        if (label)
+          selectedLabel.value = label;
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      isOpen,
+      async (open) => {
+        if (!open) {
+          cleanupAutoUpdate.value?.();
+          cleanupAutoUpdate.value = null;
+          if (isEditable.value)
+            searchQuery.value = selectedLabel.value;
+          else
+            searchQuery.value = "";
+          return;
+        }
+        await vue.nextTick();
+        await updatePosition();
+        if (selectRef.value && dropdownRef.value) {
+          cleanupAutoUpdate.value?.();
+          cleanupAutoUpdate.value = vue$1.autoUpdate(selectRef.value, dropdownRef.value, () => updatePosition());
+        }
+        if (props.searchable)
+          searchInputRef.value?.focus?.();
+        if (isEditable.value)
+          triggerInputRef.value?.focus?.();
+        await vue.nextTick();
+        scrollSelectedIntoView();
+      },
+      { flush: "post" }
+    );
+    vue.watch(
+      searchQuery,
+      (v) => {
+        if (props.remote && isOpen.value)
+          emit("search", v);
+      },
+      { flush: "post" }
+    );
+    vue.onBeforeUnmount(() => {
+      cleanupAutoUpdate.value?.();
+      cleanupAutoUpdate.value = null;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "selectRef",
+        ref: selectRef,
+        class: vue.normalizeClass(["tuff-select", [
+          {
+            "is-open": isOpen.value,
+            "is-disabled": __props.disabled
+          }
+        ]])
+      }, [
+        vue.createElementVNode("div", {
+          class: "tuff-select__trigger",
+          onClick: _cache[2] || (_cache[2] = ($event) => !isEditable.value && toggle())
+        }, [
+          vue.createVNode(TxInput.default, {
+            ref_key: "triggerInputRef",
+            ref: triggerInputRef,
+            modelValue: triggerText.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => triggerText.value = $event),
+            placeholder: __props.placeholder,
+            readonly: !isEditable.value,
+            disabled: __props.disabled,
+            onFocus: _cache[1] || (_cache[1] = ($event) => !__props.disabled && (isOpen.value = true))
+          }, {
+            suffix: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+              vue.createElementVNode("span", { class: "tuff-select__arrow" }, [
+                vue.createElementVNode("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "16",
+                  height: "16"
+                }, [
+                  vue.createElementVNode("path", {
+                    fill: "currentColor",
+                    d: "M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"
+                  })
+                ])
+              ], -1)
+            ])]),
+            _: 1
+          }, 8, ["modelValue", "placeholder", "readonly", "disabled"])
+        ]),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+          vue.createVNode(vue.Transition, { name: "tuff-select-dropdown" }, {
+            default: vue.withCtx(() => [
+              vue.withDirectives(vue.createElementVNode("div", {
+                ref_key: "dropdownRef",
+                ref: dropdownRef,
+                class: "tuff-select__dropdown",
+                style: vue.normalizeStyle(vue.unref(floatingStyles))
+              }, [
+                vue.createVNode(TxCard.default, {
+                  class: "tuff-select__panel",
+                  variant: "solid",
+                  background: "glass",
+                  shadow: "soft",
+                  radius: 18,
+                  padding: 4
+                }, {
+                  default: vue.withCtx(() => [
+                    __props.searchable && !isEditable.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+                      vue.createVNode(TxSearchInput.default, {
+                        ref_key: "searchInputRef",
+                        ref: searchInputRef,
+                        modelValue: searchQuery.value,
+                        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => searchQuery.value = $event),
+                        placeholder: __props.searchPlaceholder
+                      }, null, 8, ["modelValue", "placeholder"])
+                    ])) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("div", _hoisted_2, [
+                      vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                    ])
+                  ]),
+                  _: 3
+                })
+              ], 4), [
+                [vue.vShow, isOpen.value]
+              ])
+            ]),
+            _: 3
+          })
+        ]))
+      ], 2);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/select/src/TxSelectItem.vue.js

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

package/dist/lib/select/src/TxSelectItem.vue2.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const TxCardItem = require('../../card-item/src/TxCardItem.vue.js');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TuffSelectItem"
+  },
+  __name: "TxSelectItem",
+  props: {
+    value: {},
+    label: {},
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const txSelect = vue.inject("tuffSelect");
+    vue.onMounted(() => {
+      const label = props.label || String(props.value);
+      txSelect?.registerOption?.(props.value, label);
+    });
+    const isSelected = vue.computed(() => {
+      return txSelect?.currentValue.value === props.value;
+    });
+    const visible = vue.computed(() => {
+      const q = (txSelect?.searchQuery?.value ?? "").trim().toLowerCase();
+      if (!q)
+        return true;
+      const label = (props.label || String(props.value)).toLowerCase();
+      return label.includes(q);
+    });
+    function handleClick() {
+      if (props.disabled)
+        return;
+      txSelect?.handleSelect(props.value, props.label || String(props.value));
+    }
+    return (_ctx, _cache) => {
+      return vue.withDirectives((vue.openBlock(), vue.createBlock(TxCardItem.default, {
+        class: vue.normalizeClass(["tuff-select-item", { "is-selected": isSelected.value, "is-disabled": __props.disabled }]),
+        clickable: !__props.disabled,
+        active: isSelected.value,
+        disabled: __props.disabled,
+        onClick: handleClick
+      }, {
+        title: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createTextVNode(vue.toDisplayString(__props.label || __props.value), 1)
+          ], true)
+        ]),
+        _: 3
+      }, 8, ["class", "clickable", "active", "disabled"])), [
+        [vue.vShow, visible.value]
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/skeleton/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const withInstall = require('../utils/withInstall.js');
+const TxCardSkeleton = require('./src/TxCardSkeleton.vue.js');
+const TxListItemSkeleton = require('./src/TxListItemSkeleton.vue.js');
+const TxSkeleton_vue_vue_type_script_setup_true_lang = require('./src/TxSkeleton.vue.js');
+;/* empty css                     */
+
+const Skeleton = withInstall.withInstall(TxSkeleton_vue_vue_type_script_setup_true_lang.default);
+const CardSkeleton = withInstall.withInstall(TxCardSkeleton.default);
+const ListItemSkeleton = withInstall.withInstall(TxListItemSkeleton.default);
+
+exports.TxCardSkeleton = TxCardSkeleton.default;
+exports.TxListItemSkeleton = TxListItemSkeleton.default;
+exports.TxSkeleton = TxSkeleton_vue_vue_type_script_setup_true_lang.default;
+exports.CardSkeleton = CardSkeleton;
+exports.ListItemSkeleton = ListItemSkeleton;
+exports.Skeleton = Skeleton;
+exports.default = Skeleton;

package/dist/lib/skeleton/src/TxCardSkeleton.vue.js

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

package/dist/lib/skeleton/src/TxCardSkeleton.vue2.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+
+const _hoisted_1 = { class: "tx-card-skeleton" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TxCardSkeleton"
+  },
+  __name: "TxCardSkeleton",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [..._cache[0] || (_cache[0] = [
+        vue.createStaticVNode('<div class="tx-card-skeleton__icon" data-v-c8dbeaf1></div><div class="tx-card-skeleton__content" data-v-c8dbeaf1><div class="tx-card-skeleton__header" data-v-c8dbeaf1><div class="tx-card-skeleton__title" data-v-c8dbeaf1></div><div class="tx-card-skeleton__badge" data-v-c8dbeaf1></div></div><div class="tx-card-skeleton__desc" data-v-c8dbeaf1></div></div>', 2)
+      ])]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/skeleton/src/TxListItemSkeleton.vue.js

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

package/dist/lib/skeleton/src/TxListItemSkeleton.vue2.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+
+const _hoisted_1 = { class: "tx-list-item-skeleton" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TxListItemSkeleton"
+  },
+  __name: "TxListItemSkeleton",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [..._cache[0] || (_cache[0] = [
+        vue.createStaticVNode('<div class="tx-list-item-skeleton__icon" data-v-415c1b35></div><div class="tx-list-item-skeleton__content" data-v-415c1b35><div class="tx-list-item-skeleton__name" data-v-415c1b35></div><div class="tx-list-item-skeleton__meta" data-v-415c1b35></div></div><div class="tx-list-item-skeleton__badge" data-v-415c1b35></div>', 3)
+      ])]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/skeleton/src/TxSkeleton.vue.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TxSkeleton"
+  },
+  __name: "TxSkeleton",
+  props: {
+    loading: { type: Boolean, default: true },
+    variant: { default: "text" },
+    width: { default: "100%" },
+    height: { default: 12 },
+    radius: { default: 8 },
+    lines: { default: 1 },
+    gap: { default: 10 }
+  },
+  setup(__props) {
+    const props = __props;
+    function toCssUnit(v) {
+      return typeof v === "number" ? `${v}px` : v;
+    }
+    const itemStyle = vue.computed(() => {
+      const height = props.variant === "text" ? toCssUnit(props.height) : toCssUnit(props.height);
+      const width = toCssUnit(props.width);
+      const radius = props.variant === "circle" ? "999px" : toCssUnit(props.radius);
+      return {
+        "--tx-skeleton-width": width,
+        "--tx-skeleton-height": height,
+        "--tx-skeleton-radius": radius
+      };
+    });
+    const rootStyle = vue.computed(() => {
+      return {
+        "--tx-skeleton-gap": toCssUnit(props.gap)
+      };
+    });
+    const linesArray = vue.computed(() => {
+      return Array.from({ length: Math.max(1, props.lines) });
+    });
+    return (_ctx, _cache) => {
+      return !__props.loading ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : (vue.openBlock(), vue.createElementBlock("div", {
+        key: 1,
+        class: "tx-skeleton",
+        style: vue.normalizeStyle(rootStyle.value)
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(linesArray.value, (_, i) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: i,
+            class: vue.normalizeClass(["tx-skeleton__item", [`tx-skeleton__item--${__props.variant}`]]),
+            style: vue.normalizeStyle(itemStyle.value)
+          }, null, 6);
+        }), 128))
+      ], 4));
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/skeleton/src/TxSkeleton.vue3.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TxSkeleton_vue_vue_type_script_setup_true_lang = require('./TxSkeleton.vue.js');
+;/* empty css                 */
+
+
+
+exports.default = TxSkeleton_vue_vue_type_script_setup_true_lang.default;

package/dist/lib/slider/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const withInstall = require('../utils/withInstall.js');
+const TxSlider_vue_vue_type_script_setup_true_lang = require('./src/TxSlider.vue.js');
+;/* empty css                   */
+
+const Slider = withInstall.withInstall(TxSlider_vue_vue_type_script_setup_true_lang.default);
+
+exports.TxSlider = TxSlider_vue_vue_type_script_setup_true_lang.default;
+exports.Slider = Slider;
+exports.default = Slider;