@witchcraft/ui 0.1.1 → 0.1.3

package/dist/runtime/components/LibLabel/LibLabel.vue

@@ -2,49 +2,65 @@
 <!-- we use data-disabled because labels have no disabled property technically -->
 <label
 	:id="`label-${id ?? fallbackId}`"
-	:class="!$attrs.unstyle && twMerge(
-  `
+	:class="!($attrs as any).unstyle && twMerge(`
 			pr-0
 			text-sm
 		`,
-  !valid && `text-danger-700`,
-  $attrs?.class
-)"
+		!valid && `text-danger-700`,
+		($attrs as any)?.class
+	)"
 	:data-disabled="disabled"
 	:data-invalid="!valid"
 	:for="id"
-	v-bind="{ ...$attrs, class: void 0 }"
+	v-bind="{...$attrs, class:undefined}"
 >
 	<slot/>
 </label>
 </template>
 
-<script setup>
-import { toRef, useAttrs } from "vue";
-import { twMerge } from "../../utils/twMerge.js";
-import { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
+<script setup  lang="ts">
+import type { MakeRequired } from "@alanscodelog/utils/types"
+import { type LabelHTMLAttributes,toRef,useAttrs } from "vue"
+
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+
+
 defineOptions({
-  name: "lib-label"
-});
-const fallbackId = getFallbackId();
-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 },
-  unstyled: { type: Boolean, required: false },
-  valid: { type: Boolean, required: false }
-}, {
-  id: "",
-  unstyled: void 0,
-  valid: true,
-  ...baseInteractivePropsDefaults
-}));
-const $attrs = useAttrs();
+	name: "lib-label",
+})
+
+const fallbackId = getFallbackId()
+
+// eslint-disable-next-line no-undef
+withDefaults(defineProps<Props>(), {
+	id: "",
+	unstyled: undefined,
+	valid: true,
+	...baseInteractivePropsDefaults,
+})
+
+const $attrs = useAttrs()
+</script>
+
+<script lang="ts">
+type RealProps =
+	& LinkableByIdProps
+	& LabelProps
+	& BaseInteractiveProps
+	& {
+		unstyled?: boolean
+		valid?: boolean
+	}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<LabelHTMLAttributes,"class"> & TailwindClassProp>,
+	RealProps
+	{ }
 </script>
 
-<script>
+<script lang="ts">
 
 </script>

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

@@ -0,0 +1,23 @@
+import type { StoryObj } from "@storybook/vue3";
+import LibMultiValues from "./LibMultiValues.vue.js";
+declare const meta: {
+    component: any;
+    title: string;
+    args: {
+        modelValue: string[];
+        border: boolean;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof LibMultiValues>;
+/**
+ * The multi-value component is just the values part beneath the input.
+ *
+ * This is a simple example of how it can be combined with the simple-input component to create an input with multiple values.
+ *
+ * Note that setting the `disabled` or `readonly` props won't prevent the component from accepting an updated `values` prop. Disabling adding must be done separately from whatever is controlling the component (e.g. the input in this case).
+ */
+export declare const Primary: Story;
+export declare const Disabled: any;
+export declare const Readonly: any;

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

@@ -0,0 +1,61 @@
+import { ref } from "vue";
+import LibMultiValues from "./LibMultiValues.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibMultiValues,
+  title: "Components/MultiValues",
+  args: {
+    modelValue: ["A", "B", "C"],
+    border: true
+  },
+  tags: ["!test"]
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components: { ...components, LibMultiValues },
+    setup: () => {
+      const inputValue = ref("B");
+      const multiValueEl = ref(null);
+      const onKeydownEnter = (e) => {
+        if (e.key === "Enter") args.modelValue.push(inputValue.value);
+      };
+      return {
+        args,
+        inputValue,
+        multiValueEl,
+        onKeydownEnter
+      };
+    },
+    template: `
+			<p>Simple Input connected to multi-value.</p>
+			<p>Note: You will be able to add values, including duplicates, even to the disabled/readonly version in this test, see the Input component for a properly connected approach.</p>
+			<p> Press enter to add value :</p>
+			<lib-simple-input
+				v-model="inputValue"
+				@keydown="onKeydownEnter"
+			>
+			</lib-simple-input>
+			<p>Multi-value component: </p>
+			<div class="flex justify-start">
+				<lib-multi-values
+					ref="multiValueEl"
+					v-bind="args"
+					v-model="args.modelValue"
+				/>
+			</div>
+		`
+  })
+};
+export const Disabled = {
+  ...Primary,
+  args: {
+    disabled: true
+  }
+};
+export const Readonly = {
+  ...Primary,
+  args: {
+    readonly: true
+  }
+};

package/dist/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -1,9 +1,7 @@
 <template>
 <div
 	v-if="$modelValue && $modelValue?.length > 0"
-	:class="
-  twMerge(
-    `
+	:class="twMerge(`
 		multivalues
 		group
 		flex
