@witchcraft/ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,45 @@
+import { type TableHTMLAttributes } from "vue";
+import type { ResizableOptions, TableColConfig } from "../../types/index.js.js";
+import type { TailwindClassProp } from "../shared/props.js.js";
+type T = any;
+type RealProps = {
+    resizable?: Partial<ResizableOptions>;
+    values?: T[];
+    itemKey?: keyof T | ((item: T) => string);
+    /** Let's the table know the shape of the data since values might be empty. */
+    cols?: (keyof T)[];
+    rounded?: boolean;
+    border?: boolean;
+    cellBorder?: boolean;
+    header?: boolean;
+    colConfig?: TableColConfig<T>;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<TableHTMLAttributes, "class" | "readonly" | "disabled"> & TailwindClassProp>, RealProps {
+}
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Props & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {
+            colKey: any;
+            style: string;
+            class: string;
+        }) => any) | undefined;
+    } & {
+        [x: string]: ((props: {
+            class: string;
+            item: any;
+            value: any;
+        }) => any) | undefined;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/Template/NAME.vue

@@ -1,49 +1,28 @@
-<!-- eslint-disable -->
 <template>
 <div :class="twMerge(`
 
-	`, ($attrs as any).class)"
-	v-bind="{...$attrs, class:undefined}"
+	`, $attrs.class)"
+	v-bind="{ ...$attrs, class: void 0 }"
 >
 	<slot/>
 </div>
 </template>
-<script setup  lang="ts">
- 
-import { computed, type HTMLAttributes, onBeforeUnmount, onMounted, type PropType, reactive, type Ref, ref, watch } from "vue"
-
-import { twMerge } from "../../utils/twMerge.js"
-import { baseInteractiveProps, type TailwindClassProp } from "../shared/props.js"
-
 
+<script setup>
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { twMerge } from "../../utils/twMerge.js";
+import { baseInteractiveProps } from "../shared/props.js";
 defineOptions({
-	name: "lib-name", /* todo */
-	inheritAttrs: false,
-})
-
-
-// const props = defineProps<{}>({ })
-
-const el = ref<null | HTMLElement>(null)
-
-const modelValue = defineModel<string>({ required: true })
-
-
+  name: "lib-name",
+  /* todo */
+  inheritAttrs: false
+});
+const el = ref(null);
+const modelValue = defineModel({ type: String, ...{ required: true } });
 </script>
 
-<script lang="ts">
+<script>
 export default {
-	name: "lib-name",
-}
-
-type RealProps = {
-}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class">
-		& TailwindClassProp
-		& RealProps
-	> { }
+  name: "lib-name"
+};
 </script>

package/dist/runtime/components/Template/NAME.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    modelValue: string;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    modelValue: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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/TestControls/TestControls.vue

@@ -7,13 +7,10 @@
 </div>
 </template>
 
-<script setup lang="ts">
-import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue"
-
-defineOptions({ name: "test-controls" })
-defineProps< {
-	showOutline: boolean
-}>()
-
+<script setup>
+import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue";
+defineOptions({ name: "test-controls" });
+defineProps({
+  showOutline: { type: Boolean, required: true }
+});
 </script>
-

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    showOutline: boolean;
+};
+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/directives/vResizableCols.js

@@ -48,7 +48,7 @@ export const vResizableCols = {
     return {};
   }
 };
