@witchcraft/ui 0.2.1-beta.3 → 0.2.1

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

@@ -5,22 +5,19 @@ import { computed, ref, watch } from "vue"
 import LibPopup from "./LibPopup.vue"
 
 import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibPopup> = {
 	component: LibPopup,
 	title: "Components/Popup",
 	args: {
 
-	},
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibPopup>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -51,13 +48,12 @@ export const Primary: Story = {
 				}
 			})
 
-
 			return {
 				args,
 				buttonPos,
 				autoRotatePos,
 				buttonStyle,
-				value,
+				value
 			}
 		},
 		template: `
@@ -91,22 +87,22 @@ export const Primary: Story = {
 				</template>
 			</lib-popup>
 			</div>
-			`,
-	}),
+			`
+	})
 }
 export const PopupNoShift = {
 	...Primary,
 	args: {
-		avoidRepositioning: true,
-		
+		avoidRepositioning: true
+
 	}
 }
 /** When the popup is too wide, it's positioned to the left and overflow scroll is set with an invisible scrollbar. */
 export const PopupTooBig = {
 	...Primary,
 	args: {
-		width: "110vw",
-	},
+		width: "110vw"
+	}
 }
 export const PopupCenterScreen = {
 	...Primary,
@@ -114,17 +110,17 @@ export const PopupCenterScreen = {
 		width: "500px",
 		height: "500px",
 		preferredHorizontal: ["center-screen"],
-		preferredVertical: ["center-screen"],
-	},
+		preferredVertical: ["center-screen"]
+	}
 }
 export const PopupRightBottomMost = {
 	...Primary,
 	args: {
 		width: "500px",
 		height: "500px",
-		preferredHorizontal: [ "right-most"],
-		preferredVertical: [ "bottom-most"],
-	},
+		preferredHorizontal: ["right-most"],
+		preferredVertical: ["bottom-most"]
+	}
 }
 export const PopupLeftTopMost = {
 	...Primary,
@@ -132,8 +128,8 @@ export const PopupLeftTopMost = {
 		width: "500px",
 		height: "500px",
 		preferredHorizontal: ["left-most"],
-		preferredVertical: ["top-most"],
-	},
+		preferredVertical: ["top-most"]
+	}
 }
 
 export const PopupCenterMost = {
@@ -142,8 +138,8 @@ export const PopupCenterMost = {
 		width: "500px",
 		height: "500px",
 		preferredHorizontal: ["center-most"],
-		preferredVertical: ["center-most"],
-	},
+		preferredVertical: ["center-most"]
+	}
 }
 export const LeftMenuShapeExample = {
 	...Primary,
@@ -152,6 +148,6 @@ export const LeftMenuShapeExample = {
 		height: "500px",
 		preferredHorizontal: ["left-most"],
 		preferredVertical: ["center-most"],
-		avoidRepositioning: true,
-	},
+		avoidRepositioning: true
+	}
 }

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

@@ -1,8 +1,9 @@
 <!-- Popover API WHEN :sob:
 	#awaiting https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility -->
 <template>
-<slot name="button"
-	:extract-el="(_:any)=> buttonEl = _"
+<slot
+	name="button"
+	:extract-el="(_:any) => buttonEl = _"
 />
 <!-- <Transition> -->
 <component
@@ -23,12 +24,13 @@
 		`,
 		$attrs.class as any
 	)"
-	v-bind="{...$attrs, class:undefined}"
+	v-bind="{ ...$attrs, class: undefined }"
 	:is="useDialogForBackdrop ? 'dialog' : 'div'"
 	ref="dialogEl"
 	@mousedown.self="handleMouseup"
 >
-	<div v-if="modelValue"
+	<div
+		v-if="modelValue"
 		:class="`popup z-100 fixed ${props.avoidRepositioning ? 'transition-[top,left]' : ''}`"
 		:style="`
 		top:${pos.y}px;
@@ -49,13 +51,13 @@
 
 <script setup lang="ts">
 // eslint-disable-next-line simple-import-sort/imports
