maevsi · dargmuesli · Jan 3, 2025 · Jan 2, 2025 · Jan 2, 2025 · Jan 3, 2025
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/.config/nuxt.ts b/src/.config/nuxt.ts
@@ -75,6 +75,7 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     '@vite-pwa/nuxt',
     'nuxt-gtag',
+    'shadcn-nuxt',
     async (_options: ModuleOptions, nuxt: Nuxt) => {
       nuxt.options.runtimeConfig.public.vio.releaseName = await RELEASE_NAME()
     },
@@ -113,6 +114,10 @@ export default defineNuxtConfig({
     },
     'nuxt-security',
   ],
+  shadcn: {
+    prefix: '',
+    componentDir: 'app/components/scn',
+  },
   nitro: {
     compressPublicAssets: true,
     experimental: {

diff --git a/src/app/assets/css/tailwind.css b/src/app/assets/css/tailwind.css
@@ -9,6 +9,51 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+
   ::placeholder {
     @apply italic;
   }

diff --git a/src/app/components/scn/drawer/Drawer.vue b/src/app/components/scn/drawer/Drawer.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerRoot } from 'vaul-vue'
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  shouldScaleBackground: true,
+})
+
+const emits = defineEmits<DrawerRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>
diff --git a/src/app/components/scn/drawer/DrawerContent.vue b/src/app/components/scn/drawer/DrawerContent.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import DrawerOverlay from './DrawerOverlay.vue'
+
+const props = defineProps<
+  DialogContentProps & { class?: HtmlHTMLAttributes['class'] }
+>()
+const emits = defineEmits<DialogContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border',
+          props.class,
+        )
+      "
+    >
+      <div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
diff --git a/src/app/components/scn/drawer/DrawerDescription.vue b/src/app/components/scn/drawer/DrawerDescription.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from 'vaul-vue'
+import { cn } from '@/utils/shadcn'
+import { DrawerDescription } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
+
+const props = defineProps<
+  DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerDescription
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DrawerDescription>
+</template>
diff --git a/src/app/components/scn/drawer/DrawerFooter.vue b/src/app/components/scn/drawer/DrawerFooter.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/app/components/scn/drawer/DrawerHeader.vue b/src/app/components/scn/drawer/DrawerHeader.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/app/components/scn/drawer/DrawerOverlay.vue b/src/app/components/scn/drawer/DrawerOverlay.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { DrawerOverlay } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
+
+const props = defineProps<
+  DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerOverlay
+    v-bind="delegatedProps"
+    :class="cn('fixed inset-0 z-50 bg-black/80', props.class)"
+  />
+</template>
diff --git a/src/app/components/scn/drawer/DrawerTitle.vue b/src/app/components/scn/drawer/DrawerTitle.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from 'vaul-vue'
+import { cn } from '@/utils/shadcn'
+import { DrawerTitle } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
+
+const props = defineProps<
+  DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerTitle
+    v-bind="delegatedProps"
+    :class="
+      cn('text-lg font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </DrawerTitle>
+</template>
diff --git a/src/app/components/scn/drawer/index.ts b/src/app/components/scn/drawer/index.ts
@@ -0,0 +1,8 @@
+export { default as Drawer } from './Drawer.vue'
+export { default as DrawerContent } from './DrawerContent.vue'
+export { default as DrawerDescription } from './DrawerDescription.vue'
+export { default as DrawerFooter } from './DrawerFooter.vue'
+export { default as DrawerHeader } from './DrawerHeader.vue'
+export { default as DrawerOverlay } from './DrawerOverlay.vue'
+export { default as DrawerTitle } from './DrawerTitle.vue'
+export { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'
diff --git a/src/app/utils/shadcn/index.ts b/src/app/utils/shadcn/index.ts
@@ -0,0 +1 @@
+export * from './utils'
diff --git a/src/app/utils/shadcn/utils.ts b/src/app/utils/shadcn/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/components.json b/src/components.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": "./tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "./app/assets/css/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "ui": "app/components/scn",
+    "components": "app/components",
+    "utils": "@/utils/shadcn"
+  }
+}
diff --git a/src/package.json b/src/package.json
@@ -71,7 +71,9 @@
     "browserslist-useragent-regexp": "4.1.3",
     "camelcase-keys": "9.1.3",
     "chart.js": "4.4.7",
+    "class-variance-authority": "0.7.1",
     "clipboardy": "4.0.0",
+    "clsx": "2.1.1",
     "consola": "3.3.3",
     "css-element-queries": "1.2.3",
     "dayjs": "2.0.0-alpha.4",
@@ -86,6 +88,7 @@
     "js-confetti": "0.12.0",
     "kafkajs": "2.2.4",
     "lodash-es": "4.17.21",
+    "lucide-vue-next": "0.469.0",
     "moment-timezone": "0.5.46",
     "mustache": "4.2.0",
     "nodemailer": "6.9.16",
@@ -110,19 +113,24 @@
     "prosemirror-transform": "1.10.2",
     "prosemirror-view": "1.37.1",
     "qrcode.vue": "3.6.0",
+    "radix-vue": "1.9.12",
     "seedrandom": "3.0.5",
+    "shadcn-nuxt": "0.11.3",
     "slugify": "1.6.6",
     "stylelint": "16.12.0",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.2",
     "sweetalert2": "11.15.5",
+    "tailwind-merge": "2.6.0",
     "tailwindcss": "3.4.17",
+    "tailwindcss-animate": "1.0.7",
     "unhead": "1.11.14",
     "unplugin-icons": "0.22.0",
     "unplugin-vue-components": "0.28.0",
     "unplugin-vue-router": "0.10.9",
     "v-calendar": "3.1.2",
+    "vaul-vue": "0.2.0",
     "vue": "3.5.13",
     "vue-advanced-cropper": "2.8.9",
     "vue-chartjs": "5.3.2",