@expcat/tigercat-vue 2.0.4 → 2.1.0

package/dist/chunk-BBNCP55O.mjs

@@ -0,0 +1,156 @@
+// src/components/Highlight.ts
+import { Comment, defineComponent, h } from "vue";
+import {
+  composeComponentClasses,
+  getHighlightMarkClasses,
+  getHighlightRootClasses,
+  getHighlightSegments,
+  mergeStyleValues,
+  resolveHighlightText
+} from "@expcat/tigercat-core";
+function flattenVueText(input) {
+  if (input == null || typeof input === "boolean") return "";
+  if (typeof input === "string" || typeof input === "number") return String(input);
+  if (typeof input === "function") {
+    return flattenVueText(input());
+  }
+  if (Array.isArray(input)) {
+    let out = "";
+    for (const item of input) out += flattenVueText(item);
+    return out;
+  }
+  if (typeof input !== "object") return "";
+  const node = input;
+  if (node.type === Comment) return "";
+  if (typeof node.children === "string" || typeof node.children === "number") {
+    return String(node.children);
+  }
+  if (typeof node.children === "function") {
+    return flattenVueText(node.children());
+  }
+  if (Array.isArray(node.children)) {
+    return flattenVueText(node.children);
+  }
+  if (node.children && typeof node.children === "object") {
+    const slots = node.children;
+    if (typeof slots.default === "function") {
+      return flattenVueText(slots.default());
+    }
+  }
+  return "";
+}
+var Highlight = defineComponent({
+  name: "TigerHighlight",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Source text to search. When omitted, the default slot is flattened to a string.
+     */
+    text: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Keyword string(s) and/or regular expression(s) to highlight.
+     */
+    keywords: {
+      type: [String, Array, RegExp],
+      default: void 0
+    },
+    /**
+     * Match case for string keywords. Regular expressions keep their own `i` flag.
+     * @default false
+     */
+    caseSensitive: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Highlight every occurrence. When false, only the first match of each keyword.
+     * @default true
+     */
+    global: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional CSS classes on highlighted `mark` elements
+     */
+    highlightClassName: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles on highlighted `mark` elements
+     */
+    highlightStyle: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const attrsRecord = attrs;
+      const source = resolveHighlightText(props.text, flattenVueText(slots.default?.()));
+      const segments = getHighlightSegments(source, props.keywords, {
+        caseSensitive: props.caseSensitive,
+        global: props.global
+      });
+      const markClasses = getHighlightMarkClasses(props.highlightClassName);
+      const markStyle = mergeStyleValues(props.highlightStyle);
+      const children = [];
+      for (const segment of segments) {
+        if (segment.highlighted) {
+          children.push(
+            h(
+              "mark",
+              {
+                class: markClasses,
+                style: markStyle,
+                "data-highlight-mark": ""
+              },
+              segment.text
+            )
+          );
+        } else {
+          children.push(segment.text);
+        }
+      }
+      return h(
+        "span",
+        {
+          ...attrs,
+          class: composeComponentClasses(
+            getHighlightRootClasses(props.className),
+            attrsRecord.class
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          "data-highlight": "",
+          "data-highlight-case-sensitive": props.caseSensitive ? "true" : "false",
+          "data-highlight-global": props.global ? "true" : "false"
+        },
+        children
+      );
+    };
+  }
+});
+var Highlight_default = Highlight;
+
+export {
+  Highlight,
+  Highlight_default
+};

package/dist/chunk-F3ZVVVYD.mjs

