rahmat.suwardianto.1807/template-nuxtsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
meninjar
2025-06-20 02:59:01 +00:00
commit be4de9f24a
431 changed files with 35653 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/ui-components/alert/Basic.vue Executable file
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>

30
components/ui-components/alert/Closable.vue Executable file
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>

8
components/ui-components/alert/Filled.vue Executable file
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>

10
components/ui-components/button/BaseButtons.vue Executable file
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>

12
components/ui-components/button/ColorsButtons.vue Executable file
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>

9
components/ui-components/button/IconColorSizes.vue Executable file
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>

11
components/ui-components/button/OutlinedButtons.vue Executable file
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>

23
components/ui-components/button/SizeButtons.vue Executable file
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>

12
components/ui-components/button/TextButtons.vue Executable file
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>

82
components/ui-components/cards/CardsContentWrap.vue Executable file
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>

34
components/ui-components/cards/CardsMedia.vue Executable file
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>

12
components/ui-components/cards/CardsProps.vue Executable file
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>

14
components/ui-components/cards/CardsSlots.vue Executable file
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>

49
components/ui-components/cards/CardsTwitter.vue Executable file
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>

115
components/ui-components/cards/CardsWeather.vue Executable file
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>