@witchcraft/ui 0.3.24 → 0.4.0-beta.1

package/dist/runtime/components/LibPopup/LibPopup.vue

@@ -1,365 +0,0 @@
-<template>
-<slot
-	name="button"
-	:extract-el="(_) => buttonEl = _"
-/>
-<!-- <Transition> -->
-<component
-	v-if="modelValue || useDialogForBackdrop"
-	:id="id ?? fallbackId"
-	:class="twMerge(
-  useBackdrop && useDialogForBackdrop && `
-			popup--backdrop
-			bg-transparent
-			p-0
-			backdrop:bg-transparent
-		`,
-  modelValue && useBackdrop && !useDialogForBackdrop && `
-			popup--backdrop
-			z-100
-			fixed
-			inset-0
-		`,
-  $attrs.class
-)"
-	v-bind="{ ...$attrs, class: void 0 }"
-	:is="useDialogForBackdrop ? 'dialog' : 'div'"
-	ref="dialogEl"
-	@mousedown.self="handleMouseup"
->
-	<div
-		v-if="modelValue"
-		:class="`popup z-100 fixed ${props.avoidRepositioning ? 'transition-[top,left]' : ''}`"
-		:style="`
-		top:${pos.y}px;
-		left:${pos.x}px;
-		${pos.maxWidth ? `max-width:${pos.maxWidth}px` : ''}
-		${pos.maxHeight ? `max-height:${pos.maxHeight}px` : ''}
-		`"
-	>
-		<slot
-			name="popup"
-			:position="pos"
-			:extract-el="(_) => popupEl = _"
-		/>
-	</div>
-</component>
-	<!-- </Transition> -->
-</template>
-
-<script setup>
-import { onMounted, ref, useAttrs, watch } from "vue";
-import { getFallbackId } from "../shared/props.js";
-import { twMerge } from "../../utils/twMerge.js";
-import { castType } from "@alanscodelog/utils/castType";
-import { isArray } from "@alanscodelog/utils/isArray";
-const fallbackId = getFallbackId();
-const props = defineProps({
-  id: { type: String, required: false },
-  useDialogForBackdrop: { type: Boolean, required: false, default: false },
-  useBackdrop: { type: Boolean, required: false, default: true },
-  preferredHorizontal: { type: [Array, Function], required: false, default: () => ["center-most", "either"] },
-  preferredVertical: { type: [Array, Function], required: false, default: () => ["top", "bottom", "either"] },
-  avoidRepositioning: { type: Boolean, required: false, default: false },
-  modifyPosition: { type: Function, required: false },
-  canClose: { type: Boolean, required: false, default: true }
-});
-const $attrs = useAttrs();
-defineOptions({
-  name: "LibPopup",
-  inheritAttrs: false
-});
-const emit = defineEmits(["close"]);
-const dialogEl = ref(null);
-const popupEl = ref(null);
-const buttonEl = ref(null);
-const backgroundEl = ref(null);
-const pos = ref({});
-const modelValue = defineModel({ type: Boolean, ...{ default: false } });
-let isOpen = modelValue.value;
-const getDialogBoundingRect = () => ({
-  x: 0,
-  y: 0,
-  width: window.innerWidth,
-  height: window.innerHeight,
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0
-});
-let lastButtonElPos;
-const recompute = (force = false) => {
-  requestAnimationFrame(() => {
-    const horzHasCenterScreen = isArray(props.preferredHorizontal) && props.preferredHorizontal[0] === "center-screen";
-    const vertHasCenterScreen = isArray(props.preferredVertical) && props.preferredVertical[0] === "center-screen";
-    const canBePositionedWithoutButton = (horzHasCenterScreen || typeof props.preferredHorizontal === "function") && (vertHasCenterScreen || typeof props.preferredVertical === "function");
-    if (!popupEl.value || !dialogEl.value || !buttonEl.value && !canBePositionedWithoutButton) {
-      pos.value = {};
-      return;
-    }
-    const el = buttonEl.value?.getBoundingClientRect();
-    const bg = backgroundEl.value?.getBoundingClientRect() ?? (props.useBackdrop ? getDialogBoundingRect() : document.body.getBoundingClientRect());
-    const popup = popupEl.value.getBoundingClientRect();
-    let finalPos = {};
-    if (!force && modelValue.value && props.avoidRepositioning && buttonEl.value && lastButtonElPos) {
-      const shiftX = buttonEl.value.getBoundingClientRect().x - lastButtonElPos.x;
-      const shiftY = buttonEl.value.getBoundingClientRect().y - lastButtonElPos.y;
-      pos.value.x += shiftX;
-      pos.value.y += shiftY;
-      lastButtonElPos = el;
-      return;
-    }
-    const space = {
-      left: 0,
-      right: 0,
-      leftLeft: 0,
-      rightRight: 0,
-      leftFromCenter: 0,
-      rightFromCenter: 0,
-      topFromCenter: 0,
-      bottomFromCenter: 0,
-      top: 0,
-      bottom: 0
-    };
-    if (el) {
-      space.left = el.x + el.width - bg.x;
-      space.leftLeft = el.x - bg.x;
-      space.right = bg.x + bg.width - (el.x + el.width);
-      space.rightRight = bg.x + bg.width - el.x;
-      space.leftFromCenter = el.x + el.width / 2 - bg.x;
-      space.rightFromCenter = bg.x + bg.width - (el.x + el.width / 2);
-      space.topFromCenter = el.y + el.height / 2 - bg.y;
-      space.bottomFromCenter = bg.y + bg.height - (el.y + el.height / 2);
-      space.top = el.y - bg.y;
-      space.bottom = bg.y + bg.height - (el.y + el.height);
-    }
-    const { preferredHorizontal, preferredVertical } = props;
-    let maxWidth;
-    let maxHeight;
-    if (typeof preferredHorizontal === "function") {
-      finalPos.x = preferredHorizontal(el, popup, bg, space);
-    } else {
-      outerloop:
-        for (const type of preferredHorizontal) {
-          switch (type) {
-            case "center-screen":
-              if (popup.width < bg.width) {
-                finalPos.x = bg.width / 2 - popup.width / 2;
-              } else {
-                finalPos.x = 0;
-                maxWidth = finalPos.x;
-              }
-              break;
-            case "center-most":
-            case "center":
-              castType(el);
-              if (space.leftFromCenter >= popup.width / 2 && space.rightFromCenter >= popup.width / 2) {
-                finalPos.x = el.x + el.width / 2 - popup.width / 2;
-                break outerloop;
-              }
-              if (space.rightFromCenter + space.leftFromCenter <= popup.width) {
-                finalPos.x = 0;
-                break outerloop;
-              }
-              if (type === "center-most") {
-                if (space.leftFromCenter < space.rightFromCenter) {
-                  finalPos.x = el.x + el.width / 2 - space.leftFromCenter;
-                  break outerloop;
-                } else {
-                  finalPos.x = el.x + el.width / 2 + space.rightFromCenter - popup.width;
-                  break outerloop;
-                }
-              }
-              break;
-            case "left-most":
-              castType(el);
-              if (space.left >= popup.width) {
-                finalPos.x = el.x - popup.width;
-                break outerloop;
-              } else {
-                finalPos.x = 0;
-                break outerloop;
-              }
-            case "right-most":
-              castType(el);
-              if (space.right >= popup.width) {
-                finalPos.x = el.x + el.width;
-                break outerloop;
-              } else {
-                finalPos.x = bg.x + bg.width - popup.width;
-                break outerloop;
-              }
-            case "right":
-              castType(el);
-              if (space.right >= popup.width) {
-                finalPos.x = el.x;
-                break outerloop;
-              }
-              break;
-            case "left":
-              castType(el);
-              if (space.left >= popup.width) {
-                finalPos.x = el.x + el.width - popup.width;
-                break outerloop;
-              }
-              break;
-            case "either": {
-              castType(el);
-              if (space.right >= space.left) {
-                finalPos.x = el.x;
-                break outerloop;
-              } else {
-                finalPos.x = el.x + el.width - popup.width;
-                break outerloop;
-              }
-            }
-          }
-        }
-    }
-    if (typeof preferredVertical === "function") {
-      finalPos.y = preferredVertical(el, popup, bg, space);
-    } else {
-      outerloop:
-        for (const type of preferredVertical) {
-          switch (type) {
-            case "center-screen":
-              if (popup.height < bg.height) {
-                finalPos.y = bg.height / 2 - popup.height / 2;
-              } else {
-                finalPos.y = 0;
-                maxHeight = finalPos.y;
-              }
-              break;
-            case "top":
-              castType(el);
-              if (space.top >= popup.height) {
-                finalPos.y = el.y - popup.height;
-                break outerloop;
-              }
-              break;
-            case "bottom":
-              castType(el);
-              if (space.bottom >= popup.height) {
-                finalPos.y = el.y + el.height;
-                break outerloop;
-              }
-              break;
-            case "top-most":
-              castType(el);
-              if (space.top >= popup.height) {
-                finalPos.y = el.y - popup.height;
-                break outerloop;
-              } else {
-                finalPos.y = 0;
-                break outerloop;
-              }
-            case "bottom-most":
-              castType(el);
-              if (space.bottom >= popup.height) {
-                finalPos.y = el.y + el.height;
-                break outerloop;
-              } else {
-                finalPos.y = bg.y + bg.height - popup.height;
-                break outerloop;
-              }
-            case "center-most":
-            case "center":
-              castType(el);
-              if (space.topFromCenter >= popup.height / 2 && space.bottomFromCenter >= popup.height / 2) {
-                finalPos.y = el.y + el.height / 2 - popup.height / 2;
-                break outerloop;
-              }
-              if (space.bottomFromCenter + space.topFromCenter <= popup.height) {
-                finalPos.y = 0;
-                break outerloop;
-              }
-              if (type === "center-most") {
-                if (space.topFromCenter < space.bottomFromCenter) {
-                  finalPos.y = el.y + el.height / 2 - space.topFromCenter;
-                  break outerloop;
-                } else {
-                  finalPos.y = el.y + el.height / 2 + space.bottomFromCenter - popup.height;
-                  break outerloop;
-                }
-              }
-              break;
-            case "either": {
-              castType(el);
-              if (space.top >= space.bottom) {
-                finalPos.y = el.y - popup.height;
-                break outerloop;
-              } else {
-                finalPos.y = el.y + el.height;
-                break outerloop;
-              }
-            }
-          }
-        }
-    }
-    finalPos.maxWidth = maxWidth ?? void 0;
-    finalPos.maxHeight = maxHeight ?? void 0;
-    if (props.modifyPosition) {
-      finalPos = props.modifyPosition(finalPos, el, popup, bg, space);
-    }
-    pos.value = finalPos;
-    lastButtonElPos = el;
-  });
-};
-const show = () => {
-  if (!isOpen) {
-    isOpen = true;
-    modelValue.value = isOpen;
-    if (props.useBackdrop && props.useDialogForBackdrop) dialogEl.value?.showModal();
-    recompute(true);
-  }
-};
-const close = () => {
-  if (isOpen) {
-    const res = props.canClose ?? false;
-    emit("close");
-    if (res === false) return;
-    isOpen = false;
-    modelValue.value = isOpen;
-    pos.value.maxWidth = void 0;
-    if (props.useBackdrop && props.useDialogForBackdrop) dialogEl.value?.close();
-  }
-};
-const recomputeListener = () => recompute();
-const bindListeners = () => {
-  window.addEventListener("resize", recomputeListener);
-  window.addEventListener("scroll", recomputeListener, true);
-};
-const unbindListeners = () => {
-  window.removeEventListener("resize", recomputeListener);
-  window.removeEventListener("scroll", recomputeListener, true);
-};
-watch([modelValue, popupEl], () => {
-  if (modelValue.value) {
-    show();
-    bindListeners();
-  } else {
-    close();
-    unbindListeners();
-  }
-});
-const handleMouseup = ($event) => {
-  $event.preventDefault();
-  close();
-};
-onMounted(() => {
-  recompute();
-});
-defineExpose({
-  recompute,
-  setReference: (el) => {
-    buttonEl.value = el;
-  },
-  setBackground: (el) => {
-    backgroundEl.value = el;
-  }
-});
-</script>
-
-<script>
-
-</script>

package/dist/runtime/components/LibPopup/LibPopup.vue.d.ts

@@ -1,52 +0,0 @@
-import { type HTMLAttributes } from "vue";
-import { type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js";
-import type { IPopupReference } from "../../types/index.js";
-type RealProps = LinkableByIdProps & PopupProps;
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props & {
-    modelValue?: boolean;
-}, {
-    recompute: (force?: boolean) => void;
-    setReference: (el: IPopupReference | null) => void;
-    setBackground: (el: IPopupReference | null) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-} & {
-    close: () => any;
-}, string, import("vue").PublicProps, Readonly<Props & {
-    modelValue?: boolean;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onClose?: (() => any) | undefined;
-}>, {
-    canClose: boolean;
-    useDialogForBackdrop: false;
-    useBackdrop: boolean;
-    preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
-    preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
-    avoidRepositioning: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    button?: (props: {
-        extractEl: (_: any) => any;
-    }) => any;
-} & {
-    popup?: (props: {
-        position: {
-            x: number;
-            y: number;
-            maxWidth?: number | undefined;
-            maxHeight?: number | undefined;
-        };
-        extractEl: (_: any) => any;
-    }) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -1,169 +0,0 @@
-<template>
-<Transition>
-	<div
-		v-if="!hide"
-		:id="id ?? fallbackId"
-		:class="twMerge(`
-			progress-bar
-			w-[200px]
-			whitespace-nowrap
-			overflow-x-scroll
-			scrollbar-hidden
-			rounded-sm
-			flex
-			text-fg
-			relative
-			before:content-['']
-			text-sm
-			min-w-[50px]
-			after:shadow-inner
-			after:shadow-black/50
-			after:content-['']
-			after:absolute
-			after:inset-0
-			after:pointer-events-none
-			after:z-2
-			after:transition-all
-			before:shadow-inner
-			before:shadow-black/50
-			before:rounded-sm
-			before:bg-bars-gradient
-			before:animate-slideBgInf
-			before:[background-size:15px_15px]
-			before:absolute
-			before:w-[var(--progress)]
-			before:top-0 before:bottom-0 before:left-0
-			before:transition-all
-			before:z-1
-			before:duration-500
-		`, psuedoHide && `
-			after:opacity-0
-			before:opacity-0
-		`, $attrs.class)"
-		:data-value="progress"
-		:title="label"
-		role="progressbar"
-		:aria-valuenow="clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)"
-		:aria-valuemin="clamp[0] ?? 0"
-		:aria-valuemax="clamp[1] ?? 100"
-		v-bind="{ ...$attrs, class: void 0 }"
-		:style="`--progress: ${clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
-	>
-		<div class="procgress-bar--label-wrapper relative flex-1">
-			<span class="before:content-vertical-holder"/>
-			<Transition>
-				<slot>
-					<label
-						v-if="!psuedoHide"
-						:for="id"
-						class="
-							text-bg
-							absolute inset-0  flex
-							justify-center
-						"
-					>
-						<div class="truncate">
-							{{ label ?? "" }}
-						</div>
-					</label>
-				</slot>
-			</Transition>
-
-			<Transition>
-				<slot>
-					<label
-						v-if="!psuedoHide"
-						class="
-							progress-bar--label
-							contrast-label
-							pointer-events-none
-							absolute
-							inset-0
-							flex justify-center  transition-all
-							duration-500
-							[clip-path:inset(0_0_0_var(--progress))]
-							dark:hidden
-						"
-					>
-						<div class="truncate">
-							{{ label ?? "" }}
-						</div>
-					</label>
-				</slot>
-			</Transition>
-		</div>
-	</div>
-</Transition>
-</template>
-
-<script setup>
-import { ref, watch } from "vue";
-import { twMerge } from "../../utils/twMerge.js";
-import { getFallbackId } from "../shared/props.js";
-const clampVal = (n, min, max) => Math.min(Math.max(n, min), max);
-defineOptions({
-  name: "LibProgressBar",
-  inheritAttrs: false
-});
-const fallbackId = getFallbackId();
-const props = defineProps({
-  id: { type: String, required: false },
-  disabled: { type: Boolean, required: false, default: false },
-  readonly: { type: Boolean, required: false, default: false },
-  border: { type: Boolean, required: false, default: true },
-  unstyle: { type: Boolean, required: false, default: false },
-  label: { type: String, required: false },
-  progress: { type: Number, required: true },
-  autohideOnComplete: { type: Number, required: false, default: -1 },
-  keepSpaceWhenHidden: { type: Boolean, required: false, default: false },
-  clamp: { type: Array, required: false, default: () => [0, 100] }
-});
-const hide = ref(false);
-const psuedoHide = ref(false);
-let timeout;
-let type;
-if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
-  if (props.keepSpaceWhenHidden) {
-    hide.value = false;
-    psuedoHide.value = true;
-  } else {
-    hide.value = true;
-    psuedoHide.value = false;
-  }
-}
-watch([
-  () => props.progress,
-  () => props.keepSpaceWhenHidden,
-  () => props.autohideOnComplete
-], () => {
-  if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
-    if (props.keepSpaceWhenHidden) {
-      if (type === 1) return;
-      clearTimeout(timeout);
-      type = 1;
-      timeout = setTimeout(() => {
-        type = 0;
-        hide.value = false;
-        psuedoHide.value = true;
-      }, props.autohideOnComplete);
-    } else {
-      if (type === 2) return;
-      clearTimeout(timeout);
-      type = 2;
-      timeout = setTimeout(() => {
-        type = 0;
-        hide.value = true;
-        psuedoHide.value = false;
-      }, props.autohideOnComplete);
-    }
-  } else {
-    clearTimeout(timeout);
-    hide.value = false;
-    psuedoHide.value = false;
-  }
-}, { immediate: false });
-</script>
-
-<script>
-
-</script>

