@myelophone/nuxt 0.18.2

package/app/components/ui/Badge.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		label?: string;
+
+		color?: "primary" | "gray" | "info" | "success" | "warning" | "error";
+		variant?: "solid" | "soft" | "outline";
+		size?: "xs" | "sm" | "md";
+
+		rounded?: boolean;
+		pill?: boolean;
+
+		icon?: string;
+		leadingIcon?: string;
+		trailingIcon?: string;
+		showLeading?: boolean;
+		showTrailing?: boolean;
+
+		avatar?: {
+			src?: string;
+			icon?: string;
+			alt?: string;
+		};
+	}>(),
+	{
+		color: "gray",
+		variant: "soft",
+		size: "sm",
+		rounded: true,
+		pill: false,
+		showLeading: true,
+		showTrailing: true,
+	},
+);
+
+const sizes = {
+	xs: {
+		container: "text-xs px-2 py-0.5 gap-1",
+		icon: "h-3 w-3",
+		avatar: "h-4 w-4",
+	},
+	sm: {
+		container: "text-xs px-3 py-0.5 gap-1.5",
+		icon: "h-3.5 w-3.5",
+		avatar: "h-5 w-5",
+	},
+	md: {
+		container: "text-sm px-4 py-1 gap-2",
+		icon: "h-4 w-4",
+		avatar: "h-6 w-6",
+	},
+} as const;
+
+const colorVariants: Record<
+	NonNullable<typeof props.color>,
+	Record<NonNullable<typeof props.variant>, string>
+> = {
+	gray: {
+		solid: "bg-gray-800 text-white",
+		soft: "bg-gray-100 text-gray-800",
+		outline: "border border-gray-300 text-gray-800",
+	},
+	primary: {
+		solid: "bg-primary-600 text-white",
+		soft: "bg-primary-100 text-primary-800",
+		outline: "border border-primary-300 text-primary-700",
+	},
+	info: {
+		solid: "bg-blue-600 text-white",
+		soft: "bg-blue-100 text-blue-800",
+		outline: "border border-blue-300 text-blue-700",
+	},
+	success: {
+		solid: "bg-emerald-600 text-white",
+		soft: "bg-emerald-100 text-emerald-800",
+		outline: "border border-emerald-300 text-emerald-700",
+	},
+	warning: {
+		solid: "bg-amber-500 text-white",
+		soft: "bg-amber-100 text-amber-800",
+		outline: "border border-amber-300 text-amber-700",
+	},
+	error: {
+		solid: "bg-red-600 text-white",
+		soft: "bg-red-100 text-red-800",
+		outline: "border border-red-300 text-red-700",
+	},
+};
+
+const leadingIconName = computed<string | null>(() => {
+	return props.leadingIcon ?? props.icon ?? null;
+});
+
+const showLeadingIcon = computed(
+	() => props.showLeading && !!leadingIconName.value && !props.avatar,
+);
+
+const showTrailingIcon = computed(
+	() => props.showTrailing && !!props.trailingIcon,
+);
+
+const classes = computed(() => [
+	"inline-flex items-center font-medium whitespace-nowrap w-fit",
+	sizes[props.size].container,
+	colorVariants[props.color][props.variant],
+	props.pill ? "rounded-full" : props.rounded ? "rounded-md" : "rounded-none",
+]);
+
+const trailingIconName = computed<string | null>(() => {
+	return props.showTrailing && props.trailingIcon ? props.trailingIcon : null;
+});
+</script>
+
+<template>
+	<span :class="classes">
+		<span
+			v-if="avatar"
+			class="flex items-center justify-center shrink-0"
+			:class="sizes[size].avatar"
+		>
+			<SafeImgWithLoader
+				v-if="avatar.src"
+				:src="avatar.src"
+				:alt="avatar.alt || ''"
+				class="h-full w-full rounded-full object-contain"
+			/>
+			<UiIcon
+				v-else-if="avatar.icon"
+				:name="avatar.icon"
+				class="h-full w-full"
+			/>
+		</span>
+
+		<UiIcon
+			v-if="showLeadingIcon && leadingIconName"
+			:name="leadingIconName"
+			:class="sizes[size].icon"
+		/>
+
+		<span>
+			<slot>{{ label }}</slot>
+		</span>
+
+		<UiIcon
+			v-if="trailingIconName"
+			:name="trailingIconName"
+			:class="sizes[size].icon"
+		/>
+	</span>
+</template>

package/app/components/ui/Banner.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		title?: string;
+		description?: string;
+
+		icon?: string;
+		avatar?: {
+			src?: string;
+			icon?: string;
+			alt?: string;
+		};
+
+		color?: "primary" | "gray" | "info" | "success" | "warning" | "error";
+		variant?: "solid" | "soft" | "outline";
+
+		closable?: boolean;
+		rounded?: boolean;
+		bordered?: boolean;
+	}>(),
+	{
+		color: "gray",
+		variant: "soft",
+		closable: false,
+		rounded: true,
+		bordered: false,
+	},
+);
+
+const visible = ref(true);
+
+const close = () => {
+	visible.value = false;
+};
+
+const colorVariants: Record<
+	NonNullable<typeof props.color>,
+	Record<NonNullable<typeof props.variant>, string>
+> = {
+	gray: {
+		solid: "bg-gray-800 text-white border border-gray-800/30",
+		soft: "bg-gray-100 text-gray-900 border border-gray-300",
+		outline: "bg-transparent text-gray-900 border border-gray-400",
+	},
+	primary: {
+		solid: "bg-primary-600 text-white border border-primary-600/30",
+		soft: "bg-primary-100 text-primary-900 border border-primary-300",
+		outline: "bg-transparent text-primary-900 border border-primary-400",
+	},
+	info: {
+		solid: "bg-blue-600 text-white border border-blue-600/30",
+		soft: "bg-blue-100 text-blue-900 border border-blue-300",
+		outline: "bg-transparent text-blue-900 border border-blue-400",
+	},
+	success: {
+		solid: "bg-emerald-600 text-white border border-emerald-600/30",
+		soft: "bg-emerald-100 text-emerald-900 border border-emerald-300",
+		outline: "bg-transparent text-emerald-900 border border-emerald-400",
+	},
+	warning: {
+		solid: "bg-amber-500 text-white border border-amber-500/30",
+		soft: "bg-amber-100 text-amber-900 border border-amber-300",
+		outline: "bg-transparent text-amber-900 border border-amber-400",
+	},
+	error: {
+		solid: "bg-red-600 text-white border border-red-600/30",
+		soft: "bg-red-100 text-red-900 border border-red-300",
+		outline: "bg-transparent text-red-900 border border-red-400",
+	},
+};
+
+const classes = computed(() => [
+	"w-full flex items-center gap-4 px-4 py-3",
+	colorVariants[props.color][props.variant],
+	props.rounded ? "rounded-md" : "rounded-none",
+	props.bordered || props.variant === "outline"
+		? "border border-current/20"
+		: null,
+]);
+</script>
+
+<template>
+	<div v-if="visible" role="region" :class="classes">
+		<div
+			v-if="avatar || icon"
+			class="flex items-center justify-center shrink-0"
+		>
+			<div class="h-10 w-10 flex items-center justify-center">
+				<SafeImgWithLoader
+					v-if="avatar?.src"
+					:src="avatar.src"
+					:alt="avatar.alt || ''"
+					class="h-full w-full object-contain rounded-full"
+				/>
+				<UiIcon
+					v-else-if="avatar?.icon"
+					:name="avatar.icon"
+					class="h-full w-full"
+				/>
+				<UiIcon v-else-if="icon" :name="icon" class="h-6 w-6" />
+			</div>
+		</div>
+
+		<div class="flex-1 min-w-0">
+			<div
+				v-if="$slots.title || title"
+				class="font-semibold leading-tight"
+			>
+				<slot name="title">{{ title }}</slot>
+			</div>
+
+			<div
+				v-if="$slots.default || description"
+				class="text-sm opacity-90 leading-relaxed"
+			>
+				<slot>{{ description }}</slot>
+			</div>
+		</div>
+
+		<div v-if="$slots.actions" class="flex items-center gap-2 shrink-0">
+			<slot name="actions" />
+		</div>
+
+		<button
+			v-if="closable"
+			@click="close"
+			class="ml-2 opacity-60 hover:opacity-100 transition shrink-0"
+			aria-label="Close banner"
+		>
+			<UiIcon name="heroicons:x-mark" class="h-5 w-5" />
+		</button>
+	</div>
+</template>

package/app/components/ui/Button.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { NuxtLink } from "#components";
+
+const props = withDefaults(
+	defineProps<{
+		as?: "button" | "a" | "nuxt-link" | any;
+
+		label?: string;
+
+		to?: string | object;
+		href?: string;
+		target?: string;
+
+		color?:
+			| "primary"
+			| "gray"
+			| "info"
+			| "success"
+			| "warning"
+			| "error"
+			| "base";
+		variant?: "solid" | "soft" | "outline" | "ghost";
+		size?: "xs" | "sm" | "md" | "lg";
+
+		icon?: string;
+		leadingIcon?: string;
+		trailingIcon?: string;
+
+		loading?: boolean;
+		disabled?: boolean;
+
+		block?: boolean;
+		rounded?: boolean;
+		square?: boolean;
+	}>(),
+	{
+		as: "button",
+		color: "base",
+		variant: "solid",
+		size: "md",
+		loading: false,
+		disabled: false,
+		block: false,
+		rounded: true,
+		square: false,
+	},
+);
+
+const resolvedAs = computed(() => {
+	if (props.as === "nuxt-link") return NuxtLink;
+	return props.as;
+});
+
+const isDisabled = computed(() => props.disabled || props.loading);
+
+const leadingIconName = computed<string | null>(() => {
+	return props.leadingIcon ?? props.icon ?? null;
+});
+
+const trailingIconName = computed<string | null>(() => {
+	return props.trailingIcon ?? null;
+});
+
+const sizes = {
+	xs: "text-xs px-2 py-1 gap-1",
+	sm: "text-sm px-2.5 py-1.5 gap-1.5",
+	md: "text-sm px-4 py-2 gap-2",
+	lg: "text-base px-5 py-2.5 gap-2.5",
+} as const;
+
+const iconSizes = {
+	xs: "h-3 w-3",
+	sm: "h-4 w-4",
+	md: "h-5 w-5",
+	lg: "h-6 w-6",
+} as const;
+
+const baseVariants = {
+	solid: "bg-[var(--ui-bg)] text-[var(--ui-text)] border border-[var(--ui-border,var(--ui-text))]",
+	soft: "bg-[color-mix(in srgb, var(--ui-bg) 85%, transparent)] text-[var(--ui-text)] border border-[var(--ui-border,var(--ui-text))]",
+	outline:
+		"bg-transparent text-[var(--ui-text)] border border-[var(--ui-border,var(--ui-text))]",
+	ghost: "bg-transparent text-[var(--ui-text)]",
+};
+
+const colorVariants: Record<
+	NonNullable<typeof props.color>,
+	Record<NonNullable<typeof props.variant>, string>
+> = {
+	base: baseVariants,
+
+	gray: {
+		solid: "bg-gray-800 text-white border border-gray-800/30",
+		soft: "bg-gray-100 text-gray-900 border border-gray-300",
+		outline: "bg-transparent text-gray-900 border border-gray-400",
+		ghost: "bg-transparent text-gray-900",
+	},
+	primary: {
+		solid: "bg-primary-600 text-white border border-primary-600/30",
+		soft: "bg-primary-100 text-primary-900 border border-primary-300",
+		outline: "bg-transparent text-primary-900 border border-primary-400",
+		ghost: "bg-transparent text-primary-900",
+	},
+	info: {
+		solid: "bg-blue-600 text-white border border-blue-600/30",
+		soft: "bg-blue-100 text-blue-900 border border-blue-300",
+		outline: "bg-transparent text-blue-900 border border-blue-400",
+		ghost: "bg-transparent text-blue-900",
+	},
+	success: {
+		solid: "bg-emerald-600 text-white border border-emerald-600/30",
+		soft: "bg-emerald-100 text-emerald-900 border border-emerald-300",
+		outline: "bg-transparent text-emerald-900 border border-emerald-400",
+		ghost: "bg-transparent text-emerald-900",
+	},
+	warning: {
+		solid: "bg-amber-500 text-white border border-amber-500/30",
+		soft: "bg-amber-100 text-amber-900 border border-amber-300",
+		outline: "bg-transparent text-amber-900 border border-amber-400",
+		ghost: "bg-transparent text-amber-900",
+	},
+	error: {
+		solid: "bg-red-600 text-white border border-red-600/30",
+		soft: "bg-red-100 text-red-900 border border-red-300",
+		outline: "bg-transparent text-red-900 border border-red-400",
+		ghost: "bg-transparent text-red-900",
+	},
+};
+
+const classes = computed(() => [
+	"inline-flex items-center justify-center font-medium whitespace-nowrap transition",
+	sizes[props.size],
+	colorVariants[props.color][props.variant],
+	props.block ? "w-full" : "w-fit",
+	props.square ? "aspect-square p-0" : null,
+	props.rounded ? "rounded-md" : "rounded-none",
+	isDisabled.value ? "opacity-50 pointer-events-none" : "hover:brightness-95",
+]);
+</script>
+
+<template>
+	<component
+		:is="resolvedAs"
+		:to="to"
+		:href="href"
+		:target="target"
+		:disabled="resolvedAs === 'button' ? isDisabled : undefined"
+		:aria-disabled="isDisabled || undefined"
+		:class="classes"
+	>
+		<UiIcon
+			v-if="loading"
+			name="heroicons:arrow-path"
+			class="animate-spin"
+			:style="{ color: 'var(--loader-fill-color, currentColor)' }"
+			:class="iconSizes[size]"
+		/>
+
+		<UiIcon
+			v-else-if="leadingIconName"
+			:name="leadingIconName"
+			:class="iconSizes[size]"
+		/>
+
+		<span v-if="$slots.default || label">
+			<slot>{{ label }}</slot>
+		</span>
+
+		<UiIcon
+			v-if="!loading && trailingIconName"
+			:name="trailingIconName"
+			:class="iconSizes[size]"
+		/>
+	</component>
+</template>

package/app/components/ui/Card.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		as?: "div" | "section" | "article";
+
+		to?: string | object;
+		href?: string;
+		target?: string;
+
+		bordered?: boolean;
+		rounded?: boolean;
+		padded?: boolean;
+	}>(),
+	{
+		as: "div",
+		bordered: true,
+		rounded: true,
+		padded: true,
+	},
+);
+
+const isLink = computed(() => !!props.to || !!props.href);
+
+const tag = computed(() => {
+	if (props.to) return "NuxtLink";
+	if (props.href) return "a";
+	return props.as;
+});
+
+const classes = computed(() => [
+	"bg-[var(--ui-bg)] text-[var(--ui-text)] transition",
+	props.bordered ? "border border-[var(--ui-border,var(--ui-text))]" : "",
+	props.rounded ? "rounded-lg" : "rounded-none",
+	isLink.value
+		? "cursor-pointer hover:bg-[color-mix(in srgb, var(--ui-bg) 92%, var(--ui-text))] focus:outline-none focus:ring-2 focus:ring-[var(--ui-border,var(--ui-text))] focus:ring-offset-2"
+		: "",
+]);
+</script>
+
+<template>
+	<component
+		:is="tag"
+		:to="to"
+		:href="href"
+		:target="target"
+		:class="classes"
+	>
+		<div
+			v-if="$slots.header"
+			class="px-4 py-3 border-b border-(--ui-border,var(--ui-text))"
+		>
+			<slot name="header" />
+		</div>
+
+		<div :class="padded ? 'p-4' : ''">
+			<slot />
+		</div>
+
+		<div
+			v-if="$slots.footer"
+			class="px-4 py-3 border-t border-(--ui-border,var(--ui-text))"
+		>
+			<slot name="footer" />
+		</div>
+	</component>
+</template>

