@witchcraft/ui 0.1.3 → 0.2.1-beta.1

package/README.md

@@ -79,11 +79,11 @@ Most slots where possible are passed all properties needed to replace them excep
 ```ts
 import { defineConfig } from "vite"
 
-import { WitchcraftUiResolver } from "@witchcraft/ui/build/WitchcraftUiResolver.js"
+import { WitchcraftUiResolver } from "@witchcraft/ui/build/WitchcraftUiResolver"
 import IconsResolver from "unplugin-icons/resolver"
 import Icons from "unplugin-icons/vite"
 import Components from "unplugin-vue-components/vite"
-import { unpluginIconViteOptions } from "@witchcraft/ui/build/unpluginIconViteOptions.js"
+import { unpluginIconViteOptions } from "@witchcraft/ui/build/unpluginIconViteOptions"
 
 export default defineConfig({
 	plugins: [
@@ -206,12 +206,9 @@ interface Props
 </script>
 
 <script lang="ts" setup>
-// eslint-disable-next-line no-duplicate-imports
-import { baseInteractivePropsDefaults } from "../shared/props.js"
-
 const props = withDefaults(defineProps<Props>(), {
 	id: "",
-	...baseInteractivePropsDefaults
+	unstyle: false, disabled:false, readonly:false, border:true,
 })
 const $attrs = useAttrs()
 </script>

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.1.3",
+  "version": "0.2.1-beta.1",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "3.6.0"
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,8 +1,8 @@
 import { indent, crop } from '@alanscodelog/utils';
 import { createResolver, defineNuxtModule, useLogger, addTemplate, addComponent, addImports, installModule, addTypeTemplate } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
-import { addImportsCustom } from '@witchcraft/nuxt-utils/utils/addImportsCustom.js';
-import { globFiles } from '@witchcraft/nuxt-utils/utils/globFiles.js';
+import { addImportsCustom } from '@witchcraft/nuxt-utils/utils/addImportsCustom';
+import { globFiles } from '@witchcraft/nuxt-utils/utils/globFiles';
 import { defu } from 'defu';
 import fs from 'fs';
 import { themeAsTailwindCss } from 'metamorphosis/tailwind';
@@ -100,16 +100,19 @@ const module = defineNuxtModule({
         logger.info(`Adding unplugin-icons`);
         config.plugins ??= [];
         config.plugins = [
-          // we must prepend or the custom style options don't work when the module is used
-          ViteComponents({
-            resolvers: [
-              IconsResolver()
-              // we don't need our resolver since we use nuxt instead
-            ]
-          }),
-          Icons({
-            ...unpluginIconViteOptions
-          }),
+          ...options.includeUnpluginIconsPlugins ? [
+            // we must prepend or the custom style options don't work when the module is used
+            ViteComponents({
+              resolvers: [
+                IconsResolver({ prefix: "i" })
+                // we don't need our resolver since we use nuxt instead
+              ]
+            }),
+            Icons({
+              compiler: "vue3",
+              ...unpluginIconViteOptions
+            })
+          ] : [],
           tailwindcss(),
           ...config.plugins
         ];

package/dist/runtime/build/generateTheme.js

@@ -1,4 +1,4 @@
-import { themeAsTailwindCss } from "metamorphosis/tailwind.js";
+import { themeAsTailwindCss } from "metamorphosis/tailwind";
 import fs from "node:fs";
 import { resolve } from "path";
 import { themeConvertionOpts } from "../tailwind/themeConvertionOpts.js";

package/dist/runtime/components/Aria/Aria.vue

@@ -2,15 +2,11 @@
 <div tabindex="0">{{ value }}</div>
 </template>
 
-<script  setup lang="ts">
-import type { PropType } from "vue"
-
-
-defineOptions({ name: "aria" })
-defineProps<{
-	// eslint-disable-next-line vue/no-restricted-props
-	value: string
-}>()
+<script setup>
+defineOptions({ name: "aria" });
+defineProps({
+  value: { type: String, required: true }
+});
 </script>
 
 <style scoped>

package/dist/runtime/components/Aria/Aria.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    value: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Icon/Icon.vue

@@ -1,43 +1,23 @@
 <template>
 <div
 	:class="twMerge('icon inline-block', $attrs?.class)"
-	v-bind="{...$attrs, class:undefined}"
+	v-bind="{ ...$attrs, class: void 0 }"
 >
 	<slot/>
 </div>
 </template>
 
-<script setup lang="ts">
-import { computed, type HTMLAttributes,useAttrs } from "vue"
-
-import { twMerge } from "../../utils/twMerge.js"
-
+<script setup>
+import { computed, useAttrs } from "vue";
+import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-	name: "icon",
-	inheritAttrs: false,
-})
-
-
-const $attrs = useAttrs() as any
-
-const props = defineProps<Props>()
-
-
+  name: "icon",
+  inheritAttrs: false
+});
+const $attrs = useAttrs();
+const props = defineProps({});
 </script>
 
-<script lang="ts">
-/**
- * Just a very simple wrapper for wrapping unplugin-icons in an inline-block div so the icon in the slot take's up a normal line height when it's alone.
- *
- * ```vue
- * 		<icon><i-...></icon>
- * ``
- */
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class">
-	> { }
 </script>
