@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/chunk-4YHOD7LT.mjs

@@ -0,0 +1,82 @@
+import { defineComponent, computed, h } from 'vue';
+import { classNames, linkBaseClasses, getLinkVariantClasses, linkSizeClasses, linkDisabledClasses, getSecureRel } from '@expcat/tigercat-core';
+
+// src/components/Link.ts
+var Link = defineComponent({
+  name: "TigerLink",
+  props: {
+    /** @default 'primary' */
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    /** @default 'md' */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** @default false */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    href: { type: String },
+    target: {
+      type: String
+    },
+    /** Auto-set to 'noopener noreferrer' when target="_blank" */
+    rel: { type: String },
+    /** @default true */
+    underline: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: {
+    click: (event) => event instanceof MouseEvent
+  },
+  setup(props, { slots, emit, attrs }) {
+    const linkClasses = computed(
+      () => classNames(
+        linkBaseClasses,
+        getLinkVariantClasses(props.variant, void 0, { disabled: props.disabled }),
+        linkSizeClasses[props.size],
+        props.underline && "hover:underline",
+        props.disabled && linkDisabledClasses
+      )
+    );
+    const computedRel = computed(() => getSecureRel(props.target, props.rel));
+    const handleClick = (event) => {
+      if (props.disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      emit("click", event);
+    };
+    const handleKeydown = (event) => {
+      if (props.disabled && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    return () => h(
+      "a",
+      {
+        ...attrs,
+        class: [linkClasses.value, attrs.class],
+        href: props.disabled ? void 0 : props.href,
+        target: props.target,
+        rel: computedRel.value,
+        "aria-disabled": props.disabled ? "true" : void 0,
+        tabindex: props.disabled ? -1 : attrs.tabindex,
+        onClick: handleClick,
+        onKeydown: handleKeydown
+      },
+      slots.default?.()
+    );
+  }
+});
+var Link_default = Link;
+
+export { Link, Link_default };

package/dist/chunk-53M2BTB5.mjs

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+export { __esm, __export, __toCommonJS };

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

@@ -1,4 +1,4 @@
-import { DropdownContextKey } from './chunk-JUIOGBBB.mjs';
+import { DropdownContextKey } from './chunk-D5CR2P7K.mjs';
 import { defineComponent, inject, computed, h } from 'vue';
 import { classNames, getDropdownItemClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
 

package/dist/{chunk-TTZDVYGX.mjs → chunk-5XY7MXWC.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, reactive, computed, provide, h } from 'vue';
-import { classNames, getValueByPath, validateField, validateForm } from '@expcat/tigercat-core';
+import { classNames, validateForm, getValueByPath, validateField } from '@expcat/tigercat-core';
 
 // src/components/Form.ts
 var FormContextKey = /* @__PURE__ */ Symbol("FormContext");
@@ -105,43 +105,74 @@ var Form = defineComponent({
       };
       return Object.keys(merged).length > 0 ? merged : void 0;
     };
-    const validateField$1 = async (fieldName, rulesOverride, trigger) => {
-      const effectiveFieldRules = rulesOverride ?? fieldRules[fieldName] ?? props.rules?.[fieldName];
+    const resolveFieldRules = (fieldName, rulesOverride) => {
+      return rulesOverride ?? fieldRules[fieldName] ?? props.rules?.[fieldName];
+    };
+    const runFieldValidation = async (fieldName, rulesOverride, trigger) => {
+      const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
       if (!effectiveFieldRules) {
-        return;
+        return null;
       }
       const value = getValueByPath(props.model, fieldName);
-      const error = await validateField(
-        fieldName,
-        value,
-        effectiveFieldRules,
-        props.model,
-        trigger
-      );
-      const index = errors.findIndex((e) => e.field === fieldName);
-      if (index !== -1) {
-        errors.splice(index, 1);
+      return validateField(fieldName, value, effectiveFieldRules, props.model, trigger);
+    };
+    const validateField$1 = async (fieldName, rulesOverride, trigger) => {
+      const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
+      if (!effectiveFieldRules) {
+        return;
       }
-      if (error) {
-        errors.push({
-          field: fieldName,
-          message: error
-        });
+      const error = await runFieldValidation(fieldName, rulesOverride, trigger);
+      const existingIndex = errors.findIndex((e) => e.field === fieldName);
+      const existingMessage = existingIndex !== -1 ? errors[existingIndex].message : null;
+      if (!error && existingMessage === null) ; else if (error && error === existingMessage) ; else {
+        if (existingIndex !== -1) {
+          errors.splice(existingIndex, 1);
+        }
+        if (error) {
+          errors.push({
+            field: fieldName,
+            message: error
+          });
+        }
       }
       emit("validate", fieldName, !error, error || void 0);
     };
     const validate = async () => {
+      errors.splice(0, errors.length);
       const effectiveRules = getEffectiveRules();
       if (!effectiveRules) {
         return true;
       }
       const result = await validateForm(props.model, effectiveRules);
-      errors.splice(0, errors.length);
-      if (result.errors.length > 0) {
-        errors.push(...result.errors);
-      }
+      errors.push(...result.errors);
       return result.valid;
     };
+    const validateFields = async (fieldNames) => {
+      if (!fieldNames || fieldNames.length === 0) {
+        return true;
+      }
+      const nextErrors = [];
+      const fieldSet = new Set(fieldNames);
+      for (const fieldName of fieldNames) {
+        const effectiveFieldRules = resolveFieldRules(fieldName);
+        if (!effectiveFieldRules) {
+          emit("validate", fieldName, true, void 0);
+          continue;
+        }
+        const error = await runFieldValidation(fieldName);
+        if (error) {
+          nextErrors.push({ field: fieldName, message: error });
+        }
+        emit("validate", fieldName, !error, error || void 0);
+      }
+      for (let i = errors.length - 1; i >= 0; i--) {
+        if (fieldSet.has(errors[i].field)) {
+          errors.splice(i, 1);
+        }
+      }
+      errors.push(...nextErrors);
+      return nextErrors.length === 0;
+    };
     const clearValidate = (fieldNames) => {
       if (!fieldNames) {
         errors.splice(0, errors.length);
@@ -160,22 +191,8 @@ var Form = defineComponent({
     };
     const handleSubmit = async (event) => {
       event.preventDefault();
-      const effectiveRules = getEffectiveRules();
-      if (!effectiveRules) {
-        errors.splice(0, errors.length);
-        emit("submit", { valid: true, values: props.model, errors });
-        return;
-      }
-      const result = await validateForm(props.model, effectiveRules);
-      errors.splice(0, errors.length);
-      if (result.errors.length > 0) {
-        errors.push(...result.errors);
-      }
-      emit("submit", {
-        valid: result.valid,
-        values: props.model,
-        errors
-      });
+      const valid = await validate();
+      emit("submit", { valid, values: props.model, errors });
     };
     const formContextValue = computed(() => ({
       model: props.model,
@@ -195,6 +212,7 @@ var Form = defineComponent({
     provide(FormContextKey, formContextValue);
     expose({
       validate,
+      validateFields,
       validateField: validateField$1,
       clearValidate,
       resetFields

package/dist/{chunk-SF63KE5T.js → chunk-6FXYRDYH.js}

@@ -158,7 +158,7 @@ var Textarea = vue.defineComponent({
     const textareaClasses = vue.computed(
       () => tigercatCore.classNames(
         "block",
-        tigercatCore.getInputClasses(props.size),
+        tigercatCore.getInputClasses({ size: props.size }),
         props.autoResize ? "resize-none" : "resize-y",
         props.className,
         tigercatCore.coerceClassValue(attrs.class)
@@ -178,9 +178,6 @@ var Textarea = vue.defineComponent({
       localValue.value = value;
       emit("update:modelValue", value);
       emit("input", event);
-      if (props.autoResize) {
-        vue.nextTick(adjustHeight);
-      }
     };
     const handleChange = (event) => {
       emit("change", event);
@@ -191,17 +188,13 @@ var Textarea = vue.defineComponent({
     const handleBlur = (event) => {
       emit("blur", event);
     };
-    vue.watch(
-      () => [props.modelValue, props.autoResize, props.minRows, props.maxRows],
-      () => {
-        if (!props.autoResize) return;
-        vue.nextTick(adjustHeight);
-      }
-    );
-    vue.watch(textareaRef, (textarea) => {
-      if (!textarea || !props.autoResize) return;
+    vue.watch([localValue, () => props.autoResize, () => props.minRows, () => props.maxRows], () => {
+      if (!props.autoResize) return;
       vue.nextTick(adjustHeight);
     });
+    vue.onMounted(() => {
+      if (props.autoResize) vue.nextTick(adjustHeight);
+    });
     return () => {
       const children = [
         vue.h("textarea", {

package/dist/{chunk-UBMNR3BJ.js → chunk-6MJBCXPO.js}

@@ -65,6 +65,14 @@ var Dropdown = vue.defineComponent({
       type: Boolean,
       default: true
     },
+    /**
+     * Whether to show the dropdown arrow/chevron indicator
+     * @default true
+     */
+    showArrow: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Additional CSS classes
      */
@@ -82,10 +90,11 @@ var Dropdown = vue.defineComponent({
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
+    vue.onMounted(() => tigercatCore.injectDropdownStyles());
     const internalVisible = vue.ref(props.defaultVisible);
-    const currentVisible = vue.computed(() => {
-      return props.visible !== void 0 ? props.visible : internalVisible.value;
-    });
+    const currentVisible = vue.computed(
+      () => props.visible !== void 0 ? props.visible : internalVisible.value
+    );
     const containerRef = vue.ref(null);
     const triggerRef = vue.ref(null);
     const floatingRef = vue.ref(null);
@@ -98,28 +107,18 @@ var Dropdown = vue.defineComponent({
       emit("visible-change", visible);
     };
     const handleItemClick = () => {
-      if (props.closeOnClick) {
-        setVisible(false);
-      }
+      if (props.closeOnClick) setVisible(false);
     };
     let hoverTimer = null;
     const handleMouseEnter = () => {
       if (props.trigger !== "hover") return;
-      if (hoverTimer) {
-        clearTimeout(hoverTimer);
-      }
-      hoverTimer = setTimeout(() => {
-        setVisible(true);
-      }, 100);
+      if (hoverTimer) clearTimeout(hoverTimer);
+      hoverTimer = setTimeout(() => setVisible(true), 100);
     };
     const handleMouseLeave = () => {
       if (props.trigger !== "hover") return;
-      if (hoverTimer) {
-        clearTimeout(hoverTimer);
-      }
-      hoverTimer = setTimeout(() => {
-        setVisible(false);
-      }, 150);
+      if (hoverTimer) clearTimeout(hoverTimer);
+      hoverTimer = setTimeout(() => setVisible(false), 150);
     };
     const handleClick = () => {
       if (props.trigger !== "click") return;
@@ -141,10 +140,8 @@ var Dropdown = vue.defineComponent({
     vue.watch(
       clickOutsideEnabled,
       (enabled) => {
-        if (cleanupClickOutside) {
-          cleanupClickOutside();
-          cleanupClickOutside = null;
-        }
+        cleanupClickOutside?.();
+        cleanupClickOutside = null;
         if (enabled) {
           cleanupClickOutside = chunkIVTBNUKQ_js.useVueClickOutside({
             enabled: currentVisible,
@@ -160,10 +157,8 @@ var Dropdown = vue.defineComponent({
     vue.watch(
       currentVisible,
       (visible) => {
-        if (cleanupEscapeKey) {
-          cleanupEscapeKey();
-          cleanupEscapeKey = null;
-        }
+        cleanupEscapeKey?.();
+        cleanupEscapeKey = null;
         if (visible) {
           cleanupEscapeKey = chunkIVTBNUKQ_js.useVueEscapeKey({
             enabled: currentVisible,
@@ -174,29 +169,21 @@ var Dropdown = vue.defineComponent({
       { immediate: true }
     );
     vue.onBeforeUnmount(() => {
-      if (hoverTimer) {
-        clearTimeout(hoverTimer);
-      }
-      if (cleanupClickOutside) {
-        cleanupClickOutside();
-      }
-      if (cleanupEscapeKey) {
-        cleanupEscapeKey();
-      }
+      if (hoverTimer) clearTimeout(hoverTimer);
+      cleanupClickOutside?.();
+      cleanupEscapeKey?.();
     });
-    const containerClasses = vue.computed(() => {
-      return tigercatCore.classNames(
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
         tigercatCore.getDropdownContainerClasses(),
         "tiger-dropdown-container",
         props.className,
         tigercatCore.coerceClassValue(attrsClass)
-      );
-    });
+      )
+    );
     const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrsStyle, props.style));
-    const triggerClasses = vue.computed(() => {
-      return tigercatCore.getDropdownTriggerClasses(props.disabled);
-    });
-    const menuWrapperClasses = vue.computed(() => "absolute z-50");
+    const triggerClasses = vue.computed(() => tigercatCore.getDropdownTriggerClasses(props.disabled));
+    const menuWrapperClasses = tigercatCore.classNames("absolute z-50", tigercatCore.DROPDOWN_ENTER_CLASS);
     const menuWrapperStyles = vue.computed(() => ({
       position: "absolute",
       left: `${x.value}px`,
@@ -209,9 +196,7 @@ var Dropdown = vue.defineComponent({
     });
     return () => {
       const defaultSlot = slots.default?.();
-      if (!defaultSlot || defaultSlot.length === 0) {
-        return null;
-      }
+      if (!defaultSlot || defaultSlot.length === 0) return null;
       let triggerNode = null;
       let menuNode = null;
       defaultSlot.forEach((node) => {
@@ -221,6 +206,20 @@ var Dropdown = vue.defineComponent({
         }
         triggerNode = node;
       });
+      const chevronNode = props.showArrow ? vue.h(
+        "svg",
+        {
+          class: tigercatCore.getDropdownChevronClasses(currentVisible.value),
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        },
+        [vue.h("path", { d: tigercatCore.DROPDOWN_CHEVRON_PATH })]
+      ) : null;
       const trigger = triggerNode ? vue.h(
         "div",
         {
@@ -232,13 +231,13 @@ var Dropdown = vue.defineComponent({
           "aria-haspopup": "menu",
           "aria-expanded": currentVisible.value
         },
-        triggerNode
+        [triggerNode, chevronNode]
       ) : null;
       const menu = menuNode ? vue.h(
         "div",
         {
           ref: floatingRef,
-          class: menuWrapperClasses.value,
+          class: menuWrapperClasses,
           style: menuWrapperStyles.value,
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,

package/dist/{chunk-6SC33HJA.js → chunk-6PZZNM3S.js}

@@ -191,15 +191,8 @@ var Drawer = vue.defineComponent({
     vue.watch(
       () => props.visible,
       (nextVisible, prevVisible, onCleanup) => {
-        if (typeof prevVisible === "undefined") {
-          if (!nextVisible) return;
-          const timer2 = window.setTimeout(() => {
-            emit("after-enter");
-          }, tigercatCore.ANIMATION_DURATION_MS);
-          onCleanup(() => window.clearTimeout(timer2));
+        if (nextVisible === prevVisible || typeof prevVisible === "undefined" && !nextVisible)
           return;
-        }
-        if (nextVisible === prevVisible) return;
         const timer = window.setTimeout(() => {
           emit(nextVisible ? "after-enter" : "after-leave");
         }, tigercatCore.ANIMATION_DURATION_MS);
@@ -215,7 +208,7 @@ var Drawer = vue.defineComponent({
       const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
       const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.header ? titleId.value : void 0);
       const containerClasses = tigercatCore.classNames(
-        tigercatCore.getDrawerContainerClasses(props.zIndex),
+        tigercatCore.getDrawerContainerClasses(),
         !props.visible && "pointer-events-none"
       );
       const maskClasses = tigercatCore.getDrawerMaskClasses(props.visible);

package/dist/{chunk-BWKN2DGI.mjs → chunk-6V7XCCXN.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, h } from 'vue';
-import { classNames, textSizeClasses, textWeightClasses, textAlignClasses, textColorClasses, textDecorationClasses } from '@expcat/tigercat-core';
+import { getTextClasses } from '@expcat/tigercat-core';
 
 // src/components/Text.ts
 var Text = defineComponent({
@@ -77,29 +77,8 @@ var Text = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const textClasses = computed(() => {
-      return classNames(
-        textSizeClasses[props.size],
-        textWeightClasses[props.weight],
-        props.align && textAlignClasses[props.align],
-        textColorClasses[props.color],
-        props.truncate && textDecorationClasses.truncate,
-        props.italic && textDecorationClasses.italic,
-        props.underline && textDecorationClasses.underline,
-        props.lineThrough && textDecorationClasses.lineThrough
-      );
-    });
-    return () => {
-      return h(
-        props.tag,
-        {
-          ...attrs,
-          class: [textClasses.value, attrs.class],
-          style: attrs.style
-        },
-        slots.default?.()
-      );
-    };
+    const textClasses = computed(() => getTextClasses(props));
+    return () => h(props.tag, { ...attrs, class: [textClasses.value, attrs.class] }, slots.default?.());
   }
 });
 var Text_default = Text;