@expcat/tigercat-vue 0.4.3 → 1.0.4

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-NMGH5YTV.mjs

@@ -0,0 +1,245 @@
+import { defineComponent, ref, computed, h } from 'vue';
+import { splitTransferData, filterTransferItems, classNames, transferBaseClasses, coerceClassValue, transferOperationClasses, getTransferButtonClasses, transferPanelClasses, transferPanelHeaderClasses, transferSearchClasses, transferPanelBodyClasses, getTransferItemClasses, getTransferCheckboxClasses, transferEmptyClasses, icon20ViewBox, chevronRightSolidIcon20PathD, chevronLeftSolidIcon20PathD } from '@expcat/tigercat-core';
+
+// src/components/Transfer.ts
+function ArrowIcon(pathD) {
+  return h(
+    "svg",
+    {
+      class: "w-4 h-4",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    [
+      h("path", {
+        d: pathD,
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd"
+      })
+    ]
+  );
+}
+var Transfer = defineComponent({
+  name: "TigerTransfer",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showSearch: {
+      type: Boolean,
+      default: false
+    },
+    sourceTitle: {
+      type: String,
+      default: "Source"
+    },
+    targetTitle: {
+      type: String,
+      default: "Target"
+    },
+    notFoundText: {
+      type: String,
+      default: "No data"
+    },
+    filterOption: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const sourceSelectedKeys = ref(/* @__PURE__ */ new Set());
+    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 filteredSourceItems = computed(
+      () => filterTransferItems(computedData.value.sourceItems, sourceSearch.value, props.filterOption)
+    );
+    const filteredTargetItems = computed(
+      () => filterTransferItems(computedData.value.targetItems, targetSearch.value, props.filterOption)
+    );
+    const canMoveRight = computed(() => {
+      if (props.disabled) return false;
+      for (const key of sourceSelectedKeys.value) {
+        const item = props.dataSource.find((d) => d.key === key);
+        if (item && !item.disabled) return true;
+      }
+      return false;
+    });
+    const canMoveLeft = computed(() => {
+      if (props.disabled) return false;
+      for (const key of targetSelectedKeys.value) {
+        const item = props.dataSource.find((d) => d.key === key);
+        if (item && !item.disabled) return true;
+      }
+      return false;
+    });
+    function toggleSourceItem(key) {
+      const next = new Set(sourceSelectedKeys.value);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      sourceSelectedKeys.value = next;
+    }
+    function toggleTargetItem(key) {
+      const next = new Set(targetSelectedKeys.value);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      targetSelectedKeys.value = next;
+    }
+    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];
+      sourceSelectedKeys.value = /* @__PURE__ */ new Set();
+      emit("update:modelValue", newTargetKeys);
+      emit("change", newTargetKeys, "right", keysToMove);
+    }
+    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 newTargetKeys = props.modelValue.filter((k) => !keysToRemove.has(k));
+      targetSelectedKeys.value = /* @__PURE__ */ new Set();
+      emit("update:modelValue", newTargetKeys);
+      emit("change", newTargetKeys, "left", [...keysToRemove]);
+    }
+    function renderPanel(title, items, selectedKeys, toggleFn, searchValue, onSearch) {
+      return h("div", { class: transferPanelClasses, role: "group", "aria-label": title }, [
+        // Header
+        h("div", { class: transferPanelHeaderClasses }, [
+          h(
+            "span",
+            { class: "font-medium text-[var(--tiger-transfer-title,var(--tiger-text,#111827))]" },
+            `${title} (${items.length})`
+          )
+        ]),
+        // Search
+        props.showSearch ? h("input", {
+          type: "text",
+          class: transferSearchClasses,
+          placeholder: "Search...",
+          value: searchValue,
+          "aria-label": `Search ${title}`,
+          onInput: (e) => onSearch(e.target.value)
+        }) : null,
+        // Body
+        h(
+          "div",
+          { class: transferPanelBodyClasses, role: "listbox" },
+          items.length > 0 ? items.map((item) => {
+            const isSelected = selectedKeys.has(item.key);
+            const isDisabled = props.disabled || !!item.disabled;
+            return h(
+              "label",
+              {
+                key: item.key,
+                class: getTransferItemClasses(isSelected, isDisabled, props.size),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": isDisabled
+              },
+              [
+                h("input", {
+                  type: "checkbox",
+                  class: getTransferCheckboxClasses(props.size),
+                  checked: isSelected,
+                  disabled: isDisabled,
+                  onChange: () => {
+                    if (!isDisabled) toggleFn(item.key);
+                  }
+                }),
+                h("span", { class: "flex-1 truncate" }, item.label)
+              ]
+            );
+          }) : [h("div", { class: transferEmptyClasses }, props.notFoundText)]
+        )
+      ]);
+    }
+    return () => {
+      const containerClasses = classNames(transferBaseClasses, coerceClassValue(attrs.class));
+      return h("div", { class: containerClasses }, [
+        // Source panel
+        renderPanel(
+          props.sourceTitle,
+          filteredSourceItems.value,
+          sourceSelectedKeys.value,
+          toggleSourceItem,
+          sourceSearch.value,
+          (val) => {
+            sourceSearch.value = val;
+          }
+        ),
+        // Operation buttons
+        h("div", { class: transferOperationClasses }, [
+          h(
+            "button",
+            {
+              type: "button",
+              class: getTransferButtonClasses(!canMoveRight.value),
+              disabled: !canMoveRight.value,
+              "aria-label": "Move selected to target",
+              onClick: moveRight
+            },
+            [ArrowIcon(chevronRightSolidIcon20PathD)]
+          ),
+          h(
+            "button",
+            {
+              type: "button",
+              class: getTransferButtonClasses(!canMoveLeft.value),
+              disabled: !canMoveLeft.value,
+              "aria-label": "Move selected to source",
+              onClick: moveLeft
+            },
+            [ArrowIcon(chevronLeftSolidIcon20PathD)]
+          )
+        ]),
+        // Target panel
+        renderPanel(
+          props.targetTitle,
+          filteredTargetItems.value,
+          targetSelectedKeys.value,
+          toggleTargetItem,
+          targetSearch.value,
+          (val) => {
+            targetSearch.value = val;
+          }
+        )
+      ]);
+    };
+  }
+});
+var Transfer_default = Transfer;
+
+export { Transfer, Transfer_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;