@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/{chunk-POWDTOMF.mjs → chunk-DU5F2EE7.mjs}

@@ -1,15 +1,32 @@
+import {
+  Icon
+} from "./chunk-OGKNRXUA.mjs";
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-J4HGCSOE.mjs";
 import {
   FORM_ITEM_CONTROL_INJECTION_KEY
 } from "./chunk-P2LZ2MR5.mjs";
 import {
-  INPUT_GROUP_INJECTION_KEY
-} from "./chunk-VIIGYWUY.mjs";
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Input.ts
-import { defineComponent, computed, ref, watch, h, inject, getCurrentInstance } from "vue";
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  h,
+  inject,
+  getCurrentInstance,
+  useId
+} from "vue";
 import {
   classNames,
   coerceClassValue,
+  mergeAriaDescribedBy,
+  callUnknownEventHandler,
   getInputFieldClasses,
   getInputWrapperClasses,
   getInputAffixClasses,
@@ -17,115 +34,57 @@ import {
   getInputClearButtonClasses,
   getInputPasswordToggleClasses,
   getInputCountClasses,
+  formatInputCountText,
   parseInputValue,
-  injectShakeStyle,
-  SHAKE_CLASS
+  runShakeAnimation,
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  getInputLabels,
+  resolveInputTrailingLayout
 } from "@expcat/tigercat-core";
-var inputIdCounter = 0;
 var Input = defineComponent({
   name: "TigerInput",
   inheritAttrs: false,
   props: {
-    /**
-     * Input value (for v-model)
-     */
     modelValue: {
       type: [String, Number]
     },
-    /**
-     * Input size
-     * @default 'md'
-     */
     size: {
       type: String,
       default: "md"
     },
-    /**
-     * Input type
-     * @default 'text'
-     */
     type: {
       type: String,
       default: "text"
     },
-    /**
-     * Input status
-     * @default 'default'
-     */
     status: {
       type: String,
       default: "default"
     },
-    /**
-     * Error message to default display
-     */
     errorMessage: String,
-    /**
-     * Prefix text/icon
-     */
     prefix: String,
-    /**
-     * Suffix text/icon
-     */
     suffix: String,
-    /**
-     * Placeholder text
-     */
     placeholder: {
       type: String,
       default: ""
     },
-    /**
-     * Whether the input is disabled
-     */
     disabled: Boolean,
-    /**
-     * Whether the input is readonly
-     */
     readonly: Boolean,
-    /**
-     * Whether the input is required
-     */
     required: Boolean,
-    /** Maximum length */
     maxLength: Number,
-    /** Minimum length */
     minLength: Number,
-    /** Input name attribute */
     name: String,
-    /** Input id attribute */
     id: String,
-    /** Autocomplete attribute */
     autoComplete: String,
-    /**
-     * Whether to autofocus on mount
-     */
     autoFocus: Boolean,
-    /**
-     * Whether to show a clear button
-     */
     clearable: Boolean,
-    /**
-     * Whether to show a password toggle button
-     */
     showPassword: Boolean,
-    /**
-     * Whether to show a character count
-     */
     showCount: Boolean,
-    /**
-     * Internal shake trigger counter (used by FormItem)
-     * @internal
-     */
     _shakeTrigger: {
       type: Number,
       default: void 0
     },
-    /** Additional CSS classes */
     className: String,
-    /**
-     * Inline styles
-     */
     style: {
       type: Object
     }
@@ -138,14 +97,16 @@ var Input = defineComponent({
     blur: null,
     clear: null
   },
-  setup(props, { emit, attrs, slots }) {
-    injectShakeStyle();
+  setup(props, { emit, attrs, slots, expose }) {
     const instance = getCurrentInstance();
+    const config = useTigerConfig();
+    const labels = computed(() => getInputLabels(config.value.locale));
     const inputGroup = inject(INPUT_GROUP_INJECTION_KEY, null);
     const formItemControl = inject(
       FORM_ITEM_CONTROL_INJECTION_KEY,
       null
     );
+    const inGroup = computed(() => inputGroup != null);
     const effectiveSize = computed(() => {
       const hasOwnSize = Object.prototype.hasOwnProperty.call(instance?.vnode.props ?? {}, "size");
       return hasOwnSize ? props.size : inputGroup?.size ?? props.size;
@@ -156,36 +117,42 @@ var Input = defineComponent({
     const effectiveStatus = computed(
       () => hasOwnStatus.value ? props.status : formItemControl?.status.value ?? props.status
     );
-    const effectiveErrorMessage = computed(
-      () => props.errorMessage ?? formItemControl?.errorMessage.value
+    const effectiveErrorMessage = computed(() => props.errorMessage);
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
     );
+    const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const formValue = computed(() => formItemControl?.value.value);
     const effectiveShakeTrigger = computed(
       () => props._shakeTrigger ?? formItemControl?.shakeTrigger.value
     );
     const inputRef = ref(null);
     const wrapperRef = ref(null);
-    const localValue = ref(props.modelValue ?? "");
+    const localValue = ref(
+      props.modelValue ?? (typeof formValue.value === "string" || typeof formValue.value === "number" ? formValue.value : "")
+    );
     const passwordVisible = ref(false);
-    const instanceId = ++inputIdCounter;
-    const errorMsgId = `tiger-input-error-${instanceId}`;
+    const errorMsgId = `tiger-input-error-${useId()}`;
+    expose({
+      focus: () => inputRef.value?.focus(),
+      input: inputRef
+    });
     watch(
-      () => props.modelValue,
-      (newValue) => {
-        const next = newValue ?? "";
-        if (next !== localValue.value) {
-          localValue.value = next;
+      () => [props.modelValue, formValue.value],
+      ([modelValue, controlValue]) => {
+        const source = modelValue !== void 0 ? modelValue : typeof controlValue === "string" || typeof controlValue === "number" ? controlValue : void 0;
+        if (source === void 0) return;
+        if (source !== localValue.value) {
+          localValue.value = source;
         }
       }
     );
     watch(
       [effectiveStatus, effectiveShakeTrigger],
-      ([newStatus]) => {
-        if (newStatus === "error" && wrapperRef.value) {
-          const el = wrapperRef.value;
-          el.classList.remove(SHAKE_CLASS);
-          void el.offsetWidth;
-          el.classList.add(SHAKE_CLASS);
-        }
+      ([newStatus], oldValue) => {
+        if (oldValue === void 0) return;
+        if (newStatus === "error") runShakeAnimation(wrapperRef.value);
       },
       { flush: "post" }
     );
@@ -193,9 +160,7 @@ var Input = defineComponent({
       wrapperRef.value?.classList.remove(SHAKE_CLASS);
     };
     const hasPrefix = computed(() => !!slots.prefix || !!props.prefix);
-    const hasSuffix = computed(
-      () => !!slots.suffix || !!props.suffix || props.clearable || props.showPassword
-    );
+    const hasCustomSuffix = computed(() => !!slots.suffix || !!props.suffix);
     const activeError = computed(
       () => effectiveStatus.value === "error" && !!effectiveErrorMessage.value
     );
@@ -211,71 +176,99 @@ var Input = defineComponent({
       localValue.value = value;
       emit("update:modelValue", value);
       emit("input", event);
+      formItemControl?.onChange(value);
     };
     const handleChange = (event) => emit("change", event);
     const handleFocus = (event) => emit("focus", event);
-    const handleBlur = (event) => emit("blur", event);
+    const handleBlur = (event) => {
+      formItemControl?.onBlur();
+      emit("blur", event);
+    };
+    const focusInput = () => {
+      inputRef.value?.focus();
+    };
     const handleClear = () => {
       localValue.value = "";
       emit("update:modelValue", "");
       emit("clear");
-      inputRef.value?.focus();
+      formItemControl?.onChange("");
+      focusInput();
     };
     const togglePasswordVisibility = () => {
       passwordVisible.value = !passwordVisible.value;
+      focusInput();
     };
     return () => {
       const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
       const currentValStr = String(localValue.value);
-      const showClear = props.clearable && !props.disabled && !props.readonly && currentValStr.length > 0;
-      const showPasswordToggle = props.showPassword && props.type === "password" && !props.disabled;
-      const dualSuffix = showClear && showPasswordToggle;
+      const trailing = resolveInputTrailingLayout({
+        clearable: props.clearable,
+        showPassword: props.showPassword,
+        type: props.type,
+        disabled: effectiveDisabled.value,
+        readOnly: props.readonly,
+        valueLength: currentValStr.length,
+        hasCustomSuffix: hasCustomSuffix.value
+      });
+      const hasExtras = activeError.value || props.showCount;
       const inputClasses = getInputFieldClasses({
         size: effectiveSize.value,
         status: effectiveStatus.value,
         hasPrefix: hasPrefix.value,
-        hasSuffix: hasSuffix.value,
-        hasDualSuffix: dualSuffix
+        hasSuffix: trailing.hasSuffix,
+        hasDualSuffix: trailing.hasDualSuffix,
+        hasTripleSuffix: trailing.hasTripleSuffix
       });
       const suffixNodes = [];
-      if (showClear) {
+      if (trailing.showClear) {
         suffixNodes.push(
           h(
             "button",
             {
               type: "button",
-              class: getInputClearButtonClasses(
-                effectiveSize.value,
-                dualSuffix ? { offset: true } : void 0
-              ),
+              class: getInputClearButtonClasses(effectiveSize.value, {
+                offsetSlots: trailing.clearOffsetSlots
+              }),
+              onMousedown: (event) => event.preventDefault(),
               onClick: handleClear,
-              "aria-label": "Clear input",
-              tabindex: -1
+              "aria-label": labels.value.clearAriaLabel
             },
-            "\u2715"
+            [h(Icon, { name: "close", size: "sm", "aria-hidden": true })]
           )
         );
       }
-      if (showPasswordToggle) {
+      if (trailing.showPasswordToggle) {
         suffixNodes.push(
           h(
             "button",
             {
               type: "button",
-              class: getInputPasswordToggleClasses(effectiveSize.value),
+              class: getInputPasswordToggleClasses(effectiveSize.value, {
+                offsetSlots: trailing.passwordOffsetSlots
+              }),
+              onMousedown: (event) => event.preventDefault(),
               onClick: togglePasswordVisibility,
-              "aria-label": passwordVisible.value ? "Hide password" : "Show password",
-              tabindex: -1
+              "aria-label": passwordVisible.value ? labels.value.hidePasswordAriaLabel : labels.value.showPasswordAriaLabel
             },
-            passwordVisible.value ? "\u{1F648}" : "\u{1F441}"
+            [
+              h(Icon, {
+                name: passwordVisible.value ? "eye-off" : "eye",
+                size: "sm",
+                "aria-hidden": true
+              })
+            ]
           )
         );
       }
-      if (!showClear && !showPasswordToggle && hasSuffix.value) {
+      if (trailing.showCustomSuffix) {
         suffixNodes.push(
           h(
             "div",
-            { class: getInputAffixClasses("suffix", effectiveSize.value) },
+            {
+              class: getInputAffixClasses("suffix", effectiveSize.value, {
+                offsetSlots: trailing.suffixOffsetSlots
+              })
+            },
             slots.suffix ? slots.suffix() : props.suffix
           )
         );
@@ -293,21 +286,40 @@ var Input = defineComponent({
           type: effectiveType.value,
           value: localValue.value,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: effectiveDisabled.value,
           readonly: props.readonly,
           required: props.required,
           maxlength: props.maxLength,
           minlength: props.minLength,
-          name: props.name,
-          id: props.id,
+          name: effectiveName.value,
+          id: effectiveId.value,
           autocomplete: props.autoComplete,
           autofocus: props.autoFocus,
           ...effectiveStatus.value === "error" ? { "aria-invalid": true } : {},
-          ...activeError.value ? { "aria-describedby": errorMsgId } : {},
-          onInput: handleInput,
-          onChange: handleChange,
-          onFocus: handleFocus,
-          onBlur: handleBlur
+          ...formItemControl?.required.value ? { "aria-required": true } : {},
+          "aria-describedby": mergeAriaDescribedBy(
+            mergeAriaDescribedBy(
+              restAttrs["aria-describedby"],
+              activeError.value ? errorMsgId : void 0
+            ),
+            formItemControl?.describedBy.value
+          ),
+          onInput: (event) => {
+            handleInput(event);
+            callUnknownEventHandler(restAttrs.onInput, event);
+          },
+          onChange: (event) => {
+            handleChange(event);
+            callUnknownEventHandler(restAttrs.onChange, event);
+          },
+          onFocus: (event) => {
+            handleFocus(event);
+            callUnknownEventHandler(restAttrs.onFocus, event);
+          },
+          onBlur: (event) => {
+            handleBlur(event);
+            callUnknownEventHandler(restAttrs.onBlur, event);
+          }
         }),
         ...suffixNodes
       ];
@@ -315,12 +327,15 @@ var Input = defineComponent({
         "div",
         {
           ref: wrapperRef,
+          [TIGER_CHROME_ATTR]: "",
           class: classNames(
-            getInputWrapperClasses(effectiveStatus.value),
-            props.className,
-            coerceClassValue(attrClass)
+            getInputWrapperClasses(effectiveStatus.value, {
+              inGroup: inGroup.value && !hasExtras
+            }),
+            !hasExtras ? props.className : void 0,
+            !hasExtras ? coerceClassValue(attrClass) : void 0
           ),
-          style: [attrStyle, props.style],
+          style: !hasExtras ? [attrStyle, props.style] : void 0,
           onAnimationend: handleAnimationEnd
         },
         wrapperChildren
@@ -341,11 +356,29 @@ var Input = defineComponent({
       }
       if (props.showCount) {
         const count = currentValStr.length;
-        const isOver = props.maxLength !== void 0 && count > props.maxLength;
-        const countText = props.maxLength !== void 0 ? `${count} / ${props.maxLength}` : `${count}`;
-        extras.push(h("div", { class: getInputCountClasses(isOver) }, countText));
+        extras.push(
+          h(
+            "div",
+            {
+              class: getInputCountClasses(props.maxLength !== void 0 && count > props.maxLength)
+            },
+            formatInputCountText(count, props.maxLength)
+          )
+        );
       }
-      return extras.length === 0 ? chromeNode : h("div", { class: "w-full" }, [chromeNode, ...extras]);
+      if (!hasExtras) return chromeNode;
+      return h(
+        "div",
+        {
+          class: classNames(
+            inGroup.value ? "flex flex-col flex-1 min-w-0" : "flex flex-col w-full",
+            props.className,
+            coerceClassValue(attrClass)
+          ),
+          style: [attrStyle, props.style]
+        },
+        [chromeNode, ...extras]
+      );
     };
   }
 });

package/dist/chunk-DXL3YHRP.mjs

@@ -0,0 +1,92 @@
+// src/composables/useDrag.ts
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  reactive,
+  toValue
+} from "vue";
+import {
+  createDragState,
+  createListReorderController,
+  isSameContainerDrag,
+  isCrossContainerDrag
+} from "@expcat/tigercat-core";
+function callbacksOf(options) {
+  return {
+    onDragStart: options.onDragStart,
+    onDragOver: options.onDragOver,
+    onDrop: options.onDrop,
+    onDragEnd: options.onDragEnd
+  };
+}
+function useDrag(options = {}) {
+  const getOptions = () => toValue(options);
+  const state = reactive(createDragState());
+  const controller = createListReorderController({
+    getContainerId: () => getOptions().containerId ?? "default",
+    getConfig: () => getOptions().config,
+    getCallbacks: () => callbacksOf(getOptions())
+  });
+  const syncState = () => {
+    Object.assign(state, controller.getState());
+  };
+  const unsubscribe = controller.subscribe(syncState);
+  if (getCurrentInstance()) {
+    onBeforeUnmount(() => {
+      unsubscribe();
+      controller.dispose();
+    });
+  }
+  function startDrag(item, event) {
+    controller.startDrag(item, event);
+  }
+  function dragOver(item, event) {
+    controller.dragOver(item, event);
+  }
+  function drop(event) {
+    return controller.drop(event);
+  }
+  function endDrag(cancelled) {
+    controller.endDrag(cancelled);
+  }
+  function getDragItemAttrs(item) {
+    const bindings = controller.getItemBindings(item);
+    const { extraClass, onDragStart, onDragOver, onDrop, onDragEnd, onPointerDown, ...rest } = bindings;
+    return {
+      ...rest,
+      class: extraClass,
+      onDragstart: onDragStart,
+      onDragover: onDragOver,
+      onDrop,
+      onDragend: onDragEnd,
+      onPointerdown: onPointerDown
+    };
+  }
+  function getDropZoneAttrs() {
+    const bindings = controller.getZoneBindings();
+    return {
+      onDragover: bindings.onDragOver,
+      onDrop: bindings.onDrop
+    };
+  }
+  return {
+    state,
+    isDragging: computed(() => state.isDragging),
+    draggedItem: computed(() => state.draggedItem),
+    startDrag,
+    dragOver,
+    drop,
+    endDrag,
+    reorder: (items) => controller.reorder(items),
+    moveBetween: (sourceItems, targetItems) => controller.moveBetween(sourceItems, targetItems),
+    isSameContainer: computed(() => isSameContainerDrag(state)),
+    isCrossContainer: computed(() => isCrossContainerDrag(state)),
+    getDragItemAttrs,
+    getDropZoneAttrs
+  };
+}
+
+export {
+  useDrag
+};