@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-ONSDH4KJ.mjs

@@ -0,0 +1,286 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Form.ts
+import {
+  defineComponent,
+  provide,
+  computed,
+  h,
+  ref,
+  watch,
+  onBeforeUnmount,
+  inject
+} from "vue";
+import {
+  classNames,
+  assignFormValues,
+  createFormEngine,
+  createFormErrorMap,
+  focusFirstInvalidField,
+  mergeTigerLocale,
+  getFormValidationLabels
+} from "@expcat/tigercat-core";
+var FormContextKey = /* @__PURE__ */ Symbol("FormContext");
+function useFormContext() {
+  return inject(FormContextKey, null);
+}
+function isFormEngine(controller) {
+  return typeof controller.replaceValues === "function";
+}
+var Form = defineComponent({
+  name: "TigerForm",
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    controller: {
+      type: Object,
+      default: void 0
+    },
+    rules: {
+      type: Object
+    },
+    labelWidth: {
+      type: [String, Number]
+    },
+    labelPosition: {
+      type: String,
+      default: "left"
+    },
+    labelAlign: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    inlineMessage: {
+      type: Boolean,
+      default: true
+    },
+    showRequiredAsterisk: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    fieldDependencies: {
+      type: Object,
+      default: void 0
+    },
+    conditions: {
+      type: Object,
+      default: void 0
+    },
+    validateDebounce: {
+      type: Number,
+      default: 0
+    },
+    undoable: {
+      type: Boolean,
+      default: false
+    },
+    maxHistorySize: {
+      type: Number,
+      default: 50
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    submit: (_data) => true,
+    validate: (fieldName, isValid, _errorMessage) => typeof fieldName === "string" && typeof isValid === "boolean",
+    "update:model": (_values) => true
+  },
+  setup(props, { slots, emit, expose }) {
+    const config = useTigerConfig();
+    const formElementRef = ref(null);
+    const ownedEngine = props.controller && isFormEngine(props.controller) ? null : createFormEngine({
+      initialValues: props.model ?? {},
+      undoable: props.undoable,
+      maxHistorySize: props.maxHistorySize,
+      getRules: () => props.rules,
+      getConditions: () => props.conditions,
+      getFieldDependencies: () => props.fieldDependencies,
+      getMessages: () => getFormValidationLabels(mergeTigerLocale(config.value.locale, props.locale)),
+      getValidateDebounce: () => props.validateDebounce,
+      onValidate: (fieldName, valid, error) => emit("validate", fieldName, valid, error ?? void 0),
+      onValuesChange: (next) => {
+        if (props.model) {
+          assignFormValues(props.model, next);
+        }
+        emit("update:model", next);
+      }
+    });
+    const engine = () => {
+      if (props.controller && isFormEngine(props.controller)) {
+        return props.controller;
+      }
+      if (!ownedEngine) {
+        throw new Error("Form is missing a form engine");
+      }
+      return ownedEngine;
+    };
+    const errors = ref(engine().getErrors());
+    const values = ref(engine().getValues());
+    const canUndoNow = ref(engine().canUndo);
+    const canRedoNow = ref(engine().canRedo);
+    const stop = engine().subscribe(() => {
+      const current = engine();
+      errors.value = current.getErrors();
+      values.value = current.getValues();
+      canUndoNow.value = current.canUndo;
+      canRedoNow.value = current.canRedo;
+    });
+    watch(
+      () => props.model,
+      (next) => {
+        if (props.controller || !next) return;
+        engine().replaceValues(next);
+      },
+      { deep: true }
+    );
+    watch(
+      () => [
+        props.controller,
+        props.rules,
+        props.conditions,
+        props.fieldDependencies,
+        props.validateDebounce,
+        props.locale,
+        config.value.locale
+      ],
+      () => {
+        if (props.controller && isFormEngine(props.controller)) {
+          props.controller.setOptions({
+            rules: props.rules,
+            conditions: props.conditions,
+            fieldDependencies: props.fieldDependencies,
+            validateDebounce: props.validateDebounce,
+            messages: getFormValidationLabels(mergeTigerLocale(config.value.locale, props.locale))
+          });
+        }
+      }
+    );
+    onBeforeUnmount(() => {
+      stop();
+      ownedEngine?.dispose();
+    });
+    const errorsByField = computed(() => createFormErrorMap(errors.value));
+    const validateField = async (fieldName, rulesOverride, trigger) => {
+      await engine().validateField(fieldName, rulesOverride, trigger);
+    };
+    const submitForm = async () => {
+      if (props.loading) return false;
+      const current = engine();
+      const valid = await current.validate();
+      if (!valid) {
+        focusFirstInvalidField(formElementRef.value);
+      }
+      emit("submit", { valid, values: current.getValues(), errors: current.getErrors() });
+      return valid;
+    };
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      await submitForm();
+    };
+    const handleReset = (event) => {
+      event.preventDefault();
+      engine().reset();
+    };
+    const formContextValue = computed(() => ({
+      model: values.value,
+      rules: props.rules,
+      labelWidth: props.labelWidth,
+      labelPosition: props.labelPosition,
+      labelAlign: props.labelAlign,
+      size: props.size,
+      inlineMessage: props.inlineMessage,
+      showRequiredAsterisk: props.showRequiredAsterisk,
+      disabled: props.disabled,
+      loading: props.loading,
+      errors: errors.value,
+      errorsByField: errorsByField.value,
+      registerFieldRules: (fieldName, nextRules) => engine().registerFieldRules(fieldName, nextRules),
+      registerFieldCondition: (fieldName, condition) => engine().registerFieldCondition(fieldName, condition),
+      getFieldConditionState: (fieldName, override) => engine().getFieldConditionState(fieldName, override),
+      validateField,
+      clearValidate: (fieldNames) => engine().clearValidate(fieldNames),
+      getFieldValue: (fieldName) => engine().getFieldValue(fieldName),
+      updateValue: (fieldName, value) => engine().setFieldValue(fieldName, value),
+      validate: () => engine().validate(),
+      validateFields: (fieldNames) => engine().validateFields(fieldNames),
+      getValues: () => engine().getValues(),
+      submit: submitForm
+    }));
+    provide(FormContextKey, formContextValue);
+    const handle = {
+      validate: () => engine().validate(),
+      validateFields: (fieldNames) => engine().validateFields(fieldNames),
+      validateField,
+      clearValidate: (fieldNames) => engine().clearValidate(fieldNames),
+      resetFields: () => engine().reset(),
+      addField: (fieldName, defaultValue) => engine().addField(fieldName, defaultValue),
+      removeField: (fieldName) => engine().removeField(fieldName),
+      undo: () => engine().undo(),
+      redo: () => engine().redo(),
+      snapshotHistory: () => engine().snapshotHistory(),
+      get canUndo() {
+        return canUndoNow.value;
+      },
+      get canRedo() {
+        return canRedoNow.value;
+      }
+    };
+    expose(handle);
+    const formClasses = computed(
+      () => classNames(
+        "tiger-form",
+        `tiger-form--label-${props.labelPosition}`,
+        props.disabled && "tiger-form--disabled",
+        props.loading && "tiger-form--loading"
+      )
+    );
+    return () => h(
+      "form",
+      {
+        ref: formElementRef,
+        class: formClasses.value,
+        noValidate: true,
+        "aria-busy": props.loading || void 0,
+        onSubmit: handleSubmit,
+        onReset: handleReset
+      },
+      [
+        h(
+          "fieldset",
+          {
+            disabled: props.disabled || props.loading,
+            class: "contents m-0 min-w-0 border-0 p-0"
+          },
+          slots.default?.()
+        )
+      ]
+    );
+  }
+});
+var Form_default = Form;
+
+export {
+  FormContextKey,
+  useFormContext,
+  Form,
+  Form_default
+};

