arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-18 22:11:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module)!: use tailwind-merge for app.config & move config to components & type props (#692)

Browse Source 
Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
Benjamin Canac
2023-09-20 18:07:51 +02:00
committed by GitHub
parent 2c98628f98
commit 34d2f57801
59 changed files with 835 additions and 882 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/runtime/components/elements/Button.vue
View File

@@ -19,17 +19,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import ULink from '../elements/Link.vue'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { button } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
export default defineComponent({
components: {
@@ -63,26 +63,26 @@ export default defineComponent({
default: true
},
size: {
type: String,
default: () => appConfig.ui.button.default.size,
type: String as PropType<ButtonSize>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.button.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.button.default.color,
type: String as PropType<ButtonColor>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.button.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.button.default.variant,
type: String as PropType<ButtonVariant>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.button.variant),
...Object.values(appConfig.ui.button.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -92,7 +92,7 @@ export default defineComponent({
},
loadingIcon: {
type: String,
default: () => appConfig.ui.button.default.loadingIcon
default: () => config.default.loadingIcon
},
leadingIcon: {
type: String,
@@ -119,15 +119,12 @@ export default defineComponent({
default: false
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.button>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.button>>(() => defuTwMerge({}, props.ui, appConfig.ui.button))
setup (props, { slots }) {
const { ui, attrs, attrsClass } = useUI('button', props.ui, config)
const isLeading = computed(() => {
return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
@@ -151,7 +148,7 @@ export default defineComponent({
props.padded && ui.value[isSquare.value ? 'square' : 'padding'][props.size],
variant?.replaceAll('{color}', props.color),
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
), attrs.class as string)
), attrsClass)
})
const leadingIconName = computed(() => {
@@ -187,7 +184,7 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
attrs,
isLeading,
isTrailing,
isSquare,