@witchcraft/ui 0.1.1 → 0.1.3

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/Input",
+  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

@@ -1,8 +1,7 @@
 <template>
 <input
 	:id="id ?? fallbackId"
-	:class="twMerge(
-  `
+	:class="twMerge(`
 			simple-input
 			flex-1
 			grow-[999999]
@@ -28,24 +27,24 @@
 			dark:disabled:bg-neutral-950
 			dark:disabled:text-neutral-500
 		`,
-  type === `text` && `
+		type === `text` && `
 			min-w-[10ch]
 			w-full
 		`,
-  type === `number` && `
+		type === `number` && `
 			w-12
 			placeholder:text-transparent
 			appearance-none
 			pr-0
 		`,
-  border && `
+		border && `
 			border
 			border-neutral-500
 			focus:border-accent-500
 			disabled:border-neutral-400
 			dark:disabled:border-neutral-600
 		`,
-  !valid && `
+		!valid && `
 			placeholder:text-danger-700
 			border-danger-700
 			focus:border-danger-700
@@ -55,8 +54,8 @@
 			dark:placeholder:text-danger-700
 			dark:border-danger-600
 		`,
-  $attrs?.class
-)"
+		($attrs as any)?.class
+	)"
 	:data-border="border"
 	:data-invalid="!valid"
 	:type="type"
@@ -64,54 +63,83 @@
 	:disabled="disabled"
 	:readonly="readonly"
 	v-model="modelValue"
-	v-bind="{ ...$attrs, class: void 0, ...ariaLabel }"
+	v-bind="{...$attrs, class:undefined, ...ariaLabel}"
 	@keydown="handleKeydown"
-	@input="emit('input', $event)"
+	@input="emit('input', $event as InputEvent)"
 >
 </template>
 
-<script setup>
-import { useAttrs } from "vue";
-import { useAriaLabel } from "../../composables/useAriaLabel.js";
-import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
-import { hasModifiers } from "../../helpers/hasModifiers.js";
-import { twMerge } from "../../utils/twMerge.js";
-import { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
+
+<script lang="ts" setup generic="T">
+import { type InputHTMLAttributes, useAttrs } from "vue"
+
+import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.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();
-const props = 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 },
-  placeholder: { type: null, required: false },
-  type: { type: null, required: false },
-  valid: { type: Boolean, required: false }
-}, {
-  id: "",
-  placeholder: "",
-  valid: true,
-  label: "",
-  type: void 0,
-  ...baseInteractivePropsDefaults
-}));
-const modelValue = defineModel({ type: null, ...{ required: true } });
-const emit = defineEmits(["submit", "input"]);
-const $attrs = useAttrs();
-const ariaLabel = useAriaLabel(props, fallbackId);
-function handleKeydown(e) {
-  if (e.key === "Enter" && !hasModifiers(e)) {
-    emit("submit", modelValue.value);
-  }
+	name: "lib-simple-input",
+	inheritAttrs: false,
+})
+
+const fallbackId = getFallbackId()
+
+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)
+	}
 }
-usePreHydrationValue(props.id ?? fallbackId, modelValue);
+usePreHydrationValue(props.id ?? fallbackId, modelValue)
+
 </script>
 
-<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
+  }
+};