@iris-ui-kit/vue 0.1.0

package/dist/behaviors.cjs

@@ -0,0 +1,659 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@iris-ui-kit/core');
+
+// src/behaviors/Resizable.ts
+function useDrag(options) {
+  const buttons = options.buttons ?? [0];
+  let startX = 0;
+  let startY = 0;
+  let active = null;
+  const onPointerDown = (event) => {
+    if (options.disabled?.value) return;
+    if (!buttons.includes(event.button)) return;
+    const handle = options.handle.value;
+    if (!handle) return;
+    startX = event.clientX;
+    startY = event.clientY;
+    const state = {
+      x: event.clientX,
+      y: event.clientY,
+      dx: 0,
+      dy: 0,
+      event
+    };
+    const result = options.onStart?.(state);
+    if (result === false) return;
+    active = event;
+    handle.setPointerCapture?.(event.pointerId);
+    handle.style.touchAction = "none";
+    event.preventDefault();
+  };
+  const onPointerMove = (event) => {
+    if (!active || active.pointerId !== event.pointerId) return;
+    options.onDrag?.({
+      x: event.clientX,
+      y: event.clientY,
+      dx: event.clientX - startX,
+      dy: event.clientY - startY,
+      event
+    });
+  };
+  const onPointerEnd = (event) => {
+    if (!active || active.pointerId !== event.pointerId) return;
+    const handle = options.handle.value;
+    handle?.releasePointerCapture?.(event.pointerId);
+    if (handle) handle.style.touchAction = "";
+    options.onEnd?.({
+      x: event.clientX,
+      y: event.clientY,
+      dx: event.clientX - startX,
+      dy: event.clientY - startY,
+      event
+    });
+    active = null;
+  };
+  const attach = (el) => {
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", onPointerEnd);
+    el.addEventListener("pointercancel", onPointerEnd);
+  };
+  const detach = (el) => {
+    el.removeEventListener("pointerdown", onPointerDown);
+    el.removeEventListener("pointermove", onPointerMove);
+    el.removeEventListener("pointerup", onPointerEnd);
+    el.removeEventListener("pointercancel", onPointerEnd);
+  };
+  vue.watch(
+    options.handle,
+    (el, prev) => {
+      if (prev) detach(prev);
+      if (el) attach(el);
+    },
+    { immediate: true, flush: "post" }
+  );
+  vue.onScopeDispose(() => {
+    const el = options.handle.value;
+    if (el) detach(el);
+  });
+}
+
+// src/behaviors/Resizable.ts
+var ALL_HANDLES = [
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+var HANDLE_CURSORS = {
+  top: "ns-resize",
+  right: "ew-resize",
+  bottom: "ns-resize",
+  left: "ew-resize",
+  "top-left": "nwse-resize",
+  "top-right": "nesw-resize",
+  "bottom-left": "nesw-resize",
+  "bottom-right": "nwse-resize"
+};
+function handlePosition(handle) {
+  const s = { position: "absolute" };
+  const t = handle.includes("top");
+  const b = handle.includes("bottom");
+  const l = handle.includes("left");
+  const r = handle.includes("right");
+  if (t) s.top = "-4px";
+  if (b) s.bottom = "-4px";
+  if (l) s.left = "-4px";
+  if (r) s.right = "-4px";
+  const isCorner = (t || b) && (l || r);
+  if (isCorner) {
+    s.width = "12px";
+    s.height = "12px";
+  } else if (t || b) {
+    s.left = "0";
+    s.right = "0";
+    s.height = "8px";
+  } else {
+    s.top = "0";
+    s.bottom = "0";
+    s.width = "8px";
+  }
+  s.cursor = HANDLE_CURSORS[handle];
+  return s;
+}
+var IrisResizable = vue.defineComponent({
+  name: "IrisResizable",
+  inheritAttrs: false,
+  props: {
+    size: { type: Object, default: void 0 },
+    defaultSize: {
+      type: Object,
+      default: () => ({ width: 200, height: 200 })
+    },
+    handles: { type: Array, default: () => ALL_HANDLES },
+    minWidth: { type: Number, default: 40 },
+    minHeight: { type: Number, default: 40 },
+    maxWidth: { type: Number, default: Infinity },
+    maxHeight: { type: Number, default: Infinity },
+    keepAspect: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: {
+    "update:size": (_v) => true,
+    resizeStart: (_v) => true,
+    resizeEnd: (_v) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const isControlled = vue.computed(() => props.size !== void 0);
+    const internal = vue.ref({ ...props.defaultSize });
+    const size = vue.computed(
+      () => isControlled.value ? props.size : internal.value
+    );
+    const setSize = (next) => {
+      if (!isControlled.value) internal.value = next;
+      emit("update:size", next);
+    };
+    const renderHandle = (handle) => {
+      const handleRef = vue.ref(null);
+      let startSize = { width: 0, height: 0 };
+      let aspect = 1;
+      useDrag({
+        handle: handleRef,
+        disabled: vue.computed(() => props.disabled),
+        onStart: () => {
+          startSize = { ...size.value };
+          aspect = startSize.width / Math.max(1, startSize.height);
+          emit("resizeStart", startSize);
+        },
+        onDrag: ({ dx, dy }) => {
+          const t = handle.includes("top");
+          const b = handle.includes("bottom");
+          const l = handle.includes("left");
+          const r = handle.includes("right");
+          let nextW = startSize.width;
+          let nextH = startSize.height;
+          if (r) nextW = startSize.width + dx;
+          if (l) nextW = startSize.width - dx;
+          if (b) nextH = startSize.height + dy;
+          if (t) nextH = startSize.height - dy;
+          if (props.keepAspect && (t || b) && (l || r)) {
+            nextH = nextW / aspect;
+          }
+          nextW = Math.max(props.minWidth, Math.min(props.maxWidth, nextW));
+          nextH = Math.max(props.minHeight, Math.min(props.maxHeight, nextH));
+          setSize({ width: nextW, height: nextH });
+        },
+        onEnd: () => {
+          emit("resizeEnd", size.value);
+        }
+      });
+      return vue.h("div", {
+        ref: (el) => {
+          handleRef.value = el ?? null;
+        },
+        "data-iris-resizable-handle": handle,
+        style: {
+          ...handlePosition(handle),
+          touchAction: "none",
+          background: "transparent",
+          zIndex: "1"
+        }
+      });
+    };
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-resizable": "",
+        "data-state": props.disabled ? "disabled" : "idle",
+        style: {
+          position: "relative",
+          display: "inline-block",
+          width: `${size.value.width}px`,
+          height: `${size.value.height}px`,
+          ...attrs.style ?? {}
+        }
+      },
+      [slots.default?.(), ...props.handles.map(renderHandle)]
+    );
+  }
+});
+var IrisMovable = vue.defineComponent({
+  name: "IrisMovable",
+  inheritAttrs: false,
+  props: {
+    position: { type: Object, default: void 0 },
+    defaultPosition: {
+      type: Object,
+      default: () => ({ x: 0, y: 0 })
+    },
+    bounds: { type: Object, default: () => ({}) },
+    byHandle: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: {
+    "update:position": (_v) => true,
+    dragStart: (_v) => true,
+    dragEnd: (_v) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const isControlled = vue.computed(() => props.position !== void 0);
+    const internal = vue.ref({ ...props.defaultPosition });
+    const position = vue.computed(
+      () => isControlled.value ? props.position : internal.value
+    );
+    const rootRef = vue.ref(null);
+    const handleRef = vue.ref(null);
+    const dragging = vue.ref(false);
+    let startPos = { x: 0, y: 0 };
+    const refreshHandle = () => {
+      if (!props.byHandle) return;
+      handleRef.value = rootRef.value?.querySelector("[data-iris-movable-handle]") ?? null;
+    };
+    vue.onMounted(refreshHandle);
+    vue.onUpdated(refreshHandle);
+    const dragTarget = vue.computed(() => props.byHandle ? handleRef : rootRef);
+    const clamp = (p) => ({
+      x: Math.max(props.bounds.minX ?? -Infinity, Math.min(props.bounds.maxX ?? Infinity, p.x)),
+      y: Math.max(props.bounds.minY ?? -Infinity, Math.min(props.bounds.maxY ?? Infinity, p.y))
+    });
+    const setPosition = (next) => {
+      if (!isControlled.value) internal.value = next;
+      emit("update:position", next);
+    };
+    useDrag({
+      handle: vue.computed(() => dragTarget.value.value),
+      disabled: vue.computed(() => props.disabled),
+      onStart: () => {
+        startPos = position.value;
+        dragging.value = true;
+        emit("dragStart", position.value);
+      },
+      onDrag: ({ dx, dy }) => {
+        setPosition(clamp({ x: startPos.x + dx, y: startPos.y + dy }));
+      },
+      onEnd: () => {
+        dragging.value = false;
+        emit("dragEnd", position.value);
+      }
+    });
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        ref: (el) => {
+          rootRef.value = el ?? null;
+        },
+        "data-iris-movable": "",
+        "data-state": dragging.value ? "dragging" : "idle",
+        style: {
+          position: "absolute",
+          left: "0",
+          top: "0",
+          transform: `translate3d(${position.value.x}px, ${position.value.y}px, 0)`,
+          cursor: props.byHandle ? "default" : props.disabled ? "not-allowed" : "grab",
+          touchAction: "none",
+          ...attrs.style ?? {}
+        }
+      },
+      slots.default?.()
+    );
+  }
+});
+function parseShortcut(spec) {
+  const parts = spec.split("+").map((p) => p.trim());
+  const key = parts[parts.length - 1].toLowerCase();
+  const mods = new Set(parts.slice(0, -1).map((p) => p.toLowerCase()));
+  return {
+    key,
+    shift: mods.has("shift"),
+    alt: mods.has("alt") || mods.has("option"),
+    ctrl: mods.has("ctrl") || mods.has("control"),
+    meta: mods.has("meta") || mods.has("cmd") || mods.has("command"),
+    ctrlOrMeta: mods.has("mod")
+  };
+}
+function isInputTarget(target) {
+  const el = target;
+  if (!el) return false;
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (el.isContentEditable) return true;
+  return false;
+}
+function matches(event, parsed) {
+  if (event.key.toLowerCase() !== parsed.key) return false;
+  if (parsed.shift !== event.shiftKey) return false;
+  if (parsed.alt !== event.altKey) return false;
+  if (parsed.ctrlOrMeta) {
+    if (!event.ctrlKey && !event.metaKey) return false;
+  } else {
+    if (parsed.ctrl !== event.ctrlKey) return false;
+    if (parsed.meta !== event.metaKey) return false;
+  }
+  return true;
+}
+var IrisHotkey = vue.defineComponent({
+  name: "IrisHotkey",
+  inheritAttrs: false,
+  props: {
+    shortcut: { type: [String, Array], required: true },
+    disabled: { type: Boolean, default: false },
+    allowInInputs: { type: Boolean, default: false },
+    scope: { type: String, default: "document" }
+  },
+  emits: {
+    trigger: (_event) => true
+  },
+  setup(props, { slots, emit }) {
+    let detach = null;
+    vue.watchEffect((onCleanup) => {
+      detach?.();
+      detach = null;
+      if (props.disabled) return;
+      const specs = Array.isArray(props.shortcut) ? props.shortcut : [props.shortcut];
+      const parsed = specs.map(parseShortcut);
+      const target = props.scope === "window" ? window : document;
+      const onKey = (event) => {
+        const e = event;
+        if (!props.allowInInputs && isInputTarget(e.target)) return;
+        for (const p of parsed) {
+          if (matches(e, p)) {
+            emit("trigger", e);
+            return;
+          }
+        }
+      };
+      target.addEventListener("keydown", onKey);
+      detach = () => target.removeEventListener("keydown", onKey);
+      onCleanup(() => detach?.());
+    });
+    vue.onBeforeUnmount(() => detach?.());
+    return () => slots.default?.();
+  }
+});
+var IrisClickOutside = vue.defineComponent({
+  name: "IrisClickOutside",
+  inheritAttrs: false,
+  props: {
+    disabled: { type: Boolean, default: false },
+    ignore: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: {
+    outside: (_event) => true
+  },
+  setup(props, { slots, emit }) {
+    const wrapperRef = vue.ref(null);
+    let detach = null;
+    vue.watchEffect((onCleanup) => {
+      detach?.();
+      detach = null;
+      if (props.disabled) return;
+      if (typeof document === "undefined") return;
+      const handler = (event) => {
+        const target = event.target;
+        if (!target) return;
+        const wrapper = wrapperRef.value;
+        if (wrapper) {
+          let node = target;
+          while (node) {
+            if (node === wrapper) return;
+            if (node.parentNode === wrapper) return;
+            node = node.parentNode;
+          }
+        }
+        for (const r of props.ignore) {
+          const el = r.value;
+          if (el && el.contains(target)) return;
+        }
+        emit("outside", event);
+      };
+      document.addEventListener("pointerdown", handler);
+      detach = () => document.removeEventListener("pointerdown", handler);
+      onCleanup(() => detach?.());
+    });
+    vue.onBeforeUnmount(() => detach?.());
+    return () => vue.h(
+      "span",
+      {
+        ref: (el) => {
+          wrapperRef.value = el ?? null;
+        },
+        "data-iris-click-outside": "",
+        style: { display: "contents" }
+      },
+      slots.default?.()
+    );
+  }
+});
+var SORTABLE_ITEM_ATTR = "data-iris-sortable-item";
+var IrisSortable = vue.defineComponent({
+  name: "IrisSortable",
+  inheritAttrs: false,
+  props: {
+    /** The ordered items. Used to detect which item is at which position. */
+    items: {
+      type: Array,
+      required: true
+    },
+    /** Called when the user drops an item in a new position. */
+    onReorder: {
+      type: Function,
+      default: void 0
+    },
+    /** Optional item key getter. Defaults to `String(index)`. */
+    getKey: {
+      type: Function,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    reorder: (_next) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const containerRef = vue.ref(null);
+    const sortable = core.createSortable();
+    const activeKey = vue.ref(null);
+    const unsub = sortable.subscribe((state) => {
+      activeKey.value = state.activeId;
+    });
+    vue.onBeforeUnmount(unsub);
+    const indexOf = (key) => {
+      const container = containerRef.value;
+      if (!container) return -1;
+      return Array.from(
+        container.querySelectorAll(`[${SORTABLE_ITEM_ATTR}]`)
+      ).findIndex((el) => el.getAttribute(SORTABLE_ITEM_ATTR) === key);
+    };
+    const onPointerDown = (e) => {
+      if (props.disabled) return;
+      const target = e.target.closest(`[${SORTABLE_ITEM_ATTR}]`);
+      if (!target) return;
+      const container = containerRef.value;
+      if (!container) return;
+      const key = target.getAttribute(SORTABLE_ITEM_ATTR) ?? "";
+      const index = indexOf(key);
+      if (index < 0) return;
+      sortable.press(key, e.clientX, e.clientY);
+    };
+    const onPointerMove = (e) => {
+      if (!sortable.isPending() && sortable.getState().activeId === null) return;
+      const items = containerRef.value?.querySelectorAll(`[${SORTABLE_ITEM_ATTR}]`);
+      const rects = Array.from(items ?? []).map((el) => {
+        const rect = el.getBoundingClientRect();
+        return {
+          id: el.getAttribute(SORTABLE_ITEM_ATTR) ?? "",
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height
+        };
+      });
+      sortable.tryStart(e.clientX, e.clientY);
+      if (sortable.getState().activeId !== null) {
+        sortable.moveOver({ x: e.clientX, y: e.clientY }, rects);
+      }
+    };
+    const onPointerUp = () => {
+      const state = sortable.getState();
+      if (state.activeId === null) {
+        sortable.cancel();
+        return;
+      }
+      const result = sortable.end();
+      if (result.activeId && result.overId && result.activeId !== result.overId) {
+        const from = indexOf(result.activeId);
+        const to = indexOf(result.overId);
+        if (from >= 0 && to >= 0) {
+          const next = [...props.items];
+          const [moved] = next.splice(from, 1);
+          next.splice(to, 0, moved);
+          if (props.onReorder) {
+            props.onReorder(next);
+          }
+          emit("reorder", next);
+        }
+      }
+    };
+    const resolveKey = (item, index) => props.getKey ? props.getKey(item, index) : String(index);
+    return () => {
+      const children = [];
+      const defaultSlots = slots.default?.();
+      if (defaultSlots) {
+        const itemsArray = props.items;
+        defaultSlots.forEach((child, index) => {
+          const item = itemsArray[index];
+          const key = resolveKey(item, index);
+          const isDragging = key === activeKey.value;
+          children.push(
+            vue.h(
+              "div",
+              {
+                key,
+                [SORTABLE_ITEM_ATTR]: key,
+                "data-iris-sortable-dragging": isDragging ? "" : void 0,
+                style: {
+                  transition: isDragging ? "none" : "transform 150ms ease",
+                  opacity: isDragging ? 0.4 : 1,
+                  position: "relative",
+                  zIndex: isDragging ? 100 : void 0
+                }
+              },
+              [child]
+            )
+          );
+        });
+      }
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          ref: (el) => {
+            containerRef.value = el ?? null;
+          },
+          "data-iris-sortable": "",
+          "data-state": activeKey.value ? "dragging" : "idle",
+          class: props.class,
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "var(--iris-gap-sm, 4px)",
+            opacity: props.disabled ? 0.6 : 1,
+            userSelect: activeKey.value ? "none" : void 0,
+            ...props.style ?? {}
+          },
+          onPointerdown: onPointerDown,
+          onPointermove: onPointerMove,
+          onPointerup: onPointerUp,
+          onPointerleave: onPointerUp
+        },
+        children
+      );
+    };
+  }
+});
+var IrisLongPress = vue.defineComponent({
+  name: "IrisLongPress",
+  inheritAttrs: false,
+  props: {
+    /** Time the pointer must be held before `onLongPress` fires, in ms. */
+    holdDelay: {
+      type: Number,
+      default: 500
+    },
+    /** Called once when the hold reaches `holdDelay` without an intervening release. */
+    onLongPress: {
+      type: Function,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    longpress: () => true
+  },
+  setup(props, { slots, emit }) {
+    const ctrl = core.createLongPress({
+      holdDelay: props.holdDelay,
+      onLongPress: () => {
+        props.onLongPress?.();
+        emit("longpress");
+      }
+    });
+    const onPointerDown = () => {
+      if (props.disabled) return;
+      ctrl.press();
+    };
+    const onPointerUp = () => {
+      ctrl.release();
+    };
+    const onPointerLeave = () => {
+      ctrl.cancel();
+    };
+    vue.onBeforeUnmount(() => ctrl.cancel());
+    return () => vue.h(
+      "span",
+      {
+        "data-iris-long-press": "",
+        style: { display: "contents" },
+        onPointerdown: onPointerDown,
+        onPointerup: onPointerUp,
+        onPointerleave: onPointerLeave
+      },
+      slots.default?.()
+    );
+  }
+});
+
+exports.IrisClickOutside = IrisClickOutside;
+exports.IrisHotkey = IrisHotkey;
+exports.IrisLongPress = IrisLongPress;
+exports.IrisMovable = IrisMovable;
+exports.IrisResizable = IrisResizable;
+exports.IrisSortable = IrisSortable;
+exports.SORTABLE_ITEM_ATTR = SORTABLE_ITEM_ATTR;
+//# sourceMappingURL=behaviors.cjs.map
+//# sourceMappingURL=behaviors.cjs.map