@expcat/tigercat-vue 0.4.3 → 1.0.0

package/dist/chunk-MX2KCWM2.js

@@ -0,0 +1,193 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Splitter.ts
+var Splitter = vue.defineComponent({
+  name: "TigerSplitter",
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    sizes: {
+      type: Array,
+      default: void 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: void 0
+    },
+    gutterSize: {
+      type: Number,
+      default: 4
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:sizes", "resize-start", "resize", "resize-end"],
+  setup(props, { slots, emit, attrs }) {
+    const containerRef = vue.ref(null);
+    const paneSizes = vue.ref([]);
+    const draggingIndex = vue.ref(-1);
+    const startPos = vue.ref(0);
+    const startSizes = vue.ref([]);
+    vue.watch(
+      () => props.sizes,
+      (newSizes) => {
+        if (newSizes) paneSizes.value = [...newSizes];
+      },
+      { immediate: true }
+    );
+    const initSizes = () => {
+      if (props.sizes && props.sizes.length > 0) {
+        paneSizes.value = [...props.sizes];
+        return;
+      }
+      const el = containerRef.value;
+      if (!el) return;
+      const slotChildren = slots.default?.() || [];
+      const paneCount = slotChildren.length;
+      if (paneCount === 0) return;
+      const totalGutter = (paneCount - 1) * props.gutterSize;
+      const total = props.direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
+      const eachSize = total / paneCount;
+      paneSizes.value = Array.from({ length: paneCount }, () => eachSize);
+    };
+    vue.onMounted(initSizes);
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.getSplitterContainerClasses(props.direction, props.className),
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const getMins = () => paneSizes.value.map(() => props.min);
+    const getMaxes = () => paneSizes.value.map(() => props.max);
+    const onMouseDown = (index, e) => {
+      if (props.disabled) return;
+      e.preventDefault();
+      draggingIndex.value = index;
+      startPos.value = props.direction === "horizontal" ? e.clientX : e.clientY;
+      startSizes.value = [...paneSizes.value];
+      emit("resize-start", { index, sizes: [...paneSizes.value] });
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const onMouseMove = (e) => {
+      if (draggingIndex.value < 0) return;
+      const currentPos = props.direction === "horizontal" ? e.clientX : e.clientY;
+      const delta = currentPos - startPos.value;
+      const newSizes = tigercatCore.resizePanes(
+        startSizes.value,
+        draggingIndex.value,
+        delta,
+        getMins(),
+        getMaxes()
+      );
+      if (newSizes) {
+        paneSizes.value = newSizes;
+        emit("update:sizes", newSizes);
+        emit("resize", { index: draggingIndex.value, sizes: newSizes });
+      }
+    };
+    const onMouseUp = () => {
+      if (draggingIndex.value >= 0) {
+        emit("resize-end", {
+          index: draggingIndex.value,
+          sizes: [...paneSizes.value]
+        });
+      }
+      draggingIndex.value = -1;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    });
+    return () => {
+      const children = slots.default?.() || [];
+      const nodes = [];
+      children.forEach((child, i) => {
+        const size = paneSizes.value[i];
+        const paneStyle = size != null ? tigercatCore.getPaneStyle(size, props.direction) : void 0;
+        nodes.push(
+          vue.h(
+            "div",
+            {
+              class: "tiger-splitter-pane relative overflow-auto",
+              style: paneStyle,
+              "data-pane-index": i
+            },
+            [child]
+          )
+        );
+        if (i < children.length - 1) {
+          const isDragging = draggingIndex.value === i;
+          nodes.push(
+            vue.h(
+              "div",
+              {
+                class: tigercatCore.getSplitterGutterClasses(props.direction, isDragging, props.disabled),
+                role: "separator",
+                "aria-orientation": props.direction === "horizontal" ? "vertical" : "horizontal",
+                tabindex: props.disabled ? -1 : 0,
+                "data-gutter-index": i,
+                onMousedown: (e) => onMouseDown(i, e),
+                onKeydown: (e) => {
+                  if (props.disabled) return;
+                  const step = 10;
+                  let delta = 0;
+                  if (props.direction === "horizontal" && e.key === "ArrowLeft" || props.direction === "vertical" && e.key === "ArrowUp") {
+                    delta = -step;
+                  } else if (props.direction === "horizontal" && e.key === "ArrowRight" || props.direction === "vertical" && e.key === "ArrowDown") {
+                    delta = step;
+                  }
+                  if (delta !== 0) {
+                    e.preventDefault();
+                    const newSizes = tigercatCore.resizePanes(paneSizes.value, i, delta, getMins(), getMaxes());
+                    if (newSizes) {
+                      paneSizes.value = newSizes;
+                      emit("update:sizes", newSizes);
+                      emit("resize", { index: i, sizes: newSizes });
+                    }
+                  }
+                }
+              },
+              [vue.h("div", { class: tigercatCore.getSplitterGutterHandleClasses(props.direction) })]
+            )
+          );
+        }
+      });
+      return vue.h(
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses.value,
+          style: props.style,
+          "data-direction": props.direction
+        },
+        nodes
+      );
+    };
+  }
+});
+var Splitter_default = Splitter;
+
+exports.Splitter = Splitter;
+exports.Splitter_default = Splitter_default;