-import { onMounted, nextTick, ref, useAttrs, watch , type HTMLAttributes } from "vue"
+import { onMounted, ref, useAttrs, watch, type HTMLAttributes } from "vue"
 import { getFallbackId, type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js"
 
 import { twMerge } from "../../utils/twMerge.js"
 import { castType } from "@alanscodelog/utils/castType"
 import { isArray } from "@alanscodelog/utils/isArray"
-import type { IPopupReference, PopupPosition, PopupPositioner, PopupPositionModifier, SimpleDOMRect } from "../../types/index.js"
+import type { IPopupReference, PopupPosition, SimpleDOMRect } from "../../types/index.js"
 
 const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props>(), {
@@ -63,13 +65,13 @@ const props = withDefaults(defineProps<Props>(), {
 	useDialogForBackdrop: false,
 	// vue is getting confused when the prop type can also be a function
 	preferredHorizontal: () => ["center-most", "either"] satisfies Props["preferredHorizontal"],
-	preferredVertical: () => ["top", "bottom", "either"] satisfies Props["preferredVertical"] ,
+	preferredVertical: () => ["top", "bottom", "either"] satisfies Props["preferredVertical"],
 	avoidRepositioning: false,
-	canClose: true,
+	canClose: true
 })
 const $attrs = useAttrs()
 defineOptions({
-	name: "lib-popup",
+	name: "LibPopup",
 	inheritAttrs: false
 })
 
@@ -77,7 +79,6 @@ const emit = defineEmits<{
 	(e: "close"): void
 }>()
 
-
 const dialogEl = ref<HTMLDialogElement | null>(null)
 const popupEl = ref<IPopupReference | null>(null)
 const buttonEl = ref<IPopupReference | null>(null)
@@ -87,7 +88,6 @@ const pos = ref<PopupPosition>({} as any)
 const modelValue = defineModel<boolean>({ default: false })
 let isOpen = false
 
-
 /**
  * We don't have access to the dialog backdrop and without extra styling, it's of 0 width/height, positioned in the center of the screen, with margins taking up all the space.
  *
@@ -101,19 +101,19 @@ const getDialogBoundingRect = (): SimpleDOMRect => ({
 	top: 0,
 	bottom: 0,
 	left: 0,
-	right: 0,
+	right: 0
 })
 let lastButtonElPos: SimpleDOMRect | undefined
 const recompute = (force: boolean = false): void => {
 	requestAnimationFrame(() => {
 		const horzHasCenterScreen = isArray(props.preferredHorizontal)
-		&& props.preferredHorizontal[0] === "center-screen"
+			&& props.preferredHorizontal[0] === "center-screen"
 		const vertHasCenterScreen = isArray(props.preferredVertical)
-		&& props.preferredVertical[0] === "center-screen"
-		
-		const canBePositionedWithoutButton =
-		(horzHasCenterScreen || typeof props.preferredHorizontal === "function")
-		&& (vertHasCenterScreen || typeof props.preferredVertical === "function")
+			&& props.preferredVertical[0] === "center-screen"
+
+		const canBePositionedWithoutButton
+			= (horzHasCenterScreen || typeof props.preferredHorizontal === "function")
+				&& (vertHasCenterScreen || typeof props.preferredVertical === "function")
 		if (!popupEl.value || !dialogEl.value || (!buttonEl.value && !canBePositionedWithoutButton)) {
 			pos.value = {} as any
 			return
@@ -128,7 +128,6 @@ const recompute = (force: boolean = false): void => {
 
 		let finalPos: { x: number, y: number, maxWidth?: number, maxHeight?: number } = {} as any
 
-
 		if (!force && modelValue.value && props.avoidRepositioning && buttonEl.value && lastButtonElPos) {
 			const shiftX = buttonEl.value.getBoundingClientRect().x - lastButtonElPos.x
 			const shiftY = buttonEl.value.getBoundingClientRect().y - lastButtonElPos.y
@@ -149,7 +148,7 @@ const recompute = (force: boolean = false): void => {
 			topFromCenter: 0,
 			bottomFromCenter: 0,
 			top: 0,
-			bottom: 0,
+			bottom: 0
 		}
 		if (el) {
 			space.left = (el.x + el.width) - bg.x
@@ -169,7 +168,6 @@ const recompute = (force: boolean = false): void => {
 		if (typeof preferredHorizontal === "function") {
 			finalPos.x = preferredHorizontal(el, popup, bg, space)
 		} else {
-			/* eslint-disable no-labels */
 			outerloop:
 			for (const type of preferredHorizontal) {
 				switch (type) {
@@ -184,8 +182,8 @@ const recompute = (force: boolean = false): void => {
 					case "center-most":
 					case "center":
 						castType<DOMRect>(el)
-						if (space.leftFromCenter >= (popup.width / 2) &&
-						space.rightFromCenter >= (popup.width / 2)) {
+						if (space.leftFromCenter >= (popup.width / 2)
+							&& space.rightFromCenter >= (popup.width / 2)) {
 							finalPos.x = el.x + (el.width / 2) - (popup.width / 2)
 							break outerloop
 						}
@@ -216,7 +214,7 @@ const recompute = (force: boolean = false): void => {
 						} else {
 							finalPos.x = bg.x + bg.width - popup.width; break outerloop
 						}
-				
+
 					case "right":
 						castType<DOMRect>(el)
 						if (space.right >= popup.width) {
@@ -284,8 +282,8 @@ const recompute = (force: boolean = false): void => {
 					case "center-most":
 					case "center":
 						castType<DOMRect>(el)
-						if (space.topFromCenter >= (popup.height / 2) &&
-						space.bottomFromCenter >= (popup.height / 2)) {
+						if (space.topFromCenter >= (popup.height / 2)
+							&& space.bottomFromCenter >= (popup.height / 2)) {
 							finalPos.y = el.y + (el.height / 2) - (popup.height / 2)
 							break outerloop
 						}
@@ -313,7 +311,7 @@ const recompute = (force: boolean = false): void => {
 		}
 		finalPos.maxWidth = maxWidth ?? undefined
 		finalPos.maxHeight = maxHeight ?? undefined
-		/* eslint-enable no-labels */
+
 		if (props.modifyPosition) {
 			finalPos = props.modifyPosition(finalPos, el, popup, bg, space)
 		}
@@ -369,7 +367,6 @@ watch([modelValue, popupEl], () => {
 	}
 })
 
-
 const handleMouseup = ($event: MouseEvent) => {
 	$event.preventDefault()
 	toggle()
@@ -385,20 +382,19 @@ defineExpose({
 	},
 	setBackground: (el: IPopupReference | null) => {
 		backgroundEl.value = el
-	},
+	}
 
 })
-
 </script>
-<script lang="ts">
 
-type RealProps =
-& LinkableByIdProps
-& PopupProps
+<script lang="ts">
+type RealProps
+	= & LinkableByIdProps
+		& PopupProps
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps { }
 </script>

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

@@ -4,10 +4,8 @@ import { onUnmounted, ref } from "vue"
 
 import LibProgressBar from "./LibProgressBar.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibProgressBar> = {
 	component: LibProgressBar,
 	title: "Components/ProgressBar",
@@ -16,14 +14,13 @@ const meta: Meta<typeof LibProgressBar> = {
 		// @ts-expect-error .
 		_timeout: 1000,
 		_add: 10,
-		_start: 50,
-	},
+		_start: 50
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibProgressBar>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -45,7 +42,7 @@ export const Primary: Story = {
 			}
 			return {
 				args: { ...args },
-				progress,
+				progress
 			}
 		},
 		template: `
@@ -55,28 +52,28 @@ export const Primary: Story = {
 			<div class="flex w-full">
 				<lib-progress-bar class="flex-1" v-bind="args" :progress="progress"></lib-progress-bar>
 			</div>
-		`,
-	}),
+		`
+	})
 }
 export const Secondary: Story = {
 	...Primary,
 	args: {
-		...Primary.args,
-	},
+		...Primary.args
+	}
 }
 export const ReallyLongLabel: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		label: "Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect",
-	},
+		label: "Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect"
+	}
 }
 export const Static: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		progress: 50,
-	},
+		progress: 50
+	}
 }
 
 export const AutoHiding: Story = {
@@ -88,7 +85,6 @@ export const AutoHiding: Story = {
 		_start: 0,
 		// keepSpaceWhenHidden: true,
 		_timeout: 1000,
-		_add: 10,
-	},
+		_add: 10
+	}
 }
-

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

@@ -1,6 +1,7 @@
 <template>
 <Transition>
-	<div v-if="!hide"
+	<div
+		v-if="!hide"
 		:id="id ?? fallbackId"
 		:class="twMerge(`
 			progress-bar
@@ -35,7 +36,7 @@
 			before:transition-all
 			before:z-1
 			before:duration-500
-		`,psuedoHide && `
+		`, psuedoHide && `
 			after:opacity-0
 			before:opacity-0
 		`, ($attrs as any).class)"
@@ -45,14 +46,15 @@
 		:aria-valuenow="clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)"
 		:aria-valuemin="clamp[0] ?? 0"
 		:aria-valuemax="clamp[1] ?? 100"
-		v-bind="{...$attrs, class:undefined}"
+		v-bind="{ ...$attrs, class: undefined }"
 		:style="`--progress: ${clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
 	>
 		<div class="procgress-bar--label-wrapper relative flex-1">
 			<span class="before:content-vertical-holder"/>
 			<Transition>
 				<slot>
-					<label v-if="!psuedoHide"
+					<label
+						v-if="!psuedoHide"
 						:for="id"
 						class="
 							text-bg
@@ -93,25 +95,26 @@
 	</div>
 </Transition>
 </template>
+
 <script setup  lang="ts">
-import { type HTMLAttributes,type PropType, ref, watch } from "vue"
+import { ref, watch } from "vue"
 
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps,getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 // TODO move to utils
 const clampVal = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max)
 
 defineOptions({
-	name: "lib-progress-bar",
-	inheritAttrs: false,
+	name: "LibProgressBar",
+	inheritAttrs: false
 })
 const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props>(), {
 	autohideOnComplete: -1,
 	keepSpaceWhenHidden: false,
 	clamp: () => [0, 100],
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 const hide = ref<boolean>(false)
 const psuedoHide = ref<boolean>(false)
@@ -130,7 +133,7 @@ if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress <
 watch([
 	() => props.progress,
 	() => props.keepSpaceWhenHidden,
-	() => props.autohideOnComplete,
+	() => props.autohideOnComplete
 ], () => {
 	if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
 		if (props.keepSpaceWhenHidden) {
@@ -158,36 +161,36 @@ watch([
 		psuedoHide.value = false
 	}
 }, { immediate: false })
-
 </script>
+
 <script lang="ts">
+import type { HTMLAttributes } from "vue"
 
-type RealProps =
-& LinkableByIdProps
-& BaseInteractiveProps
-& LabelProps
-& {
-	progress: number
-	/** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
-	autohideOnComplete?: number
-	/**
-		* Do not actually hide the element, just leave an unstyled div,
-		* so the whole layout doesn't change on completion when autohideOnComplete is set.
-		*/
-	keepSpaceWhenHidden?: boolean
-	/**
-		* By default the progress bar is visually clamped to 0-100, even if the value might be something else.
-		* You can change what it's clamped to here, to for example,
-		* show at least a small sliver of the progress bar when it's still 0.
-		*/
-	clamp?: [start:number, end:number]
-}
+type RealProps
+	= & LinkableByIdProps
+		& BaseInteractiveProps
+		& LabelProps
+		& {
+			progress: number
+			/** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
+			autohideOnComplete?: number
+			/**
+			 * Do not actually hide the element, just leave an unstyled div,
+			 * so the whole layout doesn't change on completion when autohideOnComplete is set.
+			 */
+			keepSpaceWhenHidden?: boolean
+			/**
+			 * By default the progress bar is visually clamped to 0-100, even if the value might be something else.
+			 * You can change what it's clamped to here, to for example,
+			 * show at least a small sliver of the progress bar when it's still 0.
+			 */
+			clamp?: [start: number, end: number]
+		}
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps
 { }
-
 </script>

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

@@ -3,7 +3,6 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref, watchEffect } from "vue"
 
 import { createRecorderHandler, createRecorderWatchEffect } from "../../helpers/storybook.js"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 /**
  * This is a special input component designed to record any type of event.
@@ -18,8 +17,8 @@ const meta: Meta<typeof components.LibRecorder> = {
 	args: {
 		label: "Some Label",
 		recordingTitle: "Recording. Press enter or click away to accept. Press escape to cancel.",
-		modelValue: "K E Y S",
-	},
+		modelValue: "K E Y S"
+	}
 }
 
 export default meta
@@ -41,7 +40,7 @@ export const Primary: Story = {
 				recorder,
 				recording,
 				recordingValue,
-				recorderEl,
+				recorderEl
 			}
 		},
 		template: `
@@ -54,28 +53,28 @@ export const Primary: Story = {
 				v-model="modelValue"
 				@recorder:click="recording = !recording"
 			/>
-		`,
-	}),
+		`
+	})
 }
 
 /** Should not be tabbable or recordable. */
 export const Disabled: Story = {
 	...Primary,
 	args: {
-		disabled: true,
-	},
+		disabled: true
+	}
 }
 /** *Should* be tabbable but not recordable. */
 export const Readonly: Story = {
 	...Primary,
 	args: {
-		readonly: true,
-	},
+		readonly: true
+	}
 }
 /** Height should not shrink. */
 export const EmptyInitialValue: Story = {
 	...Primary,
 	args: {
-		modelValue: "",
-	},
+		modelValue: ""
+	}
 }