@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-7LUATGJU.mjs → chunk-6XQGWPZJ.mjs}

@@ -1,27 +1,42 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
 // src/components/Progress.ts
-import { defineComponent, computed, h } from "vue";
+import { computed, defineComponent, h, onMounted } from "vue";
 import {
+  calculateCirclePath,
   classNames,
   coerceClassValue,
-  getProgressVariantClasses,
-  getProgressTextColorClasses,
-  getStatusVariant,
-  formatProgressText,
-  clampPercentage,
-  calculateCirclePath,
   getCircleSize,
-  progressLineBaseClasses,
-  progressLineInnerClasses,
-  progressTextBaseClasses,
+  getProgressFillClasses,
+  getProgressLabels,
+  getProgressStrokeClasses,
+  getProgressTextColorClasses,
+  injectProgressStyles,
   progressCircleBaseClasses,
+  progressCircleTextClasses,
+  progressCircleTrackStrokeClasses,
+  progressLineBaseClasses,
   progressLineSizeClasses,
+  progressTextBaseClasses,
   progressTextSizeClasses,
-  progressStripedClasses,
-  progressStripedAnimationClasses,
   progressTrackBgClasses,
-  progressCircleTextClasses,
-  progressCircleTrackStrokeClasses
+  resolveProgressView
 } from "@expcat/tigercat-core";
