@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/chunk-BPAN6T7H.mjs

@@ -0,0 +1,135 @@
+import { defineComponent, ref, computed, h } from 'vue';
+import { starViewBox, starPathD, classNames, rateInactiveColor, rateHoverColor, rateActiveColor, getRateStarClasses, rateBaseClasses, coerceClassValue } from '@expcat/tigercat-core';
+
+// src/components/Rate.ts
+var Rate = defineComponent({
+  name: "TigerRate",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    count: { type: Number, default: 5 },
+    allowHalf: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    allowClear: { type: Boolean, default: true },
+    character: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "change", "hover-change"],
+  setup(props, { emit, attrs }) {
+    const hoverValue = ref(0);
+    const displayValue = computed(
+      () => hoverValue.value > 0 ? hoverValue.value : props.modelValue
+    );
+    function getStarValue(index, isHalf) {
+      return isHalf ? index + 0.5 : index + 1;
+    }
+    function handleClick(index, e) {
+      if (props.disabled) return;
+      const el = e.currentTarget;
+      const rect = el.getBoundingClientRect();
+      const isHalf = props.allowHalf && e.clientX - rect.left < rect.width / 2;
+      const val = getStarValue(index, isHalf);
+      const newVal = props.allowClear && val === props.modelValue ? 0 : val;
+      emit("update:modelValue", newVal);
+      emit("change", newVal);
+    }
+    function handleMouseMove(index, e) {
+      if (props.disabled) return;
+      const el = e.currentTarget;
+      const rect = el.getBoundingClientRect();
+      const isHalf = props.allowHalf && e.clientX - rect.left < rect.width / 2;
+      const val = getStarValue(index, isHalf);
+      if (val !== hoverValue.value) {
+        hoverValue.value = val;
+        emit("hover-change", val);
+      }
+    }
+    function handleMouseLeave() {
+      if (props.disabled) return;
+      hoverValue.value = 0;
+      emit("hover-change", 0);
+    }
+    return () => {
+      const isChar = !!props.character;
+      const stars = [];
+      for (let i = 0; i < props.count; i++) {
+        const full = displayValue.value >= i + 1;
+        const half = props.allowHalf && !full && displayValue.value >= i + 0.5;
+        const isHovering = hoverValue.value > 0;
+        const colorClass = full || half ? isHovering ? rateHoverColor : rateActiveColor : rateInactiveColor;
+        const starContent = isChar ? h("span", null, props.character) : h(
+          "svg",
+          {
+            viewBox: starViewBox,
+            fill: "currentColor",
+            class: "w-full h-full"
+          },
+          [h("path", { d: starPathD })]
+        );
+        const children = half ? [
+          // Inactive background (full star)
+          h("span", { class: classNames("absolute inset-0", rateInactiveColor) }, [
+            isChar ? h("span", null, props.character) : h(
+              "svg",
+              {
+                viewBox: starViewBox,
+                fill: "currentColor",
+                class: "w-full h-full"
+              },
+              [h("path", { d: starPathD })]
+            )
+          ]),
+          // Active half (clipped left 50%)
+          h(
+            "span",
+            {
+              class: classNames(
+                "absolute inset-0 overflow-hidden",
+                isHovering ? rateHoverColor : rateActiveColor
+              ),
+              style: { width: "50%" }
+            },
+            [
+              isChar ? h("span", null, props.character) : h(
+                "svg",
+                {
+                  viewBox: starViewBox,
+                  fill: "currentColor",
+                  class: "w-full h-full"
+                },
+                [h("path", { d: starPathD })]
+              )
+            ]
+          )
+        ] : [h("span", { class: colorClass }, [starContent])];
+        stars.push(
+          h(
+            "span",
+            {
+              key: i,
+              class: getRateStarClasses(props.size, isChar, props.disabled),
+              role: "radio",
+              "aria-checked": full || half,
+              "aria-label": `${i + 1} star${i + 1 > 1 ? "s" : ""}`,
+              onClick: (e) => handleClick(i, e),
+              onMousemove: (e) => handleMouseMove(i, e),
+              onMouseleave: handleMouseLeave
+            },
+            children
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          class: classNames(rateBaseClasses, coerceClassValue(attrs.class)),
+          role: "radiogroup",
+          "aria-label": "Rating"
+        },
+        stars
+      );
+    };
+  }
+});
+var Rate_default = Rate;
+
+export { Rate, Rate_default };

package/dist/{chunk-K6HDRMPN.js → chunk-BUTNEKFD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk7AFJ7TKW_js = require('./chunk-7AFJ7TKW.js');
+var chunk6DP7XE77_js = require('./chunk-6DP7XE77.js');
 var chunkPNKVD2UK_js = require('./chunk-PNKVD2UK.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -24,7 +24,7 @@ var Image = vue.defineComponent({
       default: void 0
     }
   },
