@expcat/tigercat-vue 1.4.0 → 1.5.0

package/dist/{chunk-M2ECZQ2D.mjs → chunk-MF7BKYGN.mjs}

@@ -17,6 +17,7 @@ import {
   getTransferButtonClasses,
   splitTransferData,
   filterTransferItems,
+  moveTransferItems,
   getPickerListboxAria,
   getPickerOptionAria,
   coerceClassValue,
@@ -50,7 +51,15 @@ var Transfer = defineComponent({
   props: {
     modelValue: {
       type: Array,
-      default: () => []
+      default: void 0
+    },
+    /**
+     * Target keys alias (core/shared name). Used when `modelValue` /
+     * `v-model` is not bound; `modelValue` takes priority.
+     */
+    targetKeys: {
+      type: Array,
+      default: void 0
     },
     dataSource: {
       type: Array,
@@ -100,10 +109,10 @@ var Transfer = defineComponent({
     const targetSelectedKeys = ref(/* @__PURE__ */ new Set());
     const sourceSearch = ref("");
     const targetSearch = ref("");
-    const { sourceItems: _sourceItems, targetItems: _targetItems } = computed(
-      () => splitTransferData(props.dataSource, props.modelValue)
-    ).value;
-    const computedData = computed(() => splitTransferData(props.dataSource, props.modelValue));
+    const resolvedTargetKeys = computed(() => props.modelValue ?? props.targetKeys ?? []);
+    const computedData = computed(
+      () => splitTransferData(props.dataSource, resolvedTargetKeys.value)
+    );
     const filteredSourceItems = computed(
       () => filterTransferItems(computedData.value.sourceItems, sourceSearch.value, props.filterOption)
     );
@@ -146,27 +155,27 @@ var Transfer = defineComponent({
     }
     function moveRight() {
       if (!canMoveRight.value) return;
-      const keysToMove = [...sourceSelectedKeys.value].filter((key) => {
-        const item = props.dataSource.find((d) => d.key === key);
-        return item && !item.disabled;
-      });
-      const newTargetKeys = [...props.modelValue, ...keysToMove];
+      const { targetKeys: newTargetKeys, movedKeys } = moveTransferItems(
+        "right",
+        resolvedTargetKeys.value,
+        sourceSelectedKeys.value,
+        props.dataSource
+      );
       sourceSelectedKeys.value = /* @__PURE__ */ new Set();
       emit("update:modelValue", newTargetKeys);
-      emit("change", newTargetKeys, "right", keysToMove);
+      emit("change", newTargetKeys, "right", movedKeys);
     }
     function moveLeft() {
       if (!canMoveLeft.value) return;
-      const keysToRemove = new Set(
-        [...targetSelectedKeys.value].filter((key) => {
-          const item = props.dataSource.find((d) => d.key === key);
-          return item && !item.disabled;
-        })
+      const { targetKeys: newTargetKeys, movedKeys } = moveTransferItems(
+        "left",
+        resolvedTargetKeys.value,
+        targetSelectedKeys.value,
+        props.dataSource
       );
-      const newTargetKeys = props.modelValue.filter((k) => !keysToRemove.has(k));
       targetSelectedKeys.value = /* @__PURE__ */ new Set();
       emit("update:modelValue", newTargetKeys);
-      emit("change", newTargetKeys, "left", [...keysToRemove]);
+      emit("change", newTargetKeys, "left", movedKeys);
     }
     function renderPanel(title, items, selectedKeys, toggleFn, searchValue, onSearch) {
       return h("div", { class: transferPanelClasses, role: "group", "aria-label": title }, [

package/dist/chunk-MNVMGJUF.js

@@ -0,0 +1,341 @@
+"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 _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
+
+// src/components/Calendar.ts
+var _vue = require('vue');
+var _tigercatcore = require('@expcat/tigercat-core');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var Calendar = _vue.defineComponent.call(void 0, {
+  name: "TigerCalendar",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Date, default: void 0 },
+    mode: { type: String, default: "month" },
+    fullscreen: { type: Boolean, default: false },
+    disabledDate: { type: Function, default: void 0 },
+    locale: { type: Object, default: void 0 },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "change", "panel-change"],
+  setup(props, { emit, attrs }) {
+    const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
+    const mergedLocale = _vue.computed.call(void 0, () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, props.locale));
+    const localeCode = _vue.computed.call(void 0, () => _optionalChain([mergedLocale, 'access', _ => _.value, 'optionalAccess', _2 => _2.locale]));
+    const labels = _vue.computed.call(void 0, () => _tigercatcore.getCalendarLabels.call(void 0, mergedLocale.value));
+    const weekdayNames = _vue.computed.call(void 0, () => _tigercatcore.getShortDayNames.call(void 0, localeCode.value));
+    const monthNames = _vue.computed.call(void 0, () => _tigercatcore.getShortMonthNames.call(void 0, localeCode.value));
+    const today = /* @__PURE__ */ new Date();
+    const viewYear = _vue.ref.call(void 0, _nullishCoalesce(_optionalChain([props, 'access', _3 => _3.modelValue, 'optionalAccess', _4 => _4.getFullYear, 'call', _5 => _5()]), () => ( today.getFullYear())));
+    const viewMonth = _vue.ref.call(void 0, _nullishCoalesce(_optionalChain([props, 'access', _6 => _6.modelValue, 'optionalAccess', _7 => _7.getMonth, 'call', _8 => _8()]), () => ( today.getMonth())));
+    const days = _vue.computed.call(void 0, () => _tigercatcore.getMonthDays.call(void 0, viewYear.value, viewMonth.value));
+    function prevMonth() {
+      if (viewMonth.value === 0) {
+        viewMonth.value = 11;
+        viewYear.value--;
+      } else {
+        viewMonth.value--;
+      }
+      emit("panel-change", new Date(viewYear.value, viewMonth.value, 1), props.mode);
+    }
+    function nextMonth() {
+      if (viewMonth.value === 11) {
+        viewMonth.value = 0;
+        viewYear.value++;
+      } else {
+        viewMonth.value++;
+      }
+      emit("panel-change", new Date(viewYear.value, viewMonth.value, 1), props.mode);
+    }
+    function prevYear() {
+      viewYear.value--;
+      emit("panel-change", new Date(viewYear.value, viewMonth.value, 1), props.mode);
+    }
+    function nextYear() {
+      viewYear.value++;
+      emit("panel-change", new Date(viewYear.value, viewMonth.value, 1), props.mode);
+    }
+    function selectDay(date) {
+      if (_optionalChain([props, 'access', _9 => _9.disabledDate, 'optionalCall', _10 => _10(date)])) return;
+      emit("update:modelValue", date);
+      emit("change", date);
+    }
+    function selectMonth(monthIdx) {
+      viewMonth.value = monthIdx;
+      emit("panel-change", new Date(viewYear.value, monthIdx, 1), props.mode);
+    }
+    const dayGridEl = _vue.ref.call(void 0, null);
+    const monthGridEl = _vue.ref.call(void 0, null);
+    const activeIso = _vue.ref.call(void 0, null);
+    const activeMonthIdx = _vue.ref.call(void 0, null);
+    const toIso = (d) => _tigercatcore.formatDate.call(void 0, d, "yyyy-MM-dd");
+    function getDefaultDayIso() {
+      const v = props.modelValue;
+      if (v && v.getFullYear() === viewYear.value && v.getMonth() === viewMonth.value)
+        return toIso(v);
+      if (today.getFullYear() === viewYear.value && today.getMonth() === viewMonth.value)
+        return toIso(today);
+      return toIso(new Date(viewYear.value, viewMonth.value, 1));
+    }
+    function navigate(y, m) {
+      viewYear.value = y;
+      viewMonth.value = m;
+      emit("panel-change", new Date(y, m, 1), props.mode);
+    }
+    function focusDayIso(iso) {
+      const el = _optionalChain([dayGridEl, 'access', _11 => _11.value, 'optionalAccess', _12 => _12.querySelector, 'call', _13 => _13(`button[data-date="${iso}"]`)]);
+      if (el && !el.disabled) {
+        el.focus();
+        activeIso.value = iso;
+        return true;
+      }
+      return false;
+    }
+    function moveDayFocus(deltaDays) {
+      const activeEl = document.activeElement;
+      const currentIso = _nullishCoalesce(_nullishCoalesce(_optionalChain([activeEl, 'optionalAccess', _14 => _14.getAttribute, 'call', _15 => _15("data-date")]), () => ( activeIso.value)), () => ( getDefaultDayIso()));
+      const base = _tigercatcore.parseDate.call(void 0, currentIso);
+      if (!base) return;
+      let candidate = _tigercatcore.addDays.call(void 0, base, deltaDays);
+      for (let attempts = 0; attempts < 42; attempts++) {
+        const iso = toIso(candidate);
+        const el = _optionalChain([dayGridEl, 'access', _16 => _16.value, 'optionalAccess', _17 => _17.querySelector, 'call', _18 => _18(`button[data-date="${iso}"]`)]);
+        if (el && !el.disabled) {
+          el.focus();
+          activeIso.value = iso;
+          return;
+        }
+        if (!el) {
+          activeIso.value = iso;
+          navigate(candidate.getFullYear(), candidate.getMonth());
+          _vue.nextTick.call(void 0, () => {
+            _optionalChain([dayGridEl, 'access', _19 => _19.value, 'optionalAccess', _20 => _20.querySelector, 'call', _21 => _21(`button[data-date="${iso}"]`), 'optionalAccess', _22 => _22.focus, 'call', _23 => _23()]);
+          });
+          return;
+        }
+        candidate = _tigercatcore.addDays.call(void 0, candidate, deltaDays);
+      }
+    }
+    function handleDayGridKeyDown(e) {
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          moveDayFocus(-1);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          moveDayFocus(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          moveDayFocus(-7);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          moveDayFocus(7);
+          break;
+        case "Home":
+          e.preventDefault();
+          focusDayIso(toIso(new Date(viewYear.value, viewMonth.value, 1)));
+          break;
+        case "End":
+          e.preventDefault();
+          focusDayIso(toIso(new Date(viewYear.value, viewMonth.value + 1, 0)));
+          break;
+        case "Enter":
+        case " ": {
+          const activeEl = document.activeElement;
+          const iso = _optionalChain([activeEl, 'optionalAccess', _24 => _24.getAttribute, 'call', _25 => _25("data-date")]);
+          if (iso) {
+            e.preventDefault();
+            const d = _tigercatcore.parseDate.call(void 0, iso);
+            if (d) selectDay(d);
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    }
+    function focusMonthIdx(idx) {
+      const els = _optionalChain([monthGridEl, 'access', _26 => _26.value, 'optionalAccess', _27 => _27.querySelectorAll, 'call', _28 => _28('button[role="gridcell"]')]);
+      _optionalChain([els, 'optionalAccess', _29 => _29[idx], 'optionalAccess', _30 => _30.focus, 'call', _31 => _31()]);
+      activeMonthIdx.value = idx;
+    }
+    function handleMonthKeyDown(e, idx) {
+      let target = idx;
+      switch (e.key) {
+        case "ArrowRight":
+          target = Math.min(11, idx + 1);
+          break;
+        case "ArrowLeft":
+          target = Math.max(0, idx - 1);
+          break;
+        case "ArrowDown":
+          target = Math.min(11, idx + 3);
+          break;
+        case "ArrowUp":
+          target = Math.max(0, idx - 3);
+          break;
+        case "Home":
+          target = 0;
+          break;
+        case "End":
+          target = 11;
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          selectMonth(idx);
+          return;
+        default:
+          return;
+      }
+      e.preventDefault();
+      focusMonthIdx(target);
+    }
+    return () => {
+      const containerClass = _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getCalendarContainerClasses.call(void 0, !!props.fullscreen),
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      );
+      const header = _vue.h.call(void 0, "div", { class: _tigercatcore.calendarHeaderClasses }, [
+        _vue.h.call(void 0, 
+          "button",
+          {
+            type: "button",
+            class: _tigercatcore.calendarNavButtonClasses,
+            "aria-label": props.mode === "month" ? labels.value.previousMonth : labels.value.previousYear,
+            onClick: props.mode === "month" ? prevMonth : prevYear
+          },
+          "\u2039"
+        ),
+        _vue.h.call(void 0, 
+          "span",
+          { class: _tigercatcore.calendarTitleClasses },
+          props.mode === "month" ? _tigercatcore.formatMonthYear.call(void 0, viewYear.value, viewMonth.value, localeCode.value) : `${viewYear.value}`
+        ),
+        _vue.h.call(void 0, 
+          "button",
+          {
+            type: "button",
+            class: _tigercatcore.calendarNavButtonClasses,
+            "aria-label": props.mode === "month" ? labels.value.nextMonth : labels.value.nextYear,
+            onClick: props.mode === "month" ? nextMonth : nextYear
+          },
+          "\u203A"
+        )
+      ]);
+      const rovingDayIso = _nullishCoalesce(activeIso.value, () => ( getDefaultDayIso()));
+      const rovingMonthIdx = _nullishCoalesce(activeMonthIdx.value, () => ( viewMonth.value));
+      let body;
+      if (props.mode === "year") {
+        const monthRows = [];
+        for (let i = 0; i < monthNames.value.length; i += 3)
+          monthRows.push(monthNames.value.slice(i, i + 3));
+        body = _vue.h.call(void 0, 
+          "div",
+          { class: "grid grid-cols-1 gap-2", role: "grid", ref: monthGridEl },
+          monthRows.map(
+            (row, ri) => _vue.h.call(void 0, 
+              "div",
+              { key: ri, class: "grid grid-cols-3 gap-2", role: "row" },
+              row.map((m, ci) => {
+                const i = ri * 3 + ci;
+                return _vue.h.call(void 0, 
+                  "button",
+                  {
+                    key: i,
+                    type: "button",
+                    role: "gridcell",
+                    "aria-selected": viewMonth.value === i,
+                    tabindex: rovingMonthIdx === i ? 0 : -1,
+                    class: _tigercatcore.getCalendarMonthClasses.call(void 0, viewMonth.value === i),
+                    onClick: () => selectMonth(i),
+                    onFocus: () => activeMonthIdx.value = i,
+                    onKeydown: (e) => handleMonthKeyDown(e, i)
+                  },
+                  m
+                );
+              })
+            )
+          )
+        );
+      } else {
+        const weekdayRow = _vue.h.call(void 0, 
+          "div",
+          { class: "grid grid-cols-7", role: "row" },
+          weekdayNames.value.map(
+            (wd) => _vue.h.call(void 0, "div", { key: wd, class: _tigercatcore.calendarWeekdayClasses, role: "columnheader" }, wd)
+          )
+        );
+        const weeks = [];
+        for (let i = 0; i < days.value.length; i += 7) weeks.push(days.value.slice(i, i + 7));
+        const weekRows = weeks.map(
+          (week, wi) => _vue.h.call(void 0, 
+            "div",
+            { key: wi, class: "grid grid-cols-7", role: "row", onKeydown: handleDayGridKeyDown },
+            week.map((date) => {
+              const isCurrentMonth = date.getMonth() === viewMonth.value;
+              const isSelected = props.modelValue ? _tigercatcore.isSameDay.call(void 0, date, props.modelValue) : false;
+              const isTodayDate = _tigercatcore.isSameDay.call(void 0, date, today);
+              const isDisabled = !!_optionalChain([props, 'access', _32 => _32.disabledDate, 'optionalCall', _33 => _33(date)]);
+              const iso = toIso(date);
+              return _vue.h.call(void 0, 
+                "button",
+                {
+                  key: iso,
+                  type: "button",
+                  role: "gridcell",
+                  "data-date": iso,
+                  "aria-label": iso,
+                  "aria-selected": isSelected,
+                  "aria-current": isTodayDate ? "date" : void 0,
+                  disabled: isDisabled,
+                  tabindex: rovingDayIso === iso && !isDisabled ? 0 : -1,
+                  class: _tigercatcore.classNames.call(void 0, 
+                    _tigercatcore.getCalendarDayClasses.call(void 0, isSelected, isTodayDate, isCurrentMonth, isDisabled),
+                    "justify-self-center my-0.5"
+                  ),
+                  onClick: () => selectDay(date),
+                  onFocus: () => activeIso.value = iso
+                },
+                date.getDate()
+              );
+            })
+          )
+        );
+        body = _vue.h.call(void 0, "div", { role: "grid", "aria-rowcount": 7, "aria-colcount": 7, ref: dayGridEl }, [
+          weekdayRow,
+          ...weekRows
+        ]);
+      }
+      return _vue.h.call(void 0, "div", { ...attrs, class: containerClass, role: "group" }, [header, body]);
+    };
+  }
+});
+var Calendar_default = Calendar;
+
+
+
+
+exports.Calendar = Calendar; exports.Calendar_default = Calendar_default;

package/dist/{chunk-LYF6AAQ7.js → chunk-MPVL53GP.js}

@@ -26,6 +26,11 @@ var _vue = require('vue');
 
 
 
+
+
+
+
+
 
 
 
@@ -77,6 +82,14 @@ var TaskBoard = _vue.defineComponent.call(void 0, {
     showCardCount: { type: Boolean, default: false },
     allowAddCard: { type: Boolean, default: false },
     allowAddColumn: { type: Boolean, default: false },
+    swimlanes: {
+      type: Array,
+      default: void 0
+    },
+    swimlaneField: {
+      type: String,
+      default: void 0
+    },
     locale: {
       type: Object,
       default: void 0
@@ -296,14 +309,55 @@ var TaskBoard = _vue.defineComponent.call(void 0, {
         },
         headerContent
       );
-      const cards = column.cards.length > 0 ? column.cards.flatMap((card, i) => {
+      const renderCardNode = (card, originalIndex) => {
         const nodes = [];
-        if (isDropTarget && dragSnap.value.dropIndex === i) {
-          nodes.push(_vue.h.call(void 0, "div", { key: `drop-${i}`, class: _tigercatcore.taskBoardDropIndicatorClasses }));
+        if (isDropTarget && dragSnap.value.dropIndex === originalIndex) {
+          nodes.push(
+            _vue.h.call(void 0, "div", { key: `drop-${originalIndex}`, class: _tigercatcore.taskBoardDropIndicatorClasses })
+          );
         }
         nodes.push(renderCard(card, column));
         return nodes;
-      }).concat(
+      };
+      const cards = column.cards.length > 0 ? (props.swimlanes && props.swimlaneField ? _tigercatcore.groupBySwimlane.call(void 0, column.cards, props.swimlanes, props.swimlaneField).map(
+        (group) => _vue.h.call(void 0, 
+          "div",
+          {
+            key: String(group.swimlane.id),
+            class: _tigercatcore.kanbanSwimlaneClasses,
+            "data-tiger-kanban-swimlane": "",
+            "data-tiger-kanban-swimlane-id": String(group.swimlane.id)
+          },
+          [
+            _vue.h.call(void 0, "div", { class: _tigercatcore.kanbanSwimlaneHeaderClasses }, [
+              group.swimlane.color ? _vue.h.call(void 0, "span", {
+                class: _tigercatcore.kanbanSwimlaneDotClasses,
+                style: { backgroundColor: group.swimlane.color }
+              }) : null,
+              _vue.h.call(void 0, "span", null, group.swimlane.label),
+              _vue.h.call(void 0, 
+                "span",
+                {
+                  class: "ml-auto text-xs text-[var(--tiger-text-muted,#6b7280)]"
+                },
+                String(group.cards.length)
+              )
+            ]),
+            _vue.h.call(void 0, 
+              "div",
+              {
+                class: group.swimlane.collapsed ? _tigercatcore.kanbanSwimlaneCollapsedClasses : ""
+              },
+              group.cards.flatMap(
+                (card) => renderCardNode(
+                  card,
+                  column.cards.findIndex((item) => item.id === card.id)
+                )
+              )
+            )
+          ]
+        )
+      ) : column.cards.flatMap((card, i) => renderCardNode(card, i))).concat(
         isDropTarget && dragSnap.value.dropIndex >= column.cards.length ? [_vue.h.call(void 0, "div", { key: "drop-end", class: _tigercatcore.taskBoardDropIndicatorClasses })] : []
       ) : [
         isDropTarget ? _vue.h.call(void 0, "div", { key: "drop-empty", class: _tigercatcore.taskBoardDropIndicatorClasses }) : slots["empty-column"] ? slots["empty-column"]({ column }) : _vue.h.call(void 0, 
@@ -390,7 +444,7 @@ var TaskBoard = _vue.defineComponent.call(void 0, {
                 }
               }
             },
-            "+ " + _tigercatcore.resolveLocaleText.call(void 0, labels.value.addCardText)
+            "+ " + _tigercatcore.resolveLocaleText.call(void 0, labels.value.addColumnText)
           )
         );
       }

package/dist/{chunk-BHNBLQ5S.mjs → chunk-N2QGYEOQ.mjs}

@@ -26,7 +26,7 @@ import {
   createPinchState,
   startPinch,
   movePinch,
-  resolveLocaleText,
+  getImageViewerLabels,
   mergeTigerLocale
 } from "@expcat/tigercat-core";
 function createSvgIcon(pathD, label) {
@@ -102,9 +102,7 @@ var ImageViewer = defineComponent({
   setup(props, { emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const closeText = computed(
-      () => resolveLocaleText("Close", mergedLocale.value?.common?.closeText)
-    );
+    const labels = computed(() => getImageViewerLabels(mergedLocale.value));
     const index = ref(props.currentIndex);
     const transform = ref(createDefaultTransform());
     let panState = createPanState();
@@ -256,10 +254,10 @@ var ImageViewer = defineComponent({
           {
             class: imageViewerCloseBtnClasses,
             onClick: handleClose,
-            "aria-label": closeText.value,
+            "aria-label": labels.value.closeAriaLabel,
             type: "button"
           },
-          createSvgIcon(imageViewerIcons.close, closeText.value)
+          createSvgIcon(imageViewerIcons.close, labels.value.closeAriaLabel)
         )
       );
       if (props.showNav && props.images.length > 1) {
@@ -269,20 +267,20 @@ var ImageViewer = defineComponent({
             {
               class: classNames(imageViewerNavBtnClasses, "left-4"),
               onClick: handlePrev,
-              "aria-label": "Previous image",
+              "aria-label": labels.value.previousImageAriaLabel,
               type: "button"
             },
-            createSvgIcon(imageViewerIcons.prev, "Previous")
+            createSvgIcon(imageViewerIcons.prev, labels.value.previousImageAriaLabel)
           ),
           h(
             "button",
             {
               class: classNames(imageViewerNavBtnClasses, "right-4"),
               onClick: handleNext,
-              "aria-label": "Next image",
+              "aria-label": labels.value.nextImageAriaLabel,
               type: "button"
             },
-            createSvgIcon(imageViewerIcons.next, "Next")
+            createSvgIcon(imageViewerIcons.next, labels.value.nextImageAriaLabel)
           )
         );
       }
@@ -314,20 +312,20 @@ var ImageViewer = defineComponent({
             {
               class: imageViewerToolbarBtnClasses,
               onClick: handleZoomOut,
-              "aria-label": "Zoom out",
+              "aria-label": labels.value.zoomOutAriaLabel,
               type: "button"
             },
-            createSvgIcon(imageViewerIcons.zoomOut, "Zoom out")
+            createSvgIcon(imageViewerIcons.zoomOut, labels.value.zoomOutAriaLabel)
           ),
           h(
             "button",
             {
               class: imageViewerToolbarBtnClasses,
               onClick: handleZoomIn,
-              "aria-label": "Zoom in",
+              "aria-label": labels.value.zoomInAriaLabel,
               type: "button"
             },
-            createSvgIcon(imageViewerIcons.zoomIn, "Zoom in")
+            createSvgIcon(imageViewerIcons.zoomIn, labels.value.zoomInAriaLabel)
           )
         );
       }
@@ -338,20 +336,20 @@ var ImageViewer = defineComponent({
             {
               class: imageViewerToolbarBtnClasses,
               onClick: handleRotateLeft,
-              "aria-label": "Rotate left",
+              "aria-label": labels.value.rotateLeftAriaLabel,
               type: "button"
             },
-            createSvgIcon(imageViewerIcons.rotateLeft, "Rotate left")
+            createSvgIcon(imageViewerIcons.rotateLeft, labels.value.rotateLeftAriaLabel)
           ),
           h(
             "button",
             {
               class: imageViewerToolbarBtnClasses,
               onClick: handleRotateRight,
-              "aria-label": "Rotate right",
+              "aria-label": labels.value.rotateRightAriaLabel,
               type: "button"
             },
-            createSvgIcon(imageViewerIcons.rotateRight, "Rotate right")
+            createSvgIcon(imageViewerIcons.rotateRight, labels.value.rotateRightAriaLabel)
           )
         );
       }
@@ -369,7 +367,7 @@ var ImageViewer = defineComponent({
           ),
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": "Image viewer",
+          "aria-label": labels.value.dialogAriaLabel,
           onClick: (e) => {
             if (props.maskClosable && e.target === e.currentTarget) {
               handleClose();