@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-6QMYRKPV.mjs

@@ -0,0 +1,262 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Resizable.ts
+import { defineComponent, h, ref, computed, onBeforeUnmount } from "vue";
+import {
+  applyResizeJump,
+  applyResizeSize,
+  classNames,
+  coerceClassValue,
+  createDocumentDragSession,
+  defaultResizeHandles,
+  formatResizableHandleLabel,
+  getResizableHandleClasses,
+  getResizableLabels,
+  getResizeHandleOrientation,
+  getResizeKeyboardDelta,
+  isCornerResizeHandle,
+  isSplitterRtl,
+  mergeResizableBoxStyle,
+  mergeStyleValues,
+  resizableBaseClasses,
+  resolveVisibleResizeHandles
+} from "@expcat/tigercat-core";
+var Resizable = defineComponent({
+  name: "TigerResizable",
+  inheritAttrs: false,
+  props: {
+    width: { type: Number, default: void 0 },
+    height: { type: Number, default: void 0 },
+    defaultWidth: { type: Number, default: void 0 },
+    defaultHeight: { type: Number, default: void 0 },
+    minWidth: { type: Number, default: 0 },
+    minHeight: { type: Number, default: 0 },
+    maxWidth: { type: Number, default: void 0 },
+    maxHeight: { type: Number, default: void 0 },
+    handles: {
+      type: Array,
+      default: () => [...defaultResizeHandles]
+    },
+    axis: {
+      type: String,
+      default: "both"
+    },
+    disabled: { type: Boolean, default: false },
+    lockAspectRatio: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["resize-start", "resize", "resize-end", "update:width", "update:height"],
+  setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getResizableLabels(config.value.locale));
+    const rtl = computed(() => {
+      const attrDir = attrs.dir;
+      return isSplitterRtl(typeof attrDir === "string" ? attrDir : config.value.direction);
+    });
+    const internalWidth = ref(props.defaultWidth);
+    const internalHeight = ref(props.defaultHeight);
+    const offsetX = ref(0);
+    const offsetY = ref(0);
+    const draggingHandle = ref(null);
+    const rootRef = ref(null);
+    let dragSession = null;
+    const startMouseX = ref(0);
+    const startMouseY = ref(0);
+    const startWidth = ref(0);
+    const startHeight = ref(0);
+    const startOffsetX = ref(0);
+    const startOffsetY = ref(0);
+    const width = computed(() => props.width !== void 0 ? props.width : internalWidth.value);
+    const height = computed(
+      () => props.height !== void 0 ? props.height : internalHeight.value
+    );
+    const visibleHandles = computed(() => resolveVisibleResizeHandles(props.handles, props.axis));
+    const containerClasses = computed(
+      () => classNames(
+        resizableBaseClasses,
+        "group/resizable",
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const cleanupDragSession = () => {
+      dragSession?.dispose();
+      dragSession = null;
+    };
+    const measureBox = () => {
+      const rect = rootRef.value?.getBoundingClientRect();
+      return {
+        width: width.value ?? rect?.width ?? 0,
+        height: height.value ?? rect?.height ?? 0
+      };
+    };
+    const commitSize = (next, handle, startW, startH, phase) => {
+      if (props.width === void 0) internalWidth.value = next.width;
+      if (props.height === void 0) internalHeight.value = next.height;
+      offsetX.value = startOffsetX.value + next.offsetX;
+      offsetY.value = startOffsetY.value + next.offsetY;
+      emit("update:width", next.width);
+      emit("update:height", next.height);
+      const event = {
+        width: next.width,
+        height: next.height,
+        handle,
+        deltaX: next.width - startW,
+        deltaY: next.height - startH
+      };
+      emit("resize", event);
+      if (phase !== "move") emit("resize-end", event);
+    };
+    const resizeOptions = () => ({
+      rtl: rtl.value,
+      lockAspectRatio: props.lockAspectRatio,
+      minWidth: props.minWidth,
+      minHeight: props.minHeight,
+      maxWidth: props.maxWidth,
+      maxHeight: props.maxHeight
+    });
+    const onPointerDown = (handle, e) => {
+      if (props.disabled || e.button !== 0) return;
+      e.preventDefault();
+      cleanupDragSession();
+      const box = measureBox();
+      draggingHandle.value = handle;
+      startMouseX.value = e.clientX;
+      startMouseY.value = e.clientY;
+      startWidth.value = box.width;
+      startHeight.value = box.height;
+      startOffsetX.value = offsetX.value;
+      startOffsetY.value = offsetY.value;
+      emit("resize-start", {
+        width: box.width,
+        height: box.height,
+        handle,
+        deltaX: 0,
+        deltaY: 0
+      });
+      dragSession = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget?.ownerDocument,
+        pointerId: e.pointerId,
+        pointerTarget: e.currentTarget instanceof Element ? e.currentTarget : null,
+        onMove: ({ currentX, currentY }) => {
+          const next = applyResizeSize(
+            handle,
+            startWidth.value,
+            startHeight.value,
+            currentX - startMouseX.value,
+            currentY - startMouseY.value,
+            props.axis,
+            resizeOptions()
+          );
+          commitSize(next, handle, startWidth.value, startHeight.value, "move");
+        },
+        onEnd: ({ currentX, currentY }) => {
+          const next = applyResizeSize(
+            handle,
+            startWidth.value,
+            startHeight.value,
+            currentX - startMouseX.value,
+            currentY - startMouseY.value,
+            props.axis,
+            resizeOptions()
+          );
+          commitSize(next, handle, startWidth.value, startHeight.value, "end");
+          draggingHandle.value = null;
+          dragSession = null;
+        }
+      });
+    };
+    const onKeyDown = (handle, e) => {
+      if (props.disabled) return;
+      const box = measureBox();
+      startOffsetX.value = offsetX.value;
+      startOffsetY.value = offsetY.value;
+      const jumped = applyResizeJump(
+        e.key,
+        handle,
+        box.width,
+        box.height,
+        props.axis,
+        resizeOptions()
+      );
+      if (jumped) {
+        e.preventDefault();
+        commitSize(jumped, handle, box.width, box.height, "keyboard");
+        return;
+      }
+      const delta = getResizeKeyboardDelta(e.key);
+      if (!delta) return;
+      e.preventDefault();
+      const next = applyResizeSize(
+        handle,
+        box.width,
+        box.height,
+        delta.deltaX,
+        delta.deltaY,
+        props.axis,
+        resizeOptions()
+      );
+      commitSize(next, handle, box.width, box.height, "keyboard");
+    };
+    onBeforeUnmount(() => {
+      cleanupDragSession();
+    });
+    return () => {
+      const labelledby = attrs["aria-labelledby"];
+      const handleNodes = visibleHandles.value.map((pos) => {
+        const corner = isCornerResizeHandle(pos);
+        const usesHeight = pos === "top" || pos === "bottom";
+        const valueNow = Math.round((usesHeight ? height.value : width.value) ?? 0);
+        const handleName = formatResizableHandleLabel(labels.value.handleAriaLabel, pos);
+        return h("div", {
+          class: getResizableHandleClasses(pos, draggingHandle.value === pos, props.disabled),
+          "data-handle": pos,
+          role: corner ? void 0 : "separator",
+          "aria-hidden": corner ? "true" : void 0,
+          "aria-label": corner || typeof labelledby === "string" ? void 0 : handleName,
+          "aria-orientation": corner ? void 0 : getResizeHandleOrientation(pos),
+          "aria-valuenow": corner ? void 0 : valueNow,
+          "aria-valuemin": corner ? void 0 : usesHeight ? props.minHeight : props.minWidth,
+          "aria-valuemax": corner ? void 0 : usesHeight ? props.maxHeight : props.maxWidth,
+          tabindex: props.disabled || corner ? -1 : 0,
+          onPointerdown: (e) => onPointerDown(pos, e),
+          onKeydown: (e) => onKeyDown(pos, e)
+        });
+      });
+      const boxStyle = mergeResizableBoxStyle(
+        void 0,
+        width.value,
+        height.value,
+        offsetX.value,
+        offsetY.value
+      );
+      return h(
+        "div",
+        {
+          ...attrs,
+          ref: (el) => {
+            rootRef.value = el instanceof HTMLElement ? el : null;
+          },
+          class: containerClasses.value,
+          style: mergeStyleValues(attrs.style, props.style, boxStyle),
+          "data-resizable": ""
+        },
+        [...slots.default?.() || [], ...handleNodes]
+      );
+    };
+  }
+});
+var Resizable_default = Resizable;
+
+export {
+  Resizable,
+  Resizable_default
+};

