From 56fb0d5bece1e9fb1a4b67a0e814fa7118613ffa Mon Sep 17 00:00:00 2001 From: hirakei1203 Date: Tue, 6 Dec 2022 21:59:45 +0900 Subject: [PATCH] add/size_props --- src/components/Rating/Rating.vue | 19 ++++++++----- .../Rating/composables/useRatingClasses.ts | 27 +++++++++++++++++++ src/components/Rating/types.ts | 1 + 3 files changed, 41 insertions(+), 6 deletions(-) create mode 100644 src/components/Rating/composables/useRatingClasses.ts create mode 100644 src/components/Rating/types.ts diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue index be45f18..2b707f2 100644 --- a/src/components/Rating/Rating.vue +++ b/src/components/Rating/Rating.vue @@ -1,21 +1,28 @@ diff --git a/src/components/Rating/composables/useRatingClasses.ts b/src/components/Rating/composables/useRatingClasses.ts new file mode 100644 index 0000000..177a1a6 --- /dev/null +++ b/src/components/Rating/composables/useRatingClasses.ts @@ -0,0 +1,27 @@ +import type { Ref } from 'vue' +import { computed } from 'vue' +import classNames from 'classnames' +import type { RatingSize } from '../types' + +const ratingSizeClasses: Record = { + sm: 'w-5 h-5', + md: 'w-7 h-7', + lg: 'w-10 h-10' +} + +export function useRatingClasses(props: UseRatingClassesProps):{ + sizeClasses: Ref +}{ + const sizeClasses = computed(() => { + let sizeClass = '' + sizeClass = ratingSizeClasses[props.size.value] + return classNames( + sizeClass + ) + }) + + + return { + sizeClasses + } +} \ No newline at end of file diff --git a/src/components/Rating/types.ts b/src/components/Rating/types.ts new file mode 100644 index 0000000..f6f279e --- /dev/null +++ b/src/components/Rating/types.ts @@ -0,0 +1 @@ +export type RatingSize = 'sm' | 'md' | 'lg' \ No newline at end of file