first commit

This commit is contained in:
2025-05-23 15:36:39 +07:00
commit 692ffdf2f1
129 changed files with 12232 additions and 0 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>