@talex-touch/tuffex 0.3.3

package/dist/es/popover/src/TxPopover.vue2.js

@@ -0,0 +1,372 @@
+import { defineComponent, computed, ref, useId, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, Fragment, createElementVNode, createBlock, normalizeClass, renderSlot, Teleport, createVNode, Transition, withCtx, createCommentVNode, normalizeStyle, unref } from 'vue';
+import { useFloating, offset, flip, shift, size, arrow, autoUpdate } from '@floating-ui/vue';
+import TxCard from '../../card/src/TxCard.vue.js';
+
+const _hoisted_1 = ["data-side"];
+const _hoisted_2 = {
+  class: "tx-popover__fusion-filters",
+  width: "0",
+  height: "0",
+  "aria-hidden": "true"
+};
+const _hoisted_3 = ["values"];
+const _hoisted_4 = ["data-side"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "TxPopover" },
+  __name: "TxPopover",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    placement: { default: "bottom-start" },
+    offset: { default: 8 },
+    width: { default: 0 },
+    minWidth: { default: 0 },
+    maxWidth: { default: 360 },
+    referenceFullWidth: { type: Boolean, default: false },
+    showArrow: { type: Boolean, default: false },
+    arrowSize: { default: 12 },
+    motion: { default: "split" },
+    fusion: { type: Boolean, default: false },
+    panelVariant: { default: "solid" },
+    panelBackground: { default: "blur" },
+    panelShadow: { default: "soft" },
+    panelRadius: { default: 18 },
+    panelPadding: { default: 10 },
+    closeOnClickOutside: { type: Boolean, default: true },
+    closeOnEsc: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "open", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = computed({
+      get: () => !!props.modelValue,
+      set: (v) => {
+        emit("update:modelValue", v);
+        if (v)
+          emit("open");
+        else
+          emit("close");
+      }
+    });
+    const referenceRef = ref(null);
+    const floatingRef = ref(null);
+    const arrowRef = ref(null);
+    const cleanupAutoUpdate = ref(null);
+    const lastOpenedAt = ref(0);
+    const stablePlacement = ref(null);
+    const splitX = ref(0);
+    const splitY = ref(0);
+    const motion = computed(() => props.motion === "fade" ? "fade" : "split");
+    function getPlacementSide(v) {
+      return v.split("-")[0] ?? "bottom";
+    }
+    const popoverVars = computed(() => {
+      const side = getPlacementSide(String(stablePlacement.value || placement.value || props.placement || "bottom"));
+      const arrowData = middlewareData.value?.arrow;
+      const arrowSize = props.arrowSize || 12;
+      let fusionX = "50%";
+      let fusionY = "50%";
+      if (props.showArrow && arrowData) {
+        if (side === "top" || side === "bottom") {
+          if (arrowData.x != null)
+            fusionX = `${arrowData.x + arrowSize * 0.5}px`;
+        } else {
+          if (arrowData.y != null)
+            fusionY = `${arrowData.y + arrowSize * 0.5}px`;
+        }
+      }
+      return {
+        "--tx-popover-arrow-size": `${props.arrowSize}px`,
+        "--tx-popover-radius": `${props.panelRadius}px`,
+        "--tx-popover-split-x": `${splitX.value}px`,
+        "--tx-popover-split-y": `${splitY.value}px`,
+        "--tx-popover-fusion-x": fusionX,
+        "--tx-popover-fusion-y": fusionY
+      };
+    });
+    const uid = useId();
+    const gooFilterId = `tx-popover-goo-${uid}`;
+    const gooMatrixValues = computed(() => {
+      const alpha = 26;
+      const alphaOffset = -12;
+      return `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${alpha} ${alphaOffset}`;
+    });
+    const fusionVars = computed(() => {
+      const out = Math.max(12, (props.offset ?? 8) + (props.arrowSize ?? 12) * 0.8);
+      const size2 = Math.max(26, (props.arrowSize ?? 12) * 3.2);
+      return {
+        "--tx-popover-goo-out": `${out}px`,
+        "--tx-popover-goo-size": `${size2}px`
+      };
+    });
+    const { floatingStyles, middlewareData, placement, update } = useFloating(referenceRef, floatingRef, {
+      placement: computed(() => props.placement),
+      strategy: "fixed",
+      transform: false,
+      middleware: [
+        offset(() => props.offset),
+        flip({ padding: 8 }),
+        shift({ padding: 8 }),
+        size({
+          padding: 8,
+          apply({ rects, availableHeight, elements }) {
+            const baseW = rects.reference.width;
+            const minW = Math.max(0, props.minWidth ?? 0);
+            const w = props.width > 0 ? props.width : Math.max(baseW, minW);
+            const maxH = Math.min(availableHeight, 420);
+            Object.assign(elements.floating.style, {
+              width: `${w}px`,
+              maxWidth: `${props.maxWidth}px`
+            });
+            elements.floating.style.setProperty("--tx-popover-max-height", `${maxH}px`);
+          }
+        }),
+        arrow({
+          element: computed(() => arrowRef.value),
+          padding: 6
+        })
+      ]
+    });
+    const arrowSide = computed(() => getPlacementSide(String(stablePlacement.value || placement.value || props.placement || "bottom")));
+    const arrowStyle = computed(() => {
+      if (!props.showArrow || !arrowRef.value)
+        return { display: "none" };
+      const data = middlewareData.value?.arrow;
+      if (!data || data.x == null && data.y == null) {
+        return { display: "none" };
+      }
+      const x = data.x;
+      const y = data.y;
+      const side = arrowSide.value;
+      const base = {
+        display: "block",
+        position: "absolute"
+      };
+      if (x != null)
+        base.left = `${x}px`;
+      if (y != null)
+        base.top = `${y}px`;
+      const staticSideMap = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      };
+      const staticSide = side in staticSideMap ? staticSideMap[side] : "top";
+      const half = Math.round((props.arrowSize || 12) / 2);
+      base[staticSide] = `calc(-${half}px + 1px)`;
+      return base;
+    });
+    function onBeforeEnter(el) {
+      if (motion.value !== "split") {
+        splitX.value = 0;
+        splitY.value = 0;
+        return;
+      }
+      const node = el;
+      const refEl = referenceRef.value;
+      if (!refEl)
+        return;
+      const refRect = refEl.getBoundingClientRect();
+      const side = arrowSide.value;
+      const refCx = refRect.left + refRect.width * 0.5;
+      const refCy = refRect.top + refRect.height * 0.5;
+      let tipX = refCx;
+      let tipY = refCy;
+      const arrowEl = props.showArrow ? arrowRef.value : null;
+      if (arrowEl) {
+        const arrowRect = arrowEl.getBoundingClientRect();
+        tipX = arrowRect.left + arrowRect.width * 0.5;
+        tipY = arrowRect.top + arrowRect.height * 0.5;
+        if (side === "top")
+          tipY = arrowRect.bottom;
+        if (side === "bottom")
+          tipY = arrowRect.top;
+        if (side === "left")
+          tipX = arrowRect.right;
+        if (side === "right")
+          tipX = arrowRect.left;
+      } else {
+        const floatRect = node.getBoundingClientRect();
+        tipX = floatRect.left + floatRect.width * 0.5;
+        tipY = floatRect.top + floatRect.height * 0.5;
+      }
+      const dx = refCx - tipX;
+      const dy = refCy - tipY;
+      const limit = 18;
+      const clamp = (v) => Math.min(limit, Math.max(-limit, v));
+      splitX.value = side === "left" || side === "right" ? clamp(dx) : 0;
+      splitY.value = side === "top" || side === "bottom" ? clamp(dy) : 0;
+    }
+    function toggle() {
+      if (props.disabled)
+        return;
+      if (!open.value)
+        lastOpenedAt.value = performance.now();
+      open.value = !open.value;
+    }
+    function close() {
+      open.value = false;
+    }
+    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 (!props.closeOnClickOutside)
+        return;
+      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 (!props.closeOnEsc)
+        return;
+      if (e.key !== "Escape")
+        return;
+      if (!open.value)
+        return;
+      close();
+    }
+    watch(
+      open,
+      async (v) => {
+        if (!v) {
+          stablePlacement.value = null;
+          cleanupAutoUpdate.value?.();
+          cleanupAutoUpdate.value = null;
+          return;
+        }
+        lastOpenedAt.value = performance.now();
+        await nextTick();
+        await update();
+        stablePlacement.value = placement.value;
+        if (referenceRef.value && floatingRef.value) {
+          cleanupAutoUpdate.value?.();
+          cleanupAutoUpdate.value = autoUpdate(referenceRef.value, floatingRef.value, () => update());
+        }
+      },
+      { flush: "post" }
+    );
+    onMounted(async () => {
+      document.addEventListener("pointerdown", handleOutside, true);
+      document.addEventListener("keydown", handleEsc);
+      await nextTick();
+      if (referenceRef.value) {
+        await update();
+      }
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("pointerdown", handleOutside, true);
+      document.removeEventListener("keydown", handleEsc);
+      cleanupAutoUpdate.value?.();
+      cleanupAutoUpdate.value = null;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          ref_key: "referenceRef",
+          ref: referenceRef,
+          class: normalizeClass(["tx-popover__reference", { "is-full-width": __props.referenceFullWidth }]),
+          onClickCapture: toggle
+        }, [
+          renderSlot(_ctx.$slots, "reference", {}, void 0, true)
+        ], 34),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createVNode(Transition, {
+            name: "tx-popover",
+            onBeforeEnter
+          }, {
+            default: withCtx(() => [
+              open.value && !__props.disabled ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "floatingRef",
+                ref: floatingRef,
+                class: normalizeClass(["tx-popover", [
+                  `is-bg-${__props.panelBackground}`,
+                  { "is-fusion": !!props.fusion, "is-motion-split": motion.value === "split" }
+                ]]),
+                "data-side": arrowSide.value,
+                style: normalizeStyle([unref(floatingStyles), popoverVars.value])
+              }, [
+                (openBlock(), createElementBlock("svg", _hoisted_2, [
+                  createElementVNode("defs", null, [
+                    createElementVNode("filter", { id: gooFilterId }, [
+                      _cache[0] || (_cache[0] = createElementVNode("feGaussianBlur", {
+                        in: "SourceGraphic",
+                        stdDeviation: "12",
+                        result: "blur"
+                      }, null, -1)),
+                      createElementVNode("feColorMatrix", {
+                        in: "blur",
+                        mode: "matrix",
+                        values: gooMatrixValues.value,
+                        result: "goo"
+                      }, null, 8, _hoisted_3),
+                      _cache[1] || (_cache[1] = createElementVNode("feComposite", {
+                        in: "SourceGraphic",
+                        in2: "goo",
+                        operator: "atop"
+                      }, null, -1))
+                    ])
+                  ])
+                ])),
+                props.showArrow ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  ref_key: "arrowRef",
+                  ref: arrowRef,
+                  class: "tx-popover__arrow",
+                  "data-side": arrowSide.value,
+                  style: normalizeStyle(arrowStyle.value),
+                  "aria-hidden": "true"
+                }, null, 12, _hoisted_4)) : createCommentVNode("", true),
+                props.fusion && motion.value === "split" ? (openBlock(), createElementBlock("div", {
+                  key: 1,
+                  class: "tx-popover__fusion",
+                  style: normalizeStyle(fusionVars.value),
+                  "aria-hidden": "true"
+                }, [
+                  createElementVNode("div", {
+                    class: "tx-popover__fusion-goo",
+                    style: normalizeStyle({ filter: `url(#${gooFilterId})` })
+                  }, [..._cache[2] || (_cache[2] = [
+                    createElementVNode("div", { class: "tx-popover__fusion-blob tx-popover__fusion-blob--tip" }, null, -1),
+                    createElementVNode("div", { class: "tx-popover__fusion-blob tx-popover__fusion-blob--ref" }, null, -1)
+                  ])], 4)
+                ], 4)) : createCommentVNode("", true),
+                createVNode(TxCard, {
+                  class: "tx-popover__card",
+                  variant: __props.panelVariant,
+                  background: __props.panelBackground,
+                  shadow: __props.panelShadow,
+                  radius: __props.panelRadius,
+                  padding: __props.panelPadding
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                  ]),
+                  _: 3
+                }, 8, ["variant", "background", "shadow", "radius", "padding"])
+              ], 14, _hoisted_1)) : createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ]))
+      ], 64);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/popover/src/types.d.ts

