first commit
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<UiParentCard title="Icons">
|
||||
<div class="pa-7 pt-0">
|
||||
<iframe src="https://tabler-icons.io/" title="Inline Frame Example" frameborder="0" width="100%" height="650"></iframe>
|
||||
</div>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import UiParentCard from "@/components/shared/UiParentCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<h5 class="text-h5 mb-3">Sample Page</h5>
|
||||
<p class="text-body-1">This is a sample page</p>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
/*-For Set Blank Layout-*/
|
||||
definePageMeta({
|
||||
layout: "blank",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="authentication">
|
||||
<v-container fluid class="pa-3">
|
||||
<v-row class="h-100vh d-flex justify-center align-center">
|
||||
<v-col cols="12" lg="4" xl="3" class="d-flex align-center">
|
||||
<v-card rounded="md" elevation="10" class="px-sm-1 px-0 withbg mx-auto" max-width="500">
|
||||
<v-card-item class="pa-sm-8">
|
||||
<div class="d-flex justify-center py-4">
|
||||
<LayoutFullLogo />
|
||||
</div>
|
||||
<div class="text-body-1 text-muted text-center mb-3">Your Social Campaigns</div>
|
||||
<AuthLoginForm />
|
||||
<h6 class="text-h6 text-muted font-weight-medium d-flex justify-center align-center mt-3">
|
||||
New to Matdash?
|
||||
<NuxtLink to="/auth/register"
|
||||
class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium pl-2">
|
||||
Create an account</NuxtLink>
|
||||
</h6>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
/*-For Set Blank Layout-*/
|
||||
definePageMeta({
|
||||
layout: "blank",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="authentication">
|
||||
<v-container fluid class="pa-3">
|
||||
<v-row class="h-100vh d-flex justify-center align-center">
|
||||
<v-col cols="12" lg="4" xl="3" class="d-flex align-center">
|
||||
<v-card rounded="md" elevation="10" class="px-sm-1 px-0 withbg mx-auto" max-width="500">
|
||||
<v-card-item class="pa-sm-8">
|
||||
<div class="d-flex justify-center py-4">
|
||||
<LayoutFullLogo />
|
||||
</div>
|
||||
<div class="text-body-1 text-muted text-center mb-3">Your Social Campaigns</div>
|
||||
<AuthRegisterForm />
|
||||
<h6 class="text-h6 text-muted font-weight-medium d-flex justify-center align-center mt-3">
|
||||
Already have an Account?
|
||||
<NuxtLink to="/auth/login"
|
||||
class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium pl-2">
|
||||
Sign In</NuxtLink>
|
||||
</h6>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
+258
@@ -0,0 +1,258 @@
|
||||
<!-- <template>
|
||||
<Vueform :format-data="formatFormData">
|
||||
|
||||
<CobaNamaUser />
|
||||
<CobaPassword />
|
||||
<ButtonElement name="submit" button-label="Simpan" :submits="true" />
|
||||
</Vueform>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const onChange = (el$) => {
|
||||
console.log(el$)
|
||||
}
|
||||
const formatFormData = ({ name, email, email2 }) => {
|
||||
console.log(`nama : ${name} || email : ${email} email2 : ${email2}`)
|
||||
}
|
||||
|
||||
const formatName = (name, value) => {
|
||||
return { [name]: value.toUpperCase() } // must return an object
|
||||
}
|
||||
|
||||
const formatEmail = (name, value) => {
|
||||
return { [name]: value.toLowerCase() } // must return an object
|
||||
}
|
||||
</script> -->
|
||||
<script setup lang="ts">
|
||||
import { FormLibAddress, FormLibContact, FormLibHumanName, FormLibTelecom } from '#components'
|
||||
// import Identifier from '../Lib/Identifier.vue'
|
||||
|
||||
const data = ref('')
|
||||
const handleResponse = (response, form$) => {
|
||||
console.log(response) // axios response
|
||||
console.log(response.status) // HTTP status code
|
||||
console.log(response.data) // response data
|
||||
|
||||
console.log(form$) // <Vueform> instance
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Vueform v-model="data" validate-on="change|step" endpoint="/api/patient/create" method="post"
|
||||
@response="handleResponse">
|
||||
<StaticElement name="identifierTitle" tag="h2" content="Nomor Identitas" />
|
||||
<FormLibIdentifier />
|
||||
<StaticElement name="divider" tag="hr" />
|
||||
<StaticElement name="personalInfoTitle" tag="h2" content="Personal Info" />
|
||||
<FormLibHumanName />
|
||||
<!-- <ListElement name="nestedList" :controls="{
|
||||
add: false,
|
||||
remove: false,
|
||||
}">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index">
|
||||
<SelectElement name="humanNameUse" :items="[
|
||||
{
|
||||
value: 'official',
|
||||
label: '👨💼 Resmi',
|
||||
},
|
||||
{
|
||||
value: 'usual',
|
||||
label: '👨🦱 Biasa',
|
||||
},
|
||||
{
|
||||
value: 'temp',
|
||||
label: '🦲 Sementara',
|
||||
},
|
||||
// {
|
||||
// value: 'nickname',
|
||||
// label: '🙋♂️ Panggilan',
|
||||
// },
|
||||
// {
|
||||
// value: 'anonymous',
|
||||
// label: '👤 Anonim',
|
||||
// },
|
||||
// {
|
||||
// value: 'old',
|
||||
// label: '💇♂️ Nama Lama',
|
||||
// },
|
||||
// {
|
||||
// value: 'maiden',
|
||||
// label: '👧 Nama Gadis',
|
||||
// },
|
||||
]" :columns="{
|
||||
default: {
|
||||
container: 5,
|
||||
},
|
||||
sm: {
|
||||
container: 3,
|
||||
},
|
||||
lg: {
|
||||
container: 2,
|
||||
},
|
||||
}" :rules="['required']" :native="false" :can-deselect="false" :can-clear="false" :close-on-select="false"
|
||||
:caret="false" default="official" />
|
||||
<TextElement name="text" :columns="{
|
||||
default: {
|
||||
container: 7,
|
||||
},
|
||||
sm: {
|
||||
container: 9,
|
||||
},
|
||||
lg: {
|
||||
container: 10,
|
||||
},
|
||||
}" placeholder="Nama Lengkap" />
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement> -->
|
||||
<GroupElement name="container2">
|
||||
<GroupElement name="column1" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<FormLibGender />
|
||||
<!-- <RadiogroupElement name="gender" view="tabs" label="Jenis Kelamin" :items="[
|
||||
{
|
||||
value: 'male',
|
||||
label: 'Laki-laki',
|
||||
},
|
||||
{
|
||||
value: 'female',
|
||||
label: 'female',
|
||||
},
|
||||
// {
|
||||
// value: 'other',
|
||||
// label: 'Lainnya',
|
||||
// },
|
||||
// {
|
||||
// value: 'unknown',
|
||||
// label: ' ',
|
||||
// },
|
||||
]" default="unknown" /> -->
|
||||
</GroupElement>
|
||||
<GroupElement name="column_2" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<ListElement name="maritalStatus" :controls="{
|
||||
add: false,
|
||||
remove: false,
|
||||
}">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index">
|
||||
<ListElement name="coding" :controls="{
|
||||
add: false,
|
||||
remove: false,
|
||||
}">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index">
|
||||
<SelectElement name="select" :items="[
|
||||
{
|
||||
value: 'UNK',
|
||||
label: 'Tidak Tahu',
|
||||
},
|
||||
{
|
||||
value: 'U',
|
||||
label: 'Belum Menikah',
|
||||
},
|
||||
{
|
||||
value: 'M',
|
||||
label: 'Menikah',
|
||||
},
|
||||
{
|
||||
value: 'D',
|
||||
label: 'Cerai Hidup',
|
||||
},
|
||||
{
|
||||
value: 'W',
|
||||
label: 'Cerai Mati',
|
||||
},
|
||||
]" :search="true" :native="false" label="Status Perkawinan" input-type="search" autocomplete="off"
|
||||
:can-deselect="false" :can-clear="false" default="UNK" />
|
||||
<HiddenElement name="system" default="http://terminology.hl7.org/CodeSystem/v3-MaritalStatus" />
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</GroupElement>
|
||||
</GroupElement>
|
||||
<SelectElement name="birthPlace" :search="true" :native="false" input-type="search" autocomplete="on" :items="[
|
||||
{
|
||||
value: 'malang',
|
||||
label: 'Malang',
|
||||
},
|
||||
{
|
||||
value: 'surabaya',
|
||||
label: 'Surabaya',
|
||||
},
|
||||
]" placeholder="Tempat Lahir" :columns="{
|
||||
sm: {
|
||||
container: 6,
|
||||
},
|
||||
lg: {
|
||||
container: 6,
|
||||
},
|
||||
}" />
|
||||
<DateElement name="birthDate" placeholder="Tanggal Lahir" :columns="{
|
||||
sm: {
|
||||
container: 6,
|
||||
},
|
||||
lg: {
|
||||
container: 6,
|
||||
},
|
||||
}" />
|
||||
<StaticElement name="divider_1" tag="hr" />
|
||||
<StaticElement name="addressTitle" tag="h2" content="Alamat" />
|
||||
<FormLibAddress class="mt" />
|
||||
|
||||
<StaticElement name="divider_2" tag="hr" />
|
||||
<StaticElement name="contactTitle" tag="h2" content="Kontak" />
|
||||
<FormLibTelecom class="mt" />
|
||||
<StaticElement name="divider_2" tag="hr" />
|
||||
<StaticElement name="contactTitle" tag="h2" content="Kontak Penanggung Jawab" />
|
||||
<FormLibContact class="mt" />
|
||||
|
||||
<StaticElement name="divider_3" tag="hr" />
|
||||
<StaticElement name="communicationTitle" tag="h2" content="Komunikasi" />
|
||||
<FormLibCommunication class="mt" />
|
||||
<GroupElement name="container" :columns="{
|
||||
default: {
|
||||
container: 7,
|
||||
},
|
||||
sm: {
|
||||
container: 8,
|
||||
},
|
||||
lg: {
|
||||
container: 9,
|
||||
},
|
||||
}" />
|
||||
<GroupElement name="container2_3" :columns="{
|
||||
default: {
|
||||
container: 5,
|
||||
},
|
||||
sm: {
|
||||
container: 4,
|
||||
},
|
||||
lg: {
|
||||
container: 3,
|
||||
},
|
||||
}">
|
||||
<GroupElement name="column1" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<ButtonElement name="secondaryButton" button-label="Batal" :secondary="true" align="center" size="lg" />
|
||||
</GroupElement>
|
||||
<GroupElement name="column2" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<ButtonElement name="submit" button-label="Simpan" :submits="true" align="center" size="lg" />
|
||||
</GroupElement>
|
||||
</GroupElement>
|
||||
</Vueform>
|
||||
<pre>{{ data }}</pre>
|
||||
</template>
|
||||
<style>
|
||||
.mt {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<Vueform ref="data" validate-on="change|step" method="post" :endpoint="onSubmit">
|
||||
<FormLibIdentifier />
|
||||
<FormLibHumanName />
|
||||
<ButtonElement name="submit" button-label="Simpan" :submits="true" align="center" size="lg" />
|
||||
</Vueform>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const vueform = ref({})
|
||||
const data = ref(null)
|
||||
const onClick = (newValue, oldValue, el$) => {
|
||||
console.log(data)
|
||||
console.log(vueform)
|
||||
|
||||
}
|
||||
|
||||
const handleResponse = (response, form$) => {
|
||||
console.log(response) // axios response
|
||||
console.log(response.status) // HTTP status code
|
||||
console.log(response.data) // response data
|
||||
|
||||
console.log(form$) // <Vueform> instance
|
||||
}
|
||||
const onSubmit = () => {
|
||||
console.log('aa')
|
||||
console.log(data.value.form$.data)
|
||||
const response = $fetch(`/api/coba2`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data.value.form$.data), mode: 'no-cors'
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(JSON.parse(response))
|
||||
})
|
||||
const response2 = useFetch(`/api/coba2`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data.value.form$.data), mode: 'no-cors'
|
||||
})
|
||||
.then((response) => {
|
||||
console.log('useFetch', response)
|
||||
})
|
||||
// const response = useAsyncData(`/api/coba2`, {
|
||||
// method: 'POST',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// body: JSON.stringify(data.value.form$.data), mode: 'no-cors'
|
||||
// })
|
||||
// .then((response) => {
|
||||
// console.log('useAsyncData', response)
|
||||
// })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
/*Call Components*/
|
||||
import RevenueCard from '@/components/dashboard/RevenueCard.vue';
|
||||
import NewCustomer from '@/components/dashboard/NewCustomer.vue';
|
||||
import Totalincome from '@/components/dashboard/TotalIncome.vue';
|
||||
import RevenueProduct from '@/components/dashboard/RevenueProducts.vue';
|
||||
import DailyActivities from '@/components/dashboard/DailyActivities.vue';
|
||||
import BlogCards from '@/components/dashboard/BlogCards.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="8"><RevenueCard /></v-col>
|
||||
<v-col cols="12" lg="4"
|
||||
><NewCustomer class="mb-6" />
|
||||
<Totalincome />
|
||||
</v-col>
|
||||
<v-col cols="12" lg="8"><RevenueProduct/></v-col>
|
||||
<v-col cols="12" lg="4"><DailyActivities/> </v-col>
|
||||
<v-col cols="12"><BlogCards/></v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
|
||||
import Basic from '@/components/ui-components/alert/Basic.vue';
|
||||
import Filled from '@/components/ui-components/alert/Filled.vue';
|
||||
import Closable from '@/components/ui-components/alert/Closable.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-row>
|
||||
<!-- Basic -->
|
||||
<v-col cols="12">
|
||||
<UiChildCard title="Alert Basic">
|
||||
<Basic />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Filled -->
|
||||
<v-col cols="12">
|
||||
<UiChildCard title="Alert Filled">
|
||||
<Filled />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Closable -->
|
||||
<v-col cols="12">
|
||||
<UiChildCard title="Alert Closable">
|
||||
<Closable />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
/*import tabler icons*/
|
||||
import { TrashIcon, SendIcon, BellIcon } from 'vue-tabler-icons';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
// icons
|
||||
import { AccessPointIcon } from 'vue-tabler-icons';
|
||||
import BaseButtons from '@/components/ui-components/button/BaseButtons.vue';
|
||||
import ColorsButtons from '@/components/ui-components/button/ColorsButtons.vue';
|
||||
import OutlinedButtons from '@/components/ui-components/button/OutlinedButtons.vue';
|
||||
import SizeButtons from '@/components/ui-components/button/SizeButtons.vue';
|
||||
import TextButtons from '@/components/ui-components/button/TextButtons.vue';
|
||||
import IconColorSizes from '@/components/ui-components/button/IconColorSizes.vue';
|
||||
// buttons color data
|
||||
const btnsColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
|
||||
|
||||
</script>
|
||||
|
||||
// ===============================|| Ui Buttons ||=============================== //
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
|
||||
<v-row>
|
||||
<!-- Base Buttons -->
|
||||
<v-col cols="12" sm="12">
|
||||
<UiChildCard title="Default">
|
||||
<BaseButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Color Buttons -->
|
||||
<v-col cols="12" lg="6">
|
||||
<UiChildCard title="Colors">
|
||||
<ColorsButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Outlined Buttons -->
|
||||
<v-col cols="12" lg="6">
|
||||
<UiChildCard title="Outlined">
|
||||
<OutlinedButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Sizes -->
|
||||
<v-col cols="12" lg="12">
|
||||
<UiChildCard title="Size">
|
||||
<SizeButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Text Buttons -->
|
||||
<v-col cols="12" lg="6">
|
||||
<UiChildCard title="Text Color">
|
||||
<TextButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Icon Color Sizes -->
|
||||
<v-col cols="12" lg="6">
|
||||
<UiChildCard title="Icon Size">
|
||||
<IconColorSizes />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
|
||||
import CardsProps from "@/components/ui-components/cards/CardsProps.vue";
|
||||
import CardsSlots from "@/components/ui-components/cards/CardsSlots.vue";
|
||||
import CardsContentWrap from "@/components/ui-components/cards/CardsContentWrap.vue";
|
||||
import CardsMedia from "@/components/ui-components/cards/CardsMedia.vue";
|
||||
import CardsWeather from "@/components/ui-components/cards/CardsWeather.vue";
|
||||
import CardsTwitter from "@/components/ui-components/cards/CardsTwitter.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<UiChildCard title="With Props">
|
||||
<CardsProps />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<UiChildCard title="With Slots">
|
||||
<CardsSlots />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" lg="6" class="d-flex align-items-stretch">
|
||||
<UiChildCard title="Content Wrap">
|
||||
<CardsContentWrap />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12" lg="6" class="d-flex align-items-stretch">
|
||||
<UiChildCard title="Card Media">
|
||||
<CardsMedia />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12" lg="6" class="d-flex align-items-stretch">
|
||||
<UiChildCard title="Weather Card">
|
||||
<CardsWeather />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<UiChildCard title="Twitter Card">
|
||||
<CardsTwitter />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
const desserts = ref([
|
||||
{
|
||||
name: "Frozen Yogurt",
|
||||
calories: 159,
|
||||
},
|
||||
{
|
||||
name: "Ice cream sandwich",
|
||||
calories: 237,
|
||||
},
|
||||
{
|
||||
name: "Eclair",
|
||||
calories: 262,
|
||||
},
|
||||
{
|
||||
name: "Cupcake",
|
||||
calories: 305,
|
||||
},
|
||||
{
|
||||
name: "Gingerbread",
|
||||
calories: 356,
|
||||
},
|
||||
{
|
||||
name: "Jelly bean",
|
||||
calories: 375,
|
||||
},
|
||||
{
|
||||
name: "Lollipop",
|
||||
calories: 392,
|
||||
},
|
||||
{
|
||||
name: "Honeycomb",
|
||||
calories: 408,
|
||||
},
|
||||
{
|
||||
name: "Donut",
|
||||
calories: 452,
|
||||
},
|
||||
{
|
||||
name: "KitKat",
|
||||
calories: 518,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row class="month-table">
|
||||
<v-col cols="12" sm="12" >
|
||||
<UiChildCard title="General Table">
|
||||
<v-table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Name</th>
|
||||
<th class="text-left">Calories</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in desserts" :key="item.name">
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.calories }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12">
|
||||
<UiChildCard title="Dark Table">
|
||||
<v-table theme="dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Name</th>
|
||||
<th class="text-left">Calories</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in desserts" :key="item.name">
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.calories }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12">
|
||||
<UiChildCard title="Header Fixed Table">
|
||||
<v-table fixed-header height="300px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Name</th>
|
||||
<th class="text-left">Calories</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in desserts" :key="item.name">
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.calories }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import Shadow from "@/components/style-components/shadow/Shadow.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<Shadow/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import Heading from "@/components/style-components/typography/Heading.vue";
|
||||
import Default from "@/components/style-components/typography/DefaultText.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<UiParentCard title="Default Text">
|
||||
<Heading/>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Default Text" class="mt-6">
|
||||
<Default/>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Reference in New Issue
Block a user