Merge pull request #34 from SethSharp/sharpie/dev-536-implement-new-u…

…i-alpha-20-1 Sharpie/dev 536 implement new UI alpha 20 1
SethSharp · Sep 4, 2024 · 3c87f37 · 3c87f37
2 parents 48ddfb2 + 1dac294
commit 3c87f37
Show file tree

Hide file tree

Showing 29 changed files with 625 additions and 355 deletions.
diff --git a/app/Http/Controllers/Dashboard/Blogs/IndexBlogsController.php b/app/Http/Controllers/Dashboard/Blogs/IndexBlogsController.php
@@ -27,8 +27,7 @@ public function __invoke(): Response
                 AllowedFilter::custom('q', new BlogSearchFilter()),
             ])
             ->when($currentStatus->value === BlogStatus::PUBLISHED->value, fn ($query) => $query->orderByDesc('published_at'))
-            ->paginate(9)
-            ->withQueryString();
+            ->paginate(10);
 
         return Inertia::render('Dashboard/Blogs/Index', [
             'blogs' => $blogs,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
         "@alpinejs/intersect": "^3.13.7",
         "@headlessui/vue": "^1.7.16",
         "@heroicons/vue": "^2.0.18",
-        "@sethsharp/ui": "1.0.0-alpha.1.5.35",
+        "@sethsharp/ui": "1.0.0-alpha.2.1.6",
         "@tiptap/extension-bubble-menu": "^2.2.1",
         "@tiptap/extension-code-block-lowlight": "^2.2.4",
         "@tiptap/extension-document": "^2.2.1",
@@ -43,7 +43,7 @@
         "@tiptap/pm": "^2.2.1",
         "@tiptap/starter-kit": "^2.2.1",
         "@tiptap/vue-3": "^2.2.1",
-        "@vueuse/core": "^10.7.2",
+        "@vueuse/core": "^10.11.1",
         "clean-install": "^1.0.0",
         "dotenv": "^16.4.5",
         "highlight.js": "^11.9.0",

diff --git a/resources/js/Components/Blogs/CreateEditForm.vue b/resources/js/Components/Blogs/CreateEditForm.vue
@@ -1,16 +1,15 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useForm } from '@inertiajs/vue3'
 import {
     PrimaryButton,
-    TextInput,
+    Text,
     Checkbox,
     TextArea,
     FormElement,
-    InputError,
-    MultiSelect,
+    Error,
+    Combobox,
     FormGrid,
-    Select,
     Form,
     ImageUpload,
 } from '@sethsharp/ui'
@@ -46,14 +45,25 @@ const tagOptions = props.tags.map((tag) => {
     }
 })
 
