@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/composables/useSuggestions.js

@@ -1,33 +1,42 @@
 import { isBlank } from "@alanscodelog/utils/isBlank.js";
 import { isObject } from "@alanscodelog/utils/isObject.js";
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js";
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js";
 import { computed, ref, toRaw, watch } from "vue";
-export function useSuggestions($inputValue, $modelValue, emit, opts, debug = false) {
+export function useSuggestions($inputValue, $modelValue, $open, emit, opts, debug = false) {
   if (typeof opts.suggestions?.[0] === "object" && !opts.suggestionLabel && !opts.suggestionsFilter) {
     throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.");
   }
-  const isOpen = ref(false);
   const activeSuggestion = ref(-1);
-  watch(isOpen, (val) => {
-    emit("update:isOpen", val);
-  });
   watch(activeSuggestion, (val) => {
     emit("update:activeSuggestion", val);
   });
-  const suggestionKey = (item) => {
+  if (opts.suggestions) {
+    for (const suggestion of opts.suggestions) {
+      suggestionLabelGuard(suggestion, opts.suggestionLabel);
+    }
+  }
+  const getSuggestionLabel = (item) => {
+    suggestionLabelGuard(item, opts.suggestionLabel);
     if (isObject(item)) {
-      if (opts.suggestionLabel) {
-        return opts.suggestionLabel(item);
-      }
-      throw new Error("`suggestionLabel` must be passed if suggestions are objects.");
+      return opts.suggestionLabel(item);
     }
     return item;
   };
-  const getSuggestionLabel = (item) => opts.suggestionLabel?.(item) ?? suggestionKey(item) ?? "";
-  const defaultSuggestionsFilter = (input, items) => input === "" ? [...items] : items.filter((item) => getSuggestionLabel(item).toLowerCase().includes(input.toLowerCase()));
+  const defaultSuggestionsFilter = (input, items) => input === "" ? [...items] : items.filter((item) => {
+    if (Array.isArray($modelValue.value)) {
+      if ($modelValue.value.includes(getSuggestionLabel(item))) return true;
+    }
+    return getSuggestionLabel(item).toLowerCase().includes(input.toLowerCase());
+  });
   const suggestionsFilter = computed(() => opts.suggestionsFilter ?? defaultSuggestionsFilter);
   const suggestionsList = computed(() => {
     if (opts.suggestions) {
-      const res = suggestionsFilter.value($inputValue.value, opts.suggestions);
+      const suggestions = [...opts.suggestions];
+      if (Array.isArray($modelValue.value) && !opts.showSelectedValues) {
+        pushIfNotIn(suggestions, $modelValue.value);
+      }
+      const res = suggestionsFilter.value($inputValue.value, suggestions);
       return res;
     }
     return void 0;
@@ -43,19 +52,30 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     if (opts.suggestions) {
       const res = suggestionAvailable.value ? suggestionsList.value : opts.suggestions;
       if (opts.restrictToSuggestions && !isValidSuggestion.value) return res;
-      if (opts.preventDuplicateValues && opts.values) {
-        return res.filter((suggestion) => !opts.values.includes(suggestionKey(suggestion)));
-      }
       return res;
     }
     return void 0;
   });
-  const closeSuggestions = () => {
+  function setValue(val) {
+    if (Array.isArray($modelValue.value)) {
+      if ($modelValue.value.includes(val)) {
+        removeIfIn($modelValue.value, val);
+        return true;
+      } else {
+        pushIfNotIn($modelValue.value, [val]);
+      }
+    } else {
+      $modelValue.value = val;
+    }
+    return false;
+  }
+  function closeSuggestions() {
+    if (!opts.canClose) return;
     if (debug) console.log("closeSuggestions");
-    isOpen.value = false;
+    $open.value = false;
     activeSuggestion.value = -1;
-  };
-  const openSuggestions = () => {
+  }
+  function openSuggestions() {
     if (debug) console.log("openSuggestions", { openable: openable.value });
     if (!openable.value) return;
     if (activeSuggestion.value === -1) {
@@ -65,20 +85,22 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
         activeSuggestion.value = 0;
       }
     }
-    isOpen.value = true;
-  };
-  function enterSuggestion(num) {
+    $open.value = true;
+  }
+  function enterSuggestion(num, doClose = true) {
     if (num < -1 || num > (filteredSuggestions.value?.length ?? 0)) return;
     if (debug) console.log("enterSuggestion", num);
     if (filteredSuggestions.value === void 0) return;
     const suggestion = filteredSuggestions.value[num];
-    const val = suggestionKey(suggestion);
-    $modelValue.value = val;
-    $inputValue.value = getSuggestionLabel(suggestion);
-    closeSuggestions();
-    emit("submit", val, toRaw(suggestion));
+    const val = getSuggestionLabel(suggestion);
+    const wasRemoved = setValue(val);
+    $inputValue.value = Array.isArray($modelValue.value) ? "" : getSuggestionLabel(suggestion);
+    if (doClose) {
+      closeSuggestions();
+    }
+    emit("submit", val, toRaw(suggestion), wasRemoved);
   }
-  const enterSelected = () => {
+  function enterSelected(doClose = true) {
     if (activeSuggestion.value === -1) {
       if (!opts.restrictToSuggestions) {
         if (debug) console.log("enterSelected, unrestricted, emitting submit");
@@ -89,9 +111,9 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
       return;
     }
     if (debug) console.log("enterSelected");
-    enterSuggestion(activeSuggestion.value);
-  };
-  const selectSuggestion = (num) => {
+    enterSuggestion(activeSuggestion.value, doClose);
+  }
+  function selectSuggestion(num) {
     if (debug) console.log("selectSuggestion", num);
     if (num >= -1) {
       activeSuggestion.value = num;
@@ -99,37 +121,41 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     if (num === Infinity && (filteredSuggestions.value?.length ?? 0) > 0) {
       activeSuggestion.value = filteredSuggestions.value.length - 1;
     }
-  };
-  const toggleSuggestions = () => {
-    isOpen.value ? closeSuggestions() : openSuggestions();
-  };
-  const prevSuggestion = () => {
+  }
+  function toggleSuggestions() {
+    $open.value ? closeSuggestions() : openSuggestions();
+  }
+  function prevSuggestion() {
     if (!filteredSuggestions.value) return;
     if (activeSuggestion.value > 0) {
       activeSuggestion.value--;
     } else if (filteredSuggestions.value) {
       activeSuggestion.value = filteredSuggestions.value.length - 1;
     }
-  };
-  const nextSuggestion = () => {
+  }
+  function nextSuggestion() {
     if (!filteredSuggestions.value) return;
     if (activeSuggestion.value >= filteredSuggestions.value.length - 1) {
       activeSuggestion.value = 0;
     } else {
       activeSuggestion.value++;
     }
-  };
-  const firstSuggestion = () => {
+  }
+  function firstSuggestion() {
     selectSuggestion(0);
-  };
-  const lastSuggestion = () => {
+  }
+  function lastSuggestion() {
     selectSuggestion(Infinity);
-  };
-  const cancel = () => {
+  }
+  function cancel() {
+    if (Array.isArray($modelValue.value)) {
+      $inputValue.value = "";
+      return;
+    }
     if (debug) console.log("cancel");
     $inputValue.value = getSuggestionLabel($modelValue.value);
     closeSuggestions();
-  };
+  }
   watch(() => opts.canOpen, (val) => {
     if (!val) {
       if (debug) console.log("canOpen changed to false, closing suggestions");
@@ -149,10 +175,14 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     }
   });
   watch($modelValue, () => {
-    $inputValue.value = getSuggestionLabel($modelValue.value);
+    if (Array.isArray($modelValue.value)) {
+      $inputValue.value = "";
+    } else {
+      $inputValue.value = getSuggestionLabel($modelValue.value);
+    }
     if (debug) console.log("modelValue changed");
   });
-  const defaultSuggestionSelector = (suggestions, input) => {
+  function defaultSuggestionSelector(suggestions, input) {
     if (input.length === 0) return 0;
     let longestMatch;
     let ii = -1;
@@ -168,17 +198,17 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
       }
     }
     return ii;
-  };
+  }
   watch($inputValue, () => {
     if (debug) console.log("input changed:", $inputValue.value, "modelValue:", $modelValue.value);
-    if (getSuggestionLabel($modelValue.value) === $inputValue.value) return;
+    if (!Array.isArray($modelValue.value) && getSuggestionLabel($modelValue.value) === $inputValue.value) return;
     if (suggestionAvailable.value) {
       if (debug) console.log("input changed, suggestion available, opening suggestions");
       openSuggestions();
     }
-    if (!opts.restrictToSuggestions) {
+    if (!opts.restrictToSuggestions && !Array.isArray($modelValue.value)) {
       if (debug) console.log("input changed, unrestricted, setting modelValue");
-      $modelValue.value = $inputValue.value;
+      setValue($inputValue.value);
     }
     if (exactlyMatchingSuggestion.value && suggestionsList.value) {
       if (debug) console.log("input changed, exactly matching, setting activeSuggestion");
@@ -200,11 +230,11 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     hasValidSuggestion: isValidSuggestion,
     openable,
     getLabel: getSuggestionLabel,
-    isOpen,
+    $open,
     open: openSuggestions,
     close: closeSuggestions,
     enterSelected,
-    enterSuggestion,
+    enterIndex: enterSuggestion,
     toggle: toggleSuggestions,
     cancel,
     select: selectSuggestion,
@@ -214,13 +244,20 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     last: lastSuggestion
   };
 }
-export function useSuggestionsInputAria(id, isOpen, activeSuggestion, suggestions) {
+export function useSuggestionsInputAria(id, $open, activeSuggestion, suggestions) {
   const ariaInputProps = computed(() => ({
     "aria-autocomplete": suggestions !== void 0 ? "both" : void 0,
     "aria-controls": suggestions !== void 0 ? `suggestions-${id.value}` : void 0,
     role: suggestions ? "combobox" : void 0,
-    "aria-expanded": suggestions !== void 0 ? isOpen.value : void 0,
-    "aria-activedescendant": isOpen.value ? `suggestion-${id.value}-${activeSuggestion.value}` : void 0
+    "aria-expanded": suggestions !== void 0 ? $open.value : void 0,
+    "aria-activedescendant": $open.value ? `suggestion-${id.value}-${activeSuggestion.value}` : void 0
   }));
   return ariaInputProps;
 }
+export function suggestionLabelGuard(item, suggestionLabeler) {
+  if (isObject(item)) {
+    if (!suggestionLabeler) {
+      throw new Error("`suggestionLabel` must be passed if suggestions are objects.");
+    }
+  }
+}

package/dist/runtime/directives/vResizableCols.js

@@ -48,7 +48,7 @@ export const vResizableCols = {
     return {};
   }
 };
-const setWidth = (col, amountInPx, el) => {
+function setWidth(col, amountInPx, el) {
   const $el = getElInfo(el);
   const width = Math.max($el.margin, amountInPx);
   const index = getColEls(el).findIndex((_) => col === _);
@@ -57,12 +57,12 @@ const setWidth = (col, amountInPx, el) => {
   } else {
     $el.widths.value[index] = `${width}px`;
   }
-};
-const getBox = (el) => {
+}
+function getBox(el) {
   const rect = el.getBoundingClientRect();
   return { x: Math.round(rect.x), width: Math.round(rect.width) };
-};
-const getCols = (el) => {
+}
+function getCols(el) {
   const $el = getElInfo(el);
   if (!$el.target) unreachable();
   let col = getColEls(el)[$el.grips.get($el.target)];
@@ -77,75 +77,81 @@ const getCols = (el) => {
     }
   }
   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);
+}
+function createPointerDownHandler(el) {
+  return (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;
+  };
+}
+function createPointerMoveHandler(el) {
+  return (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);
           }
-          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);
       }
-      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 = () => {
+  };
+}
+function createPointerUpHandler(el) {
+  return (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);
+    }
+  };
+}
+function createGrip() {
   const grip = document.createElement("div");
   grip.style.position = "absolute";
   grip.style.cursor = "col-resize";
@@ -153,31 +159,31 @@ const createGrip = () => {
   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) => {
+function getTestGripSize(el) {
   const testGrip = createGrip();
   el.appendChild(testGrip);
   const dynamicMinWidth = getBox(testGrip).width * 3;
   el.removeChild(testGrip);
   return dynamicMinWidth;
-};
-const getElInfo = (el) => {
+}
+function getElInfo(el) {
   const $el = elMap.get(el);
   if (!$el) unreachable("El went missing.");
   return $el;
-};
-const getColEls = (el) => {
+}
+function 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) => {
+}
+function setupColumns(el, opts) {
   const gripWidth = getTestGripSize(el);
   const $el = {
     grips: /* @__PURE__ */ new Map(),
@@ -207,19 +213,21 @@ const setupColumns = (el, opts) => {
   }
   positionGrips(el);
   el.classList.add("resizable-cols-setup");
-};
-const positionGrips = (el) => {
+}
+function 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 colEls = getColEls(el)[col];
+    if (!colEls) unreachable();
+    const colBox = getBox(colEls);
     const gripBox = getBox(grip);
     grip.style.left = `${xPos + colBox.width - gripBox.width / 2}px`;
     xPos += colBox.width;
   }
-};
-const setColWidths = (el, children) => {
+}
+function setColWidths(el, children) {
   const $el = getElInfo(el);
   const header = children ?? getColEls(el).slice(0, $el.colCount);
   const len = $el.colCount;
@@ -237,8 +245,8 @@ const setColWidths = (el, children) => {
   } else {
     el.style.minWidth = "";
   }
-};
-const teardownColumns = (el) => {
+}
+function teardownColumns(el) {
   const $el = getElInfo(el);
   el.removeEventListener("pointerdown", $el.pointerDownHandler);
   document.removeEventListener("pointermove", $el.pointerMoveHandler);
@@ -249,4 +257,4 @@ const teardownColumns = (el) => {
   elMap.delete(el);
   el.classList.remove("resizable-cols-setup");
   removeGrips(el);
-};
+}

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