-

package/dist/runtime/components/Icon/Icon.vue.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from "vue";
+/**
+ * Just a very simple wrapper for wrapping unplugin-icons in an inline-block div so the icon in the slot take's up a normal line height when it's alone.
+ *
+ * ```vue
+ * 		<icon><i-...></icon>
+ * ``
+ */
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class">> {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibButton/LibButton.vue

@@ -1,7 +1,8 @@
 <template>
 <button
 	:id="id ?? fallbackId"
-	:class="!($attrs as any).unstyle && twMerge(`
+	:class="!$attrs.unstyle && twMerge(
+  `
 		button
 		flex
 		cursor-pointer
@@ -22,8 +23,8 @@
 		dark:disabled:text-neutral-500
 		dark:disabled:hover:text-neutral-500
 	`,
-		!color && `active:text-neutral-800` /* todo for colors */,
-		border && `
+  !color && `active:text-neutral-800`,
+  border && `
 			transition-all
 			bg-neutral-100
 			dark:bg-neutral-900
@@ -60,37 +61,37 @@
 			dark:disabled:border-neutral-800
 			dark:disabled:bg-neutral-900
 		`,
-		border && ( !color || color === `secondary` ) && `
+  border && (!color || color === `secondary`) && `
 			after:shadow-bg/90
 			hover:after:shadow-bg
 			dark:after:shadow-bg/20
 			dark:hover:after:shadow-bg/90
 		`,
-		!border && color === `primary` && `
+  !border && color === `primary` && `
 			font-bold
 			hover:text-accent-50
 		`,
-		!border && color === `ok` && `
+  !border && color === `ok` && `
 			text-ok-600 hover:text-ok-500
 			dark:text-ok-600 dark:hover:text-ok-500
 		`,
-		!border && color === `warning` && `
+  !border && color === `warning` && `
 			text-warning-500 hover:text-warning-300
 			dark:text-warning-600 dark:hover:text-warning-400
 		`,
-		!border && color === `danger` && `
+  !border && color === `danger` && `
 			text-danger-500 hover:text-danger-300
 			dark:text-danger-600 dark:hover:text-danger-400
 		`,
-		!border && color === `secondary` && `
+  !border && color === `secondary` && `
 			text-accent-700 hover:text-accent-500
 			dark:text-accent-600 dark:hover:text-accent-400
 		`,
-		!border && color === `primary` && `
+  !border && color === `primary` && `
 			text-accent-700 hover:text-accent-500
 			dark:text-accent-600 dark:hover:text-accent-400
 		`,
-		border && color === `ok` && `
+  border && color === `ok` && `
 			text-ok-950
 			hover:text-ok-800
 			bg-ok-400
@@ -105,7 +106,7 @@
 			dark:hover:border-ok-900
 			dark:hover:shadow-ok-900/30
 		`,
-		border && color === `warning` && `
+  border && color === `warning` && `
 			text-warning-950
 			hover:text-warning-900
 			bg-warning-300
@@ -119,7 +120,7 @@
 			dark:border-warning-700
 			dark:hover:shadow-warning-900/25
 		`,
-		border && color === `danger` && `
+  border && color === `danger` && `
 			text-danger-950
 			hover:text-danger-900
 			bg-danger-400
@@ -133,11 +134,11 @@
 			dark:border-danger-950
 			dark:hover:shadow-ranger-500/10
 		`,
-		border && color === `secondary` && `
+  border && color === `secondary` && `
 			text-accent-800
 			dark:text-accent-400
 		`,
