@witchcraft/ui 0.0.1

package/dist/runtime/components/LibSimpleInput/LibSimpleInput.stories.js

@@ -0,0 +1,78 @@
+import * as components from "../index.js";
+const meta = {
+  component: components.LibSimpleInput,
+  title: "Components/SimpleInput",
+  args: {
+    modelValue: "Value",
+    placeholder: "Placeholder"
+  }
+};
+export default meta;
+export const Primary = {
+  args: {
+    modelValue: "some value"
+  },
+  render: (args) => ({
+    components,
+    // eslint-disable-next-line no-console
+    setup: () => ({ args, test: () => console.log("Enter") }),
+    template: `
+				<lib-simple-input
+				@keydown="test"
+				class="m-2" v-bind="args" v-model="args.modelValue" ></lib-simple-input>
+				<lib-simple-input class="m-2" v-bind="{...args, modelValue:''}" ></lib-simple-input>
+				`
+  })
+};
+export const InsideAFlexbox = {
+  render: (args) => ({
+    components,
+    setup: () => ({ args }),
+    template: `
+				Inside a flexbox:
+				<div class="flex flex-wrap">
+					<lib-simple-input v-bind="args" v-model="args.modelValue"></lib-simple-input>
+					<div class="border-1 border-danger-500 flex-1 whitespace-nowrap">Flex Grow: 1</div>
+				</div>
+		`
+  }),
+  args: {
+    stretch: true
+  }
+};
+export const Disabled = {
+  ...Primary,
+  args: {
+    disabled: true
+  }
+};
+export const Readonly = {
+  ...Primary,
+  args: {
+    readonly: true
+  }
+};
+export const Invalid = {
+  ...Primary,
+  args: {
+    valid: false
+  }
+};
+export const Borderless = {
+  ...Primary,
+  args: {
+    border: false
+  }
+};
+export const Numerical = {
+  ...Primary,
+  args: {
+    type: "number"
+  }
+};
+export const NumericalInsideAFlexbox = {
+  ...InsideAFlexbox,
+  args: {
+    type: "number"
+  }
+};

