@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-AFNJO6KJ.mjs

@@ -0,0 +1,201 @@
+import {
+  RadioGroupKey
+} from "./chunk-63I4VHHU.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+
+// src/components/Radio.ts
+import {
+  defineComponent,
+  computed,
+  h,
+  inject,
+  ref,
+  watch
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  callUnknownEventHandler,
+  defaultRadioColors,
+  devWarn,
+  getRadioDotClasses,
+  getRadioLabelClasses,
+  getRadioVisualClasses,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  radioRootBaseClasses,
+  resolveRadioInputName
+} from "@expcat/tigercat-core";
+var Radio = defineComponent({
+  name: "TigerRadio",
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Number],
+      required: true
+    },
+    size: {
+      type: String
+    },
+    disabled: {
+      type: Boolean
+    },
+    name: {
+      type: String
+    },
+    modelValue: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultValue: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: String
+    },
+    className: {
+      type: String
+    },
+    style: {
+      type: Object
+    }
+  },
+  emits: {
+    change: (value, event) => typeof value === "boolean" && event instanceof Event,
+    "update:modelValue": (value) => typeof value === "boolean"
+  },
+  setup(props, { slots, emit, attrs, expose }) {
+    const groupContextRef = inject(RadioGroupKey, null);
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const groupContext = computed(() => groupContextRef?.value);
+    const isInGroup = computed(() => !!groupContext.value);
+    watch(
+      () => [isInGroup.value, props.modelValue],
+      ([grouped, model]) => {
+        if (grouped && model !== void 0) {
+          devWarn(
+            "Radio.groupChecked",
+            "Radio inside RadioGroup follows the group value. Per-item `v-model` is ignored."
+          );
+        }
+      },
+      { immediate: true }
+    );
+    const internalChecked = ref(props.defaultValue);
+    const isCheckedControlled = computed(() => props.modelValue !== void 0);
+    const actualSize = computed(() => props.size || groupContext.value?.size || "md");
+    const actualDisabled = computed(
+      () => Boolean(props.disabled) || Boolean(groupContext.value?.disabled) || Boolean(formItemControl?.disabled.value)
+    );
+    const actualName = computed(() => resolveRadioInputName(props.name, groupContext.value?.name));
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const isChecked = computed(() => {
+      if (isInGroup.value) return groupContext.value?.value === props.value;
+      return isCheckedControlled.value ? props.modelValue === true : internalChecked.value;
+    });
+    const inputRef = ref(null);
+    expose({
+      focus: () => inputRef.value?.focus(),
+      input: inputRef
+    });
+    const radioClasses = computed(
+      () => getRadioVisualClasses({
+        size: actualSize.value,
+        checked: !!isChecked.value,
+        disabled: actualDisabled.value,
+        colors: defaultRadioColors
+      })
+    );
+    const dotClasses = computed(
+      () => getRadioDotClasses({
+        size: actualSize.value,
+        checked: !!isChecked.value,
+        colors: defaultRadioColors
+      })
+    );
+    const labelClasses = computed(
+      () => getRadioLabelClasses({
+        size: actualSize.value,
+        disabled: actualDisabled.value,
+        colors: defaultRadioColors
+      })
+    );
+    const handleChange = (event) => {
+      if (actualDisabled.value) {
+        event.preventDefault();
+        return;
+      }
+      const target = event.target;
+      const newChecked = target.checked;
+      if (!newChecked) return;
+      if (isInGroup.value) {
+        groupContext.value?.onChange(props.value);
+        return;
+      }
+      if (!isCheckedControlled.value) internalChecked.value = true;
+      emit("update:modelValue", true);
+      emit("change", true, event);
+      formItemControl?.onChange(props.value);
+    };
+    const handleBlur = (event) => {
+      callUnknownEventHandler(attrs.onBlur, event);
+      if (!isInGroup.value) formItemControl?.onBlur();
+    };
+    return () => {
+      const { class: _class, style: _style, onBlur: _onBlur, ...restAttrs } = attrs;
+      const describedBy = mergeAriaDescribedBy(
+        typeof restAttrs["aria-describedby"] === "string" ? restAttrs["aria-describedby"] : void 0,
+        isInGroup.value ? void 0 : formItemControl?.describedBy.value
+      );
+      const attrId = typeof restAttrs.id === "string" ? restAttrs.id : void 0;
+      const effectiveId = isInGroup.value ? attrId : attrId ?? formItemControl?.id.value;
+      const input = h("input", {
+        ...restAttrs,
+        ref: inputRef,
+        id: effectiveId,
+        type: "radio",
+        class: "sr-only peer",
+        name: actualName.value,
+        value: props.value,
+        checked: isChecked.value,
+        disabled: actualDisabled.value,
+        "aria-invalid": status.value === "error" ? true : restAttrs["aria-invalid"],
+        "aria-describedby": describedBy,
+        onChange: handleChange,
+        onBlur: handleBlur
+      });
+      const visual = h("span", { class: radioClasses.value, "aria-hidden": "true" }, [
+        h("span", { class: dotClasses.value })
+      ]);
+      const rootClass = classNames(
+        radioRootBaseClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      );
+      const rootStyle = mergeStyleValues(attrs.style, props.style);
+      const children = slots.default?.();
+      if (!children) {
+        return h("span", { class: rootClass, style: rootStyle }, [input, visual]);
+      }
+      return h("label", { class: rootClass, style: rootStyle }, [
+        input,
+        visual,
+        h("span", { class: labelClasses.value }, children)
+      ]);
+    };
+  }
+});
+var Radio_default = Radio;
+
+export {
+  Radio,
+  Radio_default
+};

