@witchcraft/ui 0.1.3 → 0.2.1-beta.1

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

@@ -0,0 +1,165 @@
+import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+type WrapperTypes = WrapperProps<"suggestions", HTMLAttributes> & WrapperProps<"wrapper", HTMLAttributes> & WrapperProps<"inner-wrapper", HTMLAttributes>;
+type RealProps = SuggestionsProps & LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    suggestions?: SuggestionsProps["suggestions"];
+    valid?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSubmit"> & TailwindClassProp>, 
+/** @vue-ignore */
+Partial<WrapperTypes>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    values?: string[] | undefined;
+    modelValue: string;
+    inputValue?: string;
+}, {
+    suggestionsComponent: import("vue").Ref<{
+        suggestions: {
+            list: any[] | undefined;
+            filtered: any[] | undefined;
+            active: number;
+            available: boolean;
+            moreThanOneAvailable: boolean;
+            hasExactlyMatching: string | object | 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: HTMLElement | null;
+        inputKeydownHandler: (e: KeyboardEvent) => void;
+        inputBlurHandler: (e: MouseEvent) => void;
+        inputFocusHandler: (e: FocusEvent) => void;
+    } | null, import("vue").ShallowUnwrapRef<{
+        suggestions: {
+            list: any[] | undefined;
+            filtered: any[] | undefined;
+            active: number;
+            available: boolean;
+            moreThanOneAvailable: boolean;
+            hasExactlyMatching: string | object | 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>;
+        inputKeydownHandler: (e: KeyboardEvent) => void;
+        inputBlurHandler: (e: MouseEvent) => void;
+        inputFocusHandler: (e: FocusEvent) => void;
+    }> | {
+        suggestions: {
+            list: any[] | undefined;
+            filtered: any[] | undefined;
+            active: number;
+            available: boolean;
+            moreThanOneAvailable: boolean;
+            hasExactlyMatching: string | object | 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: HTMLElement | null;
+        inputKeydownHandler: (e: KeyboardEvent) => void;
+        inputBlurHandler: (e: MouseEvent) => void;
+        inputFocusHandler: (e: FocusEvent) => void;
+    } | null>;
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:inputValue": (value: string) => any;
+    "update:values": (value: string[] | undefined) => any;
+} & {
+    blur: (val: FocusEvent) => any;
+    input: (val: InputEvent) => any;
+    submit: (val: string, suggestion?: any) => any;
+    keydown: (val: KeyboardEvent) => any;
+    focus: (val: FocusEvent) => any;
+    indicatorClick: (val: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    values?: string[] | undefined;
+    modelValue: string;
+    inputValue?: string;
+}> & Readonly<{
+    onBlur?: ((val: FocusEvent) => any) | undefined;
+    onInput?: ((val: InputEvent) => any) | undefined;
+    onSubmit?: ((val: string, suggestion?: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    "onUpdate:values"?: ((value: string[] | undefined) => any) | undefined;
+    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
+    onFocus?: ((val: FocusEvent) => any) | undefined;
+    onIndicatorClick?: ((val: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+    valid: boolean;
+    suggestions: any[];
+    updateOnlyOnSubmit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: any) => any;
+} & {
+    default?: (props: any) => any;
+} & {
+    left?: (props: any) => any;
+} & {
+    input?: (props: any) => any;
+} & {
+    indicator?: (props: {
+        isOpen: any;
+        suggestionsIndicatorClickHandler: any;
+    }) => any;
+} & {
+    values?: (props: any) => any;
+} & {
+    right?: (props: any) => any;
+} & {
+    suggestions?: (props: any) => any;
+} & {
+    'suggestion-item'?: (props: any) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,65 +2,44 @@
 <!-- we use data-disabled because labels have no disabled property technically -->
 <label
 	:id="`label-${id ?? fallbackId}`"
-	:class="!($attrs as any).unstyle && twMerge(`
+	:class="!$attrs.unstyle && twMerge(
+  `
 			pr-0
 			text-sm
 		`,
-		!valid && `text-danger-700`,
-		($attrs as any)?.class
-	)"
+  !valid && `text-danger-700`,
+  $attrs?.class
+)"
 	:data-disabled="disabled"
 	:data-invalid="!valid"
 	:for="id"
-	v-bind="{...$attrs, class:undefined}"
+	v-bind="{ ...$attrs, class: void 0 }"
 >
 	<slot/>
 </label>
 </template>
 
-<script setup  lang="ts">
-import type { MakeRequired } from "@alanscodelog/utils/types"
-import { type LabelHTMLAttributes,toRef,useAttrs } from "vue"
-
-import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
-
+<script setup>
+import { toRef, useAttrs } from "vue";
+import { twMerge } from "../../utils/twMerge.js";
+import { getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-label",
-})
-
-const fallbackId = getFallbackId()
-
-// eslint-disable-next-line no-undef
-withDefaults(defineProps<Props>(), {
-	id: "",
-	unstyled: undefined,
-	valid: true,
-	...baseInteractivePropsDefaults,
-})
-
-const $attrs = useAttrs()
-</script>
-
-<script lang="ts">
-type RealProps =
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		unstyled?: boolean
-		valid?: boolean
-	}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<LabelHTMLAttributes,"class"> & TailwindClassProp>,
-	RealProps
-	{ }
+  name: "lib-label"
+});
+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 lang="ts">
+<script>
 
 </script>

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

@@ -0,0 +1,26 @@
+import { type LabelHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    unstyled?: boolean;
+    valid?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<LabelHTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, 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;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,7 +1,9 @@
 <template>
 <div
 	v-if="$modelValue && $modelValue?.length > 0"
-	:class="twMerge(`
+	:class="
+  twMerge(
+    `
 		multivalues
 		group
 		flex
@@ -12,17 +14,19 @@
 		overflow-x-scroll
 		scrollbar-hidden
 	`,
-		($.attrs as any)?.class)
-	"
+    $.attrs?.class
+  )
+"
 	:data-disabled="disabled"
 	:data-read-only="readonly"
 	:aria-label="`Values for ${label}`"
 	:tabindex="disabled ? -1 : 0"
-	v-bind="{...$.attrs, class:undefined}"
+	v-bind="{ ...$.attrs, class: void 0 }"
 >
 	<div
 		:data-border="border"
-		:class="twMerge(`
+		:class="twMerge(
+  `
 				multivalues--item
 				flex-basis-0
 				min-w-2
@@ -35,24 +39,24 @@
 				px-1
 				text-xs
 				leading-none`,
-			!(disabled || readonly) && `
+  !(disabled || readonly) && `
 				group-focus:text-accent-500
 				focus:text-accent-500`,
-			border && `
+  border && `
 				rounded-sm
 				border-neutral-400
 				border
 				focus:border-accent-400
 			`,
-			border && (disabled || readonly) && `
+  border && (disabled || readonly) && `
 				border-neutral-200
 				focus:border-neutral-200
 				dark:border-neutral-800
 				dark:focus:border-neutral-800
 			`,
-			($.itemAttrs as any)?.class
-		)"
-		:tabindex="canEdit ? 0 : undefined"
+  $.itemAttrs?.class
+)"
+		:tabindex="canEdit ? 0 : void 0"
 		v-for="(value) of $modelValue"
 		:key="value"
 		@keydown.ctrl.c.prevent="copy(value.toString())"
@@ -71,55 +75,36 @@
 </div>
 </template>
 
-<script setup lang="ts" generic="T extends string | number">
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
-import { computed, type HTMLAttributes } from "vue"
-
-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"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
-
-
+<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";
+import {} from "../shared/props.js";
 defineOptions({
-	name: "lib-multi-values",
-	inheritAttrs: false,
-})
-
-const $ = useDivideAttrs(["item"] as const)
-const props = withDefaults(defineProps<Props>(), {
-	...baseInteractivePropsDefaults
-})
-
-
-const canEdit = computed(() => !props.disabled && !props.readonly)
-const $modelValue = defineModel<T[]>({ default: () => []})
-
-const removeVal = (value: T) => {
-	if (!canEdit.value) return
-	removeIfIn($modelValue.value, value)
-}
+  name: "lib-multi-values",
+  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 lang="ts">
-type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes>>
-
-type RealProps =
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		border?: boolean
-	}
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
-	/** @vue-ignore */
-	WrapperTypes,
-	RealProps
-{}
+<script>
 
 </script>
-

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

@@ -0,0 +1,29 @@
+import { type HTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes>>;
+type RealProps = LabelProps & BaseInteractiveProps & {
+    border?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, 
+/** @vue-ignore */
+WrapperTypes, RealProps {
+}
+declare const _default: <T extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & (Props & {
+        modelValue?: T[];
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: T[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -1,5 +1,6 @@
 <template>
-<div :class="twMerge(`notification
+<div :class="twMerge(
+  `notification
 		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
@@ -13,8 +14,9 @@
 		gap-2
 		p-2 m-2
 	`,
-	($attrs as any).class)"
-	v-bind="{ ...$attrs, class: undefined }"
+  $attrs.class
+)"
+	v-bind="{ ...$attrs, class: void 0 }"
 	tabindex="0"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