package/dist/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -0,0 +1,148 @@
+<template>
+<input
+	:id="id ?? fallbackId"
+	:class="twMerge(`
+			input
+			flex-1
+			grow-[999999]
+			rounded-sm
+			px-1
+			focus-outline
+			min-w-[2rem]
+			bg-inherit
+			placeholder:text-neutral-400
+			placeholder:focus:text-accent-300
+			read-only:bg-neutral-50
+			read-only:text-neutral-800
+			read-only:placeholder:select-none
+			read-only:placeholder:text-opacity-0
+			read-only:focus:placeholder:text-opacity-0
+			disabled:placeholder:text-nuetral-400
+			disabled:cursor-unset
+			disabled:bg-neutral-50
+			disabled:text-neutral-400
+			dark:read-only:bg-neutral-950
+			dark:read-only:text-neutral-200
+			dark:disabled:placeholder:text-nuetral-600
+			dark:disabled:bg-neutral-950
+			dark:disabled:text-neutral-500
+		`,
+		type === `text` && `
+			min-w-[10ch]
+			w-full
+		`,
+		type === `number` && `
+			w-12
+			placeholder:text-transparent
+			appearance-none
+			pr-0
+		`,
+		border && `
+			border
+			border-neutral-500
+			focus:border-accent-500
+			disabled:border-neutral-400
+			dark:disabled:border-neutral-600
+		`,
+		!valid && `
+			placeholder:text-danger-700
+			border-danger-700
+			focus:border-danger-700
+			outlined:!ring-danger-700
+			text-danger-800
+			dark:text-danger-400
+			dark:placeholder:text-danger-700
+			dark:border-danger-600
+		`,
+		($attrs as any)?.class
+	)"
+	:data-border="border"
+	:data-invalid="!valid"
+	:type="type"
+	:placeholder="placeholder"
+	:disabled="disabled"
+	:readonly="readonly"
+	v-model="modelValue"
+	v-bind="{...$attrs, class:undefined, ...ariaLabel}"
+	@keydown="handleKeydown"
+	@input="emit('input', $event as InputEvent)"
+>
+</template>
+
+
+<script lang="ts" setup generic="T">
+import { keys } from "@alanscodelog/utils/keys.js"
+import { pick } from "@alanscodelog/utils/pick.js"
+import type { MakeRequired } from "@alanscodelog/utils/types"
+import { castType } from "@alanscodelog/utils/utils"
+import { getCurrentInstance, type InputHTMLAttributes, type InputTypeHTMLAttribute,toRef,useAttrs } from "vue"
+
+import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { hasModifiers } from "../../helpers/hasModifiers.js"
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+
+
+defineOptions({
+	name: "lib-simple-input",
+	inheritAttrs: false,
+})
+
+const fallbackId = getFallbackId()
+
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	id: "",
+	placeholder: "",
+	valid: true,
+	label: "",
+	type: undefined,
+	...baseInteractivePropsDefaults
+})
+
+const modelValue = defineModel<T>({ required: true })
+
+const emit = defineEmits<{
+	/* User presses enter.*/
+	(e: "submit", val: T): void
+	(e: "input", val: InputEvent): void
+}>()
+const $attrs = useAttrs()
+const ariaLabel = useAriaLabel(props, fallbackId)
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === "Enter" && !hasModifiers(e)) {
+		emit("submit", modelValue.value)
+	}
+}
+
+</script>
+
+<script lang="ts">
+
+type RealProps =
+	& LinkableByIdProps
+	& LabelProps
+	& BaseInteractiveProps
+	& {
+		placeholder?: InputHTMLAttributes["placeholder"]
+		disabled?: InputHTMLAttributes["disabled"]
+		id?: InputHTMLAttributes["id"]
+		type?: InputHTMLAttributes["type"]
+		valid?: boolean
+	}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<
+		InputHTMLAttributes,
+		| "class"
+		| "readonly"
+		| "disabled"
+		| "onSubmit"
+		| "onInput"
+	> & TailwindClassProp>,
+	RealProps
+{}
+</script>

package/dist/runtime/components/LibSuggestions/LibSuggestions.stories.d.ts

@@ -0,0 +1,27 @@
+import type { StoryObj } from "@storybook/vue3";
+import LibSuggestions from "./LibSuggestions.vue.js";
+declare const meta: {
+    component: any;
+    title: string;
+    args: {
+        id: string;
+        modelValue: string;
+        label: string;
+        border: boolean;
+        suggestions: string[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof LibSuggestions>;
+/**
+ * The suggestions component is just the dropdown part.
+ *
+ * Here it is decoupled from the input.
+ *
+ * More examples can be found in the input component.
+ */
+export declare const Primary: Story;
+export declare const RestrictToSuggestions: Story;
+export declare const AlwaysShowAllSuggestions: any;
+export declare const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions: any;
+export declare const CustomSuggestionsObject: any;

package/dist/runtime/components/LibSuggestions/LibSuggestions.stories.js

@@ -0,0 +1,112 @@
+import { computed, onMounted, ref } from "vue";
+import LibSuggestions from "./LibSuggestions.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibSuggestions,
+  title: "Components/Suggestions",
+  args: {
+    id: "some-id",
+    modelValue: "",
+    label: "Some Label",
+    border: true,
+    suggestions: ["A", "AB", "ABC", "B", "BC", "C", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
+  }
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components: { ...components, LibSuggestions },
+    setup: () => {
+      const inputValue = ref(args.modelValue);
+      const modelValue = ref(args.modelValue);
+      const drawer = ref(null);
+      const keydownHandler = (e) => {
+        drawer.value?.inputKeydownHandler(e);
+      };
+      const suggestions = computed(() => drawer.value?.suggestions);
+      const blurHandler = (e) => {
+        drawer.value?.inputBlurHandler(e);
+      };
+      onMounted(() => {
+        drawer.value?.suggestions.open();
+      });
+      return {
+        args,
+        inputValue,
+        modelValue,
+        isOpen: ref(false),
+        suggestions,
+        drawer,
+        keydownHandler,
+        blurHandler
+      };
+    },
+    template: `
+			<div class="flex flex-col gap-3">
+			Temporary Value: {{inputValue}}
+			<br/>
+			Model Value (Final Value): <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
+
+			
+<br/>
+			Selected: {{suggestions?.filtered[suggestions.active]}}
+			<label>Some Label</label>
+				<lib-simple-input
+					:class="isOpen ? 'open' : ''"
+					v-model="inputValue"
+					@focus="suggestions.open()"
+					@blur="blurHandler"
+					@keydown="keydownHandler"
+				></lib-simple-input>
+				<lib-suggestions
+					ref="drawer"
+					v-bind="{...args}"
+					@update:isOpen="isOpen = $event"
+					v-model="modelValue"
+					v-model:inputValue="inputValue"
+				>
+					<template #item={item}>
+						{{item}}
+					</template>
+				</lib-suggestions>
+			</div>
+		`
+  })
+};
+export const RestrictToSuggestions = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    restrictToSuggestions: true
+  }
+};
+export const AlwaysShowAllSuggestions = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    restrictToSuggestions: true,
+    suggestionsFilter: (_input, items) => items
+  }
+};
+export const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    restrictToSuggestions: false,
+    suggestionsFilter: (_input, items) => items
+  }
+};
+export const CustomSuggestionsObject = {
+  ...Primary,
+  args: {
+    ...Primary.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) => item.label
+  }
+};

package/dist/runtime/components/LibSuggestions/LibSuggestions.vue

@@ -0,0 +1,198 @@
+<template>
+<div
+	v-if="suggestions.isOpen"
+	:id="`suggestions-${id ?? fallbackId}`"
+	:class="twMerge(`
+			suggestions
+			bg-bg
+			dark:bg-fg
+		`,
+		($.attrs as any)?.class
+	)"
+	:data-open="suggestions.isOpen"
+	role="listbox"
+	ref="el"
+	v-bind="{...$.attrs, class:undefined}"
+>
+	<!-- Click event is just in case, it should not really be triggered. We can do click selections via the blur handler. -->
+	<div :id="`suggestion-${id ?? fallbackId}-${index}`"
+		role="option"
+		:class="twMerge(`
+					px-1
+					user-select-none
+					cursor-pointer
+					px-2
+				`,
+			index=== suggestions.active && `bg-accent-200 dark:bg-accent-800`,
+			($.itemAttrs as any)?.class
+		)"
+		v-bind="{...$.itemAttrs, class:undefined}"
+		:aria-selected="index === suggestions.active ? true : false"
+		:aria-label="suggestions.getLabel(item)"
+		v-for="(item, index) in suggestions.filtered"
+		:key="item"
+		@mouseover="suggestions.active = index"
+		@mousedown.prevent
+		@mouseup="suggestions.enterSuggestion(index)"
+	>
+		<slot name="item" :item="item" :index="index">
+			{{ item }}
+		</slot>
+	</div>
+</div>
+</template>
+
+
+<script setup lang="ts" generic="TSuggestion extends string | object">
+
+import { type HTMLAttributes,reactive, ref } from "vue"
+
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { useSuggestions } from "../../composables/useSuggestions.js"
+import { hasModifiers } from "../../helpers/hasModifiers.js"
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type MultiValueProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
+
+defineOptions({
+	name: "lib-suggestions",
+	inheritAttrs: false,
+})
+
+const $ = useDivideAttrs(["item"] as const)
+
+const emits = defineEmits<SuggestionsEmits>()
+
+const fallbackId = getFallbackId()
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(), {
+	isValid: true,
+	canOpen: true,
+	values: undefined,
+	filterKeydown: undefined,
+	...baseInteractivePropsDefaults
+})
+
+/**
+ * The final valid value. This is *not* the value you want to share with the input. If `restrictToSuggestions` is true this will not update on any invalid values that `inputValue` might be set to.
+ *
+ * If suggestions are objects, this will be the string returned by the `suggestionLabel` prop.
+ */
+const $modelValue = defineModel<string>("modelValue", { required: true })
+/**
+ * If the element is bound to an input, this is the value that the input should be sharing.
+ *
+ * It allows the component to read even invalid output, and also to reset that invalid output when either modelValue is set to a new value, or when the component is closed via cancel.
+ */
+const $inputValue = defineModel<string >("inputValue", { default: "" })
+
+
+if (typeof props.suggestions?.[0] === "object" && !props.suggestionLabel && !props.suggestionsFilter) {
+	throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.")
+}
+
+const el = ref<HTMLElement | null>(null)
+const mousedown = ref(false)
+
+const suggestions = reactive(useSuggestions(
+	$inputValue,
+	$modelValue,
+	emits,
+	props
+))
+
+const inputKeydownHandler = (e: KeyboardEvent): void => {
+	if (props.filterKeydown?.(e)) return
+	if (hasModifiers(e)) return
+	if (e.key === "Enter") {
+		suggestions.enterSelected()
+		e.preventDefault()
+	} else if (e.key === "Escape") {
+		suggestions.cancel()
+		e.preventDefault()
+	} else if (!suggestions.isOpen && ["ArrowDown", "ArrowUp", "PageUp", "PageDown"].includes(e.key) && suggestions.available) {
+		suggestions.open()
+		e.preventDefault()
+		if (e.key === "PageUp") {
+			suggestions.first()
+		} else if (e.key === "PageDown") {
+			suggestions.last()
+		}
+	} else if (e.key === "ArrowUp") {
+		suggestions.prev()
+		e.preventDefault()
+	} else if (e.key === "ArrowDown") {
+		suggestions.next()
+		e.preventDefault()
+	} else if (e.key === "PageUp") {
+		suggestions.first()
+		e.preventDefault()
+	} else if (e.key === "PageDown") {
+		suggestions.last()
+		e.preventDefault()
+	}
+}
+const inputBlurHandler = (e: MouseEvent): void => {
+	if (props.filterBlur?.(e)) return
+	
+	if (!suggestions.isOpen) return
+
+	if (props.restrictToSuggestions) {
+		suggestions.cancel()
+	} else {
+		$modelValue.value = $inputValue.value
+	}
+	if (suggestions.isOpen) {
+		suggestions.close()
+	}
+}
+const inputFocusHandler = (e: FocusEvent): void => {
+	if (props.filterFocus?.(e)) return
+	suggestions.open()
+}
+
+defineExpose({
+	suggestions,
+	el,
+	/** A simple keydown handler that can be passed to an input to control the component while still focused inside it. */
+	inputKeydownHandler,
+	/** A blur handler for the input that controls the component. This also takes care of making clicking on a suggestion work, since otherwise if canOpen is set to false in the blur handler, no click event will fire. */
+	inputBlurHandler,
+	/** A focus handler for the input that controls the component. */
+	inputFocusHandler,
+})
+
+</script>
+
+<script lang="ts">
+type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes, {
+	/** Tailwind classes. */
+	class?: string
+}>>
+
+type RealProps =
+	& LinkableByIdProps
+	& LabelProps
+	& BaseInteractiveProps
+	& MultiValueProps
+	& {
+		/** Return true to prevent the keydown event from being handled. */
+		filterKeydown?: (e: KeyboardEvent) => boolean
+		/** Return true to prevent the blur event from being handled. */
+		filterBlur?: (e: MouseEvent) => boolean
+		/** Return true to prevent the focus event from being handled. */
+		filterFocus?: (e: FocusEvent) => boolean
+	}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes,"class" | "onSubmit"> & {
+		/** Tailwind classes. */
+		class?: string
+	}>,
+	/** @vue-ignore */
+	WrapperTypes,
+	RealProps
+{}
+
+</script>

package/dist/runtime/components/LibTable/LibTable.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibTable from "./LibTable.vue.js";
+declare const meta: Meta<typeof LibTable>;
+export default meta;
+type Story = StoryObj<typeof LibTable>;
+export declare const Primary: Story;
+export declare const NoCellBorders: Story;
+export declare const NoBorders: Story;
+export declare const NoCellBordersNoBorders: Story;
+export declare const SquareBorders: Story;
+export declare const NoHeader: Story;
+export declare const NoHeaderNoBorders: Story;
+export declare const NoHeaderNoCellBorders: Story;
+export declare const FitWidthFalse: Story;
+export declare const ThreeColSomeColsNotResizable: Story;
+export declare const FourColSomeColsNotResizable: Story;