@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/es/search-select/index.d.ts

@@ -20,11 +20,11 @@ declare const SearchSelect: {
             default: string;
         };
         panelVariant: {
-            type: import('vue').PropType<"plain" | "dashed" | "solid">;
+            type: import('vue').PropType<"solid" | "dashed" | "plain">;
             default: string;
         };
         panelBackground: {
-            type: import('vue').PropType<"mask" | "blur" | "glass">;
+            type: import('vue').PropType<"mask" | "blur" | "pure" | "glass" | "refraction">;
             default: string;
         };
         panelShadow: {
@@ -89,7 +89,7 @@ declare const SearchSelect: {
         loading: boolean;
         modelValue: string | number;
         panelVariant: "solid" | "dashed" | "plain";
-        panelBackground: "blur" | "glass" | "mask";
+        panelBackground: "pure" | "mask" | "blur" | "glass" | "refraction";
         panelShadow: "none" | "soft" | "medium";
         panelRadius: number;
         panelPadding: number;
@@ -124,11 +124,11 @@ declare const SearchSelect: {
             default: string;
         };
         panelVariant: {
-            type: import('vue').PropType<"plain" | "dashed" | "solid">;
+            type: import('vue').PropType<"solid" | "dashed" | "plain">;
             default: string;
         };
         panelBackground: {
-            type: import('vue').PropType<"mask" | "blur" | "glass">;
+            type: import('vue').PropType<"mask" | "blur" | "pure" | "glass" | "refraction">;
             default: string;
         };
         panelShadow: {
@@ -186,7 +186,7 @@ declare const SearchSelect: {
         loading: boolean;
         modelValue: string | number;
         panelVariant: "solid" | "dashed" | "plain";
-        panelBackground: "blur" | "glass" | "mask";
+        panelBackground: "pure" | "mask" | "blur" | "glass" | "refraction";
         panelShadow: "none" | "soft" | "medium";
         panelRadius: number;
         panelPadding: number;
@@ -218,11 +218,11 @@ declare const SearchSelect: {
         default: string;
     };
     panelVariant: {
-        type: import('vue').PropType<"plain" | "dashed" | "solid">;
+        type: import('vue').PropType<"solid" | "dashed" | "plain">;
         default: string;
     };
     panelBackground: {
-        type: import('vue').PropType<"mask" | "blur" | "glass">;
+        type: import('vue').PropType<"mask" | "blur" | "pure" | "glass" | "refraction">;
         default: string;
     };
     panelShadow: {
@@ -287,7 +287,7 @@ declare const SearchSelect: {
     loading: boolean;
     modelValue: string | number;
     panelVariant: "solid" | "dashed" | "plain";
-    panelBackground: "blur" | "glass" | "mask";
+    panelBackground: "pure" | "mask" | "blur" | "glass" | "refraction";
     panelShadow: "none" | "soft" | "medium";
     panelRadius: number;
     panelPadding: number;

package/dist/es/search-select/index.js

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

package/dist/es/search-select/src/TxSearchSelect.vue.d.ts

@@ -59,7 +59,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     loading: boolean;
     modelValue: string | number;
     panelVariant: "solid" | "dashed" | "plain";
-    panelBackground: "blur" | "glass" | "mask";
+    panelBackground: "pure" | "mask" | "blur" | "glass" | "refraction";
     panelShadow: "none" | "soft" | "medium";
     panelRadius: number;
     panelPadding: number;

package/dist/es/search-select/src/TxSearchSelect.vue.js

@@ -2,6 +2,6 @@ import _sfc_main from './TxSearchSelect.vue2.js';
 /* empty css                    */
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-const TxSearchSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a871f278"]]);
+const TxSearchSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a0a7c005"]]);
 
 export { TxSearchSelect as default };

package/dist/es/search-select/src/TxSearchSelect.vue2.js

@@ -1,18 +1,18 @@
-import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createVNode, createBlock, withKeys, withCtx, createCommentVNode, createElementVNode, Teleport, Transition, withDirectives, normalizeStyle, unref, Fragment, renderList, toDisplayString, vShow } from 'vue';
-import { useFloating, offset, flip, shift, size, autoUpdate } from '@floating-ui/vue';
+import { defineComponent, ref, computed, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createVNode, withCtx, createElementVNode, normalizeStyle, createCommentVNode, Fragment, renderList, createBlock, toDisplayString, withKeys } from 'vue';
 import TxCardItem from '../../card-item/src/TxCardItem.vue.js';
-import TxCard from '../../card/src/TxCard.vue.js';
 import TuffInput from '../../input/src/TxInput.vue.js';
+import TxPopover from '../../popover/src/TxPopover.vue.js';
 import _sfc_main$1 from '../../spinner/src/TxSpinner.vue.js';
 /* empty css                               */
 
-const _hoisted_1 = {
+const _hoisted_1 = { class: "tx-search-select__reference" };
+const _hoisted_2 = {
   key: 0,
   class: "tx-search-select__loading"
 };
-const _hoisted_2 = { class: "tx-search-select__list" };
-const _hoisted_3 = { class: "tx-search-select__item-label" };
-const _hoisted_4 = {
+const _hoisted_3 = { class: "tx-search-select__list" };
+const _hoisted_4 = { class: "tx-search-select__item-label" };
+const _hoisted_5 = {
   key: 0,
   class: "tx-search-select__empty"
 };
@@ -31,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dropdownMaxHeight: { default: 280 },
     dropdownOffset: { default: 6 },
     panelVariant: { default: "solid" },
-    panelBackground: { default: "glass" },
+    panelBackground: { default: "refraction" },
     panelShadow: { default: "soft" },
     panelRadius: { default: 18 },
     panelPadding: { default: 6 }
@@ -41,16 +41,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const open = ref(false);
-    const referenceRef = ref(null);
-    const floatingRef = ref(null);
-    const cleanupAutoUpdate = ref(null);
-    const lastOpenedAt = ref(0);
     const inputRef = ref(null);
     const inputText = ref("");
     const searchTimer = ref(null);
     const optionsMap = computed(() => {
       const m = /* @__PURE__ */ new Map();
-      for (const o of props.options ?? []) m.set(o.value, o);
+      for (const o of props.options ?? [])
+        m.set(o.value, o);
       return m;
     });
     const selectedOption = computed(() => optionsMap.value.get(props.modelValue ?? ""));
@@ -73,10 +70,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return list.filter((o) => o.label.toLowerCase().includes(q));
     });
     function clearSearchTimer() {
-      if (searchTimer.value) {
-        clearTimeout(searchTimer.value);
-        searchTimer.value = null;
-      }
+      if (!searchTimer.value)
+        return;
+      clearTimeout(searchTimer.value);
+      searchTimer.value = null;
     }
     function emitSearch(q) {
       if (!props.remote)
@@ -86,18 +83,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("search", q);
     }
     function onInput(v) {
-      inputText.value = v;
-      if (!open.value) {
+      const nextValue = typeof v === "string" ? v : String(v);
+      inputText.value = nextValue;
+      if (!open.value && !props.disabled)
         open.value = true;
-        emit("open");
-      }
       if (!props.remote)
         return;
       clearSearchTimer();
       const delay = Math.max(0, props.searchDebounce ?? 0);
       searchTimer.value = setTimeout(() => {
         searchTimer.value = null;
-        emitSearch(v);
+        emitSearch(nextValue);
       }, delay);
     }
     function onEnter() {
@@ -106,16 +102,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onFocus() {
       if (props.disabled)
         return;
-      if (!open.value) {
-        open.value = true;
-        emit("open");
-      }
+      open.value = true;
     }
     function close() {
       if (!open.value)
         return;
       open.value = false;
-      emit("close");
     }
     function onClear() {
       inputText.value = "";
@@ -131,93 +123,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       inputText.value = opt.label;
       close();
     }
-    function isEventInside(e, el) {
-      if (!el)
-        return false;
-      const anyE = e;
-      const path = typeof anyE.composedPath === "function" ? anyE.composedPath() : void 0;
-      if (path && path.length)
-        return path.includes(el);
-      const t = e.target ?? null;
-      return !!t && el.contains(t);
-    }
-    function handleOutside(e) {
-      if (!open.value)
-        return;
-      if (performance.now() - lastOpenedAt.value < 60)
-        return;
-      const inRef = isEventInside(e, referenceRef.value);
-      const inFloat = isEventInside(e, floatingRef.value);
-      if (!inRef && !inFloat)
-        close();
-    }
-    function handleEsc(e) {
-      if (e.key !== "Escape")
-        return;
-      if (!open.value)
-        return;
-      close();
-    }
-    const { floatingStyles, update } = useFloating(referenceRef, floatingRef, {
-      placement: "bottom-start",
-      strategy: "fixed",
-      middleware: [
-        offset(() => props.dropdownOffset),
-        flip({ padding: 8 }),
-        shift({ padding: 8 }),
-        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"
-            });
-          }
-        })
-      ]
-    });
     watch(
       open,
-      async (v) => {
-        if (!v) {
-          cleanupAutoUpdate.value?.();
-          cleanupAutoUpdate.value = null;
-          clearSearchTimer();
+      (v, prev) => {
+        if (v === prev)
+          return;
+        if (v) {
+          emit("open");
           return;
         }
-        lastOpenedAt.value = performance.now();
-        await nextTick();
-        await update();
-        if (referenceRef.value && floatingRef.value) {
-          cleanupAutoUpdate.value?.();
-          cleanupAutoUpdate.value = autoUpdate(referenceRef.value, floatingRef.value, () => update());
-        }
+        emit("close");
+        clearSearchTimer();
       },
       { flush: "post" }
     );
-    onMounted(() => {
-      document.addEventListener("pointerdown", handleOutside, true);
-      document.addEventListener("keydown", handleEsc);
-    });
     onBeforeUnmount(() => {
-      document.removeEventListener("pointerdown", handleOutside, true);
-      document.removeEventListener("keydown", handleEsc);
-      cleanupAutoUpdate.value?.();
-      cleanupAutoUpdate.value = null;
       clearSearchTimer();
     });
     __expose({
       open: () => {
         if (props.disabled)
           return;
-        if (!open.value) {
-          open.value = true;
-          emit("open");
-        }
+        open.value = true;
       },
       close,
       focus: () => inputRef.value?.focus?.(),
@@ -226,92 +153,92 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        ref_key: "referenceRef",
-        ref: referenceRef,
         class: normalizeClass(["tx-search-select", { "is-open": open.value, "is-disabled": props.disabled }])
       }, [
-        createVNode(TuffInput, {
-          ref_key: "inputRef",
-          ref: inputRef,
-          "model-value": inputText.value,
+        createVNode(TxPopover, {
+          modelValue: open.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
           disabled: props.disabled,
-          placeholder: props.placeholder,
-          clearable: props.clearable,
-          "onUpdate:modelValue": onInput,
-          onFocus,
-          onKeydown: withKeys(onEnter, ["enter"]),
-          onClear
+          placement: "bottom-start",
+          offset: props.dropdownOffset,
+          width: 0,
+          "max-width": 9999,
+          "show-arrow": false,
+          "reference-full-width": true,
+          "toggle-on-reference-click": false,
+          "panel-variant": props.panelVariant,
+          "panel-background": props.panelBackground,
+          "panel-shadow": props.panelShadow,
+          "panel-radius": props.panelRadius,
+          "panel-padding": props.panelPadding
         }, {
-          prefix: withCtx(() => [..._cache[0] || (_cache[0] = [
-            createElementVNode("span", {
-              class: "tx-search-select__icon",
-              "aria-hidden": "true"
+          reference: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              createVNode(TuffInput, {
+                ref_key: "inputRef",
+                ref: inputRef,
+                "model-value": inputText.value,
+                disabled: props.disabled,
+                placeholder: props.placeholder,
+                clearable: props.clearable,
+                "onUpdate:modelValue": onInput,
+                onFocus,
+                onKeydown: withKeys(onEnter, ["enter"]),
+                onClear
+              }, {
+                prefix: withCtx(() => [..._cache[1] || (_cache[1] = [
+                  createElementVNode("span", {
+                    class: "tx-search-select__icon",
+                    "aria-hidden": "true"
+                  }, [
+                    createElementVNode("svg", {
+                      viewBox: "0 0 24 24",
+                      width: "16",
+                      height: "16"
+                    }, [
+                      createElementVNode("path", {
+                        fill: "currentColor",
+                        d: "M10 2a8 8 0 105.293 14.293l4.207 4.207 1.414-1.414-4.207-4.207A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"
+                      })
+                    ])
+                  ], -1)
+                ])]),
+                suffix: withCtx(() => [
+                  props.loading ? (openBlock(), createElementBlock("span", _hoisted_2, [
+                    createVNode(_sfc_main$1, { size: 12 })
+                  ])) : createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["model-value", "disabled", "placeholder", "clearable"])
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: "tx-search-select__panel",
+              style: normalizeStyle({ maxHeight: `${props.dropdownMaxHeight}px` })
             }, [
-              createElementVNode("svg", {
-                viewBox: "0 0 24 24",
-                width: "16",
-                height: "16"
-              }, [
-                createElementVNode("path", {
-                  fill: "currentColor",
-                  d: "M10 2a8 8 0 105.293 14.293l4.207 4.207 1.414-1.414-4.207-4.207A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"
-                })
+              createElementVNode("div", _hoisted_3, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (opt) => {
+                  return openBlock(), createBlock(TxCardItem, {
+                    key: String(opt.value),
+                    class: normalizeClass(["tx-search-select__item", { "is-selected": opt.value === props.modelValue, "is-disabled": opt.disabled }]),
+                    clickable: !opt.disabled,
+                    disabled: !!opt.disabled,
+                    active: opt.value === props.modelValue,
+                    onClick: ($event) => onPick(opt)
+                  }, {
+                    title: withCtx(() => [
+                      createElementVNode("span", _hoisted_4, toDisplayString(opt.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["class", "clickable", "disabled", "active", "onClick"]);
+                }), 128)),
+                !props.loading && !filteredOptions.value.length ? (openBlock(), createElementBlock("div", _hoisted_5, " No results ")) : createCommentVNode("", true)
               ])
-            ], -1)
-          ])]),
-          suffix: withCtx(() => [
-            props.loading ? (openBlock(), createElementBlock("span", _hoisted_1, [
-              createVNode(_sfc_main$1, { size: 12 })
-            ])) : createCommentVNode("", true)
+            ], 4)
           ]),
           _: 1
-        }, 8, ["model-value", "disabled", "placeholder", "clearable"]),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createVNode(Transition, { name: "tx-search-select-dropdown" }, {
-            default: withCtx(() => [
-              withDirectives(createElementVNode("div", {
-                ref_key: "floatingRef",
-                ref: floatingRef,
-                class: "tx-search-select__dropdown",
-                style: normalizeStyle(unref(floatingStyles))
-              }, [
-                createVNode(TxCard, {
-                  class: "tx-search-select__panel",
-                  variant: props.panelVariant,
-                  background: props.panelBackground,
-                  shadow: props.panelShadow,
-                  radius: props.panelRadius,
-                  padding: props.panelPadding
-                }, {
-                  default: withCtx(() => [
-                    createElementVNode("div", _hoisted_2, [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (opt) => {
-                        return openBlock(), createBlock(TxCardItem, {
-                          key: String(opt.value),
-                          class: normalizeClass(["tx-search-select__item", { "is-selected": opt.value === props.modelValue, "is-disabled": opt.disabled }]),
-                          clickable: !opt.disabled,
-                          disabled: !!opt.disabled,
-                          active: opt.value === props.modelValue,
-                          onClick: ($event) => onPick(opt)
-                        }, {
-                          title: withCtx(() => [
-                            createElementVNode("span", _hoisted_3, toDisplayString(opt.label), 1)
-                          ]),
-                          _: 2
-                        }, 1032, ["class", "clickable", "disabled", "active", "onClick"]);
-                      }), 128)),
-                      !props.loading && !filteredOptions.value.length ? (openBlock(), createElementBlock("div", _hoisted_4, " No results ")) : createCommentVNode("", true)
-                    ])
-                  ]),
-                  _: 1
-                }, 8, ["variant", "background", "shadow", "radius", "padding"])
-              ], 4), [
-                [vShow, open.value && !props.disabled]
-              ])
-            ]),
-            _: 1
-          })
-        ]))
+        }, 8, ["modelValue", "disabled", "offset", "panel-variant", "panel-background", "panel-shadow", "panel-radius", "panel-padding"])
       ], 2);
     };
   }

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

@@ -15,7 +15,7 @@ export interface TxSearchSelectProps {
     dropdownMaxHeight?: number;
     dropdownOffset?: number;
     panelVariant?: 'solid' | 'dashed' | 'plain';
-    panelBackground?: 'blur' | 'glass' | 'mask';
+    panelBackground?: 'pure' | 'mask' | 'blur' | 'glass' | 'refraction';
     panelShadow?: 'none' | 'soft' | 'medium';
     panelRadius?: number;
     panelPadding?: number;

package/dist/es/segmented-slider/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import _sfc_main from './src/TxSegmentedSlider.vue.js';
 /* empty css                           */
 

package/dist/es/segmented-slider/src/TxSegmentedSlider.vue.js

@@ -23,6 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const sliderRef = ref(null);
+    void sliderRef.value;
     const currentIndex = computed(() => {
       const index = props.segments.findIndex((seg) => seg.value === props.modelValue);
       return Math.max(0, index);