@expcat/tigercat-vue 1.1.0 → 1.2.14

package/dist/{chunk-MZHQAT4I.mjs → chunk-LDDGBB3V.mjs}

@@ -1,12 +1,63 @@
-import { defineComponent, ref, computed, provide, onMounted, watch, h, inject, onBeforeUnmount, nextTick, isVNode, cloneVNode } from 'vue';
-import { classNames, getMenuClasses, coerceClassValue, mergeStyleValues, isKeySelected, getMenuItemClasses, getMenuItemIndent, menuItemIconClasses, menuItemGroupTitleClasses, isKeyOpen, getSubMenuTitleClasses, submenuContentHorizontalClasses, submenuContentHorizontalNestedClasses, submenuContentPopupClasses, submenuContentInlineClasses, submenuContentVerticalClasses, getSubmenuPopupZIndex, getInitialSubmenuHeightTransitionStyle, submenuHeightTransitionClasses, toggleKey, replaceKeys, initRovingTabIndex, moveFocusInMenu, focusMenuEdge, createSubmenuHeightTransitionController, getSubMenuExpandIconClasses, focusFirstChildItem } from '@expcat/tigercat-core';
-
 // src/components/Menu.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  provide,
+  inject,
+  h,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  cloneVNode,
+  isVNode
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getMenuClasses,
+  getMenuItemClasses,
+  getMenuItemIndent,
+  getSubMenuTitleClasses,
+  getSubMenuExpandIconClasses,
+  getSubmenuPopupZIndex,
+  filterMenuItems,
+  isKeySelected,
+  isKeyOpen,
+  menuItemIconClasses,
+  menuItemGroupTitleClasses,
+  menuSearchFieldClasses,
+  menuSearchEmptyClasses,
+  menuSearchInputClasses,
+  mergeStyleValues,
+  moveFocusInMenu,
+  focusMenuEdge,
+  focusFirstChildItem,
+  submenuContentHorizontalClasses,
+  submenuContentHorizontalNestedClasses,
+  submenuContentPopupClasses,
+  submenuContentVerticalClasses,
+  submenuContentInlineClasses,
+  submenuHeightTransitionClasses,
+  getInitialSubmenuHeightTransitionStyle,
+  createSubmenuHeightTransitionController,
+  replaceKeys,
+  toggleKey,
+  initRovingTabIndex
+} from "@expcat/tigercat-core";
 var MenuContextKey = /* @__PURE__ */ Symbol("MenuContext");
 var Menu = defineComponent({
   name: "TigerMenu",
   inheritAttrs: false,
   props: {
+    /**
+     * Data-driven menu items
+     */
+    items: {
+      type: Array,
+      default: void 0
+    },
     /**
      * Menu mode - horizontal, vertical, or inline
      * @default 'vertical'
@@ -82,13 +133,41 @@ var Menu = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    searchValue: {
+      type: String,
+      default: void 0
+    },
+    defaultSearchValue: {
+      type: String,
+      default: ""
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "Search menu"
+    },
+    emptyText: {
+      type: String,
+      default: "No menu items found"
     }
   },
-  emits: ["update:selectedKeys", "update:openKeys", "select", "open-change"],
+  emits: [
+    "update:selectedKeys",
+    "update:openKeys",
+    "update:searchValue",
+    "select",
+    "open-change",
+    "search"
+  ],
   setup(props, { slots, emit, attrs }) {
     const menuEl = ref(null);
     const internalSelectedKeys = ref(props.defaultSelectedKeys);
     const internalOpenKeys = ref(props.defaultOpenKeys);
+    const internalSearchValue = ref(props.defaultSearchValue);
     const currentSelectedKeys = computed(() => {
       return props.selectedKeys !== void 0 ? props.selectedKeys : internalSelectedKeys.value;
     });
@@ -112,6 +191,14 @@ var Menu = defineComponent({
       emit("update:openKeys", newOpenKeys);
       emit("open-change", key, { openKeys: newOpenKeys });
     };
+    const handleSearchInput = (event) => {
+      const value = event.target.value;
+      if (props.searchValue === void 0) {
+        internalSearchValue.value = value;
+      }
+      emit("update:searchValue", value);
+      emit("search", value);
+    };
     const menuClasses = computed(() => {
       return classNames(
         getMenuClasses(props.mode, props.theme, props.collapsed),
@@ -120,6 +207,12 @@ var Menu = defineComponent({
       );
     });
     const menuStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    const currentSearchValue = computed(() => {
+      return props.searchValue !== void 0 ? props.searchValue : internalSearchValue.value;
+    });
+    const filteredItems = computed(
+      () => filterMenuItems(props.items ?? [], currentSearchValue.value)
+    );
     const passthroughAttrs = computed(() => {
       const { class: _class, style: _style, ...rest } = attrs;
       return rest;
@@ -146,13 +239,57 @@ var Menu = defineComponent({
       void runRovingTabIndex();
     });
     watch(
-      [modeRef, collapsedRef, currentSelectedKeys, currentOpenKeys],
+      [modeRef, collapsedRef, currentSelectedKeys, currentOpenKeys, filteredItems],
       () => {
         void runRovingTabIndex();
       },
       { deep: true }
     );
     return () => {
+      const renderDataItem = (item) => {
+        if (item.children && item.children.length > 0) {
+          return h(
+            SubMenu,
+            {
+              key: item.key,
+              itemKey: item.key,
+              title: item.label,
+              icon: item.icon,
+              disabled: item.disabled
+            },
+            () => item.children.map(renderDataItem)
+          );
+        }
+        return h(
+          MenuItem,
+          {
+            key: item.key,
+            itemKey: item.key,
+            icon: item.icon,
+            disabled: item.disabled
+          },
+          () => item.label
+        );
+      };
+      const dataChildren = filteredItems.value.map(renderDataItem);
+      const slotChildren = slots.default?.() ?? [];
+      const searchChild = props.searchable ? [
+        h("li", { role: "none", class: menuSearchFieldClasses }, [
+          h("input", {
+            type: "search",
+            value: currentSearchValue.value,
+            placeholder: props.searchPlaceholder,
+            class: menuSearchInputClasses,
+            "aria-label": props.searchPlaceholder,
+            onInput: handleSearchInput
+          })
+        ])
+      ] : [];
+      const emptyChild = props.items && props.items.length > 0 && dataChildren.length === 0 && slotChildren.length === 0 ? [
+        h("li", { role: "none" }, [
+          h("div", { class: menuSearchEmptyClasses }, props.emptyText)
+        ])
+      ] : [];
       return h(
         "ul",
         {
@@ -164,7 +301,7 @@ var Menu = defineComponent({
           "data-tiger-menu-mode": props.mode,
           ...passthroughAttrs.value
         },
-        slots.default?.()
+        [...searchChild, ...dataChildren, ...slotChildren, ...emptyChild]
       );
     };
   }
@@ -228,7 +365,12 @@ var MenuItem = defineComponent({
       }
       const effectiveCollapsed = props.collapsed ?? menuContext.collapsed.value;
       return classNames(
-        getMenuItemClasses(isSelected.value, props.disabled, menuContext.theme.value, effectiveCollapsed),
+        getMenuItemClasses(
+          isSelected.value,
+          props.disabled,
+          menuContext.theme.value,
+          effectiveCollapsed
+        ),
         props.className,
         coerceClassValue(attrs.class)
       );
@@ -758,4 +900,11 @@ var SubMenu = defineComponent({
   }
 });
 
-export { Menu, MenuContextKey, MenuItem, MenuItemGroup, Menu_default, SubMenu };
+export {
+  MenuContextKey,
+  Menu,
+  Menu_default,
+  MenuItem,
+  MenuItemGroup,
+  SubMenu
+};

package/dist/{chunk-5YFSAKRQ.mjs → chunk-LFKY2QRD.mjs}

@@ -1,7 +1,32 @@
-import { defineComponent, reactive, computed, ref, provide, h } from 'vue';
-import { createFormErrorMap, createFormHistory, canUndo, canRedo, classNames, getDependentFields, pushFormHistory, redoFormHistory, undoFormHistory, validateForm, getValueByPath, validateField } from '@expcat/tigercat-core';
-
 // src/components/Form.ts
+import {
+  defineComponent,
+  provide,
+  reactive,
+  computed,
+  h,
+  ref,
+  watch,
+  onBeforeUnmount
+} from "vue";
+import {
+  classNames,
+  validateForm,
+  validateField as validateFieldUtil,
+  getValueByPath,
+  createFormErrorMap,
+  getDependentFields,
+  createFormConditionDependencies,
+  resolveConditionalFormRules,
+  resolveFormFieldConditionState,
+  createFormValidationDebouncer,
+  createFormHistory,
+  pushFormHistory,
+  undoFormHistory,
+  redoFormHistory,
+  canUndo,
+  canRedo
+} from "@expcat/tigercat-core";
 var FormContextKey = /* @__PURE__ */ Symbol("FormContext");
 var Form = defineComponent({
   name: "TigerForm",
@@ -87,6 +112,14 @@ var Form = defineComponent({
       type: Object,
       default: void 0
     },
+    conditions: {
+      type: Object,
+      default: void 0
+    },
+    validateDebounce: {
+      type: Number,
+      default: 0
+    },
     undoable: {
       type: Boolean,
       default: false
@@ -109,7 +142,11 @@ var Form = defineComponent({
   setup(props, { slots, emit, expose }) {
     const errors = reactive([]);
     const fieldRules = reactive({});
+    const fieldConditions = reactive({});
     const errorsByField = computed(() => createFormErrorMap(errors));
+    let validationDebouncer = createFormValidationDebouncer({
+      delay: props.validateDebounce
+    });
     const history = ref(
       createFormHistory(props.model ?? {}, props.maxHistorySize)
     );
@@ -123,15 +160,61 @@ var Form = defineComponent({
       }
       fieldRules[fieldName] = rules;
     };
-    const getEffectiveRules = () => {
+    const registerFieldCondition = (fieldName, condition) => {
+      if (!fieldName) {
+        return;
+      }
+      if (!condition) {
+        delete fieldConditions[fieldName];
+        return;
+      }
+      fieldConditions[fieldName] = condition;
+    };
+    const getEffectiveConditions = () => {
       const merged = {
+        ...props.conditions ?? {},
+        ...fieldConditions
+      };
+      return Object.keys(merged).length > 0 ? merged : void 0;
+    };
+    const getMergedFieldCondition = (fieldName, conditionOverride) => {
+      const base = getEffectiveConditions()?.[fieldName];
+      return base || conditionOverride ? { ...base ?? {}, ...conditionOverride ?? {} } : void 0;
+    };
+    const getFieldConditionState = (fieldName, conditionOverride) => {
+      return resolveFormFieldConditionState(
+        props.model,
+        getMergedFieldCondition(fieldName, conditionOverride)
+      );
+    };
+    const getEffectiveRules = () => {
+      const mergedRules = {
         ...props.rules ?? {},
         ...fieldRules
       };
-      return Object.keys(merged).length > 0 ? merged : void 0;
+      const rules = Object.keys(mergedRules).length > 0 ? mergedRules : void 0;
+      return resolveConditionalFormRules(props.model, rules, getEffectiveConditions());
     };
     const resolveFieldRules = (fieldName, rulesOverride) => {
-      return rulesOverride ?? fieldRules[fieldName] ?? props.rules?.[fieldName];
+      const fieldRulesValue = rulesOverride ?? fieldRules[fieldName] ?? props.rules?.[fieldName];
+      const resolved = resolveConditionalFormRules(
+        props.model,
+        fieldRulesValue ? { [fieldName]: fieldRulesValue } : void 0,
+        getEffectiveConditions()
+      );
+      return resolved?.[fieldName];
+    };
+    const getDependencyMap = () => {
+      const conditionDependencies = createFormConditionDependencies(getEffectiveConditions());
+      if (!props.fieldDependencies && conditionDependencies.size === 0) {
+        return void 0;
+      }
+      const merged = new Map(props.fieldDependencies ?? []);
+      for (const [fieldName, dependencies] of conditionDependencies.entries()) {
+        const current = merged.get(fieldName) ?? [];
+        merged.set(fieldName, Array.from(/* @__PURE__ */ new Set([...current, ...dependencies])));
+      }
+      return merged;
     };
     const runFieldValidation = async (fieldName, rulesOverride, trigger) => {
       const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
@@ -139,15 +222,23 @@ var Form = defineComponent({
         return null;
       }
       const value = getValueByPath(props.model, fieldName);
-      return validateField(fieldName, value, effectiveFieldRules, props.model, trigger);
+      return validateFieldUtil(fieldName, value, effectiveFieldRules, props.model, trigger);
     };
-    const validateField$1 = async (fieldName, rulesOverride, trigger) => {
+    const validateFieldNow = async (fieldName, rulesOverride, trigger) => {
+      const conditionState = getFieldConditionState(fieldName);
+      if (!conditionState.shown || conditionState.disabled) {
+        clearValidate(fieldName);
+        emit("validate", fieldName, true, void 0);
+        return;
+      }
       const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
       if (effectiveFieldRules) {
         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 (!error && existingMessage === null) {
+        } else if (error && error === existingMessage) {
+        } else {
           if (existingIndex !== -1) {
             errors.splice(existingIndex, 1);
           }
@@ -160,14 +251,26 @@ var Form = defineComponent({
         }
         emit("validate", fieldName, !error, error || void 0);
       }
-      if (props.fieldDependencies) {
-        const dependents = getDependentFields(fieldName, props.fieldDependencies);
+      const dependencyMap = getDependencyMap();
+      if (dependencyMap) {
+        const dependents = getDependentFields(fieldName, dependencyMap);
         for (const dep of dependents) {
-          await validateField$1(dep);
+          await validateFieldNow(dep);
         }
       }
     };
+    const validateField = async (fieldName, rulesOverride, trigger) => {
+      if (trigger === "change" && props.validateDebounce > 0) {
+        return validationDebouncer.schedule(
+          fieldName,
+          () => validateFieldNow(fieldName, rulesOverride, trigger)
+        );
+      }
+      validationDebouncer.cancel(fieldName);
+      return validateFieldNow(fieldName, rulesOverride, trigger);
+    };
     const validate = async () => {
+      validationDebouncer.cancel();
       errors.splice(0, errors.length);
       const effectiveRules = getEffectiveRules();
       if (!effectiveRules) {
@@ -181,6 +284,7 @@ var Form = defineComponent({
       if (!fieldNames || fieldNames.length === 0) {
         return true;
       }
+      fieldNames.forEach((fieldName) => validationDebouncer.cancel(fieldName));
       const nextErrors = [];
       const fieldSet = new Set(fieldNames);
       for (const fieldName of fieldNames) {
@@ -205,10 +309,12 @@ var Form = defineComponent({
     };
     const clearValidate = (fieldNames) => {
       if (!fieldNames) {
+        validationDebouncer.cancel();
         errors.splice(0, errors.length);
         return;
       }
       const fields = Array.isArray(fieldNames) ? fieldNames : [fieldNames];
+      fields.forEach((fieldName) => validationDebouncer.cancel(fieldName));
       fields.forEach((fieldName) => {
         const index = errors.findIndex((e) => e.field === fieldName);
         if (index !== -1) {
@@ -217,6 +323,7 @@ var Form = defineComponent({
       });
     };
     const resetFields = () => {
+      validationDebouncer.cancel();
       clearValidate();
     };
     const addField = (fieldName, defaultValue) => {
@@ -230,6 +337,16 @@ var Form = defineComponent({
         clearValidate(fieldName);
       }
     };
+    watch(
+      () => props.validateDebounce,
+      (delay) => {
+        validationDebouncer.cancel();
+        validationDebouncer = createFormValidationDebouncer({ delay });
+      }
+    );
+    onBeforeUnmount(() => {
+      validationDebouncer.cancel();
+    });
     const snapshotHistory = () => {
       if (!props.undoable || !props.model) return;
       history.value = pushFormHistory(history.value, props.model);
@@ -274,14 +391,16 @@ var Form = defineComponent({
       errors,
       errorsByField: errorsByField.value,
       registerFieldRules,
-      validateField: validateField$1,
+      registerFieldCondition,
+      getFieldConditionState,
+      validateField,
       clearValidate
     }));
     provide(FormContextKey, formContextValue);
     expose({
       validate,
       validateFields,
-      validateField: validateField$1,
+      validateField,
       clearValidate,
       resetFields,
       addField,
@@ -314,4 +433,8 @@ var Form = defineComponent({
 });
 var Form_default = Form;
 
-export { Form, FormContextKey, Form_default };
+export {
+  FormContextKey,
+  Form,
+  Form_default
+};

package/dist/chunk-LG6KGO5D.js

@@ -1,10 +1,17 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Resizable.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Resizable.ts
-var Resizable = vue.defineComponent({
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Resizable = _vue.defineComponent.call(void 0, {
   name: "TigerResizable",
   props: {
     defaultWidth: { type: Number, default: void 0 },
@@ -15,7 +22,7 @@ var Resizable = vue.defineComponent({
     maxHeight: { type: Number, default: void 0 },
     handles: {
       type: Array,
-      default: () => [...tigercatCore.defaultResizeHandles]
+      default: () => [..._tigercatcore.defaultResizeHandles]
     },
     axis: {
       type: String,
@@ -31,30 +38,30 @@ var Resizable = vue.defineComponent({
   },
   emits: ["resize-start", "resize", "resize-end"],
   setup(props, { slots, emit, attrs }) {
-    const width = vue.ref(props.defaultWidth);
-    const height = vue.ref(props.defaultHeight);
-    const draggingHandle = vue.ref(null);
-    const startMouseX = vue.ref(0);
-    const startMouseY = vue.ref(0);
-    const startWidth = vue.ref(0);
-    const startHeight = vue.ref(0);
+    const width = _vue.ref.call(void 0, props.defaultWidth);
+    const height = _vue.ref.call(void 0, props.defaultHeight);
+    const draggingHandle = _vue.ref.call(void 0, null);
+    const startMouseX = _vue.ref.call(void 0, 0);
+    const startMouseY = _vue.ref.call(void 0, 0);
+    const startWidth = _vue.ref.call(void 0, 0);
+    const startHeight = _vue.ref.call(void 0, 0);
     let dragSession = null;
-    const containerClasses = vue.computed(
-      () => tigercatCore.classNames(
-        tigercatCore.resizableBaseClasses,
+    const containerClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.resizableBaseClasses,
         "group/resizable",
         props.className,
-        tigercatCore.coerceClassValue(attrs.class)
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       )
     );
-    const containerStyle = vue.computed(() => {
+    const containerStyle = _vue.computed.call(void 0, () => {
       const s = {};
       if (width.value != null) s.width = `${width.value}px`;
       if (height.value != null) s.height = `${height.value}px`;
       return s;
     });
     const cleanupDragSession = () => {
-      dragSession?.dispose();
+      _optionalChain([dragSession, 'optionalAccess', _ => _.dispose, 'call', _2 => _2()]);
       dragSession = null;
     };
     const onMouseDown = (handle, e) => {
@@ -64,8 +71,8 @@ var Resizable = vue.defineComponent({
       draggingHandle.value = handle;
       startMouseX.value = e.clientX;
       startMouseY.value = e.clientY;
-      startWidth.value = width.value ?? 0;
-      startHeight.value = height.value ?? 0;
+      startWidth.value = _nullishCoalesce(width.value, () => ( 0));
+      startHeight.value = _nullishCoalesce(height.value, () => ( 0));
       emit("resize-start", {
         width: startWidth.value,
         height: startHeight.value,
@@ -73,10 +80,10 @@ var Resizable = vue.defineComponent({
         deltaX: 0,
         deltaY: 0
       });
-      dragSession = tigercatCore.createDocumentDragSession({
+      dragSession = _tigercatcore.createDocumentDragSession.call(void 0, {
         startX: e.clientX,
         startY: e.clientY,
-        ownerDocument: e.currentTarget?.ownerDocument,
+        ownerDocument: _optionalChain([e, 'access', _3 => _3.currentTarget, 'optionalAccess', _4 => _4.ownerDocument]),
         onMove: ({ currentX, currentY }) => {
           applyResize(currentX, currentY, (event) => emit("resize", event));
         },
@@ -92,7 +99,7 @@ var Resizable = vue.defineComponent({
       if (!handle) return;
       const mouseDeltaX = currentX - startMouseX.value;
       const mouseDeltaY = currentY - startMouseY.value;
-      const { deltaWidth, deltaHeight } = tigercatCore.calculateResizeDelta(
+      const { deltaWidth, deltaHeight } = _tigercatcore.calculateResizeDelta.call(void 0, 
         handle,
         mouseDeltaX,
         mouseDeltaY,
@@ -101,11 +108,11 @@ var Resizable = vue.defineComponent({
       let newW = startWidth.value + deltaWidth;
       let newH = startHeight.value + deltaHeight;
       if (props.lockAspectRatio) {
-        const ar = tigercatCore.applyAspectRatio(newW, newH, startWidth.value, startHeight.value);
+        const ar = _tigercatcore.applyAspectRatio.call(void 0, newW, newH, startWidth.value, startHeight.value);
         newW = ar.width;
         newH = ar.height;
       }
-      const clamped = tigercatCore.clampDimensions(
+      const clamped = _tigercatcore.clampDimensions.call(void 0, 
         newW,
         newH,
         props.minWidth,
@@ -123,30 +130,32 @@ var Resizable = vue.defineComponent({
         deltaY: clamped.height - startHeight.value
       });
     };
-    vue.onBeforeUnmount(() => {
+    _vue.onBeforeUnmount.call(void 0, () => {
       cleanupDragSession();
     });
     return () => {
       const handleNodes = props.handles.map(
-        (pos) => vue.h("div", {
-          class: tigercatCore.getResizableHandleClasses(pos, draggingHandle.value === pos, props.disabled),
+        (pos) => _vue.h.call(void 0, "div", {
+          class: _tigercatcore.getResizableHandleClasses.call(void 0, pos, draggingHandle.value === pos, props.disabled),
           "data-handle": pos,
           onMousedown: (e) => onMouseDown(pos, e)
         })
       );
-      return vue.h(
+      return _vue.h.call(void 0, 
         "div",
         {
           class: containerClasses.value,
           style: { ...containerStyle.value, ...props.style },
           "data-resizable": ""
         },
-        [...slots.default?.() || [], ...handleNodes]
+        [..._optionalChain([slots, 'access', _5 => _5.default, 'optionalCall', _6 => _6()]) || [], ...handleNodes]
       );
     };
   }
 });
 var Resizable_default = Resizable;
 
-exports.Resizable = Resizable;
-exports.Resizable_default = Resizable_default;
+
+
+
+exports.Resizable = Resizable; exports.Resizable_default = Resizable_default;