jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add size logic

Browse Source
This commit is contained in:
hirakei1203
2022-10-28 22:32:12 +09:00
parent 42ed8cfc19
commit a8cfc85b36
4 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Button/composables/useButtonClasses.ts
View File

@@ -122,7 +122,6 @@ const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
}, },
} }
const buttonSizeClasses: Record<ButtonSize, string> = { const buttonSizeClasses: Record<ButtonSize, string> = {
xs: 'text-xs px-2 py-1', xs: 'text-xs px-2 py-1',
sm: 'text-sm px-3 py-1.5', sm: 'text-sm px-3 py-1.5',

8
src/components/Progress/Progress.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClass">
<div class="h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div> <div class="rounded-full" :class="wrapperClasses" style="width: 45%"></div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -31,10 +31,10 @@ const props = defineProps({
}, },
size: { size: {
type: String, // 'sm' | 'md' | 'lg' | 'xl' type: String, // 'sm' | 'md' | 'lg' | 'xl'
default: 'md', default: 'lg',
}, },
}) })
const { wrapperClasses } = useProgressClasses(toRefs(props)) const { wrapperClasses, outerClass } = useProgressClasses(toRefs(props))
</script> </script>

39
src/components/Progress/composables/useProgressClasses.ts
View File

@@ -1,13 +1,14 @@
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { computed } from 'vue' import { computed } from 'vue'
import classNames from 'classnames' import classNames from 'classnames'
import type { ProgressVariant } from '../types' import type { ProgressVariant, ProgressSize } from '../types'
export type ProgressClassMap<T extends string> = { default: Record<T, string> } // export type ProgressClassMap<T extends string> = { default: Record<T, string> }
const progressColorClasses: ProgressClassMap<ProgressVariant> = { const progressColorClasses: Record<ProgressVariant, string> = {
default: { // const progressColorClasses: ProgressClassMap<ProgressVariant> = {
// default: {
default: 'bg-blue-600 dark:bg-blue-600', default: 'bg-blue-600 dark:bg-blue-600',
blue: 'bg-blue-600 dark:bg-blue-600', blue: 'bg-blue-600 dark:bg-blue-600',
alternative: 'dark:bg-gray-800', alternative: 'dark:bg-gray-800',
@@ -18,27 +19,47 @@ const progressColorClasses: ProgressClassMap<ProgressVariant> = {
yellow: 'bg-yellow-400', yellow: 'bg-yellow-400',
purple: 'bg-purple-600 dark:bg-purple-500', purple: 'bg-purple-600 dark:bg-purple-500',
pink: 'bg-pink-700 dark:bg-pink-600', pink: 'bg-pink-700 dark:bg-pink-600',
}, // },
}
const progressSizeClasses: Record<ProgressSize, string> = {
sm: 'text-sm h-1.5',
md: 'text-sm h-2.5',
lg: 'text-base h-4',
xl: 'text-base h-6',
} }
export type UseProgressClassesProps = { export type UseProgressClassesProps = {
color: Ref<ProgressVariant> color: Ref<ProgressVariant>
size: Ref<ProgressSize>
} }
export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>} { export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>, outerClass: Ref<string>} {
const bindClasses = computed(() => { const bindClasses = computed(() => {
let colorClass = '' let colorClass = ''
colorClass = progressColorClasses[props.color.value]
const color = props.color.value let sizeClass = ''
colorClass = progressColorClasses.default[color as unknown as keyof typeof progressColorClasses.default] sizeClass = progressSizeClasses[props.size.value]
return classNames( return classNames(
colorClass colorClass,
sizeClass
) )
}) })
const outerClass = computed(() => {
let outerSizeClass = ''
outerSizeClass = progressSizeClasses[props.size.value]
return classNames(
outerSizeClass
)
})
return { return {
wrapperClasses: bindClasses, wrapperClasses: bindClasses,
outerClass
} }
} }

1
src/components/Progress/types.ts
View File

@@ -1,2 +1,3 @@
export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue' export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
export type ProgressVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue' export type ProgressVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'