@witchcraft/ui 0.1.0 → 0.1.1

package/src/runtime/components/LibSuggestions/LibSuggestions.vue

@@ -79,7 +79,6 @@ const $ = useDivideAttrs(["item"] as const)
 const emits = defineEmits<SuggestionsEmits>()
 
 const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(), {
 	isValid: true,
 	canOpen: true,

package/src/runtime/components/LibTable/LibTable.vue

@@ -106,7 +106,6 @@ defineOptions({
 	name: "lib-table",
 })
 
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	resizable: () => ({}),
 	values: () => [] as T[],

package/src/runtime/directives/vResizableCols.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
 import { castType } from "@alanscodelog/utils/castType.js"
 import { override } from "@alanscodelog/utils/override.js"
 import { throttle } from "@alanscodelog/utils/throttle.js"
@@ -137,7 +136,7 @@ export const vResizableCols: Directive = {
 }
 
 
-const setWidth = (col: HTMLElement, amountInPx: number, el: ResizableElement): void => {
+function setWidth(col: HTMLElement, amountInPx: number, el: ResizableElement): void {
 	const $el = getElInfo(el)
 	const width = Math.max($el.margin, amountInPx)
 
@@ -150,13 +149,14 @@ const setWidth = (col: HTMLElement, amountInPx: number, el: ResizableElement): v
 }
 
 
-const getBox = (el: Element): { x: number, width: number } => {
+function getBox(el: Element): { x: number, width: number } {
 	const rect = el.getBoundingClientRect()
 	// the numbers need to be rounded or else the columns will start to shift
 	// rounding rect.width is bettwe than just using clientWidth which does not include the scrollbar
 	return { x: Math.round(rect.x), width: Math.round(rect.width) }
 }
-const getCols = (el: ResizableElement): { col: HTMLElement | null, colNext: HTMLElement | null } => {
+
+function getCols(el: ResizableElement): { col: HTMLElement | null, colNext: HTMLElement | null } {
 	const $el = getElInfo(el)
 	if (!$el.target) unreachable()
 	let col = getColEls(el)[$el.grips.get($el.target!)!]
@@ -174,89 +174,95 @@ const getCols = (el: ResizableElement): { col: HTMLElement | null, colNext: HTML
 	return { col, colNext }
 }
 
-const createPointerDownHandler = (el: ResizableElement) => (e: PointerEvent) => {
-	const $el = getElInfo(el)
-	if (!$el.isDragging) {
-		castType<HTMLElement>(e.target)
-		$el.target = e.target
-		$el.isDragging = true
-		e.preventDefault()
-
-		// in case any errors happen, we want the pointer up to still be called
-		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: ResizableElement) {
+	return (e: PointerEvent) => {
+		const $el = getElInfo(el)
+		if (!$el.isDragging) {
+			castType<HTMLElement>(e.target)
+			$el.target = e.target
+			$el.isDragging = true
+			e.preventDefault()
+
+			// in case any errors happen, we want the pointer up to still be called
+			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: ResizableElement) => (e: PointerEvent) => {
-	const $el = getElInfo(el)
-	if ($el.isDragging) {
-		e.preventDefault()
+function createPointerMoveHandler(el: ResizableElement) {
+	return (e: PointerEvent) => {
+		const $el = getElInfo(el)
+		if ($el.isDragging) {
+			e.preventDefault()
 
-		const { col, colNext } = getCols(el)
+			const { col, colNext } = getCols(el)
 
-		if (col !== null) {
-			const leftBox = getBox(col)
+			if (col !== null) {
+				const leftBox = getBox(col)
 
-			const oldWidth = leftBox.width
-			const leftBound = leftBox.x
-			const rightBox = colNext ? getBox(colNext) : getBox(el)
+				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!
+				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 ($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
-					}
+						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: ResizableElement) => (e: PointerEvent) => {
-	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)
-		// unfortunately does not work with iframes in storybook but otherwise does work
-		document.removeEventListener("pointerleave", $el.pointerLeaveHandler)
+function createPointerUpHandler(el: ResizableElement) {
+	return (e: PointerEvent) => {
+		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)
+			// unfortunately does not work with iframes in storybook but otherwise does work
+			document.removeEventListener("pointerleave", $el.pointerLeaveHandler)
+		}
 	}
 }
 
-const createGrip = (): HTMLElement => {
+function createGrip(): HTMLElement {
 	const grip = document.createElement("div")
 	grip.style.position = "absolute"
 	grip.style.cursor = "col-resize"
@@ -271,7 +277,7 @@ const removeGrips = (el: HTMLElement): void => {
 		el.removeChild(grip)
 	}
 }
-const getTestGripSize = (el: ResizableElement): number => {
+function getTestGripSize(el: ResizableElement): number {
 	const testGrip = createGrip()
 	el.appendChild(testGrip)
 	const dynamicMinWidth = getBox(testGrip).width * 3
@@ -279,18 +285,18 @@ const getTestGripSize = (el: ResizableElement): number => {
 	return dynamicMinWidth
 }
 
-const getElInfo = (el: ResizableElement): Data => {
+function getElInfo(el: ResizableElement): Data {
 	const $el = elMap.get(el)
 	if (!$el) unreachable("El went missing.")
 	return $el
 }
-const getColEls = (el: ResizableElement): HTMLElement[] => {
+function getColEls(el: ResizableElement): HTMLElement[] {
 	const $el = elMap.get(el)
 	if (!$el) unreachable("El went missing.")
 	return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > td"}`)] as any
 }
 
-const setupColumns = (el: ResizableElement, opts: ResizableOptions): void => {
+function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 	const gripWidth = getTestGripSize(el)
 	const $el: Data = {
 		grips: new Map(),
@@ -325,7 +331,7 @@ const setupColumns = (el: ResizableElement, opts: ResizableOptions): void => {
 	el.classList.add("resizable-cols-setup")
 }
 
-const positionGrips = (el: ResizableElement): void => {
+function positionGrips(el: ResizableElement): void {
 	let xPos = 0
 	const $el = getElInfo(el)
 	for (const grip of $el.grips.keys()) {
@@ -340,7 +346,7 @@ const positionGrips = (el: ResizableElement): void => {
 	}
 }
 
-const setColWidths = (el: ResizableElement, children?: Element[]): void => {
+function setColWidths(el: ResizableElement, children?: Element[]): void {
 	const $el = getElInfo(el)
 	const header = children ?? getColEls(el).slice(0, $el.colCount)
 	const len = $el.colCount
@@ -365,7 +371,7 @@ const setColWidths = (el: ResizableElement, children?: Element[]): void => {
 	}
 }
 
-const teardownColumns = (el: ResizableElement): void => {
+function teardownColumns(el: ResizableElement): void {
 	const $el = getElInfo(el)
 
 	el.removeEventListener("pointerdown", $el.pointerDownHandler)

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,36 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-declare const knownDirectives: readonly ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"];
-declare module "@nuxt/schema" {
-    interface PublicRuntimeConfig {
-        witchcraftUi: Pick<ModuleOptions, "directives">;
-    }
-}
-interface ModuleOptions {
-    /**
-     * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
-     *
-     * @default true
-     */
-    includeUnpluginIconsPlugins?: boolean;
-    directives: (typeof knownDirectives[number])[];
-    /**
-        * Which components (without a prefix) to register for auto-importing globally.
-        */
-    globalComponents: string[];
-    /**
-     * @default "W"
-     */
-    componentPrefix: string;
-    debug?: boolean;
-    /**
-     * @default "~/assets/css/tailwind.css" if it exists.
-     */
-    mainCssFile?: string;
-    /** @internal */
-    _playgroundWorkaround?: boolean;
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
-
-export { _default as default };
-export type { ModuleOptions };

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

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-/**
- * For testing the focus styles. The (still WIP) idea is that normally the outlined class is set by whether the user is using the keyboard or not. When true, outlines generated by the focus-outline-* or outlined-* utilities are allowed (they might not always appear since most components have focus-visible styles), when false, they are not allowed, but components can still set custom focus styles that will always appear. Either or is usually not a good idea unless all components set custom focus styles. For something like a web app, focus-visible should be allowed. For an app, this setup allows that to be configurable.
- */
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj<typeof NAME>;
-export declare const Primary: Story;
-export declare const OutlineForcedTrue: Story;
-export declare const OutlineFalse: Story;
-export declare const AlwaysAllowFocusVisible: Story;

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

@@ -1,53 +0,0 @@
-import { onMounted, ref } from "vue";
-import * as components from "./index.js";
-const meta = {
-  title: "Other/Focus",
-  args: {
-    outline: true
-  }
-};
-const template = `
-			<div class="focus-outline-no-offset border border-accent-600" tabindex="0">focus-outline-no-offset (outlined i.e. outlined-focus-visible)</div>
-			<div class="focus-outline border border-accent-600" tabindex="0">focus-outline (outlined i.e. outlined-focus-visible)</div>
-			<div class="outline-hidden outlined-focus:border-danger-500 border border-accent-600" tabindex="0">outlined-focus</div>
-			<div class="outline-hidden outlined-within:border-danger-500 border border-accent-600" >
-				outlined-within<div tabindex="0">Inner</div>
-			</div>
-			<div class="outline-hidden focus:border-danger-500 border border-accent-600" tabindex="0">Has Manual Focus Classes</div>
-		`;
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      const el = ref(null);
-      onMounted(() => {
-      });
-      return { ...args, el };
-    },
-    template
-  })
-};
-export const OutlineForcedTrue = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    forceOutline: true
-  }
-};
-export const OutlineFalse = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    outline: false
-  }
-};
-export const AlwaysAllowFocusVisible = {
-  render: (args) => ({
-    components,
-    setup: () => args,
-    template: `
-		<div class="outlined-visible group">${template}</div>
-		`
-  })
-};

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

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import * as components from "../index.js.js";
-declare const meta: Meta<typeof components.LibButton>;
-export default meta;
-type Story = StoryObj<typeof components.LibButton>;
-export declare const Primary: Story;
-export declare const IconAfter: Story;
-export declare const OnlyIcon: Story;
-export declare const Disabled: Story;
-export declare const Borderless: Story;
-export declare const BorderlessDisabled: Story;
-export declare const WithDivInside: Story;

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

@@ -1,94 +0,0 @@
-import { capitalize } from "@alanscodelog/utils/capitalize.js";
-import IconFaSolidBell from "~icons/fa-solid/bell";
-import * as components from "../index.js";
-const meta = {
-  component: components.LibButton,
-  title: "Components/Button",
-  args: {
-    label: "Label",
-    // @ts-expect-error - custom prop for story
-    _iconAfter: true
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components: {
-      ...components,
-      IconFaSolidBell
-    },
-    setup: () => ({ args, capitalize }),
-    template: `
-		<div class="flex gap-4 justify-center">
-			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary' ]">
-				<lib-button v-bind="{...args, color: type, label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false')}">
-					<template #icon>
-						<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
-					</template>
-				</lib-button>
-			</template>
-		</div>
-		<div class="flex flex-col gap-4 pt-10">
-			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary']">
-				<lib-button v-bind="{...args, color: type , label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false') }">
-					${args._iconAfter ? `
-						<template #icon-after>
-							<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
-						</template>
-					` : ``}
-				</lib-button>
-			</template>
-		</div>
-		`
-  })
-};
-export const IconAfter = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error - .
-    _iconAfter: true
-  }
-};
-export const OnlyIcon = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    label: void 0
-  }
-};
-export const Disabled = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    disabled: true
-  }
-};
-export const Borderless = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    border: false
-  }
-};
-export const BorderlessDisabled = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    border: false,
-    disabled: true
-  }
-};
-export const WithDivInside = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-		<div class="flex gap-4 justify-center">
-			<lib-button v-bind="{...args}">
-				<div>Div inside button still has a pointer cursor.</div>
-			</lib-button>
-		</div>
-		`
-  })
-};

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

@@ -1,14 +0,0 @@
-import type { StoryObj } from "@storybook/vue3";
-import * as components from "../index.js.js";
-declare const meta: {
-    component: any;
-    title: string;
-    args: {
-        modelValue: boolean;
-        label: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof components.LibCheckbox>;
-export declare const Primary: Story;
-export declare const Disabled: any;

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

@@ -1,29 +0,0 @@
-import * as components from "../index.js";
-const meta = {
-  component: components.LibCheckbox,
-  title: "Components/Checkbox",
-  args: {
-    modelValue: true,
-    label: "Label"
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-			<lib-checkbox v-bind="args" v-model="args.modelValue"></lib-checkbox>
-			<br>
-			Opposite State:
-			<br>
-			<lib-checkbox v-bind="args" :modelValue="!args.modelValue" @update:modelValue="args.modelValue = !$event"></lib-checkbox>
-		`
-  })
-};
-export const Disabled = {
-  ...Primary,
-  args: {
-    disabled: true
-  }
-};

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

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

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

@@ -1,58 +0,0 @@
-import { ref } from "vue";
-import LibColorInput from "./LibColorInput.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibColorInput,
-  title: "Components/ColorInput",
-  args: {}
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      const color = ref({
-        r: 0,
-        g: 0,
-        b: 0
-        /* , a: 0.5 */
-      });
-      const handleChange = (e) => {
-        color.value = { ...e };
-      };
-      return {
-        args: {
-          outline: false,
-          color,
-          allowAlpha: true,
-          ...args
-        },
-        handleChange
-      };
-    },
-    template: `
-			<lib-color-Input
-				:allowAlpha="args.allowAlpha"
-				:modelValue="args.color.value"
-				@update:modelValue="handleChange"
-			>
- 			</lib-color-Input>
-			Stretched:
-			<div class="flex-1 flex">
-				<lib-color-Input
-					class="flex-1"
-					:allowAlpha="args.allowAlpha"
-					:modelValue="args.color.value"
-					@update:modelValue="handleChange"
-				>
-				</lib-color-Input>
-			</div>
-		`
-  })
-};
-export const DoesNotAllowAlpha = {
-  ...Primary,
-  args: {
-    allowAlpha: false
-  }
-};

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

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

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

