Merge pull request 'add component base' (#1) from develop into production
All checks were successful
Deploy Application / deploy (push) Successful in 5s
All checks were successful
Deploy Application / deploy (push) Successful in 5s
Reviewed-on: #1
This commit is contained in:
48
src/components/Typography/UiHeading.vue
Normal file
48
src/components/Typography/UiHeading.vue
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<component
|
||||||
|
:is="tag"
|
||||||
|
class="font-semibold text-twilight-900"
|
||||||
|
:class="[
|
||||||
|
{
|
||||||
|
'text-3xl md:text-4xl lg:text-5xl 2xl:text-6xl': size === '600',
|
||||||
|
}, // H1
|
||||||
|
{
|
||||||
|
'text-3xl md:text-4xl 2xl:text-5xl': size === '500',
|
||||||
|
}, // H2
|
||||||
|
{
|
||||||
|
'text-2xl md:text-3xl 2xl:text-4xl': size === '400',
|
||||||
|
}, // H3
|
||||||
|
{
|
||||||
|
'text-xl lg:text-2xl 2xl:text-3xl': size === '300',
|
||||||
|
}, // H4
|
||||||
|
{
|
||||||
|
'text-lg md:text-xl': size === '200',
|
||||||
|
}, // H5
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { toRefs } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
/**
|
||||||
|
* Tag name: h1 to h6
|
||||||
|
*/
|
||||||
|
tag: {
|
||||||
|
type: String,
|
||||||
|
default: 'h2',
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Heading size: '600' (largest) to '200' (smallest)
|
||||||
|
*/
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: '500',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const { size, tag } = toRefs(props)
|
||||||
|
</script>
|
45
src/components/Typography/UiParagraph.vue
Normal file
45
src/components/Typography/UiParagraph.vue
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<component
|
||||||
|
:is="as"
|
||||||
|
class="text-gray-900"
|
||||||
|
:class="[
|
||||||
|
{
|
||||||
|
'text-2xl lg:text-3xl 2xl:text-4xl': size === '600',
|
||||||
|
}, // 24px
|
||||||
|
{
|
||||||
|
'text-xl lg:text-2xl 2xl:text-3xl': size === '500',
|
||||||
|
}, // 20px
|
||||||
|
{
|
||||||
|
'text-lg lg:text-xl 2xl:text-2xl': size === '400',
|
||||||
|
}, // 18px
|
||||||
|
{
|
||||||
|
'text-base lg:text-lg': size === '300',
|
||||||
|
}, // 16px
|
||||||
|
{
|
||||||
|
'text-sm': size === '200',
|
||||||
|
}, // 14px
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { toRefs } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
as: {
|
||||||
|
type: String,
|
||||||
|
default: 'p',
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Tailwind text size from 600 to 200
|
||||||
|
*/
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: '300',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const { size, as } = toRefs(props)
|
||||||
|
</script>
|
10
src/components/UiButton/UiButton.params.ts
Normal file
10
src/components/UiButton/UiButton.params.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export const colorVariants = {
|
||||||
|
primary: ['bg-accent-50', 'text-primary', 'hover:bg-accent-100', 'active:bg-accent-150'],
|
||||||
|
secondary: [
|
||||||
|
'bg-transparent',
|
||||||
|
'text-primary',
|
||||||
|
'hover:bg-accent-50',
|
||||||
|
'border:bg-accent-50',
|
||||||
|
'border',
|
||||||
|
],
|
||||||
|
}
|
45
src/components/UiButton/UiButton.vue
Normal file
45
src/components/UiButton/UiButton.vue
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<component
|
||||||
|
:is="tag"
|
||||||
|
class="px-24 py-4 rounded-[20px] text-[30px] cursor-pointer"
|
||||||
|
:class="{ baseStyle, size }"
|
||||||
|
data-ui="ui-button"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { toRefs, computed } from 'vue'
|
||||||
|
import { colorVariants } from './UiButton.params.ts'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
tag: {
|
||||||
|
type: String,
|
||||||
|
default: 'button',
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
type: String as () => 'primary' | 'secondary',
|
||||||
|
default: 'primary',
|
||||||
|
validator: (value) => {
|
||||||
|
return ['primary', 'secondary'].includes(value as string)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: 'font-bold',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const { tag, variants } = toRefs(props)
|
||||||
|
|
||||||
|
const colorClasses: Record<'primary' | 'secondary', string[]> = {
|
||||||
|
primary: colorVariants.primary,
|
||||||
|
secondary: colorVariants.secondary,
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseStyle = computed(() => {
|
||||||
|
const variant = variants.value as 'primary' | 'secondary'
|
||||||
|
return colorClasses[variant]?.join(' ') || ''
|
||||||
|
})
|
||||||
|
</script>
|
Reference in New Issue
Block a user