ragil/Matdash_nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Firs Commit

Browse Source
This commit is contained in:
STIM RSSA
2025-03-21 09:37:29 +07:00
commit b5f22f157e
98 changed files with 16210 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/style-components/shadow/Shadow.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
import UiParentCard from '@/components/shared/UiParentCard.vue';
</script>
<template>
<UiParentCard title="Shadow">
<v-row justify="center" class="mb-5 mt-1 px-8 px-3">
<v-col v-for="(m, n) in 25" :key="n" cols="6" sm="auto">
<v-card
:class="['d-flex justify-center align-center bg-primary py-sm-4 py-3 px-sm-8 px-4', `elevation-${n}`]">
<div>{{ n }}</div>
</v-card>
</v-col>
</v-row>
</UiParentCard>
</template>

25
components/style-components/typography/DefaultText.vue Normal file
View File

@@ -0,0 +1,25 @@
<script setup lang="ts">
import { ref } from "vue";
const colortext = ref(
[
['Text Primary', 'text-primary text-h5','text-primary text-subtitle-1 mt-1'],
['Text Secondary', 'text-secondary text-h5','text-secondary text-subtitle-1 mt-1'],
['Text Info', 'text-info text-h5','text-info text-subtitle-1 mt-1'],
['Text Warning', 'text-warning text-h5','text-warning text-subtitle-1 mt-1'],
['Text Error', 'text-error text-h5','text-error text-subtitle-1 mt-1'],
['Text Success', 'text-success text-h5','text-success text-subtitle-1 mt-1'],
]
)
</script>
<template>
<div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
<div class="mb-6" v-for="[name1, cls1,cls2] in colortext" :key="name1" >
<v-card elevation="10" >
<div class="py-6 px-4">
<h5 :class="[cls1, '']">{{ name1 }} </h5>
<div :class="[cls2, '']">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
</div>
</v-card>
</div>
</div>
</template>

49
components/style-components/typography/Heading.vue Normal file
View File

@@ -0,0 +1,49 @@
<script setup lang="ts">
import { ref } from "vue";
const headings = ref([
['h1.Heading', 'text-h1', 'font size: 30 | line-height: 45 | font weight: 500'],
['h2.Heading', 'text-h2', 'font size: 24 | line-height: 36 | font weight: 500'],
['h3.Heading', 'text-h3', 'font size: 21 | line-height: 31.5 | font weight: 500'],
['h4.Heading', 'text-h4', 'font size: 18 | line-height: 27 | font weight: 500'],
['h5.Heading', 'text-h5', 'font size: 16 | line-height: 24 | font weight: 500'],
['h6.Heading', 'text-h6', 'font size: 14 | line-height: 21 | font weight: 500'],
]);
const subtext = ref(
[
['Subtitle 1.', 'text-subtitle-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 28 | font weight: 400'],
['Subtitle 2.', 'text-subtitle-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 21 | font weight: 400'],
['Body 1.', 'text-body-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 24 | font weight: 400'],
['Body 2.', 'text-body-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 20 | font weight: 400'],
['Caption.', 'text-caption', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 19 | font weight: 400'],
['OVERLINE.', 'text-overline letter-spacing-0', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 31 | font weight: 400']
]
)
</script>
<template>
<div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
<div class="mb-6" v-for="[name, cls, val] in headings" :key="name">
<v-card elevation="10">
<div class="py-6 px-4">
<div :class="[cls, '']">{{ name }}</div>
<div class="text-body-1">
<div class="text-muted">{{ val }}</div>
</div>
</div>
</v-card>
</div>
</div>
<div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
<div class="mb-6" v-for="[name1, cls1, val1, prop] in subtext" :key="name1">
<v-card elevation="10">
<div class="py-6 px-4">
<div :class="[cls1, '']">{{ name1 }} <span>{{ val1 }}</span></div>
<div class="text-body-1 ">
<div class="text-muted">{{ prop }}</div>
</div>
</div>
</v-card>
</div>
</div>
</template>