arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 16:30:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: migrate components to typescript setup (#55)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sylvain Marroufin
2022-05-09 16:05:07 +02:00
committed by GitHub
parent 6c2f93f262
commit 39bf242f78
19 changed files with 1538 additions and 1684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/runtime/components/layout/Card.vue
View File

@@ -22,93 +22,86 @@
</component>
</template>
<script>
<script setup lang="ts">
import { computed } from 'vue'
import { classNames } from '../../utils/'
import $ui from '#build/ui'
export default {
props: {
padded: {
type: Boolean,
default: false
},
rounded: {
type: Boolean,
default: true
},
baseClass: {
type: String,
default: () => $ui.card.base
},
backgroundClass: {
type: String,
default: () => $ui.card.background
},
borderColorClass: {
type: String,
default: () => $ui.card.border
},
shadowClass: {
type: String,
default: () => $ui.card.shadow
},
ringClass: {
type: String,
default: () => $ui.card.ring
},
roundedClass: {
type: String,
default: () => $ui.card.rounded,
validator (value) {
return !value || ['sm', 'md', 'lg', 'xl', '2xl', '3xl'].map(size => `rounded-${size}`).includes(value)
}
},
bodyClass: {
type: String,
default: () => $ui.card.body
},
bodyBackgroundClass: {
type: String,
default: null
},
headerClass: {
type: String,
default: () => $ui.card.header
},
headerBackgroundClass: {
type: String,
default: null
},
footerClass: {
type: String,
default: () => $ui.card.footer
},
footerBackgroundClass: {
type: String,
default: null
},
customClass: {
type: String,
default: null
const props = defineProps({
padded: {
type: Boolean,
default: false
},
rounded: {
type: Boolean,
default: true
},
baseClass: {
type: String,
default: () => $ui.card.base
},
backgroundClass: {
type: String,
default: () => $ui.card.background
},
borderColorClass: {
type: String,
default: () => $ui.card.border
},
shadowClass: {
type: String,
default: () => $ui.card.shadow
},
ringClass: {
type: String,
default: () => $ui.card.ring
},
roundedClass: {
type: String,
default: () => $ui.card.rounded,
validator (value: string) {
return !value || ['sm', 'md', 'lg', 'xl', '2xl', '3xl'].map(size => `rounded-${size}`).includes(value)
}
},
setup (props) {
const cardClass = computed(() => {
return classNames(
props.baseClass,
props.padded && props.rounded && props.roundedClass,
!props.padded && props.rounded && `sm:${props.roundedClass}`,
props.ringClass,
props.shadowClass,
props.backgroundClass,
props.customClass
)
})
return {
cardClass
}
bodyClass: {
type: String,
default: () => $ui.card.body
},
bodyBackgroundClass: {
type: String,
default: null
},
headerClass: {
type: String,
default: () => $ui.card.header
},
headerBackgroundClass: {
type: String,
default: null
},
footerClass: {
type: String,
default: () => $ui.card.footer
},
footerBackgroundClass: {
type: String,
default: null
},
customClass: {
type: String,
default: null
}
}
})
const cardClass = computed(() => {
return classNames(
props.baseClass,
props.padded && props.rounded && props.roundedClass,
!props.padded && props.rounded && `sm:${props.roundedClass}`,
props.ringClass,
props.shadowClass,
props.backgroundClass,
props.customClass
)
})
</script>