@witchcraft/ui 0.3.26 → 0.4.0-beta.2

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

@@ -1,105 +0,0 @@
-import { type HTMLAttributes } from "vue";
-import type { TailwindClassProp } from "../shared/props.js";
-/**
- * Pagination component.
- *
- * Can be passed a slot like so to use a custom link element (like NuxtLink):
- * ```vue
- * <template #link="{ href, i, text, ariaLabel, ariaCurrent}">
- * 	<NuxtLink :to="href" :aria-label="ariaLabel" :aria-current="ariaCurrent ?? false">{{ text ?? i }}</NuxtLink>
- * </template>
- * ```
- */
-declare const _default: typeof __VLS_export;
-export default _default;
-type RealProps = {
-    /** The total number of pages. */
-    total: number;
-    /** The number of the current page. It must be valid, between 0 - total or the component will throw an error. */
-    current: number;
-    /** The base route/link path for the page. Should end with a forward slash `/`. */
-    route: string;
-    /**
-     * A function to customize the output href and page link number. By default, page 0 is page 1, page 1 is 1, then everything else is normal.
-     *
-     * This is because usually we have routes like: `/page/1`, `/page/2`, not `/page/0`.
-     *
-     * You can use this function to customize things further. For example, make `/page/1` just `/`
-     */
-    customRoute?: (route: string, i: number) => {
-        i: number;
-        href: string;
-    };
-    /** How many extra pages to show to each side of the current page. */
-    extraPages?: number;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
-}
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    customRoute: (route: string, i: number) => {
-        i: number;
-        href: string;
-    };
-    extraPages: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    link?: (props: {
-        class: string;
-        i: number;
-        href: string;
-        text: string;
-        ariaLabel: string;
-    }) => any;
-} & {
-    link?: (props: {
-        class: string;
-        i: number;
-        href: string;
-        text: number;
-        ariaLabel: string;
-    }) => any;
-} & {
-    link?: (props: {
-        i: number;
-        href: string;
-        ariaLabel: string;
-        class: string;
-    }) => any;
-} & {
-    current?: (props: {
-        tabindex: string;
-        i: number;
-        ariaLabel: string;
-        aria_current: boolean;
-        class: string;
-    }) => any;
-} & {
-    link?: (props: {
-        i: number;
-        href: string;
-        ariaLabel: string;
-        class: string;
-    }) => any;
-} & {
-    link?: (props: {
-        i: number;
-        href: string;
-        text: number;
-        ariaLabel: string;
-        class: string;
-    }) => any;
-} & {
-    link?: (props: {
-        i: number;
-        href: string;
-        text: string;
-        ariaLabel: string;
-        class: string;
-    }) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,15 +0,0 @@
-import type { Theme } from "metamorphosis";
-import type { BaseInteractiveProps, LinkableByIdProps } from "../shared/props.js";
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<LinkableByIdProps & BaseInteractiveProps & {
-    theme?: Theme;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkableByIdProps & BaseInteractiveProps & {
-    theme?: Theme;
-}> & Readonly<{}>, {
-    theme: Theme;
-    disabled: boolean;
-    readonly: boolean;
-    border: boolean;
-    unstyle: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,15 +0,0 @@
-import type { Theme } from "metamorphosis";
-import type { BaseInteractiveProps, LinkableByIdProps } from "../shared/props.js";
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<LinkableByIdProps & BaseInteractiveProps & {
-    theme?: Theme;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkableByIdProps & BaseInteractiveProps & {
-    theme?: Theme;
-}> & Readonly<{}>, {
-    theme: Theme;
-    disabled: boolean;
-    readonly: boolean;
-    border: boolean;
-    unstyle: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/LibPopup/LibPopup.d.vue.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/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;
-    };
-};