initial commit
This commit is contained in:
@@ -0,0 +1,396 @@
|
||||
<script setup>
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
||||
import {
|
||||
VList,
|
||||
VListItem,
|
||||
VListSubheader,
|
||||
} from 'vuetify/components/VList'
|
||||
|
||||
const props = defineProps({
|
||||
isDialogVisible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
searchQuery: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
searchResults: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
suggestions: {
|
||||
type: Array,
|
||||
required: false,
|
||||
},
|
||||
noDataSuggestion: {
|
||||
type: Array,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:isDialogVisible',
|
||||
'update:searchQuery',
|
||||
'itemSelected',
|
||||
])
|
||||
|
||||
const { ctrl_k, meta_k } = useMagicKeys({
|
||||
passive: false,
|
||||
onEventFired(e) {
|
||||
if (e.ctrlKey && e.key === 'k' && e.type === 'keydown')
|
||||
e.preventDefault()
|
||||
},
|
||||
})
|
||||
|
||||
const refSearchList = ref()
|
||||
const searchQuery = ref(structuredClone(toRaw(props.searchQuery)))
|
||||
const refSearchInput = ref()
|
||||
const isLocalDialogVisible = ref(structuredClone(toRaw(props.isDialogVisible)))
|
||||
const searchResults = ref(structuredClone(toRaw(props.searchResults)))
|
||||
|
||||
// 👉 Watching props change
|
||||
watch(props, () => {
|
||||
isLocalDialogVisible.value = structuredClone(toRaw(props.isDialogVisible))
|
||||
searchResults.value = structuredClone(toRaw(props.searchResults))
|
||||
searchQuery.value = structuredClone(toRaw(props.searchQuery))
|
||||
})
|
||||
watch([
|
||||
ctrl_k,
|
||||
meta_k,
|
||||
], () => {
|
||||
isLocalDialogVisible.value = true
|
||||
emit('update:isDialogVisible', true)
|
||||
})
|
||||
|
||||
// 👉 clear search result and close the dialog
|
||||
const clearSearchAndCloseDialog = () => {
|
||||
emit('update:isDialogVisible', false)
|
||||
emit('update:searchQuery', '')
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
if (!searchQuery.value.length)
|
||||
searchResults.value = []
|
||||
})
|
||||
|
||||
const getFocusOnSearchList = e => {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
refSearchList.value?.focus('next')
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
refSearchList.value?.focus('prev')
|
||||
}
|
||||
}
|
||||
|
||||
const dialogModelValueUpdate = val => {
|
||||
emit('update:isDialogVisible', val)
|
||||
emit('update:searchQuery', '')
|
||||
}
|
||||
|
||||
const resolveCategories = val => {
|
||||
if (val === 'dashboards')
|
||||
return 'Dashboards'
|
||||
if (val === 'appsPages')
|
||||
return 'Apps & Pages'
|
||||
if (val === 'userInterface')
|
||||
return 'User Interface'
|
||||
if (val === 'formsTables')
|
||||
return 'Forms Tables'
|
||||
if (val === 'chartsMisc')
|
||||
return 'Charts Misc'
|
||||
|
||||
return 'Misc'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
max-width="600"
|
||||
:model-value="isLocalDialogVisible"
|
||||
:height="$vuetify.display.smAndUp ? '550' : '100%'"
|
||||
:fullscreen="$vuetify.display.width < 600"
|
||||
class="app-bar-search-dialog"
|
||||
@update:model-value="dialogModelValueUpdate"
|
||||
@keyup.esc="clearSearchAndCloseDialog"
|
||||
>
|
||||
<VCard
|
||||
height="100%"
|
||||
width="100%"
|
||||
class="position-relative"
|
||||
>
|
||||
<VCardText
|
||||
class="pt-1"
|
||||
style="min-block-size: 65px;"
|
||||
>
|
||||
<!-- 👉 Search Input -->
|
||||
<VTextField
|
||||
ref="refSearchInput"
|
||||
v-model="searchQuery"
|
||||
autofocus
|
||||
density="comfortable"
|
||||
variant="plain"
|
||||
class="app-bar-autocomplete-box"
|
||||
@keyup.esc="clearSearchAndCloseDialog"
|
||||
@keydown="getFocusOnSearchList"
|
||||
@update:model-value="$emit('update:searchQuery', searchQuery)"
|
||||
>
|
||||
<!-- 👉 Prepend Inner -->
|
||||
<template #prepend-inner>
|
||||
<div class="d-flex align-center text-high-emphasis me-1">
|
||||
<VIcon
|
||||
size="22"
|
||||
icon="tabler-search"
|
||||
class="mt-1"
|
||||
style="opacity: 1;"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 👉 Append Inner -->
|
||||
<template #append-inner>
|
||||
<div class="d-flex align-center">
|
||||
<div
|
||||
class="text-base text-disabled cursor-pointer me-1"
|
||||
@click="clearSearchAndCloseDialog"
|
||||
>
|
||||
[esc]
|
||||
</div>
|
||||
|
||||
<IconBtn
|
||||
size="small"
|
||||
@click="clearSearchAndCloseDialog"
|
||||
>
|
||||
<VIcon icon="tabler-x" />
|
||||
</IconBtn>
|
||||
</div>
|
||||
</template>
|
||||
</VTextField>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Divider -->
|
||||
<VDivider />
|
||||
|
||||
<!-- 👉 Perfect Scrollbar -->
|
||||
<PerfectScrollbar
|
||||
:options="{ wheelPropagation: false, suppressScrollX: true }"
|
||||
class="h-100"
|
||||
>
|
||||
<!-- 👉 Search List -->
|
||||
<VList
|
||||
v-show="searchQuery.length && !!searchResults.length"
|
||||
ref="refSearchList"
|
||||
density="compact"
|
||||
class="app-bar-search-list"
|
||||
>
|
||||
<!-- 👉 list Item /List Sub header -->
|
||||
<template
|
||||
v-for="item in searchResults"
|
||||
:key="item.title"
|
||||
>
|
||||
<VListSubheader
|
||||
v-if="'header' in item"
|
||||
class="text-disabled"
|
||||
>
|
||||
{{ resolveCategories(item.title) }}
|
||||
</VListSubheader>
|
||||
|
||||
<template v-else>
|
||||
<slot
|
||||
name="searchResult"
|
||||
:item="item"
|
||||
>
|
||||
<VListItem
|
||||
link
|
||||
@click="$emit('itemSelected', item)"
|
||||
>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
size="20"
|
||||
:icon="item.icon"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-corner-down-left"
|
||||
class="enter-icon text-disabled"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>
|
||||
{{ item.title }}
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</slot>
|
||||
</template>
|
||||
</template>
|
||||
</VList>
|
||||
|
||||
<!-- 👉 Suggestions -->
|
||||
<div
|
||||
v-show="!!searchResults && !searchQuery"
|
||||
class="h-100"
|
||||
>
|
||||
<slot name="suggestions">
|
||||
<VCardText class="app-bar-search-suggestions h-100 pa-10">
|
||||
<VRow
|
||||
v-if="props.suggestions"
|
||||
class="gap-y-4"
|
||||
>
|
||||
<VCol
|
||||
v-for="suggestion in props.suggestions"
|
||||
:key="suggestion.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
class="ps-6"
|
||||
>
|
||||
<p class="text-xs text-disabled text-uppercase">
|
||||
{{ suggestion.title }}
|
||||
</p>
|
||||
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="item in suggestion.content"
|
||||
:key="item.title"
|
||||
link
|
||||
:title="item.title"
|
||||
class="app-bar-search-suggestion"
|
||||
@click="$emit('itemSelected', item)"
|
||||
>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
size="20"
|
||||
class="me-2"
|
||||
/>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 👉 No Data found -->
|
||||
<div
|
||||
v-show="!searchResults.length && searchQuery.length"
|
||||
class="h-100"
|
||||
>
|
||||
<slot name="noData">
|
||||
<VCardText class="h-100">
|
||||
<div class="app-bar-search-suggestions d-flex flex-column align-center justify-center text-high-emphasis h-100">
|
||||
<VIcon
|
||||
size="75"
|
||||
icon="tabler-file-x"
|
||||
/>
|
||||
<div class="d-flex align-center flex-wrap justify-center gap-2 text-h6 my-3">
|
||||
<span>No Result For </span>
|
||||
<span>"{{ searchQuery }}"</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.noDataSuggestion"
|
||||
class="mt-8"
|
||||
>
|
||||
<span class="d-flex justify-center text-disabled">Try searching for</span>
|
||||
<h6
|
||||
v-for="suggestion in props.noDataSuggestion"
|
||||
:key="suggestion.title"
|
||||
class="app-bar-search-suggestion text-sm font-weight-regular cursor-pointer mt-3"
|
||||
@click="$emit('itemSelected', suggestion)"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
:icon="suggestion.icon"
|
||||
class="me-3"
|
||||
/>
|
||||
<span class="text-sm">{{ suggestion.title }}</span>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</slot>
|
||||
</div>
|
||||
</PerfectScrollbar>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.app-bar-search-suggestions {
|
||||
.app-bar-search-suggestion {
|
||||
&:hover {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-bar-autocomplete-box {
|
||||
.v-field__input {
|
||||
padding-block-end: 0.425rem;
|
||||
padding-block-start: 1.16rem;
|
||||
}
|
||||
|
||||
.v-field__append-inner,
|
||||
.v-field__prepend-inner {
|
||||
padding-block-start: 0.95rem;
|
||||
}
|
||||
|
||||
.v-field__field input {
|
||||
text-align: start !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-bar-search-dialog {
|
||||
.v-overlay__scrim {
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.v-list-item-title {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
.app-bar-search-list {
|
||||
.v-list-item,
|
||||
.v-list-subheader {
|
||||
font-size: 0.75rem;
|
||||
padding-inline: 1.5rem !important;
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
.v-list-item__append {
|
||||
.enter-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.v-list-item__append {
|
||||
.enter-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-subheader {
|
||||
line-height: 1;
|
||||
min-block-size: auto;
|
||||
padding-block: 0.6875rem 0.3125rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['cancel'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-5 py-3 d-flex align-center">
|
||||
<h3 class="font-weight-medium text-xl">
|
||||
{{ props.title }}
|
||||
</h3>
|
||||
<VSpacer />
|
||||
|
||||
<slot name="beforeClose" />
|
||||
|
||||
<IconBtn @click="$emit('cancel')">
|
||||
<VIcon
|
||||
size="18"
|
||||
icon="tabler-x"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,290 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
currentStep: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'horizontal',
|
||||
},
|
||||
iconSize: {
|
||||
type: [
|
||||
String,
|
||||
Number,
|
||||
],
|
||||
required: false,
|
||||
default: 52,
|
||||
},
|
||||
isActiveStepValid: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:currentStep'])
|
||||
|
||||
const currentStep = ref(props.currentStep || 0)
|
||||
const activeOrCompletedStepsClasses = computed(() => index => index < currentStep.value ? 'stepper-steps-completed' : index === currentStep.value ? 'stepper-steps-active' : '')
|
||||
const isHorizontalAndNotLastStep = computed(() => index => props.direction === 'horizontal' && props.items.length - 1 !== index)
|
||||
|
||||
// check if validation is enabled
|
||||
const isValidationEnabled = computed(() => {
|
||||
return props.isActiveStepValid !== undefined
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
if (props.currentStep !== undefined && props.currentStep < props.items.length && props.currentStep >= 0)
|
||||
currentStep.value = props.currentStep
|
||||
emit('update:currentStep', currentStep.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSlideGroup
|
||||
v-model="currentStep"
|
||||
class="app-stepper"
|
||||
show-arrows
|
||||
:direction="props.direction"
|
||||
>
|
||||
<VSlideGroupItem
|
||||
v-for="(item, index) in props.items"
|
||||
:key="item.title"
|
||||
:value="index"
|
||||
>
|
||||
<div
|
||||
class="cursor-pointer mx-1"
|
||||
:class="[
|
||||
(!props.isActiveStepValid && (isValidationEnabled)) && 'stepper-steps-invalid',
|
||||
activeOrCompletedStepsClasses(index),
|
||||
]"
|
||||
@click="!isValidationEnabled && emit('update:currentStep', index)"
|
||||
>
|
||||
<!-- SECTION stepper step with icon -->
|
||||
<template v-if="item.icon">
|
||||
<div class="stepper-icon-step text-high-emphasis d-flex align-center gap-2">
|
||||
<!-- 👉 icon and title -->
|
||||
<div
|
||||
class="d-flex align-center gap-4 step-wrapper"
|
||||
:class="[props.direction === 'horizontal' && 'flex-column']"
|
||||
>
|
||||
<div class="stepper-icon">
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
:size="item.size || props.iconSize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="stepper-title font-weight-medium mb-0">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<span
|
||||
v-if="item.subtitle"
|
||||
class="stepper-subtitle"
|
||||
>
|
||||
<span class="text-sm">{{ item.subtitle }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 👉 append chevron -->
|
||||
<VIcon
|
||||
v-if="isHorizontalAndNotLastStep(index)"
|
||||
class="flip-in-rtl stepper-chevron-indicator mx-6"
|
||||
size="24"
|
||||
icon="tabler-chevron-right"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION stepper step without icon -->
|
||||
<template v-else>
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<div
|
||||
class="d-flex align-center justify-center"
|
||||
style="block-size: 24px; inline-size: 24px;"
|
||||
>
|
||||
<!-- 👉 custom circle icon -->
|
||||
<template v-if="index >= currentStep">
|
||||
<div
|
||||
v-if="(!isValidationEnabled || props.isActiveStepValid || index !== currentStep)"
|
||||
class="stepper-step-indicator"
|
||||
/>
|
||||
|
||||
<VIcon
|
||||
v-else
|
||||
icon="tabler-alert-circle"
|
||||
size="24"
|
||||
color="error"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 👉 step completed icon -->
|
||||
|
||||
<VIcon
|
||||
v-else
|
||||
icon="custom-check-circle"
|
||||
class="stepper-step-icon"
|
||||
size="24"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Step Number -->
|
||||
<h4 class="text-h4 step-number">
|
||||
{{ (index + 1).toString().padStart(2, '0') }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- 👉 title and subtitle -->
|
||||
<div style="line-height: 0;">
|
||||
<h6 class="text-sm font-weight-medium step-title">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
|
||||
<span
|
||||
v-if="item.subtitle"
|
||||
class="text-xs step-subtitle"
|
||||
>
|
||||
{{ item.subtitle }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 👉 stepper step line -->
|
||||
<div
|
||||
v-if="isHorizontalAndNotLastStep(index)"
|
||||
class="stepper-step-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- !SECTION -->
|
||||
</div>
|
||||
</VSlideGroupItem>
|
||||
</VSlideGroup>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.app-stepper {
|
||||
// 👉 stepper step with bg color
|
||||
&.stepper-icon-step-bg {
|
||||
.stepper-icon-step {
|
||||
.step-wrapper {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.stepper-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.3125rem;
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-selected-opacity));
|
||||
block-size: 2.5rem;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
inline-size: 2.5rem;
|
||||
margin-inline-end: 0.3rem;
|
||||
}
|
||||
|
||||
.stepper-title,
|
||||
.stepper-subtitle {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.stepper-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.stepper-subtitle {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-steps-active {
|
||||
.stepper-icon-step {
|
||||
.stepper-icon {
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
color: rgba(var(--v-theme-on-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-steps-completed {
|
||||
.stepper-icon-step {
|
||||
.stepper-icon {
|
||||
background: rgba(var(--v-theme-primary), 0.08);
|
||||
color: rgba(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 stepper step with icon and default
|
||||
.v-slide-group__content {
|
||||
justify-content: center;
|
||||
row-gap: 1.5rem;
|
||||
|
||||
.stepper-step-indicator {
|
||||
border: 0.3125rem solid rgb(var(--v-theme-primary));
|
||||
border-radius: 50%;
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
block-size: 1.25rem;
|
||||
inline-size: 1.25rem;
|
||||
opacity: var(--v-activated-opacity);
|
||||
}
|
||||
|
||||
.stepper-step-line {
|
||||
border-radius: 0.1875rem;
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
block-size: 0.1875rem;
|
||||
inline-size: 3.75rem;
|
||||
opacity: var(--v-activated-opacity);
|
||||
}
|
||||
|
||||
.stepper-chevron-indicator {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
}
|
||||
|
||||
.stepper-steps-completed,
|
||||
.stepper-steps-active {
|
||||
.stepper-icon-step,
|
||||
.stepper-step-icon {
|
||||
color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
|
||||
.stepper-step-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-steps-completed {
|
||||
.stepper-step-line {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stepper-chevron-indicator {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-steps-invalid.stepper-steps-active {
|
||||
.stepper-icon-step,
|
||||
.step-number,
|
||||
.step-title,
|
||||
.step-subtitle {
|
||||
color: rgb(var(--v-theme-error)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
const vm = getCurrentInstance()
|
||||
const buyNowUrl = ref(vm?.appContext.config.globalProperties.buyNowUrl || 'https://1.envato.market/vuexy_admin')
|
||||
|
||||
watch(buyNowUrl, val => {
|
||||
if (vm)
|
||||
vm.appContext.config.globalProperties.buyNowUrl = val
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn
|
||||
id="buy-now-btn"
|
||||
color="error"
|
||||
class="product-buy-now"
|
||||
:href="buyNowUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Buy Now
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-buy-now {
|
||||
position: fixed;
|
||||
|
||||
// To keep buy now button on top of v-layout. E.g. Email app
|
||||
z-index: 999;
|
||||
inset-block-end: 5%;
|
||||
inset-inline-end: 79px;
|
||||
|
||||
.v-application &.v-btn.v-btn--elevated {
|
||||
box-shadow: 0 1px 20px 1px rgb(var(--v-theme-error)) !important;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'primary',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex flex-column align-center justify-center">
|
||||
<VAvatar
|
||||
v-if="props.icon"
|
||||
size="42"
|
||||
variant="tonal"
|
||||
:color="props.color"
|
||||
>
|
||||
<VIcon :icon="props.icon" />
|
||||
</VAvatar>
|
||||
|
||||
<h5 class="text-h5 my-2">
|
||||
{{ props.stats }}
|
||||
</h5>
|
||||
<span class="text-body-2">{{ props.title }}</span>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
divider: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDivider v-if="props.divider" />
|
||||
|
||||
<div class="customizer-section">
|
||||
<p class="text-caption">
|
||||
{{ props.title }}
|
||||
</p>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'tabler-x',
|
||||
},
|
||||
iconSize: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '22',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn
|
||||
variant="elevated"
|
||||
class="v-dialog-close-btn"
|
||||
>
|
||||
<VIcon
|
||||
:icon="props.icon"
|
||||
:size="props.iconSize"
|
||||
/>
|
||||
</IconBtn>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
languages: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
location: {
|
||||
type: null,
|
||||
required: false,
|
||||
default: 'bottom end',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
const { locale } = useI18n({ useScope: 'global' })
|
||||
|
||||
watch(locale, val => {
|
||||
document.documentElement.setAttribute('lang', val)
|
||||
})
|
||||
|
||||
const currentLang = ref(['en'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn>
|
||||
<VIcon
|
||||
size="26"
|
||||
icon="tabler-language"
|
||||
/>
|
||||
|
||||
<!-- Menu -->
|
||||
<VMenu
|
||||
activator="parent"
|
||||
:location="props.location"
|
||||
offset="14px"
|
||||
>
|
||||
<!-- List -->
|
||||
<VList
|
||||
v-model:selected="currentLang"
|
||||
min-width="175px"
|
||||
>
|
||||
<!-- List item -->
|
||||
<VListItem
|
||||
v-for="lang in props.languages"
|
||||
:key="lang.i18nLang"
|
||||
:value="lang.i18nLang"
|
||||
@click="locale = lang.i18nLang; $emit('change', lang.i18nLang)"
|
||||
>
|
||||
<!-- Language label -->
|
||||
<VListItemTitle>{{ lang.label }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
menuList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
},
|
||||
itemProps: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn
|
||||
density="compact"
|
||||
color="disabled"
|
||||
>
|
||||
<VIcon icon="tabler-dots-vertical" />
|
||||
|
||||
<VMenu
|
||||
v-if="props.menuList"
|
||||
activator="parent"
|
||||
>
|
||||
<VList
|
||||
:items="props.menuList"
|
||||
:item-props="props.itemProps"
|
||||
/>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</template>
|
||||
@@ -0,0 +1,220 @@
|
||||
<script setup>
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
||||
import { avatarText } from '@core/utils/formatters'
|
||||
|
||||
const props = defineProps({
|
||||
notifications: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
badgeProps: {
|
||||
type: null,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
location: {
|
||||
type: null,
|
||||
required: false,
|
||||
default: 'bottom end',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'read',
|
||||
'unread',
|
||||
'remove',
|
||||
'click:notification',
|
||||
])
|
||||
|
||||
const isAllMarkRead = computed(() => props.notifications.some(item => item.isSeen === false))
|
||||
|
||||
const markAllReadOrUnread = () => {
|
||||
const allNotificationsIds = props.notifications.map(item => item.id)
|
||||
if (!isAllMarkRead.value)
|
||||
emit('unread', allNotificationsIds)
|
||||
else
|
||||
emit('read', allNotificationsIds)
|
||||
}
|
||||
|
||||
const totalUnseenNotifications = computed(() => {
|
||||
return props.notifications.filter(item => item.isSeen === false).length
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn id="notification-btn">
|
||||
<VBadge
|
||||
v-bind="props.badgeProps"
|
||||
:model-value="props.notifications.some(n => !n.isSeen)"
|
||||
color="error"
|
||||
:content="totalUnseenNotifications"
|
||||
class="notification-badge"
|
||||
>
|
||||
<VIcon
|
||||
size="26"
|
||||
icon="tabler-bell"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VMenu
|
||||
activator="parent"
|
||||
width="380px"
|
||||
:location="props.location"
|
||||
offset="14px"
|
||||
:close-on-content-click="false"
|
||||
>
|
||||
<VCard class="d-flex flex-column">
|
||||
<!-- 👉 Header -->
|
||||
<VCardItem class="notification-section">
|
||||
<VCardTitle class="text-lg">
|
||||
Notifications
|
||||
</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<IconBtn
|
||||
v-show="props.notifications.length"
|
||||
@click="markAllReadOrUnread"
|
||||
>
|
||||
<VIcon :icon="!isAllMarkRead ? 'tabler-mail' : 'tabler-mail-opened' " />
|
||||
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="start"
|
||||
>
|
||||
{{ !isAllMarkRead ? 'Mark all as unread' : 'Mark all as read' }}
|
||||
</VTooltip>
|
||||
</IconBtn>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- 👉 Notifications list -->
|
||||
<PerfectScrollbar
|
||||
:options="{ wheelPropagation: false }"
|
||||
style="max-block-size: 23.75rem;"
|
||||
>
|
||||
<VList class="notification-list rounded-0 py-0">
|
||||
<template
|
||||
v-for="(notification, index) in props.notifications"
|
||||
:key="notification.title"
|
||||
>
|
||||
<VDivider v-if="index > 0" />
|
||||
<VListItem
|
||||
link
|
||||
lines="one"
|
||||
min-height="66px"
|
||||
class="list-item-hover-class"
|
||||
@click="$emit('click:notification', notification)"
|
||||
>
|
||||
<!-- Slot: Prepend -->
|
||||
<!-- Handles Avatar: Image, Icon, Text -->
|
||||
<template #prepend>
|
||||
<VListItemAction start>
|
||||
<VAvatar
|
||||
size="40"
|
||||
:color="notification.color && notification.icon ? notification.color : undefined"
|
||||
:image="notification.img || undefined"
|
||||
:icon="notification.icon || undefined"
|
||||
:variant="notification.img ? undefined : 'tonal' "
|
||||
>
|
||||
<span v-if="notification.text">{{ avatarText(notification.text) }}</span>
|
||||
</VAvatar>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>{{ notification.title }}</VListItemTitle>
|
||||
<VListItemSubtitle>{{ notification.subtitle }}</VListItemSubtitle>
|
||||
<span class="text-xs text-disabled">{{ notification.time }}</span>
|
||||
|
||||
<!-- Slot: Append -->
|
||||
<template #append>
|
||||
<div class="d-flex flex-column align-center gap-4">
|
||||
<VBadge
|
||||
dot
|
||||
:color="!notification.isSeen ? 'primary' : '#a8aaae'"
|
||||
:class="`${notification.isSeen ? 'visible-in-hover' : ''} ms-1`"
|
||||
@click.stop="$emit(notification.isSeen ? 'unread' : 'read', [notification.id])"
|
||||
/>
|
||||
|
||||
<div style="block-size: 28px; inline-size: 28px;">
|
||||
<IconBtn
|
||||
size="small"
|
||||
class="visible-in-hover"
|
||||
@click="$emit('remove', notification.id)"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-x"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
</template>
|
||||
|
||||
<VListItem
|
||||
v-show="!props.notifications.length"
|
||||
class="text-center text-medium-emphasis"
|
||||
style="block-size: 56px;"
|
||||
>
|
||||
<VListItemTitle>No Notification Found!</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</PerfectScrollbar>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- 👉 Footer -->
|
||||
<VCardActions
|
||||
v-show="props.notifications.length"
|
||||
class="notification-footer"
|
||||
>
|
||||
<VBtn block>
|
||||
View All Notifications
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.notification-section {
|
||||
padding: 14px !important;
|
||||
}
|
||||
|
||||
.notification-footer {
|
||||
padding: 6px !important;
|
||||
}
|
||||
|
||||
.list-item-hover-class {
|
||||
.visible-in-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.visible-in-hover {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-list.v-list {
|
||||
.v-list-item {
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Badge Style Override for Notification Badge
|
||||
.notification-badge {
|
||||
.v-badge__badge {
|
||||
/* stylelint-disable-next-line liberty/use-logical-spec */
|
||||
min-width: 18px;
|
||||
padding: 0;
|
||||
block-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
const { y } = useWindowScroll()
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VScaleTransition
|
||||
style="transform-origin: center;"
|
||||
class="scroll-to-top d-print-none"
|
||||
>
|
||||
<VBtn
|
||||
v-show="y > 200"
|
||||
icon
|
||||
density="comfortable"
|
||||
@click="scrollToTop"
|
||||
>
|
||||
<VIcon
|
||||
size="22"
|
||||
icon="tabler-arrow-up"
|
||||
/>
|
||||
</VBtn>
|
||||
</VScaleTransition>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.scroll-to-top {
|
||||
position: fixed !important;
|
||||
|
||||
// To keep button on top of v-layout. E.g. Email app
|
||||
z-index: 999;
|
||||
inset-block-end: 5%;
|
||||
inset-inline-end: 25px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup>
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
||||
|
||||
const props = defineProps({
|
||||
togglerIcon: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'tabler-layout-grid-add',
|
||||
},
|
||||
shortcuts: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn>
|
||||
<VIcon
|
||||
size="26"
|
||||
:icon="props.togglerIcon"
|
||||
/>
|
||||
|
||||
<VMenu
|
||||
activator="parent"
|
||||
offset="14px"
|
||||
location="bottom end"
|
||||
>
|
||||
<VCard
|
||||
width="340"
|
||||
max-height="560"
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<VCardItem class="py-4">
|
||||
<VCardTitle>Shortcuts</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<IconBtn>
|
||||
<VIcon icon="tabler-layout-grid-add" />
|
||||
</IconBtn>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<PerfectScrollbar :options="{ wheelPropagation: false }">
|
||||
<VRow class="ma-0 mt-n1">
|
||||
<VCol
|
||||
v-for="(shortcut, index) in props.shortcuts"
|
||||
:key="shortcut.title"
|
||||
cols="6"
|
||||
class="text-center border-t cursor-pointer pa-4 shortcut-icon"
|
||||
:class="(index + 1) % 2 ? 'border-e' : ''"
|
||||
@click="router.push(shortcut.to)"
|
||||
>
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
size="48"
|
||||
>
|
||||
<VIcon :icon="shortcut.icon" />
|
||||
</VAvatar>
|
||||
|
||||
<h6 class="text-base font-weight-medium mt-2 mb-0">
|
||||
{{ shortcut.title }}
|
||||
</h6>
|
||||
<span class="text-sm">{{ shortcut.subtitle }}</span>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</PerfectScrollbar>
|
||||
</VCard>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.shortcut-icon:hover {
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,367 @@
|
||||
<script setup>
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
||||
import { useTheme } from 'vuetify'
|
||||
import { staticPrimaryColor } from '@/plugins/vuetify/theme'
|
||||
import { useThemeConfig } from '@core/composable/useThemeConfig'
|
||||
import {
|
||||
RouteTransitions,
|
||||
Skins,
|
||||
} from '@core/enums'
|
||||
import {
|
||||
AppContentLayoutNav,
|
||||
ContentWidth,
|
||||
FooterType,
|
||||
NavbarType,
|
||||
} from '@layouts/enums'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const isNavDrawerOpen = ref(false)
|
||||
const { theme, skin, appRouteTransition, navbarType, footerType, isVerticalNavCollapsed, isVerticalNavSemiDark, appContentWidth, appContentLayoutNav, isAppRtl, isNavbarBlurEnabled, isLessThanOverlayNavBreakpoint } = useThemeConfig()
|
||||
|
||||
// 👉 Primary Color
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
// const vuetifyThemesName = Object.keys(vuetifyTheme.themes.value)
|
||||
const initialThemeColors = JSON.parse(JSON.stringify(vuetifyTheme.current.value.colors))
|
||||
|
||||
const colors = [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'info',
|
||||
'warning',
|
||||
'error',
|
||||
]
|
||||
|
||||
const setPrimaryColor = color => {
|
||||
const currentThemeName = vuetifyTheme.name.value
|
||||
|
||||
vuetifyTheme.themes.value[currentThemeName].colors.primary = color
|
||||
localStorage.setItem(`${ themeConfig.app.title }-${ currentThemeName }ThemePrimaryColor`, color)
|
||||
localStorage.setItem(`${ themeConfig.app.title }-initial-loader-color`, color)
|
||||
}
|
||||
|
||||
const getBoxColor = (color, index) => index ? color : staticPrimaryColor
|
||||
const { width: windowWidth } = useWindowSize()
|
||||
|
||||
const headerValues = computed(() => {
|
||||
const entries = Object.entries(NavbarType)
|
||||
if (appContentLayoutNav.value === AppContentLayoutNav.Horizontal)
|
||||
return entries.filter(([_, val]) => val !== NavbarType.Hidden)
|
||||
|
||||
return entries
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="!isLessThanOverlayNavBreakpoint(windowWidth)">
|
||||
<VBtn
|
||||
icon
|
||||
size="small"
|
||||
class="app-customizer-toggler rounded-s-lg rounded-0"
|
||||
style="z-index: 1001;"
|
||||
@click="isNavDrawerOpen = true"
|
||||
>
|
||||
<VIcon
|
||||
size="22"
|
||||
icon="tabler-settings"
|
||||
/>
|
||||
</VBtn>
|
||||
|
||||
<VNavigationDrawer
|
||||
v-model="isNavDrawerOpen"
|
||||
temporary
|
||||
border="0"
|
||||
location="end"
|
||||
width="400"
|
||||
:scrim="false"
|
||||
class="app-customizer"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="customizer-heading d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
THEME CUSTOMIZER
|
||||
</h6>
|
||||
<span class="text-body-1">Customize & Preview in Real Time</span>
|
||||
</div>
|
||||
<IconBtn @click="isNavDrawerOpen = false">
|
||||
<VIcon
|
||||
icon="tabler-x"
|
||||
size="20"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<PerfectScrollbar
|
||||
tag="ul"
|
||||
:options="{ wheelPropagation: false }"
|
||||
>
|
||||
<!-- SECTION Theming -->
|
||||
<CustomizerSection
|
||||
title="THEMING"
|
||||
:divider="false"
|
||||
>
|
||||
<!-- 👉 Skin -->
|
||||
<h6 class="text-base font-weight-regular">
|
||||
Skins
|
||||
</h6>
|
||||
<VRadioGroup
|
||||
v-model="skin"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
v-for="[key, val] in Object.entries(Skins)"
|
||||
:key="key"
|
||||
:label="key"
|
||||
:value="val"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<!-- 👉 Theme -->
|
||||
<h6 class="mt-3 text-base font-weight-regular">
|
||||
Theme
|
||||
</h6>
|
||||
<VRadioGroup
|
||||
v-model="theme"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
v-for="themeOption in ['system', 'light', 'dark']"
|
||||
:key="themeOption"
|
||||
:label="themeOption"
|
||||
:value="themeOption"
|
||||
class="text-capitalize"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<!-- 👉 Primary color -->
|
||||
<h6 class="mt-3 text-base font-weight-regular">
|
||||
Primary Color
|
||||
</h6>
|
||||
<div class="d-flex gap-x-4 mt-2">
|
||||
<div
|
||||
v-for="(color, index) in colors"
|
||||
:key="color"
|
||||
style=" border-radius: 0.5rem; block-size: 2.5rem;inline-size: 2.5rem; transition: all 0.25s ease;"
|
||||
:style="{ backgroundColor: getBoxColor(initialThemeColors[color], index) }"
|
||||
class="cursor-pointer d-flex align-center justify-center"
|
||||
:class="{ 'elevation-4': vuetifyTheme.current.value.colors.primary === getBoxColor(initialThemeColors[color], index) }"
|
||||
@click="setPrimaryColor(getBoxColor(initialThemeColors[color], index))"
|
||||
>
|
||||
<VFadeTransition>
|
||||
<VIcon
|
||||
v-show="vuetifyTheme.current.value.colors.primary === (getBoxColor(initialThemeColors[color], index))"
|
||||
icon="tabler-check"
|
||||
color="white"
|
||||
/>
|
||||
</VFadeTransition>
|
||||
</div>
|
||||
</div>
|
||||
</CustomizerSection>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION LAYOUT -->
|
||||
<CustomizerSection title="LAYOUT">
|
||||
<!-- 👉 Content Width -->
|
||||
<h6 class="text-base font-weight-regular">
|
||||
Content width
|
||||
</h6>
|
||||
<VRadioGroup
|
||||
v-model="appContentWidth"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
v-for="[key, val] in Object.entries(ContentWidth)"
|
||||
:key="key"
|
||||
:label="key"
|
||||
:value="val"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
<!-- 👉 Navbar Type -->
|
||||
<h6 class="mt-3 text-base font-weight-regular">
|
||||
{{ appContentLayoutNav === AppContentLayoutNav.Vertical ? 'Navbar' : 'Header' }} Type
|
||||
</h6>
|
||||
<VRadioGroup
|
||||
v-model="navbarType"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
v-for="[key, val] in headerValues"
|
||||
:key="key"
|
||||
:label="key"
|
||||
:value="val"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
<!-- 👉 Footer Type -->
|
||||
<h6 class="mt-3 text-base font-weight-regular">
|
||||
Footer Type
|
||||
</h6>
|
||||
<VRadioGroup
|
||||
v-model="footerType"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
v-for="[key, val] in Object.entries(FooterType)"
|
||||
:key="key"
|
||||
:label="key"
|
||||
:value="val"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
<!-- 👉 Navbar blur -->
|
||||
<div class="mt-4 d-flex align-center justify-space-between">
|
||||
<VLabel
|
||||
for="customizer-navbar-blur"
|
||||
class="text-high-emphasis"
|
||||
>
|
||||
Navbar Blur
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="customizer-navbar-blur"
|
||||
v-model="isNavbarBlurEnabled"
|
||||
class="ms-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CustomizerSection>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Menu -->
|
||||
<CustomizerSection title="MENU">
|
||||
<!-- 👉 Menu Type -->
|
||||
<h6 class="text-base font-weight-regular">
|
||||
Menu Type
|
||||
</h6>
|
||||
<VRadioGroup
|
||||
v-model="appContentLayoutNav"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
v-for="[key, val] in Object.entries(AppContentLayoutNav)"
|
||||
:key="key"
|
||||
:label="key"
|
||||
:value="val"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<!-- 👉 Collapsed Menu -->
|
||||
<div
|
||||
v-if="appContentLayoutNav === AppContentLayoutNav.Vertical"
|
||||
class="mt-4 d-flex align-center justify-space-between"
|
||||
>
|
||||
<VLabel
|
||||
for="customizer-menu-collapsed"
|
||||
class="text-high-emphasis"
|
||||
>
|
||||
Collapsed Menu
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="customizer-menu-collapsed"
|
||||
v-model="isVerticalNavCollapsed"
|
||||
class="ms-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Semi Dark Menu -->
|
||||
<div
|
||||
class="mt-4 align-center justify-space-between"
|
||||
:class="vuetifyTheme.global.name.value === 'light' && appContentLayoutNav === AppContentLayoutNav.Vertical ? 'd-flex' : 'd-none'"
|
||||
>
|
||||
<VLabel
|
||||
for="customizer-menu-semi-dark"
|
||||
class="text-high-emphasis"
|
||||
>
|
||||
Semi Dark Menu
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="customizer-menu-semi-dark"
|
||||
v-model="isVerticalNavSemiDark"
|
||||
class="ms-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CustomizerSection>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION MISC -->
|
||||
<CustomizerSection title="MISC">
|
||||
<!-- 👉 RTL -->
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<VLabel
|
||||
for="customizer-rtl"
|
||||
class="text-high-emphasis"
|
||||
>
|
||||
RTL
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="customizer-rtl"
|
||||
v-model="isAppRtl"
|
||||
class="ms-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Route Transition -->
|
||||
<div class="mt-6">
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="5"
|
||||
class="d-flex align-center"
|
||||
>
|
||||
<VLabel
|
||||
for="route-transition"
|
||||
class="text-high-emphasis"
|
||||
>
|
||||
Router Transition
|
||||
</VLabel>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="7">
|
||||
<AppSelect
|
||||
id="route-transition"
|
||||
v-model="appRouteTransition"
|
||||
:items="Object.entries(RouteTransitions).map(([key, value]) => ({ key, value }))"
|
||||
item-title="key"
|
||||
item-value="value"
|
||||
single-line
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</CustomizerSection>
|
||||
<!-- !SECTION -->
|
||||
</PerfectScrollbar>
|
||||
</VNavigationDrawer>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.app-customizer {
|
||||
.customizer-section {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.customizer-heading {
|
||||
padding-block: 0.875rem;
|
||||
padding-inline: 1.25rem;
|
||||
}
|
||||
|
||||
.v-navigation-drawer__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.app-customizer-toggler {
|
||||
position: fixed !important;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import { useThemeConfig } from '@core/composable/useThemeConfig'
|
||||
|
||||
const props = defineProps({
|
||||
themes: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { theme } = useThemeConfig()
|
||||
|
||||
const {
|
||||
state: currentThemeName,
|
||||
next: getNextThemeName,
|
||||
index: currentThemeIndex,
|
||||
} = useCycleList(props.themes.map(t => t.name), { initialValue: theme.value })
|
||||
|
||||
const changeTheme = () => {
|
||||
theme.value = getNextThemeName()
|
||||
}
|
||||
|
||||
// Update icon if theme is changed from other sources
|
||||
watch(theme, val => {
|
||||
currentThemeName.value = val
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn @click="changeTheme">
|
||||
<VIcon
|
||||
size="26"
|
||||
:icon="props.themes[currentThemeIndex].icon"
|
||||
/>
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
open-delay="1000"
|
||||
scroll-strategy="close"
|
||||
>
|
||||
<span class="text-capitalize">{{ currentThemeName }}</span>
|
||||
</VTooltip>
|
||||
</IconBtn>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppAutocomplete',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
// const { class: _class, label, variant: _, ...restAttrs } = useAttrs()
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id || attrs.label
|
||||
|
||||
return _elementIdToken ? `app-autocomplete-${ _elementIdToken }-${ Math.random().toString(36).slice(2, 7) }` : undefined
|
||||
})
|
||||
|
||||
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-high-emphasis"
|
||||
: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,57 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppCombobox',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id || attrs.label
|
||||
|
||||
return _elementIdToken ? `app-combobox-${ _elementIdToken }-${ Math.random().toString(36).slice(2, 7) }` : undefined
|
||||
})
|
||||
|
||||
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-high-emphasis"
|
||||
: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,502 @@
|
||||
<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 { useThemeConfig } from '@core/composable/useThemeConfig'
|
||||
import { filterInputAttrs } from 'vuetify/lib/util/helpers'
|
||||
|
||||
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: 'compact',
|
||||
hideDetails: 'auto',
|
||||
}),
|
||||
...makeVFieldProps({
|
||||
variant: 'outlined',
|
||||
color: 'primary',
|
||||
}),
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'click:control',
|
||||
'mousedown:control',
|
||||
'update:focused',
|
||||
'update:modelValue',
|
||||
'click:clear',
|
||||
])
|
||||
|
||||
defineOptions({ inheritAttrs: false })
|
||||
|
||||
const attrs = useAttrs()
|
||||
const [rootAttrs, compAttrs] = filterInputAttrs(attrs)
|
||||
|
||||
const [{
|
||||
modelValue: _,
|
||||
...inputProps
|
||||
}] = VInput.filterProps(props)
|
||||
|
||||
const [fieldProps] = 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' })
|
||||
}
|
||||
|
||||
const onClear = el => {
|
||||
el.stopPropagation()
|
||||
nextTick(() => {
|
||||
emit('update:modelValue', '')
|
||||
emit('click:clear', el)
|
||||
})
|
||||
}
|
||||
|
||||
const { theme } = useThemeConfig()
|
||||
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(theme, updateThemeClassInCalendar)
|
||||
onMounted(() => {
|
||||
updateThemeClassInCalendar()
|
||||
})
|
||||
|
||||
const emitModelValue = val => {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
|
||||
const elementId = computed(() => {
|
||||
const _elementIdToken = fieldProps.id || fieldProps.label
|
||||
|
||||
return _elementIdToken ? `app-picker-field-${ _elementIdToken }-${ Math.random().toString(36).slice(2, 7) }` : undefined
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-picker-field">
|
||||
<!-- v-input -->
|
||||
<VLabel
|
||||
v-if="fieldProps.label"
|
||||
class="mb-1 text-body-2 text-high-emphasis"
|
||||
: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 }">
|
||||
<!-- 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"
|
||||
:id="elementId"
|
||||
ref="refFlatPicker"
|
||||
:model-value="modelValue"
|
||||
:placeholder="props.placeholder"
|
||||
class="flat-picker-custom-style"
|
||||
:disabled="isReadonly.value"
|
||||
@on-open="isCalendarOpen = true"
|
||||
@on-close="isCalendarOpen = false"
|
||||
@update:model-value="emitModelValue"
|
||||
/>
|
||||
|
||||
<!-- simple input for inline prop -->
|
||||
<input
|
||||
v-if="isInlinePicker"
|
||||
:value="modelValue"
|
||||
:placeholder="props.placeholder"
|
||||
class="flat-picker-custom-style"
|
||||
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">
|
||||
/* 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);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
$heading-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
$body-color: rgba(var(--v-theme-on-background), var(--v-medium-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-calendar {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
inline-size: 16.625rem;
|
||||
margin-block-start: 0.1875rem;
|
||||
|
||||
@include mixins.elevation(4);
|
||||
|
||||
.flatpickr-rContainer {
|
||||
.flatpickr-weekdays {
|
||||
block-size: 2.125rem;
|
||||
padding-inline: 0.875rem;
|
||||
}
|
||||
|
||||
.flatpickr-days {
|
||||
min-inline-size: 16.625rem;
|
||||
|
||||
.dayContainer {
|
||||
justify-content: center !important;
|
||||
inline-size: 16.625rem;
|
||||
min-inline-size: 16.625rem;
|
||||
padding-block-end: 0.75rem;
|
||||
padding-block-start: 0;
|
||||
|
||||
.flatpickr-day {
|
||||
block-size: 2.125rem;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 2.125rem;
|
||||
margin-block-start: 0 !important;
|
||||
max-inline-size: 2.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-day {
|
||||
color: $body-color;
|
||||
|
||||
&.today {
|
||||
border-color: rgb(var(--v-theme-primary));
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(var(--v-theme-primary));
|
||||
background: transparent;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.selected:hover {
|
||||
border-color: rgb(var(--v-theme-primary));
|
||||
background: rgb(var(--v-theme-primary));
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
|
||||
@include mixins.elevation(2);
|
||||
}
|
||||
|
||||
&.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 mixins.elevation(2);
|
||||
}
|
||||
|
||||
&.endRange {
|
||||
@include mixins.elevation(2);
|
||||
}
|
||||
|
||||
&.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.08);
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-weekday {
|
||||
color: $heading-color;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.flatpickr-days {
|
||||
inline-size: 16.625rem;
|
||||
}
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flatpickr-months {
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
|
||||
.flatpickr-prev-month,
|
||||
.flatpickr-next-month {
|
||||
fill: $body-color;
|
||||
|
||||
&: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-time {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
// week sections
|
||||
.flatpickr-weekdays {
|
||||
margin-block: 12px;
|
||||
}
|
||||
|
||||
// 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: 500;
|
||||
transition: all 0.15s ease-out;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flatpickr-monthDropdown-month {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
}
|
||||
|
||||
.numInput.cur-year {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 5rem;
|
||||
background: rgba(var(--v-theme-surface-variant), var(--v-selected-opacity));
|
||||
block-size: 1.75rem;
|
||||
inline-size: 1.75rem;
|
||||
inset-block-start: 0.75rem !important;
|
||||
margin-block: 0.1875rem;
|
||||
padding-block: 0.25rem;
|
||||
padding-inline: 0.4375rem;
|
||||
}
|
||||
|
||||
.flatpickr-next-month {
|
||||
inset-inline-end: 1.05rem !important;
|
||||
}
|
||||
|
||||
.flatpickr-prev-month {
|
||||
/* stylelint-disable-next-line liberty/use-logical-spec */
|
||||
right: 3.8rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update hour font-weight
|
||||
.flatpickr-time input.flatpickr-hour {
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
totalInput: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 6,
|
||||
},
|
||||
default: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['updateOtp'])
|
||||
|
||||
const digits = ref([])
|
||||
const refOtpComp = ref(null)
|
||||
|
||||
digits.value = props.default.split('')
|
||||
|
||||
const defaultStyle = { style: 'max-width: 54px; text-align: center;' }
|
||||
|
||||
// eslint-disable-next-line sonarjs/cognitive-complexity
|
||||
const handleKeyDown = (event, index) => {
|
||||
if (event.code !== 'Tab' && event.code !== 'ArrowRight' && event.code !== 'ArrowLeft')
|
||||
event.preventDefault()
|
||||
if (event.code === 'Backspace') {
|
||||
digits.value[index - 1] = ''
|
||||
if (refOtpComp.value !== null && index > 1) {
|
||||
const inputEl = refOtpComp.value.children[index - 2].querySelector('input')
|
||||
if (inputEl)
|
||||
inputEl.focus()
|
||||
}
|
||||
}
|
||||
const numberRegExp = /^([0-9])$/
|
||||
if (numberRegExp.test(event.key)) {
|
||||
digits.value[index - 1] = event.key
|
||||
if (refOtpComp.value !== null && index !== 0 && index < refOtpComp.value.children.length) {
|
||||
const inputEl = refOtpComp.value.children[index].querySelector('input')
|
||||
if (inputEl)
|
||||
inputEl.focus()
|
||||
}
|
||||
}
|
||||
emit('updateOtp', digits.value.join(''))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h6 class="text-h6 mb-3">
|
||||
Type your 6 digit security code
|
||||
</h6>
|
||||
<div
|
||||
ref="refOtpComp"
|
||||
class="d-flex align-center gap-4"
|
||||
>
|
||||
<AppTextField
|
||||
v-for="i in props.totalInput"
|
||||
:key="i"
|
||||
:model-value="digits[i - 1]"
|
||||
v-bind="defaultStyle"
|
||||
maxlength="1"
|
||||
@keydown="handleKeyDown($event, i)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-field__field {
|
||||
input {
|
||||
padding: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppSelect',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id || attrs.label
|
||||
|
||||
return _elementIdToken ? `app-select-${ _elementIdToken }-${ Math.random().toString(36).slice(2, 7) }` : undefined
|
||||
})
|
||||
|
||||
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 text-high-emphasis"
|
||||
: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,48 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppTextField',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id || attrs.label
|
||||
|
||||
return _elementIdToken ? `app-text-field-${ _elementIdToken }-${ Math.random().toString(36).slice(2, 7) }` : undefined
|
||||
})
|
||||
|
||||
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-high-emphasis"
|
||||
: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,49 @@
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'AppTextarea',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
// const { class: _class, label, variant: _, ...restAttrs } = useAttrs()
|
||||
const elementId = computed(() => {
|
||||
const attrs = useAttrs()
|
||||
const _elementIdToken = attrs.id || attrs.label
|
||||
|
||||
return _elementIdToken ? `app-textarea-${ _elementIdToken }-${ Math.random().toString(36).slice(2, 7) }` : undefined
|
||||
})
|
||||
|
||||
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-high-emphasis"
|
||||
: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,82 @@
|
||||
<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 selectedOption = ref(structuredClone(toRaw(props.selectedCheckbox)))
|
||||
|
||||
watch(selectedOption, () => {
|
||||
emit('update:selectedCheckbox', selectedOption.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow
|
||||
v-if="props.checkboxContent && selectedOption"
|
||||
v-model="selectedOption"
|
||||
>
|
||||
<VCol
|
||||
v-for="item in props.checkboxContent"
|
||||
:key="item.title"
|
||||
v-bind="gridColumn"
|
||||
>
|
||||
<VLabel
|
||||
class="custom-input custom-checkbox rounded cursor-pointer"
|
||||
:class="selectedOption.includes(item.value) ? 'active' : ''"
|
||||
>
|
||||
<div>
|
||||
<VCheckbox
|
||||
v-model="selectedOption"
|
||||
:value="item.value"
|
||||
/>
|
||||
</div>
|
||||
<slot :item="item">
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex align-center mb-1">
|
||||
<h6 class="cr-title text-base">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<VSpacer />
|
||||
<span
|
||||
v-if="item.subtitle"
|
||||
class="text-disabled text-base"
|
||||
>{{ 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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<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 selectedOption = ref(structuredClone(toRaw(props.selectedCheckbox)))
|
||||
|
||||
watch(selectedOption, () => {
|
||||
emit('update:selectedCheckbox', selectedOption.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow
|
||||
v-if="props.checkboxContent && selectedOption"
|
||||
v-model="selectedOption"
|
||||
>
|
||||
<VCol
|
||||
v-for="item in props.checkboxContent"
|
||||
:key="item.title"
|
||||
v-bind="gridColumn"
|
||||
>
|
||||
<VLabel
|
||||
class="custom-input custom-checkbox-icon rounded cursor-pointer"
|
||||
:class="selectedOption.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
|
||||
v-model="selectedOption"
|
||||
:value="item.value"
|
||||
/>
|
||||
</div>
|
||||
</VLabel>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-checkbox-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
|
||||
.v-checkbox {
|
||||
margin-block-end: -0.375rem;
|
||||
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cr-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</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,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 selectedOption = ref(structuredClone(toRaw(props.selectedCheckbox)))
|
||||
|
||||
watch(selectedOption, () => {
|
||||
emit('update:selectedCheckbox', selectedOption.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow
|
||||
v-if="props.checkboxContent && selectedOption"
|
||||
v-model="selectedOption"
|
||||
>
|
||||
<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="selectedOption.includes(item.value) ? 'active' : ''"
|
||||
>
|
||||
<div>
|
||||
<VCheckbox
|
||||
v-model="selectedOption"
|
||||
:value="item.value"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
:src="item.bgImage"
|
||||
alt="bg-img"
|
||||
class="custom-checkbox-image"
|
||||
>
|
||||
</VLabel>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-checkbox {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border-width: 2px;
|
||||
transition: all 0.5s;
|
||||
|
||||
.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,81 @@
|
||||
<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 selectedOption = ref(structuredClone(toRaw(props.selectedRadio)))
|
||||
|
||||
watch(selectedOption, () => {
|
||||
emit('update:selectedRadio', selectedOption.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-if="props.radioContent"
|
||||
v-model="selectedOption"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in props.radioContent"
|
||||
:key="item.title"
|
||||
v-bind="gridColumn"
|
||||
>
|
||||
<VLabel
|
||||
class="custom-input custom-radio rounded cursor-pointer"
|
||||
:class="selectedOption === item.value ? 'active' : ''"
|
||||
>
|
||||
<div>
|
||||
<VRadio :value="item.value" />
|
||||
</div>
|
||||
<slot :item="item">
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex align-center mb-1">
|
||||
<h6 class="cr-title text-base">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<VSpacer />
|
||||
<span
|
||||
v-if="item.subtitle"
|
||||
class="text-disabled text-base"
|
||||
>{{ item.subtitle }}</span>
|
||||
</div>
|
||||
<p class="text-sm 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.375rem;
|
||||
|
||||
.v-radio {
|
||||
margin-block-start: -0.25rem;
|
||||
}
|
||||
|
||||
.cr-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<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 selectedOption = ref(structuredClone(toRaw(props.selectedRadio)))
|
||||
|
||||
watch(selectedOption, () => {
|
||||
emit('update:selectedRadio', selectedOption.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-if="props.radioContent"
|
||||
v-model="selectedOption"
|
||||
>
|
||||
<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="selectedOption === 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 mb-0 clamp-text">
|
||||
{{ 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.375rem;
|
||||
|
||||
.v-radio {
|
||||
margin-block-end: -0.25rem;
|
||||
}
|
||||
|
||||
.cr-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</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,68 @@
|
||||
<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 selectedOption = ref(structuredClone(toRaw(props.selectedRadio)))
|
||||
|
||||
watch(selectedOption, () => {
|
||||
emit('update:selectedRadio', selectedOption.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-if="props.radioContent"
|
||||
v-model="selectedOption"
|
||||
>
|
||||
<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="selectedOption === item.value ? 'active' : ''"
|
||||
>
|
||||
<img
|
||||
:src="item.bgImage"
|
||||
alt="bg-img"
|
||||
class="custom-radio-image"
|
||||
>
|
||||
<VRadio :value="item.value" />
|
||||
</VLabel>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-radio {
|
||||
padding: 0;
|
||||
border-width: 2px;
|
||||
|
||||
.custom-radio-image {
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
|
||||
.v-radio {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,162 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
noActions: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
actionCollapsed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
actionRefresh: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
actionRemove: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'collapsed',
|
||||
'refresh',
|
||||
'trash',
|
||||
])
|
||||
|
||||
defineOptions({ inheritAttrs: false })
|
||||
|
||||
const isContentCollapsed = ref(props.collapsed)
|
||||
const isCardRemoved = ref(false)
|
||||
const isOverlayVisible = ref(false)
|
||||
|
||||
// hiding overlay
|
||||
const hideOverlay = () => {
|
||||
isOverlayVisible.value = false
|
||||
}
|
||||
|
||||
// trigger collapse
|
||||
const triggerCollapse = () => {
|
||||
isContentCollapsed.value = !isContentCollapsed.value
|
||||
emit('collapsed', isContentCollapsed.value)
|
||||
}
|
||||
|
||||
// trigger refresh
|
||||
const triggerRefresh = () => {
|
||||
isOverlayVisible.value = true
|
||||
emit('refresh', hideOverlay)
|
||||
}
|
||||
|
||||
// trigger removal
|
||||
const triggeredRemove = () => {
|
||||
isCardRemoved.value = true
|
||||
emit('trash')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VExpandTransition>
|
||||
<!-- TODO remove div when transition work with v-card components: https://github.com/vuetifyjs/vuetify/issues/15111 -->
|
||||
<div v-if="!isCardRemoved">
|
||||
<VCard v-bind="$attrs">
|
||||
<VCardItem>
|
||||
<VCardTitle v-if="props.title || $slots.title">
|
||||
<!-- 👉 Title slot and prop -->
|
||||
<slot name="title">
|
||||
{{ props.title }}
|
||||
</slot>
|
||||
</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<!-- 👉 Before actions slot -->
|
||||
<div>
|
||||
<slot name="before-actions" />
|
||||
|
||||
<!-- SECTION Actions buttons -->
|
||||
|
||||
<!-- 👉 Collapse button -->
|
||||
<IconBtn
|
||||
v-if="(!(actionRemove || actionRefresh) || actionCollapsed) && !noActions"
|
||||
@click="triggerCollapse"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-chevron-up"
|
||||
:style="{ transform: isContentCollapsed ? 'rotate(-180deg)' : null }"
|
||||
style="transition-duration: 0.28s;"
|
||||
/>
|
||||
</IconBtn>
|
||||
|
||||
<!-- 👉 Overlay button -->
|
||||
<IconBtn
|
||||
v-if="(!(actionRemove || actionCollapsed) || actionRefresh) && !noActions"
|
||||
@click="triggerRefresh"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-refresh"
|
||||
/>
|
||||
</IconBtn>
|
||||
|
||||
<!-- 👉 Close button -->
|
||||
<IconBtn
|
||||
v-if="(!(actionRefresh || actionCollapsed) || actionRemove) && !noActions"
|
||||
@click="triggeredRemove"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-x"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
<!-- !SECTION -->
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<!-- 👉 card content -->
|
||||
<VExpandTransition>
|
||||
<div
|
||||
v-show="!isContentCollapsed"
|
||||
class="v-card-content"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
|
||||
<!-- 👉 Overlay -->
|
||||
<VOverlay
|
||||
v-model="isOverlayVisible"
|
||||
contained
|
||||
persistent
|
||||
class="align-center justify-center"
|
||||
>
|
||||
<VProgressCircular indeterminate />
|
||||
</VOverlay>
|
||||
</VCard>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card-item {
|
||||
+.v-card-content {
|
||||
.v-card-text:first-child {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<script setup>
|
||||
import 'prismjs'
|
||||
import 'prismjs/themes/prism-tomorrow.css'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
code: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
codeLanguage: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'markup',
|
||||
},
|
||||
noPadding: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const preferredCodeLanguage = useStorage('preferredCodeLanguage', 'ts')
|
||||
const isCodeShown = ref(false)
|
||||
const { copy, copied } = useClipboard({ source: computed(() => props.code[preferredCodeLanguage.value]) })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>{{ props.title }}</VCardTitle>
|
||||
<template #append>
|
||||
<IconBtn
|
||||
size="small"
|
||||
:color="isCodeShown ? 'primary' : 'default'"
|
||||
:class="isCodeShown ? '' : 'text-disabled'"
|
||||
@click="isCodeShown = !isCodeShown"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-code"
|
||||
/>
|
||||
</IconBtn>
|
||||
</template>
|
||||
</VCardItem>
|
||||
<slot v-if="noPadding" />
|
||||
<VCardText v-else>
|
||||
<slot />
|
||||
</VCardText>
|
||||
<VExpandTransition>
|
||||
<div v-show="isCodeShown">
|
||||
<VDivider />
|
||||
|
||||
<VCardText class="d-flex gap-y-3 flex-column">
|
||||
<div class="d-flex justify-end">
|
||||
<VBtnToggle
|
||||
v-model="preferredCodeLanguage"
|
||||
mandatory
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
>
|
||||
<VBtn
|
||||
size="x-small"
|
||||
value="ts"
|
||||
:color="preferredCodeLanguage === 'ts' ? 'primary' : 'default'"
|
||||
>
|
||||
<VIcon
|
||||
size="x-large"
|
||||
icon="custom-typescript"
|
||||
:color="preferredCodeLanguage === 'ts' ? 'primary' : 'secondary'"
|
||||
/>
|
||||
</VBtn>
|
||||
<VBtn
|
||||
size="x-small"
|
||||
value="js"
|
||||
:color="preferredCodeLanguage === 'js' ? 'primary' : 'default'"
|
||||
>
|
||||
<VIcon
|
||||
size="x-large"
|
||||
icon="custom-javascript"
|
||||
:color="preferredCodeLanguage === 'js' ? 'primary' : 'secondary'"
|
||||
/>
|
||||
</VBtn>
|
||||
</VBtnToggle>
|
||||
</div>
|
||||
|
||||
<div class="position-relative">
|
||||
<Prism
|
||||
:key="props.code[preferredCodeLanguage]"
|
||||
:language="props.codeLanguage"
|
||||
:style="$vuetify.locale.isRtl ? 'text-align: right' : 'text-align: left'"
|
||||
>
|
||||
{{ props.code[preferredCodeLanguage] }}
|
||||
</Prism>
|
||||
<IconBtn
|
||||
class="position-absolute app-card-code-copy-icon"
|
||||
color="white"
|
||||
@click="() => { copy() }"
|
||||
>
|
||||
<VIcon
|
||||
:icon="copied ? 'tabler-check' : 'tabler-copy'"
|
||||
size="20"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@styles/variables/_vuetify.scss";
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
border-radius: vuetify.$card-border-radius;
|
||||
}
|
||||
|
||||
.app-card-code-copy-icon {
|
||||
inset-block-start: 1.2em;
|
||||
inset-inline-end: 0.8em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'primary',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<span class="text-h5">{{ props.stats }}</span>
|
||||
</div>
|
||||
<span class="text-body-2">{{ props.title }}</span>
|
||||
</div>
|
||||
|
||||
<VAvatar
|
||||
:icon="props.icon"
|
||||
:color="props.color"
|
||||
:size="42"
|
||||
variant="tonal"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup>
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'primary',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
chartOptions: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex flex-column pb-0">
|
||||
<VAvatar
|
||||
v-if="props.icon"
|
||||
size="42"
|
||||
variant="tonal"
|
||||
:color="props.color"
|
||||
:icon="props.icon"
|
||||
class="mb-3"
|
||||
/>
|
||||
|
||||
<h6 class="text-lg font-weight-medium">
|
||||
{{ props.stats }}
|
||||
</h6>
|
||||
<span class="text-sm">{{ props.title }}</span>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts
|
||||
:series="props.series"
|
||||
:options="props.chartOptions"
|
||||
:height="props.height"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
Reference in New Issue
Block a user