-  emits: ["load", "error", "preview-visible-change"],
+  emits: ["load", "error", "preview-open-change", "preview-visible-change"],
   setup(props, { slots, emit, attrs }) {
     const loading = vue.ref(true);
     const error = vue.ref(false);
@@ -156,13 +156,14 @@ var Image = vue.defineComponent({
         });
       }
       const previewEl = !group && previewVisible.value && props.src ? (() => {
-        const { ImagePreview } = (chunk7AFJ7TKW_js.init_ImagePreview(), chunkPNKVD2UK_js.__toCommonJS(chunk7AFJ7TKW_js.ImagePreview_exports));
+        const { ImagePreview } = (chunk6DP7XE77_js.init_ImagePreview(), chunkPNKVD2UK_js.__toCommonJS(chunk6DP7XE77_js.ImagePreview_exports));
         return vue.h(ImagePreview, {
-          visible: previewVisible.value,
+          open: previewVisible.value,
           images: [props.src],
           currentIndex: 0,
-          "onUpdate:visible": (val) => {
+          "onUpdate:open": (val) => {
             previewVisible.value = val;
+            emit("preview-open-change", val);
             emit("preview-visible-change", val);
           }
         });

package/dist/chunk-BYNMOQBB.js

@@ -0,0 +1,301 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Input.ts
+var inputIdCounter = 0;
+var Input = vue.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
+    }
+  },
+  emits: {
+    "update:modelValue": null,
+    input: null,
+    change: null,
+    focus: null,
+    blur: null,
+    clear: null
+  },
+  setup(props, { emit, attrs, slots }) {
+    tigercatCore.injectShakeStyle();
+    const inputRef = vue.ref(null);
+    const wrapperRef = vue.ref(null);
+    const localValue = vue.ref(props.modelValue ?? "");
+    const passwordVisible = vue.ref(false);
+    const instanceId = ++inputIdCounter;
+    const errorMsgId = `tiger-input-error-${instanceId}`;
+    vue.watch(
+      () => props.modelValue,
+      (newValue) => {
+        const next = newValue ?? "";
+        if (next !== localValue.value) {
+          localValue.value = next;
+        }
+      }
+    );
+    vue.watch([() => props.status, () => props._shakeTrigger], ([newStatus]) => {
+      if (newStatus === "error" && wrapperRef.value) {
+        const el = wrapperRef.value;
+        el.classList.remove(tigercatCore.SHAKE_CLASS);
+        void el.offsetWidth;
+        el.classList.add(tigercatCore.SHAKE_CLASS);
+      }
+    });
+    const handleAnimationEnd = () => {
+      wrapperRef.value?.classList.remove(tigercatCore.SHAKE_CLASS);
+    };
+    const hasPrefix = vue.computed(() => !!slots.prefix || !!props.prefix);
+    const hasSuffix = vue.computed(
+      () => !!slots.suffix || !!props.suffix || props.clearable || props.showPassword
+    );
+    const activeError = vue.computed(() => props.status === "error" && !!props.errorMessage);
+    const inputClasses = vue.computed(
+      () => tigercatCore.getInputClasses({
+        size: props.size,
+        status: props.status,
+        hasPrefix: hasPrefix.value,
+        hasSuffix: hasSuffix.value
+      })
+    );
+    const effectiveType = vue.computed(() => {
+      if (props.showPassword && props.type === "password") {
+        return passwordVisible.value ? "text" : "password";
+      }
+      return props.type;
+    });
+    const handleInput = (event) => {
+      const target = event.target;
+      const value = tigercatCore.parseInputValue(target, props.type);
+      localValue.value = value;
+      emit("update:modelValue", value);
+      emit("input", event);
+    };
+    const handleChange = (event) => emit("change", event);
+    const handleFocus = (event) => emit("focus", event);
+    const handleBlur = (event) => emit("blur", event);
+    const handleClear = () => {
+      localValue.value = "";
+      emit("update:modelValue", "");
+      emit("clear");
+      inputRef.value?.focus();
+    };
+    const togglePasswordVisibility = () => {
+      passwordVisible.value = !passwordVisible.value;
+    };
+    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 suffixNodes = [];
+      if (activeError.value) {
+        suffixNodes.push(
+          vue.h("div", { id: errorMsgId, class: tigercatCore.getInputErrorClasses(props.size) }, props.errorMessage)
+        );
+      } else {
+        if (showClear) {
+          suffixNodes.push(
+            vue.h(
+              "button",
+              {
+                type: "button",
+                class: tigercatCore.getInputClearButtonClasses(props.size),
+                onClick: handleClear,
+                "aria-label": "Clear input",
+                tabindex: -1
+              },
+              "\u2715"
+            )
+          );
+        }
+        if (showPasswordToggle) {
+          suffixNodes.push(
+            vue.h(
+              "button",
+              {
+                type: "button",
+                class: tigercatCore.getInputPasswordToggleClasses(props.size),
+                onClick: togglePasswordVisibility,
+                "aria-label": passwordVisible.value ? "Hide password" : "Show password",
+                tabindex: -1
+              },
+              passwordVisible.value ? "\u{1F648}" : "\u{1F441}"
+            )
+          );
+        }
+        if (!showClear && !showPasswordToggle && hasSuffix.value) {
+          suffixNodes.push(
+            vue.h(
+              "div",
+              { class: tigercatCore.getInputAffixClasses("suffix", props.size) },
+              slots.suffix ? slots.suffix() : props.suffix
+            )
+          );
+        }
+      }
+      const wrapperChildren = [
+        hasPrefix.value && vue.h(
+          "div",
+          { class: tigercatCore.getInputAffixClasses("prefix", props.size) },
+          slots.prefix ? slots.prefix() : props.prefix
+        ),
+        vue.h("input", {
+          ...restAttrs,
+          ref: inputRef,
+          class: inputClasses.value,
+          type: effectiveType.value,
+          value: localValue.value,
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          readonly: props.readonly,
+          required: props.required,
+          maxlength: props.maxLength,
+          minlength: props.minLength,
+          name: props.name,
+          id: props.id,
+          autocomplete: props.autoComplete,
+          autofocus: props.autoFocus,
+          ...props.status === "error" ? { "aria-invalid": true } : {},
+          ...activeError.value ? { "aria-describedby": errorMsgId } : {},
+          onInput: handleInput,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        }),
+        ...suffixNodes
+      ];
+      const nodes = [
+        vue.h(
+          "div",
+          {
+            ref: wrapperRef,
+            class: tigercatCore.classNames(
+              tigercatCore.getInputWrapperClasses(),
+              props.className,
+              tigercatCore.coerceClassValue(attrClass)
+            ),
+            style: [attrStyle, props.style],
+            onAnimationend: handleAnimationEnd
+          },
+          wrapperChildren
+        )
+      ];
+      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}`;
+        nodes.push(vue.h("div", { class: tigercatCore.getInputCountClasses(isOver) }, countText));
+      }
+      return nodes.length === 1 ? nodes[0] : vue.h("div", null, nodes);
+    };
+  }
+});
+var Input_default = Input;
+
+exports.Input = Input;
+exports.Input_default = Input_default;

package/dist/chunk-BZBVSB43.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Rate.ts
+var Rate = vue.defineComponent({
+  name: "TigerRate",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    count: { type: Number, default: 5 },
+    allowHalf: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    allowClear: { type: Boolean, default: true },
+    character: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "change", "hover-change"],
+  setup(props, { emit, attrs }) {
+    const hoverValue = vue.ref(0);
+    const displayValue = vue.computed(
+      () => hoverValue.value > 0 ? hoverValue.value : props.modelValue
+    );
+    function getStarValue(index, isHalf) {
+      return isHalf ? index + 0.5 : index + 1;
+    }
+    function handleClick(index, e) {
+      if (props.disabled) return;
+      const el = e.currentTarget;
+      const rect = el.getBoundingClientRect();
+      const isHalf = props.allowHalf && e.clientX - rect.left < rect.width / 2;
+      const val = getStarValue(index, isHalf);
+      const newVal = props.allowClear && val === props.modelValue ? 0 : val;
+      emit("update:modelValue", newVal);
+      emit("change", newVal);
+    }
+    function handleMouseMove(index, e) {
+      if (props.disabled) return;
+      const el = e.currentTarget;
+      const rect = el.getBoundingClientRect();
+      const isHalf = props.allowHalf && e.clientX - rect.left < rect.width / 2;
+      const val = getStarValue(index, isHalf);
+      if (val !== hoverValue.value) {
+        hoverValue.value = val;
+        emit("hover-change", val);
+      }
+    }
+    function handleMouseLeave() {
+      if (props.disabled) return;
+      hoverValue.value = 0;
+      emit("hover-change", 0);
+    }
+    return () => {
+      const isChar = !!props.character;
+      const stars = [];
+      for (let i = 0; i < props.count; i++) {
+        const full = displayValue.value >= i + 1;
+        const half = props.allowHalf && !full && displayValue.value >= i + 0.5;
+        const isHovering = hoverValue.value > 0;
+        const colorClass = full || half ? isHovering ? tigercatCore.rateHoverColor : tigercatCore.rateActiveColor : tigercatCore.rateInactiveColor;
+        const starContent = isChar ? vue.h("span", null, props.character) : vue.h(
+          "svg",
+          {
+            viewBox: tigercatCore.starViewBox,
+            fill: "currentColor",
+            class: "w-full h-full"
+          },
+          [vue.h("path", { d: tigercatCore.starPathD })]
+        );
+        const children = half ? [
+          // Inactive background (full star)
+          vue.h("span", { class: tigercatCore.classNames("absolute inset-0", tigercatCore.rateInactiveColor) }, [
+            isChar ? vue.h("span", null, props.character) : vue.h(
+              "svg",
+              {
+                viewBox: tigercatCore.starViewBox,
+                fill: "currentColor",
+                class: "w-full h-full"
+              },
+              [vue.h("path", { d: tigercatCore.starPathD })]
+            )
+          ]),
+          // Active half (clipped left 50%)
+          vue.h(
+            "span",
+            {
+              class: tigercatCore.classNames(
+                "absolute inset-0 overflow-hidden",
+                isHovering ? tigercatCore.rateHoverColor : tigercatCore.rateActiveColor
+              ),
+              style: { width: "50%" }
+            },
+            [
+              isChar ? vue.h("span", null, props.character) : vue.h(
+                "svg",
+                {
+                  viewBox: tigercatCore.starViewBox,
+                  fill: "currentColor",
+                  class: "w-full h-full"
+                },
+                [vue.h("path", { d: tigercatCore.starPathD })]
+              )
+            ]
+          )
+        ] : [vue.h("span", { class: colorClass }, [starContent])];
+        stars.push(
+          vue.h(
+            "span",
+            {
+              key: i,
+              class: tigercatCore.getRateStarClasses(props.size, isChar, props.disabled),
+              role: "radio",
+              "aria-checked": full || half,
+              "aria-label": `${i + 1} star${i + 1 > 1 ? "s" : ""}`,
+              onClick: (e) => handleClick(i, e),
+              onMousemove: (e) => handleMouseMove(i, e),
+              onMouseleave: handleMouseLeave
+            },
+            children
+          )
+        );
+      }
+      return vue.h(
+        "div",
+        {
+          class: tigercatCore.classNames(tigercatCore.rateBaseClasses, tigercatCore.coerceClassValue(attrs.class)),
+          role: "radiogroup",
+          "aria-label": "Rating"
+        },
+        stars
+      );
+    };
+  }
+});
+var Rate_default = Rate;
+
+exports.Rate = Rate;
+exports.Rate_default = Rate_default;

package/dist/{chunk-5BAN4GHQ.mjs → chunk-C76CIM26.mjs}

@@ -1,4 +1,4 @@
-import { DropdownContextKey } from './chunk-D5CR2P7K.mjs';
+import { DropdownContextKey } from './chunk-A64AWAOW.mjs';
 import { defineComponent, inject, computed, h } from 'vue';
 import { classNames, getDropdownItemClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
 
@@ -78,6 +78,7 @@ var DropdownItem = defineComponent({
           type: "button",
           class: itemClasses.value,
           role: "menuitem",
+          tabindex: -1,
           "aria-disabled": props.disabled,
           disabled: props.disabled,
           onClick: handleClick,

package/dist/chunk-CG3AMK5U.mjs

@@ -0,0 +1,38 @@
+import { defineComponent, computed, h } from 'vue';
+import { formatStatisticValue, classNames, statisticBaseClasses, coerceClassValue, getStatisticTitleClasses, getStatisticValueClasses, statisticPrefixClasses, statisticSuffixClasses } from '@expcat/tigercat-core';
+
+// src/components/Statistic.ts
+var Statistic = defineComponent({
+  name: "TigerStatistic",
+  props: {
+    title: { type: String, default: void 0 },
+    value: { type: [String, Number], default: void 0 },
+    precision: { type: Number, default: void 0 },
+    prefix: { type: String, default: void 0 },
+    suffix: { type: String, default: void 0 },
+    groupSeparator: { type: Boolean, default: false },
+    size: { type: String, default: "md" }
+  },
+  setup(props, { attrs }) {
+    const formatted = computed(
+      () => formatStatisticValue(props.value, props.precision, props.groupSeparator)
+    );
+    return () => h(
+      "div",
+      {
+        class: classNames(statisticBaseClasses, coerceClassValue(attrs.class))
+      },
+      [
+        props.title ? h("div", { class: getStatisticTitleClasses(props.size) }, props.title) : null,
+        h("div", { class: getStatisticValueClasses(props.size) }, [
+          props.prefix ? h("span", { class: statisticPrefixClasses }, props.prefix) : null,
+          h("span", null, formatted.value),
+          props.suffix ? h("span", { class: statisticSuffixClasses }, props.suffix) : null
+        ])
+      ]
+    );
+  }
+});
+var Statistic_default = Statistic;
+
+export { Statistic, Statistic_default };