first commit
This commit is contained in:
@@ -0,0 +1,164 @@
|
||||
<script setup>
|
||||
import HumanName from './HumanName.vue'
|
||||
|
||||
const delay = ref(null)
|
||||
delay.value = 10
|
||||
|
||||
async function getItemsSearch(query, el$) {
|
||||
const { data } = await useFetch('/api/address?search=' + query, {
|
||||
lazy: true,
|
||||
server: false,
|
||||
})
|
||||
return data.value.map((d) => {
|
||||
return {
|
||||
value: d,
|
||||
label: d.display,
|
||||
}
|
||||
})
|
||||
// const addressesString = data.value.map((value) => {
|
||||
// var result = value.villages ? 'Desa/Kel ' + value.villages + ', ' : ''
|
||||
// result += value.districts ? 'Kec ' + value.districts + ', ' : ''
|
||||
// result += value.cities ? 'Kota/Kab ' + value.cities + ', ' : ''
|
||||
// result += value.states ? 'Prov ' + value.states + ', ' : ''
|
||||
// result += value.countries ? value.countries : ''
|
||||
// return { value: value, label: result }
|
||||
// })
|
||||
// return addressesString
|
||||
}
|
||||
|
||||
async function getPostal(query) {
|
||||
const { data } = await useFetch('/api/address?search=' + query, {
|
||||
lazy: true,
|
||||
server: false,
|
||||
})
|
||||
return data.value
|
||||
}
|
||||
|
||||
function onSelectSearch(option, el$) {
|
||||
const postal = getPostal(option.value.states.regencies.districts)
|
||||
el$.$parent.$parent.children$.country.update(option.value)
|
||||
el$.$parent.$parent.children$.state.update(option.value.states)
|
||||
el$.$parent.$parent.children$.city.update(option.value.states.regencies)
|
||||
el$.$parent.$parent.children$.district.update(
|
||||
option.value.states.regencies.districts,
|
||||
)
|
||||
el$.$parent.$parent.children$.village.update(
|
||||
option.value.states.regencies.districts.villages,
|
||||
)
|
||||
el$.$parent.$parent.children$.postalCode.update(postal[0])
|
||||
}
|
||||
|
||||
function onSelectCountry(option, el$) {
|
||||
el$.$parent.$parent.children$.state.clear()
|
||||
el$.$parent.$parent.children$.city.clear()
|
||||
el$.$parent.$parent.children$.district.clear()
|
||||
el$.$parent.$parent.children$.village.clear()
|
||||
el$.$parent.$parent.children$.postalCode.clear()
|
||||
}
|
||||
|
||||
function onSelectState(option, el$) {
|
||||
el$.$parent.$parent.children$.city.clear()
|
||||
el$.$parent.$parent.children$.district.clear()
|
||||
el$.$parent.$parent.children$.village.clear()
|
||||
el$.$parent.$parent.children$.postalCode.clear()
|
||||
}
|
||||
|
||||
function onSelectCity(option, el$) {
|
||||
el$.$parent.$parent.children$.district.clear()
|
||||
el$.$parent.$parent.children$.village.clear()
|
||||
el$.$parent.$parent.children$.postalCode.clear()
|
||||
}
|
||||
|
||||
function onSelectDistrict(option, el$) {
|
||||
el$.$parent.$parent.children$.village.clear()
|
||||
el$.$parent.$parent.children$.postalCode.clear()
|
||||
console.log(el$)
|
||||
}
|
||||
|
||||
function onSelectVillage(option, el$) {
|
||||
el$.$parent.$parent.children$.postalCode.clear()
|
||||
}
|
||||
|
||||
async function onChange(input, el$) {
|
||||
delay.value = input.length > 0 ? 5000 : 10
|
||||
}
|
||||
|
||||
function formatData(name, value) {
|
||||
return { [name]: value.name }
|
||||
}
|
||||
function formatLine(name, value) {
|
||||
return { [name]: value.split('\n') }
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<ListElement name="address">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index" :columns="{
|
||||
sm: {
|
||||
container: 12,
|
||||
},
|
||||
}">
|
||||
<TextareaElement name="line" placeholder="Alamat" :format-data="formatLine" />
|
||||
<SelectElement name="search" @select="onSelectSearch" :search="true" :native="false" input-type="search"
|
||||
autocomplete="off" placeholder="🔎 Cari Alamat" :resolve-on-load="false" :delay="20" :items="getItemsSearch"
|
||||
:submit="false" no-results-text="Alamat Tidak Ditemukan" :object="true" :filter-results="false"
|
||||
:caret="false" />
|
||||
<SelectElement name="country" allow-absent @select="onSelectCountry" items="/api/address/countries"
|
||||
:format-data="formatData" :search="true" :native="false" :object="true" :resolve-on-load="true"
|
||||
autocomplete="on" value-prop="_id" label-prop="name" input-type="search" placeholder="Negara" :conditions="[
|
||||
[
|
||||
['address.*.line', 'not_empty'],
|
||||
['address.*.search', 'not_empty'],
|
||||
],
|
||||
]" :columns="{
|
||||
sm: {
|
||||
container: 6,
|
||||
},
|
||||
}" />
|
||||
<SelectElement name="state" allow-absent @select="onSelectState" @search-change="onChange"
|
||||
items="/api/address/states?parent={address.*.country}" :format-data="formatData" :search="true"
|
||||
:native="false" :object="true" :delay="delay" :resolve-on-load="false" autocomplete="on" value-prop="_id"
|
||||
label-prop="name" input-type="search" placeholder="Provinsi"
|
||||
:conditions="[['address.*.country', 'not_empty']]" :columns="{
|
||||
sm: {
|
||||
container: 6,
|
||||
},
|
||||
}" />
|
||||
<SelectElement name="city" allow-absent @select="onSelectCity" @search-change="onChange"
|
||||
items="/api/address/cities?parent={address.*.state}" :format-data="formatData" :search="true" :native="false"
|
||||
:object="true" :delay="delay" :resolve-on-load="false" autocomplete="on" value-prop="_id" label-prop="name"
|
||||
input-type="search" placeholder="Kota / Kabupaten" :conditions="[['address.*.state', 'not_empty']]" :columns="{
|
||||
sm: {
|
||||
container: 6,
|
||||
},
|
||||
}" />
|
||||
<SelectElement name="district" allow-absent @select="onSelectDistrict" @search-change="onChange"
|
||||
items="/api/address/districts?parent={address.*.city}" :format-data="formatData" :search="true"
|
||||
:native="false" :object="true" :delay="delay" :resolve-on-load="false" autocomplete="on" value-prop="_id"
|
||||
label-prop="name" input-type="search" placeholder="Kecamatan" :conditions="[['address.*.city', 'not_empty']]"
|
||||
:columns="{
|
||||
sm: {
|
||||
container: 6,
|
||||
},
|
||||
}" />
|
||||
<SelectElement name="village" allow-absent @select="onSelectVillage" @search-change="onChange"
|
||||
items="/api/address/villages?parent={address.*.district}" :format-data="formatData" :search="true"
|
||||
:native="false" :object="true" :delay="delay" :resolve-on-load="false" autocomplete="on" value-prop="_id"
|
||||
label-prop="name" input-type="search" placeholder="Desa / Kelurahan"
|
||||
:conditions="[['address.*.district', 'not_empty']]" :columns="{
|
||||
sm: {
|
||||
container: 6,
|
||||
},
|
||||
}" />
|
||||
<SelectElement name="postalCode" allow-absent @search-change="onChange"
|
||||
items="/api/address/postal?parent={address.*.district}" :native="false" :object="false" :delay="delay"
|
||||
:resolve-on-load="false" autocomplete="off" placeholder="Kode Pos"
|
||||
:conditions="[['address.*.district', 'not_empty']]" :columns="{
|
||||
sm: {
|
||||
container: 6,
|
||||
},
|
||||
}" />
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<ListElement name="communication">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index">
|
||||
<GroupElement name="container2_2">
|
||||
<GroupElement name="column1" :columns="{
|
||||
container: 1,
|
||||
}">
|
||||
<ToggleElement name="preferred" :labels="{
|
||||
on: 'Aktif',
|
||||
off: 'Pasif',
|
||||
}" :default="true" size="lg" align="right" />
|
||||
</GroupElement>
|
||||
<GroupElement name="column2" :columns="{
|
||||
container: 11,
|
||||
}">
|
||||
<ListElement name="language" :controls="{
|
||||
add: false,
|
||||
remove: false,
|
||||
}">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index">
|
||||
<SelectElement name="text" :items="[
|
||||
{
|
||||
value: 'id',
|
||||
label: 'Indonesia',
|
||||
},
|
||||
{
|
||||
value: 'en',
|
||||
label: 'Inggris',
|
||||
},
|
||||
{
|
||||
value: 'jawa',
|
||||
label: 'Jawa',
|
||||
},
|
||||
{
|
||||
value: 'sunda',
|
||||
label: 'Sunda',
|
||||
},
|
||||
{
|
||||
value: 'ch',
|
||||
label: 'China',
|
||||
},
|
||||
]" :search="true" :native="false" input-type="search" autocomplete="off" placeholder="Bahasa"
|
||||
:create="true" :append-new-option="false" />
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</GroupElement>
|
||||
</GroupElement>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<ListElement name="contact" :rules="['min:1']" :min="1" :max="1" :initial="1">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index">
|
||||
<GroupElement name="container2">
|
||||
<GroupElement name="column1" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<FormLibRelationship />
|
||||
</GroupElement>
|
||||
<GroupElement name="column_2" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<FormLibHumanName />
|
||||
</GroupElement>
|
||||
</GroupElement>
|
||||
<FormLibTelecom />
|
||||
<FormLibAddress />
|
||||
<FormLibGender />
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<RadiogroupElement
|
||||
name="gender"
|
||||
view="tabs"
|
||||
label="Jenis Kelamin"
|
||||
:items="[
|
||||
{
|
||||
value: 'male',
|
||||
label: 'Laki-Laki',
|
||||
},
|
||||
{
|
||||
value: 'female',
|
||||
label: 'female',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
const parsedName = ref({})
|
||||
const onChange = (newValue, oldValue, el$) => {
|
||||
const i = parseInt(el$.$parent.$parent.path.split('.')[1])
|
||||
parsedName.value[i] = parseName(el$.$parent.$parent.children$.text.value)
|
||||
el$.$parent.$parent.children$.prefix.update(parsedName.value[i].prefix)
|
||||
el$.$parent.$parent.children$.given.update(parsedName.value[i].given)
|
||||
el$.$parent.$parent.children$.family.update(parsedName.value[i].family)
|
||||
el$.$parent.$parent.children$.suffix.update(parsedName.value[i].suffix)
|
||||
console.log(el$.$parent.$parent.children$.text.value)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<ListElement name="name" :controls="{
|
||||
add: true,
|
||||
remove: false,
|
||||
}" :rules="['min:1']" :min="1" :max="1" :initial="1">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index" :columns="{
|
||||
sm: {
|
||||
container: 12,
|
||||
},
|
||||
}">
|
||||
<TextElement @change="onChange" name="text" placeholder="Nama Lengkap" />
|
||||
<HiddenElement name="prefix" :meta="true" />
|
||||
<HiddenElement name="given" :meta="true" />
|
||||
<HiddenElement name="family" :meta="true" />
|
||||
<HiddenElement name="suffix" :meta="true" />
|
||||
<!-- <FormLibParsedName :name="parsedName" :path="'address.0'" /> -->
|
||||
<StaticElement name="parsed-name" size="m">
|
||||
<div v-if="parsedName[index]" class="d-flex flex-row">
|
||||
<v-chip v-for="(prefix, index) in parsedName[index].prefix" :key="`prefix-${index}`" size="x-small"
|
||||
class="mr-1 bg-indigo-lighten-3">{{ prefix }}</v-chip>
|
||||
<v-chip v-for="(given, index) in parsedName[index].given" :key="`given-${index}`" size="x-small"
|
||||
class="mr-1 bg-blue-darken-3">{{ given }}</v-chip>
|
||||
<v-chip v-show="parsedName[index].family" size="x-small" class="mr-1 bg-blue">{{ parsedName[index].family
|
||||
}}</v-chip>
|
||||
<v-chip v-for="(suffix, index) in parsedName[index].suffix" :key="`suffix-${index}`" size="x-small"
|
||||
class="mr-1 bg-indigo-lighten-3">{{ suffix }}</v-chip>
|
||||
</div>
|
||||
</StaticElement>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import items from '~/data/practitioner.json'
|
||||
|
||||
function onChange(oldValue, newValue, el$) {
|
||||
el$.$parent.$parent.children$.value.update(el$.value)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<ListElement name="identifier" :rules="['min:1']">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index">
|
||||
<GroupElement name="type">
|
||||
<SelectElement name="name" :search="true" :items="items" data-key="option" :native="false" default="ktp"
|
||||
:columns="{
|
||||
container: 3,
|
||||
}" :can-clear="false" :can-deselect="false" />
|
||||
|
||||
<TextElement v-for="item in items" :conditions="[['identifier.*.type.name', item.value]]" name="value_element"
|
||||
@change="onChange" :rules="['nullable', item.regex]" :messages="{
|
||||
regex: 'Format Nomor ID salah!',
|
||||
}" :placeholder="item.placeholder" :columns="{
|
||||
container: 9,
|
||||
}" :submit="false" />
|
||||
|
||||
<HiddenElement name="value" :meta="true" />
|
||||
</GroupElement>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup>
|
||||
// Define props with validation
|
||||
const props = defineProps({
|
||||
path: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (value) => {
|
||||
// Basic validation to ensure data has a name property
|
||||
return value && value.name
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StaticElement name="parsed-name" size="m">
|
||||
<div v-show="name" class="d-flex flex-row">
|
||||
<span> {{ index }}</span>
|
||||
<v-chip
|
||||
v-for="(prefix, index) in name.value[path].prefix"
|
||||
:key="`prefix-${index}`"
|
||||
size="x-small"
|
||||
class="mr-1 bg-indigo-lighten-3"
|
||||
>{{ prefix }}</v-chip
|
||||
>
|
||||
<v-chip
|
||||
v-for="(given, index) in name.value[path].given"
|
||||
:key="`given-${index}`"
|
||||
size="x-small"
|
||||
class="mr-1 bg-blue-darken-3"
|
||||
>{{ given }}</v-chip
|
||||
>
|
||||
<v-chip
|
||||
v-show="name.value[path].family"
|
||||
size="x-small"
|
||||
class="mr-1 bg-blue"
|
||||
>{{ name.family }}</v-chip
|
||||
>
|
||||
<v-chip
|
||||
v-for="(suffix, index) in name.value[path].suffix"
|
||||
:key="`suffix-${index}`"
|
||||
size="x-small"
|
||||
class="mr-1 bg-indigo-lighten-3"
|
||||
>{{ suffix }}</v-chip
|
||||
>
|
||||
</div>
|
||||
</StaticElement>
|
||||
</template>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
// import items from '~/assets/data/contact/relationship.json'
|
||||
</script>
|
||||
<template>
|
||||
<ListElement
|
||||
name="relationship"
|
||||
:rules="['min:1']"
|
||||
:min="1"
|
||||
:max="1"
|
||||
:initial="1"
|
||||
>
|
||||
<template #default="{ index }">
|
||||
<ObjectElement
|
||||
:name="index"
|
||||
>
|
||||
<SelectElement
|
||||
name="code"
|
||||
:search="true"
|
||||
:native="false"
|
||||
input-type="search"
|
||||
autocomplete="off"
|
||||
placeholder="Hubungan Dengan Pasien"
|
||||
:columns="{
|
||||
container: 12,
|
||||
}"
|
||||
:items="[
|
||||
{
|
||||
value: 'BP',
|
||||
label: 'Billing contact person',
|
||||
},
|
||||
{
|
||||
value: 'CP',
|
||||
label: 'Contact person',
|
||||
},
|
||||
{
|
||||
value: 'EP',
|
||||
label: 'Emergency contact person',
|
||||
},
|
||||
{
|
||||
value: 'PR',
|
||||
label: 'Person preparing referral',
|
||||
},
|
||||
{
|
||||
value: 'E',
|
||||
label: 'Employer',
|
||||
},
|
||||
{
|
||||
value: 'C',
|
||||
label: 'Emergency Contact',
|
||||
},
|
||||
{
|
||||
value: 'F',
|
||||
label: 'Federal Agency',
|
||||
},
|
||||
{
|
||||
value: 'I',
|
||||
label: 'Insurance Company',
|
||||
},
|
||||
{
|
||||
value: 'N',
|
||||
label: 'Next-of-Kin',
|
||||
},
|
||||
{
|
||||
value: 'S',
|
||||
label: 'State Agency',
|
||||
},
|
||||
{
|
||||
value: 'U',
|
||||
label: 'Unknown',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<ListElement name="telecom">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index">
|
||||
<SelectElement name="system" :items="[
|
||||
{
|
||||
value: 'phone',
|
||||
label: '📞',
|
||||
},
|
||||
{
|
||||
value: 'email',
|
||||
label: '📧',
|
||||
},
|
||||
{
|
||||
value: 'url',
|
||||
label: '🌐',
|
||||
},
|
||||
]" :search="true" :native="false" input-type="search" autocomplete="off" :can-deselect="false"
|
||||
:can-clear="false" default="phone" :columns="{
|
||||
default: {
|
||||
container: 2,
|
||||
},
|
||||
sm: {
|
||||
container: 1,
|
||||
},
|
||||
}" :caret="false" />
|
||||
<SelectElement name="use" :items="[
|
||||
{
|
||||
value: 'home',
|
||||
label: '🏠',
|
||||
},
|
||||
{
|
||||
value: 'mobile',
|
||||
label: '📱',
|
||||
},
|
||||
{
|
||||
value: 'work',
|
||||
label: '🏢',
|
||||
},
|
||||
]" :search="true" :native="false" input-type="search" autocomplete="off" :columns="{
|
||||
default: {
|
||||
container: 2,
|
||||
},
|
||||
sm: {
|
||||
container: 1,
|
||||
},
|
||||
}" :caret="false" :can-deselect="false" :can-clear="false" default="home" />
|
||||
<GroupElement name="value" :columns="{
|
||||
default: {
|
||||
container: 8,
|
||||
},
|
||||
sm: {
|
||||
container: 10,
|
||||
},
|
||||
}">
|
||||
<PhoneElement name="phone" :allow-incomplete="true" :unmask="true" default="+62"
|
||||
:conditions="[['telecom.*.system', 'in', ['phone']]]" />
|
||||
<TextElement name="email" input-type="email" :rules="['nullable', 'email']" placeholder="eg. example@mail.com"
|
||||
:conditions="[['telecom.*.system', 'in', ['email']]]" />
|
||||
<TextElement name="url" input-type="url" :rules="['nullable', 'url']" placeholder="eg. http(s)://domain.com"
|
||||
:floating="false" :conditions="[['telecom.*.system', 'in', ['url']]]" />
|
||||
</GroupElement>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const checkbox = ref(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row class="d-flex mb-3">
|
||||
<v-col cols="12">
|
||||
<v-label class="font-weight-bold mb-1">Username</v-label>
|
||||
<v-text-field variant="outlined" density="compact" hide-details color="primary"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-label class="font-weight-bold mb-1">Password</v-label>
|
||||
<v-text-field variant="outlined" density="compact" type="password" hide-details color="primary"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" class="pt-0">
|
||||
<div class="d-flex flex-wrap align-center">
|
||||
<v-checkbox v-model="checkbox" color="primary" hide-details>
|
||||
<template v-slot:label class="text-body-1">Remeber this Device</template>
|
||||
</v-checkbox>
|
||||
<div class="ml-sm-auto">
|
||||
<NuxtLink to="/"
|
||||
class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium">Forgot
|
||||
Password ?</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" class="pt-0">
|
||||
<v-btn to="/" color="primary" size="large" block flat>Sign in</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const checkbox = ref(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row class="d-flex mb-3">
|
||||
<v-col cols="12">
|
||||
<v-label class="font-weight-bold mb-1">Name</v-label>
|
||||
<v-text-field variant="outlined" density="compact" hide-details color="primary"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-label class="font-weight-bold mb-1">Email Address</v-label>
|
||||
<v-text-field variant="outlined" density="compact" type="email" hide-details color="primary"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-label class="font-weight-bold mb-1">Password</v-label>
|
||||
<v-text-field variant="outlined" type="password" density="compact" hide-details color="primary"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" >
|
||||
<v-btn to="/" color="primary" size="large" block flat>Sign up</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<TextElement name="name" label="Name" @change="onChange" />
|
||||
</div>
|
||||
ini nama
|
||||
<GroupElement name="column_2" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<CobaPassword />
|
||||
</GroupElement>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const onChange = (el$) => {
|
||||
console.log(el$)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
|
||||
<TextElement name="email2" label="Email" @change="onChange" />
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const parsedName = ref({})
|
||||
const onChange = (newValue, oldValue, el$) => {
|
||||
console.log(el$.$parent)
|
||||
// console.log(option)
|
||||
// const i = parseInt(el$.$parent.$parent.path.split('.')[1])
|
||||
// parsedName.value[i] = parseName(el$.$parent.$parent.children$.text.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { BlogCardData } from '@/data/dashboard/dashboardData';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="4" v-for="card in BlogCardData" :key="card.title">
|
||||
<v-card elevation="10" rounded="md" class="card-hover">
|
||||
<div>
|
||||
<v-img :src="card.coveravatar" height="250px" cover class="rounded-t-md align-end text-right">
|
||||
<v-card-item
|
||||
><v-chip class="bg-surface text-body-2 font-weight-medium" size="small" rounded="sm" v-text="card.read"></v-chip
|
||||
></v-card-item>
|
||||
</v-img>
|
||||
<v-avatar size="40" class="mt-n7 mx-6">
|
||||
<img :src="card.avatar" alt="icon" height="40" />
|
||||
</v-avatar>
|
||||
<v-card-item class="pt-4">
|
||||
<v-chip class="text-body-2 font-weight-medium bg-grey100" size="small" rounded="sm" v-text="card.category"></v-chip>
|
||||
<h5 class="text-h5 text-13 my-6 custom-text-primary">
|
||||
<NuxtLink class="text-decoration-none color-inherits custom-title" :to="card.link">{{ card.title }}</NuxtLink>
|
||||
</h5>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<v-avatar class="" size="18">
|
||||
<EyeIcon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 text-textSecondary" v-text="card.view"></span>
|
||||
<v-avatar class="ml-4" size="18">
|
||||
<Message2Icon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 text-textSecondary" v-text="card.comments"></span>
|
||||
</div>
|
||||
<div>
|
||||
<v-avatar size="10">
|
||||
<CircleIcon size="10" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-2 ml-2 text-textSecondary" v-text="card.time"></span>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { DailyActivitiesData } from '@/data/dashboard/dashboardData';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Daily activities</v-card-title>
|
||||
<div class="daily-activities mt-8 px-3">
|
||||
<div v-for="list in DailyActivitiesData" :key="list.title">
|
||||
<v-row class="d-flex mb-1">
|
||||
<v-col cols="4" lg="3" md="auto" sm="auto" class="px-0 pt-0 pb-0 d-flex align-start">
|
||||
<p class="text-body-1 text-textSecondary text-no-wrap">{{ list.title }}</p>
|
||||
</v-col>
|
||||
<v-col cols="1" sm="1" class="px-0 text-center pt-0 pb-0 mt-1">
|
||||
<Icon icon="tabler:circle-filled" size="13" :class="'text-' + list.textcolor" />
|
||||
<div v-if="list.line" class="line mx-auto bg-grey100"></div>
|
||||
</v-col>
|
||||
<v-col cols="7" sm="8" class="pt-0 pb-0">
|
||||
<h6 v-if="list.boldtext" class="text-body-1 text-textPrimary">{{ list.subtitle }}</h6>
|
||||
<p v-else class="text-body-1 text-textPrimary">{{ list.subtitle }}</p>
|
||||
<div class="mt-n1">
|
||||
<NuxtLink :to="list.url" class="text-body-1 text-primary text-decoration-none" v-if="list.link">{{
|
||||
list.link
|
||||
}}</NuxtLink>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex ga-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lightsecondary">
|
||||
<Icon icon="solar:football-outline" class="text-secondary" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">New Customers</h6>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center justify-space-between mb-3 mt-12">
|
||||
<h5 class="text-textPrimary text-subtitle-1 font-weight-medium">New Goals</h5>
|
||||
<div class="text-textPrimary text-subtitle-1 font-weight-medium">83%</div>
|
||||
</div>
|
||||
<v-progress-linear model-value="83" height="7" color="secondary" bg-color="lightsecondary" rounded></v-progress-linear>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
const select = ref('Sept 2025');
|
||||
const items = ref(['Sept 2025', 'Oct 2025', 'Nov 2025']);
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
type: 'bar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 285,
|
||||
stacked: true,
|
||||
offsetX: -15
|
||||
},
|
||||
colors: ['rgba(var(--v-theme-primary))', 'rgba(var(--v-theme-error))'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '15%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
},
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep'],
|
||||
labels: {
|
||||
style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '2025',
|
||||
data: [1.2, 2.7, 1, 3.6, 2.1, 2.7, 2.2, 1.3, 2.5]
|
||||
},
|
||||
{
|
||||
name: '2023',
|
||||
data: [-2.8, -1.1, -2.5, -1.5, -2.3, -1.9, -1, -2.1, -1.3]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-md-flex justify-space-between mb-mb-0 mb-3">
|
||||
<v-card-title class="text-h5">Revenue Forecast</v-card-title>
|
||||
<div>
|
||||
<v-select
|
||||
v-model="select"
|
||||
:items="items"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="text-body-1"
|
||||
hide-details
|
||||
></v-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-n1 mt-4 pt-2">
|
||||
<apexchart type="bar" height="285" class="rounded-bars" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { RevenueProjectsData } from '@/data/dashboard/dashboardData';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="revenue-products">
|
||||
<v-card-item class="pb-4">
|
||||
<div class="d-flex ga-3 align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Revenue by Product</v-card-title>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<v-table class="revenue-table">
|
||||
<template v-slot:default>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-body-1">Assigned</th>
|
||||
<th class="text-body-1">Progress</th>
|
||||
<th class="text-body-1">Priority</th>
|
||||
<th class="text-body-1">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in RevenueProjectsData" :key="item.leadname" class="month-item">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="48" rounded="md"> <img :src="item.img" :alt="item.img" width="48" /></v-avatar>
|
||||
<div class="mx-3">
|
||||
<h6 class="text-subtitle-1 text-no-wrap font-weight-medium">{{ item.leadname }}</h6>
|
||||
<span class="text-body-1 text-no-wrap text-textSecondary">{{ item.designation }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-no-wrap text-body-1 text-textSecondary">
|
||||
{{ item.projectname }}
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip rounded="sm" class="font-weight-semibold" :color="item.statuscolor" size="small" label>{{
|
||||
item.statustext
|
||||
}}</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1">{{ item.money }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-table>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'line',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors:['rgba(var(--v-theme-error))'],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Income',
|
||||
data: [30, 25, 35, 20, 30, 40]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex ga-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lighterror">
|
||||
<Icon icon="solar:box-linear" class="text-error" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">Total Income</h6>
|
||||
</div>
|
||||
<v-row class="mt-6">
|
||||
<v-col cols="6">
|
||||
<h3 class="text-h3 heading">$680</h3>
|
||||
<div class="text-success text-subtitle-2 font-weight-medium mt-2">+18%</div>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<apexchart type="line" height="60" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, shallowRef, watch } from 'vue';
|
||||
import { useDisplay } from "vuetify";
|
||||
import sidebarItems from "@/components/layout/full/vertical-sidebar/sidebarItem";
|
||||
import { Menu2Icon } from "vue-tabler-icons";
|
||||
|
||||
const sidebarMenu = shallowRef(sidebarItems);
|
||||
|
||||
const { mdAndDown } = useDisplay();
|
||||
const sDrawer = ref(true);
|
||||
onMounted(() => {
|
||||
sDrawer.value = !mdAndDown.value; // hide on mobile, show on desktop
|
||||
});
|
||||
watch(mdAndDown, (val) => {
|
||||
sDrawer.value = !val;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!------Sidebar-------->
|
||||
<v-navigation-drawer left elevation="0" app v-model="sDrawer">
|
||||
<!---Logo part -->
|
||||
<div class="pa-5">
|
||||
<LayoutFullLogo />
|
||||
</div>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---Navigation -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div>
|
||||
<perfect-scrollbar class="scrollnavbar">
|
||||
<v-list class="pa-6 pt-0">
|
||||
<!---Menu Loop -->
|
||||
<template v-for="(item, i) in sidebarMenu">
|
||||
<!---Item Sub Header -->
|
||||
<LayoutFullVerticalSidebarNavGroup :item="item" v-if="item.header" :key="item.title" />
|
||||
|
||||
<!---If Has Child -->
|
||||
<LayoutFullVerticalSidebarNavCollapse class="leftPadding" :item="item" :level="0"
|
||||
v-else-if="item.children" />
|
||||
|
||||
<!---Single Item-->
|
||||
<LayoutFullVerticalSidebarNavItem :item="item" v-else class="leftPadding" />
|
||||
<!---End Single Item-->
|
||||
</template>
|
||||
</v-list>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
</v-navigation-drawer>
|
||||
<!------Header-------->
|
||||
<v-app-bar elevation="0" height="70" class="top-header">
|
||||
<div class="d-flex align-center justify-space-between w-100">
|
||||
<div>
|
||||
<v-btn class="hidden-lg-and-up ms-md-3 text-muted" @click="sDrawer = !sDrawer" icon variant="flat"
|
||||
size="small">
|
||||
<Menu2Icon size="20" stroke-width="1.5" />
|
||||
</v-btn>
|
||||
<!-- Notification -->
|
||||
<LayoutFullVerticalHeaderNotificationDD />
|
||||
</div>
|
||||
<div>
|
||||
<LayoutFullVerticalHeaderProfileDD />
|
||||
</div>
|
||||
</div>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
@@ -0,0 +1,144 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
import icon1 from "/images/technology/vue-cat-icon.svg";
|
||||
import icon2 from "/images/technology/angular-cat-icon.svg";
|
||||
import icon3 from "/images/technology/next-cat-icon.svg";
|
||||
import icon4 from "/images/technology/react-cat-icon.svg";
|
||||
import icon5 from "/images/technology/nuxt-cat-icon.svg";
|
||||
import icon6 from "/images/technology/bt-cat-icon.svg";
|
||||
|
||||
const items = [
|
||||
{
|
||||
text: "Templates",
|
||||
icon: "window-frame-linear",
|
||||
url: "https://adminmart.com/templates/nuxtjs/",
|
||||
},
|
||||
{
|
||||
text: "Help",
|
||||
icon: "question-circle-linear",
|
||||
url: "https://adminmart.com/support/",
|
||||
},
|
||||
{
|
||||
text: "Hire Us",
|
||||
icon: "case-round-linear",
|
||||
url: "https://adminmart.com/hire-us/",
|
||||
},
|
||||
];
|
||||
|
||||
const preview_link = [
|
||||
{
|
||||
title: "Nuxtjs Preview",
|
||||
img: icon5,
|
||||
url: "https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=56#product-demo-section",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Angular Preview",
|
||||
img: icon2,
|
||||
url: "https://adminmart.com/product/matdash-material-angular-dashboard-template/?ref=56#product-demo-section",
|
||||
},
|
||||
{
|
||||
title: "Nextjs Preview",
|
||||
img: icon3,
|
||||
url: "https://adminmart.com/product/matdash-next-js-admin-dashboard-template/?ref=56#product-demo-section",
|
||||
},
|
||||
{
|
||||
title: "VueJs Version",
|
||||
img: icon1,
|
||||
url: "https://adminmart.com/product/matdash-vuejs-admin-dashboard/?ref=56#product-demo-section",
|
||||
},
|
||||
{
|
||||
title: "Reactjs Preview",
|
||||
img: icon4,
|
||||
url: "https://adminmart.com/product/matdash-tailwind-react-admin-template/?ref=56#product-demo-section",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Bootstrap Preview",
|
||||
img: icon6,
|
||||
url: "https://adminmart.com/product/matdash-bootstrap-5-admin-dashboard-template/?ref=56#product-demo-section",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<div class="feature-topbar w-full py-4 px-6 w-100">
|
||||
<div
|
||||
class="d-flex flex-lg-row flex-column ga-3 justify-space-between align-center"
|
||||
>
|
||||
<div class="d-flex align-center ga-6">
|
||||
<a href="https://adminmart.com/" target="_blank" class="lh-0">
|
||||
<img src="/images/logos/logo-adminmart.svg" width="148"
|
||||
/></a>
|
||||
<div
|
||||
class="d-lg-flex d-none items-center ga-4 topbar-links border-s border-opacity-25 ps-6"
|
||||
>
|
||||
<a
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
class="d-flex items-center p-0 ga-2 lh-normal"
|
||||
variant="text"
|
||||
:href="item.url"
|
||||
target="_blank"
|
||||
>
|
||||
<Icon :icon="'solar:' + item.icon" height="20" width="20" />
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-md-row flex-column align-center ga-4">
|
||||
<h5
|
||||
class="text-subtitle-1 font-weight-bold text-linear-gradient text-uppercase"
|
||||
>
|
||||
Checkout Pro Version
|
||||
</h5>
|
||||
<div
|
||||
class="d-flex flex-md-row flex-wrap justify-md-end justify-center ga-3"
|
||||
>
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
variant="outlined"
|
||||
class="border-blue text-surface text-h6 font-weight-medium"
|
||||
rounded="sm"
|
||||
v-bind="props"
|
||||
>
|
||||
<span class="d-flex ga-2">
|
||||
Live Preview <ChevronDownIcon size="20" />
|
||||
</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list density="compact" elevation="10" class="pa-3">
|
||||
<v-list-item
|
||||
v-for="(item, index) in preview_link"
|
||||
:key="index"
|
||||
:value="index"
|
||||
:href="item.url"
|
||||
target="_blank"
|
||||
>
|
||||
<v-list-item-title
|
||||
class="d-flex align-center ga-3 text-h6 font-weight-regular"
|
||||
>
|
||||
<img :src="item.img" width="18" :alt="item.img" />
|
||||
{{ item.title }}</v-list-item-title
|
||||
>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn
|
||||
class="text-surface text-h6 font-weight-medium"
|
||||
rounded="sm"
|
||||
color="primary"
|
||||
href="https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=56#product-demo-section"
|
||||
target="_blank"
|
||||
>
|
||||
<span class="d-flex ga-2">
|
||||
<Icon icon="solar:crown-linear" height="18" width="18" /> Get
|
||||
Pro</span
|
||||
>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<LayoutFullLogoDark />
|
||||
</template>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import Logoimg from "/images/logos/logo.svg";
|
||||
</script>
|
||||
<template>
|
||||
<div class="logo">
|
||||
<NuxtLink to="/">
|
||||
<img :src="Logoimg" alt="home" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-btn icon class="custom-hover-primary" size="small" variant="text" rounded="circle" color="primary" >
|
||||
<v-badge dot color="primary" offset-x="-5" offset-y="-3">
|
||||
<Icon icon="solar:bell-bing-line-duotone" height="22" />
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { UserIcon, MailIcon, ListCheckIcon } from 'vue-tabler-icons';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- notifications DD -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<v-menu :close-on-content-click="false">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn class="profileBtn custom-hover-primary" variant="text" rounded="circle" v-bind="props" icon>
|
||||
<v-avatar size="35">
|
||||
<img src="/images/profile/user-1.jpg" height="35" alt="user" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-sheet rounded="md" width="200" elevation="10" class="mt-2">
|
||||
<v-list class="py-0" lines="one" density="compact">
|
||||
<v-list-item value="item1" active-color="primary" >
|
||||
<template v-slot:prepend>
|
||||
<UserIcon stroke-width="1.5" size="20"/>
|
||||
</template>
|
||||
<v-list-item-title class="pl-4 text-body-1">My Profile</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item value="item2" active-color="primary">
|
||||
<template v-slot:prepend>
|
||||
<MailIcon stroke-width="1.5" size="20"/>
|
||||
</template>
|
||||
<v-list-item-title class="pl-4 text-body-1">My Account</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item value="item3" active-color="primary">
|
||||
<template v-slot:prepend>
|
||||
<ListCheckIcon stroke-width="1.5" size="20"/>
|
||||
</template>
|
||||
<v-list-item-title class="pl-4 text-body-1">My Task</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div class="pt-4 pb-4 px-5 text-center">
|
||||
<v-btn to="/auth/login" color="primary" variant="outlined" block>Logout</v-btn>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</template>
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
const props = defineProps({ item: Object, level: Number });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-0">
|
||||
<!---Single Item-->
|
||||
<v-list-item
|
||||
:href="item.external ? item.to : undefined"
|
||||
:to="!item.external ? item.to : undefined"
|
||||
rounded="lg"
|
||||
class=""
|
||||
color=""
|
||||
:ripple="false"
|
||||
:disabled="item.disabled"
|
||||
:target="item.external === true ? '_blank' : undefined"
|
||||
>
|
||||
<!---If icon-->
|
||||
<template v-slot:prepend>
|
||||
<Icon
|
||||
:icon="'solar:' + item.icon"
|
||||
height="18"
|
||||
width="18"
|
||||
:level="level"
|
||||
class="dot"
|
||||
:class="'text-' + item.BgColor"
|
||||
/>
|
||||
</template>
|
||||
<v-list-item-title class="text-body-1 text-darkText">{{
|
||||
item.title
|
||||
}}</v-list-item-title>
|
||||
<!---If Caption-->
|
||||
<v-list-item-subtitle
|
||||
v-if="item.subCaption"
|
||||
class="text-caption mt-n1 hide-menu"
|
||||
>
|
||||
{{ item.subCaption }}
|
||||
</v-list-item-subtitle>
|
||||
|
||||
<!---If any chip or label-->
|
||||
<template v-slot:append v-if="item.chip">
|
||||
<v-chip
|
||||
color="secondary"
|
||||
class="font-weight-bold"
|
||||
size="x-small"
|
||||
rounded="sm"
|
||||
>
|
||||
{{ item.chip }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
const props = defineProps({ item: Object, level: Number });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="level > 0">
|
||||
<component
|
||||
:is="item"
|
||||
size="5"
|
||||
fill="currentColor"
|
||||
stroke-width="1.5"
|
||||
class="iconClass"
|
||||
></component>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component
|
||||
:is="item"
|
||||
size="20"
|
||||
stroke-width="1.5"
|
||||
class="iconClass"
|
||||
></component>
|
||||
</template>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup>
|
||||
import { Icon } from "@iconify/vue";
|
||||
const props = defineProps({ item: Object, level: Number });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---Item Childern -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="mb-1">
|
||||
<v-list-group no-action>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---Dropdown -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:value="item.title"
|
||||
:ripple="false"
|
||||
|
||||
>
|
||||
<!---Icon -->
|
||||
<template v-slot:prepend>
|
||||
<Icon :icon="'solar:' + item.icon" height="18" width="18" :level="level" class="dot" :class="'text-' + item.BgColor" />
|
||||
</template>
|
||||
<!---Title -->
|
||||
<v-list-item-title class="mr-auto">{{ item.title}}</v-list-item-title>
|
||||
<!---If Caption-->
|
||||
<v-list-item-subtitle
|
||||
v-if="item.subCaption"
|
||||
class="text-caption mt-n1 hide-menu"
|
||||
>
|
||||
{{ item.subCaption }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---Sub Item-->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="sublinks">
|
||||
<template
|
||||
v-for="(subitem, i) in item.children"
|
||||
:key="i"
|
||||
v-if="item.children"
|
||||
>
|
||||
<LayoutFullVerticalSidebarNavCollapse
|
||||
:item="subitem"
|
||||
v-if="subitem.children"
|
||||
:level="level + 1"
|
||||
/>
|
||||
<LayoutFullVerticalSidebarDropdown
|
||||
:item="subitem"
|
||||
:level="level + 1"
|
||||
v-else
|
||||
></LayoutFullVerticalSidebarDropdown>
|
||||
</template>
|
||||
</div>
|
||||
</v-list-group>
|
||||
</div>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---End Item Sub Header -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script setup>
|
||||
const props = defineProps({ item: Object });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-list-subheader color="darkText" class="smallCap text-uppercase text-subtitle-2 mt-5 font-weight-bold mini-text">{{ props.item.header}}</v-list-subheader>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
import { Icon } from '@iconify/vue';
|
||||
const props = defineProps({ item: Object, level: Number });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!---Single Item-->
|
||||
<v-list-item
|
||||
:href="item.external ? item.to : undefined"
|
||||
:to="!item.external ? item.to : undefined"
|
||||
rounded
|
||||
class="mb-1"
|
||||
:disabled="item.disabled"
|
||||
:target="item.external === true ? '_blank' : undefined">
|
||||
<!---If icon-->
|
||||
<template v-slot:prepend>
|
||||
<Icon :icon="'solar:' + item.icon" height="18" width="18" :level="level" class="dot" :class="'text-' + item.BgColor"/>
|
||||
</template>
|
||||
<v-list-item-title>{{item.title}}</v-list-item-title>
|
||||
<!---If Caption-->
|
||||
<v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
|
||||
{{ item.subCaption }}
|
||||
</v-list-item-subtitle>
|
||||
<!---If any chip or label-->
|
||||
<template v-slot:append v-if="item.chip">
|
||||
<v-chip color="secondary" class="font-weight-bold" size="x-small" rounded="sm">
|
||||
{{ item.chip }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
<template>
|
||||
<v-sheet rounded="md" color="lightprimary" class="ExtraBox hide-menu mx-1 px-4 py-3">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<h6 class="text-h6 text-10 mb-3">Check Pro Version</h6>
|
||||
<v-btn href="https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=56#product-demo-section" target="_blank" color="primary" flat>Check</v-btn>
|
||||
</div>
|
||||
<div class="position-relative me-n8">
|
||||
<img src="/images/backgrounds/rupee.png" height="90" width="90" />
|
||||
</div>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
export interface menu {
|
||||
header?: string;
|
||||
title?: string;
|
||||
icon?: any;
|
||||
to?: string;
|
||||
chip?: string;
|
||||
BgColor?: string;
|
||||
chipBgColor?: string;
|
||||
chipColor?: string;
|
||||
chipVariant?: string;
|
||||
chipIcon?: string;
|
||||
children?: menu[];
|
||||
disabled?: boolean;
|
||||
type?: string;
|
||||
subCaption?: string;
|
||||
external?: boolean;
|
||||
}
|
||||
|
||||
const sidebarItem: menu[] = [
|
||||
{ header: "Home" },
|
||||
{
|
||||
title: "Dashboard",
|
||||
icon: "adhesive-plaster-outline",
|
||||
to: "/",
|
||||
},
|
||||
{
|
||||
title: "Front Pages",
|
||||
icon: "home-angle-linear",
|
||||
to: "/front",
|
||||
children: [
|
||||
{
|
||||
title: "Coba VueForm",
|
||||
to: "/coba",
|
||||
external: false,
|
||||
},
|
||||
{
|
||||
title: "Coba VueForm2",
|
||||
to: "/coba2",
|
||||
external: false,
|
||||
},
|
||||
{
|
||||
title: "Homepage",
|
||||
to: "https://matdash-nuxt-main.netlify.app/front-pages/homepage",
|
||||
chip: "Pro",
|
||||
external: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ header: "utilities" },
|
||||
{
|
||||
title: "Typography",
|
||||
icon: "text-circle-outline",
|
||||
to: "/ui/typography",
|
||||
},
|
||||
{
|
||||
title: "Shadow",
|
||||
icon: "watch-square-minimalistic-charge-line-duotone",
|
||||
to: "/ui/shadow",
|
||||
},
|
||||
|
||||
{ header: "Pages" },
|
||||
{
|
||||
title: "Sample Page",
|
||||
icon: "planet-3-line-duotone",
|
||||
to: "/sample-page",
|
||||
},
|
||||
|
||||
|
||||
{ header: "Ui" },
|
||||
{
|
||||
title: "Alert",
|
||||
icon: "volume-small-broken",
|
||||
to: "/ui-components/alerts",
|
||||
},
|
||||
{
|
||||
title: "Button",
|
||||
icon: "tag-horizontal-outline",
|
||||
to: "/ui-components/buttons",
|
||||
},
|
||||
{
|
||||
title: "Cards",
|
||||
icon: "cardholder-linear",
|
||||
to: "/ui-components/cards",
|
||||
},
|
||||
{
|
||||
title: "Tables",
|
||||
icon: "suspension-outline",
|
||||
to: "/ui-components/tables",
|
||||
},
|
||||
|
||||
{ header: "auth" },
|
||||
{
|
||||
title: "Login",
|
||||
icon: "login-3-line-duotone",
|
||||
to: "/auth/login",
|
||||
},
|
||||
{
|
||||
title: "Register",
|
||||
icon: "user-plus-rounded-line-duotone",
|
||||
to: "/auth/register",
|
||||
},
|
||||
{ header: "Extra" },
|
||||
{
|
||||
title: "Tabler Icons",
|
||||
icon: "sticker-smile-circle-2-line-duotone",
|
||||
to: "/icons",
|
||||
},
|
||||
];
|
||||
|
||||
export default sidebarItem;
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<!-- Card with Header & Footer -->
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<v-card variant="outlined" elevation="0" >
|
||||
<v-card-item>
|
||||
<v-card-title class="text-18">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<slot name="footer" />
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card variant="outlined">
|
||||
<v-card-item class="py-4 px-6">
|
||||
<v-card-title class="text-h5 mb-0">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider />
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
// ===============================|| Ui Parent Card||=============================== //
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-sm-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5 mb-0">{{ title }}</v-card-title>
|
||||
<slot name="action"></slot>
|
||||
<!-- </template> -->
|
||||
</div>
|
||||
</v-card-item>
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Logo from "@/layouts/full/logo/Logo.vue";
|
||||
</script>
|
||||
|
||||
// ===============================|| Ui Parent Card||=============================== //
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-sm-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5"><Logo/></v-card-title>
|
||||
<!-- <template v-slot:append> -->
|
||||
<slot name="action"></slot>
|
||||
<!-- </template> -->
|
||||
</div>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Card -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<v-card variant="outlined" elevation="0" >
|
||||
<v-card-item>
|
||||
<v-card-title class="text-18">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<slot />
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
// const props = defineProps({
|
||||
// title: String,
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-text-field color="primary"><slot /></v-text-field>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<!-- Card with Header & Footer -->
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<v-card variant="outlined" elevation="0" class=" mb-6 overflow-hidden">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-18">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
hideaction: Boolean
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<!-- Card with Header & Footer -->
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<v-card variant="outlined" elevation="0" class=" mb-6 overflow-hidden">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-18">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<slot />
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions :class="`${hideaction ? 'd-none' : ''}`">
|
||||
<slot name="footer" />
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
</script>
|
||||
<template>
|
||||
<UiParentCard title="Shadow">
|
||||
<v-row justify="center" class="mb-5 mt-1 px-8 px-3">
|
||||
<v-col v-for="(m, n) in 25" :key="n" cols="6" sm="auto">
|
||||
<v-card
|
||||
:class="['d-flex justify-center align-center bg-primary py-sm-4 py-3 px-sm-8 px-4', `elevation-${n}`]">
|
||||
<div>{{ n }}</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiParentCard>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const colortext = ref(
|
||||
[
|
||||
['Text Primary', 'text-primary text-h5','text-primary text-subtitle-1 mt-1'],
|
||||
['Text Secondary', 'text-secondary text-h5','text-secondary text-subtitle-1 mt-1'],
|
||||
['Text Info', 'text-info text-h5','text-info text-subtitle-1 mt-1'],
|
||||
['Text Warning', 'text-warning text-h5','text-warning text-subtitle-1 mt-1'],
|
||||
['Text Error', 'text-error text-h5','text-error text-subtitle-1 mt-1'],
|
||||
['Text Success', 'text-success text-h5','text-success text-subtitle-1 mt-1'],
|
||||
]
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
|
||||
<div class="mb-6" v-for="[name1, cls1,cls2] in colortext" :key="name1" >
|
||||
<v-card elevation="10" >
|
||||
<div class="py-6 px-4">
|
||||
<h5 :class="[cls1, '']">{{ name1 }} </h5>
|
||||
<div :class="[cls2, '']">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const headings = ref([
|
||||
['h1.Heading', 'text-h1', 'font size: 30 | line-height: 45 | font weight: 500'],
|
||||
['h2.Heading', 'text-h2', 'font size: 24 | line-height: 36 | font weight: 500'],
|
||||
['h3.Heading', 'text-h3', 'font size: 21 | line-height: 31.5 | font weight: 500'],
|
||||
['h4.Heading', 'text-h4', 'font size: 18 | line-height: 27 | font weight: 500'],
|
||||
['h5.Heading', 'text-h5', 'font size: 16 | line-height: 24 | font weight: 500'],
|
||||
['h6.Heading', 'text-h6', 'font size: 14 | line-height: 21 | font weight: 500'],
|
||||
]);
|
||||
|
||||
const subtext = ref(
|
||||
[
|
||||
['Subtitle 1.', 'text-subtitle-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 28 | font weight: 400'],
|
||||
['Subtitle 2.', 'text-subtitle-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 21 | font weight: 400'],
|
||||
['Body 1.', 'text-body-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 24 | font weight: 400'],
|
||||
['Body 2.', 'text-body-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 20 | font weight: 400'],
|
||||
['Caption.', 'text-caption', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 19 | font weight: 400'],
|
||||
['OVERLINE.', 'text-overline letter-spacing-0', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 31 | font weight: 400']
|
||||
]
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
|
||||
<div class="mb-6" v-for="[name, cls, val] in headings" :key="name">
|
||||
<v-card elevation="10">
|
||||
<div class="py-6 px-4">
|
||||
<div :class="[cls, '']">{{ name }}</div>
|
||||
<div class="text-body-1">
|
||||
<div class="text-muted">{{ val }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
|
||||
<div class="mb-6" v-for="[name1, cls1, val1, prop] in subtext" :key="name1">
|
||||
<v-card elevation="10">
|
||||
<div class="py-6 px-4">
|
||||
<div :class="[cls1, '']">{{ name1 }} <span>{{ val1 }}</span></div>
|
||||
<div class="text-body-1 ">
|
||||
<div class="text-muted">{{ prop }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<v-alert class="mb-3 " color="error" variant="tonal">This is an error alert — check it out!</v-alert>
|
||||
<v-alert class="mb-3 " color="warning" variant="tonal">This is a warning alert — check it out!</v-alert>
|
||||
<v-alert class="mb-3 " color="info" variant="tonal">This is an info alert — check it out!</v-alert>
|
||||
<v-alert color="success" variant="tonal">This is a success alert — check it out!</v-alert>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const alert = ref(true);
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<v-alert
|
||||
v-model="alert"
|
||||
border="start"
|
||||
variant="tonal"
|
||||
closable
|
||||
close-label="Close Alert"
|
||||
color="primary"
|
||||
title="Closable Alert"
|
||||
>
|
||||
Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
|
||||
|
||||
Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non
|
||||
</v-alert>
|
||||
<div
|
||||
v-if="!alert"
|
||||
>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="alert = true" flat>
|
||||
Reset
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-alert class="mb-3" type="error">This is an error alert — check it out!</v-alert>
|
||||
<v-alert class="mb-3" type="warning">This is a warning alert — check it out!</v-alert>
|
||||
<v-alert class="mb-3" type="info">This is an info alert — check it out!</v-alert>
|
||||
<v-alert type="success">This is a success alert — check it out!</v-alert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="d-flex ga-3 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height d-flex justify-space-between">
|
||||
<v-btn >elevates (default)</v-btn>
|
||||
<v-btn variant="flat" color="primary">flat</v-btn>
|
||||
<v-btn variant="tonal" color="primary">tonal</v-btn>
|
||||
<v-btn variant="outlined" color="primary">outlined</v-btn>
|
||||
<v-btn variant="text" color="primary">text</v-btn>
|
||||
<v-btn variant="plain" color="primary">plain</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// buttons color data
|
||||
const btnsColor = ref(['primary', 'secondary', 'error', 'warning','success']);
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex ga-3 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
|
||||
<v-btn v-for="btn in btnsColor" :key="btn" :color="btn" variant="flat">
|
||||
{{ btn }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="d-flex flex-wrap justify-center ga-3 align-center flex-column flex-sm-row fill-height">
|
||||
<v-btn color="primary" icon size="x-small" flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
<v-btn color="secondary" icon size="small" flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
<v-btn color="success" icon flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
<v-btn color="error" icon size="large" flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
<v-btn color="warning" icon size="x-large" flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
<template>
|
||||
<div class="d-flex ga-3 justify-center align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
|
||||
<v-btn color="primary" variant="outlined">primary</v-btn>
|
||||
<v-btn color="secondary" variant="outlined">secondary</v-btn>
|
||||
<v-btn variant="flat" disabled>
|
||||
Disabled
|
||||
</v-btn>
|
||||
<v-btn color="info" variant="outlined">link</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="d-flex gap-2 justify-space-around align-center flex-column flex-md-row fill-height">
|
||||
<v-btn size="x-small" color="primary" flat>
|
||||
Extra small
|
||||
</v-btn>
|
||||
|
||||
<v-btn size="small" color="primary" flat>
|
||||
Small
|
||||
</v-btn>
|
||||
|
||||
<v-btn color="primary" flat>
|
||||
Normal
|
||||
</v-btn>
|
||||
|
||||
<v-btn color="primary" size="large" flat>
|
||||
Large
|
||||
</v-btn>
|
||||
|
||||
<v-btn size="x-large" color="primary" flat>
|
||||
Extra large
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// buttons color data
|
||||
const btnsColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex flex-wrap ga-3 my-2 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
|
||||
<v-btn v-for="btn in btnsColor" :key="btn" :color="btn" variant="text">
|
||||
{{ btn }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import proimg1 from '/images/blog/blog-img1.jpg';
|
||||
|
||||
const messages = ref([
|
||||
{
|
||||
from: "You",
|
||||
message: `Sure, I'll see you later.`,
|
||||
time: "10:42am",
|
||||
color: "primary",
|
||||
},
|
||||
{
|
||||
from: "John Doe",
|
||||
message: "Yeah, sure. Does 1:00pm work?",
|
||||
time: "10:37am",
|
||||
color: "secondary",
|
||||
},
|
||||
{
|
||||
from: "You",
|
||||
message: "Did you still want to grab lunch today?",
|
||||
time: "9:47am",
|
||||
color: "success",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Content Wrap -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<div class="pa-3">
|
||||
<v-row justify="space-around">
|
||||
<v-card elevation="0">
|
||||
<v-img
|
||||
height="200"
|
||||
:src='proimg1'
|
||||
cover
|
||||
class="text-white"
|
||||
>
|
||||
<v-layout full-height>
|
||||
<v-app-bar
|
||||
density="comfortable"
|
||||
color="rgba(0, 0, 0, 0)"
|
||||
flat
|
||||
theme="dark"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-app-bar-nav-icon></v-app-bar-nav-icon>
|
||||
</template>
|
||||
|
||||
<v-toolbar-title class="text-subtitle-1"> Messages </v-toolbar-title>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-icon icon="mdi-dots-vertical"></v-icon>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
</v-layout>
|
||||
</v-img>
|
||||
|
||||
<v-card-text>
|
||||
<div class="font-weight-bold ml-1 mb-2">Today</div>
|
||||
|
||||
<v-timeline density="compact">
|
||||
<v-timeline-item
|
||||
v-for="message in messages"
|
||||
:key="message.time"
|
||||
:dot-color="message.color"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<div class="font-weight-normal">
|
||||
<strong>{{ message.from }}</strong> @{{ message.time }}
|
||||
</div>
|
||||
<div>{{ message.message }}</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import proimg2 from '/images/blog/blog-img3.jpg';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Media -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
|
||||
<v-card elevation="0">
|
||||
<v-img
|
||||
class="align-end text-white"
|
||||
height="200"
|
||||
:src='proimg2'
|
||||
cover
|
||||
>
|
||||
<v-card-title>Top 10 Australian beaches</v-card-title>
|
||||
</v-img>
|
||||
|
||||
<v-card-subtitle class="pt-4"> Number 10 </v-card-subtitle>
|
||||
|
||||
<v-card-text>
|
||||
<div>Whitehaven Beach</div>
|
||||
|
||||
<div>Whitsunday Island, Whitsunday Islands</div>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn color="orange"> Share </v-btn>
|
||||
|
||||
<v-btn color="orange"> Explore </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Props -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<v-card elevation="0"
|
||||
title="This is a title"
|
||||
subtitle="This is a subtitle"
|
||||
text="This is content"
|
||||
></v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Props -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<v-card elevation="0">
|
||||
<template v-slot:title> This is a title </template>
|
||||
|
||||
<template v-slot:subtitle> This is a subtitle </template>
|
||||
|
||||
<template v-slot:text> This is content </template></v-card
|
||||
>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Twiteter -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<v-card
|
||||
class="mx-auto"
|
||||
color="#26c6da"
|
||||
theme="dark"
|
||||
max-width="450"
|
||||
prepend-icon="mdi-twitter"
|
||||
title="Twitter"
|
||||
elevation="0"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="x-large"></v-icon>
|
||||
</template>
|
||||
|
||||
<v-card-text class="text-h5 py-2">
|
||||
"Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-list-item class="w-100">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar
|
||||
color="grey-darken-3"
|
||||
image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
|
||||
></v-avatar>
|
||||
</template>
|
||||
|
||||
<v-list-item-title>Evan You</v-list-item-title>
|
||||
|
||||
<v-list-item-subtitle>Vue Creator</v-list-item-subtitle>
|
||||
|
||||
<template v-slot:append>
|
||||
<div class="justify-self-end">
|
||||
<v-icon class="me-1" icon="mdi-heart"></v-icon>
|
||||
<span class="subheading me-2">256</span>
|
||||
<span class="me-1">·</span>
|
||||
<v-icon class="me-1" icon="mdi-share-variant"></v-icon>
|
||||
<span class="subheading">45</span>
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const labels = ref({
|
||||
0: "SU",
|
||||
1: "MO",
|
||||
2: "TU",
|
||||
3: "WED",
|
||||
4: "TH",
|
||||
5: "FR",
|
||||
6: "SA",
|
||||
});
|
||||
|
||||
const expand = ref(false);
|
||||
const time = ref(0);
|
||||
|
||||
const forecast = ref([
|
||||
{ day: "Tuesday", icon: "mdi-white-balance-sunny", temp: "24\xB0/12\xB0" },
|
||||
{ day: "Wednesday", icon: "mdi-white-balance-sunny", temp: "22\xB0/14\xB0" },
|
||||
{ day: "Thursday", icon: "mdi-cloud", temp: "25\xB0/15\xB0" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Weather -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<v-card class="mx-auto" elevation="0">
|
||||
<v-card-item title="Florida">
|
||||
<template v-slot:subtitle>
|
||||
<v-icon
|
||||
icon="mdi-alert"
|
||||
size="18"
|
||||
color="error"
|
||||
class="me-1 pb-1"
|
||||
></v-icon>
|
||||
|
||||
Extreme Weather Alert
|
||||
</template>
|
||||
</v-card-item>
|
||||
|
||||
<v-card-text class="py-0">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col
|
||||
class="text-h3"
|
||||
cols="6"
|
||||
>
|
||||
64°F
|
||||
</v-col>
|
||||
|
||||
<v-col cols="6" class="text-right">
|
||||
<v-icon
|
||||
color="error"
|
||||
icon="mdi-weather-hurricane"
|
||||
size="40"
|
||||
></v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<div class="d-flex py-3 justify-space-between">
|
||||
<v-list-item
|
||||
density="compact"
|
||||
prepend-icon="mdi-weather-windy"
|
||||
>
|
||||
<v-list-item-subtitle>123 km/h</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
density="compact"
|
||||
prepend-icon="mdi-weather-pouring"
|
||||
>
|
||||
<v-list-item-subtitle>48%</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</div>
|
||||
|
||||
<v-expand-transition>
|
||||
<div v-if="expand">
|
||||
<div class="py-2">
|
||||
<v-slider
|
||||
v-model="time"
|
||||
:max="6"
|
||||
:step="1"
|
||||
:ticks="labels"
|
||||
class="mx-4"
|
||||
color="primary"
|
||||
density="compact"
|
||||
hide-details
|
||||
show-ticks="always"
|
||||
thumb-size="10"
|
||||
></v-slider>
|
||||
</div>
|
||||
|
||||
<v-list class="bg-transparent">
|
||||
<v-list-item
|
||||
v-for="item in forecast"
|
||||
:key="item.day"
|
||||
:title="item.day"
|
||||
:append-icon="item.icon"
|
||||
:subtitle="item.temp"
|
||||
>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn @click="expand = !expand">
|
||||
{{ !expand ? 'Full Report' : 'Hide Report' }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user