@witchcraft/ui 0.1.1 → 0.1.3

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

@@ -1,19 +1,18 @@
 <template>
 <div
-	:class="twMerge(
-  `input--outer-wrapper
+	:class="twMerge(`input--outer-wrapper
 			grow
 			flex
 			flex-wrap
 			`,
-  disabled && `
+		disabled && `
 			text-neutral-400
 			dark:text-neutral-600
 		`,
-  $.wrapperAttrs?.class
-)"
+		($.wrapperAttrs as any)?.class,
+	)"
 	tabindex="-1"
-	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
+	v-bind="{...$.wrapperAttrs, class:undefined}"
 	ref="inputWrapperEl"
 >
 	<slot name="label" v-bind="{ ...slotProps, label }">
@@ -38,9 +37,8 @@
 		:data-disabled="disabled"
 		:data-read-only="readonly"
 		:data-is-open="isOpen"
-		v-bind="{ ...$['inner-wrapperAttrs'], class: void 0 }"
-		:class="twMerge(
-  `input--inner-wrapper
+		v-bind="{...$['inner-wrapperAttrs'], class:undefined}"
+		:class="twMerge(`input--inner-wrapper
 				relative
 				flex
 				flex-1
@@ -50,48 +48,48 @@
 				gap-2
 				px-2
 			`,
-  border && `
+			border && `
 				bg-inherit
 				border
 				border-neutral-500
 				outlined-within:border-accent-500
 			`,
-  isOpen && `rounded-b-none`,
-  !valid && `
+			isOpen && `rounded-b-none`,
+			!valid && `
 				border-danger-700
 				outlined:!outline-danger-700
 				text-danger-800
 				dark:text-danger-400
 				dark:border-danger-600
 				`,
-  readonly && `
+			readonly && `
 				bg-neutral-50
 				text-neutral-800
 				dark:bg-neutral-950
 				dark:text-neutral-200
 				`,
-  disabled && `
+			disabled && `
 				bg-neutral-50
 				text-neutral-400
 				dark:border-neutral-600
 				border-neutral-400
 			`,
-  $['inner-wrapperAttrs']?.class
-)"
+			($['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?.class
-)"
+					`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 }">
+		<slot name="indicator" v-bind="{isOpen, suggestionsIndicatorClickHandler }">
 			<!-- todo, convert to button for accessibility ? -->
 			<div
 				v-if="suggestions"
@@ -104,31 +102,29 @@
 		</slot>
 		<slot
 			name="values"
-			v-bind="{ ...multivaluesProps, ...slotProps }"
+			v-bind="{...multivaluesProps, ...slotProps}"
 		>
 			<template v-if="$values && $values.length > 0">
 				<lib-multi-values
-					:class="twMerge(
-  `
+					:class="twMerge(`
 							input--multivalues
 							grow-[9000]
 							justify-space-between
 							py-1
 						`,
-  !$slots.right && `-mr-1`,
-  $.multivaluesAttrs?.class
-)"
+						!$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 }">
+		<slot v-if="suggestions" name="suggestions" v-bind="{...suggestionProps, ...slotProps}">
 			<!-- todo 1px needs to be abstracted to var -->
 			<lib-suggestions
-				:class="twMerge(
-  `
+				:class="twMerge(`
 						input--suggestions
 						absolute
 						-inset-x-px
@@ -138,11 +134,11 @@
 						border
 						top-full
 					`,
-  !border && `
+					!border && `
 						rounded-sm
 					`,
-  $.suggestionsAttrs?.class
-)"
+					($.suggestionsAttrs as any)?.class,
+				)"
 				ref="suggestionsComponent"
 				v-bind="suggestionProps"
 			>
@@ -154,199 +150,229 @@
 	</div>
 </div>
 </template>