package/dist/{chunk-PMQSXEMT.mjs → chunk-OZZKYZD6.mjs}

@@ -1,16 +1,16 @@
 import {
   useVueAnchoredOverlay
-} from "./chunk-Q7Y22OFX.mjs";
+} from "./chunk-VFRB5L7W.mjs";
 
-// src/utils/use-floating-popup.ts
+// src/utils/use-popup.ts
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 import {
-  buildTriggerHandlerMap,
+  buildOverlayTriggerHandlerMap,
   createFloatingHoverDelayController,
   restoreFocus
 } from "@expcat/tigercat-core";
-function useFloatingPopup(options) {
-  const { props, emit, multiTrigger = true } = options;
+function usePopup(options) {
+  const { props, emit, multiTrigger = true, arrowRef } = options;
   const internalVisible = ref(props.open ?? props.defaultOpen ?? false);
   const isControlled = computed(() => props.open !== void 0);
   watch(
@@ -24,6 +24,7 @@ function useFloatingPopup(options) {
   );
   const setVisible = (next) => {
     if (props.disabled && next) return;
+    if (next === currentVisible.value) return;
     if (!isControlled.value) internalVisible.value = next;
     emit("update:open", next);
     emit("open-change", next);
@@ -36,17 +37,13 @@ function useFloatingPopup(options) {
   const triggerRef = ref(null);
   const floatingRef = ref(null);
   const restoreTriggerFocus = () => {
-    const trigger = triggerRef.value;
-    const target = trigger?.querySelector(
-      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
-    ) ?? trigger;
     window.setTimeout(() => {
-      restoreFocus(target, { preventScroll: true });
+      restoreFocus(triggerRef.value, { preventScroll: true });
     }, 0);
   };
   const closeAndRestoreFocus = () => {
     hoverController.closeNow();
-    restoreTriggerFocus();
+    if (effectiveTrigger.value !== "hover") restoreTriggerFocus();
   };
   const effectiveTrigger = computed(
     () => multiTrigger ? props.trigger ?? "click" : "click"
@@ -56,10 +53,13 @@ function useFloatingPopup(options) {
     referenceRef: triggerRef,
     floatingRef,
     containerRef,
-    placement: props.placement ?? "top",
-    offset: props.offset ?? 8,
-    dismissOnOutside: computed(() => effectiveTrigger.value === "click"),
+    placement: () => props.placement ?? "top",
+    offset: () => props.offset ?? 8,
+    dismissOnOutside: computed(
+      () => effectiveTrigger.value === "click" || effectiveTrigger.value === "hover"
+    ),
     dismissOnEscape: computed(() => effectiveTrigger.value !== "manual"),
+    arrowRef,
     onDismiss: (reason) => {
       if (reason === "escape") {
         closeAndRestoreFocus();
@@ -84,8 +84,12 @@ function useFloatingPopup(options) {
     hoverController.cancel();
     setVisible(true);
   };
-  const handleHide = () => {
+  const handleHide = (event) => {
     if (props.disabled) return;
+    const related = event?.relatedTarget;
+    if (related instanceof Node && (floatingRef.value?.contains(related) || triggerRef.value?.contains(related))) {
+      return;
+    }
     if (effectiveTrigger.value === "hover") {
       hoverController.leave();
       return;
@@ -114,7 +118,7 @@ function useFloatingPopup(options) {
     if (!multiTrigger) {
       return { onClick: handleToggle };
     }
-    return buildTriggerHandlerMap(
+    return buildOverlayTriggerHandlerMap(
       effectiveTrigger.value,
       { toggle: handleToggle, show: handleShow, hide: handleHide },
       "vue"
@@ -134,10 +138,12 @@ function useFloatingPopup(options) {
     positioned: overlay.positioned,
     overlayTarget: overlay.target,
     triggerHandlers,
-    closeAndRestoreFocus
+    closeAndRestoreFocus,
+    arrowX: overlay.arrowX,
+    arrowY: overlay.arrowY
   };
 }
 
 export {
-  useFloatingPopup
+  usePopup
 };

package/dist/chunk-P7TCGBAE.mjs

@@ -0,0 +1,109 @@
+import {
+  ImagePreview
+} from "./chunk-NVL4UWPJ.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/ImageGroup.ts
+import { defineComponent, h, ref, provide, onBeforeUnmount } from "vue";
+import {
+  clampImageGroupPreviewIndex,
+  coerceClassValue,
+  getImageGroupClasses,
+  getImageGroupItemIndex,
+  getImageGroupLightboxItems,
+  getImageLabels,
+  registerImageGroupItem,
+  resolveImageGroupName,
+  unregisterImageGroupItem
+} from "@expcat/tigercat-core";
+var IMAGE_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerImageGroup");
+var ImageGroup = defineComponent({
+  name: "TigerImageGroup",
+  inheritAttrs: false,
+  props: {
+    preview: { type: Boolean, default: true },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["preview-open-change"],
+  setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
+    const images = ref([]);
+    const previewVisible = ref(false);
+    const previewIndex = ref(0);
+    const context = {
+      get preview() {
+        return props.preview;
+      },
+      register(item) {
+        images.value = registerImageGroupItem(images.value, item).items;
+      },
+      unregister(id) {
+        images.value = unregisterImageGroupItem(images.value, id);
+      },
+      openPreview(id) {
+        if (!props.preview) return;
+        const index = getImageGroupItemIndex(images.value, id);
+        if (index < 0) return;
+        previewIndex.value = index;
+        previewVisible.value = true;
+        emit("preview-open-change", true);
+      }
+    };
+    provide(IMAGE_GROUP_INJECTION_KEY, context);
+    onBeforeUnmount(() => {
+      images.value = [];
+    });
+    return () => {
+      const children = slots.default?.();
+      const labels = getImageLabels(config.value.locale);
+      const srcs = getImageGroupLightboxItems(images.value);
+      const currentIndex = clampImageGroupPreviewIndex(previewIndex.value, srcs.length);
+      const groupName = resolveImageGroupName({
+        ariaLabel: attrs["aria-label"],
+        ariaLabelledby: attrs["aria-labelledby"],
+        localeLabel: labels.groupAriaLabel
+      });
+      const preview = props.preview ? h(ImagePreview, {
+        open: previewVisible.value && srcs.length > 0,
+        images: srcs,
+        currentIndex,
+        "onUpdate:open": (val) => {
+          previewVisible.value = val;
+          if (!val) emit("preview-open-change", false);
+        },
+        "onUpdate:currentIndex": (val) => {
+          previewIndex.value = val;
+        }
+      }) : null;
+      const restAttrs = { ...attrs };
+      delete restAttrs.class;
+      delete restAttrs.className;
+      delete restAttrs["aria-label"];
+      delete restAttrs["aria-labelledby"];
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          class: getImageGroupClasses(
+            props.className,
+            coerceClassValue(attrs.class),
+            coerceClassValue(attrs.className)
+          ),
+          role: groupName.role,
+          "aria-label": groupName["aria-label"],
+          "aria-labelledby": groupName["aria-labelledby"]
+        },
+        [children, preview]
+      );
+    };
+  }
+});
+var ImageGroup_default = ImageGroup;
+
+export {
+  IMAGE_GROUP_INJECTION_KEY,
+  ImageGroup,
+  ImageGroup_default
+};

package/dist/chunk-PJHLYJD5.mjs

@@ -0,0 +1,64 @@
+// src/components/Row.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getRowAlignJustifyVars,
+  getRowClasses,
+  getRowGutterStyleVars
+} from "@expcat/tigercat-core";
+var Row = defineComponent({
+  name: "TigerRow",
+  inheritAttrs: false,
+  props: {
+    gutter: {
+      type: [Number, Array],
+      default: 0
+    },
+    align: {
+      type: String,
+      default: "top"
+    },
+    justify: {
+      type: String,
+      default: "start"
+    },
+    wrap: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const rowStyle = computed(() => ({
+      ...getRowGutterStyleVars(props.gutter),
+      ...getRowAlignJustifyVars(props.align, props.justify)
+    }));
+    const rowClasses = computed(
+      () => classNames(
+        getRowClasses({ wrap: props.wrap }),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    return () => {
+      const { class: _class, style: attrsStyle, ...rest } = attrs;
+      return h(
+        "div",
+        {
+          ...rest,
+          class: rowClasses.value,
+          style: [rowStyle.value, attrsStyle]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+export {
+  Row
+};

package/dist/{chunk-JHFM6IFO.mjs → chunk-PVJDEAOW.mjs}

@@ -1,9 +1,12 @@
+import {
+  flattenSlotVNodes
+} from "./chunk-FEVDV3I6.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/AvatarGroup.ts
-import { computed, defineComponent, h, provide, reactive, watch } from "vue";
+import { computed, defineComponent, h, provide, reactive, watch, Text } from "vue";
 import {
   coerceClassValue,
   getAvatarGroupClasses,
@@ -28,16 +31,18 @@ var AvatarGroup = defineComponent({
       type: String,
       default: void 0
     },
+    shape: {
+      type: String,
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
     },
-    /** Locale overrides merged on top of ConfigProvider locale */
     locale: {
       type: Object,
       default: void 0
     },
-    /** Text/aria label overrides */
     labels: {
       type: Object,
       default: void 0
@@ -49,23 +54,27 @@ var AvatarGroup = defineComponent({
     const labels = computed(() => getAvatarGroupLabels(mergedLocale.value, props.labels));
     const groupContext = reactive({
       size: props.size,
+      shape: props.shape,
       itemClass: getAvatarGroupItemClasses()
     });
     watch(
-      () => props.size,
-      (size) => {
+      () => [props.size, props.shape],
+      ([size, shape]) => {
         groupContext.size = size;
+        groupContext.shape = shape;
       }
     );
     provide(AVATAR_GROUP_INJECTION_KEY, groupContext);
     return () => {
-      const children = slots.default?.() ?? [];
-      const flatChildren = children.flatMap(
-        (vnode) => Array.isArray(vnode.children) ? vnode.children : [vnode]
-      );
+      const avatars = flattenSlotVNodes(slots.default?.()).filter((child) => {
+        if (child.type === Text) return false;
+        const type = child.type;
+        return typeof type === "object" && type?.name === "TigerAvatar";
+      });
       const attrsRecord = attrs;
       const attrsClass = attrsRecord.class;
-      const { visibleItems, overflowCount } = getVisibleGroupItems(flatChildren, props.max);
+      const { visibleItems, overflowCount, visibleCount } = getVisibleGroupItems(avatars, props.max);
+      const overflowShape = props.shape ?? "circle";
       return h(
         "div",
         {
@@ -79,7 +88,12 @@ var AvatarGroup = defineComponent({
           overflowCount > 0 ? h(
             "span",
             {
-              class: getAvatarGroupOverflowClasses(props.size ?? "md"),
+              class: getAvatarGroupOverflowClasses(
+                props.size ?? "md",
+                overflowShape,
+                visibleCount > 0
+              ),
+              role: "img",
               "aria-label": getAvatarGroupOverflowLabel(
                 overflowCount,
                 labels.value.overflowAriaLabel