@witchcraft/ui 0.1.1 → 0.1.3

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

@@ -2,37 +2,35 @@
 <div
 	v-if="$open"
 	:id="`suggestions-${id ?? fallbackId}`"
-	:class="twMerge(
-  `
+	:class="twMerge(`
 			suggestions
 			bg-bg
 			dark:bg-fg
 			dark:text-bg
 		`,
-  $.attrs?.class
-)"
+		($.attrs as any)?.class
+	)"
 	:data-open="$open"
 	role="listbox"
 	ref="el"
-	v-bind="{ ...$.attrs, class: void 0 }"
+	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(
-  `
+		:class="twMerge(`
 			suggestions--item
 			user-select-none
 			cursor-pointer
 			px-2
 		`,
-  index === suggestions.active && `
+			index=== suggestions.active && `
 				bg-accent-200
 				dark:bg-accent-800/70
 			`,
-  $.itemAttrs?.class
-)"
-		v-bind="{ ...$.itemAttrs, class: void 0 }"
+			($.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"
@@ -59,123 +57,158 @@
 </div>
 </template>
 
-<script setup>
-import { 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 LibCheckbox from "../LibCheckbox/LibCheckbox.vue";
-import { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
+
+<script setup lang="ts" generic="TSuggestion extends string | object, TValue extends string|string[]">
+
+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 LibCheckbox from "../LibCheckbox/LibCheckbox.vue"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
+
 defineOptions({
-  name: "lib-suggestions",
-  inheritAttrs: false
-});
-const $ = useDivideAttrs(["item"]);
-const emits = defineEmits(["submit", "update:isOpen", "update:activeSuggestion"]);
-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 },
-  filterKeydown: { type: Function, required: false },
-  filterBlur: { type: Function, required: false },
-  filterFocus: { type: Function, required: false },
-  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 }
-}, {
-  isValid: true,
-  canOpen: true,
-  filterKeydown: void 0,
-  ...baseInteractivePropsDefaults
-}));
-const $modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
-const $inputValue = defineModel("inputValue", { type: String, ...{ default: "" } });
-const $open = defineModel("open", { type: Boolean, ...{ default: false } });
+	name: "lib-suggestions",
+	inheritAttrs: false,
+})
+
+const $ = useDivideAttrs(["item"] as const)
+
+const emits = defineEmits<SuggestionsEmits>()
+
+const fallbackId = getFallbackId()
+const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(), {
+	isValid: true,
+	canOpen: true,
+	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<TValue>("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: "" })
+
+const $open = defineModel<boolean>("open", { default: false })
+
+
 if (typeof props.suggestions?.[0] === "object" && !props.suggestionLabel && !props.suggestionsFilter) {
-  throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.");
+	throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.")
 }
-const el = ref(null);
-const suggestions = reactive(useSuggestions(
-  $inputValue,
-  $modelValue,
-  $open,
-  emits,
-  props
-));
-const inputKeydownHandler = (e) => {
-  if (props.filterKeydown?.(e)) return;
-  if (hasModifiers(e)) return;
-  if (e.key === "Enter") {
-    suggestions.enterSelected(!Array.isArray($modelValue));
-    e.preventDefault();
-  } else if (e.key === "Escape") {
-    suggestions.cancel();
-    e.preventDefault();
-  } else if (!$open.value && ["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) => {
-  if (props.filterBlur?.(e)) return;
-  if (!$open.value) return;
-  if (props.restrictToSuggestions) {
-    suggestions.cancel();
-  } else {
-    if (!Array.isArray($modelValue.value)) {
-      $modelValue.value = $inputValue.value;
-    }
-  }
-  if ($open.value) {
-    suggestions.close();
-  }
-};
-const inputFocusHandler = (e) => {
-  if (props.filterFocus?.(e)) return;
-  suggestions.open();
-};
+
+const el = ref<HTMLElement | null>(null)
+
+const suggestions = reactive(useSuggestions<TSuggestion, TValue extends string[] ? true : false>(
+	$inputValue,
+	$modelValue as any,
+	$open,
+	emits,
+	props
+))
+
+const inputKeydownHandler = (e: KeyboardEvent): void => {
+	if (props.filterKeydown?.(e)) return
+	if (hasModifiers(e)) return
+	if (e.key === "Enter") {
+		suggestions.enterSelected(!Array.isArray($modelValue))
+		e.preventDefault()
+	} else if (e.key === "Escape") {
+		suggestions.cancel()
+		e.preventDefault()
+	} else if (!$open.value && ["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 (!$open.value) return
+
+	if (props.restrictToSuggestions) {
+		suggestions.cancel()
+	} else {
+		if (!Array.isArray($modelValue.value)) {
+			$modelValue.value = $inputValue.value as any
+		}
+	}
+	if ($open.value) {
+		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
-});
+	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>
+<script lang="ts">
+type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes, {
+	/** Tailwind classes. */
+	class?: string
+}>>
+
+type RealProps =
+	& LinkableByIdProps
+	& LabelProps
+	& BaseInteractiveProps
+	& {
+		/** 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;

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

@@ -0,0 +1,156 @@
+import LibTable from "./LibTable.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibTable,
+  title: "Components/Table"
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => ({ args }),
+    template: `
+				<div class="overflow-x-scroll scrollbar-hidden">
+					<lib-table
+						v-bind="args"
+					>
+					</lib-table>
+				</div>
+		`
+  }),
+  args: {
+    cols: ["prop1", "prop2", "prop3"],
+    values: [
+      { prop1: "Item1 Prop 1", prop2: "Item1 Prop 2", prop3: "Item1 Prop 3" },
+      { prop1: "Item2 Prop 1", prop2: "Item2 Prop 2", prop3: "Item2 Prop 3" },
+      { prop1: "Item3 Prop 1", prop2: "Item3 Prop 2", prop3: "Item3 Prop 3" }
+    ],
+    colConfig: { prop1: { name: "Header 1" }, prop2: { name: "Header 2" } },
+    itemKey: "prop1"
+  }
+};
+export const NoCellBorders = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    cellBorder: false
+  }
+};
+export const NoBorders = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    border: false
+  }
+};
+export const NoCellBordersNoBorders = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    cellBorder: false,
+    border: false
+  }
+};
+export const SquareBorders = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    rounded: false
+  }
+};
+export const NoHeader = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    header: false
+  }
+};
+export const NoHeaderNoBorders = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    header: false,
+    border: false
+  }
+};
+export const NoHeaderNoCellBorders = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    header: false,
+    cellBorder: false
+  }
+};
+export const FitWidthFalse = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    resizable: {
+      fitWidth: false
+    }
+  }
+};
+export const ThreeColSomeColsNotResizable = {
+  render: (args) => ({
+    components,
+    setup: () => ({ args }),
+    template: `
+			<lib-table
+				v-bind="args"
+			>
+			</lib-table>
+			<br>
+			<lib-table
+			v-bind="{...args, colConfig:args.colConfig2}"
+			>
+			</lib-table>
+			<br>
+			<lib-table
+				v-bind="{...args, colConfig:args.colConfig3}"
+			>
+			</lib-table>
+		`
+  }),
+  args: {
+    cols: ["prop1", "prop2", "prop3"],
+    itemKey: "prop1",
+    values: [
+      { prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3" }
+    ],
+    colConfig: { prop1: { name: "No Resize", resizable: false } },
+    colConfig2: { prop2: { name: "No Resize", resizable: false } },
+    colConfig3: { prop3: { name: "No Resize", resizable: false } }
+  }
+};
+export const FourColSomeColsNotResizable = {
+  render: (args) => ({
+    components,
+    setup: () => ({ args }),
+    template: `
+				<lib-table
+					v-bind="args"
+				>
+				</lib-table>
+				<br>
+				<lib-table
+				v-bind="{...args, colConfig:args.colConfig2}"
+				>
+			</lib-table>
+			<br>
+				<lib-table
+					v-bind="{...args, colConfig:args.colConfig3}"
+				>
+				</lib-table>
+		`
+  }),
+  args: {
+    cols: ["prop1", "prop2", "prop3", "prop4"],
+    values: [
+      { prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3", prop4: "Prop 4" }
+    ],
+    itemKey: "prop1",
+    colConfig: { prop1: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
+    colConfig2: { prop2: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
+    colConfig3: { prop1: { name: "No Resize", resizable: false }, prop4: { name: "No Resize", resizable: false } }
+  }
+};