+function pickAria(attrs) {
+  const rest = { ...attrs };
+  const ariaLabel = rest["aria-label"];
+  const ariaLabelledby = rest["aria-labelledby"];
+  const ariaDescribedby = rest["aria-describedby"];
+  delete rest["aria-label"];
+  delete rest["aria-labelledby"];
+  delete rest["aria-describedby"];
+  delete rest.role;
+  delete rest.class;
+  delete rest.style;
+  return { rest, ariaLabel, ariaLabelledby, ariaDescribedby };
+}
 var Progress = defineComponent({
   name: "TigerProgress",
   inheritAttrs: false,
@@ -43,35 +58,50 @@ var Progress = defineComponent({
     style: { type: Object, default: void 0 }
   },
   setup(props, { attrs }) {
-    const clamped = computed(() => clampPercentage(props.percentage));
-    const effectiveVariant = computed(
-      () => getStatusVariant(props.status) || props.variant
-    );
-    const shouldShowText = computed(() => props.showText ?? props.type === "line");
-    const displayText = computed(
-      () => shouldShowText.value ? formatProgressText(clamped.value, props.text, props.format) : ""
-    );
-    const resolvedAriaLabel = computed(() => {
-      const label = attrs["aria-label"];
-      return label ?? (attrs["aria-labelledby"] != null ? void 0 : `Progress: ${clamped.value}%`);
+    const config = useTigerConfig();
+    onMounted(() => {
+      injectProgressStyles();
+    });
+    const view = computed(() => {
+      const { ariaLabel, ariaLabelledby } = pickAria(attrs);
+      return resolveProgressView({
+        percentage: props.percentage,
+        variant: props.variant,
+        status: props.status,
+        type: props.type,
+        showText: props.showText,
+        text: props.text,
+        format: props.format,
+        striped: props.striped,
+        stripedAnimation: props.stripedAnimation,
+        ariaLabel,
+        ariaLabelledby,
+        widgetName: getProgressLabels(config.value.locale).ariaLabel
+      });
+    });
+    const ariaProps = computed(() => {
+      const { ariaLabelledby, ariaDescribedby } = pickAria(attrs);
+      return {
+        role: "progressbar",
+        "aria-label": view.value.ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "aria-valuenow": view.value.valueNow,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuetext": view.value.valueText
+      };
     });
-    const ariaProps = computed(() => ({
-      role: "progressbar",
-      "aria-label": resolvedAriaLabel.value,
-      "aria-labelledby": attrs["aria-labelledby"],
-      "aria-describedby": attrs["aria-describedby"],
-      "aria-valuenow": clamped.value,
-      "aria-valuemin": 0,
-      "aria-valuemax": 100
-    }));
     const renderLineProgress = () => {
+      const { rest } = pickAria(attrs);
       const containerStyle = props.width !== "auto" ? { width: typeof props.width === "number" ? `${props.width}px` : props.width } : {};
       return h(
         "div",
         {
-          ...attrs,
+          ...rest,
           class: classNames(
             "flex items-center w-full",
+            view.value.paused && "tiger-progress-paused",
             coerceClassValue(attrs.class),
             props.className
           ),
@@ -79,7 +109,8 @@ var Progress = defineComponent({
             ...attrs.style,
             ...props.style ?? {},
             ...containerStyle
-          }
+          },
+          ...ariaProps.value
         },
         [
           h(
@@ -94,40 +125,42 @@ var Progress = defineComponent({
             },
             [
               h("div", {
-                class: classNames(
-                  progressLineInnerClasses,
-                  getProgressVariantClasses(effectiveVariant.value),
-                  props.striped && progressStripedClasses,
-                  props.striped && props.stripedAnimation && progressStripedAnimationClasses
-                ),
-                style: { width: `${clamped.value}%` },
-                ...ariaProps.value
+                class: getProgressFillClasses(view.value),
+                style: { width: `${view.value.percentage}%` }
               })
             ]
           ),
-          shouldShowText.value ? h(
+          view.value.shouldShowText ? h(
             "span",
             {
               class: classNames(
                 progressTextBaseClasses,
                 progressTextSizeClasses[props.size],
-                getProgressTextColorClasses(effectiveVariant.value)
+                getProgressTextColorClasses(view.value.effectiveVariant)
               )
             },
-            displayText.value
+            view.value.displayText
           ) : void 0
         ].filter(Boolean)
       );
     };
     const renderCircleProgress = () => {
-      const { width, height, radius, cx, cy } = getCircleSize(props.size, props.strokeWidth);
-      const { strokeDasharray, strokeDashoffset } = calculateCirclePath(radius, clamped.value);
+      const { rest } = pickAria(attrs);
+      const { width, height, radius, cx, cy, strokeWidth } = getCircleSize(
+        props.size,
+        props.strokeWidth
+      );
+      const { strokeDasharray, strokeDashoffset } = calculateCirclePath(
+        radius,
+        view.value.percentage
+      );
       return h(
         "div",
         {
-          ...attrs,
+          ...rest,
           class: classNames(
             progressCircleBaseClasses,
+            view.value.paused && "tiger-progress-paused",
             coerceClassValue(attrs.class),
             props.className
           ),
@@ -136,10 +169,11 @@ var Progress = defineComponent({
             ...props.style ?? {},
             width: `${width}px`,
             height: `${height}px`
-          }
+          },
+          ...ariaProps.value
         },
         [
-          h("svg", { width, height, viewBox: `0 0 ${width} ${height}` }, [
+          h("svg", { width, height, viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true" }, [
             h("circle", {
               cx,
               cy,
@@ -147,7 +181,7 @@ var Progress = defineComponent({
               fill: "none",
               stroke: "currentColor",
               class: progressCircleTrackStrokeClasses,
-              "stroke-width": props.strokeWidth
+              "stroke-width": strokeWidth
             }),
             h("circle", {
               cx,
@@ -155,30 +189,31 @@ var Progress = defineComponent({
               r: radius,
               fill: "none",
               stroke: "currentColor",
-              class: getProgressVariantClasses(effectiveVariant.value).replace("bg-", "text-"),
-              "stroke-width": props.strokeWidth,
-              "stroke-linecap": "round",
+              class: classNames(
+                "tiger-progress-fill",
+                getProgressStrokeClasses(view.value.effectiveVariant)
+              ),
+              "stroke-width": strokeWidth,
+              "stroke-linecap": view.value.percentage === 0 ? "butt" : "round",
               "stroke-dasharray": strokeDasharray,
               "stroke-dashoffset": strokeDashoffset,
               style: {
-                transition: "stroke-dashoffset 0.3s ease",
                 transform: "rotate(-90deg)",
                 transformOrigin: "center"
-              },
-              ...ariaProps.value
+              }
             })
           ]),
-          shouldShowText.value ? h(
+          view.value.shouldShowText ? h(
             "div",
             {
               class: classNames(
                 progressCircleTextClasses,
                 progressTextSizeClasses[props.size],
                 "font-medium",
-                getProgressTextColorClasses(effectiveVariant.value)
+                getProgressTextColorClasses(view.value.effectiveVariant)
               )
             },
-            displayText.value
+            view.value.displayText
           ) : void 0
         ].filter(Boolean)
       );

package/dist/chunk-76VWECLZ.mjs

@@ -0,0 +1,372 @@
+import {
+  Icon
+} from "./chunk-OGKNRXUA.mjs";
+import {
+  Tag
+} from "./chunk-7PLYHGMY.mjs";
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-J4HGCSOE.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/TagsInput.ts
+import { computed, defineComponent, h, inject, ref, useId, watch } from "vue";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  classNames,
+  coerceClassValue,
+  commitTagCandidates,
+  extractTagCandidates,
+  formatRemoveTagLabel,
+  getTagsArrowDelta,
+  getTagsInputClearButtonClasses,
+  getTagsInputContainerClasses,
+  getTagsInputErrorClasses,
+  getTagsInputHighlightClasses,
+  getTagsInputInnerInputClasses,
+  getTagsInputLabels,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  moveTagsHighlight,
+  removeTagAt,
+  resolveTagsPasteCandidates,
+  runShakeAnimation
+} from "@expcat/tigercat-core";
+var TagsInput = defineComponent({
+  name: "TigerTagsInput",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Array, default: void 0 },
+    defaultValue: { type: Array, default: () => [] },
+    size: { type: String, default: void 0 },
+    status: { type: String, default: void 0 },
+    errorMessage: String,
+    placeholder: { type: String, default: "" },
+    allowDuplicates: Boolean,
+    max: { type: Number, default: void 0 },
+    delimiters: { type: Array, default: () => [","] },
+    addOnBlur: Boolean,
+    beforeAdd: {
+      type: Function,
+      default: void 0
+    },
+    clearable: Boolean,
+    disabled: Boolean,
+    readonly: Boolean,
+    name: String,
+    id: String,
+    removeTagAriaLabel: String,
+    _shakeTrigger: { type: Number, default: void 0 },
+    className: String,
+    style: { type: Object, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": null,
+    add: null,
+    remove: null,
+    clear: null,
+    focus: null,
+    blur: null
+  },
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    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(() => props.size ?? inputGroup?.size ?? "md");
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    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 dir = computed(() => config.value.direction === "rtl" ? "rtl" : "ltr");
+    const labels = computed(() => getTagsInputLabels(config.value.locale));
+    const errorMsgId = `tiger-tags-input-error-${useId()}`;
+    const containerRef = ref(null);
+    const inputRef = ref(null);
+    const localTags = ref([...props.defaultValue ?? []]);
+    const tags = computed(
+      () => props.modelValue !== void 0 ? props.modelValue : Array.isArray(formValue.value) ? formValue.value : localTags.value
+    );
+    const inputText = ref("");
+    const highlightedIndex = ref(null);
+    const isInteractive = computed(() => !effectiveDisabled.value && !props.readonly);
+    watch(
+      () => [props.modelValue, formValue.value],
+      ([model, controlValue]) => {
+        const source = model !== void 0 ? model : Array.isArray(controlValue) ? controlValue : void 0;
+        if (source === void 0) return;
+        localTags.value = source;
+      }
+    );
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value, props._shakeTrigger],
+      (current, previous) => {
+        if (!previous) return;
+        if (current[0] === "error") runShakeAnimation(containerRef.value);
+      },
+      { flush: "post" }
+    );
+    function setTags(next) {
+      if (props.modelValue === void 0 && !Array.isArray(formValue.value)) {
+        localTags.value = next;
+      }
+      emit("update:modelValue", next);
+      formItemControl?.onChange(next);
+    }
+    function commitCandidates(candidates, pendingFallback) {
+      const result = commitTagCandidates(tags.value, candidates, {
+        allowDuplicates: props.allowDuplicates,
+        max: props.max,
+        beforeAdd: props.beforeAdd,
+        pendingFallback
+      });
+      if (result.added.length > 0) {
+        setTags(result.tags);
+        result.added.forEach((tag) => emit("add", tag));
+      }
+      return result;
+    }
+    function removeAt(index) {
+      const tag = tags.value[index];
+      if (tag === void 0) return;
+      setTags(removeTagAt(tags.value, index));
+      emit("remove", tag, index);
+    }
+    function handleInput(event) {
+      if (!isInteractive.value) return;
+      highlightedIndex.value = null;
+      const target = event.target;
+      const { candidates, pending } = extractTagCandidates(target.value, props.delimiters);
+      if (candidates.length > 0) {
+        const result = commitCandidates(candidates, pending || candidates.at(-1));
+        inputText.value = result.added.length > 0 ? pending : result.pending || pending;
+        target.value = inputText.value;
+        return;
+      }
+      inputText.value = pending;
+    }
+    function handleKeydown(event) {
+      if (!isInteractive.value) return;
+      if (event.key === "Enter") {
+        if (!inputText.value.trim()) return;
+        event.preventDefault();
+        const result = commitCandidates([inputText.value], inputText.value);
+        inputText.value = result.added.length > 0 ? "" : result.pending;
+        return;
+      }
+      if (event.key === "Backspace" && inputText.value === "") {
+        if (highlightedIndex.value !== null) {
+          removeAt(highlightedIndex.value);
+          highlightedIndex.value = null;
+        } else if (tags.value.length > 0) {
+          highlightedIndex.value = tags.value.length - 1;
+        }
+        return;
+      }
+      if (event.key === "Delete" && highlightedIndex.value !== null) {
+        removeAt(highlightedIndex.value);
+        highlightedIndex.value = null;
+        return;
+      }
+      const delta = getTagsArrowDelta(event.key, dir.value);
+      if (delta !== null && inputText.value === "" && tags.value.length > 0) {
+        highlightedIndex.value = moveTagsHighlight(highlightedIndex.value, tags.value.length, delta);
+        return;
+      }
+      if (event.key === "Escape" && highlightedIndex.value !== null) {
+        highlightedIndex.value = null;
+        return;
+      }
+      if (highlightedIndex.value !== null) highlightedIndex.value = null;
+    }
+    function handlePaste(event) {
+      if (!isInteractive.value) return;
+      const text = event.clipboardData?.getData("text") ?? "";
+      const candidates = resolveTagsPasteCandidates(inputText.value, text, props.delimiters);
+      if (candidates.length <= 1) return;
+      event.preventDefault();
+      const result = commitCandidates(candidates, inputText.value);
+      inputText.value = result.added.length > 0 ? "" : result.pending;
+      if (inputRef.value) inputRef.value.value = inputText.value;
+    }
+    function handleBlur(event) {
+      const next = event.relatedTarget;
+      if (containerRef.value && next && containerRef.value.contains(next)) return;
+      highlightedIndex.value = null;
+      if (props.addOnBlur && inputText.value.trim() && isInteractive.value) {
+        const result = commitCandidates([inputText.value], inputText.value);
+        if (result.added.length > 0) inputText.value = "";
+      }
+      formItemControl?.onBlur();
+      emit("blur", event);
+    }
+    function handleClear() {
+      if (!isInteractive.value || tags.value.length === 0) return;
+      setTags([]);
+      inputText.value = "";
+      highlightedIndex.value = null;
+      emit("clear");
+      inputRef.value?.focus();
+    }
+    function handleContainerClick(event) {
+      if (event.target instanceof HTMLButtonElement) return;
+      inputRef.value?.focus();
+    }
+    expose({
+      focus: () => inputRef.value?.focus(),
+      input: inputRef
+    });
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const activeError = status.value === "error" && !!props.errorMessage;
+      const hasExtras = activeError;
+      const isFull = props.max !== void 0 && tags.value.length >= props.max;
+      const removeLabelTemplate = props.removeTagAriaLabel ?? labels.value.removeTagLabel;
+      const tagSize = effectiveSize.value === "lg" ? "md" : "sm";
+      const labelledby = typeof restAttrs["aria-labelledby"] === "string" && restAttrs["aria-labelledby"].trim() ? restAttrs["aria-labelledby"] : formItemControl?.labelId.value;
+      const describedBy = mergeAriaDescribedBy(
+        mergeAriaDescribedBy(
+          typeof restAttrs["aria-describedby"] === "string" ? restAttrs["aria-describedby"] : void 0,
+          activeError ? errorMsgId : void 0
+        ),
+        formItemControl?.describedBy.value
+      );
+      const children = [];
+      tags.value.forEach((tag, index) => {
+        children.push(
+          h(
+            Tag,
+            {
+              key: `${tag}-${index}`,
+              size: tagSize,
+              closable: isInteractive.value,
+              closeTabIndex: -1,
+              closeAriaLabel: formatRemoveTagLabel(removeLabelTemplate, tag),
+              class: index === highlightedIndex.value ? getTagsInputHighlightClasses() : void 0,
+              "aria-current": index === highlightedIndex.value ? "true" : void 0,
+              onClose: (event) => {
+                event.preventDefault();
+                removeAt(index);
+                inputRef.value?.focus();
+              }
+            },
+            () => tag
+          )
+        );
+      });
+      children.push(
+        h("input", {
+          key: "text-input",
+          ref: inputRef,
+          class: getTagsInputInnerInputClasses(),
+          type: "text",
+          value: inputText.value,
+          placeholder: tags.value.length === 0 ? props.placeholder : "",
+          disabled: effectiveDisabled.value,
+          readonly: props.readonly,
+          id: effectiveId.value,
+          "aria-label": typeof restAttrs["aria-label"] === "string" ? restAttrs["aria-label"] : void 0,
+          "aria-labelledby": labelledby,
+          "aria-invalid": status.value === "error" ? true : void 0,
+          "aria-required": formItemControl?.required.value ? true : void 0,
+          "aria-describedby": describedBy,
+          onInput: handleInput,
+          onKeydown: handleKeydown,
+          onPaste: handlePaste,
+          onFocus: (event) => emit("focus", event),
+          onFocusout: handleBlur
+        })
+      );
+      if (props.clearable && tags.value.length > 0 && isInteractive.value) {
+        children.push(
+          h(
+            "button",
+            {
+              key: "clear",
+              type: "button",
+              class: getTagsInputClearButtonClasses(),
+              onMousedown: (event) => event.preventDefault(),
+              onClick: handleClear,
+              "aria-label": labels.value.clearAllLabel,
+              tabindex: -1
+            },
+            [h(Icon, { name: "close", size: "sm", "aria-hidden": true })]
+          )
+        );
+      }
+      if (effectiveName.value && !effectiveDisabled.value) {
+        tags.value.forEach((tag, index) => {
+          children.push(
+            h("input", {
+              key: `hidden-${index}`,
+              type: "hidden",
+              name: effectiveName.value,
+              value: tag
+            })
+          );
+        });
+      }
+      const containerNode = h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          class: classNames(
+            getTagsInputContainerClasses(effectiveSize.value, status.value, {
+              disabled: effectiveDisabled.value,
+              inGroup: inGroup.value && !hasExtras
+            }),
+            !hasExtras ? props.className : void 0,
+            !hasExtras ? coerceClassValue(attrClass) : void 0
+          ),
+          style: !hasExtras ? mergeStyleValues(props.style, attrStyle) : void 0,
+          "data-state": isFull ? "full" : void 0,
+          [TIGER_CHROME_ATTR]: "",
+          onClick: handleContainerClick,
+          onAnimationend: () => containerRef.value?.classList.remove(SHAKE_CLASS)
+        },
+        children
+      );
+      if (!hasExtras) return containerNode;
+      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: mergeStyleValues(props.style, attrStyle)
+        },
+        [
+          containerNode,
+          h(
+            "div",
+            { id: errorMsgId, class: getTagsInputErrorClasses(), "aria-live": "polite" },
+            props.errorMessage
+          )
+        ]
+      );
+    };
+  }
+});
+var TagsInput_default = TagsInput;
+
+export {
+  TagsInput,
+  TagsInput_default
+};