@@ -14,19 +12,17 @@
 		overflow-x-scroll
 		scrollbar-hidden
 	`,
-    $.attrs?.class
-  )
-"
+		($.attrs as any)?.class)
+	"
 	:data-disabled="disabled"
 	:data-read-only="readonly"
 	:aria-label="`Values for ${label}`"
 	:tabindex="disabled ? -1 : 0"
-	v-bind="{ ...$.attrs, class: void 0 }"
+	v-bind="{...$.attrs, class:undefined}"
 >
 	<div
 		:data-border="border"
-		:class="twMerge(
-  `
+		:class="twMerge(`
 				multivalues--item
 				flex-basis-0
 				min-w-2
@@ -39,24 +35,24 @@
 				px-1
 				text-xs
 				leading-none`,
-  !(disabled || readonly) && `
+			!(disabled || readonly) && `
 				group-focus:text-accent-500
 				focus:text-accent-500`,
-  border && `
+			border && `
 				rounded-sm
 				border-neutral-400
 				border
 				focus:border-accent-400
 			`,
-  border && (disabled || readonly) && `
+			border && (disabled || readonly) && `
 				border-neutral-200
 				focus:border-neutral-200
 				dark:border-neutral-800
 				dark:focus:border-neutral-800
 			`,
-  $.itemAttrs?.class
-)"
-		:tabindex="canEdit ? 0 : void 0"
+			($.itemAttrs as any)?.class
+		)"
+		:tabindex="canEdit ? 0 : undefined"
 		v-for="(value) of $modelValue"
 		:key="value"
 		@keydown.ctrl.c.prevent="copy(value.toString())"
@@ -75,37 +71,55 @@
 </div>
 </template>
 
-<script setup>
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js";
-import { computed } from "vue";
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
-import { copy } from "../../helpers/copy.js";
-import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-import LibButton from "../LibButton/LibButton.vue";
-import { baseInteractivePropsDefaults } from "../shared/props.js";
+<script setup lang="ts" generic="T extends string | number">
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
+import { computed, type HTMLAttributes } from "vue"
+
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { copy } from "../../helpers/copy.js"
+import { twMerge } from "../../utils/twMerge.js"
+import Icon from "../Icon/Icon.vue"
+import LibButton from "../LibButton/LibButton.vue"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+
+
 defineOptions({
-  name: "lib-multi-values",
-  inheritAttrs: false
-});
-const $ = useDivideAttrs(["item"]);
-const props = defineProps(/* @__PURE__ */ _mergeDefaults({
-  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 }
-}, {
-  ...baseInteractivePropsDefaults
-}));
-const canEdit = computed(() => !props.disabled && !props.readonly);
-const $modelValue = defineModel({ type: Array, ...{ default: () => [] } });
-const removeVal = (value) => {
-  if (!canEdit.value) return;
-  removeIfIn($modelValue.value, value);
-};
+	name: "lib-multi-values",
+	inheritAttrs: false,
+})
+
+const $ = useDivideAttrs(["item"] as const)
+const props = withDefaults(defineProps<Props>(), {
+	...baseInteractivePropsDefaults
+})
+
+
+const canEdit = computed(() => !props.disabled && !props.readonly)
+const $modelValue = defineModel<T[]>({ default: () => []})
+
+const removeVal = (value: T) => {
+	if (!canEdit.value) return
+	removeIfIn($modelValue.value, value)
+}
 </script>
 
-<script>
+<script lang="ts">
+type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes>>
+
+type RealProps =
+	& LabelProps
+	& BaseInteractiveProps
+	& {
+		border?: boolean
+	}
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	/** @vue-ignore */
+	WrapperTypes,
+	RealProps
+{}
 
 </script>
+

package/dist/runtime/components/LibNotifications/LibNotification.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibNotification from "./LibNotification.vue.js";
+declare const meta: Meta<typeof LibNotification>;
+export default meta;
+type Story = StoryObj<typeof LibNotification>;
+export declare const Primary: Story;
+export declare const WithoutTitle: Story;
+export declare const WithCode: Story;
+export declare const RequiresAction: Story;
+/** Should not have cancel cross in top corner. */
+export declare const Uncancellable: Story;
+export declare const CustomOptions: Story;
+export declare const CustomDefaultOption: Story;
+export declare const CustomDangerousOption: Story;
+export declare const CustomDefaultAndDangerousOption: Story;

package/dist/runtime/components/LibNotifications/LibNotification.stories.js

