https://www.hudsonvieweast.com/assets/v2/vue-components/dialog/index.js?v=2026-09-25_17-04

1const dialog = {
2    name: 'dialog-component',
3    delimiters: ['[[', ']]'],
4    emits: ['update:modelValue'],
5    inheritAttrs: false,
6    props: {
7        modelValue: {
8            default: null,
9        },
10        title: {
11            default: 'Dialog',
12        },
13        dialogType: {
14            default: 'default',
15        },
16        hideFooter: {
17            default: false,
18        },
19        submitBtnText: {
20            default: 'Save',
21        },
22        onsubmit: {
23            default: () => true,
24        },
25        closable: {
26          default: true
27        }
28    },
29    methods: {
30        closeDialog() {
31            //if closable is false then do not close dialog when click outside or click on close button
32            if(!this.closable) return;
33            this.$emit('update:modelValue', false);
34        },
35        handleDialogClick(event) {
36              document.body.click();
37      }
38    },
39    template: `
40    <transition name="dialog-fade">
41        <dialog v-show="modelValue" class="hl-dialog-overlay zindex-modal-backdrop" @click="closeDialog">
42          <div class="hl-dialog bg-white px-5 pt-2 pb-4 rounded-lg opacity-100 zindex-modal" @click.stop v-bind="$attrs" @click="handleDialogClick">
43              <slot name="header">
44                <div class="flex justify-between items-center">
45                  <span class="block font-medium text-lg">[[title]]</span>
46                  <span @click="closeDialog" class="material-symbols-outlined text-secondary-dark-grey text-lg cursor-pointer"> close </span>
47                </div>
48              </slot>
49            <div class="hl-dialog-main mt-8">
50              <slot></slot>
51            </div>
52            <div class="hl-dialog-footer mt-8 flex justify-end" v-if="!hideFooter">
53              <slot name="footer">
54                <button :class="{ 'btn-dark': dialogType == 'default', 'btn-red' : dialogType == 'danger'}" @click="onsubmit">[[submitBtnText]]</button>
55              </slot>
56            </div>
57          </div>
58        </dialog>
59      </transition>
60    `,
61};
62
63window.dialog_component = dialog;
64export default dialog;