@expcat/tigercat-vue 1.1.0 → 1.2.0

package/dist/chunk-FXS5GHQZ.js

@@ -0,0 +1,388 @@
+"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; }
+
+
+
+
+var _chunkJDCVS4SJjs = require('./chunk-JDCVS4SJ.js');
+
+// src/components/Drawer.ts
+
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var drawerIdCounter = 0;
+var createDrawerId = () => `tiger-drawer-${++drawerIdCounter}`;
+var Drawer = _vue.defineComponent.call(void 0, {
+  name: "TigerDrawer",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Whether the drawer is open
+     * @default false
+     */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Drawer placement
+     * @default 'right'
+     */
+    placement: {
+      type: String,
+      default: "right"
+    },
+    /**
+     * Drawer size
+     * @default 'md'
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Custom width/height (overrides size)
+     */
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * Drawer title
+     */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether to show close button
+     * @default true
+     */
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether to show mask/backdrop
+     * @default true
+     */
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether clicking mask closes the drawer
+     * @default true
+     */
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * z-index of the drawer
+     * @default 1000
+     */
+    zIndex: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * Additional CSS class for the drawer container
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Additional CSS class for the drawer body
+     */
+    bodyClassName: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether to destroy content on close
+     * @default false
+     */
+    destroyOnClose: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Custom inline style for drawer panel
+     */
+    style: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Close button aria-label
+     * @default 'Close drawer'
+     */
+    closeAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Locale overrides for common texts
+     */
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Disable teleport (useful for testing)
+     * @default false
+     * @internal
+     */
+    disableTeleport: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:open", "close", "after-enter", "after-leave"],
+  setup(props, { slots, emit, attrs }) {
+    const instanceId = _vue.ref.call(void 0, createDrawerId());
+    const hasBeenOpened = _vue.ref.call(void 0, false);
+    const dialogRef = _vue.ref.call(void 0, null);
+    const closeButtonRef = _vue.ref.call(void 0, null);
+    const previousActiveElement = _vue.ref.call(void 0, null);
+    let touchStartPoint = null;
+    let touchCurrentPoint = null;
+    const titleId = _vue.computed.call(void 0, () => `${instanceId.value}-title`);
+    const shouldRender = _vue.computed.call(void 0, () => {
+      if (props.open) {
+        hasBeenOpened.value = true;
+        return true;
+      }
+      if (props.destroyOnClose) return false;
+      return hasBeenOpened.value;
+    });
+    const handleClose = () => {
+      emit("update:open", false);
+      emit("close");
+    };
+    const handleMaskClick = (event) => {
+      if (_tigercatcore.shouldCloseOnMaskClick.call(void 0, event, props.maskClosable)) {
+        handleClose();
+      }
+    };
+    const resetTouchGesture = () => {
+      touchStartPoint = null;
+      touchCurrentPoint = null;
+    };
+    const handleTouchStart = (event) => {
+      if (!props.open) return;
+      const point = _tigercatcore.getGestureTouchPoint.call(void 0, event.touches);
+      touchStartPoint = point;
+      touchCurrentPoint = point;
+    };
+    const handleTouchMove = (event) => {
+      if (!touchStartPoint) return;
+      const point = _tigercatcore.getGestureTouchPoint.call(void 0, event.touches);
+      if (point) {
+        touchCurrentPoint = point;
+      }
+    };
+    const handleTouchEnd = (event) => {
+      const gesture = _tigercatcore.resolveSwipeGesture.call(void 0, 
+        touchStartPoint,
+        _nullishCoalesce(_tigercatcore.getGestureTouchPoint.call(void 0, event.changedTouches), () => ( touchCurrentPoint)),
+        { minDistance: 48, minVelocity: 0.15 }
+      );
+      resetTouchGesture();
+      if (_tigercatcore.isDrawerSwipeCloseGesture.call(void 0, props.placement, gesture)) {
+        handleClose();
+      }
+    };
+    const escapeEnabled = _vue.computed.call(void 0, () => props.open);
+    let cleanupEscape;
+    _chunkJDCVS4SJjs.useVueBodyScrollLock.call(void 0, escapeEnabled);
+    _chunkJDCVS4SJjs.useVueFocusTrap.call(void 0, { enabled: escapeEnabled, containerRef: dialogRef });
+    _vue.onMounted.call(void 0, () => {
+      cleanupEscape = _chunkJDCVS4SJjs.useVueEscapeKey.call(void 0, {
+        enabled: escapeEnabled,
+        onEscape: handleClose
+      });
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      _optionalChain([cleanupEscape, 'optionalCall', _ => _()]);
+    });
+    _vue.watch.call(void 0, 
+      () => props.open,
+      async (nextVisible) => {
+        if (nextVisible) {
+          previousActiveElement.value = _tigercatcore.captureActiveElement.call(void 0, );
+          await _vue.nextTick.call(void 0, );
+          _tigercatcore.focusFirst.call(void 0, [closeButtonRef.value, dialogRef.value]);
+          return;
+        }
+        _tigercatcore.restoreFocus.call(void 0, previousActiveElement.value);
+      }
+    );
+    _vue.watch.call(void 0, 
+      () => props.open,
+      (nextVisible, prevVisible, onCleanup) => {
+        if (nextVisible === prevVisible || typeof prevVisible === "undefined" && !nextVisible)
+          return;
+        const timer = window.setTimeout(() => {
+          emit(nextVisible ? "after-enter" : "after-leave");
+        }, _tigercatcore.ANIMATION_DURATION_MS);
+        onCleanup(() => window.clearTimeout(timer));
+      },
+      { immediate: true }
+    );
+    return () => {
+      if (!shouldRender.value) return null;
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
+      const ariaLabelledby = _nullishCoalesce(ariaLabelledbyFromAttrs, () => ( (props.title || slots.header ? titleId.value : void 0)));
+      const containerClasses = _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getDrawerContainerClasses.call(void 0, ),
+        !props.open && "pointer-events-none"
+      );
+      const maskClasses = _tigercatcore.getDrawerMaskClasses.call(void 0, props.open);
+      const panelClasses = _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getDrawerPanelClasses.call(void 0, props.placement, props.open, props.size),
+        "flex flex-col",
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      );
+      const isHorizontal = props.placement === "left" || props.placement === "right";
+      const widthStyle = props.width ? {
+        [isHorizontal ? "width" : "height"]: typeof props.width === "number" ? `${props.width}px` : props.width
+      } : void 0;
+      const mergedStyle = _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style, widthStyle);
+      const headerClasses = _tigercatcore.getDrawerHeaderClasses.call(void 0, );
+      const bodyClasses = _tigercatcore.getDrawerBodyClasses.call(void 0, props.bodyClassName);
+      const footerClasses = _tigercatcore.getDrawerFooterClasses.call(void 0, );
+      const closeButtonClasses = _tigercatcore.getDrawerCloseButtonClasses.call(void 0, );
+      const titleClasses = _tigercatcore.getDrawerTitleClasses.call(void 0, );
+      const resolvedCloseAriaLabel = _tigercatcore.resolveLocaleText.call(void 0, 
+        "Close drawer",
+        props.closeAriaLabel,
+        _optionalChain([props, 'access', _2 => _2.locale, 'optionalAccess', _3 => _3.drawer, 'optionalAccess', _4 => _4.closeAriaLabel]),
+        _optionalChain([props, 'access', _5 => _5.locale, 'optionalAccess', _6 => _6.common, 'optionalAccess', _7 => _7.closeText])
+      );
+      const closeIcon = _vue.h.call(void 0, 
+        "svg",
+        {
+          class: "w-5 h-5",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: _tigercatcore.closeIconViewBox,
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        [
+          _vue.h.call(void 0, "path", {
+            "stroke-linecap": _tigercatcore.closeIconPathStrokeLinecap,
+            "stroke-linejoin": _tigercatcore.closeIconPathStrokeLinejoin,
+            "stroke-width": _tigercatcore.closeIconPathStrokeWidth,
+            d: _tigercatcore.closeIconPathD
+          })
+        ]
+      );
+      const header = props.title || slots.header || props.closable ? _vue.h.call(void 0, "div", { class: headerClasses }, [
+        props.title || slots.header ? _vue.h.call(void 0, 
+          "h3",
+          {
+            id: titleId.value,
+            class: titleClasses
+          },
+          slots.header ? slots.header() : props.title
+        ) : null,
+        props.closable ? _vue.h.call(void 0, 
+          "button",
+          {
+            type: "button",
+            class: closeButtonClasses,
+            onClick: handleClose,
+            "aria-label": resolvedCloseAriaLabel,
+            ref: closeButtonRef
+          },
+          closeIcon
+        ) : null
+      ]) : null;
+      const body = slots.default ? _vue.h.call(void 0, "div", { class: bodyClasses }, slots.default()) : null;
+      const footer = slots.footer ? _vue.h.call(void 0, "div", { class: footerClasses }, slots.footer()) : null;
+      const mask = props.mask ? _vue.h.call(void 0, "div", {
+        class: maskClasses,
+        onClick: handleMaskClick,
+        "aria-hidden": "true",
+        "data-tiger-drawer-mask": ""
+      }) : null;
+      const panel = _vue.h.call(void 0, 
+        "div",
+        {
+          ...forwardedAttrs,
+          class: panelClasses,
+          style: mergedStyle,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": ariaLabelledby,
+          tabindex: -1,
+          ref: dialogRef,
+          onTouchstart: handleTouchStart,
+          onTouchmove: handleTouchMove,
+          onTouchend: handleTouchEnd,
+          onTouchcancel: resetTouchGesture,
+          "data-tiger-drawer": ""
+        },
+        [header, body, footer]
+      );
+      const root = _vue.h.call(void 0, 
+        "div",
+        {
+          class: containerClasses,
+          style: { zIndex: props.zIndex },
+          hidden: !props.open,
+          "aria-hidden": !props.open ? "true" : void 0,
+          "data-tiger-drawer-root": ""
+        },
+        [mask, panel]
+      );
+      return _chunkJDCVS4SJjs.renderVueBodyTeleport.call(void 0, [root], props.disableTeleport);
+    };
+  }
+});
+var Drawer_default = Drawer;
+
+
+
+
+exports.Drawer = Drawer; exports.Drawer_default = Drawer_default;

