@witchcraft/ui 0.3.24 → 0.4.0-beta.1

package/src/runtime/components/LibColorInput/LibColorInput.vue

@@ -1,203 +0,0 @@
-<template>
-<lib-popup
-	class="color-input--popup"
-	v-model="showPopup"
-	@close="$tempValue = undefined;emit('cancel')"
->
-	<template #button="{ extractEl }">
-		<!-- <div -->
-		<!-- 		class=" -->
-		<!-- 	flex -->
-		<!-- 				w-full -->
-		<!-- 	border -->
-		<!-- 				 " -->
-		<!-- 	v-extract-root-el="extractEl" -->
-		<!-- > -->
-
-		<!--  -->
-		<lib-button
-			:id="id ?? fallbackId"
-			:class="twMerge(`
-				p-0
-				color-input--button
-				flex flex-nowrap
-				min-w-4
-				overflow-hidden
-				[&_.button--label]:items-stretch
-				[&_.button--label]:gap-0
-				after:hidden
-			`,
-				($attrs as any).class
-			)"
-			:aria-label="t('color-input.aria-and-title-prefix') + stringColor"
-			:title="t('color-input.aria-and-title-prefix') + stringColor"
-			v-bind="{ ...$attrs, class: undefined }"
-			v-extract-root-el="extractEl"
-			@click="togglePopup"
-		>
-			<template #label>
-				<div
-					class="
-					color-input--swatch-wrapper
-					flex
-					w-full
-				"
-				>
-					<slot v-bind="{ stringColor, classes: swatchClasses }">
-						<div
-							:class="swatchClasses"
-							:style="`background:${stringColor}`"
-						/>
-					</slot>
-					<slot
-						v-if="$tempValue"
-						v-bind="{ tempStringColor, classes: swatchClasses }"
-						name="temp"
-					>
-						<div
-							:class="swatchClasses"
-							:style="`background:${tempStringColor}`"
-						/>
-					</slot>
-				</div>
-			</template>
-		</lib-button>
-	</template>
-	<template #popup="{ extractEl }">
-		<div
-			class="color-input--popup-wrapper p-5"
-			v-extract-root-el="extractEl"
-		>
-			<lib-color-picker
-				v-if="showPopup"
-				:id="id ?? fallbackId"
-				:allow-alpha="allowAlpha"
-				:custom-representation="customRepresentation"
-				:string-precision="stringPrecision"
-				v-model="internalTempValue"
-				v-model:temp-value="$tempValue"
-				@save="save"
-				@cancel="cancel"
-			/>
-		</div>
-	</template>
-</lib-popup>
-</template>
-
-<script setup lang="ts">
-import Color from "colorjs.io"
-import { type ButtonHTMLAttributes, computed, ref, useAttrs } from "vue"
-
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
-import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
-import type { HsvaColor, RgbaColor } from "../../types/index.js"
-import { twMerge } from "../../utils/twMerge.js"
-import LibButton from "../LibButton/LibButton.vue"
-import LibColorPicker from "../LibColorPicker/LibColorPicker.vue"
-import LibPopup from "../LibPopup/LibPopup.vue"
-import { getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
-defineOptions({
-	name: "LibColorInput"
-})
-
-const swatchClasses = `
-	color-input--swatch
-	after:content-vertical-holder
-	min-w-4
-	flex-1
-	relative
-	before:content-['']
-	before:absolute
-	before:inset-0
-	before:bg-transparency-squares
-	before:z-[-1]
-`
-
-const fallbackId = getFallbackId()
-
-const t = useInjectedI18n()
-/* const props =  */withDefaults(defineProps<Props>(), {
-	allowAlpha: true,
-	border: true,
-	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
-	stringPrecision: 3,
-	customRepresentation: undefined
-})
-const emit = defineEmits<{
-	(e: "save"): void
-	(e: "cancel"): void
-}>()
-
-function save() {
-	$value.value = internalTempValue.value
-	showPopup.value = false
-	$tempValue.value = undefined
-	emit("save")
-}
-function cancel() {
-	showPopup.value = false
-	$tempValue.value = undefined
-	emit("cancel")
-}
-
-const $attrs = useAttrs()
-
-const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
-const $tempValue = defineModel<RgbaColor | undefined>("tempValue", { required: false, default: () => (undefined) })
-
-const stringColor = computed(() => new Color("srgb", [
-	$value.value.r / 255,
-	$value.value.g / 255,
-	$value.value.b / 255
-], $value.value.a ?? 1).toString())
-
-const tempStringColor = computed(() => $tempValue.value
-	? new Color("srgb", [
-			$tempValue.value.r / 255,
-			$tempValue.value.g / 255,
-			$tempValue.value.b / 255
-		], $tempValue.value.a ?? 1).toString()
-	: "")
-
-const internalTempValue = ref({ ...$value.value })
-
-const showPopup = ref(false)
-
-const togglePopup = (): void => {
-	if (showPopup.value) {
-		$value.value = internalTempValue.value
-	}
-	showPopup.value = !showPopup.value
-}
-</script>
-
-<script lang="ts">
-type RealProps
-	= & LabelProps
-		& LinkableByIdProps
-		& {
-			allowAlpha?: boolean
-			border?: boolean
-			/** See ColorPicker.copyTransform */
-			copyTransform?: (val: HsvaColor, stringVal: string) => any
-			/** See ColorPicker.allowAlpha */
-			stringPrecision?: number
-			/** See ColorPicker.customRepresentation */
-			customRepresentation?: {
-				fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string
-			}
-		}
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes, "class">
-	& TailwindClassProp
-	& {
-		// why is this not already a part of button?
-		// eslint-disable-next-line @typescript-eslint/naming-convention
-		"aria-label": string
-	}>,
-	RealProps
-{}
-</script>

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

@@ -1,405 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { Meta, StoryObj } from "@storybook/vue3"
-import { ref, watchEffect } from "vue"
-
-import LibInputDeprecated from "./LibInputDeprecated.vue"
-
-import IconFaChevronLeft from "~icons/fa6-solid/chevron-left"
-import IconFaChevronRight from "~icons/fa6-solid/chevron-right"
-import IconFaSolidKeyboard from "~icons/fa6-solid/keyboard"
-import IconFaSolidTags from "~icons/fa6-solid/tags"
-
-import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
-import { createRecorderHandler, createRecorderWatchEffect } from "../../helpers/storybook.js"
-import Icon from "../Icon/Icon.vue"
-import * as components from "../index.js"
-import {
-	playBasicVModel,
-	playMultipleValues
-} from "../shared/storyHelpers/playInput.js"
-import {
-	playBasicClickSelect,
-	playBasicKeyboardSelect,
-	playBasicSelect
-} from "../shared/storyHelpers/playSuggestions.js"
-
-const meta = {
-	component: LibInputDeprecated as any,
-	title: "Components/LibInputDeprecated",
-	args: {
-		border: true,
-		label: "Some Label",
-		...{
-			_template: undefined
-		} as any
-	}
-} satisfies Meta<typeof LibInputDeprecated> & Meta<{ custom: string }>
-
-export default meta
-type Story = StoryObj<typeof LibInputDeprecated> // & StoryObj<typeof extraArgs>
-const allComponents = {
-	...components,
-	LibInputDeprecated,
-	Icon,
-	IconFaChevronRight,
-	IconFaChevronLeft,
-	IconFaSolidKeyboard,
-	IconFaSolidTags
-}
-
-const playAutosuggestSelectLike = async (context: { canvasElement: HTMLElement, args: any }) => {
-	await playBasicSelect(context)
-	await playBasicKeyboardSelect(context)
-	await playBasicClickSelect(context)
-}
-
-const setupModelValue = (args: any) => ({
-	modelValue: ref(args.modelValue ?? ""),
-	inputValue: ref(args.inputValue ?? "")
-})
-
-const setupModelValues = (args: any) => ({
-	values: ref(args.values ?? undefined)
-})
-
-const Base: Story = {
-	render: args => ({
-		components: allComponents,
-		setup: () => ({
-
-			...setupModelValue(args),
-			...setupModelValues(args),
-			args: {
-				...args,
-				updateOnlyOnSubmit: args.suggestions !== undefined
-			}
-		}),
-
-		template: (args as any)._template ?? `
-			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
-			<lib-input-deprecated
-				v-bind="args"
-				v-model:values="values"
-				v-model:inputValue="inputValue"
-				v-model="modelValue"
-				@submit="modelValue = $event"
-			>
-			</lib-input-deprecated>
-		`
-	})
-}
-
-export const Primary: Story = {
-	...Base,
-	play: playBasicVModel
-}
-
-export const Disabled: Story = {
-	...Base,
-	args: {
-		disabled: true
-	}
-}
-export const Readonly: Story = {
-	...Base,
-	args: {
-		readonly: true
-	}
-}
-export const Invalid: Story = {
-	...Base,
-	args: {
-		valid: false
-	}
-}
-
-export const AttrsPassword: Story = {
-	...Base,
-	args: {
-		type: "password"
-	} as any
-}
-export const AttrsDate: Story = {
-	...Base,
-	args: {
-		type: "date"
-	} as any
-}
-export const AttrsNumber: Story = {
-	...Base,
-	args: {
-		type: "number"
-	} as any
-}
-
-export const Borderless = {
-	...Base,
-	args: {
-		border: false,
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-	}
-}
-
-export const WithAutosuggest = {
-	...Base,
-	args: {
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-	},
-	play: playAutosuggestSelectLike
-}
-
-export const WithAutosuggestNoLabel = {
-	...Base,
-	args: {
-		label: undefined,
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-	},
-	play: playAutosuggestSelectLike
-}
-export const WithInstantAutosuggest = {
-	...Base,
-	args: {
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-	}
-}
-export const AutosuggestRestricted = {
-	...WithAutosuggest,
-	args: {
-		...WithAutosuggest.args,
-		restrictToSuggestions: true
-	},
-	play: playAutosuggestSelectLike
-}
-export const AutosuggestRestrictedWithClearOnClick = {
-	...WithAutosuggest,
-	args: {
-		...WithAutosuggest.args,
-		restrictToSuggestions: true,
-		_template: `
-				Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
-				Temp Value: <span class="inline-block" data-testid="temp-value">{{inputValue}}</span>\n
-				<lib-input-deprecated
-					v-bind="args"
-					v-model:values="values"
-					v-model:inputValue="inputValue"
-					v-model="modelValue"
-					@submit="modelValue = $event"
-					@click="inputValue = ''"
-				>
-				</lib-input-deprecated>
-			`
-	},
-	play: null
-}
-export const AutosuggestSelectLikeShowAllUnrestricted = {
-	...WithAutosuggest,
-	args: {
-		...WithAutosuggest.args,
-		restrictToSuggestions: false,
-		suggestionsFilter: (_input: string, items: string[]) => items
-	},
-	play: playAutosuggestSelectLike
-}
-export const AutosuggestObjectOptions = {
-	...WithAutosuggest,
-	args: {
-		...WithAutosuggest.args,
-		restrictToSuggestions: true,
-		suggestions: [
-			{ label: "A", other: "some data A" },
-			{ label: "AB", other: "some data AB" },
-			{ label: "ABC", other: "some data ABC" },
-			{ label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" }
-		],
-		suggestionLabel: (item: any) => item.label
-	},
-	play: playAutosuggestSelectLike
-}
-
-export const Slots: Story = {
-	render: args => ({
-		components: allComponents,
-		setup: () => ({
-			...setupModelValue(args),
-			...setupModelValues(args),
-			args: {
-				...args,
-				updateOnlyOnSubmit: args.suggestions !== undefined
-			}
-		}),
-		template: `
-			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
-
-			<lib-input-deprecated
-				v-bind="args"
-				v-model="modelValue"
-				v-model:values="values"
-			>
-				<template #label>
-					Custom Label Slot
-				</template>
-				<template #left>
-					<lib-button  class="px-0" :border="false" :label="'none'">
-						<icon><icon-fa-chevron-left/></icon>
-					</lib-button>
-				</template>
-				<template #right>
-					<lib-button  class="px-0" :border="false"  :label="'none'">
-						<icon><icon-fa-chevron-right/></icon>
-					</lib-button>
-				</template>
-			</lib-input-deprecated>
-		`
-	})
-}
-const MultipleValuesBase: Story = {
-	render: args => ({
-		components: allComponents,
-		setup: () => ({
-			...setupModelValue(args),
-			...setupModelValues(args),
-			args
-		}),
-
-		template: `
-			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
-			<br/>
-			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>\n
-			<lib-input-deprecated
-				v-bind="args"
-				v-model="modelValue"
-				v-model:values="values"
-			>
-				<template #left>
-					<lib-button class="px-0" :border="false" :disabled="args.disabled || args.readonly">
-						<icon><icon-fa-solid-tags/></icon>
-					</lib-button>
-				</template>
-			</lib-input-deprecated>
-		`
-	}),
-	args: {
-		values: ["A", "B", "C"]
-	}
-
-}
-/** Press enter to add a value. */
-export const WithMultipleValues: Story = {
-	...MultipleValuesBase,
-	play: playMultipleValues
-}
-
-// disabled tests, they are working fine in browser, weird, this will be deprecated anyways
-export const WithMultipleValuesWithSuggestions = {
-	...MultipleValuesBase,
-	args: {
-		...MultipleValuesBase.args,
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-	}
-	// play: playAutosuggestSelectLike
-}
-export const WithMultipleValuesWithSuggestionsNoSelected = {
-	...MultipleValuesBase,
-	args: {
-		...MultipleValuesBase.args,
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
-		showSelectedValues: false
-	}
-	// play: playAutosuggestSelectLike
-}
-export const WithMultipleValuesDisabled = {
-	...MultipleValuesBase,
-	args: {
-		...MultipleValuesBase.args,
-		disabled: true
-	}
-}
-export const WithMultipleValuesReadonly = {
-	...MultipleValuesBase,
-	args: {
-		...MultipleValuesBase.args,
-		readonly: true
-	}
-}
-
-export const InputSlotReplacement: Story = {
-	render: args => ({
-		components: allComponents,
-		directives: { vExtractRootEl },
-		setup: () => {
-			const recording = ref(false)
-			const recordingValue = ref("")
-			const modelValue = ref("K E Y S")
-			const values = ref<string[]>((args.values as any) ?? [])
-			const recorderEl = ref(null)
-			const recorder = createRecorderHandler(recordingValue, recording, modelValue, recorderEl)
-			watchEffect(createRecorderWatchEffect(recordingValue, recording, modelValue, values as any))
-			return {
-				recorder,
-				recording,
-				recordingValue,
-				recorderEl,
-				modelValue,
-				values,
-				args
-			}
-		},
-
-		template: `
-			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
-			<br/>
-			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>\n
-			<br/>
-			Recording: <span class="inline-block" data-testid="recording">{{recording}}</span>\n
-			<lib-input-deprecated
-				v-bind="args"
-				v-model="modelValue"
-				v-model:values="values"
-			>
-				<template #input >
-					<lib-recorder
-						class="p-0"
-						v-extract-root-el="_ => recorderEl = _"
-						:border="false"
-						:recordingValue="recordingValue"
-						:recorder="recorder"
-						v-model:recording="recording"
-						v-model="modelValue"
-						@recorder:click="recording = !recording"
-						@recorder:blur="recordingValue = modelValue; recording = false"
-					/>
-				</template>
-				<template #left>
-					<icon><icon-fa-solid-keyboard/></icon>
-				</template>
-			</lib-input-deprecated>
-		`
-	}),
-	args: {
-		values: ["A", "B", "C"]
-	}
-}
-
-export const NextToButton: Story = {
-	render: args => ({
-		components: allComponents,
-		setup: () => ({
-			...setupModelValue(args),
-			...setupModelValues(args),
-			args
-		}),
-
-		template: `
-		<div class="flex gap-2 items-center">
-			<lib-input-deprecated
-				v-bind="args"
-				v-model:values="values"
-				v-model="modelValue"
-				:label="undefined"
-			>
-			</lib-input-deprecated>
-			<lib-button>Button</lib-button>
-		</div>
-		`
-	})
-}