Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const { t } = useI18n();
|
||||
|
||||
const options = computed(() => [
|
||||
{ label: t('CHOICE_TOGGLE.YES'), value: true },
|
||||
{ label: t('CHOICE_TOGGLE.NO'), value: false },
|
||||
]);
|
||||
|
||||
const handleSelect = value => {
|
||||
emit('update:modelValue', value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex gap-4 items-center px-4 py-2.5 w-full rounded-lg divide-x transition-colors bg-n-solid-1 outline outline-1 outline-n-weak hover:outline-n-slate-6 focus-within:outline-n-brand divide-n-weak"
|
||||
>
|
||||
<div
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
class="flex flex-1 gap-2 justify-center items-center"
|
||||
>
|
||||
<label class="inline-flex gap-2 items-center text-base cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
:value="option.value"
|
||||
:checked="modelValue === option.value"
|
||||
class="size-4 accent-n-blue-9 text-n-blue-9"
|
||||
@change="handleSelect(option.value)"
|
||||
/>
|
||||
<span class="text-sm text-n-slate-12">{{ option.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup>
|
||||
import { computed, watch } from 'vue';
|
||||
import Input from './Input.vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { DURATION_UNITS } from './constants';
|
||||
|
||||
const props = defineProps({
|
||||
min: { type: Number, default: 0 },
|
||||
max: { type: Number, default: Infinity },
|
||||
disabled: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const duration = defineModel('modelValue', { type: Number, default: null });
|
||||
const unit = defineModel('unit', {
|
||||
type: String,
|
||||
default: DURATION_UNITS.MINUTES,
|
||||
validate(value) {
|
||||
return Object.values(DURATION_UNITS).includes(value);
|
||||
},
|
||||
});
|
||||
|
||||
const convertToMinutes = newValue => {
|
||||
if (unit.value === DURATION_UNITS.MINUTES) {
|
||||
return Math.floor(newValue);
|
||||
}
|
||||
if (unit.value === DURATION_UNITS.HOURS) {
|
||||
return Math.floor(newValue) * 60;
|
||||
}
|
||||
return Math.floor(newValue) * 24 * 60;
|
||||
};
|
||||
|
||||
const transformedValue = computed({
|
||||
get() {
|
||||
if (unit.value === DURATION_UNITS.MINUTES) return duration.value;
|
||||
if (unit.value === DURATION_UNITS.HOURS)
|
||||
return Math.floor(duration.value / 60);
|
||||
if (unit.value === DURATION_UNITS.DAYS)
|
||||
return Math.floor(duration.value / 24 / 60);
|
||||
|
||||
return 0;
|
||||
},
|
||||
set(newValue) {
|
||||
let minuteValue = convertToMinutes(newValue);
|
||||
|
||||
duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
|
||||
},
|
||||
});
|
||||
|
||||
// when unit is changed set the nearest value to that unit
|
||||
// so if the minute is set to 900, and the user changes the unit to "days"
|
||||
// the transformed value will show 0, but the real value will still be 900
|
||||
// this might create some confusion, especially when saving
|
||||
// this watcher fixes it by rounding the duration basically, to the nearest unit value
|
||||
watch(unit, () => {
|
||||
let adjustedValue = convertToMinutes(transformedValue.value);
|
||||
duration.value = Math.min(Math.max(adjustedValue, props.min), props.max);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Input
|
||||
v-model="transformedValue"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
:disabled="disabled"
|
||||
:placeholder="t('DURATION_INPUT.PLACEHOLDER')"
|
||||
class="flex-grow w-full disabled:"
|
||||
/>
|
||||
<select
|
||||
v-model="unit"
|
||||
:disabled="disabled"
|
||||
class="mb-0 text-sm disabled:outline-n-weak disabled:opacity-40"
|
||||
>
|
||||
<option :value="DURATION_UNITS.MINUTES">
|
||||
{{ t('DURATION_INPUT.MINUTES') }}
|
||||
</option>
|
||||
<option :value="DURATION_UNITS.HOURS">
|
||||
{{ t('DURATION_INPUT.HOURS') }}
|
||||
</option>
|
||||
<option :value="DURATION_UNITS.DAYS">
|
||||
{{ t('DURATION_INPUT.DAYS') }}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup>
|
||||
import Input from './Input.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Components/Input" :layout="{ type: 'grid', width: '400' }">
|
||||
<Variant title="Default">
|
||||
<div class="p-4 bg-n-background">
|
||||
<Input placeholder="Default Input" />
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="With Label">
|
||||
<div class="p-4 bg-n-background">
|
||||
<Input label="Username" placeholder="Enter your username" />
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Disabled">
|
||||
<div class="p-4 bg-n-background">
|
||||
<Input label="Disabled Input" placeholder="Can't type here" disabled />
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="With Message">
|
||||
<div class="flex flex-col gap-4 p-4 bg-n-background">
|
||||
<Input
|
||||
label="Email"
|
||||
placeholder="Enter your email"
|
||||
message="We'll never share your email."
|
||||
/>
|
||||
<Input
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
message="Password is incorrect"
|
||||
message-type="error"
|
||||
/>
|
||||
<Input
|
||||
label="Verification Code"
|
||||
placeholder="Enter the code"
|
||||
message="Code verified successfully"
|
||||
message-type="success"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Different Types">
|
||||
<div class="flex flex-col gap-4 p-4 bg-n-background">
|
||||
<Input label="Text" type="text" placeholder="Text input" />
|
||||
<Input label="Number" type="number" placeholder="Number input" />
|
||||
<Input label="Password" type="password" placeholder="Password input" />
|
||||
<Input label="Email" type="email" placeholder="Email input" />
|
||||
<Input label="Date" type="date" />
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Custom Input Class">
|
||||
<div class="p-4 bg-n-background">
|
||||
<Input
|
||||
label="Custom Style"
|
||||
placeholder="Custom input class"
|
||||
custom-input-class="border-n-amber-5 dark:border-n-amber-5"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,154 @@
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, nextTick, getCurrentInstance } from 'vue';
|
||||
const props = defineProps({
|
||||
modelValue: { type: [String, Number], default: '' },
|
||||
type: { type: String, default: 'text' },
|
||||
customInputClass: { type: [String, Object, Array], default: '' },
|
||||
placeholder: { type: String, default: '' },
|
||||
label: { type: String, default: '' },
|
||||
id: { type: String, default: '' },
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
validator: value => ['sm', 'md'].includes(value),
|
||||
},
|
||||
message: { type: String, default: '' },
|
||||
disabled: { type: Boolean, default: false },
|
||||
messageType: {
|
||||
type: String,
|
||||
default: 'info',
|
||||
validator: value => ['info', 'error', 'success'].includes(value),
|
||||
},
|
||||
min: { type: String, default: '' },
|
||||
max: { type: String, default: '' },
|
||||
autofocus: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:modelValue',
|
||||
'blur',
|
||||
'input',
|
||||
'focus',
|
||||
'enter',
|
||||
]);
|
||||
|
||||
// Generate a unique ID per component instance when `id` prop is not provided.
|
||||
const { uid } = getCurrentInstance();
|
||||
const uniqueId = computed(() => props.id || `input-${uid}`);
|
||||
|
||||
const isFocused = ref(false);
|
||||
const inputRef = ref(null);
|
||||
|
||||
const messageClass = computed(() => {
|
||||
switch (props.messageType) {
|
||||
case 'error':
|
||||
return 'text-n-ruby-9 dark:text-n-ruby-9';
|
||||
case 'success':
|
||||
return 'text-n-teal-10 dark:text-n-teal-10';
|
||||
default:
|
||||
return 'text-n-slate-11 dark:text-n-slate-11';
|
||||
}
|
||||
});
|
||||
|
||||
const inputOutlineClass = computed(() => {
|
||||
switch (props.messageType) {
|
||||
case 'error':
|
||||
return 'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8';
|
||||
default:
|
||||
return 'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak focus:outline-n-brand dark:focus:outline-n-brand';
|
||||
}
|
||||
});
|
||||
|
||||
const handleInput = event => {
|
||||
let value = event.target.value;
|
||||
// Convert to number if type is number and value is not empty
|
||||
if (props.type === 'number' && value !== '') {
|
||||
value = Number(value);
|
||||
}
|
||||
emit('update:modelValue', value);
|
||||
emit('input', event);
|
||||
};
|
||||
|
||||
const handleFocus = event => {
|
||||
emit('focus', event);
|
||||
isFocused.value = true;
|
||||
};
|
||||
|
||||
const sizeClass = computed(() => {
|
||||
switch (props.size) {
|
||||
case 'sm':
|
||||
return 'h-8 !px-3 !py-2';
|
||||
case 'md':
|
||||
return 'h-10 !px-3 !py-2.5';
|
||||
default:
|
||||
return 'h-10 !px-3 !py-2.5';
|
||||
}
|
||||
});
|
||||
|
||||
const handleBlur = event => {
|
||||
emit('blur', event);
|
||||
isFocused.value = false;
|
||||
};
|
||||
|
||||
const handleEnter = event => {
|
||||
emit('enter', event);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.autofocus) {
|
||||
nextTick(() => {
|
||||
inputRef.value?.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative flex flex-col min-w-0 gap-1">
|
||||
<label
|
||||
v-if="label"
|
||||
:for="uniqueId"
|
||||
class="mb-0.5 text-heading-3 text-n-slate-12"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
<!-- Added prefix slot to allow adding icons to the input -->
|
||||
<slot name="prefix" />
|
||||
<input
|
||||
:id="uniqueId"
|
||||
v-bind="$attrs"
|
||||
ref="inputRef"
|
||||
:value="modelValue"
|
||||
:class="[
|
||||
customInputClass,
|
||||
inputOutlineClass,
|
||||
sizeClass,
|
||||
{
|
||||
error: messageType === 'error',
|
||||
focus: isFocused,
|
||||
},
|
||||
]"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
|
||||
:max="
|
||||
['date', 'datetime-local', 'time', 'number'].includes(type)
|
||||
? max
|
||||
: undefined
|
||||
"
|
||||
class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@keyup.enter="handleEnter"
|
||||
/>
|
||||
<p
|
||||
v-if="message"
|
||||
class="min-w-0 mt-1 mb-0 text-label-small truncate transition-all duration-500 ease-in-out"
|
||||
:class="messageClass"
|
||||
>
|
||||
{{ message }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
export const DURATION_UNITS = {
|
||||
MINUTES: 'minutes',
|
||||
HOURS: 'hours',
|
||||
DAYS: 'days',
|
||||
};
|
||||
Reference in New Issue
Block a user