feat: Updates on new components (#10444)

app/javascript/dashboard/components-next/dialog/Dialog.story.vue

@@ -7,6 +7,7 @@ import Input from 'dashboard/components-next/input/Input.vue';
 const alertDialog = ref(null);
 const editDialog = ref(null);
 const confirmDialog = ref(null);
+const confirmDialogWithCustomFooter = ref(null);
 
 const openAlertDialog = () => {
   alertDialog.value.open();
@@ -17,6 +18,9 @@ const openEditDialog = () => {
 const openConfirmDialog = () => {
   confirmDialog.value.open();
 };
+const openConfirmDialogWithCustomFooter = () => {
+  confirmDialogWithCustomFooter.value.open();
+};
 
 // eslint-disable-next-line no-unused-vars
 const onConfirm = dialog => {};
@@ -44,24 +48,22 @@ const onConfirm = dialog => {};
         confirm-button-label="Save"
         @confirm="onConfirm()"
       >
-        <template #form>
-          <div class="flex flex-col gap-6">
-            <Input
-              id="portal-name"
-              type="text"
-              placeholder="User Guide | Chatwoot"
-              label="Name"
-              message="This will be the name of your public facing portal"
-            />
-            <Input
-              id="portal-slug"
-              type="text"
-              placeholder="user-guide"
-              label="Slug"
-              message="app.chatwoot.com/hc/my-portal/en-US/categories/my-slug"
-            />
-          </div>
-        </template>
+        <div class="flex flex-col gap-6">
+          <Input
+            id="portal-name"
+            type="text"
+            placeholder="User Guide | Chatwoot"
+            label="Name"
+            message="This will be the name of your public facing portal"
+          />
+          <Input
+            id="portal-slug"
+            type="text"
+            placeholder="user-guide"
+            label="Slug"
+            message="app.chatwoot.com/hc/my-portal/en-US/categories/my-slug"
+          />
+        </div>
       </Dialog>
     </Variant>
 
@@ -77,5 +79,21 @@ const onConfirm = dialog => {};
         @confirm="onConfirm()"
       />
     </Variant>
+
+    <Variant title="With custom footer">
+      <Button
+        label="Open Confirm Dialog with custom footer"
+        @click="openConfirmDialogWithCustomFooter"
+      />
+      <Dialog
+        ref="confirmDialogWithCustomFooter"
+        title="Confirm Action"
+        description="Are you sure you want to perform this action?"
+      >
+        <template #footer>
+          <Button label="Custom Button" @click="onConfirm()" />
+        </template>
+      </Dialog>
+    </Variant>
   </Story>
 </template>

app/javascript/dashboard/components-next/dialog/Dialog.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 
-defineProps({
+const props = defineProps({
   type: {
     type: String,
     default: 'edit',
@@ -14,7 +14,7 @@ defineProps({
   },
   title: {
     type: String,
-    required: true,
+    default: '',
   },
   description: {
     type: String,
@@ -48,6 +48,11 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  width: {
+    type: String,
+    default: 'lg',
+    validator: value => ['3xl', '2xl', 'xl', 'lg', 'md', 'sm'].includes(value),
+  },
 });
 
 const emit = defineEmits(['confirm', 'close']);
@@ -59,6 +64,19 @@ const isRTL = useMapGetter('accounts/isRTL');
 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
 
+const maxWidthClass = computed(() => {
+  const classesMap = {
+    '3xl': 'max-w-3xl',
+    '2xl': 'max-w-2xl',
+    xl: 'max-w-xl',
+    lg: 'max-w-lg',
+    md: 'max-w-md',
+    sm: 'max-w-sm',
+  };
+
+  return classesMap[props.width] ?? 'max-w-md';
+});
+
 const open = () => {
   dialogRef.value?.showModal();
 };
@@ -77,8 +95,11 @@ defineExpose({ open, close });
   <Teleport to="body">
     <dialog
       ref="dialogRef"
-      class="w-full max-w-lg transition-all duration-300 ease-in-out shadow-xl rounded-xl"
-      :class="overflowYAuto ? 'overflow-y-auto' : 'overflow-visible'"
+      class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      :class="[
+        maxWidthClass,
+        overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
+      ]"
       :dir="isRTL ? 'rtl' : 'ltr'"
       @close="close"
     >
@@ -88,7 +109,7 @@ defineExpose({ open, close });
           class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
           @click.stop
         >
-          <div class="flex flex-col gap-2">
+          <div v-if="title || description" class="flex flex-col gap-2">
             <h3 class="text-base font-medium leading-6 text-n-slate-12">
               {{ title }}
             </h3>
@@ -98,28 +119,29 @@ defineExpose({ open, close });
               </p>
             </slot>
           </div>
-          <slot name="form">
-            <!-- Form content will be injected here -->
+          <slot />
+          <!-- Dialog content will be injected here -->
+          <slot name="footer">
+            <div class="flex items-center justify-between w-full gap-3">
+              <Button
+                v-if="showCancelButton"
+                variant="faded"
+                color="slate"
+                :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
+                class="w-full"
+                @click="close"
+              />
+              <Button
+                v-if="showConfirmButton"
+                :color="type === 'edit' ? 'blue' : 'ruby'"
+                :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
+                class="w-full"
+                :is-loading="isLoading"
+                :disabled="disableConfirmButton || isLoading"
+                @click="confirm"
+              />
+            </div>
           </slot>
-          <div class="flex items-center justify-between w-full gap-3">
-            <Button
-              v-if="showCancelButton"
-              variant="faded"
-              color="slate"
-              :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
-              class="w-full"
-              @click="close"
-            />
-            <Button
-              v-if="showConfirmButton"
-              :color="type === 'edit' ? 'blue' : 'ruby'"
-              :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
-              class="w-full"
-              :is-loading="isLoading"
-              :disabled="disableConfirmButton || isLoading"
-              @click="confirm"
-            />
-          </div>
         </div>
       </OnClickOutside>
     </dialog>