design-system-dashboard-devmunity 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [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/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 dropdownMenu } from './components/dropdown-menu.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/pages/test.vue

@@ -9,7 +9,7 @@ const modalDanger = overlay.create(CModalDanger)
 </script>
 
 <template>
-    <div class="h-screen">
+    <div class="mb-16 min-h-full">
         <UContainer>
             <BCardInner class="h-full">
                 <BCard :has-footer-divider="false">
@@ -110,6 +110,44 @@ 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" />
+
+            <!-- <APillAvatar 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" />
+            </p>
         </UContainer>
     </div>
 </template>

package/package.json

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