package/dist/chunk-NAHD6ZRR.mjs

@@ -0,0 +1,65 @@
+import { defineComponent, provide, computed, h } from 'vue';
+import { avatarGroupItemClasses, avatarSizeClasses, classNames, avatarGroupBaseClasses, coerceClassValue, avatarGroupOverflowClasses } from '@expcat/tigercat-core';
+
+// src/components/AvatarGroup.ts
+var AVATAR_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerAvatarGroup");
+var AvatarGroup = defineComponent({
+  name: "TigerAvatarGroup",
+  inheritAttrs: false,
+  props: {
+    max: {
+      type: Number,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    provide(AVATAR_GROUP_INJECTION_KEY, {
+      size: props.size,
+      itemClass: avatarGroupItemClasses
+    });
+    const overflowSizeClass = computed(() => avatarSizeClasses[props.size ?? "md"]);
+    return () => {
+      const children = slots.default?.() ?? [];
+      const flatChildren = children.flatMap(
+        (vnode) => Array.isArray(vnode.children) ? vnode.children : [vnode]
+      );
+      const attrsRecord = attrs;
+      const attrsClass = attrsRecord.class;
+      const total = flatChildren.length;
+      const visibleCount = props.max != null && props.max < total ? props.max : total;
+      const overflow = total - visibleCount;
+      const visible = flatChildren.slice(0, visibleCount);
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(avatarGroupBaseClasses, props.className, coerceClassValue(attrsClass)),
+          role: "group",
+          "aria-label": "Avatar group"
+        },
+        [
+          ...visible,
+          overflow > 0 ? h(
+            "span",
+            {
+              class: classNames(avatarGroupOverflowClasses, overflowSizeClass.value),
+              "aria-label": `${overflow} more`
+            },
+            `+${overflow}`
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var AvatarGroup_default = AvatarGroup;
+
+export { AVATAR_GROUP_INJECTION_KEY, AvatarGroup, AvatarGroup_default };

package/dist/chunk-NOZ65AMO.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Empty.ts
+var Empty = vue.defineComponent({
+  name: "TigerEmpty",
+  inheritAttrs: false,
+  props: {
+    preset: {
+      type: String,
+      default: "default"
+    },
+    description: {
+      type: String,
+      default: void 0
+    },
+    showImage: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const descText = vue.computed(() => props.description ?? tigercatCore.getEmptyDescription(props.preset));
+    return () => {
+      const attrsRecord = attrs;
+      const children = [];
+      if (props.showImage) {
+        if (slots.image) {
+          children.push(vue.h("div", { class: tigercatCore.emptyImageClasses }, slots.image()));
+        } else {
+          const paths = tigercatCore.emptyIllustrationPaths.map(
+            (p, i) => vue.h("path", {
+              key: i,
+              d: p.d,
+              fill: p.fill ?? "none",
+              stroke: p.stroke,
+              "stroke-width": p.strokeWidth,
+              opacity: p.opacity
+            })
+          );
+          children.push(
+            vue.h("div", { class: tigercatCore.emptyImageClasses }, [
+              vue.h(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: tigercatCore.emptyIllustrationViewBox,
+                  class: "mx-auto h-24 w-24"
+                },
+                paths
+              )
+            ])
+          );
+        }
+      }
+      if (slots.description || descText.value) {
+        children.push(
+          vue.h(
+            "div",
+            { class: tigercatCore.emptyDescriptionClasses },
+            slots.description ? slots.description() : descText.value
+          )
+        );
+      }
+      if (slots.extra) {
+        children.push(vue.h("div", { class: tigercatCore.emptyActionsClasses }, slots.extra()));
+      }
+      if (slots.default) {
+        children.push(vue.h("div", null, slots.default()));
+      }
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          class: tigercatCore.classNames(tigercatCore.emptyBaseClasses, props.className, tigercatCore.coerceClassValue(attrsRecord.class)),
+          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style)
+        },
+        children
+      );
+    };
+  }
+});
+var Empty_default = Empty;
+
+exports.Empty = Empty;
+exports.Empty_default = Empty_default;

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-CWDBL5YC.mjs → chunk-OEHCRIVT.mjs}

@@ -1,8 +1,8 @@
-import { Table } from './chunk-BS52UCMT.mjs';
-import { Select } from './chunk-GALASVSG.mjs';
+import { Table } from './chunk-HTOCKV2N.mjs';
+import { Select } from './chunk-QNODDATK.mjs';
 import { Pagination } from './chunk-NHCCPMLC.mjs';
-import { Input } from './chunk-VURU7TLN.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { Input } from './chunk-2WJADO6O.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { defineComponent, ref, getCurrentInstance, watch, computed, h } from 'vue';
 import { classNames, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';