@@ -63,11 +65,12 @@
 			"
 		>
 			<lib-button :label="option"
-				:class="twMerge(`
+				:class="twMerge(
+  `
 					notification--option-button
 				`,
-					buttonColors[i] == 'secondary' && 'p-0'
-				)"
+  buttonColors[i] == 'secondary' && 'p-0'
+)"
 				:border="buttonColors[i] !== 'secondary'"
 				:color="buttonColors[i]"
 				v-for="option, i in notification.options"
@@ -78,52 +81,35 @@
 	</div>
 </div>
 </template>
-<script setup lang="ts">
-import { computed, type HTMLAttributes,ref, useAttrs } from "vue"
-
-import { copy } from "../../helpers/copy.js"
-import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
-import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
-import LibButton from "../LibButton/LibButton.vue"
-import type { TailwindClassProp } from "../shared/props.js"
-
 
+<script setup>
+import { computed, ref, useAttrs } from "vue";
+import IFa6RegularCopy from "~icons/fa6-regular/copy";
+import IFa6SolidXmark from "~icons/fa6-solid/xmark";
+import { copy } from "../../helpers/copy.js";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import { twMerge } from "../../utils/twMerge.js";
+import Icon from "../Icon/Icon.vue";
+import LibButton from "../LibButton/LibButton.vue";
 defineOptions({
-	name: "lib-notification",
-	inheritAttrs: false,
-})
-const $attrs = useAttrs()
-
-const props = withDefaults(defineProps<Props>(), {
-	handler: undefined,
-})
-
-const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary"
-
-/* Todo make this more flexible? */
-// eslint-disable-next-line @stylistic/space-in-parens
-const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
-
-const notificationEl = ref<null | HTMLElement>(null)
+  name: "lib-notification",
+  inheritAttrs: false
+});
+const $attrs = useAttrs();
+const props = defineProps({
+  notification: { type: null, required: true },
+  handler: { type: Object, required: false, default: void 0 }
+});
+const getColor = (notification, option) => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary";
+const buttonColors = computed(() => props.notification.options.map((option) => getColor(props.notification, option)));
+const notificationEl = ref(null);
 defineExpose({
-	focus: () => {
-		notificationEl.value?.focus()
-	},
-})
-
+  focus: () => {
+    notificationEl.value?.focus();
+  }
+});
 </script>
 
-<script lang="ts">
-type RealProps = {
-	notification: NotificationEntry
-	handler?: NotificationHandler
-}
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
-	RealProps
-{}
 </script>

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

@@ -0,0 +1,17 @@
+import { type HTMLAttributes } from "vue";
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+import type { TailwindClassProp } from "../shared/props.js.js";
+type RealProps = {
+    notification: NotificationEntry;
+    handler?: NotificationHandler;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: import("vue").DefineComponent<Props, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    handler: NotificationHandler;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;