update Badge component

cherryful · Nov 12, 2024 · c826f80 · c826f80
1 parent e72b239
commit c826f80
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 15 deletions.
diff --git a/packages/components/src/components/Alert.vue b/packages/components/src/components/Alert.vue
@@ -71,7 +71,7 @@ export default {
     </div>
     <div v-if="closeable" class="ml-2 h-6 w-6 flex items-center justify-center">
       <button
-        class="i-mdi:close-thick h-4 w-4 cursor-pointer transition hover:scale-125"
+        class="i-mdi:close h-4 w-4 cursor-pointer transition hover:scale-125"
         @click="$emit('close')"
       />
     </div>

diff --git a/packages/components/src/components/Badge.vue b/packages/components/src/components/Badge.vue
@@ -18,47 +18,63 @@ export default {
 </script>
 
 <template>
-  <span class="relative cursor-default">
+  <div class="relative cursor-default">
     <slot />
-    <span
-      class="absolute translate-x-1/2 rounded-full text-white -right-1 -top-1/2"
-      :class="[
-        content ? 'min-w-5' : 'h-3 w-3',
+    <p
+      v-if="content"
+      class="absolute flex translate-x-1/2 items-center justify-center rounded-full object-cover text-white" :class="[
         [type],
         {
-          'text-xs': size === 'sm',
-          'px-1 py-0.5 text-xs': size === 'md',
-          'px-2.5 py-1 text-sm ': size === 'lg',
+          'text-[8px] p-[2px] -top-1 right-0  aspect-square': size === 'sm',
+          'px-1 py-0.5 text-xs -top-1/2 -right-1  aspect-square': size === 'md',
+          'px-1.5 py-[3px] text-sm -top-1/3 -right-1/4': size === 'lg',
         },
-      ]"
+      ]" :style="{ lineHeight: '1' }"
     >
       {{ content }}
-    </span>
-  </span>
+    </p>
+    <span
+      v-else class="absolute translate-x-1/2 rounded-full text-white" :class="[
+        [type],
+        {
+          'h-2 w-2 top-0.5 right-0': size === 'sm',
+          'h-3 w-3 top-0 -right-0.5': size === 'md',
+          'h-4 w-4 -top-1 -right-1': size === 'lg',
+        },
+      ]"
+    />
+  </div>
 </template>
 
 <style scoped>
 .default {
   @apply text-black bg-gray-100
 }
+
 .primary {
   @apply text-white bg-primary-500 bg-opacity-80
 }
+
 .secondary {
   @apply text-white bg-secondary-500
 }
+
 .accent {
   @apply text-white bg-accent-500
 }
+
 .success {
   @apply text-white bg-success-500
 }
+
 .info {
   @apply text-white bg-info-500
 }
+
 .warning {
   @apply text-white bg-warning-500
 }
+
 .error {
   @apply text-white bg-error-500
 }

diff --git a/packages/components/src/components/Drawer.vue b/packages/components/src/components/Drawer.vue
@@ -6,12 +6,16 @@ const props = withDefaults(defineProps<{
   placement?: 'top' | 'right' | 'bottom' | 'left'
   width?: 'sm' | 'md' | 'lg' | '1/2' | '1/3' | '1/4' | 'full'
   duration?: '100' | '200' | '300' | '400' | '500' | '600'
+  title: string
+  header: boolean
 }>(), {
   modelValue: false,
   placement: 'left',
   duration: '200',
   width: 'md',
   height: 'md',
+  title: 'Drawar Header',
+  header: true,
 })
 
 const emit = defineEmits(['update:modelValue', 'close'])
@@ -47,9 +51,7 @@ export default {
       <div class="absolute inset-0 bg-gray-500 opacity-75" />
     </div>
     <div
-      v-bind="$attrs"
-      class="fixed z-50 overflow-y-auto bg-white transition-all duration-200"
-      :class="[`duration-${duration}`, {
+      v-bind="$attrs" class="fixed z-50 overflow-y-auto bg-white p-4 transition-all duration-200" :class="[`duration-${duration}`, {
         [`h-screen w-${width}`]: placement === 'right' || placement === 'left',
         [`w-full h-${width}`]: placement === 'top' || placement === 'bottom',
 
@@ -66,6 +68,16 @@ export default {
         'bottom-0 left-0': placement === 'bottom' && modelValue,
       }]"
     >
+      <div v-if="header">
+        <div class="h-14 w-full flex items-center justify-between">
+          <p class="text-xl font-semibold">
+            {{ title }}
+          </p>
+          <div class="h-7 w-7 flex cursor-pointer items-center justify-center rounded-full rounded-full bg-gray-50 p-1 text-gray-600 hover:bg-gray-100 hover:text-gray-800">
+            <p class="i-mdi:close h-6 w-6 font-light" @click="close" />
+          </div>
+        </div>
+      </div>
       <slot />
     </div>
   </Teleport>