@witchcraft/ui 0.4.0-beta.9 → 0.4.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.4.0-beta.9",
+  "version": "0.4.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/build/WitchcraftUiResolver.js

@@ -1,11 +1,10 @@
-const prefixless = ["Icon"];
 export const WitchcraftUiResolver = ({
   prefix = "W",
   filter = () => true
 } = {}) => (componentName) => {
   if (componentName.startsWith(prefix)) {
     const n = componentName.slice(1);
-    const filename = prefixless.includes(n) ? n : `W${n}`;
+    const filename = `W${n}`;
     if (!filter(n)) {
       return void 0;
     }

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

@@ -2,6 +2,8 @@ import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRoo
 import type { EmitsToProps, HTMLAttributes } from "vue";
 import type { TailwindClassProp } from "../../types/index.js";
 type __VLS_Props = {
+    title?: string;
+    description?: string;
     backdropClass?: string;
     /** Overrides reka-ui's DialogContentProps */
     contentProps?: DialogContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
@@ -16,13 +18,21 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_14: {}, __VLS_28: {
     class: string;
-}, __VLS_36: {};
+}, __VLS_36: {}, __VLS_38: {}, __VLS_46: {}, __VLS_54: {}, __VLS_62: {};
 type __VLS_Slots = {} & {
     button?: (props: typeof __VLS_14) => any;
 } & {
     backdrop?: (props: typeof __VLS_28) => any;
 } & {
     popup?: (props: typeof __VLS_36) => any;
+} & {
+    title?: (props: typeof __VLS_38) => any;
+} & {
+    description?: (props: typeof __VLS_46) => any;
+} & {
+    extra?: (props: typeof __VLS_54) => any;
+} & {
+    close?: (props: typeof __VLS_62) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;

package/dist/runtime/components/WPopup/WPopup.vue

@@ -51,9 +51,38 @@
 					bg-neutral-100
 					dark:bg-neutral-800
 					rounded-md
+					flex
+					flex-col
+					gap-3
+					p-2
 				`)"
 			>
-				<slot name="popup"/>
+				<slot name="popup">
+					<slot name="title">
+						<DialogTitle
+							v-if="title"
+							class="text-lg font-bold"
+						>
+							{{ title }}
+						</DialogTitle>
+					</slot>
+					<slot name="description">
+						<DialogDescription v-if="description">
+							{{ description }}
+						</DialogDescription>
+					</slot>
+					<slot name="extra"/>
+				</slot>
+				<DialogClose as-child>
+					<slot name="close">
+						<WButton
+							class="justify-self-end"
+							@click="modelValue = false"
+						>
+							Close
+						</WButton>
+					</slot>
+				</DialogClose>
 			</div>
 		</DialogContent>
 	</DialogPortal>
@@ -61,10 +90,22 @@
 </template>
 
 <script setup>
-import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTrigger } from "reka-ui";
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger
+} from "reka-ui";
 import { twMerge } from "../../utils/twMerge.js";
+import WButton from "../WButton/WButton.vue";
 defineOptions({ name: "WPopup", inheritAttrs: false });
 defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
   backdropClass: { type: String, required: false },
   contentProps: { type: Object, required: false },
   rootProps: { type: Object, required: false },

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

@@ -2,6 +2,8 @@ import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRoo
 import type { EmitsToProps, HTMLAttributes } from "vue";
 import type { TailwindClassProp } from "../../types/index.js";
 type __VLS_Props = {
+    title?: string;
+    description?: string;
     backdropClass?: string;
     /** Overrides reka-ui's DialogContentProps */
     contentProps?: DialogContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
@@ -16,13 +18,21 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_14: {}, __VLS_28: {
     class: string;
-}, __VLS_36: {};
+}, __VLS_36: {}, __VLS_38: {}, __VLS_46: {}, __VLS_54: {}, __VLS_62: {};
 type __VLS_Slots = {} & {
     button?: (props: typeof __VLS_14) => any;
 } & {
     backdrop?: (props: typeof __VLS_28) => any;
 } & {
     popup?: (props: typeof __VLS_36) => any;
+} & {
+    title?: (props: typeof __VLS_38) => any;
+} & {
+    description?: (props: typeof __VLS_46) => any;
+} & {
+    extra?: (props: typeof __VLS_54) => any;
+} & {
+    close?: (props: typeof __VLS_62) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;

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

@@ -23,8 +23,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     darkMode: import("../../main.lib.js").DarkModeState & import("../../main.lib.js").DarkModeCommands;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    theme: Theme;
     useBuiltinTranslations: boolean;
+    theme: Theme;
     outline: boolean;
     isClientSide: boolean;
     forceOutline: boolean;

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

@@ -23,8 +23,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     darkMode: import("../../main.lib.js").DarkModeState & import("../../main.lib.js").DarkModeCommands;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    theme: Theme;
     useBuiltinTranslations: boolean;
+    theme: Theme;
     outline: boolean;
     isClientSide: boolean;
     forceOutline: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.4.0-beta.9",
+  "version": "0.4.1",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",

package/src/runtime/build/WitchcraftUiResolver.ts

@@ -1,6 +1,5 @@
 import type { ComponentResolver } from "unplugin-vue-components"
 
-const prefixless = ["Icon"]
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const WitchcraftUiResolver = (
 	{
@@ -15,7 +14,7 @@ export const WitchcraftUiResolver = (
 ): { from: string } | undefined => {
 	if (componentName.startsWith(prefix)) {
 		const n = componentName.slice(1)
-		const filename = prefixless.includes(n) ? n : `W${n}`
+		const filename = `W${n}`
 		if (!filter(n)) {
 			return undefined
 		}

package/src/runtime/components/WPopup/WPopup.stories.ts

@@ -6,42 +6,86 @@ import WPopup from "./WPopup.vue"
 
 import * as components from "../index.js"
 
+type ExtraTestArgs = {
+	_slots: string
+}
 const meta: Meta<typeof WPopup> = {
 	component: WPopup,
-	title: "Components/Popup"
+	title: "Components/Popup",
+	args: {
+		title: "Popup Title",
+		description: "Popup Description"
+	}
 }
 
 export default meta
-type Story = StoryObj<typeof WPopup>
+type Story = StoryObj<typeof WPopup> & { args?: ExtraTestArgs }
 
 export const Primary: Story = {
-	render: args => ({
-		components,
-		setup: () => {
-			const value = ref(false)
-			return { args, value }
-		},
-		template: `
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup: () => {
+				const value = ref(false)
+				return { args, value }
+			},
+			template: `
 			<div class="test bg-transparency-squares flex items-center justify-center" style="height:80vh;border:1px solid black;">
-				<WPopup v-model="value" v-bind="args">
+				<WPopup
+					:title="args.title"
+					:description="args.description"
+					v-model="value"
+					v-bind="args"
+				>
+					${extraArgs._slots}
 					<template #button>
 						<WButton>Open Modal Popup</WButton>
 					</template>
-					<template #popup>
+					<template #extra>
 						<div
 							:style="{width: args.width, height: args.height}"
-							class="p-3"
 						>
-							<div>Popup Content</div>
-							<WButton class="mt-4" @click="value = false">Close</WButton>
+							<div>Extra Slot</div>
 						</div>
 					</template>
 				</WPopup>
 			</div>
 		`
-	})
+		}
+	}
 }
 
