@witchcraft/ui 0.0.1 → 0.1.1

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

@@ -0,0 +1,352 @@
+<template>
+<div
+	:class="twMerge(
+  `input--outer-wrapper
+			grow
+			flex
+			flex-wrap
+			`,
+  disabled && `
+			text-neutral-400
+			dark:text-neutral-600
+		`,
+  $.wrapperAttrs?.class
+)"
+	tabindex="-1"
+	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
+	ref="inputWrapperEl"
+>
+	<slot name="label" v-bind="{ ...slotProps, label }">
+		<lib-label v-if="label || $slots.default"
+			:id="id ?? fallbackId"
+			:disabled="disabled"
+			:readonly="readonly"
+			:valid="valid"
+			class="input--label"
+		>
+			<slot v-bind="slotProps">
+				{{ label }}
+			</slot>
+		</lib-label>
+		<!-- Allow blurring when clicking the blank part of a label. -->
+		<div class="input--label-spacer flex-1"/>
+	</slot>
+	<!-- These are mostly copies of the classes on LibSimpleInput except made to work with disabled/readonly/etc manually since a div cannot have these states. -->
+	<div
+		:data-border="border"
+		:data-invalid="!valid"
+		:data-disabled="disabled"
+		:data-read-only="readonly"
+		:data-is-open="isOpen"
+		v-bind="{ ...$['inner-wrapperAttrs'], class: void 0 }"
+		:class="twMerge(
+  `input--inner-wrapper
+				relative
+				flex
+				flex-1
+				basis-[100%]
+				flex-wrap
+				rounded-sm
+				gap-2
+				px-2
+			`,
+  border && `
+				bg-inherit
+				border
+				border-neutral-500
+				outlined-within:border-accent-500
+			`,
+  isOpen && `rounded-b-none`,
+  !valid && `
+				border-danger-700
+				outlined:!outline-danger-700
+				text-danger-800
+				dark:text-danger-400
+				dark:border-danger-600
+				`,
+  readonly && `
+				bg-neutral-50
+				text-neutral-800
+				dark:bg-neutral-950
+				dark:text-neutral-200
+				`,
+  disabled && `
+				bg-neutral-50
+				text-neutral-400
+				dark:border-neutral-600
+				border-neutral-400
+			`,
+  $['inner-wrapperAttrs']?.class
+)"
+	>
+		<slot name="left" v-bind="slotProps"/>
+		<slot name="input" v-bind="{ ...inputProps, ...slotProps, suggestionsIndicatorClickHandler }">
+			<lib-simple-input
+				:class="twMerge(
+  `input--input p-0`,
+  !$slots.left && `-ml-2 pl-2`,
+  !$slots.right && (!$values || $values.length === 0) && !suggestions && `-mr-2 -pr-2`,
+  $.attrs?.class
+)"
+				v-bind="inputProps"
+			/>
+		</slot>
+		<slot name="indicator" v-bind="{ isOpen, suggestionsIndicatorClickHandler }">
+			<!-- todo, convert to button for accessibility ? -->
+			<div
+				v-if="suggestions"
+				:data-is-open="isOpen"
+				:class="twMerge(`input--indicator flex flex-col justify-center`)"
+				@click="suggestionsIndicatorClickHandler"
+			>
+				<icon :class="isOpen && `rotate-180`"> <i-fa6-solid-chevron-up/> </icon>
+			</div>
+		</slot>
+		<slot
+			name="values"
+			v-bind="{ ...multivaluesProps, ...slotProps }"
+		>
+			<template v-if="$values && $values.length > 0">
+				<lib-multi-values
+					:class="twMerge(
+  `
+							input--multivalues
+							grow-[9000]
+							justify-space-between
+							py-1
+						`,
+  !$slots.right && `-mr-1`,
+  $.multivaluesAttrs?.class
+)"
+					v-bind="multivaluesProps"
+				/>
+			</template>
+		</slot>
+		<slot name="right" v-bind="slotProps"/>
+
+		<slot v-if="suggestions" name="suggestions" v-bind="{ ...suggestionProps, ...slotProps }">
+			<!-- todo 1px needs to be abstracted to var -->
+			<lib-suggestions
+				:class="twMerge(
+  `
+						input--suggestions
+						absolute
+						-inset-x-px
+						z-10
+						rounded-b-sm
+						border-accent-500
+						border
+						top-full
+					`,
+  !border && `
+						rounded-sm
+					`,
+  $.suggestionsAttrs?.class
+)"
+				ref="suggestionsComponent"
+				v-bind="suggestionProps"
+			>
+				<template #item="itemSlotProps">
+					<slot name="suggestion-item" v-bind="itemSlotProps"/>
+				</template>
+			</lib-suggestions>
+		</slot>
+	</div>
+</div>
+</template>
+
+<script setup>
+import { isBlank } from "@alanscodelog/utils/isBlank.js";
+import { isObject } from "@alanscodelog/utils/isObject.js";
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js";
+import { computed, nextTick, onBeforeMount, ref, toRef, useSlots, watch } from "vue";
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
+import { useSuggestionsInputAria } from "../../composables/useSuggestions.js";
+import { twMerge } from "../../utils/twMerge.js";
+import Icon from "../Icon/Icon.vue";
+import LibLabel from "../LibLabel/LibLabel.vue";
+import LibMultiValues from "../LibMultiValues/LibMultiValues.vue";
+import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue";
+import LibSuggestions from "../LibSuggestions/LibSuggestions.vue";
+import { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
+defineOptions({
+  name: "lib-simple-input-deprecated",
+  inheritAttrs: false
+});
+const $slots = useSlots();
+const emit = defineEmits(["input", "submit", "keydown", "blur", "focus", "indicatorClick"]);
+const fallbackId = getFallbackId();
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  suggestions: { type: Array, required: false },
+  suggestionLabel: { type: Function, required: false },
+  restrictToSuggestions: { type: Boolean, required: false },
+  updateOnlyOnSubmit: { type: Boolean, required: false },
+  suggestionsFilter: { type: Function, required: false },
+  allowOpenEmpty: { type: Boolean, required: false },
+  canOpen: { type: Boolean, required: false },
+  canClose: { type: Boolean, required: false },
+  isValid: { type: Boolean, required: false },
+  suggestionSelector: { type: Function, required: false },
+  showSelectedValues: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false },
+  valid: { type: Boolean, required: false }
+}, {
+  valid: true,
+  suggestions: void 0,
+  updateOnlyOnSubmit: false,
+  ...baseInteractivePropsDefaults
+}));
+const $ = useDivideAttrs(["wrapper", "inner-wrapper", "suggestions", "multivalues"]);
+const $values = defineModel("values", { type: null, ...{ default: void 0 } });
+const $modelValue = defineModel({ type: String, ...{ required: true } });
+const fullId = computed(() => props.id ?? fallbackId);
+const $inputValue = defineModel("inputValue", { type: String, ...{ default: "" } });
+$inputValue.value = $modelValue.value ?? "";
+const canEdit = computed(() => !props.disabled && !props.readonly);
+const suggestionsComponent = ref(null);
+const activeSuggestion = ref(0);
+watch($modelValue, () => {
+  $inputValue.value = $modelValue.value;
+});
+const inputWrapperEl = ref(null);
+const isOpen = ref(false);
+const suggestionsIndicatorClickHandler = (e) => {
+  nextTick(() => {
+    if (props.suggestions) {
+      suggestionsComponent.value?.suggestions.toggle();
+    }
+  });
+  emit("indicatorClick", e);
+};
+const handleKeydown = (e) => {
+  if (props.suggestions) {
+    if (e.key === "Enter" && activeSuggestion.value === -1 && $values.value) {
+      pushIfNotIn($values.value, [$inputValue.value]);
+      $inputValue.value = "";
+      $modelValue.value = "";
+    } else {
+      suggestionsComponent.value?.inputKeydownHandler?.(e);
+      if ($values.value) {
+        $modelValue.value = "";
+      }
+    }
+  }
+  emit("keydown", e);
+};
+const handleBlur = (e) => {
+  if (props.suggestions) {
+    suggestionsComponent.value?.inputBlurHandler?.(e);
+  }
+  emit("blur", e);
+};
+const handleFocus = (e) => {
+  if (props.suggestions) {
+    suggestionsComponent.value?.inputFocusHandler?.(e);
+  }
+  emit("focus", e);
+};
+function addValue(val) {
+  if ($values.value === void 0) return;
+  if (isBlank(val)) return;
+  pushIfNotIn($values.value, [val]);
+  $inputValue.value = "";
+  $modelValue.value = "";
+}
+const suggestions = toRef(props, "suggestions");
+const inputAriaProps = useSuggestionsInputAria(
+  fullId,
+  isOpen,
+  activeSuggestion,
+  suggestions
+);
+const inputProps = computed(() => ({
+  id: fullId.value,
+  border: false,
+  disabled: props.disabled,
+  readonly: props.readonly,
+  isValid: props.valid,
+  onKeydown: handleKeydown,
+  onBlur: handleBlur,
+  onFocus: handleFocus,
+  modelValue: $inputValue.value,
+  "onUpdate:modelValue": (e) => {
+    $inputValue.value = e;
+    if (!props.suggestions && !props.updateOnlyOnSubmit && !props.restrictToSuggestions) {
+      $modelValue.value = e;
+    }
+  },
+  onSubmit: (e) => {
+    if (!props.suggestions) {
+      $modelValue.value = $values.value ? "" : e;
+      emit("submit", e);
+      if ($values.value) {
+        addValue(e);
+      }
+    }
+  },
+  ...inputAriaProps.value,
+  canEdit: canEdit.value,
+  ...$.value.attrs,
+  class: void 0
+}));
+function slotSubmit(val, _wasRemoved) {
+  emit("submit", val);
+}
+const slotProps = computed(() => ({
+  id: fullId.value,
+  isOpen: isOpen.value,
+  valid: props.valid,
+  disabled: props.disabled,
+  readonly: props.readonly,
+  emitSubmit: slotSubmit
+}));
+const suggestionProps = computed(() => ({
+  id: fullId.value,
+  suggestions: props.suggestions,
+  allowOpenEmpty: props.allowOpenEmpty,
+  restrictToSuggestions: props.restrictToSuggestions,
+  suggestionLabel: props.suggestionLabel,
+  suggestionsFilter: props.suggestionsFilter,
+  modelValue: $values.value ?? $modelValue.value.toString(),
+  inputValue: $inputValue.value,
+  isValid: props.isValid,
+  "onUpdate:inputValue": (e) => $inputValue.value = e,
+  onSubmit: (e, suggestion, wasRemoved) => {
+    $modelValue.value = wasRemoved ? "" : e;
+    emit("submit", e, suggestion);
+  },
+  "onUpdate:modelValue": (e) => {
+    $values.value &&= e;
+  },
+  "onUpdate:isOpen": (e) => {
+    isOpen.value = e;
+  },
+  "onUpdate:activeSuggestion": (e) => activeSuggestion.value = e,
+  ...$.value.suggestionsAttrs,
+  class: void 0
+}));
+const multivaluesProps = computed(() => ({
+  hasSlotRight: !$slots.right,
+  label: props.label,
+  border: props.border,
+  disabled: props.disabled,
+  readonly: props.readonly,
+  modelValue: $values.value,
+  "onUpdate:modelValue": (e) => $values.value = e,
+  ...$.value.multivaluesAttrs,
+  class: void 0
+}));
+defineExpose({
+  suggestionsComponent,
+  el: inputWrapperEl
+});
+</script>
+
+<script>
+
+</script>

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,49 @@
 <!-- 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 { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-label",
-})
-
-const fallbackId = getFallbackId()
-
- 
-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(/* @__PURE__ */ _mergeDefaults({
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false },
+  unstyled: { type: Boolean, required: false },
+  valid: { type: Boolean, required: false }
+}, {
+  id: "",
+  unstyled: void 0,
+  valid: true,
+  ...baseInteractivePropsDefaults
+}));
+const $attrs = useAttrs();
 </script>
 
-<script lang="ts">
+<script>
 
 </script>

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

@@ -0,0 +1,27 @@
+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;
+    unstyled: boolean;
+    valid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};