@witchcraft/ui 0.3.26 → 0.4.0-beta.2

package/dist/runtime/components/LibLabel/LibLabel.vue

@@ -1,45 +0,0 @@
-<template>
-<!-- we use data-disabled because labels have no disabled property technically -->
-<label
-	:id="`label-${id ?? fallbackId}`"
-	:class="!$attrs.unstyle && twMerge(
-  `
-			pr-0
-			text-sm
-		`,
-  !valid && `text-danger-700`,
-  $attrs?.class
-)"
-	:data-disabled="disabled"
-	:data-invalid="!valid"
-	:for="id"
-	v-bind="{ ...$attrs, class: void 0 }"
->
-	<slot/>
-</label>
-</template>
-
-<script setup>
-import { useAttrs } from "vue";
-import { twMerge } from "../../utils/twMerge.js";
-import { getFallbackId } from "../shared/props.js";
-defineOptions({
-  name: "LibLabel"
-});
-const fallbackId = getFallbackId();
-defineProps({
-  id: { type: String, required: false, default: "" },
-  label: { 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 },
-  unstyled: { type: Boolean, required: false },
-  valid: { type: Boolean, required: false, default: true }
-});
-const $attrs = useAttrs();
-</script>
-
-<script>
-
-</script>

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

@@ -1,27 +0,0 @@
-import type { LabelHTMLAttributes } from "vue";
-import type { BaseInteractiveProps, LabelProps, LinkableByIdProps, TailwindClassProp } from "../shared/props.js";
-type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
-    unstyled?: boolean;
-    valid?: boolean;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<LabelHTMLAttributes, "class"> & TailwindClassProp>, RealProps {
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    id: string;
-    disabled: boolean;
-    readonly: boolean;
-    border: boolean;
-    unstyle: boolean;
-    valid: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -1,109 +0,0 @@
-<template>
-<div
-	v-if="$modelValue && $modelValue?.length > 0"
-	:class="
-  twMerge(
-    `
-		multivalues
-		group
-		flex
-		flex-initial
-		items-center
-		justify-center
-		gap-1
-		overflow-x-scroll
-		scrollbar-hidden
-	`,
-    $.attrs?.class
-  )
-"
-	:data-disabled="disabled"
-	:data-read-only="readonly"
-	:aria-label="`Values for ${label}`"
-	:tabindex="disabled ? -1 : 0"
-	v-bind="{ ...$.attrs, class: void 0 }"
->
-	<div
-		:data-border="border"
-		:class="twMerge(
-  `
-				multivalues--item
-				flex-basis-0
-				min-w-2
-				flex
-				max-w-fit
-				flex-1
-				items-center
-				gap-0.5
-				overflow-hidden
-				px-1
-				text-xs
-				leading-none`,
-  !(disabled || readonly) && `
-				group-focus:text-accent-500
-				focus:text-accent-500`,
-  border && `
-				rounded-sm
-				border-neutral-400
-				border
-				focus:border-accent-400
-			`,
-  border && (disabled || readonly) && `
-				border-neutral-200
-				focus:border-neutral-200
-				dark:border-neutral-800
-				dark:focus:border-neutral-800
-			`,
-  $.itemAttrs?.class
-)"
-		:tabindex="canEdit ? 0 : void 0"
-		v-for="(value) of $modelValue"
-		:key="value"
-		@keydown.ctrl.c.prevent="copy(value.toString())"
-	>
-		<span class="multivalues--label truncate">{{ value }}</span>
-		<lib-button
-			class="multivalues--remove-button !p-0 text-sm !leading-none"
-			:aria-label="`Remove ${value}`"
-			:border="false"
-			:disabled="disabled || readonly"
-			@click="removeVal(value)"
-		>
-			<icon><i-fa6-solid-xmark/></icon>
-		</lib-button>
-	</div>
-</div>
-</template>
-
-<script setup>
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn";
-import { computed } from "vue";
-import IFa6SolidXmark from "~icons/fa6-solid/xmark";
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
-import { copy } from "../../helpers/copy.js";
-import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-import LibButton from "../LibButton/LibButton.vue";
-defineOptions({
-  name: "LibMultiValues",
-  inheritAttrs: false
-});
-const $ = useDivideAttrs(["item"]);
-const props = defineProps({
-  label: { 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 }
-});
-const canEdit = computed(() => !props.disabled && !props.readonly);
-const $modelValue = defineModel({ type: Array, ...{ default: () => [] } });
-const removeVal = (value) => {
-  if (!canEdit.value) return;
-  removeIfIn($modelValue.value, value);
-};
-</script>
-
-<script>
-
-</script>

package/dist/runtime/components/LibNotifications/LibNotification.d.vue.ts

