@expcat/tigercat-vue 1.5.0 → 2.0.0-preview.2

package/dist/chunk-GTFAC625.mjs

@@ -0,0 +1,120 @@
+import {
+  createStatusIcon,
+  createStatusIconWithLoading
+} from "./chunk-2TNZ4JNT.mjs";
+
+// src/components/MessageContainer.ts
+import { computed, defineComponent, h, Teleport, TransitionGroup } from "vue";
+import {
+  classNames,
+  defaultMessageThemeColors,
+  getMessageIconPath,
+  getMessageTypeClasses,
+  messageBaseClasses,
+  messageCloseButtonClasses,
+  messageCloseIconPath,
+  messageContainerBaseClasses,
+  messageContentClasses,
+  messageIconClasses,
+  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: {
+    position: {
+      type: String,
+      default: "top"
+    },
+    messages: {
+      type: Array,
+      default: () => []
+    },
+    onClose: Function
+  },
+  setup(props) {
+    const containerClasses = computed(() => {
+      return classNames(messageContainerBaseClasses, messagePositionClasses[props.position]);
+    });
+    const renderMessageItem = (message) => {
+      const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
+      const messageClasses = classNames(
+        messageBaseClasses,
+        colorScheme.bg,
+        colorScheme.border,
+        colorScheme.text,
+        message.className
+      );
+      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 children = [
+        createStatusIconWithLoading(
+          iconPath,
+          iconClass,
+          message.type === "loading",
+          messageLoadingSpinnerClasses
+        ),
+        h("div", { class: messageContentClasses }, message.content)
+      ];
+      if (message.closable) {
+        children.push(
+          h(
+            "button",
+            {
+              class: messageCloseButtonClasses,
+              onClick: () => props.onClose?.(message.id),
+              "aria-label": MESSAGE_CLOSE_ARIA_LABEL,
+              type: "button"
+            },
+            createStatusIcon(messageCloseIconPath, "w-4 h-4")
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          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,
+          "data-tiger-message-id": String(message.id)
+        },
+        children
+      );
+    };
+    return () => h(
+      Teleport,
+      { to: "body" },
+      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))
+      )
+    );
+  }
+});
+var MessageContainer_default = MessageContainer;
+
+export {
+  MessageContainer,
+  MessageContainer_default
+};

package/dist/{chunk-QH3YF5B6.mjs → chunk-GVLLO45Y.mjs}

