@witchcraft/ui 0.0.1

package/dist/runtime/directives/vDetectFlex.js

@@ -0,0 +1,109 @@
+import { castType } from "@alanscodelog/utils/castType.js";
+import { last } from "@alanscodelog/utils/last.js";
+import { throttle } from "@alanscodelog/utils/throttle.js";
+import { unreachable } from "@alanscodelog/utils/unreachable.js";
+import { globalResizeObserver } from "../globalResizeObserver.js";
+const observer = globalResizeObserver;
+const callbacks = {};
+const elMap = /* @__PURE__ */ new WeakMap();
+function getOrCreateCallback(throttleTime) {
+  if (callbacks[throttleTime]) {
+    callbacks[throttleTime].count++;
+  } else {
+    callbacks[throttleTime] = { count: 1, callback: throttle(callback, throttleTime) };
+  }
+  return callbacks[throttleTime].callback;
+}
+function removeCallback(throttleTime) {
+  if (callbacks[throttleTime]) {
+    callbacks[throttleTime].count--;
+    if (callbacks[throttleTime].count === 0) delete callbacks[throttleTime];
+  }
+}
+function callback(_rect, el) {
+  const _ = elMap.get(el);
+  if (!_) {
+    unreachable();
+  }
+  const pos = _.vertical ? "x" : "y";
+  const dimension = _.vertical ? "width" : "height";
+  castType(el);
+  const filteredChildren = Array.from(el.children).filter((child) => _.ignoreSelector && !child.matches(_.ignoreSelector));
+  const firstChild = filteredChildren[0];
+  const lastChild = last(filteredChildren);
+  if (firstChild === void 0 || firstChild === lastChild) {
+    console.warn("detect-flex directive detected there are less than two child elements.");
+    console.warn(el);
+    el.classList.remove("wrapped");
+    return;
+  }
+  const firstRect = firstChild.getBoundingClientRect();
+  const lastRect = lastChild.getBoundingClientRect();
+  if (Math.round(10 * (firstRect[pos] + firstRect[dimension] - lastRect[pos])) * 10 <= 0) {
+    el.classList.add("wrapped");
+  } else {
+    el.classList.remove("wrapped");
+  }
+}
+export const vDetectFlex = {
+  mounted(el, { value: { condition = true, vertical = false, throttleTime = 50, ignoreSelector = ".detect-flex-ignore" } = {} }) {
+    const _ = {
+      vertical,
+      lastCondition: condition,
+      lastThrottleTime: throttleTime,
+      ignoreSelector
+    };
+    elMap.set(el, _);
+    if (condition) {
+      _.callback = getOrCreateCallback(throttleTime);
+      observer.observe(el, _.callback);
+    }
+  },
+  updated(el, { value: { condition = true, vertical = false, throttleTime = 50, ignoreSelector = ".detect-flex-ignore" } = {} }) {
+    const _ = elMap.get(el);
+    if (!_) {
+      unreachable();
+    }
+    _.vertical = vertical;
+    _.ignoreSelector = ignoreSelector;
+    if (throttleTime !== _.lastThrottleTime) {
+      if (condition && _.lastCondition) {
+        if (!_.callback) unreachable();
+        observer.unobserve(el, _.callback);
+        removeCallback(_.lastThrottleTime);
+        _.callback = getOrCreateCallback(throttleTime);
+        observer.observe(el, _.callback);
+      }
+      _.lastThrottleTime = throttleTime;
+    }
+    if (condition !== _.lastCondition) {
+      _.lastCondition = condition;
+      if (condition) {
+        _.callback = getOrCreateCallback(throttleTime);
+        observer.observe(el, _.callback);
+      } else {
+        if (!_.callback) unreachable();
+        observer.unobserve(el, _.callback);
+        removeCallback(throttleTime);
+        _.callback = void 0;
+      }
+    }
+  },
+  unmounted(el, { value: { vertical = false, throttleTime = 50, ignoreSelector = ".detect-flex-ignore" } = {} }) {
+    const _ = elMap.get(el);
+    if (!_) {
+      unreachable();
+    }
+    _.vertical = vertical;
+    _.ignoreSelector = ignoreSelector;
+    _.lastThrottleTime = throttleTime;
+    if (_.lastCondition) {
+      if (!_.callback) unreachable();
+      observer.unobserve(el, _.callback);
+      _.callback = void 0;
+    }
+  },
+  getSSRProps() {
+    return {};
+  }
+};

package/dist/runtime/directives/vExtractRootEl.d.ts