package/dist/chunk-AGZARRL3.mjs

@@ -0,0 +1,109 @@
+import {
+  ImagePreview
+} from "./chunk-JBSMLUJJ.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-AI6X2WFK.mjs

@@ -0,0 +1,124 @@
+// src/composables/useChartInteraction.ts
+import {
+  ref,
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  toValue
+} from "vue";
+import {
+  createChartPointerMoveScheduler,
+  getChartElementOpacity,
+  getChartLegendShellClasses,
+  isChartActivationKey,
+  nextChartSelectedIndex,
+  resolveChartActiveIndex,
+  resolveChartIndex,
+  shouldTrackChartPointer,
+  tooltipPositionFromEvent
+} from "@expcat/tigercat-core";
+function useChartInteraction(options) {
+  const { getData, onHoveredIndexChange, onSelectedIndexChange, onHover, onClick } = options;
+  const isHoverable = () => Boolean(toValue(options.hoverable));
+  const isShowTooltip = () => {
+    const value = options.showTooltip === void 0 ? true : toValue(options.showTooltip);
+    return value !== false;
+  };
+  const isSelectable = () => Boolean(toValue(options.selectable));
+  const localHoveredIndex = ref(null);
+  const localSelectedIndex = ref(null);
+  const tooltipPosition = ref({ x: 0, y: 0 });
+  const tooltipScheduler = createChartPointerMoveScheduler({
+    onPositionChange: (position) => {
+      tooltipPosition.value = position;
+    }
+  });
+  if (getCurrentScope()) {
+    onScopeDispose(() => tooltipScheduler.cancel());
+  }
+  const resolvedHoveredIndex = computed(
+    () => resolveChartIndex(options.hoveredIndexProp?.(), localHoveredIndex.value)
+  );
+  const resolvedSelectedIndex = computed(
+    () => resolveChartIndex(options.selectedIndexProp?.(), localSelectedIndex.value)
+  );
+  const activeIndex = computed(
+    () => resolveChartActiveIndex(resolvedSelectedIndex.value, resolvedHoveredIndex.value, isHoverable())
+  );
+  const getElementOpacity = (index) => {
+    return getChartElementOpacity(index, activeIndex.value, {
+      activeOpacity: toValue(options.activeOpacity),
+      inactiveOpacity: toValue(options.inactiveOpacity)
+    });
+  };
+  const applyHover = (index, position) => {
+    if (!shouldTrackChartPointer(isHoverable(), isShowTooltip())) return;
+    if (options.hoveredIndexProp?.() === void 0) {
+      localHoveredIndex.value = index;
+    }
+    if (position) tooltipPosition.value = position;
+    if (!isHoverable()) return;
+    onHoveredIndexChange?.(index);
+    onHover?.(index, index !== null ? getData?.(index) ?? null : null);
+  };
+  const handleMouseEnter = (index, event) => {
+    applyHover(index, tooltipPositionFromEvent(event));
+  };
+  const handleMouseMove = (event) => {
+    if (!shouldTrackChartPointer(isHoverable(), isShowTooltip())) return;
+    tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
+  };
+  const handleMouseLeave = () => {
+    tooltipScheduler.cancel();
+    applyHover(null);
+  };
+  const handleClick = (index) => {
+    onClick?.(index, getData?.(index));
+    if (!isSelectable()) return;
+    const nextIndex = nextChartSelectedIndex(resolvedSelectedIndex.value, index);
+    if (options.selectedIndexProp?.() === void 0) {
+      localSelectedIndex.value = nextIndex;
+    }
+    onSelectedIndexChange?.(nextIndex);
+  };
+  const handleKeyDown = (event, index) => {
+    if (!isChartActivationKey(event.key)) return;
+    event.preventDefault();
+    if (shouldTrackChartPointer(isHoverable(), isShowTooltip())) {
+      applyHover(index, tooltipPositionFromEvent(event));
+    }
+    handleClick(index);
+  };
+  const handleLegendClick = (index) => {
+    handleClick(index);
+  };
+  const handleLegendHover = (index, _item, event) => {
+    applyHover(index, event ? tooltipPositionFromEvent(event) : void 0);
+  };
+  const handleLegendLeave = () => {
+    handleMouseLeave();
+  };
+  const wrapperClasses = computed(
+    () => getChartLegendShellClasses(toValue(options.legendPosition) ?? "bottom")
+  );
+  return {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    resolvedSelectedIndex,
+    activeIndex,
+    getElementOpacity,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  };
+}
+
+export {
+  useChartInteraction
+};

