first commit
This commit is contained in:
37
pages/ui-components/Alerts.vue
Normal file
37
pages/ui-components/Alerts.vue
Normal 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>
|
||||
64
pages/ui-components/Buttons.vue
Normal file
64
pages/ui-components/Buttons.vue
Normal 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>
|
||||
50
pages/ui-components/Cards.vue
Normal file
50
pages/ui-components/Cards.vue
Normal 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>
|
||||
111
pages/ui-components/Tables.vue
Normal file
111
pages/ui-components/Tables.vue
Normal 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>
|
||||
Reference in New Issue
Block a user