fix(BaseMessage): rename type prop to color, update schema and config

shuriken-ui · Feb 23, 2024 · 6c7a20c · 6c7a20c
1 parent 472bf3d
commit 6c7a20c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 25 deletions.
diff --git a/.playground/pages/tests/base/message.vue b/.playground/pages/tests/base/message.vue
@@ -10,27 +10,27 @@ definePageMeta({
 <template>
   <div>
     <NuiPreviewContainer title="BaseMessage">
-      <NuiPreview title="Type" description="Message component types">
+      <NuiPreview title="Color" description="Message component colors">
         <div class="grid grid-cols-1 md:grid-cols-2 max-w-2xl gap-4">
           <BaseMessage>A successful message.</BaseMessage>
-          <BaseMessage type="info">An information message.</BaseMessage>
-          <BaseMessage type="warning">A warning message.</BaseMessage>
-          <BaseMessage type="danger">A destructive message.</BaseMessage>
-          <BaseMessage type="default">A default message.</BaseMessage>
-          <BaseMessage type="muted">A muted message.</BaseMessage>
+          <BaseMessage color="info">An information message.</BaseMessage>
+          <BaseMessage color="warning">A warning message.</BaseMessage>
+          <BaseMessage color="danger">A destructive message.</BaseMessage>
+          <BaseMessage color="default">A default message.</BaseMessage>
+          <BaseMessage color="muted">A muted message.</BaseMessage>
         </div>
       </NuiPreview>
 
       <NuiPreview title="Icon" description="Message component icons">
         <div class="grid grid-cols-1 md:grid-cols-2 max-w-2xl gap-4">
           <BaseMessage icon>A successful message.</BaseMessage>
-          <BaseMessage type="info" icon>An information message.</BaseMessage>
-          <BaseMessage type="warning" icon>A warning message.</BaseMessage>
-          <BaseMessage type="danger" icon>A destructive message.</BaseMessage>
-          <BaseMessage type="default" icon="mingcute:avalanche-avax-fill">
+          <BaseMessage color="info" icon>An information message.</BaseMessage>
+          <BaseMessage color="warning" icon>A warning message.</BaseMessage>
+          <BaseMessage color="danger" icon>A destructive message.</BaseMessage>
+          <BaseMessage color="default" icon="mingcute:avalanche-avax-fill">
             A default message.
           </BaseMessage>
-          <BaseMessage type="muted" icon="mingcute:desk-lamp-fill">
+          <BaseMessage color="muted" icon="mingcute:desk-lamp-fill">
             A muted message.
           </BaseMessage>
         </div>
@@ -39,13 +39,13 @@ definePageMeta({
       <NuiPreview title="Radius" description="Message component radiuses">
         <div class="grid grid-cols-1 md:grid-cols-2 max-w-2xl gap-4">
           <BaseMessage icon rounded="sm">A successful message.</BaseMessage>
-          <BaseMessage type="info" icon rounded="md">
+          <BaseMessage color="info" icon rounded="md">
             An information message.
           </BaseMessage>
-          <BaseMessage type="warning" icon rounded="lg">
+          <BaseMessage color="warning" icon rounded="lg">
             A warning message.
           </BaseMessage>
-          <BaseMessage type="danger" icon rounded="full">
+          <BaseMessage color="danger" icon rounded="full">
             A destructive message.
           </BaseMessage>
         </div>

diff --git a/app.config.ts b/app.config.ts
@@ -104,7 +104,7 @@ export default defineAppConfig({
       contrast: 'default',
     },
     BaseMessage: {
-      type: 'success',
+      color: 'success',
       rounded: 'sm',
       closable: false,
     },

diff --git a/components/base/BaseMessage.vue b/components/base/BaseMessage.vue
@@ -2,9 +2,9 @@
 const props = withDefaults(
   defineProps<{
     /**
-     * The type of the message.
+     * The color of the message.
      */
-    type?:
+    color?:
       | 'default'
       | 'default-contrast'
       | 'muted'
@@ -61,7 +61,7 @@ const props = withDefaults(
     }
   }>(),
   {
-    type: undefined,
+    color: undefined,
     rounded: undefined,
     message: '',
     icon: false,
@@ -73,7 +73,7 @@ const emit = defineEmits<{
   close: []
 }>()
 
-const type = useNuiDefaultProperty(props, 'BaseMessage', 'type')
+const color = useNuiDefaultProperty(props, 'BaseMessage', 'color')
 const rounded = useNuiDefaultProperty(props, 'BaseMessage', 'rounded')
 
 const radiuses = {
@@ -84,7 +84,7 @@ const radiuses = {
   full: 'nui-message-rounded-full',
 } as Record<string, string>
 
-const types = {
+const colors = {
   default: 'nui-message-default',
   'default-contrast': 'nui-message-default-contrast',
   muted: 'nui-message-muted',
@@ -109,8 +109,8 @@ const iconTypes = {
 const icon = computed(() =>
   typeof props.icon === 'string'
     ? props.icon
-    : type.value
-      ? iconTypes[type.value]
+    : color.value
+      ? iconTypes[color.value]
       : '',
 )
 </script>
@@ -120,7 +120,7 @@ const icon = computed(() =>
     class="nui-message"
     :class="[
       rounded && radiuses[rounded],
-      type && types[type],
+      color && colors[color],
       classes?.wrapper,
     ]"
   >

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -449,11 +449,11 @@ export default defineNuxtSchema({
       },
       BaseMessage: {
         /**
-         * The type of the message.
+         * The color of the message.
          *
          * @type {'default' | 'muted' | 'primary' | 'info' | 'success' | 'warning' | 'danger'}
          */
-        type: 'success',
+        color: 'success',
         /**
          * The radius of the message.
          *