package/dist/{chunk-6WACKCWM.mjs → chunk-G36MH6G4.mjs}

@@ -1,7 +1,28 @@
-import { FormContextKey } from './chunk-5YFSAKRQ.mjs';
-import { defineComponent, inject, computed, ref, watch, onUnmounted, isVNode, cloneVNode, h } from 'vue';
-import { getFormItemClasses, getFormItemLabelClasses, getFormItemContentClasses, classNames, getFormItemErrorClasses, getFormItemFieldClasses, getFormItemAsteriskClasses } from '@expcat/tigercat-core';
+import {
+  FormContextKey
+} from "./chunk-LFKY2QRD.mjs";
 
+// src/components/FormItem.ts
+import {
+  defineComponent,
+  inject,
+  computed,
+  ref,
+  watch,
+  h,
+  onUnmounted,
+  cloneVNode,
+  isVNode
+} from "vue";
+import {
+  classNames,
+  getFormItemClasses,
+  getFormItemLabelClasses,
+  getFormItemContentClasses,
+  getFormItemFieldClasses,
+  getFormItemErrorClasses,
+  getFormItemAsteriskClasses
+} from "@expcat/tigercat-core";
 function mergeAriaDescribedBy(existing, next) {
   if (!existing) return next;
   if (!next) return existing;
@@ -71,6 +92,10 @@ var FormItem = defineComponent({
     errorDisplayMode: {
       type: String,
       default: "inline"
+    },
+    condition: {
+      type: Object,
+      default: void 0
     }
   },
   setup(props, { slots }) {
@@ -127,8 +152,15 @@ var FormItem = defineComponent({
       }
       return false;
     });
+    const conditionState = computed(() => {
+      const ctx = formContext.value;
+      if (!props.name || !ctx) {
+        return { shown: true, disabled: false, required: false };
+      }
+      return ctx.getFieldConditionState(props.name, props.condition);
+    });
     const isRequired = computed(() => {
-      return showRequiredAsterisk.value && (formContext.value?.showRequiredAsterisk ?? true);
+      return (showRequiredAsterisk.value || conditionState.value.required) && (formContext.value?.showRequiredAsterisk ?? true);
     });
     watch(
       () => props.name ? formContext.value?.errorsByField[props.name] : void 0,
@@ -155,11 +187,12 @@ var FormItem = defineComponent({
       const ctx = formContext.value;
       if (props.name && ctx) {
         ctx.registerFieldRules(props.name, void 0);
+        ctx.registerFieldCondition(props.name, void 0);
       }
     };
     watch(
-      () => [props.name, props.rules],
-      ([name, rules]) => {
+      () => [props.name, props.rules, props.condition],
+      ([name, rules, condition]) => {
         const ctx = formContext.value;
         if (!name || !ctx) {
           return;
@@ -169,6 +202,7 @@ var FormItem = defineComponent({
         } else {
           ctx.registerFieldRules(name, void 0);
         }
+        ctx.registerFieldCondition(name, condition);
       },
       { immediate: true }
     );
@@ -196,7 +230,7 @@ var FormItem = defineComponent({
         size: actualSize.value,
         labelPosition: labelPosition.value,
         hasError: hasError.value,
-        disabled: formContext.value?.disabled
+        disabled: formContext.value?.disabled || conditionState.value.disabled
       });
     });
     const labelClasses = computed(() => {
@@ -220,6 +254,9 @@ var FormItem = defineComponent({
     const fieldClasses = getFormItemFieldClasses();
     const asteriskClasses = getFormItemAsteriskClasses();
     return () => {
+      if (!conditionState.value.shown) {
+        return null;
+      }
       const defaultSlot = slots.default?.() ?? [];
       const only = defaultSlot.length === 1 ? defaultSlot[0] : void 0;
       const isSingleVNode = only != null && isVNode(only);
@@ -246,6 +283,7 @@ var FormItem = defineComponent({
             _shakeTrigger: !isNativeElement && hasError.value ? shakeTrigger.value : void 0,
             "aria-invalid": hasError.value ? "true" : existingProps["aria-invalid"],
             "aria-required": isRequired.value ? "true" : existingProps["aria-required"],
+            disabled: conditionState.value.disabled || formContext.value?.disabled ? true : existingProps.disabled,
             "aria-describedby": mergeAriaDescribedBy(
               existingProps["aria-describedby"],
               describedById.value
@@ -316,4 +354,7 @@ var FormItem = defineComponent({
 });
 var FormItem_default = FormItem;
 
-export { FormItem, FormItem_default };
+export {
+  FormItem,
+  FormItem_default
+};

package/dist/chunk-G3SWTL27.js

@@ -1,10 +1,24 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var chunkJCMGBKS6_js = require('./chunk-JCMGBKS6.js');
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
+var _chunkJCMGBKS6js = require('./chunk-JCMGBKS6.js');
 
-var Result = vue.defineComponent({
+// src/components/Result.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Result = _vue.defineComponent.call(void 0, {
   name: "TigerResult",
   inheritAttrs: false,
   props: {
@@ -30,66 +44,66 @@ var Result = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const colors = vue.computed(() => tigercatCore.getResultColorScheme(props.status));
-    const iconPath = vue.computed(() => tigercatCore.getResultIconPath(props.status));
-    const httpLabel = vue.computed(() => tigercatCore.getResultHttpLabel(props.status));
-    const iconContainerClasses = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.resultIconContainerBaseClasses, colors.value.iconBg)
+    const colors = _vue.computed.call(void 0, () => _tigercatcore.getResultColorScheme.call(void 0, props.status));
+    const iconPath = _vue.computed.call(void 0, () => _tigercatcore.getResultIconPath.call(void 0, props.status));
+    const httpLabel = _vue.computed.call(void 0, () => _tigercatcore.getResultHttpLabel.call(void 0, props.status));
+    const iconContainerClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, _tigercatcore.resultIconContainerBaseClasses, colors.value.iconBg)
     );
-    const iconSvgClasses = vue.computed(() => tigercatCore.classNames(tigercatCore.resultIconClasses, colors.value.iconColor));
-    const titleCls = vue.computed(() => tigercatCore.classNames(tigercatCore.resultTitleClasses, colors.value.titleColor));
+    const iconSvgClasses = _vue.computed.call(void 0, () => _tigercatcore.classNames.call(void 0, _tigercatcore.resultIconClasses, colors.value.iconColor));
+    const titleCls = _vue.computed.call(void 0, () => _tigercatcore.classNames.call(void 0, _tigercatcore.resultTitleClasses, colors.value.titleColor));
     return () => {
       const attrsRecord = attrs;
       const children = [];
       if (slots.icon) {
-        children.push(vue.h("div", { class: iconContainerClasses.value }, slots.icon()));
+        children.push(_vue.h.call(void 0, "div", { class: iconContainerClasses.value }, slots.icon()));
       } else {
         const iconContent = [];
         if (httpLabel.value) {
           iconContent.push(
-            vue.h(
+            _vue.h.call(void 0, 
               "span",
               {
-                class: tigercatCore.classNames("text-5xl font-bold", colors.value.iconColor)
+                class: _tigercatcore.classNames.call(void 0, "text-5xl font-bold", colors.value.iconColor)
               },
               httpLabel.value
             )
           );
         } else {
-          iconContent.push(chunkJCMGBKS6_js.createStatusIcon(iconPath.value, iconSvgClasses.value));
+          iconContent.push(_chunkJCMGBKS6js.createStatusIcon.call(void 0, iconPath.value, iconSvgClasses.value));
         }
-        children.push(vue.h("div", { class: iconContainerClasses.value }, iconContent));
+        children.push(_vue.h.call(void 0, "div", { class: iconContainerClasses.value }, iconContent));
       }
       if (props.title || slots.title) {
         children.push(
-          vue.h("div", { class: titleCls.value }, slots.title ? slots.title() : props.title)
+          _vue.h.call(void 0, "div", { class: titleCls.value }, slots.title ? slots.title() : props.title)
         );
       }
       if (props.subTitle || slots.subTitle) {
         children.push(
-          vue.h(
+          _vue.h.call(void 0, 
             "div",
-            { class: tigercatCore.resultSubTitleClasses },
+            { class: _tigercatcore.resultSubTitleClasses },
             slots.subTitle ? slots.subTitle() : props.subTitle
           )
         );
       }
       if (slots.extra) {
-        children.push(vue.h("div", { class: tigercatCore.resultExtraClasses }, slots.extra()));
+        children.push(_vue.h.call(void 0, "div", { class: _tigercatcore.resultExtraClasses }, slots.extra()));
       }
       if (slots.default) {
-        children.push(vue.h("div", { class: "mt-6 w-full" }, slots.default()));
+        children.push(_vue.h.call(void 0, "div", { class: "mt-6 w-full" }, slots.default()));
       }
-      return vue.h(
+      return _vue.h.call(void 0, 
         "div",
         {
           ...attrs,
-          class: tigercatCore.classNames(
-            tigercatCore.resultBaseClasses,
+          class: _tigercatcore.classNames.call(void 0, 
+            _tigercatcore.resultBaseClasses,
             props.className,
-            tigercatCore.coerceClassValue(attrsRecord.class)
+            _tigercatcore.coerceClassValue.call(void 0, attrsRecord.class)
           ),
-          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style),
+          style: _tigercatcore.mergeStyleValues.call(void 0, attrsRecord.style, props.style),
           role: "status"
         },
         children
@@ -99,5 +113,7 @@ var Result = vue.defineComponent({
 });
 var Result_default = Result;
 
-exports.Result = Result;
-exports.Result_default = Result_default;
+
+
+
+exports.Result = Result; exports.Result_default = Result_default;