@expcat/tigercat-vue 1.4.0 → 1.5.0

package/dist/{chunk-62ZSNASF.mjs → chunk-E7NE5HEC.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-R6WFL6NI.mjs";
 
 // src/components/FileManager.ts
-import { defineComponent, h, ref, computed } from "vue";
+import { defineComponent, h, ref, computed, nextTick } from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -14,7 +14,9 @@ import {
   resolveFileOpen,
   sliceBreadcrumbPath,
   toFileDragItem,
+  applyFileDragReorder,
   formatFileSizeLabel,
+  getFileManagerLabels,
   fileManagerToolbarClasses,
   fileManagerBreadcrumbClasses,
   fileManagerBreadcrumbItemClasses,
@@ -43,6 +45,10 @@ var FileManager = defineComponent({
       default: () => []
     },
     multiple: { type: Boolean, default: false },
+    columns: {
+      type: Array,
+      default: void 0
+    },
     sortField: {
       type: String,
       default: "name"
@@ -70,12 +76,48 @@ var FileManager = defineComponent({
     "navigate",
     "update:currentPath",
     "update:searchText",
-    "update:selectedKeys"
+    "update:selectedKeys",
+    "update:files",
+    "reorder"
   ],
   setup(props, { emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getFileManagerLabels(mergedLocale.value));
     const localSearch = ref(props.searchText);
+    const focusedIndex = ref(0);
+    const contentRef = ref(null);
+    let dragFromIndex = null;
+    function handleDragStart(event, item, index) {
+      if (!props.draggable || item.disabled) return;
+      dragFromIndex = index;
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", String(toFileDragItem(item, index).id));
+      }
+    }
+    function handleDragOver(event) {
+      if (!props.draggable || dragFromIndex === null) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    }
+    function handleDrop(event, toIndex) {
+      if (!props.draggable) return;
+      const fromIndex = dragFromIndex;
+      dragFromIndex = null;
+      if (fromIndex === null || fromIndex === toIndex) return;
+      event.preventDefault();
+      const items = model.value.processedItems;
+      const reordered = applyFileDragReorder(items, {
+        item: toFileDragItem(items[fromIndex], fromIndex),
+        fromIndex,
+        toIndex,
+        fromContainerId: "",
+        toContainerId: ""
+      });
+      emit("reorder", reordered, fromIndex, toIndex);
+      emit("update:files", reordered);
+    }
     const model = computed(
       () => deriveFileManagerModel({
         files: props.files,
@@ -111,6 +153,80 @@ var FileManager = defineComponent({
       emit("update:currentPath", newPath);
       emit("navigate", newPath);
     }
+    function getFirstEnabledIndex() {
+      return model.value.processedItems.findIndex((item) => !item.disabled);
+    }
+    function getLastEnabledIndex() {
+      for (let index = model.value.processedItems.length - 1; index >= 0; index -= 1) {
+        if (!model.value.processedItems[index]?.disabled) {
+          return index;
+        }
+      }
+      return -1;
+    }
+    function getFocusedItemIndex() {
+      return focusedIndex.value >= 0 && !model.value.processedItems[focusedIndex.value]?.disabled ? focusedIndex.value : getFirstEnabledIndex();
+    }
+    function focusItemAt(index) {
+      nextTick(() => {
+        contentRef.value?.querySelector(`[data-option-index="${index}"]`)?.focus();
+      });
+    }
+    function moveFocus(current, direction) {
+      if (model.value.processedItems.length === 0) return;
+      let next = current;
+      for (let i = 0; i < model.value.processedItems.length; i += 1) {
+        next = (next + direction + model.value.processedItems.length) % model.value.processedItems.length;
+        if (!model.value.processedItems[next]?.disabled) {
+          focusedIndex.value = next;
+          focusItemAt(next);
+          return;
+        }
+      }
+    }
+    function handleItemKeydown(event, item, index) {
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          event.preventDefault();
+          moveFocus(index, 1);
+          return;
+        case "ArrowUp":
+        case "ArrowLeft":
+          event.preventDefault();
+          moveFocus(index, -1);
+          return;
+        case "Home": {
+          event.preventDefault();
+          const first = getFirstEnabledIndex();
+          if (first >= 0) {
+            focusedIndex.value = first;
+            focusItemAt(first);
+          }
+          return;
+        }
+        case "End": {
+          event.preventDefault();
+          const last = getLastEnabledIndex();
+          if (last >= 0) {
+            focusedIndex.value = last;
+            focusItemAt(last);
+          }
+          return;
+        }
+        case " ":
+          event.preventDefault();
+          handleSelect(item);
+          return;
+        case "Enter":
+          event.preventDefault();
+          handleSelect(item);
+          handleOpen(item);
+          return;
+        default:
+          return;
+      }
+    }
     return () => {
       const breadcrumbItems = [
         h(
@@ -119,7 +235,7 @@ var FileManager = defineComponent({
             class: fileManagerBreadcrumbItemClasses,
             onClick: () => navigateToBreadcrumb(0)
           },
-          "Root"
+          labels.value.rootText
         ),
         ...props.currentPath.flatMap((seg, i) => [
           h("span", { class: fileManagerBreadcrumbSeparatorClasses }, "/"),
@@ -165,10 +281,13 @@ var FileManager = defineComponent({
       const renderItem = (item, index) => {
         const isSelected = model.value.selectedSet.has(item.key);
         const itemClass = getFileItemClasses(props.viewMode, isSelected);
+        const focusedItem = getFocusedItemIndex();
         const nameEl = h("span", { class: fileManagerItemNameClasses }, item.name);
+        const metaColumns = props.columns ?? ["size", "modified"];
         const metaEls = props.viewMode === "list" ? [
-          item.size !== void 0 ? h("span", { class: fileManagerItemMetaClasses }, formatFileSizeLabel(item.size)) : null,
-          item.modified ? h("span", { class: fileManagerItemMetaClasses }, item.modified) : null
+          metaColumns.includes("type") ? h("span", { class: fileManagerItemMetaClasses }, item.extension ?? item.type) : null,
+          metaColumns.includes("size") && item.size !== void 0 ? h("span", { class: fileManagerItemMetaClasses }, formatFileSizeLabel(item.size)) : null,
+          metaColumns.includes("modified") && item.modified ? h("span", { class: fileManagerItemMetaClasses }, item.modified) : null
         ] : [];
         const dragItem = props.draggable && !item.disabled ? toFileDragItem(item, index) : void 0;
         return h(
@@ -178,11 +297,20 @@ var FileManager = defineComponent({
             class: itemClass,
             role: "option",
             "aria-selected": isSelected,
+            tabindex: !item.disabled && index === focusedItem ? 0 : -1,
+            "data-option-index": index,
             "data-disabled": item.disabled || void 0,
+            onFocus: () => {
+              if (!item.disabled) focusedIndex.value = index;
+            },
+            onKeydown: (event) => handleItemKeydown(event, item, index),
             onClick: () => handleSelect(item),
             onDblclick: () => handleOpen(item),
             draggable: props.draggable && !item.disabled,
-            "data-drag-id": dragItem?.id
+            "data-drag-id": dragItem?.id,
+            onDragstart: (event) => handleDragStart(event, item, index),
+            onDragover: handleDragOver,
+            onDrop: (event) => handleDrop(event, index)
           },
           [fileIcon(item), nameEl, ...metaEls]
         );
@@ -190,7 +318,12 @@ var FileManager = defineComponent({
       const contentClass = props.viewMode === "grid" ? `${fileManagerContentClasses} grid grid-cols-4 gap-2` : fileManagerContentClasses;
       const content = model.value.processedItems.length > 0 ? h(
         "div",
-        { class: contentClass, role: "listbox", "aria-multiselectable": props.multiple },
+        {
+          ref: contentRef,
+          class: contentClass,
+          role: "listbox",
+          "aria-multiselectable": props.multiple
+        },
         model.value.processedItems.map(renderItem)
       ) : h(
         "div",

package/dist/{chunk-AP42636I.js → chunk-EG7XX6U4.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _chunkUWZSTI3Ejs = require('./chunk-UWZSTI3E.js');
+var _chunkW34IV4ECjs = require('./chunk-W34IV4EC.js');
 
 // src/components/DropdownItem.ts
 var _vue = require('vue');
@@ -47,7 +47,7 @@ var DropdownItem = _vue.defineComponent.call(void 0, {
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
-    const context = _vue.inject.call(void 0, _chunkUWZSTI3Ejs.DropdownContextKey, null);
+    const context = _vue.inject.call(void 0, _chunkW34IV4ECjs.DropdownContextKey, null);
     const handleClick = (event) => {
       if (props.disabled) {
         event.preventDefault();

package/dist/{chunk-RHLP2ED5.mjs → chunk-EVIZXEB2.mjs}

@@ -49,6 +49,17 @@ var QRCode = defineComponent({
       );
       const mSize = moduleSize.value;
       const modules = matrix.value;
+      const ariaLabel = resolveLocaleText("QR Code", mergedLocale.value?.qrcode?.ariaLabel);
+      const expiredText = resolveLocaleText(
+        "QR code expired",
+        mergedLocale.value?.qrcode?.expiredText
+      );
+      const refreshText = resolveLocaleText("Refresh", mergedLocale.value?.qrcode?.refreshText);
+      const loadingText = resolveLocaleText(
+        "Loading...",
+        mergedLocale.value?.qrcode?.loadingText,
+        mergedLocale.value?.common?.loadingText
+      );
       const rects = modules.flatMap(
         (row, r) => row.map(
           (cell, c) => cell ? h("rect", {
@@ -69,7 +80,7 @@ var QRCode = defineComponent({
           viewBox: `0 0 ${props.size} ${props.size}`,
           xmlns: "http://www.w3.org/2000/svg",
           role: "img",
-          "aria-label": "QR Code"
+          "aria-label": ariaLabel
         },
         [h("rect", { width: props.size, height: props.size, fill: props.bgColor }), ...rects]
       );
@@ -77,14 +88,14 @@ var QRCode = defineComponent({
       if (props.status === "expired") {
         children.push(
           h("div", { class: qrcodeOverlayClasses }, [
-            h("span", { class: qrcodeExpiredTextClasses }, "QR code expired"),
+            h("span", { class: qrcodeExpiredTextClasses }, expiredText),
             h(
               "span",
               {
                 class: qrcodeRefreshClasses,
                 onClick: () => emit("refresh")
               },
-              "Refresh"
+              refreshText
             )
           ])
         );
@@ -92,11 +103,7 @@ var QRCode = defineComponent({
       if (props.status === "loading") {
         children.push(
           h("div", { class: qrcodeOverlayClasses }, [
-            h(
-              "span",
-              { class: "text-sm text-gray-500" },
-              resolveLocaleText("Loading...", mergedLocale.value?.common?.loadingText)
-            )
+            h("span", { class: "text-sm text-gray-500" }, loadingText)
           ])
         );
       }

package/dist/{chunk-SGRUGYQ6.mjs → chunk-EYR27UIE.mjs}

@@ -25,6 +25,7 @@ import {
   getGestureTouchPoint,
   resolveSwipeGesture,
   isKeyActive,
+  getNextActiveKey,
   tabAddButtonClasses,
   tabCloseButtonClasses,
   tabContentBaseClasses
@@ -132,6 +133,7 @@ var TabPane = defineComponent({
       }
     };
     const handleClose = (event) => {
+      event.stopPropagation();
       if (!props.disabled) {
         tabsContext.handleTabClose(props.tabKey, event);
       }
@@ -157,10 +159,8 @@ var TabPane = defineComponent({
         return;
       }
       const tabList = event.currentTarget?.closest('[role="tablist"]');
-      const tabButtons = Array.from(
-        tabList?.querySelectorAll('[role="tab"]') ?? []
-      );
-      const enabled = tabButtons.filter((button) => !button.disabled);
+      const tabButtons = Array.from(tabList?.querySelectorAll('[role="tab"]') ?? []);
+      const enabled = tabButtons.filter((button) => button.getAttribute("aria-disabled") !== "true");
       const currentIndex = enabled.findIndex((button) => button.id === props.tabId);
       if (currentIndex === -1) {
         return;
@@ -194,17 +194,15 @@ var TabPane = defineComponent({
     return () => {
       if (props.renderMode === "tab") {
         return h(
-          "button",
+          "div",
           {
-            type: "button",
             class: tabItemClasses.value,
             role: "tab",
             id: props.tabId,
             "aria-controls": props.panelId,
             "aria-selected": isActive.value,
             "aria-disabled": props.disabled,
-            disabled: props.disabled,
-            tabindex: typeof props.tabIndex === "number" ? props.tabIndex : isActive.value ? 0 : -1,
+            tabindex: props.disabled ? -1 : typeof props.tabIndex === "number" ? props.tabIndex : isActive.value ? 0 : -1,
             "data-tiger-tabs-id": tabsContext.idBase,
             "data-tiger-tab-key": typeof props.tabKey === "number" ? `n:${props.tabKey}` : `s:${props.tabKey}`,
             onClick: handleClick,
@@ -214,9 +212,9 @@ var TabPane = defineComponent({
             props.icon && h("span", { class: "flex items-center" }, props.icon),
             h("span", props.label),
             isClosable.value && h(
-              "span",
+              "button",
               {
-                role: "button",
+                type: "button",
                 class: tabCloseButtonClasses,
                 "aria-label": `Close ${String(props.label)}`,
                 tabindex: -1,
@@ -363,6 +361,7 @@ var Tabs = defineComponent({
     const idBase = `tiger-tabs-${instance?.uid ?? "0"}`;
     const internalActiveKey = ref(props.defaultActiveKey);
     const swipeStart = ref(null);
+    let lastTabKeys = [];
     const currentActiveKey = computed(() => {
       return props.activeKey !== void 0 ? props.activeKey : internalActiveKey.value;
     });
@@ -377,6 +376,9 @@ var Tabs = defineComponent({
     };
     const handleTabClose = (key, event) => {
       event.stopPropagation();
+      if (props.activeKey === void 0 && key === currentActiveKey.value) {
+        internalActiveKey.value = getNextActiveKey(key, currentActiveKey.value, lastTabKeys);
+      }
       emit("edit", { targetKey: key, action: "remove" });
     };
     const activateAdjacentTab = (direction, enabledTabKeys) => {
@@ -480,6 +482,7 @@ var Tabs = defineComponent({
       if (props.activeKey === void 0 && internalActiveKey.value === void 0 && firstTabKey !== void 0) {
         internalActiveKey.value = firstTabKey;
       }
+      lastTabKeys = tabKeys;
       const resolvedActiveKey = currentActiveKey.value ?? firstTabKey;
       const activeTabIndex = tabKeys.indexOf(resolvedActiveKey ?? "");
       for (const { type, props: childProps, children: childChildren } of validChildren) {

package/dist/{chunk-PPEAQDD5.mjs → chunk-FAQL7HFW.mjs}

@@ -154,6 +154,7 @@ var Form = defineComponent({
     validate: (fieldName, isValid, _errorMessage) => typeof fieldName === "string" && typeof isValid === "boolean"
   },
   setup(props, { slots, emit, expose }) {
+    const initialValues = { ...props.model ?? {} };
     const errors = reactive([]);
     const fieldRules = reactive({});
     const fieldConditions = reactive({});
@@ -350,6 +351,13 @@ var Form = defineComponent({
     const resetFields = () => {
       validationDebouncer.cancel();
       clearValidate();
+      if (props.model) {
+        Object.keys(props.model).forEach((key) => delete props.model[key]);
+        Object.assign(props.model, { ...initialValues });
+      }
+      if (props.undoable) {
+        history.value = createFormHistory({ ...initialValues }, props.maxHistorySize);
+      }
     };
     const addField = (fieldName, defaultValue) => {
       if (props.model && fieldName) {

package/dist/{chunk-PTAWLJCV.mjs → chunk-FT2HWF7P.mjs}

@@ -1,7 +1,7 @@
 import {
   Steps,
   StepsItem
-} from "./chunk-6Y4NWO4I.mjs";
+} from "./chunk-HWL36OCD.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";

package/dist/{chunk-OK4PVFQG.mjs → chunk-G2LB4QCL.mjs}

@@ -1,6 +1,10 @@
 // src/components/ChartTooltip.ts
 import { defineComponent, h, computed, ref, watch, Teleport } from "vue";
-import { classNames, getChartTooltipTransform } from "@expcat/tigercat-core";
+import {
+  classNames,
+  getChartTooltipTransform,
+  resolveChartTooltipPosition
+} from "@expcat/tigercat-core";
 var ChartTooltip = defineComponent({
   name: "TigerChartTooltip",
   props: {
@@ -31,25 +35,24 @@ var ChartTooltip = defineComponent({
       () => [props.x, props.y, props.visible],
       (_value, _oldValue, onCleanup) => {
         if (!props.visible) return;
-        let x = props.x + 12;
-        let y = props.y - 8;
+        const initialPosition = resolveChartTooltipPosition({
+          x: props.x,
+          y: props.y,
+          rect: { width: 0, height: 0 },
+          viewport: { width: window.innerWidth, height: window.innerHeight }
+        });
         const frameHandle = requestAnimationFrame(() => {
           if (!tooltipRef.value) return;
           const rect = tooltipRef.value.getBoundingClientRect();
-          const viewportWidth = window.innerWidth;
-          const viewportHeight = window.innerHeight;
-          if (x + rect.width > viewportWidth - 8) {
-            x = props.x - rect.width - 12;
-          }
-          if (y + rect.height > viewportHeight - 8) {
-            y = props.y - rect.height - 8;
-          }
-          x = Math.max(8, x);
-          y = Math.max(8, y);
-          adjustedPosition.value = { x, y };
+          adjustedPosition.value = resolveChartTooltipPosition({
+            x: props.x,
+            y: props.y,
+            rect,
+            viewport: { width: window.innerWidth, height: window.innerHeight }
+          });
         });
         onCleanup(() => cancelAnimationFrame(frameHandle));
-        adjustedPosition.value = { x, y };
+        adjustedPosition.value = initialPosition;
       },
       { immediate: true }
     );

package/dist/{chunk-WGRNO4PB.js → chunk-GBYNY77G.js}

@@ -1,7 +1,7 @@
 "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 _chunkNCT5FXQBjs = require('./chunk-NCT5FXQB.js');
+var _chunk2RCBEBBRjs = require('./chunk-2RCBEBBR.js');
 
 
 var _chunkHA5QZ76Mjs = require('./chunk-HA5QZ76M.js');
@@ -251,7 +251,7 @@ var FormWizard = _vue.defineComponent.call(void 0, {
     };
     return () => {
       const stepsNodes = props.steps.map(
-        (step, index) => _vue.h.call(void 0, _chunkNCT5FXQBjs.StepsItem, {
+        (step, index) => _vue.h.call(void 0, _chunk2RCBEBBRjs.StepsItem, {
           key: _nullishCoalesce(step.key, () => ( index)),
           title: step.title,
           description: step.description,
@@ -281,7 +281,7 @@ var FormWizard = _vue.defineComponent.call(void 0, {
         [
           props.showSteps && props.steps.length > 0 ? _vue.h.call(void 0, "div", { class: stepsHeaderClass }, [
             _vue.h.call(void 0, 
-              _chunkNCT5FXQBjs.Steps,
+              _chunk2RCBEBBRjs.Steps,
               {
                 current: currentIndex.value,
                 direction: props.direction,

package/dist/{chunk-NTZ7LQTY.js → chunk-GJ5HJOQP.js}

@@ -2,6 +2,9 @@
 
 var _chunkJCMGBKS6js = require('./chunk-JCMGBKS6.js');
 
+
+var _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
+
 // src/components/DatePicker.ts
 var _vue = require('vue');
 
@@ -48,6 +51,19 @@ var CalendarIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.
 var CloseIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.CloseIconPath, "w-4 h-4");
 var ChevronLeftIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.ChevronLeftIconPath, "w-5 h-5");
 var ChevronRightIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.ChevronRightIconPath, "w-5 h-5");
+function normalizeDatePickerLocale(locale) {
+  if (!locale) return void 0;
+  if (typeof locale === "string") return { locale };
+  if ("datePicker" in locale) return locale;
+  const preset = locale;
+  return {
+    locale: hasDatePickerLocaleCode(preset) ? preset.locale : void 0,
+    datePicker: preset
+  };
+}
+function hasDatePickerLocaleCode(locale) {
+  return typeof locale.locale === "string";
+}
 var isDateLike = (value) => value === null || value instanceof Date || typeof value === "string";
 var isModelValue = (value) => {
   if (isDateLike(value)) return true;
@@ -201,7 +217,11 @@ var DatePicker = _vue.defineComponent.call(void 0, {
       return isModelValue(value);
     },
     /**
-     * Emitted when date changes
+     * Convenience event emitted alongside `update:modelValue` on every value
+     * change. This is an intentional, non-v-model event (the idiomatic Vue
+     * pattern); it always carries the same normalized value as
+     * `update:modelValue`. Prefer `v-model` for two-way binding and use
+     * `@change` only for side effects.
      */
     change: (value) => {
       return isModelValue(value);
@@ -212,6 +232,7 @@ var DatePicker = _vue.defineComponent.call(void 0, {
     clear: () => true
   },
   setup(props, { emit, attrs }) {
+    const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
     const isOpen = _vue.ref.call(void 0, false);
     const calendarRef = _vue.ref.call(void 0, null);
     const mobileCalendarRef = _vue.ref.call(void 0, null);
@@ -234,7 +255,10 @@ var DatePicker = _vue.defineComponent.call(void 0, {
     });
     const minDateParsed = _vue.computed.call(void 0, () => _tigercatcore.parseDate.call(void 0, props.minDate));
     const maxDateParsed = _vue.computed.call(void 0, () => _tigercatcore.parseDate.call(void 0, props.maxDate));
-    const localeCode = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLocaleCode.call(void 0, props.locale));
+    const mergedLocale = _vue.computed.call(void 0, 
+      () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, normalizeDatePickerLocale(props.locale))
+    );
+    const localeCode = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLocaleCode.call(void 0, mergedLocale.value));
     const viewingMonth = _vue.ref.call(void 0, 
       _nullishCoalesce(_optionalChain([(_nullishCoalesce(selectedDate.value, () => ( selectedRange.value[0]))), 'optionalAccess', _2 => _2.getMonth, 'call', _3 => _3()]), () => ( (/* @__PURE__ */ new Date()).getMonth()))
     );
@@ -268,7 +292,7 @@ var DatePicker = _vue.defineComponent.call(void 0, {
     const isRtl = _vue.computed.call(void 0, () => _tigercatcore.getLocaleDirection.call(void 0, localeCode.value) === "rtl");
     const previousMonthIcon = _vue.computed.call(void 0, () => isRtl.value ? ChevronRightIcon : ChevronLeftIcon);
     const nextMonthIcon = _vue.computed.call(void 0, () => isRtl.value ? ChevronLeftIcon : ChevronRightIcon);
-    const labels = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLabels.call(void 0, props.locale, props.labels));
+    const labels = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLabels.call(void 0, mergedLocale.value, props.labels));
     const mobileDate = _vue.computed.call(void 0, () => {
       if (!isRangeMode.value) return _nullishCoalesce(selectedDate.value, () => ( _tigercatcore.normalizeDate.call(void 0, /* @__PURE__ */ new Date())));
       const [start, end] = selectedRange.value;
@@ -417,7 +441,18 @@ var DatePicker = _vue.defineComponent.call(void 0, {
     }
     function handleShortcut(shortcut) {
       const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
-      emitValue(val);
+      if (!isRangeMode.value) {
+        const date = val instanceof Date ? _tigercatcore.normalizeDate.call(void 0, val) : val ? _tigercatcore.normalizeDate.call(void 0, _tigercatcore.parseDate.call(void 0, val)) : null;
+        emitValue(date);
+      } else {
+        const range = val;
+        if (range && Array.isArray(range)) {
+          emitValue([
+            range[0] ? _tigercatcore.normalizeDate.call(void 0, range[0] instanceof Date ? range[0] : _tigercatcore.parseDate.call(void 0, range[0])) : null,
+            range[1] ? _tigercatcore.normalizeDate.call(void 0, range[1] instanceof Date ? range[1] : _tigercatcore.parseDate.call(void 0, range[1])) : null
+          ]);
+        }
+      }
       closeCalendar();
     }
     function selectDate(date) {
@@ -719,10 +754,6 @@ var DatePicker = _vue.defineComponent.call(void 0, {
               ]),
               // Calendar grid
               (() => {
-                const [rangeStart, rangeEnd] = selectedRange.value;
-                const normStart = rangeStart ? _tigercatcore.normalizeDate.call(void 0, rangeStart) : null;
-                const normEnd = rangeEnd ? _tigercatcore.normalizeDate.call(void 0, rangeEnd) : null;
-                const isSelectingEnd = isRangeMode.value && Boolean(rangeStart) && !rangeEnd;
                 return _vue.h.call(void 0, 
                   "div",
                   {
@@ -734,41 +765,39 @@ var DatePicker = _vue.defineComponent.call(void 0, {
                   [
                     ...calendarDays.value.map((date, index) => {
                       if (!date) return null;
-                      const normDate = _tigercatcore.normalizeDate.call(void 0, date);
-                      const isRangeStart = isRangeMode.value && rangeStart ? _tigercatcore.isSameDay.call(void 0, date, rangeStart) : false;
-                      const isRangeEnd = isRangeMode.value && rangeEnd ? _tigercatcore.isSameDay.call(void 0, date, rangeEnd) : false;
-                      const isInRange = isRangeMode.value && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
-                      const isSelected = !isRangeMode.value ? selectedDate.value ? _tigercatcore.isSameDay.call(void 0, date, selectedDate.value) : false : isRangeStart || isRangeEnd;
-                      const isCurrentMonthDay = isCurrentMonth(date);
-                      const isTodayDay = _tigercatcore.isToday.call(void 0, date);
-                      const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
-                      const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                      const iso = _tigercatcore.formatDate.call(void 0, date, "yyyy-MM-dd");
+                      const cell = _tigercatcore.getDatePickerCalendarCellState.call(void 0, {
+                        date,
+                        selectedDate: selectedDate.value,
+                        selectedRange: selectedRange.value,
+                        isRangeMode: isRangeMode.value,
+                        isCurrentMonth,
+                        isDateDisabled
+                      });
                       return _vue.h.call(void 0, 
                         "button",
                         {
                           key: index,
                           type: "button",
                           class: _tigercatcore.getDatePickerDayCellClasses.call(void 0, 
-                            isCurrentMonthDay,
-                            isSelected,
-                            isTodayDay,
-                            isDisabled,
-                            Boolean(isInRange),
-                            Boolean(isRangeStart),
-                            Boolean(isRangeEnd)
+                            cell.isCurrentMonthDay,
+                            cell.isSelected,
+                            cell.isTodayDay,
+                            cell.isDisabled,
+                            cell.isInRange,
+                            cell.isRangeStart,
+                            cell.isRangeEnd
                           ),
-                          disabled: isDisabled,
+                          disabled: cell.isDisabled,
                           onClick: () => selectDate(date),
                           role: "gridcell",
-                          "data-date": iso,
+                          "data-date": cell.iso,
                           onFocus: () => {
-                            activeDateIso.value = iso;
+                            activeDateIso.value = cell.iso;
                           },
-                          tabindex: activeDateIso.value === iso && !isDisabled ? 0 : -1,
-                          "aria-label": iso,
-                          "aria-selected": isSelected,
-                          "aria-current": isTodayDay ? "date" : void 0
+                          tabindex: activeDateIso.value === cell.iso && !cell.isDisabled ? 0 : -1,
+                          "aria-label": cell.iso,
+                          "aria-selected": cell.isSelected,
+                          "aria-current": cell.isTodayDay ? "date" : void 0
                         },
                         date.getDate()
                       );