feat: Vite + vue 3 💚 (#10047)
Fixes https://github.com/chatwoot/chatwoot/issues/8436 Fixes https://github.com/chatwoot/chatwoot/issues/9767 Fixes https://github.com/chatwoot/chatwoot/issues/10156 Fixes https://github.com/chatwoot/chatwoot/issues/6031 Fixes https://github.com/chatwoot/chatwoot/issues/5696 Fixes https://github.com/chatwoot/chatwoot/issues/9250 Fixes https://github.com/chatwoot/chatwoot/issues/9762 --------- Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Shivam Mishra
@@ -1,65 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import Dropdown from './MultiselectDropdown';
|
||||
|
||||
export default {
|
||||
title: 'Components/Dropdown/Multiselect Dropdown',
|
||||
component: Dropdown,
|
||||
argTypes: {
|
||||
options: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
selectedItem: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
multiselectorTitle: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
multiselectorPlaceholder: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
noSearchResult: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
inputPlaceholder: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { Dropdown },
|
||||
template: '<dropdown v-bind="$props" @click="onClick"></dropdown>',
|
||||
});
|
||||
|
||||
export const MultiselectDropdown = Template.bind({});
|
||||
MultiselectDropdown.args = {
|
||||
onClick: action('Opened'),
|
||||
options: [
|
||||
{
|
||||
id: 1,
|
||||
availability_status: 'online',
|
||||
name: 'James Philip',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
},
|
||||
],
|
||||
|
||||
selectedItem: {
|
||||
id: 1,
|
||||
availability_status: 'online',
|
||||
name: 'James Philip',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
},
|
||||
};
|
||||
@@ -1,142 +1,130 @@
|
||||
<script>
|
||||
<script setup>
|
||||
import { computed, defineEmits } from 'vue';
|
||||
import { OnClickOutside } from '@vueuse/components';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
|
||||
export default {
|
||||
components: {
|
||||
Thumbnail,
|
||||
MultiselectDropdownItems,
|
||||
},
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
hasThumbnail: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
multiselectorTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
multiselectorPlaceholder: {
|
||||
type: String,
|
||||
default: 'None',
|
||||
},
|
||||
noSearchResult: {
|
||||
type: String,
|
||||
default: 'No results found',
|
||||
},
|
||||
inputPlaceholder: {
|
||||
type: String,
|
||||
default: 'Search',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSearchDropdown: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasValue() {
|
||||
if (this.selectedItem && this.selectedItem.id) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.showSearchDropdown = !this.showSearchDropdown;
|
||||
},
|
||||
|
||||
onCloseDropdown() {
|
||||
this.showSearchDropdown = false;
|
||||
},
|
||||
|
||||
onClickSelectItem(value) {
|
||||
this.$emit('click', value);
|
||||
this.onCloseDropdown();
|
||||
},
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
hasThumbnail: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
multiselectorTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
multiselectorPlaceholder: {
|
||||
type: String,
|
||||
default: 'None',
|
||||
},
|
||||
noSearchResult: {
|
||||
type: String,
|
||||
default: 'No results found',
|
||||
},
|
||||
inputPlaceholder: {
|
||||
type: String,
|
||||
default: 'Search',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select']);
|
||||
const [showSearchDropdown, toggleDropdown] = useToggle(false);
|
||||
|
||||
const onCloseDropdown = () => toggleDropdown(false);
|
||||
const onClickSelectItem = value => {
|
||||
emit('select', value);
|
||||
onCloseDropdown();
|
||||
};
|
||||
|
||||
const hasValue = computed(() => {
|
||||
if (props.selectedItem && props.selectedItem.id) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-clickaway="onCloseDropdown"
|
||||
class="relative w-full mb-2"
|
||||
@keyup.esc="onCloseDropdown"
|
||||
>
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
color-scheme="secondary"
|
||||
class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
|
||||
@click="toggleDropdown"
|
||||
>
|
||||
<div class="flex gap-1">
|
||||
<Thumbnail
|
||||
v-if="hasValue && hasThumbnail"
|
||||
:src="selectedItem.thumbnail"
|
||||
size="24px"
|
||||
:status="selectedItem.availability_status"
|
||||
:username="selectedItem.name"
|
||||
/>
|
||||
<div class="flex justify-between w-full min-w-0 items-center">
|
||||
<h4
|
||||
v-if="!hasValue"
|
||||
class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
>
|
||||
{{ multiselectorPlaceholder }}
|
||||
</h4>
|
||||
<h4
|
||||
v-else
|
||||
class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
:title="selectedItem.name"
|
||||
>
|
||||
{{ selectedItem.name }}
|
||||
</h4>
|
||||
<i
|
||||
v-if="showSearchDropdown"
|
||||
class="icon ion-chevron-up text-slate-600 mr-1"
|
||||
<OnClickOutside @trigger="onCloseDropdown">
|
||||
<div class="relative w-full mb-2" @keyup.esc="onCloseDropdown">
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
color-scheme="secondary"
|
||||
class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
|
||||
@click="
|
||||
() => toggleDropdown() // ensure that the event is not passed to the button
|
||||
"
|
||||
>
|
||||
<div class="flex gap-1">
|
||||
<Thumbnail
|
||||
v-if="hasValue && hasThumbnail"
|
||||
:src="selectedItem.thumbnail"
|
||||
size="24px"
|
||||
:status="selectedItem.availability_status"
|
||||
:username="selectedItem.name"
|
||||
/>
|
||||
<i v-else class="icon ion-chevron-down text-slate-600 mr-1" />
|
||||
<div class="flex justify-between w-full min-w-0 items-center">
|
||||
<h4
|
||||
v-if="!hasValue"
|
||||
class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
>
|
||||
{{ multiselectorPlaceholder }}
|
||||
</h4>
|
||||
<h4
|
||||
v-else
|
||||
class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
:title="selectedItem.name"
|
||||
>
|
||||
{{ selectedItem.name }}
|
||||
</h4>
|
||||
<i
|
||||
v-if="showSearchDropdown"
|
||||
class="icon i-lucide-chevron-up text-slate-600 mr-1"
|
||||
/>
|
||||
<i v-else class="icon i-lucide-chevron-down text-slate-600 mr-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
<div
|
||||
:class="{ 'dropdown-pane--open': showSearchDropdown }"
|
||||
class="dropdown-pane"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h4
|
||||
class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ multiselectorTitle }}
|
||||
</h4>
|
||||
<woot-button
|
||||
icon="dismiss"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
variant="clear"
|
||||
@click="onCloseDropdown"
|
||||
</woot-button>
|
||||
<div
|
||||
:class="{ 'dropdown-pane--open': showSearchDropdown }"
|
||||
class="dropdown-pane"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h4
|
||||
class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ multiselectorTitle }}
|
||||
</h4>
|
||||
<woot-button
|
||||
icon="dismiss"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
variant="clear"
|
||||
@click="onCloseDropdown"
|
||||
/>
|
||||
</div>
|
||||
<MultiselectDropdownItems
|
||||
v-if="showSearchDropdown"
|
||||
:options="options"
|
||||
:selected-items="[selectedItem]"
|
||||
:has-thumbnail="hasThumbnail"
|
||||
:input-placeholder="inputPlaceholder"
|
||||
:no-search-result="noSearchResult"
|
||||
@select="onClickSelectItem"
|
||||
/>
|
||||
</div>
|
||||
<MultiselectDropdownItems
|
||||
v-if="showSearchDropdown"
|
||||
:options="options"
|
||||
:selected-items="[selectedItem]"
|
||||
:has-thumbnail="hasThumbnail"
|
||||
:input-placeholder="inputPlaceholder"
|
||||
:no-search-result="noSearchResult"
|
||||
@click="onClickSelectItem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</OnClickOutside>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import DropdownItems from './MultiselectDropdownItems';
|
||||
|
||||
export default {
|
||||
title: 'Components/Dropdown/Multiselect Dropdown Items',
|
||||
component: DropdownItems,
|
||||
argTypes: {
|
||||
options: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
selectedItems: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
inputPlaceholder: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
noSearchResult: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { DropdownItems },
|
||||
template:
|
||||
'<dropdown-items v-bind="$props" @click="onClick"></dropdown-items>',
|
||||
});
|
||||
|
||||
export const MultiselectDropdownItems = Template.bind({});
|
||||
MultiselectDropdownItems.args = {
|
||||
onClick: action('Added'),
|
||||
options: [
|
||||
{
|
||||
id: '0',
|
||||
name: 'None',
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: 'James Philip',
|
||||
availability_status: 'online',
|
||||
role: 'administrator',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Support Team',
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Agent',
|
||||
thumbnail: '',
|
||||
},
|
||||
],
|
||||
|
||||
selectedItems: [{ id: '1' }],
|
||||
};
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
onclick(option) {
|
||||
this.$emit('click', option);
|
||||
this.$emit('select', option);
|
||||
},
|
||||
focusInput() {
|
||||
this.$refs.searchbar.focus();
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import AddLabel from './AddLabel';
|
||||
|
||||
export default {
|
||||
title: 'Components/Label/Add Button',
|
||||
component: AddLabel,
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { AddLabel },
|
||||
template: '<add-label v-bind="$props" @add="onClick"></add-label>',
|
||||
});
|
||||
|
||||
export const AddButton = Template.bind({});
|
||||
AddButton.args = {
|
||||
onClick: action('opened'),
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import LabelDropdown from './LabelDropdown';
|
||||
|
||||
export default {
|
||||
title: 'Components/Label/Dropdown',
|
||||
component: LabelDropdown,
|
||||
argTypes: {
|
||||
conversationId: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
accountLabels: {
|
||||
defaultValue: [
|
||||
{
|
||||
color: '#555',
|
||||
description: '',
|
||||
id: 1,
|
||||
title: 'sales',
|
||||
},
|
||||
{
|
||||
color: '#c242f5',
|
||||
description: '',
|
||||
id: 1,
|
||||
title: 'business',
|
||||
},
|
||||
{
|
||||
color: '#4287f5',
|
||||
description: '',
|
||||
id: 1,
|
||||
title: 'testing',
|
||||
},
|
||||
],
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
selectedLabels: {
|
||||
defaultValue: 'sales, testing',
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { LabelDropdown },
|
||||
template:
|
||||
'<label-dropdown v-bind="$props" @add="onAdd" @remove="onRemove"></label-dropdown>',
|
||||
});
|
||||
|
||||
export const Dropdown = Template.bind({});
|
||||
Dropdown.args = {
|
||||
onAdd: action('added'),
|
||||
onRemove: action('removed'),
|
||||
};
|
||||
@@ -142,7 +142,7 @@ export default {
|
||||
:title="label.title"
|
||||
:color="label.color"
|
||||
:selected="selectedLabels.includes(label.title)"
|
||||
@click="onAddRemove(label)"
|
||||
@select-label="onAddRemove(label)"
|
||||
/>
|
||||
</woot-dropdown-menu>
|
||||
<div
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import LabelDropdownItem from './LabelDropdownItem';
|
||||
|
||||
export default {
|
||||
title: 'Components/Label/Item',
|
||||
component: LabelDropdownItem,
|
||||
argTypes: {
|
||||
title: {
|
||||
defaultValue: 'sales',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
color: {
|
||||
defaultValue: '#555',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
selected: {
|
||||
defaultValue: true,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { LabelDropdownItem },
|
||||
template:
|
||||
'<label-dropdown-item v-bind="$props" @click="onClick"></label-dropdown-item>',
|
||||
});
|
||||
|
||||
export const Item = Template.bind({});
|
||||
Item.args = {
|
||||
onClick: action('Selected'),
|
||||
};
|
||||
@@ -17,7 +17,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click', this.title);
|
||||
this.$emit('selectLabel', this.title);
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -37,7 +37,7 @@ export default {
|
||||
<span class="label-text" :title="title">{{ title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<i v-if="selected" class="icon ion-checkmark-round" />
|
||||
<i v-if="selected" class="i-lucide-circle-check" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
|
||||
Reference in New Issue
Block a user