@@ -28,11 +28,16 @@ export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], T
     message: string;
     title?: string;
     code?: string;
+    /** @default ["Ok", "Cancel"] */
     options?: TOptions;
+    /** @default false */
     requiresAction?: boolean;
     cancellable?: TCancellable;
+    /** @default "Ok" */
     default?: TOptions[number];
+    /** @default [] */
     dangerous?: TOptions[number][];
+    /** @default false if cancellable, otherwise the default timeout */
     timeout?: number | boolean;
     icon?: string;
 };

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

@@ -1,7 +1,9 @@
-export { addValue } from "./addValue.js.js";
 export { base64ToImg } from "./base64ToImg.js.js";
 export { copy } from "./copy.js.js";
+export { createNoonUtcDate } from "./createNoonUtcDate.js.js";
 export { createRecorderHandler } from "./storybook.js.js";
+export { defaultTranslationFunction } from "./defaultTranslationFunction.js.js";
+export { getTimeZoneList } from "./getTimeZoneList.js.js";
 export { hasModifiers } from "./hasModifiers.js.js";
 export { NotificationHandler } from "./NotificationHandler.js.js";
 export { readFile } from "./readFile.js.js";

package/dist/runtime/helpers/index.js

@@ -1,7 +1,9 @@
-export { addValue } from "./addValue.js";
 export { base64ToImg } from "./base64ToImg.js";
 export { copy } from "./copy.js";
