@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-V443QIJM.mjs → chunk-V4H2Z5ZO.mjs}

@@ -1,16 +1,28 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
 // src/components/ChartLegend.ts
 import { defineComponent, h, computed } from "vue";
-import { classNames } from "@expcat/tigercat-core";
+import {
+  classNames,
+  coerceClassValue,
+  chartLegendListClasses,
+  getChartLabels,
+  getChartLegendItemClasses,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
 var ChartLegend = defineComponent({
   name: "TigerChartLegend",
+  inheritAttrs: false,
   props: {
     items: {
       type: Array,
       required: true
     },
-    position: {
+    orientation: {
       type: String,
-      default: "bottom"
+      default: "horizontal"
     },
     markerSize: {
       type: Number,
@@ -25,19 +37,22 @@ var ChartLegend = defineComponent({
       default: false
     },
     ariaLabel: {
-      type: String,
-      default: "Chart legend"
+      type: String
     },
     className: {
       type: String
     }
   },
   emits: ["item-click", "item-hover", "item-leave"],
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getChartLabels(mergeTigerLocale(config.value.locale)));
+    const resolvedAriaLabel = computed(() => props.ariaLabel ?? labels.value.legendAriaLabel);
     const containerClasses = computed(
       () => classNames(
-        "flex flex-wrap",
-        props.position === "right" || props.position === "left" ? "flex-col" : "flex-row",
+        chartLegendListClasses,
+        props.orientation === "vertical" ? "flex-col" : "flex-row",
+        coerceClassValue(attrs.class),
         props.className
       )
     );
@@ -48,12 +63,17 @@ var ChartLegend = defineComponent({
       if (!props.interactive) return;
       emit("item-click", item.index, item);
     };
-    const handleHover = (item) => {
+    const handleHover = (item, event) => {
       if (!props.interactive) return;
-      emit("item-hover", item.index, item);
+      emit("item-hover", item.index, item, event);
     };
-    const handleLeave = () => {
+    const handleLeave = (event) => {
       if (!props.interactive) return;
+      const current = event?.currentTarget;
+      const related = event && "relatedTarget" in event ? event.relatedTarget : null;
+      if (current instanceof Node && related instanceof Node && current.contains(related)) {
+        return;
+      }
       emit("item-leave");
     };
     return () => h(
@@ -61,32 +81,32 @@ var ChartLegend = defineComponent({
       {
         class: containerClasses.value,
         style: containerStyle.value,
-        // A group of toggle buttons is not a "list"; only use list semantics
-        // for the static (non-interactive) legend.
         role: props.interactive ? "group" : "list",
-        "aria-label": props.ariaLabel,
-        "data-chart-legend": "true"
+        "aria-label": resolvedAriaLabel.value,
+        "data-chart-legend": "true",
+        onMouseleave: props.interactive ? (event) => handleLeave(event) : void 0,
+        onFocusout: props.interactive ? (event) => handleLeave(event) : void 0
       },
-      props.items.map(
-        (item) => h(
+      props.items.map((item) => {
+        const highlighted = Boolean(
+          item.active && props.items.some((entry) => entry.active === false)
+        );
+        return h(
           props.interactive ? "button" : "div",
           {
             key: `legend-${item.index}`,
             type: props.interactive ? "button" : void 0,
-            class: classNames(
-              "flex items-center gap-2 text-sm rounded-[var(--tiger-chart-legend-row-radius,0)]",
-              "text-[color:var(--tiger-text-secondary,#6b7280)]",
-              props.interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] hover:bg-[var(--tiger-chart-legend-row-hover-bg,transparent)] transition-colors" : "cursor-default",
-              item.active === false ? "opacity-50" : void 0
-            ),
-            // Interactive items are real buttons; `role="listitem"` would
-            // override the button role, so it is only set for the static legend.
+            class: getChartLegendItemClasses({
+              interactive: props.interactive,
+              dimmed: item.active === false
+            }),
             role: props.interactive ? void 0 : "listitem",
-            "aria-pressed": props.interactive ? item.active !== false : void 0,
+            "aria-pressed": props.interactive ? Boolean(item.selected) : void 0,
+            "aria-current": props.interactive && highlighted ? "true" : void 0,
             "data-legend-item": "true",
             onClick: props.interactive ? () => handleClick(item) : void 0,
-            onMouseenter: props.interactive ? () => handleHover(item) : void 0,
-            onMouseleave: props.interactive ? handleLeave : void 0
+            onMouseenter: props.interactive ? (event) => handleHover(item, event) : void 0,
+            onFocus: props.interactive ? (event) => handleHover(item, event) : void 0
           },
           [
             h("span", {
@@ -102,8 +122,8 @@ var ChartLegend = defineComponent({
             }),
             h("span", null, item.label)
           ]
-        )
-      )
+        );
+      })
     );
   }
 });

package/dist/chunk-V5AH52TD.mjs

@@ -0,0 +1,374 @@
+import {
+  useDrag
+} from "./chunk-DXL3YHRP.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/FileManager.ts
+import { defineComponent, h, ref, computed, nextTick, watch } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  getFileManagerContainerClasses,
+  getFileItemClasses,
+  getFileManagerContentClasses,
+  getFileManagerGridStyle,
+  deriveFileManagerModel,
+  toggleFileSelection,
+  resolveFileOpen,
+  buildFileBreadcrumb,
+  applyFileManagerReorder,
+  clampFileManagerFocusIndex,
+  resolveFileManagerItemKeydown,
+  resolveFileItemExtension,
+  resolveFileItemIcon,
+  toFileDragItem,
+  formatFileSizeLabel,
+  getFileManagerLabels,
+  DEFAULT_FILE_COLUMNS,
+  DEFAULT_FILE_GRID_COLUMNS,
+  EMPTY_FILE_ITEMS,
+  EMPTY_FILE_PATH,
+  fileManagerToolbarClasses,
+  fileManagerBreadcrumbClasses,
+  fileManagerBreadcrumbListClasses,
+  fileManagerBreadcrumbItemClasses,
+  fileManagerBreadcrumbCurrentClasses,
+  fileManagerBreadcrumbSeparatorClasses,
+  fileManagerItemIconClasses,
+  fileManagerItemNameClasses,
+  fileManagerItemMetaClasses,
+  fileManagerEmptyClasses,
+  fileManagerLoadingClasses,
+  fileManagerSearchClasses,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+var FileManager = defineComponent({
+  name: "TigerFileManager",
+  inheritAttrs: false,
+  props: {
+    files: { type: Array, default: void 0 },
+    viewMode: {
+      type: String,
+      default: "list"
+    },
+    gridColumns: { type: Number, default: DEFAULT_FILE_GRID_COLUMNS },
+    selectedKeys: {
+      type: Array
+    },
+    defaultSelectedKeys: {
+      type: Array,
+      default: () => []
+    },
+    multiple: { type: Boolean, default: false },
+    columns: {
+      type: Array,
+      default: void 0
+    },
+    sortField: {
+      type: String,
+      default: "name"
+    },
+    sortOrder: {
+      type: String,
+      default: "asc"
+    },
+    currentPath: {
+      type: Array,
+      default: void 0
+    },
+    defaultCurrentPath: {
+      type: Array,
+      default: void 0
+    },
+    showHidden: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    emptyText: { type: String, default: void 0 },
+    searchable: { type: Boolean, default: false },
+    searchText: { type: String, default: void 0 },
+    defaultSearchText: { type: String, default: void 0 },
+    className: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 }
+  },
+  emits: [
+    "select",
+    "open",
+    "navigate",
+    "update:currentPath",
+    "update:searchText",
+    "update:selectedKeys",
+    "update:files",
+    "reorder"
+  ],
+  setup(props, { emit, attrs, slots }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getFileManagerLabels(mergedLocale.value));
+    const isRtl = computed(() => mergedLocale.value?.direction === "rtl");
+    const focusedIndex = ref(0);
+    const contentRef = ref(null);
+    const innerSelectedKeys = ref([...props.defaultSelectedKeys ?? []]);
+    const innerPath = ref([...props.defaultCurrentPath ?? EMPTY_FILE_PATH]);
+    const innerSearch = ref(props.defaultSearchText ?? "");
+    const isKeysControlled = computed(() => props.selectedKeys !== void 0);
+    const isPathControlled = computed(() => props.currentPath !== void 0);
+    const isSearchControlled = computed(() => props.searchText !== void 0);
+    const resolvedKeys = computed(
+      () => isKeysControlled.value ? props.selectedKeys ?? [] : innerSelectedKeys.value
+    );
+    const resolvedPath = computed(
+      () => isPathControlled.value ? props.currentPath ?? EMPTY_FILE_PATH : innerPath.value
+    );
+    const resolvedSearch = computed(
+      () => isSearchControlled.value ? props.searchText ?? "" : innerSearch.value
+    );
+    const tree = computed(() => props.files ?? EMPTY_FILE_ITEMS);
+    const drag = useDrag({
+      containerId: "files",
+      onDrop: (event) => {
+        if (!model.value.canReorder) return;
+        const result = applyFileManagerReorder(
+          tree.value,
+          resolvedPath.value,
+          event.fromIndex,
+          event.toIndex,
+          model.value.currentItems
+        );
+        if (!result) return;
+        emit("reorder", result.layer, event.fromIndex, event.toIndex);
+        emit("update:files", result.files);
+      }
+    });
+    function handleDragStart(event, item, index) {
+      if (!model.value.canReorder || item.disabled) return;
+      drag.startDrag(toFileDragItem(item, index, "files"), event);
+    }
+    function handleDragOver(event, item, index) {
+      if (!model.value.canReorder || item.disabled) return;
+      drag.dragOver(toFileDragItem(item, index, "files"), event);
+    }
+    const model = computed(
+      () => deriveFileManagerModel({
+        files: tree.value,
+        currentPath: resolvedPath.value,
+        selectedKeys: resolvedKeys.value,
+        sortField: props.sortField,
+        sortOrder: props.sortOrder,
+        showHidden: props.showHidden,
+        searchText: resolvedSearch.value,
+        draggable: props.draggable
+      })
+    );
+    const viewKey = computed(
+      () => `${resolvedPath.value.join("/")}\0${resolvedSearch.value}\0${model.value.processedItems.length}`
+    );
+    watch(viewKey, () => {
+      focusedIndex.value = 0;
+    });
+    const containerClasses = computed(
+      () => classNames(getFileManagerContainerClasses(props.className), coerceClassValue(attrs.class))
+    );
+    const containerStyle = computed(() => mergeStyleValues(attrs.style));
+    function commitPath(next) {
+      if (!isPathControlled.value) innerPath.value = next;
+      emit("update:currentPath", next);
+      emit("navigate", next);
+    }
+    function handleSelect(item) {
+      if (props.loading || item.disabled) return;
+      emit("select", item);
+      const keys = toggleFileSelection(resolvedKeys.value, item.key, props.multiple);
+      if (!isKeysControlled.value) innerSelectedKeys.value = keys;
+      emit("update:selectedKeys", keys);
+    }
+    function handleOpen(item) {
+      if (props.loading) return;
+      const result = resolveFileOpen(item, resolvedPath.value);
+      if (!result) return;
+      if (result.type === "navigate") {
+        commitPath(result.path);
+      } else {
+        emit("open", result.item);
+      }
+    }
+    function focusItemAt(index) {
+      nextTick(() => {
+        contentRef.value?.querySelector(`[data-option-index="${index}"]`)?.focus();
+      });
+    }
+    function handleItemKeydown(event, item, index) {
+      if (props.loading) return;
+      const action = resolveFileManagerItemKeydown({
+        key: event.key,
+        altKey: event.altKey,
+        viewMode: props.viewMode,
+        gridColumns: props.gridColumns,
+        isRtl: isRtl.value,
+        currentIndex: index,
+        items: model.value.processedItems,
+        currentPath: resolvedPath.value
+      });
+      if (!action) return;
+      event.preventDefault();
+      if (action.type === "move" || action.type === "home" || action.type === "end") {
+        focusedIndex.value = action.index;
+        focusItemAt(action.index);
+        return;
+      }
+      if (action.type === "select") {
+        handleSelect(item);
+        return;
+      }
+      if (action.type === "open") {
+        handleSelect(item);
+        handleOpen(item);
+        return;
+      }
+      commitPath(action.path);
+    }
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const breadcrumbs = buildFileBreadcrumb(tree.value, resolvedPath.value, labels.value.rootText);
+      const focusedItem = clampFileManagerFocusIndex(focusedIndex.value, model.value.processedItems);
+      const breadcrumb = h(
+        "nav",
+        { class: fileManagerBreadcrumbClasses, "aria-label": labels.value.pathAriaLabel },
+        h(
+          "ol",
+          { class: fileManagerBreadcrumbListClasses },
+          breadcrumbs.map(
+            (segment, index) => h("li", { key: segment.key || "root", class: "flex items-center gap-1" }, [
+              index > 0 ? h(
+                "span",
+                { class: fileManagerBreadcrumbSeparatorClasses, "aria-hidden": "true" },
+                "/"
+              ) : null,
+              segment.current ? h(
+                "span",
+                { class: fileManagerBreadcrumbCurrentClasses, "aria-current": "page" },
+                segment.name
+              ) : h(
+                "button",
+                {
+                  type: "button",
+                  class: fileManagerBreadcrumbItemClasses,
+                  onClick: () => commitPath(segment.path)
+                },
+                segment.name
+              )
+            ])
+          )
+        )
+      );
+      const searchInput = props.searchable ? h("input", {
+        type: "text",
+        class: fileManagerSearchClasses,
+        placeholder: mergedLocale.value?.common?.searchPlaceholder,
+        "aria-label": labels.value.searchAriaLabel,
+        value: resolvedSearch.value,
+        onInput: (event) => {
+          const value = event.target.value;
+          if (!isSearchControlled.value) innerSearch.value = value;
+          emit("update:searchText", value);
+        }
+      }) : null;
+      const toolbar = h("div", { class: fileManagerToolbarClasses }, [
+        breadcrumb,
+        h("div", { class: "flex-1" }),
+        searchInput
+      ]);
+      const fileIcon = (item) => slots.icon ? slots.icon({ item }) : h(
+        "span",
+        { class: fileManagerItemIconClasses, "aria-hidden": "true" },
+        resolveFileItemIcon(item)
+      );
+      const renderItem = (item, index) => {
+        const isSelected = model.value.selectedSet.has(item.key);
+        const itemClass = getFileItemClasses(props.viewMode, isSelected, Boolean(item.disabled));
+        const canDrag = model.value.canReorder && !item.disabled;
+        const metaColumns = props.columns ?? DEFAULT_FILE_COLUMNS;
+        const nameEl = h("span", { class: fileManagerItemNameClasses }, item.name);
+        const metaEls = props.viewMode === "list" ? [
+          metaColumns.includes("type") ? h(
+            "span",
+            { class: fileManagerItemMetaClasses },
+            resolveFileItemExtension(item) || 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
+        ] : [];
+        return h(
+          "div",
+          {
+            key: item.key,
+            class: itemClass,
+            role: "option",
+            "aria-selected": isSelected,
+            "aria-disabled": item.disabled || void 0,
+            tabindex: !props.loading && !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: canDrag,
+            "data-drag-id": item.key,
+            "data-drag-index": index,
+            "data-drag-container": "files",
+            onDragstart: canDrag ? (event) => handleDragStart(event, item, index) : void 0,
+            onDragover: canDrag ? (event) => handleDragOver(event, item, index) : void 0,
+            onDrop: canDrag ? (event) => drag.drop(event) : void 0,
+            onDragend: canDrag ? () => drag.endDrag() : void 0
+          },
+          [fileIcon(item), nameEl, ...metaEls]
+        );
+      };
+      const content = model.value.processedItems.length > 0 ? h(
+        "div",
+        {
+          ref: contentRef,
+          class: getFileManagerContentClasses(props.viewMode),
+          style: getFileManagerGridStyle(props.viewMode, props.gridColumns),
+          role: "listbox",
+          "aria-label": labels.value.listboxAriaLabel,
+          "aria-multiselectable": props.multiple || void 0,
+          "aria-disabled": props.loading || void 0
+        },
+        model.value.processedItems.map(renderItem)
+      ) : h(
+        "div",
+        { class: fileManagerEmptyClasses },
+        props.emptyText ?? mergedLocale.value?.fileManager?.emptyText ?? mergedLocale.value?.common?.emptyText ?? labels.value.emptyText
+      );
+      const loadingEl = props.loading ? h(
+        "div",
+        { class: fileManagerLoadingClasses, role: "status" },
+        mergedLocale.value?.common?.loadingText
+      ) : null;
+      return h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: containerClasses.value,
+          style: containerStyle.value,
+          "aria-busy": props.loading || void 0
+        },
+        [toolbar, content, loadingEl]
+      );
+    };
+  }
+});
+var FileManager_default = FileManager;
+
+export {
+  FileManager,
+  FileManager_default
+};