@@ -0,0 +1,22 @@
+import type { Directive } from "vue";
+/**
+ * Vue 3 no longer allows extracting the root element from a component.
+ *
+ * This allows us to extract it via a callback.
+ *
+ * Note the callback will be called on mount/unmount to keep the value up to date and make it null if the element disappears.
+ *
+ * One can create a ref:
+ * ```ts
+ * import { vExtractRootEl } from "@witchcraft/ui/directives/vExtractRootEl.js"
+ * const el = ref<HTMLElement|null>(null)
+ *
+ * ```
+ * Then in the template
+ * ```vue
+ * <SomeComponent v-extract-root-el="_ => el = _" />
+ * ```
+ *
+ * Currently only tested with single root elements.
+ */
+export declare const vExtractRootEl: Directive;

package/dist/runtime/directives/vExtractRootEl.js

@@ -0,0 +1,13 @@
+export const vExtractRootEl = {
+  // @ts-expect-error for registering properly without doing complicated case conversion
+  directiveName: "extract-root-el",
+  mounted(el, { value: callback }) {
+    callback(el);
+  },
+  unmounted(_el, { value: callback }) {
+    callback(null);
+  },
+  getSSRProps() {
+    return {};
+  }
+};

package/dist/runtime/directives/vResizableCols.d.ts

@@ -0,0 +1,60 @@
+import type { Directive } from "vue";
+/**
+ * Allow a table like element to be resized along it's columns.
+ *
+ * ```vue
+ * <template>
+ * 	<div v-resizable-cols="opts">
+ * 			<!---->
+ * 	</div>
+ * </template>
+ * <script setup>
+ * import {vResizeCols} from "@witchcraft/ui/directives/vResizableCols.js"
+ * </script>
+ * ```
+ *
+ * This assumes the following:
+ * - The `.grip` element the directive adds for each column is styled with at least some width.
+ * - The containing element must not have any borders. Use a wrapper if you need them.
+ *
+ * This will set the following styles on the elements:
+ *
+ * ```css
+ * el {
+ * 	min-width: [opts.minWidth * col #] // only if needed, see margin and fitWidth options
+ * 	min-width: min-content; // if fitWidth: false
+ * 	.grip {
+ * 		position: absolute;
+ * 		top: 0;
+ * 		bottom: 0;
+ * 		cursor: col-resize;
+ * 	}
+ * 	[cells] {
+ * 		none
+ * 	}
+ * }
+ * ```
+ * Note that they aren't removed if the directive is disabled.
+ *
+ * It does NOT set the widths on the cells. It used to, but for maximum flexibility a ref with an array should be passed to be populated by the widths calculated.
+ *
+ * Additionally the following are suggested:
+ * - If fitWidth is true, `overflow: hidden` should be set on the column elements to avoid glitches when dragging the last column near the right edge.
+ * - The root element should have `overflow-x:scroll` even if `fitWidth` is true, since there is some minimum space (margin+grip * col) the element will always occupy.
+ *
+ * The directive also adds a class after the initial setup `resizable-cols-setup`. This is useful to set initial column widths, for example, using flexboxes, then removing those styles when the element is setup. You can also check if the passed widths array is still of 0 length.
+ *
+ * ```css
+ * el:not(.resizable-cols-setup) {
+ * 	initial styles
+ * }
+ * ```
+ *
+ * You can prevent columns from being resized by adding the class `no-resize`. When a column cannot be moved, the `resizable-cols-error` class is added to the element.
+ *
+ * Also note the `.grip` element added is added to the root element. This is so you can have `overflow:hidden` on cells if you want without the grip getting hidden. But this does mean that if you're styling the cells using `:last-child`, to, for example, target table rows, won't work, you'll need `:last-of-type`.
+ *
+ * # Options
+ * See {@link ResizableOptions}
+ */
+export declare const vResizableCols: Directive;

package/dist/runtime/directives/vResizableCols.js

