feat: match text component to related plugin (#39)

shuriken-ui · Aug 7, 2023 · e37b83a · e37b83a
1 parent db39d95
commit e37b83a
Showing 1 changed file with 40 additions and 30 deletions.
diff --git a/components/base/BaseText.vue b/components/base/BaseText.vue
@@ -35,39 +35,49 @@ const props = withDefaults(
     lead: 'normal',
   }
 )
+
+const sizeStyle = {
+  xs: 'nui-content-xs',
+  sm: 'nui-content-sm',
+  md: 'nui-content-md',
+  lg: 'nui-content-lg',
+  xl: 'nui-content-xl',
+  '2xl': 'nui-content-2xl',
+  '3xl': 'nui-content-3xl',
+  '4xl': 'nui-content-4xl',
+  '5xl': 'nui-content-5xl',
+  '6xl': 'nui-content-6xl',
+  '7xl': 'nui-content-7xl',
+  '8xl': 'nui-content-8xl',
+  '9xl': 'nui-content-9xl',
+}
+const weightStyle = {
+  light: 'nui-weight-light',
+  normal: 'nui-weight-normal',
+  medium: 'nui-weight-medium',
+  semibold: 'nui-weight-semibold',
+  bold: 'nui-weight-bold',
+  extrabold: 'nui-weight-extrabold',
+}
+const leadStyle = {
+  none: 'nui-lead-none',
+  tight: 'nui-lead-tight',
+  snug: 'nui-lead-snug',
+  normal: 'nui-lead-normal',
+  relaxed: 'nui-lead-relaxed',
+  loose: 'nui-lead-loose',
+}
+
+const classes = computed(() => [
+  'nui-text',
+  sizeStyle[props.size],
+  weightStyle[props.weight],
+  leadStyle[props.lead],
+])
 </script>
 
 <template>
-  <p
-    class="font-sans"
-    :class="[
-      props.size === 'xs' && 'text-xs',
-      props.size === 'sm' && 'text-sm',
-      props.size === 'md' && 'text-base',
-      props.size === 'lg' && 'text-lg',
-      props.size === 'xl' && 'text-xl',
-      props.size === '2xl' && 'text-2xl',
-      props.size === '3xl' && 'text-3xl',
-      props.size === '4xl' && 'text-4xl',
-      props.size === '5xl' && 'text-5xl',
-      props.size === '6xl' && 'text-6xl',
-      props.size === '7xl' && 'text-7xl',
-      props.size === '8xl' && 'text-8xl',
-      props.size === '9xl' && 'text-9xl',
-      props.weight === 'light' && 'font-light',
-      props.weight === 'normal' && 'font-normal',
-      props.weight === 'medium' && 'font-medium',
-      props.weight === 'semibold' && 'font-semibold',
-      props.weight === 'bold' && 'font-bold',
-      props.weight === 'extrabold' && 'font-extrabold',
-      props.lead === 'none' && 'leading-none',
-      props.lead === 'normal' && 'leading-normal',
-      props.lead === 'tight' && 'leading-tight',
-      props.lead === 'snug' && 'leading-snug',
-      props.lead === 'normal' && 'leading-normal',
-      props.lead === 'loose' && 'leading-loose',
-    ]"
-  >
+  <p :class="classes">
     <slot></slot>
   </p>
 </template>