@@ -0,0 +1,126 @@
+import LibNotification from "./LibNotification.vue";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import * as components from "../index.js";
+const handler = new NotificationHandler();
+const meta = {
+  component: LibNotification,
+  title: "Components/Notification",
+  args: {}
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components: { ...components, LibNotification },
+    setup() {
+      return { args };
+    },
+    backgrounds: { disable: true },
+    template: `
+			<lib-notification v-bind="args"/>
+		`
+  }),
+  args: {
+    // @ts-expect-error calling protected method
+    notification: {
+      ...handler._createEntry({
+        title: `Notification`,
+        message: `This is a notification. Pick an option:`
+      }),
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      resolve: () => {
+      }
+    }
+  }
+};
+export const WithoutTitle = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      title: void 0
+    })
+  }
+};
+export const WithCode = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      code: "0001"
+    })
+  }
+};
+export const RequiresAction = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      requiresAction: true
+    })
+  }
+};
+export const Uncancellable = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      options: ["Ok"],
+      cancellable: false
+    })
+  }
+};
+export const CustomOptions = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      options: ["Ok", "Default Answer", "Cancel"]
+    })
+  }
+};
+export const CustomDefaultOption = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...CustomOptions.args.notification,
+      default: "Default Answer"
+    })
+  }
+};
+export const CustomDangerousOption = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...CustomOptions.args.notification,
+      options: ["Ok", "Dangerous Option", "Cancel"],
+      dangerous: ["Dangerous Option"]
+    })
+  }
+};
+export const CustomDefaultAndDangerousOption = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...CustomOptions.args.notification,
+      options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
+      default: "Default Answer",
+      dangerous: ["Dangerous Option"]
+    })
+  }
+};

package/dist/runtime/components/LibNotifications/LibNotification.vue

@@ -1,6 +1,5 @@
 <template>
-<div :class="twMerge(
-  `notification
+<div :class="twMerge(`notification
 		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
@@ -14,9 +13,8 @@
 		gap-2
 		p-2 m-2
 	`,
-  $attrs.class
-)"
-	v-bind="{ ...$attrs, class: void 0 }"
+	($attrs as any).class)"
+	v-bind="{ ...$attrs, class: undefined }"
 	tabindex="0"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
@@ -65,12 +63,11 @@
 			"
 		>
 			<lib-button :label="option"
-				:class="twMerge(
-  `
+				:class="twMerge(`
 					notification--option-button
 				`,
-  buttonColors[i] == 'secondary' && 'p-0'
-)"
+					buttonColors[i] == 'secondary' && 'p-0'
+				)"
 				:border="buttonColors[i] !== 'secondary'"
 				:color="buttonColors[i]"
 				v-for="option, i in notification.options"
@@ -81,33 +78,52 @@
 	</div>
 </div>
 </template>
+<script setup lang="ts">
+import { computed, type HTMLAttributes,ref, useAttrs } from "vue"
+
+import { copy } from "../../helpers/copy.js"
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
+import { twMerge } from "../../utils/twMerge.js"
+import Icon from "../Icon/Icon.vue"
+import LibButton from "../LibButton/LibButton.vue"
+import type { TailwindClassProp } from "../shared/props.js"
+
 
-<script setup>
-import { computed, ref, useAttrs } from "vue";
-import { copy } from "../../helpers/copy.js";
-import { NotificationHandler } from "../../helpers/NotificationHandler.js";
-import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-import LibButton from "../LibButton/LibButton.vue";
 defineOptions({
-  name: "lib-notification",
-  inheritAttrs: false
-});
-const $attrs = useAttrs();
-const props = defineProps({
-  notification: { type: null, required: true },
-  handler: { type: Object, required: false, default: void 0 }
-});
-const getColor = (notification, option) => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary";
-const buttonColors = computed(() => props.notification.options.map((option) => getColor(props.notification, option)));
-const notificationEl = ref(null);
+	name: "lib-notification",
+	inheritAttrs: false,
+})
+const $attrs = useAttrs()
+
+const props = withDefaults(defineProps<Props>(), {
+	handler: undefined,
+})
+
+const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary"
+
+/* Todo make this more flexible? */
+// eslint-disable-next-line @stylistic/space-in-parens
+const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
+
+const notificationEl = ref<null | HTMLElement>(null)
 defineExpose({
-  focus: () => {
-    notificationEl.value?.focus();
-  }
-});
+	focus: () => {
+		notificationEl.value?.focus()
+	},
+})
+
 </script>
 
-<script>
+<script lang="ts">
+type RealProps = {
+	notification: NotificationEntry
+	handler?: NotificationHandler
+}
 
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	RealProps
+{}
 </script>

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

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