@@ -0,0 +1,252 @@
+import { castType } from "@alanscodelog/utils/castType.js";
+import { override } from "@alanscodelog/utils/override.js";
+import { throttle } from "@alanscodelog/utils/throttle.js";
+import { unreachable } from "@alanscodelog/utils/unreachable.js";
+import { globalResizeObserver } from "../globalResizeObserver.js";
+const observer = globalResizeObserver;
+const elMap = /* @__PURE__ */ new WeakMap();
+const defaultOpts = {
+  fitWidth: true,
+  margin: "dynamic",
+  enabled: true
+};
+const callback = (_rect, el) => {
+  setColWidths(el);
+  positionGrips(el);
+};
+const throttledCallback = throttle(callback);
+export const vResizableCols = {
+  mounted(el, { value: opts = {} }) {
+    const options = override({ ...defaultOpts }, opts);
+    if (options.enabled) {
+      setupColumns(el, options);
+      observer.observe(el, throttledCallback);
+    }
+  },
+  updated(el, { value: opts = {} }) {
+    const options = override({ ...defaultOpts }, opts);
+    const info = el && getElInfo(el);
+    const hasGrips = el && elMap.get(el).grips;
+    const colsNotEqual = info && info.colCount !== options.colCount;
+    if (hasGrips && !options.enabled || colsNotEqual) {
+      teardownColumns(el);
+      observer.unobserve(el, throttledCallback);
+    }
+    if (!hasGrips && options.enabled || colsNotEqual) {
+      setupColumns(el, options);
+      observer.observe(el, throttledCallback);
+    }
+  },
+  unmounted(el) {
+    const hasGrips = elMap.has(el) && elMap.get(el).grips;
+    if (hasGrips) {
+      teardownColumns(el);
+      globalResizeObserver.unobserve(el, throttledCallback);
+    }
+  },
+  getSSRProps() {
+    return {};
+  }
+};
+const setWidth = (col, amountInPx, el) => {
+  const $el = getElInfo(el);
+  const width = Math.max($el.margin, amountInPx);
+  const index = getColEls(el).findIndex((_) => col === _);
+  if ($el.fitWidth) {
+    $el.widths.value[index] = `${width / getBox(el).width * 100}%`;
+  } else {
+    $el.widths.value[index] = `${width}px`;
+  }
+};
+const getBox = (el) => {
+  const rect = el.getBoundingClientRect();
+  return { x: Math.round(rect.x), width: Math.round(rect.width) };
+};
+const getCols = (el) => {
+  const $el = getElInfo(el);
+  if (!$el.target) unreachable();
+  let col = getColEls(el)[$el.grips.get($el.target)];
+  if (!col) unreachable();
+  while (col?.classList.contains("no-resize")) {
+    col = col?.previousElementSibling ?? null;
+  }
+  let colNext = col?.nextElementSibling ?? null;
+  if ($el.fitWidth) {
+    while (colNext?.classList.contains("no-resize")) {
+      colNext = colNext?.nextElementSibling ?? null;
+    }
+  }
+  return { col, colNext };
+};
+const createPointerDownHandler = (el) => (e) => {
+  const $el = getElInfo(el);
+  if (!$el.isDragging) {
+    castType(e.target);
+    $el.target = e.target;
+    $el.isDragging = true;
+    e.preventDefault();
+    document.addEventListener("pointerup", $el.pointerUpHandler);
+    const { col, colNext } = getCols(el);
+    if (col === null || colNext === null) {
+      el.classList.add("resizable-cols-error");
+    } else {
+      document.addEventListener("pointermove", $el.pointerMoveHandler);
+      const box = getBox(col);
+      if (box) {
+        $el.offset = e.pageX - (box.x + box.width);
+      }
+    }
+  }
+};
+const createPointerMoveHandler = (el) => (e) => {
+  const $el = getElInfo(el);
+  if ($el.isDragging) {
+    e.preventDefault();
+    const { col, colNext } = getCols(el);
+    if (col !== null) {
+      const leftBox = getBox(col);
+      const oldWidth = leftBox.width;
+      const leftBound = leftBox.x;
+      const rightBox = colNext ? getBox(colNext) : getBox(el);
+      const rightBound = rightBox.x + rightBox.width;
+      const margin = $el.margin;
+      const pos = e.pageX - $el.offset;
+      if ($el.fitWidth) {
+        if (pos > leftBound + margin && pos < rightBound - margin) {
+          const newWidth = pos - leftBound;
+          const diff = oldWidth - newWidth;
+          if (rightBox.width + diff < margin) {
+            el.classList.add("resizable-cols-error");
+            return;
+          }
+          setWidth(col, newWidth, el);
+          setWidth(colNext, rightBox.width + diff, el);
+        }
+      } else {
+        if (pos > leftBound + margin) {
+          const newWidth = pos - leftBound;
+          setWidth(col, newWidth, el);
+        }
+      }
+      positionGrips(el);
+    }
+  }
+};
+const createPointerUpHandler = (el) => (e) => {
+  const $el = getElInfo(el);
+  if ($el.isDragging) {
+    e.preventDefault();
+    $el.isDragging = false;
+    el.classList.remove("resizable-cols-error");
+    $el.offset = 0;
+    delete $el.target;
+    document.removeEventListener("pointermove", $el.pointerMoveHandler);
+    document.removeEventListener("pointerup", $el.pointerUpHandler);
+    document.removeEventListener("pointerleave", $el.pointerLeaveHandler);
+  }
+};
+const createGrip = () => {
+  const grip = document.createElement("div");
+  grip.style.position = "absolute";
+  grip.style.cursor = "col-resize";
+  grip.style.top = "0";
+  grip.style.bottom = "0";
+  grip.classList.add("grip");
+  return grip;
+};
+const removeGrips = (el) => {
+  const grips = Array.from(el.querySelectorAll(".grip") ?? []);
+  for (const grip of grips) {
+    el.removeChild(grip);
+  }
+};
+const getTestGripSize = (el) => {
+  const testGrip = createGrip();
+  el.appendChild(testGrip);
+  const dynamicMinWidth = getBox(testGrip).width * 3;
+  el.removeChild(testGrip);
+  return dynamicMinWidth;
+};
+const getElInfo = (el) => {
+  const $el = elMap.get(el);
+  if (!$el) unreachable("El went missing.");
+  return $el;
+};
+const getColEls = (el) => {
+  const $el = elMap.get(el);
+  if (!$el) unreachable("El went missing.");
+  return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > td"}`)];
+};
+const setupColumns = (el, opts) => {
+  const gripWidth = getTestGripSize(el);
+  const $el = {
+    grips: /* @__PURE__ */ new Map(),
+    isDragging: false,
+    pointerDownHandler: createPointerDownHandler(el),
+    pointerMoveHandler: createPointerMoveHandler(el),
+    pointerUpHandler: createPointerUpHandler(el),
+    pointerLeaveHandler: createPointerUpHandler(el),
+    fitWidth: opts.fitWidth,
+    margin: opts.margin === "dynamic" ? gripWidth : opts.margin,
+    colCount: opts.colCount,
+    widths: opts.widths,
+    selector: opts.selector
+  };
+  elMap.set(el, $el);
+  const els = getColEls(el);
+  const headers = els.slice(0, opts.colCount);
+  setColWidths(el, headers);
+  el.style.width = $el.fitWidth ? "" : "min-content";
+  const len = opts.colCount;
+  for (let i = 0; i < len; i++) {
+    if (opts.fitWidth && i === len - 1) continue;
+    const grip = createGrip();
+    grip.addEventListener("pointerdown", $el.pointerDownHandler);
+    el.appendChild(grip);
+    $el.grips.set(grip, i);
+  }
+  positionGrips(el);
+  el.classList.add("resizable-cols-setup");
+};
+const positionGrips = (el) => {
+  let xPos = 0;
+  const $el = getElInfo(el);
+  for (const grip of $el.grips.keys()) {
+    const col = $el.grips.get(grip);
+    const colBox = getBox(getColEls(el)[col]);
+    const gripBox = getBox(grip);
+    grip.style.left = `${xPos + colBox.width - gripBox.width / 2}px`;
+    xPos += colBox.width;
+  }
+};
+const setColWidths = (el, children) => {
+  const $el = getElInfo(el);
+  const header = children ?? getColEls(el).slice(0, $el.colCount);
+  const len = $el.colCount;
+  let width = 0;
+  const minTotalWidth = len * $el.margin;
+  for (let i = 0; i < len; i++) {
+    const col = header[i];
+    castType(col);
+    const colBox = getBox(col);
+    setWidth(col, colBox.width, el);
+    width += getBox(col).width;
+  }
+  if (width < minTotalWidth) {
+    el.style.minWidth = `${minTotalWidth}px`;
+  } else {
+    el.style.minWidth = "";
+  }
+};
+const teardownColumns = (el) => {
+  const $el = getElInfo(el);
+  el.removeEventListener("pointerdown", $el.pointerDownHandler);
+  document.removeEventListener("pointermove", $el.pointerMoveHandler);
+  document.removeEventListener("pointerup", $el.pointerUpHandler);
+  for (const key of Object.keys($el)) {
+    delete $el[key];
+  }
+  elMap.delete(el);
+  el.classList.remove("resizable-cols-setup");
+  removeGrips(el);
+};

