Adding prestyled base tags and testing admin dashboard

components/base/Button.vue

@@ -1,13 +1,16 @@
 <template>
     <button class="text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex items-center justify-center bg-light-25 dark:bg-dark-25 leading-none outline-none
     border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40"
-    :class="{'p-1': icon, 'h-[35px] px-[15px]': !icon}" >
-        <slot />
+    :class="{'p-1': loading || icon, 'h-[35px] px-[15px]': !loading && !icon}" @click="!loading && emit('click')">
+        <Loading v-if="loading" />
+        <slot v-else />
     </button>
 </template>
 
 <script setup lang="ts">
-const { icon = false } = defineProps<{
+const { icon = false, loading = false } = defineProps<{
     icon?: boolean
+    loading?: boolean
 }>();
+const emit = defineEmits(['click']);
 </script>

components/base/Select.vue

@@ -1,6 +1,7 @@
 <template>
-    <Label>{{ label }}
-        <SelectRoot :v-model="model">
+    <Label class="py-4 flex flex-row justify-center items-center">
+        <span>{{ label }}</span>
+        <SelectRoot v-model="model">
             <SelectTrigger :disabled="disabled" class="mx-4 inline-flex min-w-[160px] items-center justify-between px-3 text-sm font-semibold leading-none h-8 gap-1
                 bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none data-[placeholder]:font-normal
                 data-[placeholder]:text-light-50 dark:data-[placeholder]:text-dark-50 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
@@ -15,7 +16,7 @@
                     <SelectScrollUpButton>
                         <Icon icon="radix-icons:chevron-up" />
                     </SelectScrollUpButton>
-                    <SelectViewport class="p-1">
+                    <SelectViewport>
                         <slot />
                     </SelectViewport>
                     <SelectScrollDownButton>
@@ -28,6 +29,7 @@
 </template>
 
 <script setup lang="ts">
+import { SelectContent, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, SelectViewport } from 'radix-vue'
 import { Icon } from '@iconify/vue/dist/iconify.js';
 const { placeholder, disabled = false, position = 'popper', label } = defineProps<{
 	placeholder?: string
@@ -35,5 +37,5 @@ const { placeholder, disabled = false, position = 'popper', label } = defineProp
     position?: 'item-aligned' | 'popper'
     label?: string
 }>();
-const model = defineModel();
+const model = defineModel<string>();
 </script>

components/base/SelectItem.vue

@@ -1,7 +1,7 @@
 <template>
-    <SelectItem :value="value" :disabled="disabled" class="">
+    <SelectItem :value="value" :disabled="disabled" class="text-base py-2 leading-none text-light-60 dark:text-dark-60 flex items-center px-6 relative select-none data-[disabled]:text-light-50 dark:data-[disabled]:text-dark-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-light-30 dark:data-[highlighted]:bg-dark-30 data-[highlighted]:text-light-100 dark:data-[highlighted]:text-dark-100">
         <SelectItemText class="">{{ label }}</SelectItemText>
-        <SelectItemIndicator class="">
+        <SelectItemIndicator class="absolute left-1 w-4 inline-flex items-center justify-center">
             <Icon icon="radix-icons:check" />
         </SelectItemIndicator>
     </SelectItem>
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
-import { SelectItem } from 'radix-vue';
+import { SelectItem, SelectItemIndicator, SelectItemText } from 'radix-vue'
 const { disabled = false, value } = defineProps<{
     disabled?: boolean
     value: NonNullable<any>

components/base/Toast.vue

@@ -1,5 +1,5 @@
 <template>
-    <ToastRoot :duration="duration" class="ToastRoot bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30" v-model:open="model">
+    <ToastRoot :default-open="open" :duration="duration" class="ToastRoot bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30" v-model:open="model">
         <div class="grid grid-cols-8 p-3">
           <ToastTitle v-if="title" class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ title }}</h4></ToastTitle>
           <ToastClose v-if="closeable" aria-label="Close" class="text-2xl -translate-y-1/2 translate-x-1/2 cursor-pointer"><span aria-hidden>×</span></ToastClose>
@@ -20,6 +20,7 @@ const { closeable = true, duration, title, content, timer = true } = defineProps
     title?: string
     content?: string
     timer?: boolean
+    open?: boolean
 }>();
 const timeout = ref<NodeJS.Timeout>();