@@ -0,0 +1,22 @@
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface PopoverProps {
+    modelValue?: boolean;
+    disabled?: boolean;
+    placement?: PopoverPlacement;
+    offset?: number;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    referenceFullWidth?: boolean;
+    showArrow?: boolean;
+    arrowSize?: number;
+    motion?: 'fade' | 'split';
+    fusion?: boolean;
+    panelVariant?: 'solid' | 'dashed' | 'plain';
+    panelBackground?: 'blur' | 'glass' | 'mask';
+    panelShadow?: 'none' | 'soft' | 'medium';
+    panelRadius?: number;
+    panelPadding?: number;
+    closeOnClickOutside?: boolean;
+    closeOnEsc?: boolean;
+}

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

@@ -0,0 +1,4 @@
+import { default as TuffProgress } from './src/TxProgress.vue';
+
+export { TuffProgress };
+export default TuffProgress;

package/dist/es/progress/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from './src/TxProgress.vue.js';
+
+_sfc_main.install = (app) => {
+  app.component(_sfc_main.name || "TuffProgress", _sfc_main);
+};
+
+export { _sfc_main as TuffProgress, _sfc_main as default };

package/dist/es/progress/src/TxProgress.vue.d.ts

@@ -0,0 +1,51 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    percentage?: number;
+    status?: "success" | "error" | "warning" | "";
+    strokeWidth?: number;
+    showText?: boolean;
+    indeterminate?: boolean;
+    format?: (percentage: number) => string;
+}>, {
+    percentage: number;
+    status: string;
+    strokeWidth: number;
+    showText: boolean;
+    indeterminate: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    percentage?: number;
+    status?: "success" | "error" | "warning" | "";
+    strokeWidth?: number;
+    showText?: boolean;
+    indeterminate?: boolean;
+    format?: (percentage: number) => string;
+}>, {
+    percentage: number;
+    status: string;
+    strokeWidth: number;
+    showText: boolean;
+    indeterminate: boolean;
+}>>> & Readonly<{}>, {
+    status: "success" | "error" | "warning" | "";
+    strokeWidth: number;
+    showText: boolean;
+    indeterminate: boolean;
+    percentage: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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];
+} & {};

package/dist/es/progress/src/TxProgress.vue.js

@@ -0,0 +1,36 @@
+import { defineComponent, createBlock, openBlock, unref } from 'vue';
+import '../../progress-bar/index.js';
+import _sfc_main$1 from '../../progress-bar/src/TxProgressBar.vue.js';
+/* empty css                                        */
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TuffProgress"
+  },
+  __name: "TxProgress",
+  props: {
+    percentage: { default: 0 },
+    status: { default: "" },
+    strokeWidth: { default: 6 },
+    showText: { type: Boolean, default: true },
+    indeterminate: { type: Boolean, default: false },
+    format: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), {
+        percentage: __props.percentage,
+        status: __props.status,
+        indeterminate: __props.indeterminate,
+        height: `${__props.strokeWidth}px`,
+        "show-text": __props.showText,
+        "text-placement": "outside",
+        format: __props.format,
+        "mask-variant": "plain",
+        "mask-background": "mask"
+      }, null, 8, ["percentage", "status", "indeterminate", "height", "show-text", "format"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/progress/src/TxProgress.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './TxProgress.vue.js';
+
+
+
+export { _sfc_main as default };