package/dist/{chunk-BGGHSTMP.mjs → chunk-AJTD3TMG.mjs}

@@ -1,15 +1,24 @@
 import {
   createStatusIcon,
   createStatusIconWithLoading
-} from "./chunk-2TNZ4JNT.mjs";
+} from "./chunk-5VSSB4QF.mjs";
+import {
+  renderVueBodyTeleport
+} from "./chunk-Y63TRXZO.mjs";
+import {
+  getGlobalTigerLocale,
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/MessageContainer.ts
-import { computed, defineComponent, h, Teleport, TransitionGroup } from "vue";
+import { computed, defineComponent, h } from "vue";
 import {
   classNames,
   defaultMessageThemeColors,
+  getMessageCloseAriaLabel,
   getMessageIconPath,
   getMessageTypeClasses,
+  getToastItemRole,
   messageBaseClasses,
   messageCloseButtonClasses,
   messageCloseIconPath,
@@ -19,12 +28,6 @@ import {
   messageLoadingSpinnerClasses,
   messagePositionClasses
 } from "@expcat/tigercat-core";
-var MESSAGE_CONTAINER_ID = "tiger-message-container";
-var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
-var IS_TEST_ENV = (() => {
-  const proc = globalThis.process;
-  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
-})();
 var MessageContainer = /* @__PURE__ */ defineComponent({
   name: "TigerMessageContainer",
   props: {
@@ -36,12 +39,18 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
       type: Array,
       default: () => []
     },
-    onClose: Function
+    portal: {
+      type: Boolean,
+      default: true
+    }
   },
-  setup(props) {
-    const containerClasses = computed(() => {
-      return classNames(messageContainerBaseClasses, messagePositionClasses[props.position]);
-    });
+  emits: ["close"],
+  setup(props, { emit }) {
+    const config = useTigerConfig();
+    const locale = computed(() => config.value.locale ?? getGlobalTigerLocale());
+    const containerClasses = computed(
+      () => classNames(messageContainerBaseClasses, messagePositionClasses[props.position])
+    );
     const renderMessageItem = (message) => {
       const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
       const messageClasses = classNames(
@@ -53,14 +62,15 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
       );
       const iconPath = message.icon || getMessageIconPath(message.type);
       const iconClass = classNames(messageIconClasses, colorScheme.icon);
-      const a11yRole = message.type === "error" ? "alert" : "status";
-      const ariaLive = message.type === "error" ? "assertive" : "polite";
+      const a11yRole = getToastItemRole(message.type);
+      const closeLabel = getMessageCloseAriaLabel(locale.value, message.closeAriaLabel);
       const children = [
         createStatusIconWithLoading(
           iconPath,
           iconClass,
           message.type === "loading",
-          messageLoadingSpinnerClasses
+          messageLoadingSpinnerClasses,
+          { "aria-hidden": "true", focusable: "false" }
         ),
         h("div", { class: messageContentClasses }, message.content)
       ];
@@ -70,11 +80,14 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
             "button",
             {
               class: messageCloseButtonClasses,
-              onClick: () => props.onClose?.(message.id),
-              "aria-label": message.closeAriaLabel ?? MESSAGE_CLOSE_ARIA_LABEL,
+              onClick: () => emit("close", message.id),
+              "aria-label": closeLabel,
               type: "button"
             },
-            createStatusIcon(messageCloseIconPath, "w-4 h-4")
+            createStatusIcon(messageCloseIconPath, "w-4 h-4", {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
           )
         );
       }
@@ -84,8 +97,6 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
           key: message.id,
           class: messageClasses,
           role: a11yRole,
-          "aria-live": ariaLive,
-          "aria-atomic": "true",
           "aria-busy": message.type === "loading" ? "true" : void 0,
           "data-tiger-message": "",
           "data-tiger-message-type": message.type,
@@ -94,22 +105,18 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
         children
       );
     };
-    return () => h(
-      Teleport,
-      { to: "body" },
-      h(
+    return () => {
+      const node = h(
         "div",
         {
           class: containerClasses.value,
-          id: props.position === "top" ? MESSAGE_CONTAINER_ID : `${MESSAGE_CONTAINER_ID}-${props.position}`,
-          "aria-live": "polite",
-          "aria-relevant": "additions",
           "data-tiger-message-position": props.position,
           "data-tiger-message-container": ""
         },
-        IS_TEST_ENV ? props.messages.map(renderMessageItem) : h(TransitionGroup, { name: "message" }, () => props.messages.map(renderMessageItem))
-      )
-    );
+        props.messages.map(renderMessageItem)
+      );
+      return props.portal ? renderVueBodyTeleport(node) : node;
+    };
   }
 });
 var MessageContainer_default = MessageContainer;