package/dist/{chunk-XFNHZ7SV.mjs → chunk-6RSCF4DV.mjs}

@@ -1,14 +1,23 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
 // src/components/Segmented.ts
-import { defineComponent, h } from "vue";
+import { defineComponent, h, ref, computed, watch } from "vue";
 import {
   getSegmentedContainerClasses,
   getSegmentedContainerStyle,
   getSegmentedIndicatorClasses,
   getSegmentedIndicatorStyle,
   getSegmentedOptionClasses,
+  getSegmentedTrackClasses,
+  getSegmentedKeyboardTarget,
   classNames,
   coerceClassValue,
-  mergeStyleValues
+  mergeStyleValues,
+  getLocaleDirection,
+  devWarn,
+  icon24ViewBox
 } from "@expcat/tigercat-core";
 var Segmented = defineComponent({
   name: "TigerSegmented",
@@ -18,6 +27,10 @@ var Segmented = defineComponent({
       type: [String, Number],
       default: void 0
     },
+    defaultValue: {
+      type: [String, Number],
+      default: void 0
+    },
     options: {
       type: Array,
       default: () => []
@@ -25,13 +38,26 @@ var Segmented = defineComponent({
     disabled: { type: Boolean, default: false },
     size: { type: String, default: "md" },
     block: { type: Boolean, default: false },
+    name: { type: String, default: void 0 },
     className: { type: String, default: void 0 }
   },
   emits: ["update:modelValue", "change"],
   setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const rtl = computed(() => getLocaleDirection(config.value.locale) === "rtl");
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const innerValue = ref(props.defaultValue);
+    const currentValue = computed(() => isControlled.value ? props.modelValue : innerValue.value);
+    watch(
+      () => props.modelValue,
+      (next) => {
+        if (next !== void 0) innerValue.value = next;
+      }
+    );
     function handleSelect(option) {
       if (option.disabled || props.disabled) return;
-      if (option.value === props.modelValue) return;
+      if (option.value === currentValue.value) return;
+      if (!isControlled.value) innerValue.value = option.value;
       emit("update:modelValue", option.value);
       emit("change", option.value);
     }
@@ -41,36 +67,16 @@ var Segmented = defineComponent({
     }
     function handleKeydown(e, index) {
       if (props.disabled) return;
-      const enabledIdxs = props.options.reduce((acc, opt, i) => {
-        if (!opt.disabled) acc.push(i);
-        return acc;
-      }, []);
-      if (enabledIdxs.length === 0) return;
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
         handleSelect(props.options[index]);
         return;
       }
-      const pos = enabledIdxs.indexOf(index);
-      let target = null;
-      switch (e.key) {
-        case "ArrowRight":
-        case "ArrowDown":
-          target = enabledIdxs[(pos + 1 + enabledIdxs.length) % enabledIdxs.length];
-          break;
-        case "ArrowLeft":
-        case "ArrowUp":
-          target = enabledIdxs[(pos - 1 + enabledIdxs.length) % enabledIdxs.length];
-          break;
-        case "Home":
-          target = enabledIdxs[0];
-          break;
-        case "End":
-          target = enabledIdxs[enabledIdxs.length - 1];
-          break;
-        default:
-          return;
-      }
+      const enabledIdxs = props.options.reduce((acc, opt, i) => {
+        if (!opt.disabled) acc.push(i);
+        return acc;
+      }, []);
+      const target = getSegmentedKeyboardTarget(e.key, index, enabledIdxs, rtl.value);
       if (target == null) return;
       e.preventDefault();
       const container = e.currentTarget.closest('[role="radiogroup"]');
@@ -78,9 +84,13 @@ var Segmented = defineComponent({
       handleSelect(props.options[target]);
     }
     return () => {
-      const selectedIndex = props.options.findIndex((opt) => opt.value === props.modelValue);
+      if (new Set(props.options.map((opt) => opt.value)).size !== props.options.length) {
+        devWarn("Segmented.duplicateValue", "Segmented: option values should be unique.");
+      }
+      const selectedIndex = props.options.findIndex((opt) => opt.value === currentValue.value);
       const firstEnabledIndex = props.options.findIndex((opt) => !opt.disabled);
       const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
+      const attrsRecord = attrs;
       return h(
         "div",
         {
@@ -88,45 +98,55 @@ var Segmented = defineComponent({
           class: classNames(
             getSegmentedContainerClasses(props.size, props.block),
             props.className,
-            coerceClassValue(attrs.class)
+            coerceClassValue(attrsRecord.class)
           ),
           style: mergeStyleValues(
-            attrs.style,
+            attrsRecord.style,
             getSegmentedContainerStyle(props.options.length)
           ),
           role: "radiogroup",
           "aria-disabled": props.disabled || void 0
         },
         [
-          h("div", {
-            "data-tiger-segmented-indicator": "true",
-            "aria-hidden": "true",
-            class: getSegmentedIndicatorClasses(props.size),
-            style: getSegmentedIndicatorStyle(
-              props.options.findIndex((opt) => opt.value === props.modelValue),
-              props.options.length,
-              props.size
-            )
-          }),
+          props.name != null ? h("input", { type: "hidden", name: props.name, value: currentValue.value ?? "" }) : null,
+          h("div", { class: getSegmentedTrackClasses(), "aria-hidden": "true" }, [
+            h("div", {
+              "data-tiger-segmented-indicator": "true",
+              class: getSegmentedIndicatorClasses(props.size),
+              style: getSegmentedIndicatorStyle(selectedIndex, props.options.length, props.size)
+            })
+          ]),
           ...props.options.map((opt, index) => {
-            const selected = opt.value === props.modelValue;
-            const isDisabled = !!opt.disabled || props.disabled;
+            const selected = opt.value === currentValue.value;
+            const isDisabled = Boolean(opt.disabled) || props.disabled;
             return h(
-              "label",
+              "button",
               {
-                key: opt.value,
-                class: classNames(
-                  getSegmentedOptionClasses(props.size, selected, isDisabled),
-                  props.block ? "flex-1 text-center" : ""
-                ),
+                key: `${String(opt.value)}-${index}`,
+                type: "button",
+                class: getSegmentedOptionClasses(props.size, selected, isDisabled),
                 role: "radio",
                 "aria-checked": selected,
-                "aria-disabled": isDisabled,
+                "aria-disabled": isDisabled || void 0,
                 tabindex: isDisabled ? -1 : index === rovingIndex ? 0 : -1,
                 onClick: () => handleSelect(opt),
                 onKeydown: (e) => handleKeydown(e, index)
               },
-              [h("span", null, opt.label)]
+              [
+                opt.icon ? h(
+                  "svg",
+                  {
+                    viewBox: icon24ViewBox,
+                    class: "h-4 w-4",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "aria-hidden": "true",
+                    focusable: "false"
+                  },
+                  [h("path", { d: opt.icon })]
+                ) : null,
+                h("span", null, opt.label)
+              ]
             );
           })
         ]