implement in editor components

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.16",
+    "@sethsharp/ui": "1.0.0-alpha.1.5.23",
     "@tiptap/extension-bubble-menu": "^2.2.1",
     "@tiptap/extension-code-block-lowlight": "^2.2.4",
     "@tiptap/extension-document": "^2.2.1",

resources/js/Components/Blogs/CreateEditForm.vue

@@ -91,7 +91,14 @@ window.addEventListener('beforeunload', confirmLeave)
                 :current-image="blog.cover"
                 label="Cover Image"
                 :default-image="getBlogCoverImage(null)"
-            />
+            >
+                <template #image :newImage="{ newImage }" :curImage="{ curImg }">
+                    <img
+                        :src="newImage ?? curImg"
+                        class="max-w-lg max-h-40 sm:max-h-64 object-cover object-center"
+                    />
+                </template>
+            </ImageUpload>
             <InputError :message="form.errors.cover_image" />
         </FormElement>
 

resources/js/Components/Editor/Components/Modals/EditGrid.vue

@@ -1,11 +1,6 @@
 <script setup>
 import { useVModels } from '@vueuse/core'
-import Modal from '@/Components/Modal.vue'
-import Form from '@/Components/Form/Form.vue'
-import Select from '@/Components/Inputs/Select.vue'
-import TextInput from '@/Components/Inputs/TextInput.vue'
-import FormElement from '@/Components/Form/FormElement.vue'
-import PrimaryButton from '@/Components/Buttons/PrimaryButton.vue'
+import { PrimaryButton, FormElement, TextInput, Select, Form, Modal } from '@sethsharp/ui'
 
 const props = defineProps({
     open: Boolean,

resources/js/Components/Editor/Components/Modals/EditImage.vue

@@ -2,11 +2,7 @@
 import axios from 'axios'
 import { ref, watch } from 'vue'
 import { useVModels } from '@vueuse/core'
-import Modal from '@/Components/Modal.vue'
-import TextInput from '@/Components/Inputs/TextInput.vue'
-import FormElement from '@/Components/Form/FormElement.vue'
-import ImageUpload from '@/Components/Inputs/ImageUpload.vue'
-import PrimaryButton from '@/Components/Buttons/PrimaryButton.vue'
+import { Modal, TextInput, FormElement, ImageUpload, PrimaryButton } from '@sethsharp/ui'
 
 const props = defineProps({
     open: Boolean,
@@ -67,25 +63,28 @@ watch(file, (_) => {
 
 <template>
     <Modal :open="open" @close="emits('close')" size="2xl">
-        <div class="mb-4">
-            <FormElement>
-                <ImageUpload
-                    v-model="file"
-                    :current-image="path"
-                    label="Image Upload"
-                    :error="errors['file']"
-                />
-            </FormElement>
+        <template #header> Manage Image</template>
+        <template #content>
+            <div class="mb-4">
+                <FormElement>
+                    <ImageUpload
+                        v-model="file"
+                        :current-image="path"
+                        label="Image Upload"
+                        :error="errors['file']"
+                    />
+                </FormElement>
 
-            <FormElement>
-                <TextInput id="alt" type="text" v-model="computedAlt" label="Alt" />
-            </FormElement>
+                <FormElement>
+                    <TextInput id="alt" type="text" v-model="computedAlt" label="Alt" />
+                </FormElement>
 
-            <FormElement>
-                <TextInput id="height" v-model="computedHeight" type="number" label="Height" />
-            </FormElement>
-        </div>
+                <FormElement>
+                    <TextInput id="height" v-model="computedHeight" type="number" label="Height" />
+                </FormElement>
+            </div>
 
-        <PrimaryButton as="button" @click.prevent="emits('close')"> Save</PrimaryButton>
+            <PrimaryButton as="button" @click.prevent="emits('close')"> Save</PrimaryButton>
+        </template>
     </Modal>
 </template>