Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Dialog from './Dialog.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
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();
|
||||
};
|
||||
const openEditDialog = () => {
|
||||
editDialog.value.open();
|
||||
};
|
||||
const openConfirmDialog = () => {
|
||||
confirmDialog.value.open();
|
||||
};
|
||||
const openConfirmDialogWithCustomFooter = () => {
|
||||
confirmDialogWithCustomFooter.value.open();
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const onConfirm = dialog => {};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Components/Dialog" :layout="{ type: 'grid', width: '100%' }">
|
||||
<Variant title="Alert Dialog">
|
||||
<Button label="Open Alert Dialog" @click="openAlertDialog" />
|
||||
<Dialog
|
||||
ref="alertDialog"
|
||||
type="alert"
|
||||
title="Alert"
|
||||
description="This is an alert message."
|
||||
/>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Edit Dialog">
|
||||
<Button label="Open Edit Dialog" @click="openEditDialog" />
|
||||
<Dialog
|
||||
ref="editDialog"
|
||||
type="edit"
|
||||
description="You can create a new portal here, by providing a name and a slug."
|
||||
title="Create Portal"
|
||||
confirm-button-label="Save"
|
||||
@confirm="onConfirm()"
|
||||
>
|
||||
<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>
|
||||
|
||||
<Variant title="Confirm Dialog">
|
||||
<Button label="Open Confirm Dialog" @click="openConfirmDialog" />
|
||||
<Dialog
|
||||
ref="confirmDialog"
|
||||
type="confirm"
|
||||
title="Confirm Action"
|
||||
description="Are you sure you want to perform this action?"
|
||||
confirm-button-label="Yes, I'm sure"
|
||||
cancel-button-label="No, cancel"
|
||||
@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>
|
||||
@@ -0,0 +1,177 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { OnClickOutside } from '@vueuse/components';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'edit',
|
||||
validator: value => ['alert', 'edit'].includes(value),
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
cancelButtonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
confirmButtonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
disableConfirmButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showCancelButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showConfirmButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
overflowYAuto: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: 'lg',
|
||||
validator: value => ['3xl', '2xl', 'xl', 'lg', 'md', 'sm'].includes(value),
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'center',
|
||||
validator: value => ['center', 'top'].includes(value),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['confirm', 'close']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const dialogRef = ref(null);
|
||||
const dialogContentRef = ref(null);
|
||||
const isOpen = ref(false);
|
||||
|
||||
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 positionClass = computed(() =>
|
||||
props.position === 'top' ? 'dialog-position-top' : ''
|
||||
);
|
||||
|
||||
const open = () => {
|
||||
isOpen.value = true;
|
||||
dialogRef.value?.showModal();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
dialogRef.value?.close();
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
const confirm = () => {
|
||||
emit('confirm');
|
||||
};
|
||||
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TeleportWithDirection to="body">
|
||||
<dialog
|
||||
ref="dialogRef"
|
||||
class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
|
||||
:class="[
|
||||
maxWidthClass,
|
||||
positionClass,
|
||||
overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
|
||||
]"
|
||||
@close="close"
|
||||
>
|
||||
<OnClickOutside @trigger="close">
|
||||
<form
|
||||
ref="dialogContentRef"
|
||||
class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-start align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
|
||||
@submit.prevent="confirm"
|
||||
@click.stop
|
||||
>
|
||||
<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>
|
||||
<slot name="description">
|
||||
<p v-if="description" class="mb-0 text-sm text-n-slate-11">
|
||||
{{ description }}
|
||||
</p>
|
||||
</slot>
|
||||
</div>
|
||||
<slot v-if="isOpen" />
|
||||
<!-- Dialog content will be injected here -->
|
||||
<slot name="footer">
|
||||
<div
|
||||
v-if="showCancelButton || showConfirmButton"
|
||||
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"
|
||||
type="button"
|
||||
@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"
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</slot>
|
||||
</form>
|
||||
</OnClickOutside>
|
||||
</dialog>
|
||||
</TeleportWithDirection>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
dialog::backdrop {
|
||||
@apply bg-n-alpha-black1 backdrop-blur-[4px];
|
||||
}
|
||||
|
||||
.dialog-position-top {
|
||||
margin-top: clamp(2rem, 5vh, 5rem);
|
||||
margin-bottom: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user