Initial commit
This commit is contained in:
@@ -0,0 +1,58 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppAutocomplete',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
|
||||
// const { class: _class, label, variant: _, ...restAttrs } = useAttrs()
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id
|
||||
const _id = useId()
|
||||
|
||||
return _elementIdToken ? `app-autocomplete-${ _elementIdToken }` : _id
|
||||
})
|
||||
|
||||
const label = computed(() => useAttrs().label)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="app-autocomplete flex-grow-1"
|
||||
:class="$attrs.class"
|
||||
>
|
||||
<VLabel
|
||||
v-if="label"
|
||||
:for="elementId"
|
||||
class="mb-1 text-body-2"
|
||||
:text="label"
|
||||
/>
|
||||
<VAutocomplete
|
||||
v-bind="{
|
||||
...$attrs,
|
||||
class: null,
|
||||
label: undefined,
|
||||
id: elementId,
|
||||
variant: 'outlined',
|
||||
menuProps: {
|
||||
contentClass: [
|
||||
'app-inner-list',
|
||||
'app-autocomplete__content',
|
||||
'v-autocomplete__content',
|
||||
],
|
||||
},
|
||||
}"
|
||||
>
|
||||
<template
|
||||
v-for="(_, name) in $slots"
|
||||
#[name]="slotProps"
|
||||
>
|
||||
<slot
|
||||
:name="name"
|
||||
v-bind="slotProps || {}"
|
||||
/>
|
||||
</template>
|
||||
</VAutocomplete>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppCombobox',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id
|
||||
const _id = useId()
|
||||
|
||||
return _elementIdToken ? `app-combobox-${ _elementIdToken }` : _id
|
||||
})
|
||||
|
||||
const label = computed(() => useAttrs().label)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="app-combobox flex-grow-1"
|
||||
:class="$attrs.class"
|
||||
>
|
||||
<VLabel
|
||||
v-if="label"
|
||||
:for="elementId"
|
||||
class="mb-1 text-body-2"
|
||||
:text="label"
|
||||
/>
|
||||
|
||||
<VCombobox
|
||||
v-bind="{
|
||||
...$attrs,
|
||||
class: null,
|
||||
label: undefined,
|
||||
variant: 'outlined',
|
||||
id: elementId,
|
||||
menuProps: {
|
||||
contentClass: [
|
||||
'app-inner-list',
|
||||
'app-combobox__content',
|
||||
'v-combobox__content',
|
||||
$attrs.multiple !== undefined ? 'v-list-select-multiple' : '',
|
||||
],
|
||||
},
|
||||
}"
|
||||
>
|
||||
<template
|
||||
v-for="(_, name) in $slots"
|
||||
#[name]="slotProps"
|
||||
>
|
||||
<slot
|
||||
:name="name"
|
||||
v-bind="slotProps || {}"
|
||||
/>
|
||||
</template>
|
||||
</VCombobox>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,536 @@
|
||||
<script setup>
|
||||
import FlatPickr from 'vue-flatpickr-component'
|
||||
import { useTheme } from 'vuetify'
|
||||
import {
|
||||
VField,
|
||||
filterFieldProps,
|
||||
makeVFieldProps,
|
||||
} from 'vuetify/lib/components/VField/VField'
|
||||
import {
|
||||
VInput,
|
||||
makeVInputProps,
|
||||
} from 'vuetify/lib/components/VInput/VInput'
|
||||
|
||||
|
||||
import { filterInputAttrs } from 'vuetify/lib/util/helpers'
|
||||
import { useConfigStore } from '@core/stores/config'
|
||||
|
||||
const props = defineProps({
|
||||
autofocus: Boolean,
|
||||
counter: [
|
||||
Boolean,
|
||||
Number,
|
||||
String,
|
||||
],
|
||||
counterValue: Function,
|
||||
prefix: String,
|
||||
placeholder: String,
|
||||
persistentPlaceholder: Boolean,
|
||||
persistentCounter: Boolean,
|
||||
suffix: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
modelModifiers: Object,
|
||||
...makeVInputProps({
|
||||
density: 'comfortable',
|
||||
hideDetails: 'auto',
|
||||
}),
|
||||
...makeVFieldProps({
|
||||
variant: 'outlined',
|
||||
color: 'primary',
|
||||
}),
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'click:control',
|
||||
'mousedown:control',
|
||||
'update:focused',
|
||||
'update:modelValue',
|
||||
'click:clear',
|
||||
])
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const configStore = useConfigStore()
|
||||
const attrs = useAttrs()
|
||||
const [rootAttrs, compAttrs] = filterInputAttrs(attrs)
|
||||
const inputProps = ref(VInput.filterProps(props))
|
||||
const fieldProps = ref(filterFieldProps(props))
|
||||
const refFlatPicker = ref()
|
||||
const { focused } = useFocus(refFlatPicker)
|
||||
const isCalendarOpen = ref(false)
|
||||
const isInlinePicker = ref(false)
|
||||
|
||||
// flat picker prop manipulation
|
||||
if (compAttrs.config && compAttrs.config.inline) {
|
||||
isInlinePicker.value = compAttrs.config.inline
|
||||
Object.assign(compAttrs, { altInputClass: 'inlinePicker' })
|
||||
}
|
||||
compAttrs.config = {
|
||||
...compAttrs.config,
|
||||
prevArrow: '<i class="tabler-chevron-left v-icon" style="font-size: 20px; height: 20px; width: 20px;"></i>',
|
||||
nextArrow: '<i class="tabler-chevron-right v-icon" style="font-size: 20px; height: 20px; width: 20px;"></i>',
|
||||
}
|
||||
|
||||
const onClear = el => {
|
||||
el.stopPropagation()
|
||||
nextTick(() => {
|
||||
emit('update:modelValue', '')
|
||||
emit('click:clear', el)
|
||||
})
|
||||
}
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const vuetifyThemesName = Object.keys(vuetifyTheme.themes.value)
|
||||
|
||||
// Themes class added to flat-picker component for light and dark support
|
||||
const updateThemeClassInCalendar = () => {
|
||||
|
||||
// ℹ️ Flatpickr don't render it's instance in mobile and device simulator
|
||||
if (!refFlatPicker.value.fp.calendarContainer)
|
||||
return
|
||||
vuetifyThemesName.forEach(t => {
|
||||
refFlatPicker.value.fp.calendarContainer.classList.remove(`v-theme--${ t }`)
|
||||
})
|
||||
refFlatPicker.value.fp.calendarContainer.classList.add(`v-theme--${ vuetifyTheme.global.name.value }`)
|
||||
}
|
||||
|
||||
watch(() => configStore.theme, updateThemeClassInCalendar)
|
||||
onMounted(() => {
|
||||
updateThemeClassInCalendar()
|
||||
})
|
||||
|
||||
const emitModelValue = val => {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
|
||||
watch(() => props, () => {
|
||||
fieldProps.value = filterFieldProps(props)
|
||||
inputProps.value = VInput.filterProps(props)
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
})
|
||||
|
||||
const elementId = computed(() => {
|
||||
const _elementIdToken = fieldProps.value.id || fieldProps.value.label || inputProps.value.id
|
||||
const _id = useId()
|
||||
|
||||
return _elementIdToken ? `app-picker-field-${ _elementIdToken }` : _id
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-picker-field">
|
||||
<!-- v-input -->
|
||||
<VLabel
|
||||
v-if="fieldProps.label"
|
||||
class="mb-1 text-body-2"
|
||||
:for="elementId"
|
||||
:text="fieldProps.label"
|
||||
/>
|
||||
|
||||
<VInput
|
||||
v-bind="{ ...inputProps, ...rootAttrs }"
|
||||
:model-value="modelValue"
|
||||
:hide-details="props.hideDetails"
|
||||
:class="[{
|
||||
'v-text-field--prefixed': props.prefix,
|
||||
'v-text-field--suffixed': props.suffix,
|
||||
'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant),
|
||||
}, props.class]"
|
||||
class="position-relative v-text-field"
|
||||
:style="props.style"
|
||||
>
|
||||
<template #default="{ id, isDirty, isValid, isDisabled, isReadonly, validate }">
|
||||
<!-- v-field -->
|
||||
<VField
|
||||
v-bind="{ ...fieldProps, label: undefined }"
|
||||
:id="id.value"
|
||||
role="textbox"
|
||||
:active="focused || isDirty.value || isCalendarOpen"
|
||||
:focused="focused || isCalendarOpen"
|
||||
:dirty="isDirty.value || props.dirty"
|
||||
:error="isValid.value === false"
|
||||
:disabled="isDisabled.value"
|
||||
@click:clear="onClear"
|
||||
>
|
||||
<template #default="{ props: vFieldProps }">
|
||||
<div v-bind="vFieldProps">
|
||||
<!-- flat-picker -->
|
||||
<FlatPickr
|
||||
v-if="!isInlinePicker"
|
||||
v-bind="compAttrs"
|
||||
ref="refFlatPicker"
|
||||
:model-value="modelValue"
|
||||
:placeholder="props.placeholder"
|
||||
:readonly="isReadonly.value"
|
||||
class="flat-picker-custom-style h-100 w-100"
|
||||
:disabled="isReadonly.value"
|
||||
@on-open="isCalendarOpen = true"
|
||||
@on-close="isCalendarOpen = false; validate()"
|
||||
@update:model-value="emitModelValue"
|
||||
/>
|
||||
|
||||
<!-- simple input for inline prop -->
|
||||
<input
|
||||
v-if="isInlinePicker"
|
||||
:value="modelValue"
|
||||
:placeholder="props.placeholder"
|
||||
:readonly="isReadonly.value"
|
||||
class="flat-picker-custom-style h-100 w-100"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</VField>
|
||||
</template>
|
||||
</VInput>
|
||||
|
||||
<!-- flat picker for inline props -->
|
||||
<FlatPickr
|
||||
v-if="isInlinePicker"
|
||||
v-bind="compAttrs"
|
||||
ref="refFlatPicker"
|
||||
:model-value="modelValue"
|
||||
@update:model-value="emitModelValue"
|
||||
@on-open="isCalendarOpen = true"
|
||||
@on-close="isCalendarOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/mixins" as templateMixins;
|
||||
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
@use "flatpickr/dist/flatpickr.css";
|
||||
@use "@core-scss/base/mixins";
|
||||
|
||||
.flat-picker-custom-style {
|
||||
position: absolute;
|
||||
color: inherit;
|
||||
inline-size: 100%;
|
||||
inset: 0;
|
||||
outline: none;
|
||||
padding-block: 0;
|
||||
padding-inline: var(--v-field-padding-start);
|
||||
}
|
||||
|
||||
$heading-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
$body-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
$disabled-color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
|
||||
|
||||
// hide the input when your picker is inline
|
||||
input[altinputclass="inlinePicker"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flatpickr-time input.flatpickr-hour {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.flatpickr-calendar {
|
||||
@include mixins.elevation(6);
|
||||
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
inline-size: 16.875rem;
|
||||
|
||||
.flatpickr-day:focus {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
|
||||
.flatpickr-rContainer {
|
||||
.flatpickr-weekdays {
|
||||
block-size: 1.25rem;
|
||||
padding-inline: 0.5625rem;
|
||||
}
|
||||
|
||||
.flatpickr-days {
|
||||
min-inline-size: 16.875rem;
|
||||
|
||||
.dayContainer {
|
||||
justify-content: center !important;
|
||||
inline-size: 16.875rem;
|
||||
min-inline-size: 16.875rem;
|
||||
padding-block: 0.75rem 0.5rem;
|
||||
|
||||
.flatpickr-day {
|
||||
block-size: 2.25rem;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 2.25rem;
|
||||
margin-block-start: 0 !important;
|
||||
max-inline-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-day {
|
||||
color: $body-color;
|
||||
|
||||
&.today {
|
||||
&:not(.selected) {
|
||||
border: none !important;
|
||||
background: rgba(var(--v-theme-primary), 0.24);
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: none !important;
|
||||
background: rgba(var(--v-theme-primary), 0.24);
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.selected:hover {
|
||||
border-color: rgb(var(--v-theme-primary));
|
||||
background: rgb(var(--v-theme-primary));
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
|
||||
@include templateMixins.custom-elevation(var(--v-theme-primary), "sm");
|
||||
}
|
||||
|
||||
&.inRange,
|
||||
&.inRange:hover {
|
||||
border: none;
|
||||
background: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
|
||||
box-shadow: none !important;
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
&.startRange {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-primary), "sm");
|
||||
}
|
||||
|
||||
&.endRange {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-primary), "sm");
|
||||
}
|
||||
|
||||
&.startRange,
|
||||
&.endRange,
|
||||
&.startRange:hover,
|
||||
&.endRange:hover {
|
||||
border-color: rgb(var(--v-theme-primary));
|
||||
background: rgb(var(--v-theme-primary));
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
}
|
||||
|
||||
&.selected.startRange + .endRange:not(:nth-child(7n + 1)),
|
||||
&.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
|
||||
&.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
|
||||
box-shadow: -10px 0 0 rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
&.flatpickr-disabled,
|
||||
&.prevMonthDay:not(.startRange,.inRange),
|
||||
&.nextMonthDay:not(.endRange,.inRange) {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
background: rgba(var(--v-theme-on-surface), 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-weekday {
|
||||
color: $heading-color;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 400;
|
||||
inline-size: 2.25rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.flatpickr-days {
|
||||
inline-size: 16.875rem;
|
||||
}
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flatpickr-months {
|
||||
.flatpickr-prev-month,
|
||||
.flatpickr-next-month {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
fill: $body-color;
|
||||
|
||||
&:hover {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
&:hover i,
|
||||
&:hover svg {
|
||||
fill: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-current-month span.cur-month {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
&.open {
|
||||
// Open calendar above overlay
|
||||
z-index: 2401;
|
||||
}
|
||||
|
||||
&.hasTime.open {
|
||||
.flatpickr-innerContainer + .flatpickr-time {
|
||||
block-size: auto;
|
||||
border-block-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
|
||||
.flatpickr-time {
|
||||
border-block-start: none;
|
||||
}
|
||||
|
||||
.flatpickr-hour,
|
||||
.flatpickr-minute,
|
||||
.flatpickr-am-pm {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-theme--dark .flatpickr-calendar {
|
||||
box-shadow: 0 3px 14px 0 rgb(15 20 34 / 38%);
|
||||
}
|
||||
|
||||
// Time picker hover & focus bg color
|
||||
.flatpickr-time input:hover,
|
||||
.flatpickr-time .flatpickr-am-pm:hover,
|
||||
.flatpickr-time input:focus,
|
||||
.flatpickr-time .flatpickr-am-pm:focus {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Time picker
|
||||
.flatpickr-time {
|
||||
.flatpickr-am-pm,
|
||||
.flatpickr-time-separator,
|
||||
input {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.numInputWrapper {
|
||||
span {
|
||||
&.arrowUp {
|
||||
&::after {
|
||||
border-block-end-color: rgb(var(--v-border-color));
|
||||
}
|
||||
}
|
||||
|
||||
&.arrowDown {
|
||||
&::after {
|
||||
border-block-start-color: rgb(var(--v-border-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Added bg color for flatpickr input only as it has default readonly attribute
|
||||
.flatpickr-input[readonly],
|
||||
.flatpickr-input ~ .form-control[readonly],
|
||||
.flatpickr-human-friendly[readonly] {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
// week sections
|
||||
.flatpickr-weekdays {
|
||||
margin-block: 0.375rem;
|
||||
}
|
||||
|
||||
// Month and year section
|
||||
.flatpickr-current-month {
|
||||
.flatpickr-monthDropdown-months {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.flatpickr-monthDropdown-months,
|
||||
.numInputWrapper {
|
||||
padding: 2px;
|
||||
border-radius: 4px;
|
||||
color: $heading-color;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.375rem;
|
||||
transition: all 0.15s ease-out;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flatpickr-monthDropdown-month {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
}
|
||||
|
||||
.numInput.cur-year {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-day.flatpickr-disabled,
|
||||
.flatpickr-day.flatpickr-disabled:hover {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.flatpickr-months {
|
||||
padding-block: 0.75rem;
|
||||
padding-inline: 1rem;
|
||||
|
||||
.flatpickr-prev-month,
|
||||
.flatpickr-next-month {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border-radius: 5rem;
|
||||
background: rgba(var(--v-theme-on-surface), var(--v-selected-opacity));
|
||||
block-size: 1.875rem;
|
||||
inline-size: 1.875rem;
|
||||
inset-block-start: 15px !important;
|
||||
|
||||
&.flatpickr-disabled {
|
||||
display: inline;
|
||||
opacity: var(--v-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-next-month {
|
||||
inset-inline-end: 1.05rem !important;
|
||||
}
|
||||
|
||||
.flatpickr-prev-month {
|
||||
/* stylelint-disable-next-line liberty/use-logical-spec */
|
||||
right: 3.65rem;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
.flatpickr-month {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
block-size: 2.125rem;
|
||||
|
||||
.flatpickr-current-month {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
block-size: 1.75rem;
|
||||
inset-inline-start: 0;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppSelect',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id
|
||||
const _id = useId()
|
||||
|
||||
return _elementIdToken ? `app-select-${ _elementIdToken }` : _id
|
||||
})
|
||||
|
||||
const label = computed(() => useAttrs().label)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="app-select flex-grow-1"
|
||||
:class="$attrs.class"
|
||||
>
|
||||
<VLabel
|
||||
v-if="label"
|
||||
:for="elementId"
|
||||
class="mb-1 text-body-2"
|
||||
style="line-height: 15px;"
|
||||
:text="label"
|
||||
/>
|
||||
<VSelect
|
||||
v-bind="{
|
||||
...$attrs,
|
||||
class: null,
|
||||
label: undefined,
|
||||
variant: 'outlined',
|
||||
id: elementId,
|
||||
menuProps: { contentClass: ['app-inner-list', 'app-select__content', 'v-select__content', $attrs.multiple !== undefined ? 'v-list-select-multiple' : ''] },
|
||||
}"
|
||||
>
|
||||
<template
|
||||
v-for="(_, name) in $slots"
|
||||
#[name]="slotProps"
|
||||
>
|
||||
<slot
|
||||
:name="name"
|
||||
v-bind="slotProps || {}"
|
||||
/>
|
||||
</template>
|
||||
</VSelect>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppTextField',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id
|
||||
const _id = useId()
|
||||
|
||||
return _elementIdToken ? `app-text-field-${ _elementIdToken }` : _id
|
||||
})
|
||||
|
||||
const label = computed(() => useAttrs().label)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="app-text-field flex-grow-1"
|
||||
:class="$attrs.class"
|
||||
>
|
||||
<VLabel
|
||||
v-if="label"
|
||||
:for="elementId"
|
||||
class="mb-1 text-body-2 text-wrap"
|
||||
style="line-height: 15px;"
|
||||
:text="label"
|
||||
/>
|
||||
<VTextField
|
||||
v-bind="{
|
||||
...$attrs,
|
||||
class: null,
|
||||
label: undefined,
|
||||
variant: 'outlined',
|
||||
id: elementId,
|
||||
}"
|
||||
>
|
||||
<template
|
||||
v-for="(_, name) in $slots"
|
||||
#[name]="slotProps"
|
||||
>
|
||||
<slot
|
||||
:name="name"
|
||||
v-bind="slotProps || {}"
|
||||
/>
|
||||
</template>
|
||||
</VTextField>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppTextarea',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
|
||||
// const { class: _class, label, variant: _, ...restAttrs } = useAttrs()
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id
|
||||
const _id = useId()
|
||||
|
||||
return _elementIdToken ? `app-textarea-${ _elementIdToken }` : _id
|
||||
})
|
||||
|
||||
const label = computed(() => useAttrs().label)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="app-textarea flex-grow-1"
|
||||
:class="$attrs.class"
|
||||
>
|
||||
<VLabel
|
||||
v-if="label"
|
||||
:for="elementId"
|
||||
class="mb-1 text-body-2"
|
||||
:text="label"
|
||||
/>
|
||||
<VTextarea
|
||||
v-bind="{
|
||||
...$attrs,
|
||||
class: null,
|
||||
label: undefined,
|
||||
variant: 'outlined',
|
||||
id: elementId,
|
||||
}"
|
||||
>
|
||||
<template
|
||||
v-for="(_, name) in $slots"
|
||||
#[name]="slotProps"
|
||||
>
|
||||
<slot
|
||||
:name="name"
|
||||
v-bind="slotProps || {}"
|
||||
/>
|
||||
</template>
|
||||
</VTextarea>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,83 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
selectedCheckbox: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
checkboxContent: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
gridColumn: {
|
||||
type: null,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:selectedCheckbox'])
|
||||
|
||||
const updateSelectedOption = value => {
|
||||
if (typeof value !== 'boolean' && value !== null)
|
||||
emit('update:selectedCheckbox', value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow
|
||||
v-if="props.checkboxContent && props.selectedCheckbox"
|
||||
class="custom-input-wrapper"
|
||||
>
|
||||
<VCol
|
||||
v-for="item in props.checkboxContent"
|
||||
:key="item.title"
|
||||
v-bind="gridColumn"
|
||||
>
|
||||
<VLabel
|
||||
class="custom-input custom-checkbox rounded cursor-pointer"
|
||||
:class="props.selectedCheckbox.includes(item.value) ? 'active' : ''"
|
||||
>
|
||||
<div>
|
||||
<VCheckbox
|
||||
:model-value="props.selectedCheckbox"
|
||||
:value="item.value"
|
||||
@update:model-value="updateSelectedOption"
|
||||
/>
|
||||
</div>
|
||||
<slot :item="item">
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex align-center mb-2">
|
||||
<h6 class="cr-title text-base">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<VSpacer />
|
||||
<span
|
||||
v-if="item.subtitle"
|
||||
class="text-disabled text-body-2"
|
||||
>{{ item.subtitle }}</span>
|
||||
</div>
|
||||
<p class="text-sm mb-0">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</slot>
|
||||
</VLabel>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-checkbox {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
|
||||
.v-checkbox {
|
||||
margin-block-start: -0.375rem;
|
||||
}
|
||||
|
||||
.cr-title {
|
||||
font-weight: 500;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
selectedCheckbox: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
checkboxContent: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
gridColumn: {
|
||||
type: null,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:selectedCheckbox'])
|
||||
|
||||
const updateSelectedOption = value => {
|
||||
if (typeof value !== 'boolean' && value !== null)
|
||||
emit('update:selectedCheckbox', value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow
|
||||
v-if="props.checkboxContent && props.selectedCheckbox"
|
||||
class="custom-input-wrapper"
|
||||
>
|
||||
<VCol
|
||||
v-for="item in props.checkboxContent"
|
||||
:key="item.title"
|
||||
v-bind="gridColumn"
|
||||
>
|
||||
<VLabel
|
||||
class="custom-input custom-checkbox-icon rounded cursor-pointer"
|
||||
:class="props.selectedCheckbox.includes(item.value) ? 'active' : ''"
|
||||
>
|
||||
<slot :item="item">
|
||||
<div class="d-flex flex-column align-center text-center gap-2">
|
||||
<VIcon
|
||||
v-bind="item.icon"
|
||||
class="text-high-emphasis"
|
||||
/>
|
||||
|
||||
<h6 class="cr-title text-base">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<p class="text-sm clamp-text mb-0">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</slot>
|
||||
<div>
|
||||
<VCheckbox
|
||||
:model-value="props.selectedCheckbox"
|
||||
:value="item.value"
|
||||
@update:model-value="updateSelectedOption"
|
||||
/>
|
||||
</div>
|
||||
</VLabel>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-checkbox-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
.v-checkbox {
|
||||
margin-block-end: -0.375rem;
|
||||
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cr-title {
|
||||
font-weight: 500;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-checkbox-icon {
|
||||
.v-checkbox {
|
||||
margin-block-end: -0.375rem;
|
||||
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
selectedCheckbox: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
checkboxContent: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
gridColumn: {
|
||||
type: null,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:selectedCheckbox'])
|
||||
|
||||
const updateSelectedOption = value => {
|
||||
if (typeof value !== 'boolean' && value !== null)
|
||||
emit('update:selectedCheckbox', value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow
|
||||
v-if="props.checkboxContent && props.selectedCheckbox"
|
||||
class="custom-input-wrapper"
|
||||
>
|
||||
<VCol
|
||||
v-for="item in props.checkboxContent"
|
||||
:key="item.value"
|
||||
v-bind="gridColumn"
|
||||
>
|
||||
<VLabel
|
||||
class="custom-input custom-checkbox rounded cursor-pointer w-100"
|
||||
:class="props.selectedCheckbox.includes(item.value) ? 'active' : ''"
|
||||
>
|
||||
<div>
|
||||
<VCheckbox
|
||||
:id="`custom-checkbox-with-img-${item.value}`"
|
||||
:model-value="props.selectedCheckbox"
|
||||
:value="item.value"
|
||||
@update:model-value="updateSelectedOption"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
:src="item.bgImage"
|
||||
alt="bg-img"
|
||||
class="custom-checkbox-image"
|
||||
>
|
||||
</VLabel>
|
||||
|
||||
<VLabel
|
||||
v-if="item.label || $slots.label"
|
||||
:for="`custom-checkbox-with-img-${item.value}`"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<slot
|
||||
name="label"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label }}
|
||||
</slot>
|
||||
</VLabel>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-checkbox {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
.custom-checkbox-image {
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
|
||||
.v-checkbox {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
.v-checkbox {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
selectedRadio: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
radioContent: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
gridColumn: {
|
||||
type: null,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:selectedRadio'])
|
||||
|
||||
const updateSelectedOption = value => {
|
||||
if (value !== null)
|
||||
emit('update:selectedRadio', value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-if="props.radioContent"
|
||||
:model-value="props.selectedRadio"
|
||||
class="custom-input-wrapper"
|
||||
@update:model-value="updateSelectedOption"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in props.radioContent"
|
||||
:key="item.title"
|
||||
v-bind="gridColumn"
|
||||
>
|
||||
<VLabel
|
||||
class="custom-input custom-radio rounded cursor-pointer"
|
||||
:class="props.selectedRadio === item.value ? 'active' : ''"
|
||||
>
|
||||
<div>
|
||||
<VRadio
|
||||
:name="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</div>
|
||||
<slot :item="item">
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex align-center mb-2">
|
||||
<h6 class="cr-title text-base">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<VSpacer />
|
||||
<span
|
||||
v-if="item.subtitle"
|
||||
class="text-disabled text-body-2"
|
||||
>{{ item.subtitle }}</span>
|
||||
</div>
|
||||
<p class="text-body-2 mb-0">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</slot>
|
||||
</VLabel>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-radio {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
|
||||
.v-radio {
|
||||
margin-block-start: -0.45rem;
|
||||
}
|
||||
|
||||
.cr-title {
|
||||
font-weight: 500;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
selectedRadio: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
radioContent: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
gridColumn: {
|
||||
type: null,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:selectedRadio'])
|
||||
|
||||
const updateSelectedOption = value => {
|
||||
if (value !== null)
|
||||
emit('update:selectedRadio', value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-if="props.radioContent"
|
||||
:model-value="props.selectedRadio"
|
||||
class="custom-input-wrapper"
|
||||
@update:model-value="updateSelectedOption"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in props.radioContent"
|
||||
:key="item.title"
|
||||
v-bind="gridColumn"
|
||||
>
|
||||
<VLabel
|
||||
class="custom-input custom-radio-icon rounded cursor-pointer"
|
||||
:class="props.selectedRadio === item.value ? 'active' : ''"
|
||||
>
|
||||
<slot :item="item">
|
||||
<div class="d-flex flex-column align-center text-center gap-2">
|
||||
<VIcon
|
||||
v-bind="item.icon"
|
||||
class="text-high-emphasis"
|
||||
/>
|
||||
<h6 class="text-h6">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
|
||||
<p class="text-body-2 mb-0">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<div>
|
||||
<VRadio :value="item.value" />
|
||||
</div>
|
||||
</VLabel>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-radio-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
.v-radio {
|
||||
margin-block-end: -0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-radio-icon {
|
||||
.v-radio {
|
||||
margin-block-end: -0.25rem;
|
||||
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
selectedRadio: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
radioContent: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
gridColumn: {
|
||||
type: null,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:selectedRadio'])
|
||||
|
||||
const updateSelectedOption = value => {
|
||||
if (value !== null)
|
||||
emit('update:selectedRadio', value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-if="props.radioContent"
|
||||
:model-value="props.selectedRadio"
|
||||
class="custom-input-wrapper"
|
||||
@update:model-value="updateSelectedOption"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in props.radioContent"
|
||||
:key="item.bgImage"
|
||||
v-bind="gridColumn"
|
||||
>
|
||||
<VLabel
|
||||
class="custom-input custom-radio rounded cursor-pointer w-100"
|
||||
:class="props.selectedRadio === item.value ? 'active' : ''"
|
||||
>
|
||||
<slot
|
||||
name="content"
|
||||
:item="item"
|
||||
>
|
||||
<template v-if="typeof item.bgImage === 'object'">
|
||||
<Component
|
||||
:is="item.bgImage"
|
||||
class="custom-radio-image"
|
||||
/>
|
||||
</template>
|
||||
<img
|
||||
v-else
|
||||
:src="item.bgImage"
|
||||
alt="bg-img"
|
||||
class="custom-radio-image"
|
||||
>
|
||||
</slot>
|
||||
|
||||
<VRadio
|
||||
:id="`custom-radio-with-img-${item.value}`"
|
||||
:name="`custom-radio-with-img-${item.value}`"
|
||||
:value="item.value"
|
||||
/>
|
||||
</VLabel>
|
||||
|
||||
<VLabel
|
||||
v-if="item.label || $slots.label"
|
||||
:for="`custom-radio-with-img-${item.value}`"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<slot
|
||||
name="label"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label }}
|
||||
</slot>
|
||||
</VLabel>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-radio {
|
||||
padding: 0 !important;
|
||||
|
||||
&.active {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.custom-radio-image {
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
|
||||
.v-radio {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user