@witchcraft/ui 0.3.25 → 0.4.0-beta.1

package/src/runtime/components/LibInputDeprecated/LibInputDeprecated.vue

@@ -1,419 +0,0 @@
-<template>
-<div
-	:class="twMerge(`input--outer-wrapper
-			grow
-			flex
-			flex-wrap
-			`,
-		disabled && `
-			text-neutral-400
-			dark:text-neutral-600
-		`,
-		($.wrapperAttrs as any)?.class
-	)"
-	tabindex="-1"
-	v-bind="{ ...$.wrapperAttrs, class: undefined }"
-	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: undefined }"
-		: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'] as any)?.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 as any)?.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 as any)?.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 as any)?.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 lang="ts">
-import { isBlank } from "@alanscodelog/utils/isBlank"
-import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
-import { computed, type HTMLAttributes, type InputHTMLAttributes, nextTick, ref, toRef, useSlots, watch } from "vue"
-import type { ComponentExposed } from "vue-component-type-helpers"
-
-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 { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
-
-/* #region base */
-defineOptions({
-	name: "LibSimpleInputDeprecated",
-	inheritAttrs: false
-})
-const $slots = useSlots()
-const emit = defineEmits<{
-	(e: "input", val: InputEvent): void
-	(e: "submit", val: string, suggestion?: any): void
-	(e: "keydown", val: KeyboardEvent): void
-	(e: "blur", val: FocusEvent): void
-	(e: "focus", val: FocusEvent): void
-	(e: "indicatorClick", val: MouseEvent): void
-}>()
-
-const fallbackId = getFallbackId()
-
-const props = withDefaults(defineProps<Props>(), {
-	valid: true,
-	suggestions: undefined,
-	updateOnlyOnSubmit: false,
-	unstyle: false, disabled: false, readonly: false, border: true
-})
-
-const $ = useDivideAttrs(["wrapper", "inner-wrapper", "suggestions", "multivalues"] as const)
-
-const $values = defineModel<string[] | undefined>("values", { default: undefined })
-const $modelValue = defineModel<string>({ required: true })
-
-const fullId = computed(() => props.id ?? fallbackId)
-
-const $inputValue = defineModel<string>("inputValue", { default: "" })
-$inputValue.value = $modelValue.value ?? ""
-
-const canEdit = computed(() => !props.disabled && !props.readonly)
-const suggestionsComponent = ref<ComponentExposed<typeof LibSuggestions> | null>(null)
-const activeSuggestion = ref(0)
-watch($modelValue, () => {
-	$inputValue.value = $modelValue.value
-})
-const inputWrapperEl = ref<HTMLElement | null>(null)
-const isOpen = ref(false)
-
-const suggestionsIndicatorClickHandler = (e: MouseEvent) => {
-	nextTick(() => {
-		if (props.suggestions) {
-			(suggestionsComponent.value as any)?.suggestions.toggle()
-		}
-	})
-	emit("indicatorClick", e)
-}
-
-const handleKeydown = (e: KeyboardEvent) => {
-	if (props.suggestions) {
-		if (e.key === "Enter" && activeSuggestion.value === -1 && $values.value) {
-			pushIfNotIn($values.value, [$inputValue.value])
-			$inputValue.value = ""
-			$modelValue.value = ""
-		} else {
-			(suggestionsComponent.value as any)?.inputKeydownHandler?.(e)
-			if ($values.value) {
-				$modelValue.value = ""
-			}
-		}
-	}
-	emit("keydown", e)
-}
-const handleBlur = (e: FocusEvent) => {
-	if (props.suggestions) {
-		(suggestionsComponent.value as any)?.inputBlurHandler?.(e)
-	}
-	emit("blur", e)
-}
-const handleFocus = (e: FocusEvent) => {
-	if (props.suggestions) {
-		(suggestionsComponent.value as any)?.inputFocusHandler?.(e)
-	}
-	emit("focus", e)
-}
-
-function addValue(val: string) {
-	if ($values.value === undefined) 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: string) => {
-		$inputValue.value = e
-		if (!props.suggestions && !props.updateOnlyOnSubmit && !props.restrictToSuggestions) {
-			$modelValue.value = e
-		}
-	},
-	onSubmit: (e: string) => {
-		if (!props.suggestions) {
-			$modelValue.value = $values.value ? "" : e
-			emit("submit", e)
-			if ($values.value) {
-				addValue(e)
-			}
-		}
-	},
-	...inputAriaProps.value,
-	canEdit: canEdit.value,
-	...$.value.attrs,
-	class: undefined
-}))
-
-function slotSubmit(val: any, _wasRemoved: boolean): void {
-	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: string) => $inputValue.value = e,
-	onSubmit: (e: string, suggestion?: any, wasRemoved?: boolean) => {
-		$modelValue.value = wasRemoved ? "" : e
-		emit("submit", e, suggestion)
-	},
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	"onUpdate:modelValue": (e: string | string[]) => {
-		$values.value &&= e as string[]
-	},
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	"onUpdate:isOpen": (e: boolean) => { isOpen.value = e },
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	"onUpdate:activeSuggestion": (e: number) => activeSuggestion.value = e,
-	...$.value.suggestionsAttrs,
-	class: undefined
-}))
-
-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: string[]) => $values.value = e,
-	...$.value.multivaluesAttrs,
-	class: undefined
-}))
-
-defineExpose({
-	suggestionsComponent,
-	el: inputWrapperEl
-})
-</script>
-
-<script lang="ts">
-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"
-		// https://github.com/vuejs/core/pull/14237
-		| "autocomplete"
-	> & TailwindClassProp>,
-	/** @vue-ignore */
-	Partial<WrapperTypes>,
-	RealProps { }
-</script>

package/src/runtime/components/LibLabel/LibLabel.stories.ts

@@ -1,33 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { Meta, StoryObj } from "@storybook/vue3"
-
-import Label from "./LibLabel.vue"
-
-import * as components from "../index.js"
-
-const meta: Meta<typeof Label> = {
-	component: Label,
-	title: "Components/Label",
-	args: {
-		slot: "label"
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof Label>
-
-export const Primary: Story = {
-	render: args => ({
-		components,
-		setup: () => ({ args }),
-		template: `
-				<lib-label v-bind="args">{{args.slot}}</lib-label>
-				<br/>
-				In flex col with input:
-				<div class="flex flex-col">
-					<lib-label v-bind="args">{{args.slot}}</lib-label>
-					<lib-simple-input modelValue="some input"></lib-simple-input>
-				</div>
-		`
-	})
-}

package/src/runtime/components/LibLabel/LibLabel.vue

@@ -1,65 +0,0 @@
-<template>
-<!-- we use data-disabled because labels have no disabled property technically -->
-<label
-	:id="`label-${id ?? fallbackId}`"
-	:class="!($attrs as any).unstyle && twMerge(`
-			pr-0
-			text-sm
-		`,
-		!valid && `text-danger-700`,
-		($attrs as any)?.class
-	)"
-	:data-disabled="disabled"
-	:data-invalid="!valid"
-	:for="id"
-	v-bind="{ ...$attrs, class: undefined }"
->
-	<slot/>
-</label>
-</template>
-
-<script setup  lang="ts">
-import { useAttrs } from "vue"
-
-import { twMerge } from "../../utils/twMerge.js"
-import { getFallbackId } from "../shared/props.js"
-
-defineOptions({
-	name: "LibLabel"
-})
-
-const fallbackId = getFallbackId()
-
-withDefaults(defineProps<Props>(), {
-	id: "",
-	valid: true,
-	unstyle: false, disabled: false, readonly: false, border: true
-})
-
-const $attrs = useAttrs()
-</script>
-
-<script lang="ts">
-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
-	{ }
-</script>
-
-<script lang="ts">
-
-</script>

package/src/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -1,123 +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 as any)?.class)
-	"
-	:data-disabled="disabled"
-	:data-read-only="readonly"
-	:aria-label="`Values for ${label}`"
-	:tabindex="disabled ? -1 : 0"
-	v-bind="{ ...$.attrs, class: undefined }"
->
-	<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 as any)?.class
-		)"
-		:tabindex="canEdit ? 0 : undefined"
-		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 lang="ts" generic="T extends string | number">
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
-import { computed, type HTMLAttributes } 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 type { BaseInteractiveProps, LabelProps, TailwindClassProp, WrapperProps } from "../shared/props.js"
-
-defineOptions({
-	name: "LibMultiValues",
-	inheritAttrs: false
-})
-
-const $ = useDivideAttrs(["item"] as const)
-const props = withDefaults(defineProps<Props>(), {
-	unstyle: false, disabled: false, readonly: false, border: true
-})
-
-const canEdit = computed(() => !props.disabled && !props.readonly)
-const $modelValue = defineModel<T[]>({ default: () => [] })
-
-const removeVal = (value: T) => {
-	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>