feat(noti): type

Rock070 · Sep 16, 2023 · c1638c8 · c1638c8
1 parent a694b10
commit c1638c8
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 10 deletions.
diff --git a/packages/core/src/components/AtomicProgress.vue b/packages/core/src/components/AtomicProgress.vue
@@ -33,14 +33,13 @@ withDefaults(defineProps<AtomicProgressProps>(), {
   border-radius: 10px;
   height: 4px;
   overflow: hidden;
-
 }
 
-.vue3-noti__progress::-webkit-progress-value {
-  background-color: #0235E6
+.vue3-noti__progress::-webkit-progress-bar {
+  background-color: var(--progress-bg-color)
 }
 
-.vue3-noti__progress::-webkit-progress-bar {
-  background: gray;
+.vue3-noti__progress::-webkit-progress-value {
+  background: var(--progress-value-color);
 }
 </style>
diff --git a/packages/core/src/components/Noti.vue b/packages/core/src/components/Noti.vue
@@ -179,8 +179,23 @@ bus.on(publishEvent)
 </template>
 
 <style>
-.vue3-noti {
+:root {
   --padding: 16px;
+
+  --success-color: #74F246;
+  --success-text-color: black;
+
+  --info-color: #3585F2;
+  --info-text-color: white;
+
+  --warning-color: #E8D943;
+  --warning-text-color: white;
+
+  --error-color: #ED4D4C;
+  --error-text-color: white;
+
+  --progress-bg-color: black;
+  --progress-value-color: #fdd;
 }
 
 .vue3-noti .vue3-noti-group {
@@ -228,12 +243,31 @@ bus.on(publishEvent)
   position: relative;
   font-size: 32px;
   background-color: chartreuse;
-  color: black;
   border-radius: 12px;
   padding: 10px 20px;
   overflow: hidden;
 }
 
+.vue3-noti .vue3-noti-group .vue3-noti-group__item.vue3-noti-group-item--success {
+  background-color: var(--success-color);
+  color: var(--success-text-color);
+}
+
+.vue3-noti .vue3-noti-group .vue3-noti-group__item.vue3-noti-group-item--info {
+  background-color: var(--info-color);
+  color: var(--info-text-color);
+}
+
+.vue3-noti .vue3-noti-group .vue3-noti-group__item.vue3-noti-group-item--warning {
+  background-color: var(--warning-color);
+  color: var(--warning-text-color);
+}
+
+.vue3-noti .vue3-noti-group .vue3-noti-group__item.vue3-noti-group-item--error {
+  background-color: var(--error-color);
+  color: var(--error-text-color);
+}
+
 .vue3-noti .vue3-noti__progress {
   position: absolute;
   bottom: 0;

diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -14,7 +14,7 @@ const options = ref<NotiOptions>({
 
   closeOnClick: true,
   position: 'top-right',
-  type: 'info',
+  type: 'success',
 })
 
 const durationSecond = computed(() => {
@@ -74,8 +74,8 @@ const durationSecond = computed(() => {
       <div class="radio-group">
         <!-- position -->
         <div class="field-group">
-          <label for="position-top-right">top-right: </label>
-          <input id="position-top-right" v-model="options.position" value="top-right" name="position" type="radio">
+          <label for="position-success">success: </label>
+          <input id="position-success" v-model="options.position" value="success" name="position" type="radio">
         </div>
         <div class="field-group">
           <label for="position-top-left">top-left: </label>
@@ -98,6 +98,26 @@ const durationSecond = computed(() => {
           <input id="position-middle-bottom" v-model="options.position" value="middle-bottom" name="position" type="radio">
         </div>
       </div>
+
+      <div class="radio-group">
+        <!-- type -->
+        <div class="field-group">
+          <label for="type-success">success: </label>
+          <input id="type-success" v-model="options.type" value="success" name="type" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="type-info">info: </label>
+          <input id="type-info" v-model="options.type" value="info" name="type" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="type-warning">warning: </label>
+          <input id="type-warning" v-model="options.type" value="warning" name="type" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="type-error">error: </label>
+          <input id="type-error" v-model="options.type" value="error" name="type" type="radio">
+        </div>
+      </div>
     </div>
   </div>
 </template>