+export { createNoonUtcDate } from "./createNoonUtcDate.js";
 export { createRecorderHandler } from "./storybook.js";
+export { defaultTranslationFunction } from "./defaultTranslationFunction.js";
+export { getTimeZoneList } from "./getTimeZoneList.js";
 export { hasModifiers } from "./hasModifiers.js";
 export { NotificationHandler } from "./NotificationHandler.js";
 export { readFile } from "./readFile.js";

package/dist/runtime/types/index.d.ts

@@ -53,18 +53,24 @@ export type FileInputError = ErrorW<{
     isValidMimeType: boolean;
     isValidExtension: boolean;
 }>;
+/** h 0-360+ (deg), s 0-100%, v 0-100%, a 0-1 */
 export type HsvaColor = {
     h: number;
     s: number;
     v: number;
     a?: number;
 };
+/** rgb 0-255, 0-1 for alpha */
 export type RgbaColor = {
     r: number;
     g: number;
     b: number;
     a?: number;
 };
+export type Point = {
+    x: number;
+    y: number;
+};
 export type ScrollNearContainerEdgesOptions = {
     containerEl: Ref<HTMLElement | null>;
     /** Margin inside contianer that allows scrolling. 10 by default. */

package/dist/runtime/utils/notifyIfError.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Notifies the user if the given value is an error. Useful for making non-critical errors don't go unnoticed.
+ *
+ * Integrates with {@link TypedError} from `@alanscodelog/utils` to display the error code as well if it has one.
+ *
+ * If the value is not an error, it is returned.
+ */
+export declare function notifyIfError<T>(err: T, { logger, ns, force, }?: {
+    logger?: {
+        debug: (...args: any[]) => void;
+    };
+    ns?: string;
+    force?: boolean;
+}): T;

package/dist/runtime/utils/notifyIfError.js

@@ -0,0 +1,29 @@
+import { TypedError } from "@alanscodelog/utils/TypedError.js";
+import { useNotificationHandler } from "../composables/useNotificationHandler.js";
+export function notifyIfError(err, {
+  logger,
+  ns,
+  force = false
+} = {}) {
+  if (force || err instanceof Error) {
+    const errMessage = {
+      message: err instanceof Error ? err.message : `Unknown error ${err}`,
+      code: err instanceof TypedError ? err.code : void 0
+    };
+    if (logger) {
+      logger.debug({
+        ns,
+        ...errMessage,
+        stack: err instanceof Error ? err.stack : void 0
+      });
+    }
+    void useNotificationHandler().notify({
+      title: "Error",
+      ...errMessage,
+      options: ["Ok"],
+      cancellable: "Ok",
+      timeout: true
+    });
+  }
+  return err;
+}

package/dist/types.d.mts

@@ -1,7 +1,3 @@
-import type { NuxtModule } from '@nuxt/schema'
+export { default } from './module.mjs'
 
-import type { default as Module } from './module.js'
-
-export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
-
-export { default } from './module.js'
+export { type ModuleOptions } from './module.mjs'