Steve/midnight madness

add

@@ -0,0 +1,45 @@
+#!/bin/bash
+
+# Script to install shadcn-vue components and move them to the correct location
+# Usage: ./add <component-name>
+
+# Check if component name is provided
+if [ -z "$1" ]; then
+  echo "Error: Component name is required"
+  echo "Usage: ./add <component-name>"
+  exit 1
+fi
+
+COMPONENT=$1
+
+echo "Installing component: $COMPONENT"
+
+# Run shadcn-vue installation command
+npx shadcn-vue@latest add $COMPONENT
+
+# Check if installation was successful
+if [ $? -ne 0 ]; then
+  echo "Error: Failed to install component $COMPONENT"
+  exit 1
+fi
+
+# Create target directory if it doesn't exist
+mkdir -p src/components/$COMPONENT
+
+# Move files from ui directory to components directory
+if [ -d "src/components/ui/$COMPONENT" ]; then
+  # this is a necessary workaround because shadcn-vue won't write
+  # to src/components due to a bug (refer to components.json)
+  echo "Moving files from src/components/ui to src/components"
+  # find and replace "components/ui" with "components" in UI directory
+  find src/components/ui -type f -exec sed -i '' 's|components/ui|components|g' {} +
+
+  rsync -a src/components/ui/ src/components/
+  rm -r src/components/ui
+
+  echo "Component $COMPONENT successfully installed and moved to the correct location"
+else
+  echo "Warning: Directory src/components/ui/$COMPONENT not found"
+  echo "Check if the component was installed correctly"
+  exit 1
+fi

app/pages/components/Pagination.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/pagination"
+
+const state = ref(false)
+</script>
+
+<template>
+  <Pagination v-slot="{ page }" :items-per-page="10" :total="30" :default-page="2">
+    <PaginationContent v-slot="{ items }">
+      <PaginationPrevious />
+
+      <template v-for="(item, index) in items" :key="index">
+        <PaginationItem
+          v-if="item.type === 'page'"
+          :value="item.value"
+          :is-active="item.value === page"
+        >
+          {{ item.value }}
+        </PaginationItem>
+      </template>
+
+      <PaginationEllipsis :index="4" />
+
+      <PaginationNext />
+    </PaginationContent>
+  </Pagination>
+</template>

app/pages/components/Separator.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Separator } from "@/components/separator"
+</script>
+
+<template>
+  <div class="w-64">
+    <div class="space-y-1">
+      <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
+
+      <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
+    </div>
+
+    <Separator class="my-4" label="Or" />
+
+    <div class="flex h-5 items-center space-x-4 text-sm">
+      <div>Blog</div>
+
+      <Separator orientation="vertical" />
+
+      <div>Docs</div>
+
+      <Separator orientation="vertical" />
+
+      <div>Source</div>
+    </div>
+  </div>
+</template>

app/pages/contribution-guide.md