package/dist/runtime/directives/vResizeObserver.d.ts

@@ -0,0 +1,2 @@
+import type { Directive } from "vue";
+export declare const vResizeObserver: Directive;

package/dist/runtime/directives/vResizeObserver.js

@@ -0,0 +1,34 @@
+import { globalResizeObserver } from "../globalResizeObserver.js";
+const observer = globalResizeObserver;
+const lastCondition = Symbol("lastCondition");
+const checkCallback = (cb) => {
+  if (cb === void 0) {
+    throw new Error("No callback function passed to resize observer directive.");
+  }
+};
+export const vResizeObserver = {
+  mounted(el, { value: { condition = true, callback } }) {
+    if (condition) {
+      observer.observe(el, callback);
+    }
+    checkCallback(callback);
+  },
+  updated(el, { value: { condition = true, callback } }) {
+    if (condition !== el[lastCondition]) {
+      el[lastCondition] = condition;
+      if (condition) {
+        observer.observe(el, callback);
+      } else {
+        observer.unobserve(el, callback);
+      }
+    }
+    checkCallback(callback);
+  },
+  unmounted(el, { value: { callback } }) {
+    observer.unobserve(el, callback);
+    delete el[lastCondition];
+  },
+  getSSRProps() {
+    return {};
+  }
+};

