design-system-dashboard-devmunity 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [0.4.0](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.3.0...v0.4.0) (2025-11-17)
+
+
+### Features
+
+* **components:** :recycle: Reubica y cambia el nombre a los componentes `BCardInner` y `BCardHeader` ([bf321ce](https://github.com/vicventum/design-system-dashboard-devmunity/commit/bf321ce9a7991e032349074a90b336680a79c2e2))
+* **components:** :sparkles: Crea componente DUploadAvatar ([babbd45](https://github.com/vicventum/design-system-dashboard-devmunity/commit/babbd45ebaf47182375d95d8081e571314e12438))
+* **components:** :sparkles: Crea componentes `BBadge` y `CBadgeStatus` ([7aeb85a](https://github.com/vicventum/design-system-dashboard-devmunity/commit/7aeb85ae765604fdbb6f334312a7615fda32a868))
+
 # [0.3.0](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.2.0...v0.3.0) (2025-11-15)
 
 

package/app/assets/css/settings/base.css

@@ -1,38 +1,38 @@
 @layer base {
-  * {
-    /* @apply border-neutral-300; */
-  }
-  body {
-    @apply overflow-x-hidden scroll-smooth text-pretty text-neutral-950;
-    scrollbar-gutter: stable;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply text-balance;
-  }
+    * {
+        /* @apply border-neutral-300; */
+    }
+    body {
+        @apply text-default overflow-x-hidden scroll-smooth text-pretty;
+        scrollbar-gutter: stable;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply text-balance;
+    }
 
-  label {
-    @apply block cursor-pointer text-sm font-medium text-neutral-800;
-  }
+    label {
+        @apply block cursor-pointer text-sm font-medium text-neutral-800;
+    }
 
-  ::-webkit-scrollbar {
-    @apply size-1;
-  }
-  ::-webkit-scrollbar-thumb {
-    @apply rounded-sm bg-primary-400 transition-colors;
-  }
-  ::-webkit-scrollbar-track {
-    @apply bg-transparent;
-  }
+    ::-webkit-scrollbar {
+        @apply size-1;
+    }
+    ::-webkit-scrollbar-thumb {
+        @apply bg-primary-400 rounded-sm transition-colors;
+    }
+    ::-webkit-scrollbar-track {
+        @apply bg-transparent;
+    }
 
-  ::selection {
-    @apply !bg-primary-500 text-neutral-50;
-  }
-  ::-moz-selection {
-    @apply !bg-primary-500 text-neutral-50;
-  }
+    ::selection {
+        @apply !bg-primary-500 text-neutral-50;
+    }
+    ::-moz-selection {
+        @apply !bg-primary-500 text-neutral-50;
+    }
 }

package/app/assets/css/themes/components/badge.js

@@ -0,0 +1,7 @@
+export default {
+    defaultVariants: {
+        color: 'neutral',
+        variant: 'soft',
+        size: 'sm',
+    },
+}

package/app/assets/css/themes/index.js

@@ -1,4 +1,4 @@
 export { default as card } from './components/card.js'
 export { default as button } from './components/button.js'
 export { default as modal } from './components/modal.js'
-// export { default as dropdownMenu } from './components/dropdown-menu.js'
+export { default as badge } from './components/badge.js'

package/app/components/b/badge/b-badge.vue

@@ -0,0 +1,31 @@
+<script lang="jsx" setup>
+import { badge } from '~/assets/css/themes'
+
+const props = defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    value: {
+        type: String,
+        default: true,
+    },
+    styles: {
+        type: Object,
+        default: () => ({}),
+        required: true,
+    },
+    defaultStyle: {
+        type: Object,
+        default: () => badge,
+    },
+})
+</script>
+
+<template>
+    <UBadge :label="label" v-bind="styles[value] ?? props.defaultStyle">
+        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+        </template>
+    </UBadge>
+</template>

package/app/components/c/badge/c-badge-status.vue

@@ -0,0 +1,39 @@
+<script setup>
+const props = defineProps({
+    label: {
+        type: String,
+        default: '',
+        required: true,
+    },
+    value: {
+        type: String,
+        default: '',
+        required: true,
+    },
+})
+
+const styles = {
+    PLANNED: {
+        color: 'accent',
+        variant: 'soft',
+    },
+    FINISHED: {
+        color: 'success',
+        variant: 'soft',
+    },
+    CANCELLED: {
+        color: 'error',
+        variant: 'soft',
+        icon: 'material-symbols:info-outline',
+    },
+    OTHER: {
+        color: 'neutral',
+        variant: 'soft',
+    },
+}
+const defaultStyle = styles.OTHER
+</script>
+
+<template>
+    <BBadge :label="label" :value="value" :styles="styles" :default-style="defaultStyle" />
+</template>

package/app/components/{b/card/b-card-header.vue → d/card/d-card-header.vue}

@@ -55,9 +55,9 @@ function handleClickLeftButtonIcon() {
 </script>
 
 <template>
-    <BCardInner
+    <ACardInner
         :class="[
-            'flex items-center justify-between',
+            'text-default flex items-center justify-between',
             { 'bg-muted border-y border-neutral-200': variant === 'secondary' },
         ]"
     >
@@ -98,5 +98,5 @@ function handleClickLeftButtonIcon() {
         <div v-if="$slots.actions" class="p-0">
             <slot name="actions" />
         </div>
-    </BCardInner>
+    </ACardInner>
 </template>

package/app/components/d/upload/d-upload-avatar.vue

@@ -0,0 +1,76 @@
+<script setup>
+const props = defineProps({
+    src: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    buttonSize: {
+        type: String,
+        default: 'sm',
+        required: false,
+        validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
+    },
+    buttonColor: {
+        type: String,
+        default: 'neutral',
+        required: false,
+    },
+})
+const emit = defineEmits('on-upload-image')
+
+// Data
+
+const fileName = ref(null)
+const inputFileRef = ref(null)
+
+// Computed
+
+const getImage = computed(() => {
+    if (fileName.value) {
+        const imgUrl = globalThis.URL.createObjectURL(fileName.value)
+        return imgUrl
+    } else if (props.src) {
+        return props.src
+    }
+
+    return null
+})
+
+// Methods
+
+function handleUploadImage(event) {
+    if (event.target.files) {
+        fileName.value = event.target.files[0]
+    } else {
+        fileName.value = event.dataTransfer.files[0]
+    }
+
+    emit('on-upload-image', fileName.value)
+}
+</script>
+
+<template>
+    <div class="flex items-end gap-x-6">
+        <div>
+            <input
+                ref="inputFileRef"
+                type="file"
+                accept="image/*"
+                class="sr-only"
+                @change="handleUploadImage"
+            />
+            <img v-if="getImage" :src="getImage" alt="User image" class="size-20 rounded-md object-cover" />
+            <div
+                v-else
+                class="bg-primary-50 grid size-20 place-items-center rounded-md"
+                @click="inputFileRef.click()"
+            >
+                <UIcon name="heroicons:photo" class="size-6 text-neutral-900" />
+            </div>
+        </div>
+        <UButton :color="buttonColor" variant="outline" @click="inputFileRef.click()" :size="buttonSize">
+            {{ 'Cambiar' }}
+        </UButton>
+    </div>
+</template>

package/app/pages/test.vue

@@ -11,7 +11,7 @@ const modalDanger = overlay.create(CModalDanger)
 <template>
     <div class="mb-16 min-h-full">
         <UContainer>
-            <BCardInner class="h-full">
+            <ACardInner class="h-full">
                 <BCard :has-footer-divider="false">
                     <template #header>
                         <h1>Header</h1>
@@ -23,13 +23,13 @@ const modalDanger = overlay.create(CModalDanger)
                 </BCard>
                 <UCard variant="ghost"> oli </UCard>
                 <AButtonBack icon="heroicons:arrow-left-16-solid" is-back-action />
-            </BCardInner>
+            </ACardInner>
 
             <hr class="my-6" />
 
             <BCard>
                 <template #header>
-                    <BCardHeader title="Crear una nueva actividad" subtitle="Subtitle" has-left-button-icon>
+                    <DCardHeader title="Crear una nueva actividad" subtitle="Subtitle" has-left-button-icon>
                         <template #actions>
                             <DActionButtons
                                 primary-button-text="Guardar"
@@ -38,16 +38,16 @@ const modalDanger = overlay.create(CModalDanger)
                                 is-block-buttons
                             />
                         </template>
-                    </BCardHeader>
+                    </DCardHeader>
                 </template>
 
-                <BCardInner>
+                <ACardInner>
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eos perspiciatis
                     asperiores suscipit voluptate magni excepturi. Doloribus in fugit quam voluptatibus,
                     molestiae maxime illum explicabo ut corrupti, distinctio atque dolor.
-                </BCardInner>
+                </ACardInner>
 
-                <BCardHeader
+                <DCardHeader
                     title="Crear una nueva actividad"
                     subtitle="Subtitle"
                     variant="secondary"
@@ -57,9 +57,9 @@ const modalDanger = overlay.create(CModalDanger)
                     <template #actions>
                         <UButton label="Action" />
                     </template>
-                </BCardHeader>
+                </DCardHeader>
 
-                <BCardInner class="space-y-2">
+                <ACardInner class="space-y-2">
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eos perspiciatis
                         asperiores suscipit voluptate magni excepturi. Doloribus in fugit quam voluptatibus,
@@ -73,7 +73,7 @@ const modalDanger = overlay.create(CModalDanger)
                         class-buttons="w-[200px]"
                         has-buttons-block
                     />
-                </BCardInner>
+                </ACardInner>
             </BCard>
 
             <hr class="my-6" />
@@ -140,14 +140,25 @@ const modalDanger = overlay.create(CModalDanger)
 
             <hr class="my-6" />
 
-            <!-- <APillAvatar text="test 1" /> -->
+            <!-- <APill text="test 1" /> -->
             <p>
-                <APillAvatar label="xs" size="xs" />
-                <APillAvatar label="sm" size="sm" color="warning" variant="subtle" />
-                <APillAvatar label="md" size="md" color="error" />
-                <APillAvatar label="lg" size="lg" color="success" />
-                <APillAvatar label="xl" size="xl" />
+                <APill label="xs" size="xs" />
+                <APill label="sm" size="sm" color="warning" variant="subtle" />
+                <APill label="md" size="md" color="error" />
+                <APill label="lg" size="lg" color="success" />
+                <APill label="xl" size="xl" />
             </p>
+
+            <hr class="my-6" />
+
+            <DUploadAvatar button-size="xl" button-color="error" />
+
+            <hr class="my-6" />
+
+            <div class="flex gap-x-2">
+                <CBadgeStatus label="Urgente" value="CANCELLED" />
+                <CBadgeStatus label="Normal" value="normal" />
+            </div>
         </UContainer>
     </div>
 </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-dashboard-devmunity",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",