package/dist/runtime/components/LibSuggestions/LibSuggestions.d.vue.ts

@@ -1,99 +0,0 @@
-import { type HTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js";
-type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes, {
-    /** Tailwind classes. */
-    class?: string;
-}>>;
-type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
-    /** Return true to prevent the keydown event from being handled. */
-    filterKeydown?: (e: KeyboardEvent) => boolean;
-    /** Return true to prevent the blur event from being handled. */
-    filterBlur?: (e: MouseEvent) => boolean;
-    /** Return true to prevent the focus event from being handled. */
-    filterFocus?: (e: FocusEvent) => boolean;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<HTMLAttributes, "class" | "onSubmit"> & {
-    /** Tailwind classes. */
-    class?: string;
-}>, 
-/** @vue-ignore */
-WrapperTypes, RealProps {
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: <TSuggestion extends string | object, TValue extends string | string[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & SuggestionsProps<TSuggestion> & {
-        /**
-         * The final valid value. This is *not* the value you want to share with the input. If `restrictToSuggestions` is true this will not update on any invalid values that `inputValue` might be set to.
-         *
-         * If suggestions are objects, this will be the string returned by the `suggestionLabel` prop.
-         */
-        modelValue: TValue;
-        /**
-         * If the element is bound to an input, this is the value that the input should be sharing.
-         *
-         * It allows the component to read even invalid output, and also to reset that invalid output when either modelValue is set to a new value, or when the component is closed via cancel.
-         */
-        inputValue?: string;
-        open?: boolean;
-    }) & {
-        onSubmit?: ((val: string, suggestion?: any, wasRemoved?: boolean | undefined) => any) | undefined;
-        "onUpdate:isOpen"?: ((val: boolean) => any) | undefined;
-        "onUpdate:activeSuggestion"?: ((val: number) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: TValue) => any) | undefined;
-        "onUpdate:inputValue"?: ((value: string) => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: import("vue").ShallowUnwrapRef<{
-        suggestions: {
-            list: any[] | undefined;
-            filtered: any[] | undefined;
-            active: number;
-            available: boolean;
-            moreThanOneAvailable: boolean;
-            hasExactlyMatching: TSuggestion | undefined;
-            hasValidSuggestion: boolean;
-            openable: boolean | undefined;
-            getLabel: (item: any) => string;
-            $open: boolean;
-            open: () => void;
-            close: () => void;
-            enterSelected: (doClose?: boolean) => void;
-            enterIndex: (num: number, doClose?: boolean) => void;
-            toggle: () => void;
-            cancel: () => void;
-            select: (num: number) => void;
-            prev: () => void;
-            next: () => void;
-            first: () => void;
-            last: () => void;
-        };
-        el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-        /** A simple keydown handler that can be passed to an input to control the component while still focused inside it. */
-        inputKeydownHandler: (e: KeyboardEvent) => void;
-        /** A blur handler for the input that controls the component. This also takes care of making clicking on a suggestion work, since otherwise if canOpen is set to false in the blur handler, no click event will fire. */
-        inputBlurHandler: (e: MouseEvent) => void;
-        /** A focus handler for the input that controls the component. */
-        inputFocusHandler: (e: FocusEvent) => void;
-    }>) => void;
-    attrs: any;
-    slots: {
-        item?: (props: {
-            item: any;
-            index: number;
-            isSelected: boolean;
-        }) => any;
-    };
-    emit: SuggestionsEmits<false> & (((event: "update:modelValue", value: TValue) => void) & ((event: "update:inputValue", value: string) => void) & ((event: "update:open", value: boolean) => void));
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};