@witchcraft/ui 0.4.0 → 0.4.2

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

@@ -1,165 +0,0 @@
-import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.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/LibInputDeprecated/LibInputDeprecated.vue

@@ -1,387 +0,0 @@
-<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
-				has-[input:invalid]:border-danger-700
-				has-[input:invalid]:dark:border-danger-600
-			`,
-  border && !valid && `
-				border-danger-700
-				dark:border-danger-600
-			`,
-  isOpen && `rounded-b-none`,
-  !valid && `
-				outlined:!outline-danger-700
-				text-danger-800
-				dark:text-danger-400
-			`,
-  `
-				has-[input:invalid]:outline-danger-700
-				has-[input:invalid]:text-danger-800
-				has-[input:invalid]:dark:text-danger-400
-			`,
-  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";
-import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn";
-import { computed, nextTick, ref, toRef, useSlots, watch } from "vue";
-import IFa6SolidChevronUp from "~icons/fa6-solid/chevron-up";
-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 { getFallbackId } from "../shared/props.js";
-defineOptions({
-  name: "LibSimpleInputDeprecated",
-  inheritAttrs: false
-});
-const $slots = useSlots();
-const emit = defineEmits(["input", "submit", "keydown", "blur", "focus", "indicatorClick"]);
-const fallbackId = getFallbackId();
-const props = defineProps({
-  suggestions: { type: Array, required: false, default: void 0 },
-  suggestionLabel: { type: Function, required: false },
-  restrictToSuggestions: { type: Boolean, required: false },
-  updateOnlyOnSubmit: { type: Boolean, required: false, default: 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, default: false },
-  readonly: { type: Boolean, required: false, default: false },
-  border: { type: Boolean, required: false, default: true },
-  unstyle: { type: Boolean, required: false, default: false },
-  valid: { type: Boolean, required: false, default: true }
-});
-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,
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "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,
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "onUpdate:inputValue": (e) => $inputValue.value = e,
-  onSubmit: (e, suggestion, wasRemoved) => {
-    $modelValue.value = wasRemoved ? "" : e;
-    emit("submit", e, suggestion);
-  },
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "onUpdate:modelValue": (e) => {
-    $values.value &&= e;
-  },
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "onUpdate:isOpen": (e) => {
-    isOpen.value = e;
-  },
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "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,
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "onUpdate:modelValue": (e) => $values.value = e,
-  ...$.value.multivaluesAttrs,
-  class: void 0
-}));
-defineExpose({
-  suggestionsComponent,
-  el: inputWrapperEl
-});
-</script>
-
-<script>
-
-</script>