@@ -5,7 +5,7 @@ Gooey is built primarily with [Shadcdn-vue](https://www.shadcn-vue.com/) compone
 
 Components can be installed into the project following the standard installation method, eg. `npx shadcn-vue@latest add sidebar`.
 
-Some components are customised wrappers around shadcn-vue to alter the API slightly.
+Note that due to an ongoing bug in shadcn-vue and the `components.json` `aliases.ui` value, components will not install directly to `./src/components`. After installing, you should copy the component up one level, eg. `
 
 When adding a component, ensure you do these things:
 

app/pages/index.ts

@@ -1,38 +1,47 @@
-// getting started
 export { default as Index } from "./Index.vue"
+
+// getting started
 export { default as ContributionGuide } from "./contribution-guide.md"
 export { default as Installation } from "./installation.md"
 export { default as Theme } from "./theme.md"
 
-// demos
-export { default as TwoColumnLayoutDemo } from "./demo/TwoColumnLayoutDemo.vue"
-
 // components
-export { default as AlertDialog } from "./components/AlertDialog.vue"
 export { default as Accord } from "./components/Accord.vue"
 export { default as Avatar } from "./components/Avatar.vue"
 export { default as Badge } from "./components/Badge.vue"
 export { default as Button } from "./components/Button.vue"
-export { default as Card } from "./components/Card.vue"
 export { default as Carousel } from "./components/Carousel.vue"
-export { default as Checkbox } from "./components/Checkbox.vue"
 export { default as Command } from "./components/Command.vue"
-export { default as Dialog } from "./components/Dialog.vue"
 export { default as DropdownMenu } from "./components/DropdownMenu.vue"
 export { default as Flasher } from "./components/Flasher.vue"
-export { default as Heading } from "./components/Heading.vue"
-export { default as Input } from "./components/Input.vue"
-export { default as Label } from "./components/Label.vue"
+export { default as Pagination } from "./components/Pagination.vue"
 export { default as Popover } from "./components/Popover.vue"
 export { default as Progress } from "./components/Progress.vue"
-export { default as Select } from "./components/Select.vue"
-export { default as Sheet } from "./components/Sheet.vue"
+export { default as Separator } from "./components/Separator.vue"
 export { default as Skeleton } from "./components/Skeleton.vue"
+export { default as Toast } from "./components/Toast.vue"
+export { default as Tip } from "./components/Tip.vue"
+
+// forms
+export { default as Checkbox } from "./components/Checkbox.vue"
+export { default as Input } from "./components/Input.vue"
+export { default as Label } from "./components/Label.vue"
+export { default as Select } from "./components/Select.vue"
 export { default as Slider } from "./components/Slider.vue"
 export { default as Switch } from "./components/Switch.vue"
+export { default as Textarea } from "./components/Textarea.vue"
+
+// page layout
+export { default as AlertDialog } from "./components/AlertDialog.vue"
+export { default as Card } from "./components/Card.vue"
+export { default as Dialog } from "./components/Dialog.vue"
+export { default as Heading } from "./components/Heading.vue"
+export { default as Sheet } from "./components/Sheet.vue"
 export { default as Table } from "./components/Table.vue"
 export { default as Tabs } from "./components/Tabs.vue"
-export { default as Textarea } from "./components/Textarea.vue"
-export { default as Toast } from "./components/Toast.vue"
-export { default as Tip } from "./components/Tip.vue"
+
+// layouts
 export { default as TwoColumnLayout } from "./components/TwoColumnLayout.vue"
+
+// demos
+export { default as TwoColumnLayoutDemo } from "./demo/TwoColumnLayoutDemo.vue"

app/router/index.ts

@@ -8,38 +8,46 @@ import {
   ContributionGuide,
   Theme,
 
-  // demos
-  TwoColumnLayoutDemo,
-
   // components
   Accord,
   Avatar,
-  AlertDialog,
   Badge,
   Button,
-  Card,
   Carousel,
-  Checkbox,
   Command,
-  Dialog,
   DropdownMenu,
   Flasher,
-  Heading,
-  Input,
-  Label,
+  Pagination,
   Popover,
   Progress,
-  Select,
-  Sheet,
+  Separator,
   Skeleton,
+  Toast,
+  Tip,
+
+  // forms
+  Checkbox,
+  Input,
+  Label,
+  Select,
   Slider,
   Switch,
+  Textarea,
+
+  // page layout
+  AlertDialog,
+  Card,
+  Dialog,
+  Heading,
+  Sheet,
   Table,
   Tabs,
-  Textarea,
-  Toast,
-  Tip,
+
+  // layouts
   TwoColumnLayout,
+
+  // demos
+  TwoColumnLayoutDemo,
 } from "@app/pages"
 import ArticleLayout from "@app/layouts/ArticleLayout.vue"
 import ComponentLayout from "@app/layouts/ComponentLayout.vue"
@@ -121,6 +129,12 @@ const routes = [
         component: Flasher,
         meta: { layout: ComponentLayout },
       },
+      {
+        name: "Pagination",
+        path: "/components/pagination",
+        component: Pagination,
+        meta: { layout: ComponentLayout, shadcn: true },
+      },
       {
         name: "Popover",
         path: "/components/popover",
@@ -133,6 +147,12 @@ const routes = [
         component: Progress,
         meta: { layout: ComponentLayout, shadcn: true },
       },
+      {
+        name: "Separator",
+        path: "/components/separator",
+        component: Separator,
+        meta: { layout: ComponentLayout, shadcn: true },
+      },
       {
         name: "Skeleton",
         path: "/components/skeleton",

components.json

@@ -13,7 +13,7 @@
     "components": "@/components",
     "composables": "@/composables",
     "utils": "@/lib/utils",
-    "ui": "@/components",
+    "ui": "@/components/ui",
     "lib": "@/lib"
   },
   "iconLibrary": "lucide"