@@ -0,0 +1,257 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
+
+// src/components/MaskInput.ts
+import { computed, defineComponent, h, inject, nextTick, ref, watch } from "vue";
+import {
+  applyMaskInput,
+  classNames,
+  coerceClassValue,
+  formatMaskValue,
+  getInputClasses,
+  getInputClearButtonClasses,
+  getInputErrorClasses,
+  getInputWrapperClasses,
+  injectShakeStyle,
+  mergeStyleValues,
+  parseMask,
+  SHAKE_CLASS
+} from "@expcat/tigercat-core";
+var maskInputIdCounter = 0;
+var MaskInput = defineComponent({
+  name: "TigerMaskInput",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Raw (unmasked) value for v-model
+     */
+    modelValue: { type: String, default: void 0 },
+    /**
+     * Default raw value (for uncontrolled mode)
+     */
+    defaultValue: { type: String, default: "" },
+    /**
+     * Mask template. Built-in tokens: `#` digit, `a` letter, `*` alphanumeric,
+     * `!` escapes the next character to a literal
+     */
+    mask: { type: String, required: true },
+    /**
+     * Custom tokens merged over the built-ins
+     */
+    tokens: { type: Object, default: void 0 },
+    /**
+     * Input size
+     * @default 'md'
+     */
+    size: { type: String, default: "md" },
+    /**
+     * Validation status
+     * @default 'default'
+     */
+    status: { type: String, default: "default" },
+    /** Error message to display */
+    errorMessage: String,
+    /** Placeholder text */
+    placeholder: { type: String, default: "" },
+    /** Whether the input is disabled */
+    disabled: Boolean,
+    /** Whether the input is readonly */
+    readonly: Boolean,
+    /** Whether to show a clear button when the input has value */
+    clearable: Boolean,
+    /** Input name attribute */
+    name: String,
+    /** Input id attribute */
+    id: String,
+    /** Autocomplete attribute */
+    autoComplete: String,
+    /** Whether to autofocus on mount */
+    autoFocus: 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, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": null,
+    change: null,
+    complete: null,
+    focus: null,
+    blur: null,
+    clear: null
+  },
+  setup(props, { emit, attrs }) {
+    injectShakeStyle();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    useTigerConfig();
+    const effectiveStatus = computed(
+      () => props.status !== "default" ? props.status : formItemControl?.status.value ?? props.status
+    );
+    const effectiveErrorMessage = computed(
+      () => props.errorMessage ?? formItemControl?.errorMessage.value
+    );
+    const effectiveShakeTrigger = computed(
+      () => props._shakeTrigger ?? formItemControl?.shakeTrigger.value
+    );
+    const instanceId = ++maskInputIdCounter;
+    const errorMsgId = `tiger-mask-input-error-${instanceId}`;
+    const wrapperRef = ref(null);
+    const inputRef = ref(null);
+    const isComposing = ref(false);
+    const spec = computed(() => parseMask(props.mask, props.tokens));
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const innerRaw = ref(props.defaultValue ?? "");
+    const rawValue = computed(
+      () => isControlled.value ? props.modelValue ?? "" : innerRaw.value
+    );
+    const formatted = computed(() => formatMaskValue(rawValue.value, spec.value));
+    const maskedValue = computed(() => formatted.value.maskedValue);
+    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);
+      }
+    });
+    const commit = (raw, detail, previousMasked) => {
+      if (!isControlled.value) innerRaw.value = raw;
+      emit("update:modelValue", raw);
+      emit("change", raw, detail);
+      if (detail.completed && !formatMaskValue(previousMasked, spec.value).completed) {
+        emit("complete", raw, detail.maskedValue);
+      }
+    };
+    const applyValue = (inputValue, caret) => {
+      const previousMasked = maskedValue.value;
+      const result = applyMaskInput(inputValue, caret, spec.value, previousMasked);
+      if (inputRef.value) inputRef.value.value = result.maskedValue;
+      commit(
+        result.rawValue,
+        { maskedValue: result.maskedValue, completed: result.completed },
+        previousMasked
+      );
+      nextTick(() => {
+        if (inputRef.value) inputRef.value.setSelectionRange(result.caret, result.caret);
+      });
+    };
+    const processInput = (target) => {
+      applyValue(target.value, target.selectionStart ?? target.value.length);
+    };
+    const handleInput = (event) => {
+      if (isComposing.value) return;
+      processInput(event.target);
+    };
+    const handlePaste = (event) => {
+      if (props.disabled || props.readonly) return;
+      event.preventDefault();
+      const input = event.target;
+      const text = event.clipboardData?.getData("text") ?? "";
+      const start = input.selectionStart ?? input.value.length;
+      const end = input.selectionEnd ?? input.value.length;
+      applyValue(input.value.slice(0, start) + text + input.value.slice(end), start + text.length);
+    };
+    const handleCompositionStart = () => {
+      isComposing.value = true;
+    };
+    const handleCompositionEnd = (event) => {
+      isComposing.value = false;
+      processInput(event.target);
+    };
+    const handleClear = () => {
+      if (!isControlled.value) innerRaw.value = "";
+      emit("update:modelValue", "");
+      emit("change", "", { maskedValue: "", completed: false });
+      emit("clear");
+      inputRef.value?.focus();
+    };
+    const handleFocus = (event) => emit("focus", event);
+    const handleBlur = (event) => emit("blur", event);
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const activeError = effectiveStatus.value === "error" && !!effectiveErrorMessage.value;
+      const hasSuffix = props.clearable;
+      const showClear = props.clearable && !props.disabled && !props.readonly && rawValue.value.length > 0;
+      const inputClasses = getInputClasses({
+        size: props.size,
+        status: effectiveStatus.value,
+        hasPrefix: false,
+        hasSuffix
+      });
+      const children = [
+        h("input", {
+          ...restAttrs,
+          ref: inputRef,
+          class: inputClasses,
+          type: "text",
+          value: maskedValue.value,
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          readonly: props.readonly,
+          name: props.name,
+          id: props.id,
+          autocomplete: props.autoComplete,
+          autofocus: props.autoFocus,
+          ...effectiveStatus.value === "error" ? { "aria-invalid": true } : {},
+          ...activeError ? { "aria-describedby": errorMsgId } : {},
+          onInput: handleInput,
+          onPaste: handlePaste,
+          onCompositionstart: handleCompositionStart,
+          onCompositionend: handleCompositionEnd,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        })
+      ];
+      if (activeError) {
+        children.push(
+          h(
+            "div",
+            { id: errorMsgId, class: getInputErrorClasses(props.size) },
+            effectiveErrorMessage.value
+          )
+        );
+      } else if (showClear) {
+        children.push(
+          h(
+            "button",
+            {
+              type: "button",
+              class: getInputClearButtonClasses(props.size),
+              onClick: handleClear,
+              "aria-label": "Clear input",
+              tabindex: -1
+            },
+            "\u2715"
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          ref: wrapperRef,
+          class: classNames(getInputWrapperClasses(), props.className, coerceClassValue(attrClass)),
+          style: mergeStyleValues(props.style, attrStyle)
+        },
+        children
+      );
+    };
+  }
+});
+var MaskInput_default = MaskInput;
+
+export {
+  MaskInput,
+  MaskInput_default
+};