design-system-dashboard-devmunity 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [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)
+
+
+### Features
+
+* **components:** :sparkles: Crea componente `ADropdownAvatar` ([0aa9677](https://github.com/vicventum/design-system-dashboard-devmunity/commit/0aa96779530ed7c16389db6fb1ea9ead99e495ca))
+* **components:** :sparkles: Crea componente `APill` ([5ed606e](https://github.com/vicventum/design-system-dashboard-devmunity/commit/5ed606e86f0e29d8c1d09e55d9e6d803e496bcd1))
+* **components:** :sparkles: Crea componente AButtonAvatarDropdown ([d9e283d](https://github.com/vicventum/design-system-dashboard-devmunity/commit/d9e283dc20d3f70e214c56d9b26c55d688bec254))
+
 # [0.2.0](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.1.0...v0.2.0) (2025-11-14)
 
 

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/components/dropdown-menu.js

@@ -0,0 +1 @@
+export default /* ui */ {}

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

@@ -1,3 +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 badge } from './components/badge.js'

package/app/components/a/button/a-button-avatar-dropdown.vue

@@ -0,0 +1,41 @@
+<script lang="jsx" setup>
+const props = defineProps({
+    src: {
+        type: String,
+        default: '/media/img/user-unknown.png',
+        required: false,
+    },
+    buttonSize: {
+        type: String,
+        default: 'md',
+        required: false,
+    },
+    avatarSize: {
+        type: String,
+        default: 'sm',
+        required: false,
+    },
+})
+</script>
+
+<template>
+    <!-- <UButton
+        class="bg-color-primary-100 flex items-center gap-2 rounded-full py-1 pr-2 pl-1 text-neutral-800 hover:text-neutral-50"
+    >
+        <UAvatar :src="src" size="sm" />
+        <UIcon name="heroicons:chevron-down-20-solid" class="size-5" />
+    </UButton> -->
+    <UButton
+        :avatar="{
+            src,
+            size: avatarSize,
+        }"
+        :size="buttonSize"
+        trailing-icon="heroicons:chevron-down-20-solid"
+        color="primary"
+        variant="ghost"
+        class="rounded-full"
+    >
+        <slot />
+    </UButton>
+</template>

package/app/components/a/dropdown/a-dropdown-avatar.vue

@@ -0,0 +1,65 @@
+<script lang="jsx" setup>
+const props = defineProps({
+    items: {
+        type: Array,
+        default: () => [],
+        required: true,
+    },
+    userName: {
+        type: String,
+        default: '',
+        required: true,
+    },
+    userEmail: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    userTo: {
+        type: String,
+        default: '',
+        required: false,
+    },
+})
+
+const uiStyles = computed(() => {
+    if (props.userTo) return {}
+    return {
+        item: 'data-highlighted:first:before:bg-transparent data-[state=open]:first:before:bg-transparent',
+    }
+})
+
+const itemsComputed = computed(() => [
+    {
+        userName: props.userName,
+        userEmail: props.userEmail,
+        slot: 'user',
+        onSelect: () => {
+            const path = props.userTo
+            if (path) navigateTo(path)
+        },
+    },
+    ...props.items,
+])
+</script>
+
+<template>
+    <UDropdownMenu :items="itemsComputed" :ui="uiStyles">
+        <slot />
+
+        <template #user="{ item }">
+            <div class="text-start">
+                <span class="text-highlighted block text-lg font-bold">
+                    {{ item.userName }}
+                </span>
+                <span v-if="item?.userEmail" class="text-muted block truncate font-medium">
+                    {{ item?.userEmail }}
+                </span>
+            </div>
+        </template>
+
+        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+        </template>
+    </UDropdownMenu>
+</template>

package/app/components/a/pill/a-pill.vue

@@ -0,0 +1,104 @@
+<script lang="jsx" setup>
+const props = defineProps({
+    src: {
+        type: String,
+        default: '/media/img/user-unknown.png',
+        required: false,
+    },
+    label: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    color: {
+        type: String,
+        default: 'neutral',
+        required: false,
+    },
+    variant: {
+        type: String,
+        default: 'outline',
+        required: false,
+        validator: (value) => ['solid', 'outline', 'soft', 'subtle'].includes(value),
+    },
+    size: {
+        type: String,
+        default: 'sm',
+        required: false,
+        validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
+    },
+    hasAvatar: {
+        type: Boolean,
+        default: true,
+        required: false,
+    },
+    isClosable: {
+        type: Boolean,
+        default: true,
+        required: false,
+    },
+})
+
+const emit = defineEmits('on-close')
+
+const trailingIconSize = computed(() => {
+    const sizeMap = {
+        xs: 'size-3.5 ',
+        sm: 'size-3.5 ',
+        md: 'size-3.5 ',
+        lg: 'size-3.5 ',
+        xl: 'size-4 ',
+    }
+    return sizeMap[props.size] || 'md'
+})
+const textSize = computed(() => {
+    const sizeMap = {
+        xs: 'text-xs p-1  gap-1.5',
+        sm: 'text-xs p-1  gap-1.5',
+        md: 'text-sm p-1  gap-1.5',
+        lg: 'text-sm p-1  gap-2',
+        xl: 'text-base p-1  gap-2 ',
+    }
+    return sizeMap[props.size] || 'md'
+})
+</script>
+
+<template>
+    <div class="flex gap-2">
+        <UBadge
+            :avatar="
+                hasAvatar
+                    ? {
+                          src,
+                          size,
+                      }
+                    : null
+            "
+            :label="label"
+            :trailing-icon="isClosable ? 'heroicons:x-mark' : ''"
+            :size="size"
+            :ui="{
+                base: textSize,
+            }"
+            :color="color"
+            :variant="variant"
+            class="rounded-full font-normal"
+        >
+            <template #trailing>
+                <UButton
+                    v-if="isClosable"
+                    :size="size"
+                    :ui="{
+                        leadingIcon: trailingIconSize,
+                        icon: trailingIconSize,
+                    }"
+                    :color="color"
+                    :variant="variant === 'solid' ? 'solid' : 'icon'"
+                    icon="heroicons:x-mark"
+                    class="rounded-full p-0.5 font-normal"
+                    @click="emit('on-close')"
+                />
+            </template>
+        </UBadge>
+    </div>
+</template>

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

@@ -9,9 +9,9 @@ const modalDanger = overlay.create(CModalDanger)
 </script>
 
 <template>
-    <div class="h-screen">
+    <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" />
@@ -110,6 +110,55 @@ const modalDanger = overlay.create(CModalDanger)
 
                 <!-- <template #footer> footer </template> -->
             </BModal>
+
+            <hr class="my-6" />
+
+            <ADropdownAvatar
+                :items="[
+                    {
+                        label: 'Configuraciones',
+                        icon: 'i-heroicons-cog-8-tooth',
+                        onSelect: () => {
+                            navigateTo('/')
+                        },
+                    },
+                    {
+                        test: 'test',
+                        slot: 'test',
+                    },
+                ]"
+                user-name="Victor Alvarez"
+                user-email="test@test.com"
+                user-to="/"
+            >
+                <AButtonAvatarDropdown />
+
+                <template #test="{ item }">
+                    {{ item.test }}
+                </template>
+            </ADropdownAvatar>
+
+            <hr class="my-6" />
+
+            <!-- <APill text="test 1" /> -->
+            <p>
+                <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.2.0",
+  "version": "0.4.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",