+<script setup lang="ts">
+import { isBlank } from "@alanscodelog/utils/isBlank.js"
+import { isObject } from "@alanscodelog/utils/isObject.js"
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js"
+import { computed,type HTMLAttributes,type InputHTMLAttributes, nextTick, onBeforeMount, ref, toRef, useSlots, watch } from "vue"
+import type { ComponentExposed } from "vue-component-type-helpers"
+
+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, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
-<script setup>
-import { isBlank } from "@alanscodelog/utils/isBlank.js";
-import { isObject } from "@alanscodelog/utils/isObject.js";
-import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js";
-import { computed, nextTick, onBeforeMount, ref, toRef, useSlots, watch } from "vue";
-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 { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
+
+/* #region base */
 defineOptions({
-  name: "lib-simple-input-deprecated",
-  inheritAttrs: false
-});
-const $slots = useSlots();
-const emit = defineEmits(["input", "submit", "keydown", "blur", "focus", "indicatorClick"]);
-const fallbackId = getFallbackId();
-const props = defineProps(/* @__PURE__ */ _mergeDefaults({
-  suggestions: { type: Array, required: false },
-  suggestionLabel: { type: Function, required: false },
-  restrictToSuggestions: { type: Boolean, required: false },
-  updateOnlyOnSubmit: { type: Boolean, required: 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 },
-  readonly: { type: Boolean, required: false },
-  border: { type: Boolean, required: false },
-  unstyle: { type: Boolean, required: false },
-  valid: { type: Boolean, required: false }
-}, {
-  valid: true,
-  suggestions: void 0,
-  updateOnlyOnSubmit: false,
-  ...baseInteractivePropsDefaults
-}));
-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);
+	name: "lib-simple-input-deprecated",
+	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,
+	...baseInteractivePropsDefaults,
+})
+
+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(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 = "";
+	$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 suggestions = toRef(props, "suggestions");
+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
-);
+	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,
-  "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);
+	id: fullId.value,
+	border: false,
+	disabled: props.disabled,
+	readonly: props.readonly,
+	isValid: props.valid,
+	onKeydown: handleKeydown,
+	onBlur: handleBlur,
+	onFocus: handleFocus,
+	modelValue: $inputValue.value,
+	"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
-}));
+	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,
-  "onUpdate:inputValue": (e) => $inputValue.value = e,
-  onSubmit: (e, suggestion, wasRemoved) => {
-    $modelValue.value = wasRemoved ? "" : e;
-    emit("submit", e, suggestion);
-  },
-  "onUpdate:modelValue": (e) => {
-    $values.value &&= e;
-  },
-  "onUpdate:isOpen": (e) => {
-    isOpen.value = e;
-  },
-  "onUpdate:activeSuggestion": (e) => activeSuggestion.value = e,
-  ...$.value.suggestionsAttrs,
-  class: void 0
-}));
+	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,
+	"onUpdate:inputValue": (e: string) => $inputValue.value = e,
+	onSubmit: (e: string, suggestion?: any, wasRemoved?: boolean) => {
+		$modelValue.value = wasRemoved ? "" : e
+		emit("submit", e, suggestion)
+	},
+	"onUpdate:modelValue": (e: string | string[]) => {
+		$values.value &&= e as string[]
+	},
+	"onUpdate:isOpen": (e: boolean) => { isOpen.value = e },
+	"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,
-  "onUpdate:modelValue": (e) => $values.value = e,
-  ...$.value.multivaluesAttrs,
-  class: void 0
-}));
+	hasSlotRight: !$slots.right,
+	label: props.label,
+	border: props.border,
+	disabled: props.disabled,
+	readonly: props.readonly,
+	modelValue: $values.value,
+	"onUpdate:modelValue": (e: string[]) => $values.value = e,
+	...$.value.multivaluesAttrs,
+	class: undefined,
+}))
+
+
 defineExpose({
-  suggestionsComponent,
-  el: inputWrapperEl
-});
+	suggestionsComponent,
+	el: inputWrapperEl,
+})
+
 </script>
+<script lang="ts">
 
-<script>
+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 { }
 </script>
+

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import Label from "./LibLabel.vue.js";
+declare const meta: Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof Label>;
+export declare const Primary: Story;

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

@@ -0,0 +1,25 @@
+import Label from "./LibLabel.vue";
+import * as components from "../index.js";
+const meta = {
+  component: Label,
+  title: "Components/Label",
+  args: {
+    slot: "label"
+  }
+};
+export default meta;
+export const Primary = {
+  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>
+		`
+  })
+};