@talex-touch/tuffex 0.3.3

package/dist/es/button/src/button.vue.js

@@ -0,0 +1,216 @@
+import { defineComponent, ref, useSlots, computed, watch, nextTick, withDirectives, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, createBlock, createCommentVNode, renderSlot, unref, createVNode } from 'vue';
+import VWave from 'v-wave';
+import { useFlip } from '../../utils/animation/flip.js';
+import { useVibrate } from '../../utils/vibrate.js';
+import { Spinner } from '../../spinner/index.js';
+
+const _hoisted_1 = ["type", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxButton"
+  },
+  __name: "button",
+  props: {
+    variant: { default: void 0 },
+    size: { default: void 0 },
+    block: { type: Boolean, default: false },
+    type: { default: void 0 },
+    plain: { type: Boolean, default: false },
+    dashed: { type: Boolean },
+    round: { type: Boolean, default: false },
+    circle: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    icon: { default: void 0 },
+    autofocus: { type: Boolean, default: false },
+    nativeType: { default: "button" },
+    vibrate: { type: Boolean, default: true },
+    vibrateType: { default: "light" }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { vWave } = VWave.createLocalWaveDirective();
+    const buttonRef = ref(null);
+    const innerRef = ref(null);
+    const slots = useSlots();
+    const autoWidthEnabled = computed(() => {
+      return !props.block && !props.circle;
+    });
+    const { flip: flipSize } = useFlip(buttonRef, {
+      mode: "size",
+      includeScale: false,
+      duration: 180,
+      easing: "cubic-bezier(0.2, 0, 0, 1)",
+      size: {
+        width: true,
+        height: false
+      }
+    });
+    watch(
+      () => props.loading,
+      () => {
+        if (!autoWidthEnabled.value)
+          return;
+        void flipSize(async () => {
+          await nextTick();
+        });
+      },
+      { flush: "sync" }
+    );
+    const normalizedVariant = computed(() => {
+      if (props.variant)
+        return props.variant;
+      switch (props.type) {
+        case "primary":
+          return "primary";
+        case "success":
+          return "success";
+        case "warning":
+          return "warning";
+        case "danger":
+          return "danger";
+        case "info":
+          return "info";
+        case "text":
+          return "ghost";
+        default:
+          return "secondary";
+      }
+    });
+    const normalizedSize = computed(() => {
+      if (!props.size)
+        return "md";
+      if (props.size === "lg" || props.size === "large")
+        return "lg";
+      if (props.size === "sm" || props.size === "small" || props.size === "mini")
+        return "sm";
+      return "md";
+    });
+    const spinnerSize = computed(() => {
+      if (normalizedSize.value === "sm")
+        return 14;
+      if (normalizedSize.value === "lg")
+        return 18;
+      return 16;
+    });
+    const innerStyle = computed(() => {
+      return {
+        "--tx-button-spinner-size": `${spinnerSize.value}px`
+      };
+    });
+    function hasDefaultContent() {
+      const vnodes = slots.default?.();
+      if (!vnodes || !vnodes.length)
+        return false;
+      return vnodes.some((node) => {
+        if (typeof node.children === "string")
+          return node.children.trim().length > 0;
+        if (Array.isArray(node.children))
+          return node.children.some((c) => typeof c === "string" ? c.trim().length > 0 : !!c);
+        return !!node.children;
+      });
+    }
+    const isIconOnly = computed(() => {
+      const slotHasContent = hasDefaultContent();
+      return props.circle || props.icon && !slotHasContent;
+    });
+    const toneClass = computed(() => {
+      if (!props.type)
+        return void 0;
+      return `tone-${props.type}`;
+    });
+    const classList = computed(() => {
+      return [
+        `variant-${normalizedVariant.value}`,
+        toneClass.value,
+        `tx-size-${normalizedSize.value}`,
+        {
+          "block": props.block,
+          "loading": props.loading,
+          "disabled": props.disabled,
+          "plain": props.plain,
+          "dashed": props.dashed,
+          "round": props.round,
+          "circle": props.circle,
+          "auto-width": autoWidthEnabled.value
+        }
+      ];
+    });
+    function handleClick(event) {
+      if (props.disabled || props.loading)
+        return;
+      if (props.vibrate) {
+        let vibrateType = props.vibrateType;
+        if (!vibrateType) {
+          switch (normalizedVariant.value) {
+            case "primary":
+              vibrateType = "medium";
+              break;
+            case "success":
+              vibrateType = "success";
+              break;
+            case "warning":
+              vibrateType = "warning";
+              break;
+            case "danger":
+              vibrateType = "error";
+              break;
+            default:
+              vibrateType = "light";
+          }
+        }
+        useVibrate(vibrateType);
+      }
+      emit("click", event);
+    }
+    if (props.autofocus) {
+      nextTick(() => {
+        buttonRef.value?.focus();
+      });
+    }
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("button", {
+        ref_key: "buttonRef",
+        ref: buttonRef,
+        class: normalizeClass(["tx-button fake-background transition-cubic", classList.value]),
+        type: __props.nativeType,
+        disabled: __props.disabled || __props.loading,
+        onClick: handleClick
+      }, [
+        createElementVNode("span", {
+          ref_key: "innerRef",
+          ref: innerRef,
+          class: "tx-button__inner",
+          style: normalizeStyle(innerStyle.value)
+        }, [
+          isIconOnly.value ? (openBlock(), createBlock(unref(Spinner), {
+            key: 0,
+            class: "tx-button__spinner is-overlay",
+            visible: __props.loading,
+            size: spinnerSize.value
+          }, null, 8, ["visible", "size"])) : (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: normalizeClass(["tx-button__spinner-slot", { "is-visible": __props.loading }])
+          }, [
+            createVNode(unref(Spinner), {
+              class: "tx-button__spinner",
+              visible: __props.loading,
+              size: spinnerSize.value
+            }, null, 8, ["visible", "size"])
+          ], 2)),
+          __props.icon ? (openBlock(), createElementBlock("i", {
+            key: 2,
+            class: normalizeClass(["tx-button__icon", __props.icon])
+          }, null, 2)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ], 4)
+      ], 10, _hoisted_1)), [
+        [unref(vWave)]
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/button/src/button.vue2.js

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

package/dist/es/button/src/split-button.d.ts

@@ -0,0 +1,16 @@
+export interface SplitButtonProps {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'warning' | 'info';
+    size?: 'sm' | 'md' | 'lg' | 'large' | 'small' | 'mini';
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: string;
+    menuIcon?: string;
+    menuDisabled?: boolean;
+    menuWidth?: number;
+    menuPlacement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+    menuOffset?: number;
+}
+export interface SplitButtonEmits {
+    click: [event: MouseEvent];
+    menuOpenChange: [open: boolean];
+}

package/dist/es/button/src/split-button.vue.d.ts

@@ -0,0 +1,74 @@
+import { SplitButtonProps } from './split-button';
+
+declare function closeMenu(): void;
+declare function __VLS_template(): {
+    default?(_: {}): any;
+    "menu-icon"?(_: {}): any;
+    menu?(_: {
+        close: typeof closeMenu;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SplitButtonProps>, {
+    variant: string;
+    size: string;
+    disabled: boolean;
+    loading: boolean;
+    icon: undefined;
+    menuIcon: string;
+    menuDisabled: boolean;
+    menuWidth: number;
+    menuPlacement: string;
+    menuOffset: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+    menuOpenChange: (open: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SplitButtonProps>, {
+    variant: string;
+    size: string;
+    disabled: boolean;
+    loading: boolean;
+    icon: undefined;
+    menuIcon: string;
+    menuDisabled: boolean;
+    menuWidth: number;
+    menuPlacement: string;
+    menuOffset: number;
+}>>> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onMenuOpenChange?: ((open: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    loading: boolean;
+    icon: string;
+    size: "sm" | "md" | "lg" | "large" | "small" | "mini";
+    variant: "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "info";
+    menuIcon: string;
+    menuDisabled: boolean;
+    menuWidth: number;
+    menuPlacement: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+    menuOffset: number;
+}, {}, {}, {}, 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/button/src/split-button.vue.js

@@ -0,0 +1,127 @@
+import { defineComponent, ref, useSlots, watch, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, createVNode, unref, renderSlot, withCtx } from 'vue';
+import TxPopover from '../../popover/src/TxPopover.vue.js';
+import { Spinner } from '../../spinner/index.js';
+
+const _hoisted_1 = ["aria-disabled", "aria-busy"];
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = { class: "tx-split-button__inner" };
+const _hoisted_4 = { class: "tx-split-button__label" };
+const _hoisted_5 = ["disabled", "aria-expanded"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "TxSplitButton" },
+  __name: "split-button",
+  props: {
+    variant: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    icon: { default: void 0 },
+    menuIcon: { default: "i-ri-more-2-line" },
+    menuDisabled: { type: Boolean, default: false },
+    menuWidth: { default: 200 },
+    menuPlacement: { default: "bottom-end" },
+    menuOffset: { default: 8 }
+  },
+  emits: ["click", "menuOpenChange"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = ref(false);
+    const slots = useSlots();
+    watch(open, (v) => emit("menuOpenChange", v));
+    const hasMenu = computed(() => !!slots.menu);
+    const normalizedSize = computed(() => {
+      const size = props.size;
+      if (size === "lg" || size === "large")
+        return "lg";
+      if (size === "sm" || size === "small" || size === "mini")
+        return "sm";
+      return "md";
+    });
+    const classList = computed(() => {
+      return [
+        `variant-${props.variant}`,
+        `tx-size-${normalizedSize.value}`,
+        {
+          "is-disabled": props.disabled,
+          "is-loading": props.loading,
+          "has-menu": hasMenu.value
+        }
+      ];
+    });
+    const interactiveDisabled = computed(() => props.disabled || props.loading);
+    const menuDisabled = computed(() => interactiveDisabled.value || props.menuDisabled);
+    function handlePrimaryClick(event) {
+      if (interactiveDisabled.value)
+        return;
+      emit("click", event);
+    }
+    function closeMenu() {
+      open.value = false;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tx-split-button", classList.value]),
+        "aria-disabled": interactiveDisabled.value || void 0,
+        "aria-busy": __props.loading || void 0
+      }, [
+        createElementVNode("button", {
+          class: "tx-split-button__primary",
+          disabled: interactiveDisabled.value,
+          type: "button",
+          onClick: handlePrimaryClick
+        }, [
+          createElementVNode("span", _hoisted_3, [
+            createElementVNode("span", {
+              class: normalizeClass(["tx-split-button__spinner-slot", { "is-visible": __props.loading }])
+            }, [
+              createVNode(unref(Spinner), {
+                class: "tx-split-button__spinner",
+                visible: __props.loading,
+                size: 16
+              }, null, 8, ["visible"])
+            ], 2),
+            __props.icon && !__props.loading ? (openBlock(), createElementBlock("i", {
+              key: 0,
+              class: normalizeClass(["tx-split-button__icon", __props.icon])
+            }, null, 2)) : createCommentVNode("", true),
+            createElementVNode("span", _hoisted_4, [
+              renderSlot(_ctx.$slots, "default")
+            ])
+          ])
+        ], 8, _hoisted_2),
+        hasMenu.value ? (openBlock(), createBlock(TxPopover, {
+          key: 0,
+          modelValue: open.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+          disabled: menuDisabled.value,
+          placement: __props.menuPlacement,
+          offset: __props.menuOffset,
+          width: __props.menuWidth
+        }, {
+          reference: withCtx(() => [
+            createElementVNode("button", {
+              class: "tx-split-button__menu",
+              disabled: menuDisabled.value,
+              type: "button",
+              "aria-haspopup": "menu",
+              "aria-expanded": open.value || void 0
+            }, [
+              renderSlot(_ctx.$slots, "menu-icon", {}, () => [
+                createElementVNode("i", {
+                  class: normalizeClass(["tx-split-button__menu-icon", __props.menuIcon])
+                }, null, 2)
+              ])
+            ], 8, _hoisted_5)
+          ]),
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "menu", { close: closeMenu })
+          ]),
+          _: 3
+        }, 8, ["modelValue", "disabled", "placement", "offset", "width"])) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/button/src/split-button.vue2.js

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