effendy/general-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Yusron alamsyah
2026-03-13 10:45:28 +07:00
commit 6bb6a1d430
568 changed files with 51753 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ui-components/alert/Basic.vue
+6
View File
@@ -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>
components/ui-components/alert/Closable.vue
+30
View File
@@ -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>
components/ui-components/alert/Filled.vue
+8
View File
@@ -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>
components/ui-components/avatar/BasicAvatar.vue
+13
View File
@@ -0,0 +1,13 @@
<script setup lang="ts">
import { ref } from 'vue';
// icons
import { UserIcon} from 'vue-tabler-icons';
</script>
<template>
<div class="text-center">
<v-avatar variant="flat" color="primary">
<UserIcon />
</v-avatar>
</div>
</template>
components/ui-components/avatar/IconAvatar.vue
+24
View File
@@ -0,0 +1,24 @@
<script setup lang="ts">
import { ref } from 'vue';
// icons
import { MoodSmileIcon} from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex align-center gap-2 justify-center">
<v-avatar size="40" color="primary" variant="flat">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" variant="flat" color="secondary" >
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="error" variant="flat">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="warning" variant="flat">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="success" variant="flat">
<MoodSmileIcon size="25" />
</v-avatar>
</div>
</template>
components/ui-components/avatar/ImageAvatar.vue
+13
View File
@@ -0,0 +1,13 @@
<template>
<div class="d-flex align-center gap-2 justify-center">
<v-avatar size="40" variant="flat">
<img src="@/assets/images/profile/user-6.jpg" width="40" alt="Julia" />
</v-avatar>
<v-avatar size="40" variant="flat">
<img src="@/assets/images/profile/user-2.jpg" width="40" alt="Julia" />
</v-avatar>
<v-avatar size="40" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="40" alt="Julia" />
</v-avatar>
</div>
</template>
components/ui-components/avatar/LetterAvatar.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<div class="d-flex align-center gap-2 justify-center">
<v-avatar size="40" color="primary" variant="flat" class="text-h5 font-weight-medium"> A </v-avatar>
<v-avatar size="40" color="secondary" variant="flat" class="text-h5 font-weight-medium">B</v-avatar>
<v-avatar size="40" color="error" variant="flat" class="text-h5 font-weight-medium"> C </v-avatar>
<v-avatar size="40" color="warning" variant="flat" class="text-h5 font-weight-medium"> D </v-avatar>
<v-avatar size="40" color="success" variant="flat" class="text-h5 font-weight-medium"> E </v-avatar>
</div>
</template>
components/ui-components/avatar/SizeAvatar.vue
+20
View File
@@ -0,0 +1,20 @@
<template>
<div class="d-flex align-center gap-3 justify-center">
<v-avatar size="x-small" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="25" alt="Julia" />
</v-avatar>
<v-avatar size="small" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="35" alt="Julia" />
</v-avatar>
<v-avatar size="medium" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="40" alt="Julia" />
</v-avatar>
<v-avatar size="large" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="48" alt="Julia" />
</v-avatar>
<v-avatar size="x-large" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="56" alt="Julia" />
</v-avatar>
</div>
</template>
components/ui-components/avatar/VariantAvatar.vue
+18
View File
@@ -0,0 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
// icons
import { MoodSmileIcon} from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex align-center gap-2 justify-center">
<v-avatar size="40" color="primary" variant="flat" rounded="sm">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="primary" variant="flat" rounded="md">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="primary" variant="flat" rounded="lg">
<MoodSmileIcon size="25" />
</v-avatar>
</div>
</template>
components/ui-components/button/BaseButtons.vue
+10
View File
@@ -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>
components/ui-components/button/ColorsButtons.vue
+12
View File
@@ -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>
components/ui-components/button/IconColorSizes.vue
+9
View File
@@ -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>
components/ui-components/button/OutlinedButtons.vue
+11
View File
@@ -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>
components/ui-components/button/SizeButtons.vue
+23
View File
@@ -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>
components/ui-components/button/TextButtons.vue
+12
View File
@@ -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>
components/ui-components/cards/CardsContentWrap.vue
+82
View File
@@ -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>
components/ui-components/cards/CardsMedia.vue
+34
View File
@@ -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>
components/ui-components/cards/CardsProps.vue
+12
View File
@@ -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>
components/ui-components/cards/CardsSlots.vue
+14
View File
@@ -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>
components/ui-components/cards/CardsTwitter.vue
+49
View File
@@ -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>
components/ui-components/cards/CardsWeather.vue
+115
View File
@@ -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&deg;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>
components/ui-components/chip/Closable.vue
+10
View File
@@ -0,0 +1,10 @@
<template>
<div class="d-flex flex-wrap align-center gap-3">
<v-chip closable color="primary"> Primary Deletable</v-chip>
<v-chip closable color="secondary"> Secondary Deletable</v-chip>
<v-chip closable color="warning"> Warning Deletable</v-chip>
<v-chip closable color="success"> Success Deletable</v-chip>
<v-chip closable color="error"> Error Deletable</v-chip>
<v-chip closable color="info"> Info Deletable</v-chip>
</div>
</template>
components/ui-components/chip/CustomIcon.vue
+18
View File
@@ -0,0 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon,ChecksIcon,UserCircleIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip color="primary">
<MoodSmileIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="secondary">
<UserCircleIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>
components/ui-components/chip/CustomIconOutlined.vue
+18
View File
@@ -0,0 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon,ChecksIcon,UserCircleIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip color="primary" variant="outlined">
<MoodSmileIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="secondary" variant="outlined">
<UserCircleIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>
components/ui-components/chip/Disabled.vue
+18
View File
@@ -0,0 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon,ChecksIcon,UserCircleIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip disabled variant="outlined">
<MoodSmileIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="secondary" disabled variant="outlined">
<UserCircleIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>
components/ui-components/chip/FilledColor.vue
+62
View File
@@ -0,0 +1,62 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon, CircleXIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-wrap align-center gap-3">
<v-chip class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Filled
</v-chip>
<v-chip class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="primary" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-6.jpg" width="25" />
</v-avatar> Primary Filled
</v-chip>
<v-chip color="primary" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-6.jpg" width="25" />
</v-avatar> Primary Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="secondary" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Secondary Filled
</v-chip>
<v-chip color="secondary" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Secondary Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="success" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-2.jpg" width="25" />
</v-avatar> Default Filled
</v-chip>
<v-chip color="success" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-2.jpg" width="25" />
</v-avatar> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="warning" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Filled
</v-chip>
<v-chip color="warning" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="error" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-5.jpg" width="25" />
</v-avatar> Default Filled
</v-chip>
<v-chip color="error" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-5.jpg" width="25" />
</v-avatar> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>
components/ui-components/chip/LabelChip.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip label closable color="primary"> Primary </v-chip>
<v-chip label closable color="secondary"> Secondary </v-chip>
<v-chip label closable color="warning"> Warning </v-chip>
<v-chip label closable color="success"> Success </v-chip>
<v-chip label closable color="error"> Error </v-chip>
</div>
</template>
components/ui-components/chip/Outlined.vue
+62
View File
@@ -0,0 +1,62 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon, CircleXIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-wrap align-center gap-3">
<v-chip variant="outlined" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Filled
</v-chip>
<v-chip variant="outlined" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="primary" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-3.jpg" width="25" />
</v-avatar> Primary Filled
</v-chip>
<v-chip variant="outlined" color="primary" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-3.jpg" width="25" />
</v-avatar> Primary Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="secondary" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Secondary Filled
</v-chip>
<v-chip variant="outlined" color="secondary" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Secondary Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="success" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-2.jpg" width="25" />
</v-avatar> Default Filled
</v-chip>
<v-chip variant="outlined" color="success" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-2.jpg" width="25" />
</v-avatar> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="warning" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Filled
</v-chip>
<v-chip variant="outlined" color="warning" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="error" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-5.jpg" width="25" />
</v-avatar> Default Filled
</v-chip>
<v-chip variant="outlined" color="error" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-5.jpg" width="25" />
</v-avatar> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>
components/ui-components/chip/Sizes.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip color="primary" size="x-small"> x-small </v-chip>
<v-chip color="primary" size="small"> small </v-chip>
<v-chip color="primary"> Default </v-chip>
<v-chip color="primary" size="large"> large </v-chip>
<v-chip color="primary" size="x-large"> x-large </v-chip>
</div>
</template>
components/ui-components/dialogs/DialogConfirmModal.vue
+53
View File
@@ -0,0 +1,53 @@
<script setup lang="ts">
import { ref } from "vue";
const dialog = ref(false)
defineExpose({
dialog
});
// const model = defineModel<boolean>();
const props = defineProps({
dialogTitle: {
type: String,
default: 'Confirm Action'
},
dialogMessage: {
type: String,
default: 'Are you sure you want to perform this action?'
}
});
const emit = defineEmits(['confirm']);
function handleConfirmDialog(data: any) {
emit('confirm'); // Memberitahu parent untuk tambah data
dialog.value = false; // Tutup dialog
}
</script>
<template>
<v-dialog v-model="dialog" persistent class="dialog-mw" max-width="500">
<template v-slot:activator="{ props }">
<v-btn color="warning" class="w-100" v-bind="props" flat> Open Confirm Dialog </v-btn>
</template>
<v-card class="pa-6">
<v-card-title class="text-h5">
{{ dialogTitle}}
</v-card-title>
<v-card-text>{{ dialogMessage }}</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="error" variant="tonal" @click="dialog = false" flat>
Tidak
</v-btn>
<v-btn color="success" variant="tonal" @click="handleConfirmDialog(1)" flat>
Ya
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
components/ui-components/dialogs/DialogsActivator.vue
+26
View File
@@ -0,0 +1,26 @@
<script setup lang="ts">
import { ref } from "vue";
const dialog = ref(false);
</script>
<template>
<div class="text-center mt-4 mt-sm-0">
<v-btn color="primary" class="w-100" flat>
Open Simple Dialog
<v-dialog v-model="dialog" activator="parent" class="dialog-mw">
<v-card>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</v-card-text>
<v-card-actions>
<v-btn color="primary" @click="dialog = false" variant="tonal"
>Close Dialog</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-btn>
</div>
</template>
components/ui-components/dialogs/DialogsForm.vue
+92
View File
@@ -0,0 +1,92 @@
<script setup lang="ts">
import { ref } from "vue";
const dialog = ref(false);
</script>
<template>
<!-- ----------------------------------------------------------------------------- -->
<!-- Form -->
<!-- ----------------------------------------------------------------------------- -->
<div class="text-center">
<v-dialog v-model="dialog" persistent class="dialog-mw">
<template v-slot:activator="{ props }">
<v-btn color="warning" class="w-100" v-bind="props" flat> Open Form Dialog </v-btn>
</template>
<v-card style="height: 400px" class="overflow-auto">
<v-container>
<v-card-title class="pa-5">
<span class="text-h5">User Profile</span>
</v-card-title>
<v-card-text>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field label="Legal first name*" required></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field
label="Legal middle name"
hint="example of helper text only on focus"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field
label="Legal last name*"
hint="example of persistent helper text"
persistent-hint
required
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="Email*" required></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
label="Password*"
type="password"
required
></v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-select
:items="['0-17', '18-29', '30-54', '54+']"
label="Age*"
required
></v-select>
</v-col>
<v-col cols="12" sm="6">
<v-autocomplete
:items="[
'Skiing',
'Ice hockey',
'Soccer',
'Basketball',
'Hockey',
'Reading',
'Writing',
'Coding',
'Basejump',
]"
label="Interests"
multiple
></v-autocomplete>
</v-col>
</v-row>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="error" @click="dialog = false" variant="tonal" flat>
Close
</v-btn>
<v-btn color="success" @click="dialog = false" variant="tonal" flat>
Save
</v-btn>
</v-card-actions>
</v-container>
</v-card>
</v-dialog>
</div>
</template>
components/ui-components/dialogs/DialogsFullscreen.vue
+76
View File
@@ -0,0 +1,76 @@
<script setup lang="ts">
import { ref } from "vue";
import {XIcon } from "vue-tabler-icons"
const dialog = ref(false);
const notifications = ref(false);
const sound = ref(true);
const widgets = ref(false);
</script>
<template>
<div class="text-center">
<v-dialog
v-model="dialog"
fullscreen
:scrim="false"
transition="dialog-bottom-transition"
>
<template v-slot:activator="{ props }">
<v-btn color="error" class="w-100" dark v-bind="props" flat> Open Fullscreen Dialog </v-btn>
</template>
<v-card>
<v-toolbar dark color="primary" style="flex: unset">
<v-btn icon color="inherit" @click="dialog = false" flat>
<XIcon width="20" />
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark variant="text" @click="dialog = false" flat> Save </v-btn>
</v-toolbar-items>
</v-toolbar>
<v-card-item>
<v-list lines="two" subheader>
User Controls
<v-list-item
title="Content filtering"
subtitle="Set the content filtering level to restrict apps that can be downloaded"
></v-list-item>
<v-list-item
title="Password"
subtitle="Require password for purchase or use password to restrict purchase"
></v-list-item>
</v-list>
<v-divider></v-divider>
<v-list lines="two" subheader>
General
<v-list-item
title="Notifications"
subtitle="Notify me about updates to apps or games that I downloaded"
>
<template v-slot:prepend>
<v-checkbox v-model="notifications"></v-checkbox>
</template>
</v-list-item>
<v-list-item
title="Sound"
subtitle="Auto-update apps at any time. Data charges may apply"
>
<template v-slot:prepend>
<v-checkbox v-model="sound"></v-checkbox>
</template>
</v-list-item>
<v-list-item
title="Auto-add widgets"
subtitle="Automatically add home screen widgets"
>
<template v-slot:prepend>
<v-checkbox v-model="widgets"></v-checkbox>
</template>
</v-list-item>
</v-list>
</v-card-item>
</v-card>
</v-dialog>
</div>
</template>
components/ui-components/dialogs/DialogsModel.vue
+23
View File
@@ -0,0 +1,23 @@
<script setup lang="ts">
import { ref } from "vue";
const dialog = ref(false);
</script>
<template>
<div class="text-center">
<v-btn color="secondary" class="w-100" @click="dialog = true" flat> Open Dialog </v-btn>
<v-dialog v-model="dialog" class="dialog-mw">
<v-card>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</v-card-text>
<v-card-actions>
<v-btn color="secondary" @click="dialog = false" variant="tonal"
>Close Dialog</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
components/ui-components/dialogs/DialogsNested.vue
+78
View File
@@ -0,0 +1,78 @@
<script setup lang="ts">
import { ref } from "vue";
const dialog = ref(false);
const dialog2 = ref(false);
const dialog3 = ref(false);
const notifications = ref(false);
const sound = ref(true);
const widgets = ref(false);
const items = ref([
{
title: "Click Me",
},
{
title: "Click Me",
},
{
title: "Click Me",
},
{
title: "Click Me 2",
},
]);
const select = ref([
{ text: "State 1" },
{ text: "State 2" },
{ text: "State 3" },
{ text: "State 4" },
{ text: "State 5" },
{ text: "State 6" },
{ text: "State 7" },
]);
</script>
<template>
<div class="text-center">
<v-btn color="secondary" class=" w-100" @click="dialog = true" flat>
Open Dialog 1
</v-btn>
<v-dialog v-model="dialog" class="dialog-mw">
<v-card class="pa-6">
<v-card-title> Dialog 1 </v-card-title>
<v-card-text>
<v-btn color="primary" class="" @click="dialog2 = true" flat>
Open Dialog 2
</v-btn>
</v-card-text>
<v-card-actions>
<v-btn color="error" variant="tonal" @click="dialog = false" flat> Close </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialog2" class="dialog-mw">
<v-card class="pa-6">
<v-card-title> Dialog 2 </v-card-title>
<v-card-text>
<v-btn color="secondary" @click="dialog3 = !dialog3" flat>
Open Dialog 3
</v-btn>
</v-card-text>
<v-card-actions>
<v-btn color="error" variant="tonal" @click="dialog2 = false" flat> Close </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialog3" class="dialog-mw">
<v-card class="pa-6">
<v-card-title>
<span>Dialog 3</span>
</v-card-title>
<v-card-actions>
<v-btn color="error" variant="tonal" @click="dialog3 = false" flat> Close </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
components/ui-components/dialogs/DialogsPersistent.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
import { ref } from "vue";
const dialog = ref(false);
</script>
<template>
<div class="text-center">
<v-dialog v-model="dialog" persistent class="dialog-mw">
<template v-slot:activator="{ props }">
<v-btn color="primary" class="w-100" v-bind="props" flat> Open Dialog </v-btn>
</template>
<v-card class="pa-6">
<v-card-title class="text-h5">
Use Google's location service?
</v-card-title>
<v-card-text
>Let Google help apps determine location. This means sending anonymous
location data to Google, even when no apps are running.</v-card-text
>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="error" variant="tonal" @click="dialog = false" flat>
Disagree
</v-btn>
<v-btn color="success" variant="tonal" @click="dialog = false" flat>
Agree
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
components/ui-components/dialogs/DialogsScrollable.vue
+50
View File
@@ -0,0 +1,50 @@
<script setup lang="ts">
import { ref } from "vue";
const dialogm1 = ref("");
const dialog = ref(false);
</script>
<template>
<div class="text-center">
<v-dialog v-model="dialog" scrollable class="dialog-mw">
<template v-slot:activator="{ props }">
<v-btn color="success" class="w-100" v-bind="props" flat> Open Scrolling Dialog </v-btn>
</template>
<v-card>
<v-card-title>Select Country</v-card-title>
<v-divider></v-divider>
<v-card-text style="height: 300px" class="overflow-auto">
<v-radio-group v-model="dialogm1" column>
<v-radio label="Bahamas, The" value="bahamas"></v-radio>
<v-radio label="Bahrain" value="bahrain"></v-radio>
<v-radio label="Bangladesh" value="bangladesh"></v-radio>
<v-radio label="Barbados" value="barbados"></v-radio>
<v-radio label="Belarus" value="belarus"></v-radio>
<v-radio label="Belgium" value="belgium"></v-radio>
<v-radio label="Belize" value="belize"></v-radio>
<v-radio label="Benin" value="benin"></v-radio>
<v-radio label="Bhutan" value="bhutan"></v-radio>
<v-radio label="Bolivia" value="bolivia"></v-radio>
<v-radio label="Bosnia and Herzegovina" value="bosnia"></v-radio>
<v-radio label="Botswana" value="botswana"></v-radio>
<v-radio label="Brazil" value="brazil"></v-radio>
<v-radio label="Brunei" value="brunei"></v-radio>
<v-radio label="Bulgaria" value="bulgaria"></v-radio>
<v-radio label="Burkina Faso" value="burkina"></v-radio>
<v-radio label="Burma" value="burma"></v-radio>
<v-radio label="Burundi" value="burundi"></v-radio>
</v-radio-group>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn color="error" variant="tonal" @click="dialog = false">
Close
</v-btn>
<v-btn color="success" variant="tonal" @click="dialog = false">
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
components/ui-components/dialogs/DialogsTransitions.vue
+25
View File
@@ -0,0 +1,25 @@
<script setup lang="ts">
import { ref } from "vue";
const dialog = ref(false);
</script>
<template>
<div class="text-center">
<v-dialog transition="dialog-bottom-transition" class="dialog-mw">
<template v-slot:activator="{ props }">
<v-btn color="success" class="w-100" v-bind="props" flat>Open Transition Dialog</v-btn>
</template>
<template v-slot:default="{ isActive }">
<v-card>
<v-toolbar color="primary" class="px-4">Opening from the bottom</v-toolbar>
<v-card-item>
<div class="text-h2 pa-12">Hello world!</div>
</v-card-item>
<v-card-actions class="justify-end">
<v-btn variant="tonal" @click="isActive.value = false" flat>Close</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</div>
</template>
components/ui-components/dialogs/Test.vue
+54
View File
@@ -0,0 +1,54 @@
<script setup lang="ts">
// defineModel membuat variabel 'modelValue' yang otomatis sinkron dengan Parent
const isOpen = defineModel<boolean>({ default: false });
const props = defineProps({
title: { type: String, default: 'Konfirmasi' },
message: { type: String, default: '' }
});
const emit = defineEmits(['action-ya']);
const handleYa = () => {
emit('action-ya'); // Kirim sinyal ke parent untuk proses data
isOpen.value = false; // Tutup modal
};
</script>
<template>
<v-dialog v-model="isOpen" persistent max-width="450">
<v-card class="pa-4" rounded="xl">
<v-card-title class="text-h5 font-weight-bold">
{{ title }}
</v-card-title>
<v-card-text class="text-body-1">
{{ message }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="pink-lighten-5"
class="text-pink-accent-2 px-6"
variant="flat"
rounded="lg"
@click="isOpen = false"
>
Tidak
</v-btn>
<v-btn
color="cyan-lighten-5"
class="text-cyan-darken-1 px-6"
variant="flat"
rounded="lg"
@click="handleYa"
>
Ya
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
components/ui-components/expansionpanel/Advance.vue
+65
View File
@@ -0,0 +1,65 @@
<template>
<v-expansion-panels>
<v-expansion-panel elevation="10">
<v-expansion-panel-title>
<v-row no-gutters>
<v-col cols="12" md="5" class="d-flex justify-start">
<h6 class="text-h6">General settings</h6>
</v-col>
<v-col cols="12" md="6" class="d-flex justify-start mt-md-0 mt-3">
<h6 class="text-subtitle-1">i am an accordion</h6>
</v-col>
</v-row>
</v-expansion-panel-title>
<v-expansion-panel-text>
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
<v-expansion-panel elevation="10">
<v-expansion-panel-title>
<v-row no-gutters>
<v-col cols="12" md="5" class="d-flex justify-start">
<h6 class="text-h6">Users</h6>
</v-col>
<v-col cols="12" md="6" class="d-flex justify-start mt-md-0 mt-3">
<h6 class="text-subtitle-1">You are currently not an owner</h6>
</v-col>
</v-row>
</v-expansion-panel-title>
<v-expansion-panel-text>
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
<v-expansion-panel elevation="10">
<v-expansion-panel-title>
<v-row no-gutters>
<v-col cols="12" md="5" class="d-flex justify-start">
<h6 class="text-h6">Advance Settings</h6>
</v-col>
<v-col cols="12" md="6" class="d-flex justify-start mt-md-0 mt-3">
<h6 class="text-subtitle-1">Filtering has been entirely disabled for whole web server</h6>
</v-col>
</v-row>
</v-expansion-panel-title>
<v-expansion-panel-text>
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
<v-expansion-panel elevation="10">
<v-expansion-panel-title>
<v-row no-gutters>
<v-col cols="10" class="d-flex justify-start mt-md-0 mt-3">
<h6 class="text-h6">Personal data</h6>
</v-col>
</v-row>
</v-expansion-panel-title>
<v-expansion-panel-text>
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
</v-expansion-panels>
</template>
components/ui-components/expansionpanel/Basic.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<v-expansion-panels>
<v-expansion-panel elevation="10">
<v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel elevation="10">
<v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel elevation="10" >
<v-expansion-panel-title class="text-h6">Accordion 3</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
</v-expansion-panel>
<v-divider></v-divider>
</v-expansion-panels>
</template>
components/ui-components/expansionpanel/CustomizedIcon.vue
+43
View File
@@ -0,0 +1,43 @@
<script setup lang="ts">
import { ref } from 'vue';
</script>
<template>
<v-expansion-panels>
<v-expansion-panel elevation="10">
<v-expansion-panel-title expand-icon="mdi-plus" collapse-icon="mdi-minus" class="text-h6">
Accordion 1
</v-expansion-panel-title>
<v-expansion-panel-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
<v-expansion-panel elevation="10">
<v-expansion-panel-title class="text-h6">
Accordion 2
<template v-slot:actions="{ expanded }">
<v-icon :color="!expanded ? 'teal' : ''" :icon="expanded ? 'mdi-pencil' : 'mdi-check'"></v-icon>
</template>
</v-expansion-panel-title>
<v-expansion-panel-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
<v-expansion-panel elevation="10">
<v-expansion-panel-title disable-icon-rotate class="text-h6">
Accordion 3
<template v-slot:actions>
<v-icon color="primary" icon="mdi-alert-circle">
</v-icon>
</template>
</v-expansion-panel-title>
<v-expansion-panel-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
</v-expansion-panels>
</template>
components/ui-components/expansionpanel/DefaultExpand.vue
+23
View File
@@ -0,0 +1,23 @@
<script setup lang="ts">
import { ref } from 'vue';
const panel = ref([0]);
</script>
<template>
<v-expansion-panels v-model="panel">
<v-expansion-panel elevation="10" >
<v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel elevation="10">
<v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel elevation="10">
<v-expansion-panel-title class="text-h6">Accordion 3</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</template>
components/ui-components/expansionpanel/Inset.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<v-expansion-panels variant="inset">
<v-expansion-panel elevation="10">
<v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
<v-expansion-panel elevation="10">
<v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
<v-expansion-panel elevation="10" >
<v-expansion-panel-title class="text-h6">Accordion 3</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
</v-expansion-panels>
</template>
components/ui-components/expansionpanel/Popout.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<v-expansion-panels variant="popout">
<v-expansion-panel elevation="10">
<v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
<v-expansion-panel elevation="10">
<v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
<v-expansion-panel elevation="10" >
<v-expansion-panel-title class="text-h6">Accordion 3</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
</v-expansion-panels>
</template>
components/ui-components/list/CustomAlignList.vue
+59
View File
@@ -0,0 +1,59 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import {ChevronUpIcon} from 'vue-tabler-icons';
import {ChevronDownIcon} from 'vue-tabler-icons';
const props = defineProps(['icon']);
const component = props.icon;
// custom list data
const customs = shallowRef([
{
title: 'Bajaj Finsery',
profit: true,
percent: '10',
price: '1839.00'
},
{
title: 'TTML',
profit: false,
percent: '10',
price: '100.00'
},
{
title: 'Reliance',
profit: true,
percent: '10',
price: '200.00'
},
{
title: 'TTML',
profit: false,
percent: '10',
price: '189.00'
}
]);
</script>
<template>
<v-list two-lines>
<template v-for="(custom, i) in customs" :key="i">
<v-list-item color="primary" class="py-3">
<v-list-item-title class="text-subtitle-1">{{ custom.title }}</v-list-item-title>
<v-list-item-subtitle v-if="custom.profit" class="text-subtitle-2 text-success text-high-emphasis"
>{{ custom.percent }}% Profit</v-list-item-subtitle
>
<v-list-item-subtitle v-else class="text-subtitle-2 text-error "
>{{ custom.percent }}% Loss</v-list-item-subtitle
>
<template v-slot:append>
<v-list-item-subtitle class="text-subtitle-1 text-high-emphasis mr-3"> ${{ custom.price }}</v-list-item-subtitle>
<v-chip color="success" label size="x-small" v-if="custom.profit">
<ChevronUpIcon size="17" stroke-width="1.5" />
</v-chip>
<v-chip color="error" label size="x-small" v-else>
<ChevronDownIcon size="17" stroke-width="1.5" />
</v-chip>
</template>
</v-list-item>
<v-divider></v-divider>
</template>
</v-list>
</template>
components/ui-components/list/DisabledList.vue
+43
View File
@@ -0,0 +1,43 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { AppsIcon, CircleDotIcon, DragDropIcon, FolderIcon, ChevronUpIcon, ChevronDownIcon } from 'vue-tabler-icons';
const props = defineProps(['icon']);
const component = props.icon;
// List 1,3 Data
const list1 = shallowRef([
{
name: 'Sample Page',
icon: AppsIcon,
id: 1,
link: '/basic/list'
},
{
name: 'Elements',
icon: CircleDotIcon,
id: 2,
link: ''
},
{
name: 'Page Layouts',
icon: FolderIcon,
id: 3,
link: ''
},
]);
</script>
<template>
<v-list disabled>
<v-card variant="outlined" class="py-2">
<v-list-item class="mb-2" v-for="(list, i) in list1" :value="list" rounded="md" :key="i" color="primary">
<template v-slot:prepend>
<component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
</template>
<v-list-item-title v-text="list.name"></v-list-item-title>
</v-list-item>
</v-card>
</v-list>
</template>
components/ui-components/list/FolderList.vue
+42
View File
@@ -0,0 +1,42 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { FolderIcon,BriefcaseIcon,BeachIcon } from 'vue-tabler-icons';
const props = defineProps(['icon']);
const folders = shallowRef([
{
subtitle: 'Jan 9, 2022',
title: 'Photos',
icon:FolderIcon,
},
{
subtitle: 'Jan 17, 2022',
title: 'Works',
icon:BriefcaseIcon
},
{
subtitle: 'Jan 18, 2022',
title: 'Vacation',
icon:BeachIcon
}
]);
</script>
<template>
<v-list lines="two">
<v-card variant="outlined">
<v-list-item v-for="folder in folders" :key="folder.title" :subtitle="folder.subtitle">
<template v-slot:prepend>
<v-avatar color="grey400">
<component :is="folder.icon" size="20" stroke-width="1.5" />
</v-avatar>
</template>
<template v-slot:title>
<h5 class="text-subtitle-1">{{ folder.title }}</h5>
</template>
<template v-slot:subtitle>
<span class="text-subtitle-2">{{ folder.subtitle }}</span>
</template>
</v-list-item>
</v-card>
</v-list>
</template>
components/ui-components/list/NestedList.vue
+40
View File
@@ -0,0 +1,40 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { CircleDotIcon, DragDropIcon, InboxIcon, MailIcon, SendIcon } from 'vue-tabler-icons';
const props = defineProps(['icon']);
// List 2 data
const open = shallowRef(['Users']);
</script>
<template>
<v-list >
<v-card variant="outlined" class="py-2">
<div class="text-subttile-2 pl-4 py-3">Nested List Items</div>
<v-list-item value="" class="mb-2" color="primary">
<template v-slot:prepend>
<SendIcon size="20" stroke-width="1.5" class="mr-2" />
</template>
<v-list-item-title >Sent Mail</v-list-item-title>
</v-list-item>
<v-list-item value="" class="mb-2" color="primary">
<template v-slot:prepend>
<MailIcon size="20" stroke-width="1.5" class="mr-2" />
</template>
<v-list-item-title >Drafts</v-list-item-title>
</v-list-item>
<v-list-group value="Users">
<template v-slot:activator="{ props }">
<v-list-item v-bind="props" rounded="md" color="primary" title="inbox">
<template v-slot:prepend>
<InboxIcon size="20" stroke-width="1.5" class="mr-2" />
</template>
</v-list-item>
</template>
<v-list-item value="Started" color="primary" title="Started" rounded="md">
<template v-slot:prepend>
<CircleDotIcon size="15" stroke-width="1.5" class="mr-2" />
</template>
</v-list-item>
</v-list-group>
</v-card>
</v-list>
</template>
components/ui-components/list/RoundedList.vue
+37
View File
@@ -0,0 +1,37 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import {AppsIcon} from 'vue-tabler-icons';
const props = defineProps(['icon']);
const component = props.icon;
// List 1,3 Data
const list1 = shallowRef([
{
name: 'Sample Page',
icon: AppsIcon,
id: 1,
link: '/'
},
{
name: 'Elements',
icon: AppsIcon,
id: 2,
link: ''
},
{
name: 'Page Layouts',
icon: AppsIcon,
id: 3,
link: ''
}
]);
</script>
<template>
<v-list>
<v-list-item class="mb-1" v-for="(list, i) in list1" :value="list" rounded="xl" :key="i" color="primary">
<template v-slot:prepend>
<component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
</template>
<v-list-item-title v-text="list.name"></v-list-item-title>
</v-list-item>
</v-list>
</template>
components/ui-components/list/ScrollableList.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<perfect-scrollbar style="max-height: 250px">
<v-list>
<v-list-item v-for="(n, index) in 200" :value="n" :key="index" color="primary">
<v-list-item-title>Item {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</perfect-scrollbar>
</template>
components/ui-components/list/SimpleList.vue
+48
View File
@@ -0,0 +1,48 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { AppsIcon, CircleDotIcon, DragDropIcon, FolderIcon, ChevronUpIcon, ChevronDownIcon } from 'vue-tabler-icons';
const props = defineProps(['icon']);
const component = props.icon;
// List 1,3 Data
const list1 = shallowRef([
{
name: 'Sample Page',
icon: AppsIcon,
id: 1,
link: '/basic/list'
},
{
name: 'Elements',
icon: CircleDotIcon,
id: 2,
link: ''
},
{
name: 'Page Layouts',
icon: FolderIcon,
id: 3,
link: ''
},
{
name: 'Components',
icon: DragDropIcon,
id: 4,
link: ''
}
]);
</script>
<template>
<v-list>
<v-card variant="outlined" class="py-2">
<v-list-item class="mb-2" v-for="(list, i) in list1" :value="list" rounded="md" :key="i" color="primary">
<template v-slot:prepend>
<component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
</template>
<v-list-item-title v-text="list.name"></v-list-item-title>
</v-list-item>
</v-card>
</v-list>
</template>
components/ui-components/list/SwitchList.vue
+40
View File
@@ -0,0 +1,40 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { WifiIcon,BluetoothIcon } from 'vue-tabler-icons';
// List 4 data
const swt1 = shallowRef(true);
const swt2 = shallowRef(false);
</script>
<template>
<v-list >
<v-card variant="outlined" class="py-2">
<v-list-item value="wifi" class="mb-2 " color="primary">
<div class="d-flex align-center">
<WifiIcon size="22" stroke-width="1.5" class="mr-2" />
<div class="ml-3">Wi-Fi</div>
<div class="ml-auto"><v-switch v-model="swt1" inset color="primary" hide-details></v-switch></div>
</div>
</v-list-item>
<v-list-item value="bluetooth" class="mb-2 " color="primary">
<div class="d-flex align-center">
<BluetoothIcon size="22" stroke-width="1.5" class="mr-2" />
<div class="ml-3">Bluetooth</div>
<div class="ml-auto"><v-switch v-model="swt2" inset color="primary" hide-details></v-switch></div>
</div>
</v-list-item>
</v-card>
</v-list>
<!-- <div class="rounded-sm px-5 py-3 my-3">
<div class="d-flex align-center">
<WifiIcon size="20" stroke-width="1.5"/>
</div>
<v-switch v-model="swt1" inset label="Start DND Mode" color="primary" hide-details></v-switch>
<v-switch v-model="swt2" inset label="Allow Notifications" color="primary" hide-details> </v-switch>
</div> -->
</template>
components/ui-components/menus/MenusActivatorTooltip.vue
+33
View File
@@ -0,0 +1,33 @@
<script setup lang="ts">
import { ref, mergeProps } from "vue";
const items = ref([
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me 2" }
]);
mergeProps();
</script>
<template>
<div class="text-center mt-4">
<v-menu>
<template v-slot:activator="{ props: menu }">
<v-tooltip anchor="top">
<template v-slot:activator="{ props: tooltip }">
<v-btn color="primary" v-bind="mergeProps(menu, tooltip)" flat>
Dropdown w/ Tooltip
</v-btn>
</template>
<span>I'm A Tooltip</span>
</v-tooltip>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
components/ui-components/menus/MenusAnchor.vue
+25
View File
@@ -0,0 +1,25 @@
<script setup lang="ts">
import { ref } from 'vue';
const items = ref([{ title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me 2' }]);
const locations = ref(['top', 'bottom', 'start', 'end', 'center']);
const location = ref();
</script>
<template>
<div class="text-center mt-4">
<v-select v-model="location" :items="locations" label="Location"></v-select>
<v-menu :location="location">
<template v-slot:activator="{ props }">
<v-btn color="primary" dark v-bind="props" flat> Dropdown </v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
components/ui-components/menus/MenusHover.vue
+26
View File
@@ -0,0 +1,26 @@
<script setup lang="ts">
import { ref } from "vue";
const items = ref([
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me 2" },
]);
</script>
<template>
<div class="text-center mt-4">
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn color="secondary" v-bind="props" flat> Dropdown </v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
components/ui-components/menus/MenusPopover.vue
+68
View File
@@ -0,0 +1,68 @@
<script setup lang="ts">
import { ref } from "vue";
const fav = ref(true);
const menu = ref(false);
const message = ref(false);
const hints = ref(true);
</script>
<template>
<div class="text-center mt-4">
<v-menu v-model="menu" :close-on-content-click="false" anchor="top">
<template v-slot:activator="{ props }">
<v-btn color="secondary" v-bind="props" flat> Menu as Popover </v-btn>
</template>
<v-card min-width="300">
<v-list>
<v-list-item
prepend-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
title="John Leider"
subtitle="Founder of Vuetify"
>
<template v-slot:append>
<v-btn
variant="text"
:class="fav ? 'text-primary' : ''"
icon="mdi-heart"
@click="fav = !fav"
flat></v-btn>
</template>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-list>
<v-list-item >
<v-switch
v-model="message"
color="primary"
label="Enable messages"
hide-details
class="pl-2"
></v-switch>
</v-list-item>
<v-list-item>
<v-switch
v-model="hints"
color="primary"
label="Enable hints"
hide-details
class="pl-2"
></v-switch>
</v-list-item>
</v-list>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn variant="text" @click="menu = false" flat> Cancel </v-btn>
<v-btn color="primary" variant="text" @click="menu = false" flat> Save </v-btn>
</v-card-actions>
</v-card>
</v-menu>
</div>
</template>
components/ui-components/ratting/BasicRatting.vue
+9
View File
@@ -0,0 +1,9 @@
<script setup lang="ts">
import { ref } from "vue";
const rating = ref(3);
</script>
<template>
<div>
<v-rating v-model="rating" density="compact" color="warning"></v-rating>
</div>
</template>
components/ui-components/ratting/ClearableRatting.vue
+9
View File
@@ -0,0 +1,9 @@
<script setup lang="ts">
import { ref } from "vue";
const rating3 = ref(3);
</script>
<template>
<div >
<v-rating v-model="rating3" clearable density="compact" color="warning"></v-rating>
</div>
</template>
components/ui-components/ratting/HalfRatting.vue
+9
View File
@@ -0,0 +1,9 @@
<script setup lang="ts">
import { ref } from "vue";
const rating2 = ref(2.5);
</script>
<template>
<div>
<v-rating v-model="rating2" half-increments density="compact" color="warning"></v-rating>
</div>
</template>
components/ui-components/ratting/HoverRatting.vue
+9
View File
@@ -0,0 +1,9 @@
<script setup lang="ts">
import { ref } from "vue";
const rating5 = ref(3);
</script>
<template>
<div>
<v-rating v-model="rating5" color="warning" hover density="compact"></v-rating>
</div>
</template>
components/ui-components/ratting/IconsRatting.vue
+28
View File
@@ -0,0 +1,28 @@
<script setup lang="ts">
import { ref } from "vue";
const rating7 = ref(3.5);
</script>
<template>
<div >
<v-rating
class="d-block mb-4"
v-model="rating7"
color="error"
empty-icon="mdi-heart-outline"
full-icon="mdi-heart"
half-icon="mdi-heart-half"
half-increments density="compact"
hover
></v-rating>
<v-rating
class="d-block mb-4"
v-model="rating7"
color="primary"
empty-icon="mdi-circle-outline"
full-icon="mdi-circle"
half-icon="mdi-circle-half"
half-increments density="compact"
hover
></v-rating>
</div>
</template>
components/ui-components/ratting/LabelRatting.vue
+22
View File
@@ -0,0 +1,22 @@
<script setup lang="ts">
import { ref } from "vue";
const rating6 = ref(3);
const rating7 = ref(2);
</script>
<template>
<div >
<v-rating
v-model="rating6"
:item-labels="['sad', '', '', '', 'happy']"
item-label-position="top"
color="warning" density="compact"
hover
></v-rating>
<v-rating class="mb-0 d-block"
v-model="rating6"
color="warning" density="compact"
hover
></v-rating>
</div>
</template>
components/ui-components/ratting/LengthRatting.vue
+9
View File
@@ -0,0 +1,9 @@
<script setup lang="ts">
import { ref } from "vue";
const rating = ref(3);
</script>
<template>
<div>
<v-rating v-model="rating" length="10" density="compact" color="warning"></v-rating>
</div>
</template>
components/ui-components/ratting/ReadOnlyRatting.vue
+9
View File
@@ -0,0 +1,9 @@
<script setup lang="ts">
import { ref } from "vue";
const rating3 = ref(2);
</script>
<template>
<div >
<v-rating v-model="rating3" readonly density="compact" color="warning"></v-rating>
</div>
</template>
components/ui-components/ratting/SizeRatting.vue
+7
View File
@@ -0,0 +1,7 @@
<template>
<div>
<v-rating class="d-block mb-2" color="warning" density="compact" value="3" size="x-small"></v-rating>
<v-rating class="d-block ml-n1" color="warning" density="compact" value="3" size="small"></v-rating>
<v-rating class="d-block ml-n2" color="warning" density="compact" value="3" size="large"></v-rating>
</div>
</template>
components/ui-components/tabs/AlignCenterTabs.vue
+90
View File
@@ -0,0 +1,90 @@
<script setup lang="ts">
import { ref } from "vue";
import img1 from '@/assets/images/blog/blog-img1.jpg';
import img2 from '@/assets/images/blog/blog-img2.jpg';
import img3 from '@/assets/images/blog/blog-img3.jpg';
import img4 from '@/assets/images/blog/blog-img4.jpg';
import img5 from '@/assets/images/blog/blog-img5.jpg';
import img6 from '@/assets/images/products/s3.jpg';
import img7 from '@/assets/images/products/s4.jpg';
import img8 from '@/assets/images/products/s5.jpg';
import img9 from '@/assets/images/products/s6.jpg';
import img10 from '@/assets/images/products/s7.jpg';
import img11 from '@/assets/images/products/s8.jpg';
import img12 from '@/assets/images/products/s9.jpg';
import img13 from '@/assets/images/products/s10.jpg';
import img14 from '@/assets/images/products/s11.jpg';
import img15 from '@/assets/images/products/s12.jpg';
const tab = ref(null);
const tab1 = ref(
[
{img: img1},
{img: img2},
{img: img3},
{img: img4},
{img: img5},
{img: img1},
]
)
const tab2 = ref(
[
{img: img6},
{img: img7},
{img: img8},
{img: img9},
{img: img10},
{img: img11},
]
)
const tab3 = ref(
[
{img: img12},
{img: img13},
{img: img14},
{img: img10},
{img: img15},
{img: img11},
]
)
</script>
<template>
<v-card elevation="0">
<v-tabs
v-model="tab"
color="primary"
align-tabs="center"
>
<v-tab value="1">Landscape</v-tab>
<v-tab value="2">Products</v-tab>
<v-tab value="3">Abstract</v-tab>
</v-tabs>
<v-card-text class="rounded-md pa-0 mt-6">
<v-window v-model="tab">
<v-window-item value="1">
<v-row>
<v-col v-for="item in tab1" :key="item.img" cols="12" md="4" sm="6">
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
</v-col>
</v-row>
</v-window-item>
<v-window-item value="2">
<v-row>
<v-col v-for="item in tab2" :key="item.img" cols="12" md="4" sm="6">
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
</v-col>
</v-row>
</v-window-item>
<v-window-item value="3">
<v-row>
<v-col v-for="item in tab3" :key="item.img" cols="12" md="4" sm="6">
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-card-text>
</v-card>
</template>
components/ui-components/tabs/AlignEndTabs.vue
+90
View File
@@ -0,0 +1,90 @@
<script setup lang="ts">
import { ref } from "vue";
import img1 from '@/assets/images/blog/blog-img1.jpg';
import img2 from '@/assets/images/blog/blog-img2.jpg';
import img3 from '@/assets/images/blog/blog-img3.jpg';
import img4 from '@/assets/images/blog/blog-img4.jpg';
import img5 from '@/assets/images/blog/blog-img5.jpg';
import img6 from '@/assets/images/products/s3.jpg';
import img7 from '@/assets/images/products/s4.jpg';
import img8 from '@/assets/images/products/s5.jpg';
import img9 from '@/assets/images/products/s6.jpg';
import img10 from '@/assets/images/products/s7.jpg';
import img11 from '@/assets/images/products/s8.jpg';
import img12 from '@/assets/images/products/s9.jpg';
import img13 from '@/assets/images/products/s10.jpg';
import img14 from '@/assets/images/products/s11.jpg';
import img15 from '@/assets/images/products/s12.jpg';
const tab = ref(null);
const tab1 = ref(
[
{img: img1},
{img: img2},
{img: img3},
{img: img4},
{img: img5},
{img: img1},
]
)
const tab2 = ref(
[
{img: img6},
{img: img7},
{img: img8},
{img: img9},
{img: img10},
{img: img11},
]
)
const tab3 = ref(
[
{img: img12},
{img: img13},
{img: img14},
{img: img10},
{img: img15},
{img: img11},
]
)
</script>
<template>
<v-card elevation="0">
<v-tabs
v-model="tab"
color="primary"
align-tabs="end"
>
<v-tab value="1">Landscape</v-tab>
<v-tab value="2">Products</v-tab>
<v-tab value="3">Abstract</v-tab>
</v-tabs>
<v-card-text class="rounded-md pa-0 mt-6">
<v-window v-model="tab">
<v-window-item value="1">
<v-row>
<v-col v-for="item in tab1" :key="item.img" cols="12" md="4" sm="6">
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
</v-col>
</v-row>
</v-window-item>
<v-window-item value="2">
<v-row>
<v-col v-for="item in tab2" :key="item.img" cols="12" md="4" sm="6">
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
</v-col>
</v-row>
</v-window-item>
<v-window-item value="3">
<v-row>
<v-col v-for="item in tab3" :key="item.img" cols="12" md="4" sm="6">
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-card-text>
</v-card>
</template>
components/ui-components/tabs/BasicTabs.vue
+25
View File
@@ -0,0 +1,25 @@
<script setup lang="ts">
import { ref } from "vue";
const tab = ref(null);
</script>
<template>
<v-tabs v-model="tab" bg-color="primary">
<v-tab value="one">Item One</v-tab>
<v-tab value="two">Item Two</v-tab>
<v-tab value="three">Item Three</v-tab>
</v-tabs>
<v-divider></v-divider>
<v-card-text class="bg-grey100 mt-4 rounded-md">
<v-window v-model="tab">
<v-window-item value="one">
Item One
</v-window-item>
<v-window-item value="two">
Item Two
</v-window-item>
<v-window-item value="three">
Item Three
</v-window-item>
</v-window>
</v-card-text>
</template>
components/ui-components/tabs/CenterTabs.vue
+28
View File
@@ -0,0 +1,28 @@
<script setup lang="ts">
import { ref } from "vue";
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
const tab5 = ref(null);
</script>
<template>
<v-card elevation="0" >
<v-tabs
bg-color="primary"
center-active
>
<v-tab>One</v-tab>
<v-tab>Two</v-tab>
<v-tab>Three</v-tab>
<v-tab>Four</v-tab>
<v-tab>Five</v-tab>
<v-tab>Six</v-tab>
<v-tab>Seven</v-tab>
<v-tab>Eight</v-tab>
<v-tab>Nine</v-tab>
<v-tab>Ten</v-tab>
<v-tab>Eleven</v-tab>
<v-tab>Twelve</v-tab>
<v-tab>Thirteen</v-tab>
<v-tab>Fourteen</v-tab>
</v-tabs>
</v-card>
</template>
components/ui-components/tabs/ColorTabs.vue
+25
View File
@@ -0,0 +1,25 @@
<script setup lang="ts">
import { ref } from "vue";
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
const tab6 = ref(null);
</script>
<template>
<v-tabs v-model="tab6">
<v-tab value="111111" color="secondary"> <PhoneIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item One </v-tab>
<v-tab value="222222" color="warning"> <HeartIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Two </v-tab>
<v-tab value="444444" color="primary"> <UserIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Three </v-tab>
</v-tabs>
<v-card-text class="bg-grey100 mt-4 rounded-md">
<v-window v-model="tab6">
<v-window-item value="111111">
item one
</v-window-item>
<v-window-item value="222222">
item two
</v-window-item>
<v-window-item value="444444">
item three
</v-window-item>
</v-window>
</v-card-text>
</template>
components/ui-components/tabs/CustomIcons.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<v-sheet elevation="0">
<v-tabs
bg-color="primary"
next-icon="mdi-arrow-right-bold-box-outline"
prev-icon="mdi-arrow-left-bold-box-outline"
show-arrows
>
<v-tab
v-for="i in 30"
:key="i"
>
Item {{ i }}
</v-tab>
</v-tabs>
</v-sheet>
</template>
components/ui-components/tabs/DisableTabs.vue
+26
View File
@@ -0,0 +1,26 @@
<script setup lang="ts">
import { ref } from "vue";
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
const tab4 = ref(null);
</script>
<template>
<v-tabs v-model="tab4" color="primary">
<v-tab value="1111"> <PhoneIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item One </v-tab>
<v-tab value="2222" disabled> <HeartIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Two </v-tab>
<v-tab value="4444"> <UserIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Three </v-tab>
</v-tabs>
<v-divider></v-divider>
<v-card-text class="bg-grey100 mt-4 rounded-md">
<v-window v-model="tab4">
<v-window-item value="1111">
item one
</v-window-item>
<v-window-item value="2222">
item two
</v-window-item>
<v-window-item value="4444">
item three
</v-window-item>
</v-window>
</v-card-text>
</template>
components/ui-components/tabs/IconTabs.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
import { ref } from "vue";
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
const tab3 = ref(null);
</script>
<template>
<v-tabs v-model="tab3" color="primary">
<v-tab value="111">
<PhoneIcon stroke-width="1.5" width="22" />
</v-tab>
<v-tab value="222">
<HeartIcon stroke-width="1.5" width="22" />
</v-tab>
<v-tab value="444">
<UserIcon stroke-width="1.5" width="22" />
</v-tab>
</v-tabs>
<v-divider></v-divider>
<v-card-text class="bg-grey100 mt-4 rounded-md">
<v-window v-model="tab3">
<v-window-item value="111">
Item One
</v-window-item>
<v-window-item value="222">
Item two
</v-window-item>
<v-window-item value="444">
Item three
</v-window-item>
</v-window>
</v-card-text>
</template>
components/ui-components/tabs/IconsWithLabelTabs.vue
+37
View File
@@ -0,0 +1,37 @@
<script setup lang="ts">
import { ref } from "vue";
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
const tab = ref(null);
</script>
<template>
<v-card elevation="0">
<v-tabs v-model="tab" bg-color="primary" stacked>
<v-tab value="1">
<PhoneIcon stroke-width="1.5" width="20" />
Recents
</v-tab>
<v-tab value="2">
<HeartIcon stroke-width="1.5" width="20" />
Favorites
</v-tab>
<v-tab value="3">
<UserIcon stroke-width="1.5" width="20" />
Nearby
</v-tab>
</v-tabs>
<v-card-text class="bg-grey100 rounded-md mt-4">
<v-window v-model="tab">
<v-window-item value="1">
Item One
</v-window-item>
<v-window-item value="2">
Item two
</v-window-item>
<v-window-item value="3">
Item three
</v-window-item>
</v-window>
</v-card-text>
</v-card>
</template>
components/ui-components/tooltip/IconTooltip.vue
+40
View File
@@ -0,0 +1,40 @@
<script setup lang="ts">
import { ref } from "vue";
import { HeartIcon, MoodSmileIcon, UserIcon } from "vue-tabler-icons";
</script>
<template>
<div class="d-flex gap-3 justify-center">
<v-avatar size="35">
<v-btn class="rounded-circle" color="primary" flat>
<UserIcon size="22"/>
<v-tooltip activator="parent" location="start">
primary
</v-tooltip>
</v-btn>
</v-avatar>
<v-avatar size="35">
<v-btn class="rounded-circle" color="secondary" flat>
<HeartIcon color="white" size="22" />
<v-tooltip activator="parent" location="top">
secondary
</v-tooltip>
</v-btn>
</v-avatar>
<v-avatar size="35">
<v-btn class="rounded-circle" color="warning" flat>
<MoodSmileIcon size="22" color="white"/>
<v-tooltip activator="parent" location="end">
warning
</v-tooltip>
</v-btn>
</v-avatar>
<v-avatar size="35">
<v-btn class="rounded-circle" color="error" flat>
<HeartIcon size="22"/>
<v-tooltip activator="parent" location="bottom">
error
</v-tooltip>
</v-btn>
</v-avatar>
</div>
</template>
components/ui-components/tooltip/SimpleTooltip.vue
+20
View File
@@ -0,0 +1,20 @@
<template>
<div class="d-flex flex-column flex-sm-row gap-3 justify-center">
<v-btn color="primary" flat>
Start
<v-tooltip activator="parent" location="start">Tooltip</v-tooltip>
</v-btn>
<v-btn color="primary" flat>
End
<v-tooltip activator="parent" location="end">Tooltip</v-tooltip>
</v-btn>
<v-btn color="primary" flat>
Top
<v-tooltip activator="parent" location="top">Tooltip</v-tooltip>
</v-btn>
<v-btn color="primary" flat>
Bottom
<v-tooltip activator="parent" location="bottom">Tooltip</v-tooltip>
</v-btn>
</div>
</template>
components/ui-components/tooltip/ToggleTolltip.vue
+19
View File
@@ -0,0 +1,19 @@
<script setup lang="ts">
import { ref } from "vue";
const show = ref(false);
</script>
<template>
<div class="d-flex">
<v-btn @click="show = !show" color="primary" flat>
{{ !show ? 'Show Tooltip' : 'Hide Tooltip' }}
</v-btn>
<v-tooltip v-model="show" top>
<template v-slot:activator="{ props }">
<v-btn icon v-bind="props" class="ml-6" color="primary" flat>
<v-icon> mdi-cart </v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
</div>
</template>