@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/lib/flat-select/src/TxFlatSelect.vue2.js

@@ -0,0 +1,212 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const types = require('./types.js');
+
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = ["aria-hidden"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "TxFlatSelect" },
+  __name: "TxFlatSelect",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isOpen = vue.ref(false);
+    const isAnimating = vue.ref(false);
+    const selectRef = vue.ref(null);
+    const dropdownRef = vue.ref(null);
+    const selectedLabel = vue.ref("");
+    const itemEntries = vue.ref([]);
+    function rebuildOrder() {
+      const root = dropdownRef.value;
+      if (!root) return;
+      const domItems = Array.from(root.querySelectorAll(".tx-flat-select-item"));
+      itemEntries.value.sort((a, b) => domItems.indexOf(a.el) - domItems.indexOf(b.el));
+    }
+    function registerItem(value, label, el) {
+      const idx = itemEntries.value.findIndex((e) => e.value === value);
+      if (idx >= 0) {
+        itemEntries.value[idx] = { value, label, el };
+      } else {
+        itemEntries.value.push({ value, label, el });
+      }
+      rebuildOrder();
+      if (props.modelValue === value && !selectedLabel.value) {
+        selectedLabel.value = label;
+      }
+    }
+    function unregisterItem(value) {
+      const idx = itemEntries.value.findIndex((e) => e.value === value);
+      if (idx >= 0) itemEntries.value.splice(idx, 1);
+    }
+    const currentValue = vue.computed({
+      get: () => props.modelValue,
+      set: (val) => {
+        emit("update:modelValue", val);
+        emit("change", val);
+      }
+    });
+    const displayText = vue.computed(() => selectedLabel.value || props.placeholder);
+    const dropdownTop = vue.ref("0px");
+    const dropdownClip = vue.ref("inset(50% 0 50% 0 round 10px)");
+    function getSelectedItemRect() {
+      const entry = itemEntries.value.find((e) => e.value === props.modelValue);
+      if (!entry?.el || !dropdownRef.value) return null;
+      return {
+        top: entry.el.offsetTop,
+        height: entry.el.offsetHeight
+      };
+    }
+    function calcClipClosed() {
+      const rect = getSelectedItemRect();
+      const total = dropdownRef.value?.scrollHeight ?? 0;
+      if (!rect || total === 0) {
+        return "inset(0 0 100% 0 round 10px)";
+      }
+      return `inset(${rect.top}px 0 ${total - rect.top - rect.height}px 0 round 10px)`;
+    }
+    function open() {
+      if (props.disabled || isOpen.value) return;
+      const rect = getSelectedItemRect();
+      dropdownTop.value = rect ? `-${rect.top}px` : "0px";
+      dropdownClip.value = calcClipClosed();
+      isOpen.value = true;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          isAnimating.value = true;
+          dropdownClip.value = "inset(0 0 0 0 round 10px)";
+        });
+      });
+    }
+    function close() {
+      if (!isOpen.value) return;
+      isAnimating.value = true;
+      dropdownClip.value = calcClipClosed();
+      setTimeout(() => {
+        isOpen.value = false;
+        isAnimating.value = false;
+      }, 200);
+    }
+    function toggle() {
+      if (isOpen.value) close();
+      else open();
+    }
+    function handleSelect(value, label) {
+      currentValue.value = value;
+      selectedLabel.value = label;
+      close();
+    }
+    function handleClickOutside(event) {
+      if (!isOpen.value) return;
+      const target = event.target;
+      if (target && selectRef.value && !selectRef.value.contains(target))
+        close();
+    }
+    function handleKeydown(event) {
+      if (!isOpen.value) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const entries = itemEntries.value.filter((e) => !e.el.hasAttribute("disabled"));
+        if (entries.length === 0) return;
+        const currentIdx = entries.findIndex((e) => e.value === props.modelValue);
+        let nextIdx;
+        if (event.key === "ArrowDown") {
+          nextIdx = currentIdx < 0 ? 0 : (currentIdx + 1) % entries.length;
+        } else {
+          nextIdx = currentIdx < 0 ? entries.length - 1 : (currentIdx - 1 + entries.length) % entries.length;
+        }
+        const next = entries[nextIdx];
+        if (!next)
+          return;
+        currentValue.value = next.value;
+        selectedLabel.value = next.label;
+      }
+    }
+    vue.provide(types.FLAT_SELECT_KEY, {
+      currentValue,
+      isOpen,
+      handleSelect,
+      registerItem,
+      unregisterItem
+    });
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        const entry = itemEntries.value.find((e) => e.value === val);
+        if (entry) selectedLabel.value = entry.label;
+      },
+      { immediate: true }
+    );
+    vue.onMounted(() => {
+      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("keydown", handleKeydown);
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleKeydown);
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "selectRef",
+        ref: selectRef,
+        class: vue.normalizeClass(["tx-flat-select", {
+          "is-open": isOpen.value,
+          "is-disabled": __props.disabled
+        }])
+      }, [
+        vue.createElementVNode("button", {
+          type: "button",
+          class: "tx-flat-select__trigger",
+          disabled: __props.disabled,
+          onClick: toggle
+        }, [
+          vue.createElementVNode("span", {
+            class: vue.normalizeClass(["tx-flat-select__text", { "is-placeholder": !selectedLabel.value }])
+          }, vue.toDisplayString(displayText.value), 3),
+          _cache[0] || (_cache[0] = vue.createElementVNode("span", { class: "tx-flat-select__arrow" }, [
+            vue.createElementVNode("svg", {
+              viewBox: "0 0 24 24",
+              width: "14",
+              height: "14"
+            }, [
+              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))
+        ], 8, _hoisted_1),
+        vue.createElementVNode("div", {
+          ref_key: "dropdownRef",
+          ref: dropdownRef,
+          class: vue.normalizeClass(["tx-flat-select__dropdown", {
+            "is-visible": isOpen.value,
+            "is-animating": isAnimating.value
+          }]),
+          style: vue.normalizeStyle({
+            top: dropdownTop.value,
+            clipPath: dropdownClip.value
+          }),
+          "aria-hidden": !isOpen.value
+        }, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 14, _hoisted_2)
+      ], 2);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/flat-select/src/TxFlatSelectItem.vue.js

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

package/dist/lib/flat-select/src/TxFlatSelectItem.vue2.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const types = require('./types.js');
+
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = { class: "tx-flat-select-item__label" };
+const _hoisted_3 = {
+  key: 0,
+  class: "tx-flat-select-item__check"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "TxFlatSelectItem" },
+  __name: "TxFlatSelectItem",
+  props: {
+    value: {},
+    label: { default: void 0 },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const ctx = vue.inject(types.FLAT_SELECT_KEY);
+    const itemRef = vue.ref(null);
+    const isSelected = vue.computed(() => ctx?.currentValue.value === props.value);
+    function handleClick() {
+      if (props.disabled) return;
+      const label = props.label || String(props.value);
+      ctx?.handleSelect(props.value, label);
+    }
+    vue.onMounted(() => {
+      if (itemRef.value && ctx) {
+        const label = props.label || String(props.value);
+        ctx.registerItem(props.value, label, itemRef.value);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      ctx?.unregisterItem(props.value);
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("button", {
+        ref_key: "itemRef",
+        ref: itemRef,
+        type: "button",
+        class: vue.normalizeClass(["tx-flat-select-item", {
+          "is-selected": isSelected.value,
+          "is-disabled": __props.disabled
+        }]),
+        disabled: __props.disabled || void 0,
+        onClick: handleClick
+      }, [
+        vue.createElementVNode("span", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createTextVNode(vue.toDisplayString(__props.label || __props.value), 1)
+          ], true)
+        ]),
+        isSelected.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [..._cache[0] || (_cache[0] = [
+          vue.createElementVNode("svg", {
+            viewBox: "0 0 24 24",
+            width: "14",
+            height: "14"
+          }, [
+            vue.createElementVNode("path", {
+              fill: "currentColor",
+              d: "M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"
+            })
+          ], -1)
+        ])])) : vue.createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/flat-select/src/types.js

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

package/dist/lib/flex/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const withInstall = require('../utils/withInstall.js');
+const withInstall = require('../packages/tuffex/packages/utils/withInstall.js');
 const TxFlex = require('./src/TxFlex.vue.js');
 
 const Flex = withInstall.withInstall(TxFlex.default);

package/dist/lib/flip-overlay/index.js

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