@talex-touch/tuffex 0.3.3 → 0.3.4

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

@@ -0,0 +1,208 @@
+import { defineComponent, ref, computed, provide, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, toDisplayString, normalizeStyle, renderSlot } from 'vue';
+import { FLAT_SELECT_KEY } from './types.js';
+
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = ["aria-hidden"];
+const _sfc_main = /* @__PURE__ */ 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 = ref(false);
+    const isAnimating = ref(false);
+    const selectRef = ref(null);
+    const dropdownRef = ref(null);
+    const selectedLabel = ref("");
+    const itemEntries = 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 = computed({
+      get: () => props.modelValue,
+      set: (val) => {
+        emit("update:modelValue", val);
+        emit("change", val);
+      }
+    });
+    const displayText = computed(() => selectedLabel.value || props.placeholder);
+    const dropdownTop = ref("0px");
+    const dropdownClip = 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;
+      }
+    }
+    provide(FLAT_SELECT_KEY, {
+      currentValue,
+      isOpen,
+      handleSelect,
+      registerItem,
+      unregisterItem
+    });
+    watch(
+      () => props.modelValue,
+      (val) => {
+        const entry = itemEntries.value.find((e) => e.value === val);
+        if (entry) selectedLabel.value = entry.label;
+      },
+      { immediate: true }
+    );
+    onMounted(() => {
+      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("keydown", handleKeydown);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleKeydown);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "selectRef",
+        ref: selectRef,
+        class: normalizeClass(["tx-flat-select", {
+          "is-open": isOpen.value,
+          "is-disabled": __props.disabled
+        }])
+      }, [
+        createElementVNode("button", {
+          type: "button",
+          class: "tx-flat-select__trigger",
+          disabled: __props.disabled,
+          onClick: toggle
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass(["tx-flat-select__text", { "is-placeholder": !selectedLabel.value }])
+          }, toDisplayString(displayText.value), 3),
+          _cache[0] || (_cache[0] = createElementVNode("span", { class: "tx-flat-select__arrow" }, [
+            createElementVNode("svg", {
+              viewBox: "0 0 24 24",
+              width: "14",
+              height: "14"
+            }, [
+              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),
+        createElementVNode("div", {
+          ref_key: "dropdownRef",
+          ref: dropdownRef,
+          class: normalizeClass(["tx-flat-select__dropdown", {
+            "is-visible": isOpen.value,
+            "is-animating": isAnimating.value
+          }]),
+          style: normalizeStyle({
+            top: dropdownTop.value,
+            clipPath: dropdownClip.value
+          }),
+          "aria-hidden": !isOpen.value
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 14, _hoisted_2)
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/flat-select/src/TxFlatSelectItem.vue.d.ts

@@ -0,0 +1,47 @@
+import { TxFlatSelectValue } from './types';
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value: TxFlatSelectValue;
+    label?: string;
+    disabled?: boolean;
+}>, {
+    label: undefined;
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value: TxFlatSelectValue;
+    label?: string;
+    disabled?: boolean;
+}>, {
+    label: undefined;
+    disabled: boolean;
+}>>> & Readonly<{}>, {
+    disabled: boolean;
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,7 @@
+import _sfc_main from './TxFlatSelectItem.vue2.js';
+/* empty css                      */
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
+
+const TxFlatSelectItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-30a7af68"]]);
+
+export { TxFlatSelectItem as default };

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

@@ -0,0 +1,71 @@
+import { defineComponent, inject, ref, computed, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { FLAT_SELECT_KEY } from './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__ */ defineComponent({
+  ...{ name: "TxFlatSelectItem" },
+  __name: "TxFlatSelectItem",
+  props: {
+    value: {},
+    label: { default: void 0 },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const ctx = inject(FLAT_SELECT_KEY);
+    const itemRef = ref(null);
+    const isSelected = computed(() => ctx?.currentValue.value === props.value);
+    function handleClick() {
+      if (props.disabled) return;
+      const label = props.label || String(props.value);
+      ctx?.handleSelect(props.value, label);
+    }
+    onMounted(() => {
+      if (itemRef.value && ctx) {
+        const label = props.label || String(props.value);
+        ctx.registerItem(props.value, label, itemRef.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      ctx?.unregisterItem(props.value);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        ref_key: "itemRef",
+        ref: itemRef,
+        type: "button",
+        class: normalizeClass(["tx-flat-select-item", {
+          "is-selected": isSelected.value,
+          "is-disabled": __props.disabled
+        }]),
+        disabled: __props.disabled || void 0,
+        onClick: handleClick
+      }, [
+        createElementVNode("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(__props.label || __props.value), 1)
+          ], true)
+        ]),
+        isSelected.value ? (openBlock(), createElementBlock("span", _hoisted_3, [..._cache[0] || (_cache[0] = [
+          createElementVNode("svg", {
+            viewBox: "0 0 24 24",
+            width: "14",
+            height: "14"
+          }, [
+            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)
+        ])])) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/flat-select/src/types.d.ts

@@ -0,0 +1,21 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+
+export type TxFlatSelectValue = string | number;
+export interface TxFlatSelectProps {
+    modelValue?: TxFlatSelectValue;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export interface TxFlatSelectItemProps {
+    value: TxFlatSelectValue;
+    label?: string;
+    disabled?: boolean;
+}
+export interface TxFlatSelectContext {
+    currentValue: ComputedRef<TxFlatSelectValue>;
+    isOpen: Ref<boolean>;
+    handleSelect: (value: TxFlatSelectValue, label: string) => void;
+    registerItem: (value: TxFlatSelectValue, label: string, el: HTMLElement) => void;
+    unregisterItem: (value: TxFlatSelectValue) => void;
+}
+export declare const FLAT_SELECT_KEY: InjectionKey<TxFlatSelectContext>;

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

@@ -0,0 +1,3 @@
+const FLAT_SELECT_KEY = Symbol("TxFlatSelect");
+
+export { FLAT_SELECT_KEY };

package/dist/es/flex/index.d.ts

@@ -7,33 +7,33 @@ declare const Flex: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        align: {
-            type: import('vue').PropType<string>;
+        direction: {
+            type: import('vue').PropType<"column" | "column-reverse" | "row" | "row-reverse">;
             default: string;
         };
         gap: {
             type: import('vue').PropType<string | number>;
             default: number;
         };
-        justify: {
-            type: import('vue').PropType<string>;
+        wrap: {
+            type: import('vue').PropType<"nowrap" | "wrap" | "wrap-reverse">;
             default: string;
         };
-        wrap: {
-            type: import('vue').PropType<"wrap" | "nowrap" | "wrap-reverse">;
+        justify: {
+            type: import('vue').PropType<string>;
             default: string;
         };
-        direction: {
-            type: import('vue').PropType<"column" | "row" | "row-reverse" | "column-reverse">;
+        align: {
+            type: import('vue').PropType<string>;
             default: string;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
         inline: boolean;
-        align: string;
+        direction: "row" | "row-reverse" | "column" | "column-reverse";
         gap: number | string;
-        justify: string;
         wrap: "nowrap" | "wrap" | "wrap-reverse";
-        direction: "row" | "row-reverse" | "column" | "column-reverse";
+        justify: string;
+        align: string;
     }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -46,33 +46,33 @@ declare const Flex: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        align: {
-            type: import('vue').PropType<string>;
+        direction: {
+            type: import('vue').PropType<"column" | "column-reverse" | "row" | "row-reverse">;
             default: string;
         };
         gap: {
             type: import('vue').PropType<string | number>;
             default: number;
         };
-        justify: {
-            type: import('vue').PropType<string>;
+        wrap: {
+            type: import('vue').PropType<"nowrap" | "wrap" | "wrap-reverse">;
             default: string;
         };
-        wrap: {
-            type: import('vue').PropType<"wrap" | "nowrap" | "wrap-reverse">;
+        justify: {
+            type: import('vue').PropType<string>;
             default: string;
         };
-        direction: {
-            type: import('vue').PropType<"column" | "row" | "row-reverse" | "column-reverse">;
+        align: {
+            type: import('vue').PropType<string>;
             default: string;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, {
         inline: boolean;
-        align: string;
+        direction: "row" | "row-reverse" | "column" | "column-reverse";
         gap: number | string;
-        justify: string;
         wrap: "nowrap" | "wrap" | "wrap-reverse";
-        direction: "row" | "row-reverse" | "column" | "column-reverse";
+        justify: string;
+        align: string;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -82,33 +82,33 @@ declare const Flex: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
-    align: {
-        type: import('vue').PropType<string>;
+    direction: {
+        type: import('vue').PropType<"column" | "column-reverse" | "row" | "row-reverse">;
         default: string;
     };
     gap: {
         type: import('vue').PropType<string | number>;
         default: number;
     };
-    justify: {
-        type: import('vue').PropType<string>;
+    wrap: {
+        type: import('vue').PropType<"nowrap" | "wrap" | "wrap-reverse">;
         default: string;
     };
-    wrap: {
-        type: import('vue').PropType<"wrap" | "nowrap" | "wrap-reverse">;
+    justify: {
+        type: import('vue').PropType<string>;
         default: string;
     };
-    direction: {
-        type: import('vue').PropType<"column" | "row" | "row-reverse" | "column-reverse">;
+    align: {
+        type: import('vue').PropType<string>;
         default: string;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
     inline: boolean;
-    align: string;
+    direction: "row" | "row-reverse" | "column" | "column-reverse";
     gap: number | string;
-    justify: string;
     wrap: "nowrap" | "wrap" | "wrap-reverse";
-    direction: "row" | "row-reverse" | "column" | "column-reverse";
+    justify: string;
+    align: string;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;

package/dist/es/flex/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import TxFlex from './src/TxFlex.vue.js';
 
 const Flex = withInstall(TxFlex);

package/dist/es/flex/src/TxFlex.vue.d.ts

@@ -19,11 +19,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     inline: boolean;
 }>>> & Readonly<{}>, {
     inline: boolean;
-    align: string;
+    direction: "row" | "row-reverse" | "column" | "column-reverse";
     gap: number | string;
-    justify: string;
     wrap: "nowrap" | "wrap" | "wrap-reverse";
-    direction: "row" | "row-reverse" | "column" | "column-reverse";
+    justify: string;
+    align: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;