+const blogTags = computed(() =>
+    props.blog?.tags
+        ? props.blog.tags.map((tag) => {
+              return {
+                  id: tag.id,
+                  name: tag.name,
+              }
+          })
+        : []
+)
+
 const content = ref('')
 
 const form = useForm({
     cover_image: null,
     title: props.blog?.title ? props.blog.title : '',
     slug: props.blog?.slug ? props.blog.slug : '',
     collection_id: props.blog?.collection_id ? props.blog.collection_id : null,
-    tags: props.blog?.tags ? props.blog.tags : [],
+    tags: blogTags.value,
     meta_title: props.blog?.meta_title ? props.blog.meta_title : '',
     meta_description: props.blog?.meta_description ? props.blog.meta_description : '',
     meta_tags: props.blog?.meta_tags ? props.blog.meta_tags : '',
@@ -100,7 +110,7 @@ window.addEventListener('beforeunload', confirmLeave)
                     />
                 </template>
             </ImageUpload>
-            <InputError :message="form.errors.cover_image" />
+            <Error :message="form.errors.cover_image" />
         </FormElement>
 
         <FormElement>
@@ -113,18 +123,20 @@ window.addEventListener('beforeunload', confirmLeave)
         </FormElement>
 
         <FormGrid>
-            <TextInput id="title" v-model="form.title" :error="form.errors.title" label="Title" />
+            <Text id="title" v-model="form.title" :error="form.errors.title" label="Title" />
 
-            <Select
+            <Combobox
                 v-model="form.collection_id"
                 :options="collectionOptions"
                 label="Collection"
+                allow-search
+                width-class="w-full md:w-96"
                 :error="form.errors.collection_id"
             />
         </FormGrid>
 
         <FormGrid>
-            <TextInput
+            <Text
                 id="slug"
                 v-model="form.slug"
                 label="Slug (must be lowercase separated by '-')"
@@ -136,16 +148,19 @@ window.addEventListener('beforeunload', confirmLeave)
                 "
             />
 
-            <MultiSelect
+            <Combobox
                 v-model="form.tags"
                 :options="tagOptions"
                 label="Tags"
+                width-class="w-full md:w-96"
+                multiple
+                allow-search
                 :error="form.errors.tags"
             />
         </FormGrid>
 
         <FormElement>
-            <TextInput
+            <Text
                 id="meta-title"
                 v-model="form.meta_title"
                 label="Meta Title"
@@ -165,7 +180,7 @@ window.addEventListener('beforeunload', confirmLeave)
         </FormElement>
 
         <FormElement>
-            <TextInput
+            <Text
                 id="meta-tags"
                 v-model="form.meta_tags"
                 label="Meta Tags"
@@ -176,7 +191,7 @@ window.addEventListener('beforeunload', confirmLeave)
 
         <FormElement>
             <Editor v-model="form.content" :blog="blog" />
-            <InputError :message="form.errors.content" />
+            <Error :message="form.errors.content" />
         </FormElement>
 
         <PrimaryButton as="button" @click.prevent="submit">

diff --git a/resources/js/Components/Cards/Blog.vue b/resources/js/Components/Cards/Blog.vue
diff --git a/resources/js/Components/Collection/CreateEditCollectionForm.vue b/resources/js/Components/Collection/CreateEditCollectionForm.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useForm, router } from '@inertiajs/vue3'
 import { ArrowLongUpIcon, ArrowLongDownIcon } from '@heroicons/vue/16/solid/index.js'
-import { Form, TextArea, TextInput, FormElement, DangerButton, PrimaryButton } from '@sethsharp/ui'
+import { Form, TextArea, Text, FormElement, DangerButton, PrimaryButton } from '@sethsharp/ui'
 
 const props = defineProps({
     collection: {
@@ -45,7 +45,7 @@ const shiftBlog = (from, to) => {
 <template>
     <Form>
         <FormElement>
-            <TextInput
+            <Text
                 autofocus
                 v-model="form.title"
                 label="Title"
@@ -80,12 +80,12 @@ const shiftBlog = (from, to) => {
                     <div class="flex ml-auto my-auto">
                         <ArrowLongDownIcon
                             v-if="key !== collection.blogs.length - 1"
-                            class="size-5 hover:text-gray-500 transition"
+                            class="size-5 hover:text-slate-500 transition"
                             @click="shiftBlog(key, key + 1)"
                         />
                         <ArrowLongUpIcon
                             v-if="key !== 0"
-                            class="size-5 hover:text-gray-500 transition"
+                            class="size-5 hover:text-slate-500 transition"
                             @click="shiftBlog(key, key - 1)"
                         />
                     </div>

diff --git a/resources/js/Components/Editor/Components/Modals/EditGrid.vue b/resources/js/Components/Editor/Components/Modals/EditGrid.vue
diff --git a/resources/js/Components/Editor/Components/Modals/EditImage.vue b/resources/js/Components/Editor/Components/Modals/EditImage.vue
@@ -2,7 +2,8 @@
 import axios from 'axios'
 import { ref, watch } from 'vue'
 import { useVModels } from '@vueuse/core'
-import { Modal, TextInput, FormElement, ImageUpload, PrimaryButton } from '@sethsharp/ui'
+import { Modal, Text, FormElement, ImageUpload, PrimaryButton } from '@sethsharp/ui'
+import { PencilSquareIcon } from '@heroicons/vue/16/solid/index.js'
 
 const props = defineProps({
     open: Boolean,
@@ -62,8 +63,10 @@ watch(file, (_) => {
 </script>
 
 <template>
-    <Modal :open="open" @close="emits('close')" size="2xl">
-        <template #header> Manage Image</template>
+    <Modal :header-data="{ title: 'Manage Image' }" size="2xl">
+        <template #trigger>
+            <PencilSquareIcon class="size-4" />
+        </template>
         <template #content>
             <div class="mb-4">
                 <FormElement>
@@ -76,11 +79,11 @@ watch(file, (_) => {
                 </FormElement>
 
                 <FormElement>
-                    <TextInput id="alt" type="text" v-model="computedAlt" label="Alt" />
+                    <Text id="alt" type="text" v-model="computedAlt" label="Alt" />
                 </FormElement>
 
                 <FormElement>
-                    <TextInput id="height" v-model="computedHeight" type="number" label="Height" />
+                    <Text id="height" v-model="computedHeight" type="number" label="Height" />
                 </FormElement>
             </div>