+export const OtherSlots = {
+	...Primary,
+	args: {
+		_slots: `
+			<template #title>
+				<div>Title Slot</div>
+			</template>
+			<template #description>
+				<div>Description Slot</div>
+			</template>
+			<template #close>
+				<div>Close Slot</div>
+			</template>
+			<template #backdrop>
+				<div>Backdrop Slot</div>
+			</template>
+		`
+	}
+}
+
+export const PopupSlots = {
+	...Primary,
+	args: {
+		_slots: `
+			<template #popup>
+				<div>Popup Slot - Replaces Other Slots except Close (note, you must provide reka's DialogTitle and DialogDescription to avoid it's warnings</div>
+			</template>
+		`
+	}
+}
 export const PopupLarge = {
 	...Primary,
 	args: {

package/src/runtime/components/WPopup/WPopup.vue

@@ -52,9 +52,38 @@
 					bg-neutral-100
 					dark:bg-neutral-800
 					rounded-md
+					flex
+					flex-col
+					gap-3
+					p-2
 				`)"
 			>
-				<slot name="popup"/>
+				<slot name="popup">
+					<slot name="title">
+						<DialogTitle
+							v-if="title"
+							class="text-lg font-bold"
+						>
+							{{ title }}
+						</DialogTitle>
+					</slot>
+					<slot name="description">
+						<DialogDescription v-if="description">
+							{{ description }}
+						</DialogDescription>
+					</slot>
+					<slot name="extra"/>
+				</slot>
+				<DialogClose as-child>
+					<slot name="close">
+						<WButton
+							class="justify-self-end"
+							@click="modelValue = false"
+						>
+							Close
+						</WButton>
+					</slot>
+				</DialogClose>
 			</div>
 		</DialogContent>
 	</DialogPortal>
@@ -66,17 +95,29 @@ import type {
 	DialogContentEmits,
 	DialogContentProps,
 	DialogRootEmits,
-	DialogRootProps } from "reka-ui"
-import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTrigger } from "reka-ui"
+	DialogRootProps
+} from "reka-ui"
+import {
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogOverlay,
+	DialogPortal,
+	DialogRoot,
+	DialogTitle,
+	DialogTrigger } from "reka-ui"
 import type { EmitsToProps, HTMLAttributes } from "vue"
 
 import type { TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
+import WButton from "../WButton/WButton.vue"
 
 defineOptions({ name: "WPopup", inheritAttrs: false })
 
 withDefaults(defineProps<
 	& {
+		title?: string
+		description?: string
 		backdropClass?: string
 		/** Overrides reka-ui's DialogContentProps */
 		contentProps?: DialogContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp