@tower_74/cms-app 0.1.0

package/src/components/Icon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import * as icons from 'lucide-vue-next';
+import { computed } from 'vue';
+
+interface Props {
+    name: string;
+    class?: string;
+    size?: number | string;
+    color?: string;
+    strokeWidth?: number | string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    class: '',
+    size: 16,
+    strokeWidth: 2,
+});
+
+const className = computed(() => cn('h-4 w-4', props.class));
+
+const icon = computed(() => {
+    const iconName = props.name.charAt(0).toUpperCase() + props.name.slice(1);
+    return (icons as Record<string, any>)[iconName];
+});
+</script>
+
+<template>
+    <component :is="icon" :class="className" :size="size" :stroke-width="strokeWidth" :color="color" />
+</template>

package/src/components/InputError.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+    message?: string;
+}>();
+</script>
+
+<template>
+    <div v-show="message">
+        <p class="text-sm text-red-600 dark:text-red-500">
+            {{ message }}
+        </p>
+    </div>
+</template>

package/src/components/MenuItemsEditor.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Button, Input } from '@tower_74/cms-ui';
+
+interface Item {
+    label: string;
+    url: string;
+}
+
+const props = defineProps<{ modelValue: Item[] }>();
+const emit = defineEmits<{ 'update:modelValue': [value: Item[]] }>();
+
+const commit = (items: Item[]) => emit('update:modelValue', items);
+
+const add = () => commit([...props.modelValue, { label: '', url: '' }]);
+
+const remove = (index: number) => {
+    const items = [...props.modelValue];
+    items.splice(index, 1);
+    commit(items);
+};
+
+const move = (index: number, direction: -1 | 1) => {
+    const target = index + direction;
+    if (target < 0 || target >= props.modelValue.length) return;
+    const items = [...props.modelValue];
+    [items[index], items[target]] = [items[target], items[index]];
+    commit(items);
+};
+
+const setField = (index: number, key: 'label' | 'url', value: string) => {
+    const items = [...props.modelValue];
+    items[index] = { ...items[index], [key]: value };
+    commit(items);
+};
+</script>
+
+<template>
+    <div class="space-y-3">
+        <p v-if="!modelValue.length" class="rounded border border-dashed border-border px-4 py-6 text-center text-sm text-muted">
+            No items yet. Add your first link below.
+        </p>
+
+        <div v-for="(item, index) in modelValue" :key="index" class="flex items-end gap-2 rounded-lg border border-border bg-background p-3">
+            <div class="flex-1">
+                <label class="mb-1 block text-xs font-medium text-muted">Label</label>
+                <Input :model-value="item.label" placeholder="Home" @update:model-value="setField(index, 'label', $event)" />
+            </div>
+            <div class="flex-1">
+                <label class="mb-1 block text-xs font-medium text-muted">URL</label>
+                <Input :model-value="item.url" placeholder="/ or https://…" @update:model-value="setField(index, 'url', $event)" />
+            </div>
+            <Button type="button" variant="ghost" size="sm" :disabled="index === 0" @click="move(index, -1)">↑</Button>
+            <Button type="button" variant="ghost" size="sm" :disabled="index === modelValue.length - 1" @click="move(index, 1)">↓</Button>
+            <Button type="button" variant="danger" size="sm" @click="remove(index)">✕</Button>
+        </div>
+
+        <Button type="button" variant="secondary" @click="add">Add item</Button>
+    </div>
+</template>

package/src/components/NavUser.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import UserInfo from '@/components/UserInfo.vue';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { type SharedData, type User } from '@/types';
+import { usePage } from '@inertiajs/vue3';
+import { ChevronsUpDown } from 'lucide-vue-next';
+import UserMenuContent from './UserMenuContent.vue';
+
+const page = usePage<SharedData>();
+const user = page.props.auth.user as User;
+</script>
+
+<template>
+    <SidebarMenu>
+        <SidebarMenuItem>
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                    <SidebarMenuButton size="lg" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                        <UserInfo :user="user" />
+                        <ChevronsUpDown class="ml-auto size-4" />
+                    </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
+                    <UserMenuContent :user="user" />
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </SidebarMenuItem>
+    </SidebarMenu>
+</template>

package/src/components/Pagination.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+
+interface PageLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+defineProps<{ links: PageLink[] }>();
+</script>
+
+<template>
+    <!-- Laravel paginator links: [prev, …pages, next]. Hide when there's a single page. -->
+    <nav v-if="links.length > 3" class="mt-4 flex flex-wrap gap-1">
+        <template v-for="(link, i) in links" :key="i">
+            <span v-if="!link.url" class="px-3 py-1 text-sm text-muted" v-html="link.label" />
+            <Link
+                v-else
+                :href="link.url"
+                class="rounded px-3 py-1 text-sm transition-colors"
+                :class="link.active ? 'bg-primary text-primary-foreground' : 'text-text hover:bg-surface'"
+            >
+                <span v-html="link.label" />
+            </Link>
+        </template>
+    </nav>
+</template>

package/src/components/PlaceholderPattern.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const patternId = computed(() => `pattern-${Math.random().toString(36).substring(2, 9)}`);
+</script>
+
+<template>
+    <svg class="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" fill="none">
+        <defs>
+            <pattern :id="patternId" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
+                <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
+            </pattern>
+        </defs>
+        <rect stroke="none" :fill="`url(#${patternId})`" width="100%" height="100%"></rect>
+    </svg>
+</template>

package/src/components/Seo.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+
+defineProps<{
+    seo: {
+        title: string;
+        description?: string | null;
+        url?: string | null;
+        image?: string | null;
+        type?: string | null;
+    };
+}>();
+</script>
+
+<template>
+    <Head :title="seo.title">
+        <meta v-if="seo.description" head-key="description" name="description" :content="seo.description" />
+        <link v-if="seo.url" head-key="canonical" rel="canonical" :href="seo.url" />
+
+        <meta head-key="og:title" property="og:title" :content="seo.title" />
+        <meta v-if="seo.description" head-key="og:description" property="og:description" :content="seo.description" />
+        <meta head-key="og:type" property="og:type" :content="seo.type ?? 'website'" />
+        <meta v-if="seo.url" head-key="og:url" property="og:url" :content="seo.url" />
+        <meta v-if="seo.image" head-key="og:image" property="og:image" :content="seo.image" />
+
+        <meta head-key="twitter:card" name="twitter:card" :content="seo.image ? 'summary_large_image' : 'summary'" />
+    </Head>
+</template>

package/src/components/TextLink.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+
+interface Props {
+    href: string;
+    tabindex?: number;
+    method?: string;
+    as?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <Link
+        :href="href"
+        :tabindex="tabindex"
+        :method="method"
+        :as="as"
+        class="hover:decoration-current! text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out dark:decoration-neutral-500"
+    >
+        <slot />
+    </Link>
+</template>

package/src/components/UserInfo.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useInitials } from '@/composables/useInitials';
+import type { User } from '@/types';
+import { computed } from 'vue';
+
+interface Props {
+    user: User;
+    showEmail?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    showEmail: false,
+});
+
+const { getInitials } = useInitials();
+
+// Compute whether we should show the avatar image
+const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '');
+</script>
+
+<template>
+    <Avatar class="h-8 w-8 overflow-hidden rounded-lg">
+        <AvatarImage v-if="showAvatar" :src="user.avatar" :alt="user.name" />
+        <AvatarFallback class="rounded-lg text-black dark:text-white">
+            {{ getInitials(user.name) }}
+        </AvatarFallback>
+    </Avatar>
+
+    <div class="grid flex-1 text-left text-sm leading-tight">
+        <span class="truncate font-medium">{{ user.name }}</span>
+        <span v-if="showEmail" class="truncate text-xs text-muted-foreground">{{ user.email }}</span>
+    </div>
+</template>

package/src/components/UserMenuContent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import UserInfo from '@/components/UserInfo.vue';
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
+import type { User } from '@/types';
+import { Link } from '@inertiajs/vue3';
+import { LogOut, Settings } from 'lucide-vue-next';
+
+interface Props {
+    user: User;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <DropdownMenuLabel class="p-0 font-normal">
+        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+            <UserInfo :user="user" :show-email="true" />
+        </div>
+    </DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuGroup>
+        <DropdownMenuItem :as-child="true">
+            <Link class="block w-full" :href="route('profile.edit')" as="button">
+                <Settings class="mr-2 h-4 w-4" />
+                Settings
+            </Link>
+        </DropdownMenuItem>
+    </DropdownMenuGroup>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem :as-child="true">
+        <Link class="block w-full" method="post" :href="route('logout')" as="button">
+            <LogOut class="mr-2 h-4 w-4" />
+            Log out
+        </Link>
+    </DropdownMenuItem>
+</template>

package/src/components/commerce/OptionsEditor.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { Button, Input } from '@tower_74/cms-ui';
+
+interface Option {
+    name: string;
+    values: string[];
+}
+
+const props = defineProps<{ modelValue: Option[] }>();
+const emit = defineEmits<{ 'update:modelValue': [value: Option[]] }>();
+
+const commit = (options: Option[]) => emit('update:modelValue', options);
+
+const add = () => commit([...props.modelValue, { name: '', values: [] }]);
+const remove = (i: number) => {
+    const options = [...props.modelValue];
+    options.splice(i, 1);
+    commit(options);
+};
+const setName = (i: number, name: string) => {
+    const options = [...props.modelValue];
+    options[i] = { ...options[i], name };
+    commit(options);
+};
+const setValues = (i: number, csv: string) => {
+    const options = [...props.modelValue];
+    options[i] = {
+        ...options[i],
+        values: csv
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean),
+    };
+    commit(options);
+};
+const valuesText = (option: Option) => option.values.join(', ');
+</script>
+
+<template>
+    <div class="space-y-3">
+        <div v-for="(option, i) in modelValue" :key="i" class="flex items-end gap-2 rounded-lg border border-border bg-background p-3">
+            <div class="w-48">
+                <label class="mb-1 block text-xs font-medium text-muted">Option</label>
+                <Input :model-value="option.name" placeholder="Size" @update:model-value="setName(i, $event)" />
+            </div>
+            <div class="flex-1">
+                <label class="mb-1 block text-xs font-medium text-muted">Values (comma-separated)</label>
+                <Input :model-value="valuesText(option)" placeholder="S, M, L" @update:model-value="setValues(i, $event)" />
+            </div>
+            <Button type="button" variant="danger" size="sm" @click="remove(i)">✕</Button>
+        </div>
+
+        <Button type="button" variant="secondary" @click="add">Add option</Button>
+    </div>
+</template>

package/src/components/commerce/VariantsEditor.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { Button, Input, Select } from '@tower_74/cms-ui';
+
+interface Option {
+    name: string;
+    values: string[];
+}
+interface Variant {
+    sku: string;
+    price: string;
+    stock: number | string;
+    options: Record<string, string>;
+}
+
+const props = defineProps<{ modelValue: Variant[]; options: Option[]; currencySymbol: string }>();
+const emit = defineEmits<{ 'update:modelValue': [value: Variant[]] }>();
+
+const commit = (variants: Variant[]) => emit('update:modelValue', variants);
+
+const add = () => {
+    const options: Record<string, string> = {};
+    props.options.forEach((o) => (options[o.name] = o.values[0] ?? ''));
+    commit([...props.modelValue, { sku: '', price: '', stock: 0, options }]);
+};
+const remove = (i: number) => {
+    const variants = [...props.modelValue];
+    variants.splice(i, 1);
+    commit(variants);
+};
+const setField = (i: number, key: 'sku' | 'price' | 'stock', value: string) => {
+    const variants = [...props.modelValue];
+    variants[i] = { ...variants[i], [key]: value };
+    commit(variants);
+};
+const setOption = (i: number, name: string, value: string) => {
+    const variants = [...props.modelValue];
+    variants[i] = { ...variants[i], options: { ...variants[i].options, [name]: value } };
+    commit(variants);
+};
+const optionsFor = (option: Option) => option.values.map((v) => ({ label: v, value: v }));
+</script>
+
+<template>
+    <div class="space-y-3">
+        <div v-for="(variant, i) in modelValue" :key="i" class="flex flex-wrap items-end gap-2 rounded-lg border border-border bg-background p-3">
+            <div v-for="option in options" :key="option.name" class="w-32">
+                <label class="mb-1 block text-xs font-medium text-muted">{{ option.name }}</label>
+                <Select
+                    :model-value="variant.options[option.name] ?? ''"
+                    :options="optionsFor(option)"
+                    @update:model-value="setOption(i, option.name, $event)"
+                />
+            </div>
+            <div class="w-40">
+                <label class="mb-1 block text-xs font-medium text-muted">SKU</label>
+                <Input :model-value="variant.sku" placeholder="ABC-001" @update:model-value="setField(i, 'sku', $event)" />
+            </div>
+            <div class="w-28">
+                <label class="mb-1 block text-xs font-medium text-muted">Price ({{ currencySymbol }})</label>
+                <Input :model-value="String(variant.price)" type="number" @update:model-value="setField(i, 'price', $event)" />
+            </div>
+            <div class="w-24">
+                <label class="mb-1 block text-xs font-medium text-muted">Stock</label>
+                <Input :model-value="String(variant.stock)" type="number" @update:model-value="setField(i, 'stock', $event)" />
+            </div>
+            <Button type="button" variant="danger" size="sm" @click="remove(i)">✕</Button>
+        </div>
+
+        <Button type="button" variant="secondary" @click="add">Add variant</Button>
+    </div>
+</template>

package/src/components/ui/avatar/Avatar.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { AvatarRoot } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { avatarVariant, type AvatarVariants } from '.';
+
+const props = withDefaults(
+    defineProps<{
+        class?: HTMLAttributes['class'];
+        size?: AvatarVariants['size'];
+        shape?: AvatarVariants['shape'];
+    }>(),
+    {
+        size: 'sm',
+        shape: 'circle',
+    },
+);
+</script>
+
+<template>
+    <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+        <slot />
+    </AvatarRoot>
+</template>

package/src/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue';
+
+const props = defineProps<AvatarFallbackProps>();
+</script>
+
+<template>
+    <AvatarFallback v-bind="props">
+        <slot />
+    </AvatarFallback>
+</template>

package/src/components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'radix-vue';
+
+const props = defineProps<AvatarImageProps>();
+</script>
+
+<template>
+    <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>

package/src/components/ui/avatar/index.ts

@@ -0,0 +1,24 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as Avatar } from './Avatar.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export { default as AvatarImage } from './AvatarImage.vue';
+
+export const avatarVariant = cva(
+    'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+    {
+        variants: {
+            size: {
+                sm: 'h-10 w-10 text-xs',
+                base: 'h-16 w-16 text-2xl',
+                lg: 'h-32 w-32 text-5xl',
+            },
+            shape: {
+                circle: 'rounded-full',
+                square: 'rounded-md',
+            },
+        },
+    },
+);
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>;

package/src/components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <nav aria-label="breadcrumb" :class="props.class">
+        <slot />
+    </nav>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { MoreHorizontal } from 'lucide-vue-next';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <span role="presentation" aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)">
+        <slot>
+            <MoreHorizontal class="h-4 w-4" />
+        </slot>
+        <span class="sr-only">More</span>
+    </span>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <li :class="cn('inline-flex items-center gap-1.5', props.class)">
+        <slot />
+    </li>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+    as: 'a',
+});
+</script>
+
+<template>
+    <Primitive :as="as" :as-child="asChild" :class="cn('transition-colors hover:text-foreground', props.class)">
+        <slot />
+    </Primitive>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <ol :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)">
+        <slot />
+    </ol>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <span role="link" aria-disabled="true" aria-current="page" :class="cn('font-normal text-foreground', props.class)">
+        <slot />
+    </span>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { ChevronRight } from 'lucide-vue-next';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <li role="presentation" aria-hidden="true" :class="cn('[&>svg]:h-3.5 [&>svg]:w-3.5', props.class)">
+        <slot>
+            <ChevronRight />
+        </slot>
+    </li>
+</template>

package/src/components/ui/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';

package/src/components/ui/button/Button.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { buttonVariants, type ButtonVariants } from '.';
+
+interface Props extends PrimitiveProps {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: 'button',
+});
+</script>
+
+<template>
+    <Primitive :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+        <slot />
+    </Primitive>
+</template>