@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-NXGCLBVG.js

@@ -0,0 +1,268 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/ImageViewer.ts
+function createSvgIcon(pathD, label) {
+  return vue.h(
+    "svg",
+    {
+      class: "w-5 h-5",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "aria-label": label
+    },
+    [vue.h("path", { d: pathD })]
+  );
+}
+var ImageViewer = vue.defineComponent({
+  name: "TigerImageViewer",
+  inheritAttrs: false,
+  props: {
+    images: {
+      type: Array,
+      required: true
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    currentIndex: {
+      type: Number,
+      default: 0
+    },
+    zoomable: {
+      type: Boolean,
+      default: true
+    },
+    rotatable: {
+      type: Boolean,
+      default: true
+    },
+    showNav: {
+      type: Boolean,
+      default: true
+    },
+    showCounter: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    minZoom: {
+      type: Number,
+      default: 0.5
+    },
+    maxZoom: {
+      type: Number,
+      default: 3
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:open", "update:currentIndex", "close"],
+  setup(props, { emit, attrs }) {
+    const index = vue.ref(props.currentIndex);
+    const zoom = vue.ref(1);
+    const rotation = vue.ref(0);
+    vue.watch(
+      () => props.currentIndex,
+      (val) => {
+        index.value = val;
+      }
+    );
+    const handleClose = () => {
+      emit("update:open", false);
+      emit("close");
+    };
+    const handlePrev = () => {
+      index.value = (index.value - 1 + props.images.length) % props.images.length;
+      zoom.value = 1;
+      rotation.value = 0;
+      emit("update:currentIndex", index.value);
+    };
+    const handleNext = () => {
+      index.value = (index.value + 1) % props.images.length;
+      zoom.value = 1;
+      rotation.value = 0;
+      emit("update:currentIndex", index.value);
+    };
+    const handleZoomIn = () => {
+      zoom.value = tigercatCore.clampZoom(zoom.value + 0.25, props.minZoom, props.maxZoom);
+    };
+    const handleZoomOut = () => {
+      zoom.value = tigercatCore.clampZoom(zoom.value - 0.25, props.minZoom, props.maxZoom);
+    };
+    const handleRotateLeft = () => {
+      rotation.value = tigercatCore.normalizeRotation(rotation.value - 90);
+    };
+    const handleRotateRight = () => {
+      rotation.value = tigercatCore.normalizeRotation(rotation.value + 90);
+    };
+    const handleKeydown = (e) => {
+      if (!props.open) return;
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    vue.onMounted(() => {
+      document.addEventListener("keydown", handleKeydown);
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("keydown", handleKeydown);
+    });
+    return () => {
+      if (!props.open || props.images.length === 0) return null;
+      const children = [];
+      if (props.showCounter && props.images.length > 1) {
+        children.push(
+          vue.h(
+            "div",
+            { class: tigercatCore.imageViewerCounterClasses },
+            `${index.value + 1} / ${props.images.length}`
+          )
+        );
+      }
+      children.push(
+        vue.h(
+          "button",
+          {
+            class: tigercatCore.imageViewerCloseBtnClasses,
+            onClick: handleClose,
+            "aria-label": "Close",
+            type: "button"
+          },
+          createSvgIcon(tigercatCore.imageViewerIcons.close, "Close")
+        )
+      );
+      if (props.showNav && props.images.length > 1) {
+        children.push(
+          vue.h(
+            "button",
+            {
+              class: tigercatCore.classNames(tigercatCore.imageViewerNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              "aria-label": "Previous image",
+              type: "button"
+            },
+            createSvgIcon(tigercatCore.imageViewerIcons.prev, "Previous")
+          ),
+          vue.h(
+            "button",
+            {
+              class: tigercatCore.classNames(tigercatCore.imageViewerNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              "aria-label": "Next image",
+              type: "button"
+            },
+            createSvgIcon(tigercatCore.imageViewerIcons.next, "Next")
+          )
+        );
+      }
+      children.push(
+        vue.h("img", {
+          class: tigercatCore.imageViewerImgClasses,
+          src: props.images[index.value],
+          alt: `Image ${index.value + 1}`,
+          style: {
+            transform: `scale(${zoom.value}) rotate(${rotation.value}deg)`
+          },
+          draggable: false
+        })
+      );
+      const toolbarButtons = [];
+      if (props.zoomable) {
+        toolbarButtons.push(
+          vue.h(
+            "button",
+            {
+              class: tigercatCore.imageViewerToolbarBtnClasses,
+              onClick: handleZoomOut,
+              "aria-label": "Zoom out",
+              type: "button"
+            },
+            createSvgIcon(tigercatCore.imageViewerIcons.zoomOut, "Zoom out")
+          ),
+          vue.h(
+            "button",
+            {
+              class: tigercatCore.imageViewerToolbarBtnClasses,
+              onClick: handleZoomIn,
+              "aria-label": "Zoom in",
+              type: "button"
+            },
+            createSvgIcon(tigercatCore.imageViewerIcons.zoomIn, "Zoom in")
+          )
+        );
+      }
+      if (props.rotatable) {
+        toolbarButtons.push(
+          vue.h(
+            "button",
+            {
+              class: tigercatCore.imageViewerToolbarBtnClasses,
+              onClick: handleRotateLeft,
+              "aria-label": "Rotate left",
+              type: "button"
+            },
+            createSvgIcon(tigercatCore.imageViewerIcons.rotateLeft, "Rotate left")
+          ),
+          vue.h(
+            "button",
+            {
+              class: tigercatCore.imageViewerToolbarBtnClasses,
+              onClick: handleRotateRight,
+              "aria-label": "Rotate right",
+              type: "button"
+            },
+            createSvgIcon(tigercatCore.imageViewerIcons.rotateRight, "Rotate right")
+          )
+        );
+      }
+      if (toolbarButtons.length > 0) {
+        children.push(vue.h("div", { class: tigercatCore.imageViewerToolbarClasses }, toolbarButtons));
+      }
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          class: tigercatCore.classNames(
+            tigercatCore.imageViewerBackdropClasses,
+            props.className,
+            tigercatCore.coerceClassValue(attrs.class)
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Image viewer",
+          onClick: (e) => {
+            if (props.maskClosable && e.target === e.currentTarget) {
+              handleClose();
+            }
+          }
+        },
+        children
+      );
+    };
+  }
+});
+var ImageViewer_default = ImageViewer;
+
+exports.ImageViewer = ImageViewer;
+exports.ImageViewer_default = ImageViewer_default;

package/dist/chunk-OMYSFPX6.mjs

@@ -0,0 +1,173 @@
+import { defineComponent, ref, computed, h } from 'vue';
+import { navigateToFolder, filterHiddenFiles, filterFileItems, sortFileItems, classNames, getFileManagerContainerClasses, coerceClassValue, fileManagerBreadcrumbItemClasses, fileManagerBreadcrumbSeparatorClasses, fileManagerBreadcrumbClasses, fileManagerSearchClasses, fileManagerToolbarClasses, fileManagerContentClasses, fileManagerEmptyClasses, fileManagerLoadingClasses, getFileItemClasses, fileManagerItemNameClasses, fileManagerItemMetaClasses, formatFileSizeLabel, fileManagerItemIconClasses } from '@expcat/tigercat-core';
+
+// src/components/FileManager.ts
+var FileManager = defineComponent({
+  name: "TigerFileManager",
+  inheritAttrs: false,
+  props: {
+    files: { type: Array, default: () => [] },
+    viewMode: {
+      type: String,
+      default: "list"
+    },
+    selectedKeys: {
+      type: Array,
+      default: () => []
+    },
+    multiple: { type: Boolean, default: false },
+    sortField: {
+      type: String,
+      default: "name"
+    },
+    sortOrder: {
+      type: String,
+      default: "asc"
+    },
+    currentPath: {
+      type: Array,
+      default: () => []
+    },
+    showHidden: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    emptyText: { type: String, default: "Empty folder" },
+    searchable: { type: Boolean, default: false },
+    searchText: { type: String, default: "" },
+    className: { type: String, default: void 0 }
+  },
+  emits: [
+    "select",
+    "open",
+    "navigate",
+    "update:currentPath",
+    "update:searchText",
+    "update:selectedKeys"
+  ],
+  setup(props, { emit, attrs }) {
+    const localSearch = ref(props.searchText);
+    const currentItems = computed(() => navigateToFolder(props.files, props.currentPath));
+    const processedItems = computed(() => {
+      let items = filterHiddenFiles(currentItems.value, props.showHidden);
+      if (localSearch.value || props.searchText) {
+        items = filterFileItems(items, localSearch.value || props.searchText);
+      }
+      return sortFileItems(items, props.sortField, props.sortOrder);
+    });
+    const selectedSet = computed(() => new Set(props.selectedKeys));
+    const containerClasses = computed(
+      () => classNames(getFileManagerContainerClasses(props.className), coerceClassValue(attrs.class))
+    );
+    function handleSelect(item) {
+      if (item.disabled) return;
+      emit("select", item);
+      const keys = [...props.selectedKeys];
+      const idx = keys.indexOf(item.key);
+      if (idx >= 0) {
+        keys.splice(idx, 1);
+      } else {
+        if (!props.multiple) keys.length = 0;
+        keys.push(item.key);
+      }
+      emit("update:selectedKeys", keys);
+    }
+    function handleOpen(item) {
+      if (item.disabled) return;
+      if (item.type === "folder") {
+        const newPath = [...props.currentPath, item.name];
+        emit("update:currentPath", newPath);
+        emit("navigate", newPath);
+      } else {
+        emit("open", item);
+      }
+    }
+    function navigateToBreadcrumb(index) {
+      const newPath = props.currentPath.slice(0, index);
+      emit("update:currentPath", newPath);
+      emit("navigate", newPath);
+    }
+    return () => {
+      const breadcrumbItems = [
+        h(
+          "span",
+          {
+            class: fileManagerBreadcrumbItemClasses,
+            onClick: () => navigateToBreadcrumb(0)
+          },
+          "Root"
+        ),
+        ...props.currentPath.flatMap((seg, i) => [
+          h("span", { class: fileManagerBreadcrumbSeparatorClasses }, "/"),
+          h(
+            "span",
+            {
+              class: fileManagerBreadcrumbItemClasses,
+              onClick: () => navigateToBreadcrumb(i + 1)
+            },
+            seg
+          )
+        ])
+      ];
+      const breadcrumb = h(
+        "nav",
+        { class: fileManagerBreadcrumbClasses, "aria-label": "File path" },
+        breadcrumbItems
+      );
+      const searchInput = props.searchable ? h("input", {
+        type: "text",
+        class: fileManagerSearchClasses,
+        placeholder: "Search...",
+        value: localSearch.value,
+        onInput: (e) => {
+          const val = e.target.value;
+          localSearch.value = val;
+          emit("update:searchText", val);
+        }
+      }) : null;
+      const toolbar = h("div", { class: fileManagerToolbarClasses }, [
+        breadcrumb,
+        h("div", { class: "flex-1" }),
+        searchInput
+      ]);
+      const fileIcon = (item) => h(
+        "span",
+        { class: fileManagerItemIconClasses, "aria-hidden": "true" },
+        item.type === "folder" ? "\u{1F4C1}" : "\u{1F4C4}"
+      );
+      const renderItem = (item) => {
+        const isSelected = selectedSet.value.has(item.key);
+        const itemClass = getFileItemClasses(props.viewMode, isSelected);
+        const nameEl = h("span", { class: fileManagerItemNameClasses }, item.name);
+        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
+        ] : [];
+        return h(
+          "div",
+          {
+            key: item.key,
+            class: itemClass,
+            role: "option",
+            "aria-selected": isSelected,
+            "data-disabled": item.disabled || void 0,
+            onClick: () => handleSelect(item),
+            onDblclick: () => handleOpen(item),
+            draggable: props.draggable && !item.disabled
+          },
+          [fileIcon(item), nameEl, ...metaEls]
+        );
+      };
+      const contentClass = props.viewMode === "grid" ? `${fileManagerContentClasses} grid grid-cols-4 gap-2` : fileManagerContentClasses;
+      const content = processedItems.value.length > 0 ? h(
+        "div",
+        { class: contentClass, role: "listbox", "aria-multiselectable": props.multiple },
+        processedItems.value.map(renderItem)
+      ) : h("div", { class: fileManagerEmptyClasses }, props.emptyText);
+      const loadingEl = props.loading ? h("div", { class: fileManagerLoadingClasses }, "Loading...") : null;
+      return h("div", { class: containerClasses.value }, [toolbar, content, loadingEl]);
+    };
+  }
+});
+var FileManager_default = FileManager;
+
+export { FileManager, FileManager_default };

package/dist/{chunk-W2OCMRRH.mjs → chunk-OXOCGMPN.mjs}

@@ -1,4 +1,4 @@
-import { createStatusIconWithLoading, createStatusIcon } from './chunk-7RRA3TIG.mjs';
+import { createStatusIconWithLoading, createStatusIcon } from './chunk-2TNZ4JNT.mjs';
 import { ref, defineComponent, computed, h, Teleport, TransitionGroup, createApp } from 'vue';
 import { classNames, messageContainerBaseClasses, messagePositionClasses, getMessageTypeClasses, defaultMessageThemeColors, messageBaseClasses, getMessageIconPath, messageIconClasses, messageLoadingSpinnerClasses, messageContentClasses, messageCloseButtonClasses, messageCloseIconPath, isBrowser, normalizeStringOption } from '@expcat/tigercat-core';
 

package/dist/{chunk-RVEEEDJQ.mjs → chunk-P4X7GS2X.mjs}

@@ -3,7 +3,7 @@ import { Link } from './chunk-4YHOD7LT.mjs';
 import { Loading } from './chunk-Q6OYCTQO.mjs';
 import { Tag } from './chunk-3G4VPV4D.mjs';
 import { Text } from './chunk-6V7XCCXN.mjs';
-import { Card } from './chunk-YXN3YY5Y.mjs';
+import { Card } from './chunk-KOTSKHPQ.mjs';
 import { Avatar } from './chunk-COCECPMG.mjs';
 import { defineComponent, computed, h } from 'vue';
 import { buildActivityGroups, classNames, coerceClassValue, mergeStyleValues, toActivityTimelineItems, formatActivityTime } from '@expcat/tigercat-core';

package/dist/{chunk-HNQZ5JRB.js → chunk-PBWSBNDS.js}

@@ -121,6 +121,28 @@ var Select = vue.defineComponent({
     noDataText: {
       type: String,
       default: "No options available"
+    },
+    /**
+     * Maximum number of tags in multi-select display
+     * @since 0.5.0
+     */
+    maxTagCount: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Whether to use virtual scrolling
+     * @since 0.5.0
+     */
+    virtual: Boolean,
+    /**
+     * Height of the dropdown panel in pixels
+     * @default 256
+     * @since 0.5.0
+     */
+    listHeight: {
+      type: Number,
+      default: 256
     }
   },
   emits: ["update:modelValue", "change", "search"],
@@ -149,7 +171,12 @@ var Select = vue.defineComponent({
         }
         const currentValue = props.modelValue;
         const selectedOptions = allOptions.value.filter((opt) => currentValue.includes(opt.value));
-        return selectedOptions.map((opt) => opt.label).join(", ");
+        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}`;
+        }
+        return labels.join(", ");
       }
       const value = Array.isArray(props.modelValue) ? void 0 : props.modelValue;
       if (value === void 0 || value === null || value === "") {
@@ -456,7 +483,8 @@ var Select = vue.defineComponent({
             onKeydown: handleTriggerKeyDown,
             "aria-haspopup": "listbox",
             "aria-expanded": isOpen.value,
-            "aria-controls": listboxId
+            "aria-controls": listboxId,
+            "aria-activedescendant": isOpen.value && activeIndex.value >= 0 ? getOptionId(activeIndex.value) : void 0
           },
           [
             vue.h(
@@ -475,6 +503,7 @@ var Select = vue.defineComponent({
                 {
                   class: "inline-flex",
                   "data-tiger-select-clear": "",
+                  "aria-label": "Clear selection",
                   onClick: clearSelection
                 },
                 CloseIcon

package/dist/chunk-PXRF4IJO.mjs

@@ -0,0 +1,159 @@
+import { defineComponent, computed, h, ref, Teleport } from 'vue';
+import { classNames, floatButtonBaseClasses, floatButtonShapeClasses, floatButtonSizeClasses, floatButtonTypeClasses, floatButtonDisabledClasses, coerceClassValue, mergeStyleValues, floatButtonGroupClasses } from '@expcat/tigercat-core';
+
+// src/components/FloatButton.ts
+var FloatButton = defineComponent({
+  name: "TigerFloatButton",
+  inheritAttrs: false,
+  props: {
+    shape: {
+      type: String,
+      default: "circle"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    type: {
+      type: String,
+      default: "primary"
+    },
+    tooltip: {
+      type: String,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(props, { slots, emit, attrs }) {
+    const classes = computed(
+      () => classNames(
+        floatButtonBaseClasses,
+        floatButtonShapeClasses[props.shape],
+        floatButtonSizeClasses[props.size],
+        floatButtonTypeClasses[props.type],
+        props.disabled && floatButtonDisabledClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const handleClick = (e) => {
+      if (!props.disabled) {
+        emit("click", e);
+      }
+    };
+    return () => {
+      const attrsRecord = attrs;
+      const btn = h(
+        "button",
+        {
+          ...attrs,
+          class: classes.value,
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          type: "button",
+          disabled: props.disabled,
+          "aria-label": props.ariaLabel ?? props.tooltip,
+          title: props.tooltip,
+          onClick: handleClick
+        },
+        slots.default?.()
+      );
+      return btn;
+    };
+  }
+});
+var FloatButtonGroup = defineComponent({
+  name: "TigerFloatButtonGroup",
+  inheritAttrs: false,
+  props: {
+    shape: {
+      type: String,
+      default: "circle"
+    },
+    trigger: {
+      type: String,
+      default: "click"
+    },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:open"],
+  setup(props, { slots, emit, attrs }) {
+    const internalOpen = ref(false);
+    const isOpen = computed(() => props.open ?? internalOpen.value);
+    const toggle = () => {
+      const next = !isOpen.value;
+      internalOpen.value = next;
+      emit("update:open", next);
+    };
+    const groupClasses = computed(
+      () => classNames(
+        floatButtonGroupClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    return () => {
+      const attrsRecord = attrs;
+      const children = [];
+      if (slots.trigger) {
+        children.push(
+          h("div", { onClick: props.trigger === "click" ? toggle : void 0 }, slots.trigger())
+        );
+      }
+      if (isOpen.value && slots.default) {
+        const defaultSlot = slots.default();
+        for (const node of defaultSlot) {
+          children.push(node);
+        }
+      }
+      return h(Teleport, { to: "body" }, [
+        h(
+          "div",
+          {
+            ...attrs,
+            class: groupClasses.value,
+            style: mergeStyleValues(attrsRecord.style, props.style),
+            onMouseenter: props.trigger === "hover" ? () => {
+              internalOpen.value = true;
+              emit("update:open", true);
+            } : void 0,
+            onMouseleave: props.trigger === "hover" ? () => {
+              internalOpen.value = false;
+              emit("update:open", false);
+            } : void 0
+          },
+          children
+        )
+      ]);
+    };
+  }
+});
+var FloatButton_default = FloatButton;
+
+export { FloatButton, FloatButtonGroup, FloatButton_default };