@@ -1,45 +0,0 @@
-import { type HTMLAttributes } from "vue";
-import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js";
-import type { TailwindClassProp } from "../shared/props.js";
-type RealProps = {
-    notification: NotificationEntry;
-    handler?: NotificationHandler;
-};
-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, {
-    focus: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    pause: (notification: NotificationEntry) => any;
-    resume: (notification: NotificationEntry) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onPause?: ((notification: NotificationEntry) => any) | undefined;
-    onResume?: ((notification: NotificationEntry) => any) | undefined;
-}>, {
-    handler: NotificationHandler;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    top?: (props: {
-        notification: NotificationEntry;
-    }) => any;
-} & {
-    title?: (props: {
-        title: string;
-        class: string;
-        tabindex: number;
-    }) => any;
-} & {
-    message?: (props: {
-        class: string;
-        message: string;
-        tabindex: number;
-    }) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/LibNotifications/LibNotification.vue.d.ts

@@ -1,45 +0,0 @@
-import { type HTMLAttributes } from "vue";
-import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js";
-import type { TailwindClassProp } from "../shared/props.js";
-type RealProps = {
-    notification: NotificationEntry;
-    handler?: NotificationHandler;
-};
-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, {
-    focus: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    pause: (notification: NotificationEntry) => any;
-    resume: (notification: NotificationEntry) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onPause?: ((notification: NotificationEntry) => any) | undefined;
-    onResume?: ((notification: NotificationEntry) => any) | undefined;
-}>, {
-    handler: NotificationHandler;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    top?: (props: {
-        notification: NotificationEntry;
-    }) => any;
-} & {
-    title?: (props: {
-        title: string;
-        class: string;
-        tabindex: number;
-    }) => any;
-} & {
-    message?: (props: {
-        class: string;
-        message: string;
-        tabindex: number;
-    }) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,15 +0,0 @@
-import { NotificationHandler } from "../../helpers/NotificationHandler.js";
-import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js";
-import type { HTMLAttributes } from "vue";
-type RealProps = LinkableByIdProps & {
-    /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
-    handler?: NotificationHandler;
-    progressUpdateInterval?: number;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,15 +0,0 @@
-import { NotificationHandler } from "../../helpers/NotificationHandler.js";
-import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js";
-import type { HTMLAttributes } from "vue";
-type RealProps = LinkableByIdProps & {
-    /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
-    handler?: NotificationHandler;
-    progressUpdateInterval?: number;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,229 +0,0 @@
-<template>
-<nav
-	:class="twMerge(`
-		pagination--wrapper
-		flex flex-wrap items-center justify-center gap-2
-	`, $attrs.class)"
-	role="navigation"
-	:aria-label="t('pagination.aria')"
->
-	<slot
-		v-if="prevLink.i > 0 && prevLink.i !== currentLink.i"
-		name="link"
-		:i="prevLink.i"
-		:href="prevLink.href"
-		:text="t('pagination.previous-page')"
-		:aria-label="t('pagination.aria.go-to-previous-page', { count: prevLink.i })"
-		:class="`pagination--link ${pageClasses}`"
-	>
-		<a
-			:class="`pagination--link ${pageClasses}`"
-			:href="prevLink.href"
-			:aria-label="t('pagination.aria.go-to-previous-page', { count: prevLink.i })"
-		/>
-	</slot>
-	<div class="pagination--spacer flex-1"/>
-	<slot
-		v-if="firstLink.i !== currentLink.i"
-		name="link"
-		:i="0"
-		:href="firstLink.href"
-		:text="firstLink.i"
-		:aria-label="t('pagination.aria.go-to-page', { count: firstLink.i })"
-		:class="`pagination--link pagination--first-link ${pageClasses}`"
-	>
-		{{ firstLink.href }}
-		<a
-			:class="`pagination--link pagination--first-link ${pageClasses}`"
-			:href="firstLink.href"
-			:aria-label="t('pagination.aria.go-to-page', { count: firstLink.i })"
-		>
-			{{ firstLink.i }}
-		</a>
-	</slot>
-	<div
-		v-if="prevLink.i - extraPages > firstLink.i"
-		class="pagination--page-fill"
-	>
-		...
-	</div>
-	<template
-		v-for="entry in extraPagesPrev"
-		:key="entry.i"
-	>
-		<slot
-			name="link"
-			:class="`pagination--link ${pageClasses}`"
-			:i="entry.i"
-			:href="entry.href"
-			:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
-		>
-			<a
-				:class="`pagination--link ${pageClasses}`"
-				:href="entry.href"
-				:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
-			>
-				{{ entry.i }}
-			</a>
-		</slot>
-	</template>
-	<slot
-		name="current"
-		:class="`pagination--link ${currentPageClasses}`"
-		tabindex="0"
-		:i="currentLink.i"
-		:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
-		:aria_current="true"
-	>
-		<div
-			:class="`pagination--current-page a ${currentPageClasses}`"
-			tabindex="0"
-			:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
-			aria-current="true"
-			@click="$event.preventDefault()"
-		>
-			{{ currentLink.i }}
-		</div>
-	</slot>
-	<template
-		v-for="entry in extraPagesNext"
-		:key="entry.i"
-	>
-		<slot
-			name="link"
-			:class="`pagination--link ${pageClasses}`"
-			:i="entry.i"
-			:href="entry.href"
-			:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
-		>
-			<a
-				:class="`pagination--link ${pageClasses}`"
-				:href="entry.href"
-				:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
-			>
-				{{ entry.i }}
-			</a>
-		</slot>
-	</template>
-	<div
-		v-if="nextLink.i + extraPages < total"
-		class="pagination--page-fill"
-		aria-hidden="true"
-	>
-		...
-	</div>
-	<slot
-		v-if="lastLink.i !== currentLink.i"
-		name="link"
-		:class="`pagination--link ${pageClasses}`"
-		:i="lastLink.i"
-		:href="lastLink.href"
-		:text="total"
-		:aria-label="t('pagination.aria.go-to-page', { count: lastLink.i })"
-	>
-		<a
-			:class="`pagination--link ${pageClasses}`"
-			:href="lastLink.href"
-			:aria-label="t('pagination.aria.go-to-page', { count: lastLink.i })"
-		>
-			{{ total }}
-		</a>
-	</slot>
-	<div class="pagination--spacer flex-1"/>
-	<slot
-		v-if="nextLink.i <= total && nextLink.i !== currentLink.i"
-		:class="`pagination--link ${pageClasses}`"
-		name="link"
-		:i="nextLink.i"
-		:href="nextLink.href"
-		:text="t('pagination.next-page')"
-		:aria-label="t('pagination.aria.go-to-next-page', { count: nextLink.i })"
-	>
-		<a
-			:class="`pagination--link ${pageClasses}`"
-			:href="nextLink.href"
-			:aria-label="t('pagination.aria.go-to-next-page', { count: nextLink.i })"
-		>
-			Next
-		</a>
-	</slot>
-</nav>
-</template>
-
-<script setup>
-import { computed, useAttrs, watch } from "vue";
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
-import { twMerge } from "../../utils/twMerge.js";
-const t = useInjectedI18n();
-const commonClasses = `
-	block
-	focus-outline
-	border-b-2
-	border-transparent
-	transition-all
-	outlined:rounded-sm
-`;
-const pageClasses = `
-	${commonClasses}
-	focus-outline
-	hover:text-accent-600
-	hover:border-b-accent-500
-	hover:scale-125
-`;
-const currentPageClasses = `
-	${commonClasses}
-	border-b-accent-500
-	scale-125
-`;
-defineOptions({
-  name: "LibPagination",
-  inheritAttrs: false
-});
-const props = defineProps({
-  total: { type: Number, required: true },
-  current: { type: Number, required: true },
-  route: { type: String, required: true },
-  customRoute: { type: Function, required: false, default: (route, i) => {
-    if (i === 0 || i === 1) {
-      const num = 1;
-      return { href: route, i: num };
-    }
-    return { href: route + i.toString(), i };
-  } },
-  extraPages: { type: Number, required: false, default: 3 }
-});
-const $attrs = useAttrs();
-const currentLink = computed(() => props.customRoute(props.route, props.current));
-const currentIsInvalid = computed(() => currentLink.value.i < 0 || currentLink.value.i > props.total);
-watch(() => currentIsInvalid.value, () => {
-  if (currentIsInvalid.value) {
-    throw new Error(`Current page is out of range: 0 - ${props.total}`);
-  }
-});
-const prevLink = computed(() => props.customRoute(props.route, props.current - 1));
-const nextLink = computed(() => {
-  const maybeNextLink = props.customRoute(props.route, props.current + 1);
-  if (maybeNextLink.i === currentLink.value.i) {
-    return props.customRoute(props.route, props.current + 2);
-  }
-  return maybeNextLink;
-});
-const firstLink = computed(() => props.customRoute(props.route, 0));
-const lastLink = computed(() => props.customRoute(props.route, props.total));
-const extraPagesPrev = computed(() => [...Array(props.extraPages)].map((_, _i) => {
-  const num = currentLink.value.i - (props.extraPages - _i);
-  if (num <= firstLink.value.i || num >= lastLink.value.i || num >= currentLink.value.i) return void 0;
-  return props.customRoute(props.route, num);
-}).filter((entry) => entry !== void 0));
-const extraPagesNext = computed(() => [...Array(props.extraPages + 1)].map((_, i) => {
-  const num = currentLink.value.i + i;
-  if (num <= firstLink.value.i || num >= lastLink.value.i || num <= currentLink.value.i) return void 0;
-  return props.customRoute(props.route, num);
-}).filter((entry) => entry !== void 0).slice(0, props.extraPages));
-</script>
-
-<script>
-export default {
-  name: "LibPagination"
-};
-</script>