@@ -1,68 +0,0 @@
-import Color from "colorjs.io";
-import { ref } from "vue";
-import LibColorPicker from "./LibColorPicker.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibColorPicker,
-  title: "Components/ColorPicker",
-  args: {}
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      const color = ref({ r: 0, g: 0, b: 0, ...args.modelValue });
-      delete args.modelValue;
-      const handleChange = (e) => {
-        color.value = { ...e };
-      };
-      return {
-        args: {
-          outline: false,
-          color,
-          allowAlpha: true,
-          ...args
-        },
-        handleChange
-      };
-    },
-    template: `
-			<lib-root :outline="args.outline">
-	 		{{args.color}}
-	 		<lib-color-picker
-	 			:modelValue="args.color.value"
-				v-bind="args"
-	 			@update:modelValue="handleChange"
-	 		>
-	 		</lib-color-picker>
-	 		</lib-root>
-		`
-  })
-};
-export const DoesNotAllowAlpha = {
-  ...Primary,
-  args: {
-    allowAlpha: false
-  }
-};
-export const WithExistingValue = {
-  ...Primary,
-  args: {
-    modelValue: { r: 255, g: 0, b: 0 }
-  }
-};
-export const CustomStringRepresentation = {
-  ...Primary,
-  args: {
-    allowAlpha: false,
-    customRepresentation: {
-      fromHsvaToString: (hsva, includeAlpha) => new Color(
-        "hsv",
-        [hsva.h, hsva.s, hsva.v],
-        includeAlpha ? hsva.a : 1
-        // this takes care of the correct hex format
-      ).toString({ format: "hex" })
-    }
-  }
-};