@@ -13,6 +13,8 @@ import {
   selectGroupLabelClasses,
   selectSearchInputClasses,
   selectEmptyStateClasses,
+  selectDoneActionClasses,
+  selectDoneButtonClasses,
   isOptionGroup,
   createSelectSearchDebouncer,
   getCreateSelectOptionLabel,
@@ -30,7 +32,8 @@ import {
   closeSolidIcon20PathD,
   checkSolidIcon20PathD,
   resolveLocaleText,
-  mergeTigerLocale
+  mergeTigerLocale,
+  getSelectLabels
 } from "@expcat/tigercat-core";
 var selectInstanceId = 0;
 var ChevronDownIcon = h(
@@ -122,6 +125,14 @@ var Select = defineComponent({
      * Enable search functionality
      */
     searchable: Boolean,
+    searchValue: {
+      type: String,
+      default: void 0
+    },
+    defaultSearchValue: {
+      type: String,
+      default: ""
+    },
     /**
      * Allow multiple selection
      */
@@ -135,18 +146,9 @@ var Select = defineComponent({
       default: true
     },
     /**
-     * Text shown when no search results
-     * @default 'No options found'
-     */
-    noOptionsText: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Text shown when no data available
-     * @default 'No options available'
+     * Text shown when the options list is empty or no search result matches
      */
-    noDataText: {
+    emptyText: {
       type: String,
       default: void 0
     },
@@ -202,9 +204,16 @@ var Select = defineComponent({
     locale: {
       type: Object,
       default: void 0
+    },
+    /**
+     * UI labels for custom text. Takes precedence over locale and ConfigProvider text.
+     */
+    labels: {
+      type: Object,
+      default: void 0
     }
   },
-  emits: ["update:modelValue", "change", "search", "create"],
+  emits: ["update:modelValue", "update:searchValue", "change", "search-change", "create"],
   setup(props, { emit }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
@@ -212,7 +221,8 @@ var Select = defineComponent({
     const listboxId = `tiger-select-listbox-${instanceId}`;
     const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
     const isOpen = ref(false);
-    const searchQuery = ref("");
+    const uncontrolledSearchValue = ref(props.defaultSearchValue);
+    const searchQuery = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
     const activeIndex = ref(-1);
     const createdOptions = ref([]);
     const dropdownRef = ref(null);
@@ -232,8 +242,15 @@ var Select = defineComponent({
     });
     let searchDebouncer = createSelectSearchDebouncer({
       delay: props.searchDebounce,
-      onSearch: (query) => emit("search", query)
+      onSearchChange: (query) => emit("search-change", query)
     });
+    function updateSearchValue(query) {
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = query;
+      }
+      emit("update:searchValue", query);
+      searchDebouncer.schedule(query);
+    }
     const filteredOptions = computed(() => {
       return resolveSelectFilteredOptions(props.options, searchQuery.value, {
         searchable: props.searchable,
@@ -259,12 +276,12 @@ var Select = defineComponent({
         const selectedOptions = [...allOptions.value, ...createdOptions.value].filter(
           (opt) => currentValue.includes(opt.value)
         );
-        const labels = selectedOptions.map((opt) => opt.label);
-        if (props.maxTagCount !== void 0 && labels.length > props.maxTagCount) {
-          const visible = labels.slice(0, props.maxTagCount);
-          return `${visible.join(", ")} +${labels.length - props.maxTagCount}`;
+        const labels2 = selectedOptions.map((opt) => opt.label);
+        if (props.maxTagCount !== void 0 && labels2.length > props.maxTagCount) {
+          const visible = labels2.slice(0, props.maxTagCount);
+          return `${visible.join(", ")} +${labels2.length - props.maxTagCount}`;
         }
-        return labels.join(", ");
+        return labels2.join(", ");
       }
       const value = Array.isArray(props.modelValue) ? void 0 : props.modelValue;
       if (value === void 0 || value === null || value === "") {
@@ -278,6 +295,8 @@ var Select = defineComponent({
     const showClearButton = computed(() => {
       return props.clearable && !props.disabled && props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "" && (!Array.isArray(props.modelValue) || props.modelValue.length > 0);
     });
+    const labels = computed(() => getSelectLabels(mergedLocale.value, props.labels));
+    const doneText = computed(() => resolveLocaleText(labels.value.doneText));
     function isSelected(option) {
       if (props.multiple && Array.isArray(props.modelValue)) {
         return props.modelValue.includes(option.value);
@@ -313,7 +332,7 @@ var Select = defineComponent({
     }
     function closeDropdown() {
       isOpen.value = false;
-      searchQuery.value = "";
+      updateSearchValue("");
       activeIndex.value = -1;
     }
     function selectOption(option) {
@@ -357,8 +376,7 @@ var Select = defineComponent({
     }
     function handleSearchInput(event) {
       const target = event.target;
-      searchQuery.value = target.value;
-      searchDebouncer.schedule(target.value);
+      updateSearchValue(target.value);
     }
     function getActiveOption() {
       if (activeIndex.value < 0) {
@@ -556,7 +574,7 @@ var Select = defineComponent({
         searchDebouncer.cancel();
         searchDebouncer = createSelectSearchDebouncer({
           delay,
-          onSearch: (query) => emit("search", query)
+          onSearchChange: (query) => emit("search-change", query)
         });
       }
     );
@@ -784,16 +802,28 @@ var Select = defineComponent({
             })() : h(
               "div",
               { class: selectEmptyStateClasses },
-              props.options.length === 0 ? resolveLocaleText(
-                "No options available",
-                props.noDataText,
-                mergedLocale.value?.common?.emptyText
-              ) : resolveLocaleText(
+              resolveLocaleText(
                 "No options found",
-                props.noOptionsText,
+                props.emptyText,
                 mergedLocale.value?.common?.emptyText
               )
-            )
+            ),
+            h("div", { class: selectDoneActionClasses }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: selectDoneButtonClasses,
+                  onClick: closeDropdown,
+                  onKeydown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.stopPropagation();
+                    }
+                  }
+                },
+                doneText.value
+              )
+            ])
           ]
         )
       ]);

package/dist/{chunk-LSWTZHBV.mjs → chunk-HGXD57QM.mjs}

@@ -17,7 +17,10 @@ import {
   floatButtonSizeClasses,
   floatButtonTypeClasses,
   floatButtonDisabledClasses,
-  floatButtonGroupClasses
+  floatButtonGroupClasses,
+  getViewportOffsetStyle,
+  viewportFloatingBaseClasses,
+  viewportPlacementClasses
 } from "@expcat/tigercat-core";
 var FloatButtonGroupShapeKey = /* @__PURE__ */ Symbol("FloatButtonGroupShape");
 var FloatButton = defineComponent({
@@ -52,6 +55,18 @@ var FloatButton = defineComponent({
       type: String,
       default: void 0
     },
+    floating: {
+      type: Boolean,
+      default: false
+    },
+    placement: {
+      type: String,
+      default: "bottom-right"
+    },
+    offset: {
+      type: [Number, String, Object],
+      default: void 0
+    },
     style: {
       type: Object,
       default: void 0
@@ -73,6 +88,8 @@ var FloatButton = defineComponent({
         floatButtonSizeClasses[props.size],
         floatButtonTypeClasses[props.type],
         props.disabled && floatButtonDisabledClasses,
+        props.floating && viewportFloatingBaseClasses,
+        props.floating && viewportPlacementClasses[props.placement],
         props.className,
         coerceClassValue(attrs.class)
       )
@@ -89,7 +106,11 @@ var FloatButton = defineComponent({
         {
           ...attrs,
           class: classes.value,
-          style: mergeStyleValues(attrsRecord.style, props.style),
+          style: mergeStyleValues(
+            props.floating ? getViewportOffsetStyle(props.placement, props.offset) : void 0,
+            attrsRecord.style,
+            props.style
+          ),
           type: "button",
           disabled: props.disabled,
           "aria-label": props.ariaLabel ?? props.tooltip,

package/dist/{chunk-X43QLJ5E.mjs → chunk-IGT4QB7O.mjs}

@@ -1,6 +1,6 @@
 import {
   ImagePreview
-} from "./chunk-WWB7VKKH.mjs";
+} from "./chunk-36WSYHJU.mjs";
 
 // src/components/ImageGroup.ts
 import { defineComponent, h, ref, provide, onBeforeUnmount } from "vue";
@@ -15,7 +15,7 @@ var ImageGroup = defineComponent({
   props: {
     preview: { type: Boolean, default: true }
   },
-  emits: ["preview-visible-change"],
+  emits: ["preview-open-change"],
   setup(props, { slots, emit }) {
     const images = ref([]);
     const previewVisible = ref(false);
@@ -33,7 +33,7 @@ var ImageGroup = defineComponent({
         if (!props.preview) return;
         previewIndex.value = index;
         previewVisible.value = true;
-        emit("preview-visible-change", true);
+        emit("preview-open-change", true);
       }
     };
     provide(IMAGE_GROUP_INJECTION_KEY, context);
@@ -48,7 +48,7 @@ var ImageGroup = defineComponent({
         currentIndex: previewIndex.value,
         "onUpdate:open": (val) => {
           previewVisible.value = val;
-          if (!val) emit("preview-visible-change", false);
+          if (!val) emit("preview-open-change", false);
         },
         "onUpdate:currentIndex": (val) => {
           previewIndex.value = val;

package/dist/{chunk-3VFZB5ZK.mjs → chunk-IQNZ4UEA.mjs}

@@ -23,6 +23,7 @@ import {
   nextTick
 } from "vue";
 import {
+  ANIMATION_DURATION_MS,
   classNames,
   coerceClassValue,
   mergeStyleValues,
@@ -199,15 +200,6 @@ var Modal = defineComponent({
       type: Boolean,
       default: false
     },
-    /**
-     * Disable teleport (useful for testing)
-     * @default false
-     * @internal
-     */
-    disableTeleport: {
-      type: Boolean,
-      default: false
-    },
     /**
      * Whether the modal is draggable by its header
      * @default false
@@ -217,7 +209,7 @@ var Modal = defineComponent({
       default: false
     }
   },
-  emits: ["update:open", "close", "cancel", "ok"],
+  emits: ["update:open", "close", "cancel", "ok", "after-close"],
   setup(props, { slots, emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
@@ -255,10 +247,12 @@ var Modal = defineComponent({
     const handleClose = () => {
       emit("update:open", false);
       emit("cancel");
+      emit("close");
     };
     const handleOk = () => {
       emit("ok");
       emit("update:open", false);
+      emit("close");
     };
     const handleMaskClick = (event) => {
       if (shouldCloseOnMaskClick(event, props.maskClosable)) {
@@ -305,7 +299,7 @@ var Modal = defineComponent({
     });
     watch(
       () => props.open,
-      async (nextVisible) => {
+      async (nextVisible, previousVisible, onCleanup) => {
         if (nextVisible) {
           hasBeenOpened.value = true;
           const active = document.activeElement;
@@ -314,9 +308,12 @@ var Modal = defineComponent({
           const el = closeButtonRef.value ?? dialogRef.value;
           el?.focus?.();
         } else {
-          emit("close");
           previousActiveElement.value?.focus?.();
           dragOffset.value = { x: 0, y: 0 };
+          if (previousVisible) {
+            const timer = window.setTimeout(() => emit("after-close"), ANIMATION_DURATION_MS);
+            onCleanup(() => window.clearTimeout(timer));
+          }
         }
       }
     );
@@ -474,7 +471,7 @@ var Modal = defineComponent({
           )
         ]
       );
-      return renderVueBodyTeleport([renderedWrapper], props.disableTeleport);
+      return renderVueBodyTeleport([renderedWrapper]);
     };
   }
 });

package/dist/{chunk-UTGFGMZT.mjs → chunk-JPCMI3A4.mjs}

@@ -1,18 +1,18 @@
 import {
   useChartInteraction
-} from "./chunk-R2HO74FE.mjs";
+} from "./chunk-PE5OA4YG.mjs";
+import {
+  ChartTooltip
+} from "./chunk-SPFL55TF.mjs";
+import {
+  ChartCanvas
+} from "./chunk-W5RZPTFD.mjs";
 import {
   ChartLegend
 } from "./chunk-HLPSHCXO.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
-import {
-  ChartTooltip
-} from "./chunk-G2LB4QCL.mjs";
-import {
-  ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
 
 // src/components/RadarChart.ts
 import { defineComponent, computed, h, ref, useId } from "vue";
@@ -755,7 +755,7 @@ var RadarChart = defineComponent({
       );
       const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
         content: tooltipContent.value,
-        visible: hoveredPoint.value !== null && tooltipContent.value !== "",
+        open: hoveredPoint.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;

package/dist/{chunk-SMCOBLF6.mjs → chunk-KBJANUZZ.mjs}

@@ -1,6 +1,6 @@
 import {
   ChartTooltip
-} from "./chunk-G2LB4QCL.mjs";
+} from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
 } from "./chunk-W5RZPTFD.mjs";
@@ -73,20 +73,20 @@ var GaugeChart = defineComponent({
       animCtrl?.stop();
     });
     const wrapperRef = ref(null);
-    const tooltipState = ref({ visible: false, x: 0, y: 0 });
+    const tooltipState = ref({ open: false, x: 0, y: 0 });
     const handleTooltipMove = (e) => {
       if (!props.showTooltip) return;
-      tooltipState.value = { visible: true, x: e.clientX, y: e.clientY };
+      tooltipState.value = { open: true, x: e.clientX, y: e.clientY };
     };
     const handleTooltipLeave = () => {
-      tooltipState.value = { ...tooltipState.value, visible: false };
+      tooltipState.value = { ...tooltipState.value, open: false };
     };
     const handleTooltipFocus = () => {
       if (!props.showTooltip) return;
       const rect = wrapperRef.value?.getBoundingClientRect();
       if (rect) {
         tooltipState.value = {
-          visible: true,
+          open: true,
           x: rect.left + rect.width / 2,
           y: rect.top + rect.height / 2
         };
@@ -262,7 +262,7 @@ var GaugeChart = defineComponent({
           canvas,
           props.showTooltip ? h(ChartTooltip, {
             content: tooltipContent,
-            visible: tooltipState.value.visible && tooltipContent !== "",
+            open: tooltipState.value.open && tooltipContent !== "",
             x: tooltipState.value.x,
             y: tooltipState.value.y
           }) : null

package/dist/{chunk-M4EP4OVR.mjs → chunk-KE6RGD4Y.mjs}

@@ -127,7 +127,8 @@ function useFloatingPopup(options) {
     y,
     actualPlacement,
     floatingStyles,
-    triggerHandlers
+    triggerHandlers,
+    closeAndRestoreFocus
   };
 }
 

package/dist/chunk-KIPTVKU2.mjs

@@ -0,0 +1,104 @@
+// src/composables/useDrag.ts
+import { reactive, computed } from "vue";
+import {
+  createDragState,
+  handleDragStart,
+  handleDragOver,
+  handleDrop,
+  handleDragEnd,
+  reorderItems,
+  moveItemBetweenContainers,
+  resolveDragConfig,
+  isDragEnabled,
+  isValidDragHandle,
+  isSameContainerDrag,
+  isCrossContainerDrag
+} from "@expcat/tigercat-core";
+function useDrag(options = {}) {
+  const config = resolveDragConfig(options.config);
+  const containerId = options.containerId ?? "default";
+  const callbacks = {
+    onDragStart: options.onDragStart,
+    onDragOver: options.onDragOver,
+    onDrop: options.onDrop,
+    onDragEnd: options.onDragEnd
+  };
+  const state = reactive(createDragState());
+  const isDragging = computed(() => state.isDragging);
+  const draggedItem = computed(() => state.draggedItem);
+  const isSameContainer = computed(() => isSameContainerDrag(state));
+  const isCrossContainer = computed(() => isCrossContainerDrag(state));
+  function startDrag(item, event) {
+    if (!isDragEnabled(config)) return;
+    if (event) {
+      const target = event.target;
+      if (!isValidDragHandle(target, config)) return;
+    }
+    handleDragStart(state, item, containerId, callbacks);
+  }
+  function dragOver(item, event) {
+    if (event) {
+      event.preventDefault();
+    }
+    handleDragOver(state, item, containerId, callbacks);
+  }
+  function drop(event) {
+    if (event) {
+      event.preventDefault();
+    }
+    return handleDrop(state, callbacks);
+  }
+  function endDrag(cancelled = false) {
+    handleDragEnd(state, cancelled, callbacks);
+  }
+  function reorder(items) {
+    if (!state.isDragging) return null;
+    return reorderItems(items, state.sourceIndex, state.targetIndex);
+  }
+  function moveBetween(sourceItems, targetItems) {
+    if (!state.isDragging) return null;
+    return moveItemBetweenContainers(sourceItems, targetItems, state.sourceIndex, state.targetIndex);
+  }
+  function getDragItemAttrs(item) {
+    return {
+      draggable: !config.disabled,
+      "data-drag-id": item.id,
+      "data-drag-index": item.index,
+      class: state.isDragging && state.draggedItem?.id === item.id ? config.dragClass : void 0,
+      "aria-grabbed": state.isDragging && state.draggedItem?.id === item.id,
+      role: "listitem",
+      onDragstart: (e) => startDrag(item, e),
+      onDragover: (e) => dragOver(item, e),
+      onDragend: () => endDrag(false)
+    };
+  }
+  function getDropZoneAttrs() {
+    return {
+      "aria-dropeffect": state.isDragging ? "move" : "none",
+      onDragover: (e) => {
+        e.preventDefault();
+        dragOver(null, e);
+      },
+      onDrop: (e) => drop(e)
+    };
+  }
+  return {
+    state,
+    isDragging,
+    draggedItem,
+    startDrag,
+    dragOver,
+    drop,
+    endDrag,
+    reorder,
+    moveBetween,
+    isSameContainer,
+    isCrossContainer,
+    getDragItemAttrs,
+    getDropZoneAttrs
+  };
+}
+
+export {
+  useDrag
+};

package/dist/{chunk-VYBRLIKF.mjs → chunk-MJRFB6ZA.mjs}

@@ -38,19 +38,19 @@ import {
   datePickerClearButtonClasses,
   datePickerFooterClasses,
   datePickerFooterButtonClasses,
-  CalendarIconPath,
-  CloseIconPath,
-  ChevronLeftIconPath,
-  ChevronRightIconPath,
+  calendarSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  chevronLeftSolidIcon20PathD,
+  chevronRightSolidIcon20PathD,
   getDatePickerLocaleCode,
   getDatePickerLabels,
   getLocaleDirection,
   mergeTigerLocale
 } from "@expcat/tigercat-core";
-var CalendarIcon = createFilledIcon(CalendarIconPath, "w-5 h-5");
-var CloseIcon = createFilledIcon(CloseIconPath, "w-4 h-4");
-var ChevronLeftIcon = createFilledIcon(ChevronLeftIconPath, "w-5 h-5");
-var ChevronRightIcon = createFilledIcon(ChevronRightIconPath, "w-5 h-5");
+var CalendarIcon = createFilledIcon(calendarSolidIcon20PathD, "w-5 h-5");
+var CloseIcon = createFilledIcon(closeSolidIcon20PathD, "w-4 h-4");
+var ChevronLeftIcon = createFilledIcon(chevronLeftSolidIcon20PathD, "w-5 h-5");
+var ChevronRightIcon = createFilledIcon(chevronRightSolidIcon20PathD, "w-5 h-5");
 function normalizeDatePickerLocale(locale) {
   if (!locale) return void 0;
   if (typeof locale === "string") return { locale };