package/app/components/ui/Checkbox.vue

@@ -0,0 +1,134 @@
+<template>
+	<fieldset>
+		<legend class="sr-only">{{ legend || "Checkboxes" }}</legend>
+
+		<div :class="containerClasses">
+			<div :class="wrapperClasses">
+				<label
+					v-for="option in options"
+					:key="option.value"
+					:for="getInputId(option.value)"
+					class="flex w-full cursor-pointer items-start gap-3 py-3 select-none"
+				>
+					<input
+						:id="getInputId(option.value)"
+						type="checkbox"
+						:value="option.value"
+						:checked="model.includes(option.value)"
+						:disabled="option.disabled || disabled"
+						@change="toggle(option.value)"
+						class="sr-only peer"
+					/>
+
+					<div
+						class="relative flex size-5 shrink-0 items-center justify-center rounded border-2 transition-colors duration-200"
+						:class="[
+							'peer-checked:bg-blue-600 peer-checked:border-blue-600',
+							'peer-disabled:opacity-60 peer-disabled:cursor-not-allowed',
+							'border-gray-300 dark:border-gray-600',
+							'bg-(--ui-bg) mt-0.5',
+						]"
+					>
+						<svg
+							class="size-3.5 text-white transition-transform duration-200 origin-center"
+							:class="
+								model.includes(option.value)
+									? 'scale-100'
+									: 'scale-0'
+							"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+						>
+							<path
+								d="M13.78 3.22a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06L6 10.44l7-7a.75.75 0 0 1 1.06 0z"
+							/>
+						</svg>
+					</div>
+
+					<div class="flex-1">
+						<span
+							class="font-medium"
+							:style="{ color: 'var(--ui-text)' }"
+						>
+							{{ option.label }}
+						</span>
+						<p
+							v-if="option.description"
+							class="mt-0.5 text-sm opacity-70"
+							:style="{ color: 'var(--ui-text)' }"
+						>
+							{{ option.description }}
+						</p>
+					</div>
+				</label>
+			</div>
+		</div>
+	</fieldset>
+</template>
+
+<script setup lang="ts">
+interface CheckboxOption {
+	label: string;
+	value: string | number;
+	description?: string;
+	disabled?: boolean;
+}
+
+const props = defineProps({
+	modelValue: {
+		type: Array as () => (string | number)[],
+		default: () => [],
+	},
+	options: {
+		type: Array as () => CheckboxOption[],
+		required: true,
+	},
+	legend: String,
+	disabled: Boolean,
+	divider: { type: Boolean, default: false },
+});
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: (string | number)[]): void;
+}>();
+
+const idMap = ref<Map<string | number, string>>(new Map());
+let counter = 0;
+
+onMounted(() => {
+	props.options.forEach((opt) => {
+		if (!idMap.value.has(opt.value)) {
+			idMap.value.set(opt.value, `cb-${++counter}`);
+		}
+	});
+});
+
+const getInputId = (value: string | number): string => {
+	return idMap.value.get(value) || `cb-${value}`;
+};
+
+const model = computed<(string | number)[]>({
+	get: () => props.modelValue,
+	set: (val) => emit("update:modelValue", val),
+});
+
+const toggle = (value: string | number) => {
+	const current = [...model.value];
+	const index = current.indexOf(value);
+	if (index > -1) {
+		current.splice(index, 1);
+	} else {
+		current.push(value);
+	}
+	emit("update:modelValue", current);
+};
+
+const containerClasses = computed(() =>
+	props.divider ? "flow-root" : "space-y-3",
+);
+
+const wrapperClasses = computed(() => {
+	if (!props.divider) return "";
+	return "w-full divide-y divide-gray-300 dark:divide-gray-700";
+});
+</script>