-		border && color === `primary` && `
+  border && color === `primary` && `
 			text-bg
 			hover:text-bg
 			bg-accent-600
@@ -152,28 +153,28 @@
 			dark:hover:border-accent-700
 			dark:hover:shadow-accent-900/50
 		`,
-		($attrs as any)?.class
-	)"
-	:type="$attrs.type as any"
+  $attrs?.class
+)"
+	:type="$attrs.type"
 	:tabindex="0"
 	:disabled="disabled"
 	:data-border="border"
 	:data-color="color"
 	:aria-disabled="disabled"
 	v-bind="{
-		...autoTitle,
-		...$attrs,
-		class: undefined,
-		...ariaLabel,
-	}"
+  ...autoTitle,
+  ...$attrs,
+  class: void 0,
+  ...ariaLabel
+}"
 >
-	<slot name="label" v-bind="{id:`label-${id ?? fallbackId}`, classes:'button--label pointer-events-none flex flex-1 items-center justify-center gap-1'}">
+	<slot name="label" v-bind="{ id: `label-${id ?? fallbackId}`, classes: 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1' }">
 		<label :id="`label-${id ?? fallbackId}`" class="button--label pointer-events-none flex flex-1 items-center justify-center gap-1">
 			<slot name="icon"/>
 			<slot
-				v-bind="{ label}"
+				v-bind="{ label }"
 			>
-				<span v-if="label && !isBlank(label!)">
+				<span v-if="label && !isBlank(label)">
 					{{ label }}
 				</span>
 			</slot>
@@ -183,55 +184,33 @@
 </button>
 </template>
 
-<script setup  lang="ts">
-import { isBlank } from "@alanscodelog/utils/isBlank.js"
-import { type ButtonHTMLAttributes,computed, useAttrs } from "vue"
-
-import { useAriaLabel } from "../../composables/useAriaLabel.js"
-import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, type ButtonProps,getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
-
-const $attrs = useAttrs()
-
-
+<script setup>
+import { isBlank } from "@alanscodelog/utils/isBlank";
+import { computed, useAttrs } from "vue";
+import { useAriaLabel } from "../../composables/useAriaLabel.js";
+import { twMerge } from "../../utils/twMerge.js";
+import { getFallbackId } from "../shared/props.js";
+const $attrs = useAttrs();
 defineOptions({
-	name: "lib-button",
-})
-
-const fallbackId = getFallbackId()
-
-const props = withDefaults(defineProps<Props>(), {
-	color: false,
-	label: "",
-	...baseInteractivePropsDefaults
-})
-
-
-const ariaLabel = useAriaLabel(props, fallbackId)
+  name: "lib-button"
+});
+const fallbackId = getFallbackId();
+const props = defineProps({
+  id: { type: String, required: false },
+  label: { type: String, required: false, default: "" },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  border: { type: Boolean, required: false, default: true },
+  unstyle: { type: Boolean, required: false, default: false },
+  color: { type: [String, Boolean], required: false, default: false },
+  autoTitleFromAria: { type: Boolean, required: false }
+});
+const ariaLabel = useAriaLabel(props, fallbackId);
 const autoTitle = computed(() => ({
-	title: props.autoTitleFromAria
-		? ($attrs["aria-label"] ?? props.label) as string
-		: undefined,
-}))
-
+  title: props.autoTitleFromAria ? $attrs["aria-label"] ?? props.label : void 0
+}));
 </script>
 
-<script lang="ts">
-type RealProps =
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& ButtonProps
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes,"class" | "color" | "disabled">
-	& TailwindClassProp
-	& {
-		// why is this not already a part of button?
-		"aria-label": string
-	}>,
-	RealProps {}
 </script>

package/dist/runtime/components/LibButton/LibButton.vue.d.ts

@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type ButtonProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & ButtonProps;
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindClassProp & {
+    "aria-label": string;
+}>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+    label: string;
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {
+        id: string;
+        classes: string;
+    }) => any;
+} & {
+    icon?: (props: {}) => any;
+} & {
+    default?: (props: {
+        label: any;
+    }) => any;
+} & {
+    'icon-after'?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -1,32 +1,35 @@
 <template>
 <div
-	:class="twMerge(`
+	:class="twMerge(
+  `
 		checkbox--wrapper
 		flex
 		items-center
 		gap-1
 	`,
-		($.wrapperAttrs as any)?.class
-	)"
-	v-bind="{ ...$.wrapperAttrs, class: undefined }"
+  $.wrapperAttrs?.class
+)"
+	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
 	ref="el"
 >
 	<slot name="left"/>
 	<label