package/dist/runtime/globalResizeObserver.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This is not inside helpers to avoid having it get dragged in by an import of /helpers.
+ */
+import { ResizeObserverWrapper } from "./helpers/resizeObserverWrapper.js.js";
+export declare const globalResizeObserver: ResizeObserverWrapper;

package/dist/runtime/globalResizeObserver.js

@@ -0,0 +1,5 @@
+import { ResizeObserverWrapper } from "./helpers/resizeObserverWrapper.js";
+if (typeof ResizeObserver === "undefined") {
+  console.warn("You are using a directive that uses a ResizeObserver or are importing something that uses this resize observer in a context (e.g. the server) where ResizeObserver does not exist.");
+}
+export const globalResizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserverWrapper() : {};

package/dist/runtime/helpers/NotificationHandler.d.ts

@@ -0,0 +1,48 @@
+import type { AnyFunction, MakeRequired } from "@alanscodelog/utils";
+export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>, TEntry extends NotificationEntry<TRawEntry> = NotificationEntry<TRawEntry>> {
+    timeout: number;
+    debug: boolean;
+    private id;
+    readonly queue: TEntry[];
+    readonly history: TEntry[];
+    maxHistory: number;
+    listeners: NotificationListener<TEntry>[];
+    stringifier?: NotificationStringifier<TEntry>;
+    constructor({ timeout, stringifier, maxHistory, }?: {
+        timeout?: NotificationHandler<TRawEntry>["timeout"];
+        stringifier?: NotificationHandler<TRawEntry>["stringifier"];
+        maxHistory?: NotificationHandler<TRawEntry>["maxHistory"];
+    });
+    private _checkEntry;
+    protected _createEntry<TNotifyEntry extends RawNotificationEntry<any, any>>(rawEntry: TNotifyEntry): TEntry;
+    notify<TNotifyEntry extends RawNotificationEntry<any, any>>(rawEntry: TNotifyEntry): NotificationPromise<TNotifyEntry["options"][number] extends string ? TNotifyEntry["options"][number] : "Ok" | "Cancel">;
+    static resolveToDefault(notification: NotificationEntry): void;
+    static dismiss(notification: NotificationEntry): void;
+    stringify(notification: NotificationEntry): string;
+    clear(): void;
+    addNotificationListener(cb: NotificationListener<TEntry>): void;
+    removeNotificationListener(cb: NotificationListener<TEntry>): void;
+}
+export type NotificationPromise<TOption extends string = string> = Promise<TOption>;
+export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], TCancellable extends boolean | TOptions[number] = "Cancel"> = {
+    message: string;
+    title?: string;
+    code?: string;
+    options?: TOptions;
+    requiresAction?: boolean;
+    cancellable?: TCancellable;
+    default?: TOptions[number];
+    dangerous?: TOptions[number][];
+    timeout?: number | boolean;
+    icon?: string;
+};
+export type NotificationEntry<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>> = Omit<MakeRequired<TRawEntry, "options" | "requiresAction" | "default" | "dangerous">, "cancellable"> & {
+    promise: NotificationPromise;
+    resolve: AnyFunction;
+    cancellable?: string;
+    timeout?: number;
+    resolution?: string;
+    id: number;
+};
+export type NotificationListener<TEntry extends NotificationEntry<any>> = (notification: TEntry, type: "added" | "resolved" | "deleted") => void;
+export type NotificationStringifier<T extends NotificationEntry<any>> = (notification: T) => string;