-const setWidth = (col, amountInPx, el) => {
+function setWidth(col, amountInPx, el) {
   const $el = getElInfo(el);
   const width = Math.max($el.margin, amountInPx);
   const index = getColEls(el).findIndex((_) => col === _);
@@ -57,12 +57,12 @@ const setWidth = (col, amountInPx, el) => {
   } else {
     $el.widths.value[index] = `${width}px`;
   }
-};
-const getBox = (el) => {
+}
+function getBox(el) {
   const rect = el.getBoundingClientRect();
   return { x: Math.round(rect.x), width: Math.round(rect.width) };
-};
-const getCols = (el) => {
+}
+function getCols(el) {
   const $el = getElInfo(el);
   if (!$el.target) unreachable();
   let col = getColEls(el)[$el.grips.get($el.target)];
@@ -77,75 +77,81 @@ const getCols = (el) => {
     }
   }
   return { col, colNext };
-};
-const createPointerDownHandler = (el) => (e) => {
-  const $el = getElInfo(el);
-  if (!$el.isDragging) {
-    castType(e.target);
-    $el.target = e.target;
-    $el.isDragging = true;
-    e.preventDefault();
-    document.addEventListener("pointerup", $el.pointerUpHandler);
-    const { col, colNext } = getCols(el);
-    if (col === null || colNext === null) {
-      el.classList.add("resizable-cols-error");
-    } else {
-      document.addEventListener("pointermove", $el.pointerMoveHandler);
-      const box = getBox(col);
-      if (box) {
-        $el.offset = e.pageX - (box.x + box.width);
+}
+function createPointerDownHandler(el) {
+  return (e) => {
+    const $el = getElInfo(el);
+    if (!$el.isDragging) {
+      castType(e.target);
+      $el.target = e.target;
+      $el.isDragging = true;
+      e.preventDefault();
+      document.addEventListener("pointerup", $el.pointerUpHandler);
+      const { col, colNext } = getCols(el);
+      if (col === null || colNext === null) {
+        el.classList.add("resizable-cols-error");
+      } else {
+        document.addEventListener("pointermove", $el.pointerMoveHandler);
+        const box = getBox(col);
+        if (box) {
+          $el.offset = e.pageX - (box.x + box.width);
+        }
       }
     }
-  }
-};
-const createPointerMoveHandler = (el) => (e) => {
-  const $el = getElInfo(el);
-  if ($el.isDragging) {
-    e.preventDefault();
-    const { col, colNext } = getCols(el);
-    if (col !== null) {
-      const leftBox = getBox(col);
-      const oldWidth = leftBox.width;
-      const leftBound = leftBox.x;
-      const rightBox = colNext ? getBox(colNext) : getBox(el);
-      const rightBound = rightBox.x + rightBox.width;
-      const margin = $el.margin;
-      const pos = e.pageX - $el.offset;
-      if ($el.fitWidth) {
-        if (pos > leftBound + margin && pos < rightBound - margin) {
-          const newWidth = pos - leftBound;
-          const diff = oldWidth - newWidth;
-          if (rightBox.width + diff < margin) {
-            el.classList.add("resizable-cols-error");
-            return;
+  };
+}
+function createPointerMoveHandler(el) {
+  return (e) => {
+    const $el = getElInfo(el);
+    if ($el.isDragging) {
+      e.preventDefault();
+      const { col, colNext } = getCols(el);
+      if (col !== null) {
+        const leftBox = getBox(col);
+        const oldWidth = leftBox.width;
+        const leftBound = leftBox.x;
+        const rightBox = colNext ? getBox(colNext) : getBox(el);
+        const rightBound = rightBox.x + rightBox.width;
+        const margin = $el.margin;
+        const pos = e.pageX - $el.offset;
+        if ($el.fitWidth) {
+          if (pos > leftBound + margin && pos < rightBound - margin) {
+            const newWidth = pos - leftBound;
+            const diff = oldWidth - newWidth;
+            if (rightBox.width + diff < margin) {
+              el.classList.add("resizable-cols-error");
+              return;
+            }
+            setWidth(col, newWidth, el);
+            setWidth(colNext, rightBox.width + diff, el);
+          }
+        } else {
+          if (pos > leftBound + margin) {
+            const newWidth = pos - leftBound;
+            setWidth(col, newWidth, el);
           }
-          setWidth(col, newWidth, el);
-          setWidth(colNext, rightBox.width + diff, el);
-        }
-      } else {
-        if (pos > leftBound + margin) {
-          const newWidth = pos - leftBound;
-          setWidth(col, newWidth, el);
         }
+        positionGrips(el);
       }
-      positionGrips(el);
     }
-  }
-};
-const createPointerUpHandler = (el) => (e) => {
-  const $el = getElInfo(el);
-  if ($el.isDragging) {
-    e.preventDefault();
-    $el.isDragging = false;
-    el.classList.remove("resizable-cols-error");
-    $el.offset = 0;
-    delete $el.target;
-    document.removeEventListener("pointermove", $el.pointerMoveHandler);
-    document.removeEventListener("pointerup", $el.pointerUpHandler);
-    document.removeEventListener("pointerleave", $el.pointerLeaveHandler);
-  }
-};
-const createGrip = () => {
+  };
+}
+function createPointerUpHandler(el) {
+  return (e) => {
+    const $el = getElInfo(el);
+    if ($el.isDragging) {
+      e.preventDefault();
+      $el.isDragging = false;
+      el.classList.remove("resizable-cols-error");
+      $el.offset = 0;
+      delete $el.target;
+      document.removeEventListener("pointermove", $el.pointerMoveHandler);
+      document.removeEventListener("pointerup", $el.pointerUpHandler);
+      document.removeEventListener("pointerleave", $el.pointerLeaveHandler);
+    }
+  };
+}
+function createGrip() {
   const grip = document.createElement("div");
   grip.style.position = "absolute";
   grip.style.cursor = "col-resize";
@@ -153,31 +159,31 @@ const createGrip = () => {
   grip.style.bottom = "0";
   grip.classList.add("grip");
   return grip;
-};
+}
 const removeGrips = (el) => {
   const grips = Array.from(el.querySelectorAll(".grip") ?? []);
   for (const grip of grips) {
     el.removeChild(grip);
   }
 };
-const getTestGripSize = (el) => {
+function getTestGripSize(el) {
   const testGrip = createGrip();
   el.appendChild(testGrip);
   const dynamicMinWidth = getBox(testGrip).width * 3;
   el.removeChild(testGrip);
   return dynamicMinWidth;
-};
-const getElInfo = (el) => {
+}
+function getElInfo(el) {
   const $el = elMap.get(el);
   if (!$el) unreachable("El went missing.");
   return $el;
-};
-const getColEls = (el) => {
+}
+function getColEls(el) {
   const $el = elMap.get(el);
   if (!$el) unreachable("El went missing.");
   return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > td"}`)];
-};
-const setupColumns = (el, opts) => {
+}
+function setupColumns(el, opts) {
   const gripWidth = getTestGripSize(el);
   const $el = {
     grips: /* @__PURE__ */ new Map(),
@@ -207,8 +213,8 @@ const setupColumns = (el, opts) => {
   }
   positionGrips(el);
   el.classList.add("resizable-cols-setup");
-};
-const positionGrips = (el) => {
+}
+function positionGrips(el) {
   let xPos = 0;
   const $el = getElInfo(el);
   for (const grip of $el.grips.keys()) {
@@ -220,8 +226,8 @@ const positionGrips = (el) => {
     grip.style.left = `${xPos + colBox.width - gripBox.width / 2}px`;
     xPos += colBox.width;
   }
-};
-const setColWidths = (el, children) => {
+}
+function setColWidths(el, children) {
   const $el = getElInfo(el);
   const header = children ?? getColEls(el).slice(0, $el.colCount);
   const len = $el.colCount;
@@ -239,8 +245,8 @@ const setColWidths = (el, children) => {
   } else {
     el.style.minWidth = "";
   }
-};
-const teardownColumns = (el) => {
+}
+function teardownColumns(el) {
   const $el = getElInfo(el);
   el.removeEventListener("pointerdown", $el.pointerDownHandler);
   document.removeEventListener("pointermove", $el.pointerMoveHandler);
@@ -251,4 +257,4 @@ const teardownColumns = (el) => {
   elMap.delete(el);
   el.classList.remove("resizable-cols-setup");
   removeGrips(el);
-};
+}

package/dist/types.d.mts

@@ -1,7 +1,3 @@
-import type { NuxtModule } from '@nuxt/schema'
+export { default } from './module.mjs'
 
-import type { default as Module } from './module.js'
-
-export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
-
-export { default } from './module.js'
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@witchcraft/ui",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Vue component library.",
 	"type": "module",
 	"main": "./dist/runtime/main.lib.js",
@@ -53,8 +53,8 @@
 		"./utils.css": "./src/runtime/assets/utils.css",
 		"./base.css": "./src/runtime/assets/base.css",
 		"./nuxt": {
-			"import": "./dist/module.mjs",
-			"require": "./dist/module.cjs"
+			"types": "./dist/types.d.mts",
+			"import": "./dist/module.mjs"
 		},
 		"./types": {
 			"types": "./dist/runtime/types/index.d.ts",
@@ -103,8 +103,8 @@
 		"@alanscodelog/utils": "^5.1.0",
 		"@egoist/vue-to-react": "^1.2.0",
 		"@iconify/json": "^2.2.323",
-		"@nuxt/kit": "^3.16.2",
-		"@nuxt/schema": "^3.16.2",
+		"@nuxt/kit": "^4.0.1",
+		"@nuxt/schema": "^4.0.1",
 		"@nuxt/types": "^2.17.3",
 		"@tailwindcss/vite": "^4.1.0",
 		"@witchcraft/nuxt-utils": "^0.1.0",
@@ -129,7 +129,7 @@
 		"@commitlint/cli": "^19.3.0",
 		"@internationalized/date": "^3.1.0",
 		"@nuxt/eslint-config": "^1.3.0",
-		"@nuxt/module-builder": "^0.8.4",
+		"@nuxt/module-builder": "^1.0.2",
 		"@nuxtjs/i18n": "^9.5.3",
 		"@playwright/test": "=1.50.0",
 		"@rollup/plugin-node-resolve": "^16.0.1",
@@ -147,15 +147,15 @@
 		"@storybook/vue3-vite": "^8.6.12",
 		"@tailwindcss/cli": "^4.1.4",
 		"@tailwindcss/postcss": "^4.1.2",
-		"@types/node": "^22.14.0",
-		"@vitejs/plugin-vue": "^5.0.4",
+		"@types/node": "^24.1.0",
+		"@vitejs/plugin-vue": "^6.0.0",
 		"@vue/runtime-core": "^3.4.27",
 		"@vue/runtime-dom": "^3.4.27",
 		"@vueuse/components": "^13.0.0",
 		"@vueuse/core": "^13.0.0",
 		"autoprefixer": "^10.4.19",
 		"concurrently": "^9.1.2",
-		"eslint": "=9.12.0",
+		"eslint": "^9.32.0",
 		"eslint-plugin-jsdoc": "^48.0.0",
 		"http-server": "^14.1.1",
 		"husky": "^9.0.11",
@@ -171,11 +171,11 @@
 		"ts-node": "^10.9.2",
 		"typescript": "~5.8.2",
 		"unbuild": "^3.5.0",
-		"vite": "^6.2.5",
+		"vite": "^7.0.6",
 		"vite-plugin-externalize-deps": "^0.9.0",
 		"vite-tsconfig-paths": "^5.0.1",
 		"vue": "^3.5.13",
-		"vue-tsc": "3.0.0-beta.5",
+		"vue-tsc": "3.0.4",
 		"wait-on": "^8.0.3"
 	},
 	"author": "Alan <alanscodelog@gmail.com>",

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

@@ -24,13 +24,14 @@ const template = `
 			<div class="outline-hidden focus:border-danger-500 border border-accent-600" tabindex="0">Has Manual Focus Classes</div>
 		`
 export default meta
-type Story = StoryObj<typeof NAME>
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type Story = StoryObj<{}>
 
 export const Primary: Story = {
 	render: args => ({
 		components,
 		setup: () => {
-			const el = ref<HTMLElement>(null)
+			const el = ref<HTMLElement | null>(null)
 			onMounted(() => {
 				// el.value.focus()
 			})

package/src/runtime/components/Icon/Icon.vue

@@ -20,7 +20,6 @@ defineOptions({
 
 const $attrs = useAttrs() as any
 
-// eslint-disable-next-line no-use-before-define
 const props = defineProps<Props>()
 
 

package/src/runtime/components/LibButton/LibButton.vue

@@ -205,7 +205,6 @@ defineOptions({
 
 const fallbackId = getFallbackId()
 
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	color: false,
 	label: "",

package/src/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -88,7 +88,6 @@ const $slots = useSlots()
 /* todo multi states */
 
 const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	...baseInteractivePropsDefaults,
 })

package/src/runtime/components/LibColorInput/LibColorInput.vue

@@ -111,7 +111,6 @@ const swatchClasses = `
 const fallbackId = getFallbackId()
 
 const t = useInjectedI18n()
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	allowAlpha: true,
 	border: true,

package/src/runtime/components/LibColorPicker/utils/safeConvertToHsva.ts

@@ -1,5 +1,4 @@
 import { clampNumber } from "@alanscodelog/utils/clampNumber.js"
-import { unreachable } from "@alanscodelog/utils/unreachable.js"
 import Color from "colorjs.io"
 
 import type { HsvaColor, RgbaColor } from "../../../types/index.js"

package/src/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.vue

@@ -59,7 +59,6 @@ const emit = defineEmits<{
 }>()
 const $attrs = useAttrs()
 
-// eslint-disable-next-line no-use-before-define
 withDefaults(defineProps<Props>(), { showLabel: true })
 
 

package/src/runtime/components/LibFileInput/LibFileInput.vue

@@ -207,7 +207,6 @@ const emits = defineEmits<{
 }>()
 
 const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	multiple: false,
 	formats: () => ["image/*", ".jpeg", ".jpg", ".png"],

package/src/runtime/components/LibInputDeprecated/LibInputDeprecated.vue

@@ -185,7 +185,6 @@ const emit = defineEmits<{
 
 const fallbackId = getFallbackId()
 
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	valid: true,
 	suggestions: undefined,

package/src/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -89,7 +89,6 @@ defineOptions({
 })
 
 const $ = useDivideAttrs(["item"] as const)
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	...baseInteractivePropsDefaults
 })

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

@@ -95,7 +95,6 @@ defineOptions({
 })
 const $attrs = useAttrs()
 
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	handler: undefined,
 })

package/src/runtime/components/LibNotifications/LibNotifications.vue

@@ -67,7 +67,6 @@ defineOptions({
 })
 
 
-// eslint-disable-next-line no-use-before-define
 const props = defineProps<Props>()
 
 const dialogEl = ref<HTMLDialogElement | null>(null)

package/src/runtime/components/LibPagination/LibPagination.vue

@@ -170,7 +170,6 @@ defineOptions({
 	inheritAttrs: false,
 })
 
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	customRoute: (route: string, i: number) => {
 		if (i === 0 || i === 1) {

package/src/runtime/components/LibPopup/LibPopup.vue

@@ -58,7 +58,6 @@ import { isArray } from "@alanscodelog/utils/isArray.js"
 import type { IPopupReference, PopupPosition, PopupPositioner, PopupPositionModifier, SimpleDOMRect } from "../../types/index.js"
 
 const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	useBackdrop: true,
 	useDialogForBackdrop: false,

package/src/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -107,7 +107,6 @@ defineOptions({
 	inheritAttrs: false,
 })
 const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	autohideOnComplete: -1,
 	keepSpaceWhenHidden: false,

package/src/runtime/components/LibRecorder/LibRecorder.vue

@@ -93,7 +93,6 @@ const emits = defineEmits<{
 	(e: "focus:parent"): void
 }>()
 const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	recordingTitle: "",
 	id: undefined,

package/src/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -87,7 +87,6 @@ defineOptions({
 
 const fallbackId = getFallbackId()
 
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	id: "",
 	placeholder: "",