-		:class="twMerge(`
+		:class="twMerge(
+  `
 			checkbox--label
 			flex
 			items-center
 			gap-1
 		`,
-			($.labelAttrs as any)?.class
-		)"
-		v-bind="{ ...$.labelAttrs, class: undefined }"
+  $.labelAttrs?.class
+)"
+		v-bind="{ ...$.labelAttrs, class: void 0 }"
 		:for="id ?? fallbackId"
 	>
 		<input
 			:id="id ?? fallbackId"
-			:class="!($attrs as any).unstyle && twMerge(`
+			:class="!$attrs.unstyle && twMerge(
+  `
 				checkbox
 				focus-outline-no-offset
 				m-0
@@ -53,83 +56,49 @@
 				checked:after:bg-accent-700
 				disabled:border-neutral-500
 				disabled:checked:after:bg-neutral-700
-			`, !disabled && `cursor-pointer`,
-				($.attrs as any).class
-			)"
+			`,
+  !disabled && `cursor-pointer`,
+  $.attrs.class
+)"
 			type="checkbox"
 			:disabled="disabled"
 			ref="inputEl"
 			v-model="$value"
-			v-bind="{...$.attrs, class: undefined}"
+			v-bind="{ ...$.attrs, class: void 0 }"
 		>
 		<slot/> {{ label }}
 	</label>
 </div>
 </template>
-<script setup  lang="ts">
-import { keys } from "@alanscodelog/utils/keys.js"
-import { omit } from "@alanscodelog/utils/omit.js"
-import { pick } from "@alanscodelog/utils/pick.js"
-import type { MakeRequired } from "@alanscodelog/utils/types"
-import { computed, type HTMLAttributes, type InputHTMLAttributes,type PropType, ref, useAttrs, useSlots } from "vue"
-
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
-import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
-import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
+<script setup>
+import { ref, useSlots } from "vue";
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
+import { twMerge } from "../../utils/twMerge.js";
+import { getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-checkbox",
-	inheritAttrs: false,
-})
-
-const $ = useDivideAttrs(["label", "wrapper"])
-const $slots = useSlots()
-/* todo multi states */
-
-const fallbackId = getFallbackId()
-const props = withDefaults(defineProps<Props>(), {
-	...baseInteractivePropsDefaults,
-})
-
-
-const emits = defineEmits<{
-	/* User presses enter.*/
-	(e: "submit", val: boolean): void
-}>()
-
-const el = ref<null | HTMLElement>(null)
-const inputEl = ref<null | HTMLElement>(null)
-const $value = defineModel<boolean>("modelValue", { default: false })
-
-usePreHydrationValue(props.id ?? fallbackId, $value)
+  name: "lib-checkbox",
+  inheritAttrs: false
+});
+const $ = useDivideAttrs(["label", "wrapper"]);
+const $slots = useSlots();
+const fallbackId = getFallbackId();
+const props = defineProps({
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  border: { type: Boolean, required: false, default: true },
+  unstyle: { type: Boolean, required: false, default: false }
+});
+const emits = defineEmits(["submit"]);
+const el = ref(null);
+const inputEl = ref(null);
+const $value = defineModel("modelValue", { type: Boolean, ...{ default: false } });
+usePreHydrationValue(props.id ?? fallbackId, $value);
 </script>
 
-<script lang="ts">
-
-type WrapperTypes = Partial<WrapperProps<"label",HTMLAttributes, {
-	/** Tailwind classes. */
-	class?: string
-}>>
-
-type RealProps =
-
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		unstyle?: boolean
-	}
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<
-		InputHTMLAttributes,
-		"class" | "readonly" | "disabled" | "onSumbit"
-	> & TailwindClassProp>,
-	/** @vue-ignore */
-	WrapperTypes,
-	RealProps
-{}
 </script>

package/dist/runtime/components/LibCheckbox/LibCheckbox.vue.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+type WrapperTypes = Partial<WrapperProps<"label", HTMLAttributes, {
+    /** Tailwind classes. */
+    class?: string;
+}>>;
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    unstyle?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSumbit"> & TailwindClassProp>, 
+/** @vue-ignore */
+WrapperTypes, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    modelValue?: boolean;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: (val: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    modelValue?: boolean;
+}> & Readonly<{
+    onSubmit?: ((val: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    left?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};