@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-B4RZHDOU.mjs

@@ -0,0 +1,565 @@
+import {
+  flattenElementVNodes
+} from "./chunk-FEVDV3I6.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Tabs.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  provide,
+  inject,
+  h,
+  useId,
+  watch,
+  onMounted,
+  onBeforeUnmount
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  closeIconPathD,
+  closeIconViewBox,
+  getTabsContainerClasses,
+  getTabItemClasses,
+  getTabNavClasses,
+  getTabNavListClasses,
+  getTabPaneClasses,
+  getTabIndicatorClasses,
+  getTabIndicatorStyleFromBox,
+  getTabContentClasses,
+  getTabAddButtonClasses,
+  tabCloseButtonClasses,
+  getGestureTouchPoint,
+  resolveSwipeGesture,
+  isKeyActive,
+  getNextActiveKey,
+  getAdjacentEnabledKey,
+  getTabKeyboardDelta,
+  getTabSwipeDelta,
+  isSwipeBlockedByNestedScroll,
+  measureTabIndicatorBox,
+  formatTabKey,
+  parseTabKey,
+  resolveDisplayedActiveKey,
+  isTabPaneType,
+  isTabPaneChildProps,
+  readTabPaneKey,
+  pickTablistNamingAttrs,
+  mergeTigerLocale,
+  getTabsLabels,
+  getLocaleDirection
+} from "@expcat/tigercat-core";
+var TabsContextKey = /* @__PURE__ */ Symbol("TabsContext");
+function useTabsContext() {
+  return inject(TabsContextKey);
+}
+function isTabPaneVNode(child, tabPane) {
+  return isTabPaneType(child.type, tabPane) || isTabPaneChildProps(child.props ?? {});
+}
+var TabPane = defineComponent({
+  name: "TigerTabPane",
+  inheritAttrs: false,
+  props: {
+    tabKey: {
+      type: [String, Number],
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    closable: {
+      type: Boolean,
+      default: void 0
+    },
+    icon: {
+      type: [String, Object],
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    renderMode: {
+      type: String,
+      default: "pane"
+    },
+    tabId: {
+      type: String,
+      default: void 0
+    },
+    panelId: {
+      type: String,
+      default: void 0
+    },
+    tabIndex: {
+      type: Number,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const tabsContext = inject(TabsContextKey);
+    if (!tabsContext) {
+      throw new Error("TabPane must be used within a Tabs component");
+    }
+    const isActive = computed(() => isKeyActive(props.tabKey, tabsContext.activeKey));
+    const hasBeenActivated = ref(isActive.value);
+    watch(isActive, (val) => {
+      if (val) hasBeenActivated.value = true;
+    });
+    const isClosable = computed(
+      () => props.closable !== void 0 ? props.closable : tabsContext.closable && tabsContext.type === "editable-card"
+    );
+    const panelMounted = computed(
+      () => tabsContext.lazy ? hasBeenActivated.value && (isActive.value || !tabsContext.destroyInactiveTabPane) : isActive.value || !tabsContext.destroyInactiveTabPane
+    );
+    const handleClick = () => {
+      if (!props.disabled) tabsContext.handleTabClick(props.tabKey);
+    };
+    const handleClose = (event) => {
+      event.stopPropagation();
+      if (!props.disabled) tabsContext.handleTabClose(props.tabKey, event);
+    };
+    const handleKeydown = (event) => {
+      if (props.disabled) return;
+      if (isClosable.value && (event.key === "Backspace" || event.key === "Delete")) {
+        event.preventDefault();
+        tabsContext.handleTabClose(props.tabKey, event);
+        return;
+      }
+      const tabList = event.currentTarget?.closest('[role="tablist"]');
+      const dir = tabList instanceof HTMLElement && getComputedStyle(tabList).direction === "rtl" ? "rtl" : "ltr";
+      const delta = getTabKeyboardDelta(event.key, tabsContext.tabPosition, dir);
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        tabsContext.handleTabClick(props.tabKey);
+        return;
+      }
+      if (delta == null) return;
+      event.preventDefault();
+      const tabButtons = Array.from(tabList?.querySelectorAll('[role="tab"]') ?? []);
+      const records = tabButtons.map((button) => ({
+        key: parseTabKey(button.getAttribute("data-tiger-tab-key")) ?? button.id,
+        disabled: button.getAttribute("aria-disabled") === "true"
+      }));
+      const enabled = records.filter((tab) => !tab.disabled);
+      if (enabled.length === 0) return;
+      const nextKey = delta === "home" ? enabled[0].key : delta === "end" ? enabled[enabled.length - 1].key : getAdjacentEnabledKey(records, props.tabKey, delta);
+      if (nextKey === void 0) return;
+      const nextButton = tabButtons.find(
+        (button) => isKeyActive(parseTabKey(button.getAttribute("data-tiger-tab-key")) ?? button.id, nextKey)
+      );
+      nextButton?.focus();
+      tabsContext.handleTabClick(nextKey);
+    };
+    return () => {
+      if (props.renderMode === "tab") {
+        return h(
+          "button",
+          {
+            type: "button",
+            class: getTabItemClasses(
+              isActive.value,
+              props.disabled,
+              tabsContext.type,
+              tabsContext.size,
+              tabsContext.tabPosition
+            ),
+            role: "tab",
+            id: props.tabId,
+            "aria-controls": panelMounted.value ? props.panelId : void 0,
+            "aria-selected": isActive.value,
+            "aria-disabled": props.disabled || void 0,
+            "aria-label": props.label,
+            tabindex: props.disabled ? -1 : typeof props.tabIndex === "number" ? props.tabIndex : isActive.value ? 0 : -1,
+            "data-tiger-tabs-id": tabsContext.idBase,
+            "data-tiger-tab-key": formatTabKey(props.tabKey),
+            onClick: handleClick,
+            onKeydown: handleKeydown
+          },
+          [
+            props.icon && h("span", { class: "flex items-center" }, props.icon),
+            h("span", { "aria-hidden": "true" }, props.label),
+            isClosable.value && h(
+              "span",
+              {
+                class: tabCloseButtonClasses,
+                "aria-hidden": "true",
+                onClick: handleClose
+              },
+              h(
+                "svg",
+                {
+                  class: "w-4 h-4",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: closeIconViewBox,
+                  "aria-hidden": "true"
+                },
+                h("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: closeIconPathD
+                })
+              )
+            )
+          ]
+        );
+      }
+      if (!panelMounted.value) return null;
+      return h(
+        "div",
+        {
+          class: classNames(
+            getTabPaneClasses(isActive.value),
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          style: mergeStyleValues(attrs.style, props.style),
+          role: "tabpanel",
+          id: props.panelId,
+          "aria-labelledby": props.tabId,
+          "aria-hidden": !isActive.value,
+          inert: isActive.value ? void 0 : true
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+var Tabs = defineComponent({
+  name: "TigerTabs",
+  inheritAttrs: false,
+  props: {
+    activeKey: {
+      type: [String, Number],
+      default: void 0
+    },
+    defaultActiveKey: {
+      type: [String, Number],
+      default: void 0
+    },
+    type: {
+      type: String,
+      default: "line"
+    },
+    tabPosition: {
+      type: String,
+      default: "top"
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    centered: {
+      type: Boolean,
+      default: false
+    },
+    destroyInactiveTabPane: {
+      type: Boolean,
+      default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    swipeable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:activeKey", "change", "edit", "tab-click"],
+  setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
+    const idBase = `tiger-tabs-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getTabsLabels(mergedLocale.value, props.labels));
+    const dir = computed(() => getLocaleDirection(mergedLocale.value));
+    const internalActiveKey = ref(props.defaultActiveKey);
+    const swipeStart = ref(null);
+    const tabListEl = ref(null);
+    const indicatorBox = ref({ opacity: "0" });
+    let lastTabRecords = [];
+    let resizeObserver = null;
+    const currentActiveKey = computed(
+      () => props.activeKey !== void 0 ? props.activeKey : internalActiveKey.value
+    );
+    const handleTabClick = (key) => {
+      emit("tab-click", key);
+      if (isKeyActive(key, currentActiveKey.value)) return;
+      if (props.activeKey === void 0) internalActiveKey.value = key;
+      emit("update:activeKey", key);
+      emit("change", key);
+    };
+    const handleTabClose = (key, event) => {
+      event.stopPropagation();
+      if (props.activeKey === void 0 && isKeyActive(key, currentActiveKey.value)) {
+        internalActiveKey.value = getNextActiveKey(key, currentActiveKey.value, lastTabRecords);
+      }
+      emit("edit", { targetKey: key, action: "remove" });
+    };
+    const updateIndicator = () => {
+      const list = tabListEl.value;
+      if (!list || props.type !== "line") {
+        indicatorBox.value = { opacity: "0" };
+        return;
+      }
+      const tab = list.querySelector('[role="tab"][aria-selected="true"]');
+      const computedDir = getComputedStyle(list).direction === "rtl" ? "rtl" : dir.value;
+      indicatorBox.value = getTabIndicatorStyleFromBox(
+        measureTabIndicatorBox(list, tab, props.tabPosition, computedDir),
+        props.tabPosition
+      );
+    };
+    const bindIndicatorObserver = () => {
+      resizeObserver?.disconnect();
+      const list = tabListEl.value;
+      if (!list || typeof ResizeObserver === "undefined") return;
+      resizeObserver = new ResizeObserver(updateIndicator);
+      resizeObserver.observe(list);
+      Array.from(list.querySelectorAll('[role="tab"]')).forEach(
+        (node) => resizeObserver?.observe(node)
+      );
+      updateIndicator();
+    };
+    onMounted(bindIndicatorObserver);
+    onBeforeUnmount(() => resizeObserver?.disconnect());
+    watch(
+      () => [currentActiveKey.value, props.tabPosition, props.type, dir.value],
+      () => {
+        bindIndicatorObserver();
+      }
+    );
+    const handleContentTouchStart = (event) => {
+      if (!props.swipeable || event.touches.length !== 1) return;
+      swipeStart.value = getGestureTouchPoint(event.touches, event.timeStamp);
+    };
+    const handleContentTouchEnd = (event) => {
+      if (!props.swipeable || !swipeStart.value || event.changedTouches.length !== 1) return;
+      if (isSwipeBlockedByNestedScroll(event.target, event.currentTarget)) {
+        swipeStart.value = null;
+        return;
+      }
+      const endPoint = getGestureTouchPoint(event.changedTouches, event.timeStamp);
+      const swipe = resolveSwipeGesture(swipeStart.value, endPoint, {
+        minDistance: 48,
+        maxCrossAxisRatio: 0.75
+      });
+      swipeStart.value = null;
+      if (!swipe) return;
+      const computedDir = tabListEl.value && getComputedStyle(tabListEl.value).direction === "rtl" ? "rtl" : dir.value;
+      const delta = getTabSwipeDelta(swipe.direction, props.tabPosition, computedDir);
+      if (delta == null) return;
+      const nextKey = getAdjacentEnabledKey(lastTabRecords, currentActiveKey.value, delta);
+      if (nextKey !== void 0) handleTabClick(nextKey);
+    };
+    provide(TabsContextKey, {
+      get activeKey() {
+        return resolveDisplayedActiveKey(currentActiveKey.value, lastTabRecords);
+      },
+      get type() {
+        return props.type;
+      },
+      get size() {
+        return props.size;
+      },
+      get tabPosition() {
+        return props.tabPosition;
+      },
+      get closable() {
+        return props.closable;
+      },
+      get destroyInactiveTabPane() {
+        return props.destroyInactiveTabPane;
+      },
+      get lazy() {
+        return props.lazy;
+      },
+      get swipeable() {
+        return props.swipeable;
+      },
+      idBase,
+      get labels() {
+        return labels.value;
+      },
+      handleTabClick,
+      handleTabClose
+    });
+    return () => {
+      const children = flattenElementVNodes(slots.default?.());
+      const validChildren = [];
+      const tabRecords = [];
+      for (const child of children) {
+        if (!isTabPaneVNode(child, TabPane)) continue;
+        const childProps = child.props ?? {};
+        const key = readTabPaneKey(childProps);
+        if (key === void 0) continue;
+        const paneClosable = childProps.closable === true || childProps.closable === "" ? true : childProps.closable === false ? false : props.closable && props.type === "editable-card";
+        tabRecords.push({
+          key,
+          disabled: childProps.disabled === true || childProps.disabled === "",
+          closable: paneClosable,
+          label: typeof childProps.label === "string" ? childProps.label : void 0
+        });
+        const paneType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
+        validChildren.push({
+          type: paneType,
+          props: childProps,
+          children: child.children,
+          key
+        });
+      }
+      lastTabRecords = tabRecords;
+      const displayedKey = resolveDisplayedActiveKey(currentActiveKey.value, tabRecords);
+      const tabItems = [];
+      const tabPanes = [];
+      for (const child of validChildren) {
+        const tabId = `${idBase}-tab-${String(child.key)}`;
+        const panelId = `${idBase}-panel-${String(child.key)}`;
+        tabItems.push(
+          h(child.type, {
+            ...child.props,
+            key: `tab-${String(child.key)}`,
+            renderMode: "tab",
+            tabId,
+            panelId,
+            tabIndex: isKeyActive(child.key, displayedKey) ? 0 : -1
+          })
+        );
+        tabPanes.push(
+          h(
+            child.type,
+            {
+              ...child.props,
+              key: `pane-${String(child.key)}`,
+              renderMode: "pane",
+              tabId,
+              panelId
+            },
+            child.children
+          )
+        );
+      }
+      const naming = pickTablistNamingAttrs(attrs);
+      const tabNavContent = h("div", { class: getTabNavClasses(props.tabPosition, props.type) }, [
+        h(
+          "div",
+          {
+            ref: (el) => {
+              tabListEl.value = el;
+            },
+            class: getTabNavListClasses(props.tabPosition, props.centered),
+            role: "tablist",
+            dir: dir.value,
+            "aria-label": naming["aria-label"] ?? (naming["aria-labelledby"] ? void 0 : labels.value.tablistAriaLabel),
+            "aria-labelledby": naming["aria-labelledby"],
+            id: naming.id,
+            "aria-orientation": props.tabPosition === "left" || props.tabPosition === "right" ? "vertical" : "horizontal"
+          },
+          [
+            props.type === "line" ? h("div", {
+              "data-tiger-tabs-indicator": "true",
+              "aria-hidden": "true",
+              class: getTabIndicatorClasses(props.type, props.tabPosition),
+              style: indicatorBox.value
+            }) : null,
+            ...tabItems
+          ]
+        ),
+        ...tabRecords.filter((tab) => tab.closable && !tab.disabled).map(
+          (tab) => h(
+            "button",
+            {
+              key: `close-${String(tab.key)}`,
+              type: "button",
+              class: "sr-only",
+              "aria-label": labels.value.closeTabAriaLabel.replace(
+                "{label}",
+                String(tab.label ?? tab.key)
+              ),
+              onClick: (event) => handleTabClose(tab.key, event)
+            },
+            labels.value.closeTabAriaLabel.replace("{label}", String(tab.label ?? tab.key))
+          )
+        ),
+        props.type === "editable-card" ? h(
+          "button",
+          {
+            type: "button",
+            class: getTabAddButtonClasses(props.tabPosition),
+            onClick: () => emit("edit", { targetKey: void 0, action: "add" }),
+            "aria-label": labels.value.addTabAriaLabel
+          },
+          "+"
+        ) : null
+      ]);
+      const tabContent = h(
+        "div",
+        {
+          class: getTabContentClasses(props.tabPosition),
+          onTouchstart: handleContentTouchStart,
+          onTouchend: handleContentTouchEnd,
+          onTouchcancel: () => {
+            swipeStart.value = null;
+          }
+        },
+        tabPanes
+      );
+      return h(
+        "div",
+        {
+          class: classNames(
+            getTabsContainerClasses(props.tabPosition),
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          style: mergeStyleValues(attrs.style, props.style)
+        },
+        props.tabPosition === "bottom" ? [tabContent, tabNavContent] : [tabNavContent, tabContent]
+      );
+    };
+  }
+});
+var Tabs_default = Tabs;
+
+export {
+  TabsContextKey,
+  useTabsContext,
+  TabPane,
+  Tabs,
+  Tabs_default
+};

package/dist/chunk-B5FXTGBV.mjs

@@ -0,0 +1,81 @@
+// src/composables/useFormController.ts
+import { onUnmounted, reactive, ref } from "vue";
+import {
+  assignFormValues,
+  cloneFormValues,
+  createFormEngine,
+  getFormValidationLabels
+} from "@expcat/tigercat-core";
+function useFormController(options = {}) {
+  const engine = createFormEngine({
+    initialValues: options.initialValues,
+    undoable: options.undoable,
+    maxHistorySize: options.maxHistorySize,
+    getRules: () => options.rules,
+    getConditions: () => options.conditions,
+    getFieldDependencies: () => options.fieldDependencies,
+    getMessages: () => getFormValidationLabels(options.locale),
+    getValidateDebounce: () => options.validateDebounce ?? 0
+  });
+  const values = reactive(cloneFormValues(engine.getValues()));
+  const errors = ref(engine.getErrors());
+  const canUndo = ref(engine.canUndo);
+  const canRedo = ref(engine.canRedo);
+  const stop = engine.subscribe(() => {
+    assignFormValues(values, engine.getValues());
+    errors.value = engine.getErrors();
+    canUndo.value = engine.canUndo;
+    canRedo.value = engine.canRedo;
+  });
+  onUnmounted(() => {
+    stop();
+    engine.dispose();
+  });
+  return {
+    get values() {
+      return values;
+    },
+    get errors() {
+      return errors.value;
+    },
+    get errorsByField() {
+      return engine.errorsByField;
+    },
+    get hasErrors() {
+      return engine.hasErrors;
+    },
+    setFieldValue: engine.setFieldValue,
+    setValues: engine.setValues,
+    getFieldValue: engine.getFieldValue,
+    validate: engine.validate,
+    validateFields: engine.validateFields,
+    validateField: engine.validateField,
+    clearValidate: engine.clearValidate,
+    reset: engine.reset,
+    resetFields: engine.reset,
+    addField: engine.addField,
+    removeField: engine.removeField,
+    undo: engine.undo,
+    redo: engine.redo,
+    snapshotHistory: engine.snapshotHistory,
+    get canUndo() {
+      return canUndo.value;
+    },
+    get canRedo() {
+      return canRedo.value;
+    },
+    subscribe: engine.subscribe,
+    registerFieldRules: engine.registerFieldRules,
+    registerFieldCondition: engine.registerFieldCondition,
+    getFieldConditionState: engine.getFieldConditionState,
+    replaceValues: engine.replaceValues,
+    setOptions: engine.setOptions,
+    getValues: engine.getValues,
+    getErrors: engine.getErrors,
+    dispose: engine.dispose
+  };
+}
+
+export {
+  useFormController
+};

package/dist/{chunk-46DEQQMB.mjs → chunk-BFIYTA3E.mjs}

@@ -3,6 +3,7 @@ import { defineComponent, h, computed } from "vue";
 import {
   classNames,
   coerceClassValue,
+  injectLayoutGridStyles,
   layoutFooterClasses,
   mergeStyleValues
 } from "@expcat/tigercat-core";
@@ -10,30 +11,25 @@ var Footer = defineComponent({
   name: "TigerFooter",
   inheritAttrs: false,
   props: {
-    /**
-     * Additional CSS classes
-     */
     className: {
       type: String,
       default: void 0
     },
-    /**
-     * Footer height (CSS value)
-     * @default 'auto'
-     */
+    as: {
+      type: String,
+      default: "footer"
+    },
     height: {
       type: String,
-      default: "auto"
+      default: void 0
     },
-    /**
-     * Custom styles
-     */
     style: {
       type: Object,
       default: void 0
     }
   },
   setup(props, { slots, attrs }) {
+    injectLayoutGridStyles();
     const footerClasses = computed(
       () => classNames(
         layoutFooterClasses,
@@ -42,11 +38,11 @@ var Footer = defineComponent({
       )
     );
     return () => h(
-      "footer",
+      props.as || "footer",
       {
         ...attrs,
         class: footerClasses.value,
-        style: mergeStyleValues(props.style, { height: props.height })
+        style: mergeStyleValues(props.style, props.height ? { height: props.height } : void 0)
       },
       slots.default?.()
     );