@witchcraft/ui 0.3.26 → 0.4.0-beta.10

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

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+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",
+	args: {
+		title: "Popup Title",
+		description: "Popup Description"
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof WPopup> & { args?: ExtraTestArgs }
+
+export const Primary: Story = {
+	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
+					:title="args.title"
+					:description="args.description"
+					v-model="value"
+					v-bind="args"
+				>
+					${extraArgs._slots}
+					<template #button>
+						<WButton>Open Modal Popup</WButton>
+					</template>
+					<template #extra>
+						<div
+							:style="{width: args.width, height: args.height}"
+						>
+							<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: {
+		width: "80vw",
+		height: "80vh"
+	}
+}
+
+// popup should scroll contents instead of getting to big (popup will limit it)
+export const PopupTooBig = {
+	...Primary,
+	args: {
+		width: "110vw",
+		height: "110vh"
+	}
+}

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

@@ -0,0 +1,125 @@
+<template>
+<DialogRoot
+	v-bind="rootProps"
+	v-model:open="modelValue"
+>
+	<DialogTrigger
+		v-if="$slots.button"
+		as-child
+	>
+		<slot name="button"/>
+	</DialogTrigger>
+
+	<DialogPortal :to="to">
+		<DialogOverlay
+			as-child
+		>
+			<slot
+				name="backdrop"
+				class="popup--backdrop absolute inset-0 bg-black/50"
+			>
+				<div
+					class="popup--backdrop absolute inset-0 bg-black/50"
+				/>
+			</slot>
+		</DialogOverlay>
+
+
+		<DialogContent
+			v-bind="{ ...contentProps, class: undefined }"
+			:class="twMerge(`
+				popup--content
+				z-100
+				focus:outline-none
+				fixed
+				top-1/2
+				left-1/2
+				-translate-x-1/2
+				-translate-y-1/2
+				animate-contentShow
+				max-w-[100dvw]
+				max-h-[100dvh]
+				overflow-auto
+				scrollbar-hidden
+				p-5
+			`, contentProps?.class)"
+		>
+			<div
+				:class="twMerge(`
+					popup--content-inner
+					flex
+					flex-col
+					bg-neutral-100
+					dark:bg-neutral-800
+					rounded-md
+					flex
+					flex-col
+					gap-3
+					p-2
+				`)"
+			>
+				<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>
+				<DialogCloseButton as-child>
+					<slot name="close">
+						<WButton
+							class="justify-self-end"
+							@click="modelValue = false"
+						>
+							Close
+						</WButton>
+					</slot>
+				</DialogCloseButton>
+			</div>
+		</DialogContent>
+	</DialogPortal>
+</DialogRoot>
+</template>
+
+<script setup lang="ts">
+import type {
+	DialogContentEmits,
+	DialogContentProps,
+	DialogRootEmits,
+	DialogRootProps } from "reka-ui"
+import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, 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
+		/** Overrides reka-ui's DialogRootProps */
+		rootProps?: DialogRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp
+		/** Overrides teleport target. */
+		to?: string
+	}
+>(), {
+	to: "#root"
+})
+
+const modelValue = defineModel<boolean>({ default: false })
+</script>

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

@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { onUnmounted, ref } from "vue"
+
+import WProgressBar from "./WProgressBar.vue"
+
+import * as components from "../index.js"
+
+type ExtraTestArgs = {
+	_start?: number
+	_timeout?: number
+	_add?: number
+}
+const meta: Meta<typeof WProgressBar> = {
+	component: WProgressBar,
+	title: "Components/ProgressBar",
+	args: {
+		label: "Label",
+		...{
+			_timeout: 1000,
+			_add: 10,
+			_start: 50
+		} satisfies ExtraTestArgs as any
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof WProgressBar> & { args?: ExtraTestArgs }
+
+export const Primary: Story = {
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup: () => {
+				const forceFull = ref(false)
+				const progress = ref(extraArgs._start as number)
+				if (args.progress) {
+					progress.value = args.progress
+				} else {
+					let justHitFull = false
+					const interval = setInterval(() => {
+						if (justHitFull) return
+						if (progress.value >= 100) {
+							justHitFull = true
+							// give it time to hide
+							setTimeout(() => {
+								progress.value = 0
+								justHitFull = false
+							}, 2000)
+						} else {
+							progress.value += extraArgs._add as number
+						}
+					}, extraArgs._timeout as number)
+					onUnmounted(() => {
+						clearInterval(interval)
+					})
+				}
+				return {
+					args: { ...args },
+					forceFull,
+					progress
+				}
+			},
+			template: `
+			<WCheckbox v-model="forceFull">Force 100%</WCheckbox>
+			<WProgressBar class="flex-1" v-bind="args" :progress="forceFull ? 100 : progress"></WProgressBar>
+			<br/>
+			Stretched in flexbox:
+			<div class="flex w-full">
+				<WProgressBar class="flex-1" v-bind="args" :progress="forceFull ? 100 : progress"></WProgressBar>
+			</div>
+			<hr class="mt-2"/>
+		`
+		}
+	}
+}
+
+
+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"
+	}
+}
+export const Static: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		progress: 50
+	}
+}
+
+export const AutoHiding: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		autohideOnComplete: 500,
+		clamp: [10, 100],
+		// keepSpaceWhenHidden: true,
+		_start: 0,
+		_timeout: 1000,
+		_add: 10
+	}
+}
+
+export const AutoHidingNoKeepSpace: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		autohideOnComplete: 500,
+		keepSpaceWhenHidden: false,
+		clamp: [10, 100],
+		_start: 0,
+		_timeout: 1000,
+		_add: 10
+	}
+}

package/src/runtime/components/WProgressBar/WProgressBar.vue

@@ -0,0 +1,185 @@
+<template>
+<Transition>
+	<div
+		v-if="currentVisibility !== 'hidden'"
+		:class="twMerge(`
+			progress-bar
+			w-[200px]
+			whitespace-nowrap
+			overflow-x-scroll
+			scrollbar-hidden
+			rounded-sm
+			flex
+			relative
+			text-sm
+			min-w-[50px]
+			after:shadow-inner
+			after:shadow-black/50
+			after:content-['']
+			after:absolute
+			after:inset-0
+			after:pointer-events-none
+			after:z-2
+			after:transition-all
+			before:content-['']
+			before:shadow-inner
+			before:shadow-black/50
+			before:rounded-sm
+			before:bg-bars-gradient
+			before:animate-slideBgInf
+			before:[background-size:15px_15px]
+			before:absolute
+			before:w-[var(--progress)]
+			before:top-0 before:bottom-0 before:left-0
+			before:transition-all
+			before:z-1
+			before:duration-500
+		`, currentVisibility === 'pseudo' && `
+			after:opacity-0
+			before:opacity-0
+		`, ($attrs as any).class)"
+		:data-value="progress"
+		role="progressbar"
+		:aria-valuenow="clampNumber(progress, clamp[0] ?? 0, clamp[1] ?? 100)"
+		:aria-valuemin="clamp[0] ?? 0"
+		:aria-valuemax="clamp[1] ?? 100"
+		:aria-label="label"
+		v-bind="{ ...$attrs, class: undefined }"
+		:style="`--progress: ${clampNumber(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
+	>
+		<div
+			class="progress-bar--label-wrapper relative flex-1 z-3"
+			aria-hidden="true"
+		>
+			<span class="before:content-vertical-holder"/>
+
+			<Transition v-if="currentVisibility === 'visible'">
+				<slot>
+					<div
+						class="
+						progress-bar--bottom-label
+						text-black
+						dark:text-white
+						absolute
+						inset-0
+						flex
+						justify-center
+						px-2
+					"
+					>
+						<div class="truncate">
+							{{ label ?? "" }}
+						</div>
+					</div>
+				</slot>
+			</Transition>
+			<Transition v-if="currentVisibility === 'visible'">
+				<slot>
+					<div
+						class="
+						progress-bar--top-label
+						pointer-events-none
+						absolute
+						inset-0
+						flex
+						justify-center
+						transition-all
+						duration-500
+						text-white
+						[clip-path:inset(0_calc(100%-var(--progress))_0_0)]
+						px-2
+					"
+					>
+						<div class="truncate">
+							{{ label ?? "" }}
+						</div>
+					</div>
+				</slot>
+			</Transition>
+		</div>
+	</div>
+</Transition>
+</template>
+
+<script setup lang="ts">
+import { clampNumber } from "@alanscodelog/utils/clampNumber"
+import { unreachable } from "@alanscodelog/utils/unreachable"
+import type { HTMLAttributes } from "vue"
+import { ref, useAttrs, watch } from "vue"
+
+import type { TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+
+defineOptions({
+	name: "WProgressBar",
+	inheritAttrs: false
+})
+
+const $attrs = useAttrs()
+const props = withDefaults(defineProps<
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+	& {
+		label?: string
+		/** A number from 0-100. It is auto-clamped. */
+		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]
+	}
+>(), {
+	autohideOnComplete: -1,
+	keepSpaceWhenHidden: false,
+	clamp: () => [0, 100]
+})
+
+type Visibility = "visible" | "pseudo" | "hidden"
+const currentVisibility = ref<Visibility>("visible")
+let lastVisibility: Visibility | null = null
+
+function updateVisibility(
+	immediate: boolean = false,
+	onCleanup?: (cb: () => void) => void
+): void {
+	const isComplete = props.progress >= 100 || props.progress < 0
+	const shouldHide = props.autohideOnComplete > -1 && isComplete
+
+	if (!shouldHide) {
+		lastVisibility = null
+		currentVisibility.value = "visible"
+		return
+	}
+
+	const newVisibility: Visibility = props.keepSpaceWhenHidden ? "pseudo" : "hidden"
+
+	if (immediate) {
+		currentVisibility.value = newVisibility
+		lastVisibility = newVisibility
+	} else if (lastVisibility !== newVisibility) {
+		lastVisibility = newVisibility
+		const timeout = setTimeout(() => {
+			currentVisibility.value = newVisibility
+		}, props.autohideOnComplete) as any
+		if (!onCleanup) unreachable()
+		onCleanup(() => clearTimeout(timeout))
+	}
+}
+
+updateVisibility(true)
+
+watch([
+	() => [props.progress, props.keepSpaceWhenHidden, props.autohideOnComplete]
+], (_new, _old, onCleanup) => {
+	updateVisibility(false, onCleanup)
+})
+</script>

package/src/runtime/components/{LibRecorder/LibRecorder.stories.ts → WRecorder/WRecorder.stories.ts}

@@ -2,8 +2,10 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref, watchEffect } from "vue"
 
+import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
 import { createRecorderHandler, createRecorderWatchEffect } from "../../helpers/storybook.js"
 import * as components from "../index.js"
+
 /**
  * This is a special input component designed to record any type of event.
  *
@@ -11,22 +13,22 @@ import * as components from "../index.js"
  *
  * This basic implementation just lists the keys. Enter accepts the recording, escape cancels back to the initial value.
  */
-const meta: Meta<typeof components.LibRecorder> = {
-	component: components.LibRecorder,
+const meta: Meta<typeof components.WRecorder> = {
+	component: components.WRecorder,
 	title: "Components/Recorder",
 	args: {
-		label: "Some Label",
 		recordingTitle: "Recording. Press enter or click away to accept. Press escape to cancel.",
 		modelValue: "K E Y S"
 	}
 }
 
 export default meta
-type Story = StoryObj<typeof components.LibRecorder>
+type Story = StoryObj<typeof components.WRecorder>
 
 export const Primary: Story = {
 	render: args => ({
 		components,
+		directives: { vExtractRootEl },
 		setup: () => {
 			const recording = ref(false)
 			const recordingValue = ref("")
@@ -44,14 +46,15 @@ export const Primary: Story = {
 			}
 		},
 		template: `
-			<lib-recorder
+			<WRecorder
 				v-bind="args"
 				v-extract-root-el="_ => recorderEl = _"
 				:recordingValue="recordingValue"
 				:recorder="recorder"
 				v-model:recording="recording"
 				v-model="modelValue"
-				@recorder:click="recording = !recording"
+				@recorder:pointerdown="recording = !recording"
+				@recorder:blur="recordingValue = modelValue; recording = false"
 			/>
 		`
 	})