design-system-dashboard-devmunity 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [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)
+
+
+### Features
+
+* **components:** :sparkles: Crea componente BModal ([6218f3a](https://github.com/vicventum/design-system-dashboard-devmunity/commit/6218f3aeeeb0695b05c00c64da6c3212b07afa08))
+* **components:** :sparkles: Crea componente CModalDanger ([1e3f7bb](https://github.com/vicventum/design-system-dashboard-devmunity/commit/1e3f7bb8778f970268b08043d70fef0fb0e7b10e))
+* **components:** :sparkles: Crea componente DActionButtons ([f7725cb](https://github.com/vicventum/design-system-dashboard-devmunity/commit/f7725cb5812b77628981abfb351b64e086e190c4))
+
 # [0.1.0](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.0.6...v0.1.0) (2025-11-12)
 
 

package/app/assets/css/themes/components/dropdown-menu.js

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

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

@@ -0,0 +1,14 @@
+export default /* ui */ {
+    slots: {
+        header: 'min-h-auto',
+        title: 'text-xl',
+        close: 'text-primary',
+    },
+    variants: {
+        fullscreen: {
+            false: {
+                content: 'max-w-auto',
+            },
+        },
+    },
+}

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

@@ -1,2 +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/{a-button-back.vue → button/a-button-back.vue}

@@ -10,10 +10,10 @@ const props = defineProps({
         default: '',
         required: false,
     },
-    isBackAction: {
+    hasBackAction: {
         type: Boolean,
         default: false,
-        required: true,
+        required: false,
     },
 })
 
@@ -22,7 +22,7 @@ const router = useRouter()
 
 function handleClickLeftButtonIcon() {
     emit('on-click')
-    if (props.isBackAction && !props.to && props.icon.includes('arrow-left')) {
+    if (props.hasBackAction && !props.to && props.icon.includes('arrow-left')) {
         router.back()
     }
 }

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/card/b-card-header.vue

@@ -12,21 +12,11 @@ const props = defineProps({
         default: '',
         required: false,
     },
-    hasBorder: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
     variant: {
         type: String,
         default: 'main', // main, secondary
         required: false,
     },
-    variantSubtitle: {
-        type: String,
-        default: 'main',
-        required: false,
-    },
     hasLeftButtonIcon: {
         type: Boolean,
         default: false,
@@ -68,8 +58,7 @@ function handleClickLeftButtonIcon() {
     <BCardInner
         :class="[
             'flex items-center justify-between',
-            { 'bg-neutral-50': variant === 'secondary' },
-            { 'border-y border-neutral-200': hasBorder && variant === 'secondary' },
+            { 'bg-muted border-y border-neutral-200': variant === 'secondary' },
         ]"
     >
         <div class="space-y-1">
@@ -99,7 +88,7 @@ function handleClickLeftButtonIcon() {
                 v-if="subtitle"
                 class="text-sm font-medium"
                 :class="{
-                    'text-neutral-400': variant === 'secondary',
+                    'text-dimmed': variant === 'secondary',
                 }"
             >
                 {{ subtitle }}

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

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="jsx" setup>
 import { resolveComponent } from 'vue'
 import { twMerge } from 'tailwind-merge'
 
@@ -20,6 +20,11 @@ const props = defineProps({
         default: '',
         required: true,
     },
+    description: {
+        type: String,
+        default: '',
+        required: true,
+    },
     text: {
         type: String,
         default: '',
@@ -32,7 +37,7 @@ const props = defineProps({
     },
     primaryButtonColor: {
         type: String,
-        default: 'color-primary',
+        default: 'primary',
         required: true,
     },
     secondaryButtonText: {
@@ -45,34 +50,19 @@ const props = defineProps({
         default: true,
         required: false,
     },
-    width: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    widthButtons: {
-        type: String,
-        default: 'w-40',
-        required: false,
-    },
     isPrimaryButtonDisabled: {
         type: Boolean,
         default: false,
         required: false,
     },
-    isBlockButtons: {
+    hasButtonsBlock: {
         type: Boolean,
         default: false,
         required: false,
     },
-    classButton: {
+    classButtons: {
         type: String,
-        default: 'form',
-        required: false,
-    },
-    hasBodyExpanded: {
-        type: Boolean,
-        default: false,
+        default: '',
         required: false,
     },
 })
@@ -92,11 +82,18 @@ const formRef = defineModel('formRef', {
     required: false,
 })
 
-// Data
+// Computed
 
-const uiStyles = reactive({})
+// const uiStyles = computed(() => {
+//     const baseStyles = {}
 
-// Computed
+//     // Apply width styles
+//     if (props.width) {
+//         baseStyles.width = `${props.width}`
+//     }
+
+//     return baseStyles
+// })
 
 const formProps = computed(() => {
     // return props.data ? { ref: 'form', state: props.data, onSubmit: handleSubmit } : {}
@@ -115,55 +112,37 @@ function handleClickSecondaryButton() {
     isOpen.value = false
     emit('on-click-secondary-button')
 }
-
-// Watch
-
-watch(
-    () => props.width,
-    (width) => {
-        if (!width) return null
-
-        Object.assign(uiStyles, { width: `${props.width}` })
-    },
-    { immediate: true }
-)
 </script>
 
 <template>
-    <UModal v-model="isOpen" :ui="uiStyles">
-        <component :is="state ? UForm : 'section'" v-bind="formProps" @submit="handleSubmit">
-            <BCard :ui="{ footer: { padding: 'p-0 sm:p-0' } }" :has-body-expanded="hasBodyExpanded">
-                <template #header>
-                    <slot v-if="$slots.header" name="header" />
-                    <BCardHeader v-else :title="title" size="sm">
-                        <template #actions>
-                            <UButton icon="heroicons:x-mark" variant="icon" @click="isOpen = false" />
-                        </template>
-                    </BCardHeader>
-                </template>
-
-                <BCardInner v-if="text" class="p-6">
+    <UModal v-model:open="isOpen" :title="title" :description="description">
+        <template #header>
+            <slot v-if="$slots.header" name="header" />
+        </template>
+
+        <template #body>
+            <component :is="state ? UForm : 'section'" v-bind="formProps" @submit="handleSubmit">
+                <p v-if="text">
                     {{ text }}
-                </BCardInner>
+                </p>
                 <slot v-else />
-
-                <template v-if="hasFooter" #footer>
-                    <slot v-if="$slots.footer" name="footer" />
-                    <BCardInner v-else>
-                        <ABlockActionButtons
-                            :class="twMerge('flex justify-start gap-x-2', classButton)"
-                            :primary-button-color="primaryButtonColor"
-                            :primary-button-text="primaryButtonText"
-                            :secondary-button-text="secondaryButtonText"
-                            :width-buttons="widthButtons"
-                            :is-block-buttons="isBlockButtons"
-                            :is-primary-button-disabled="isPrimaryButtonDisabled"
-                            @on-click-primary-button="handleClickPrimaryButton"
-                            @on-click-secondary-button="handleClickSecondaryButton"
-                        />
-                    </BCardInner>
-                </template>
-            </BCard>
-        </component>
+            </component>
+        </template>
+
+        <template v-if="hasFooter" #footer>
+            <slot v-if="$slots.footer" name="footer" />
+            <DActionButtons
+                v-else
+                :primary-button-color="primaryButtonColor"
+                :primary-button-text="primaryButtonText"
+                :secondary-button-text="secondaryButtonText"
+                :is-buttons-block="hasButtonsBlock"
+                :is-primary-button-disabled="isPrimaryButtonDisabled"
+                :class="twMerge('flex w-full justify-end gap-x-2', classButtons)"
+                class-buttons="w-40"
+                @on-click-primary-button="handleClickPrimaryButton"
+                @on-click-secondary-button="handleClickSecondaryButton"
+            />
+        </template>
     </UModal>
 </template>

package/app/components/c/modal/c-modal-danger.vue

@@ -0,0 +1,67 @@
+<script lang="jsx" setup>
+const props = defineProps({
+    state: {
+        type: Object,
+        default: null,
+        required: false,
+    },
+    schema: {
+        type: Object,
+        default: null,
+        required: false,
+    },
+    title: {
+        type: String,
+        default: '',
+        required: true,
+    },
+    description: {
+        type: String,
+        default: '',
+        required: true,
+    },
+    text: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    primaryButtonText: {
+        type: String,
+        default: 'Eliminar',
+        required: false,
+    },
+    secondaryButtonText: {
+        type: String,
+        default: 'Cancelar',
+        required: false,
+    },
+})
+
+const emit = defineEmits(['on-click-primary-button', 'on-click-secondary-button'])
+
+// Model
+
+const isOpen = defineModel({
+    type: Boolean,
+    default: false,
+    required: true,
+})
+</script>
+
+<template>
+    <BModal
+        v-model="isOpen"
+        :title="title"
+        :text="text"
+        :primary-button-text="primaryButtonText"
+        :secondary-button-text="secondaryButtonText"
+        :state="state"
+        :schema="schema"
+        primary-button-color="error"
+        is-block-buttons
+        @on-click-primary-button="emit('on-click-primary-button')"
+        @on-click-secondary-button="emit('on-click-secondary-button')"
+    >
+        <slot v-if="!text" />
+    </BModal>
+</template>

package/app/components/d/d-action-buttons.vue

@@ -0,0 +1,99 @@
+<script lang="jsx" setup>
+import { twMerge } from 'tailwind-merge'
+
+const props = defineProps({
+    class: {
+        type: [String, Object, Array],
+        default: () => '',
+        required: false,
+    },
+    classButtons: {
+        type: [String, Object, Array],
+        default: () => '',
+        required: false,
+    },
+    primaryButtonText: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    primaryButtonIcon: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    primaryButtonTo: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    primaryButtonColor: {
+        type: String,
+        default: 'primary',
+        required: false,
+    },
+    secondaryButtonText: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    secondaryButtonTo: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    hasButtonsBlock: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    isReverse: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    isPrimaryButtonDisabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    isSecondaryButtonDisabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+})
+const emit = defineEmits(['on-click-primary-button', 'on-click-secondary-button'])
+
+const classCard = computed(() => twMerge('flex gap-x-4', props.class, props.isReverse && 'flex-row-reverse'))
+const classButtonsComputed = computed(() =>
+    twMerge('justify-center w-[150px]', props.hasButtonsBlock && 'flex-auto', props.classButtons)
+)
+</script>
+
+<template>
+    <footer :class="classCard">
+        <UButton
+            v-if="secondaryButtonText"
+            :to="secondaryButtonTo"
+            :label="secondaryButtonText"
+            :disabled="isSecondaryButtonDisabled"
+            :class="classButtonsComputed"
+            variant="outline"
+            color="neutral"
+            @click="$emit('on-click-secondary-button')"
+        />
+        <UButton
+            v-if="primaryButtonText"
+            :label="primaryButtonText"
+            :to="primaryButtonTo"
+            :icon="primaryButtonIcon"
+            :color="primaryButtonColor"
+            :disabled="isPrimaryButtonDisabled"
+            :class="classButtonsComputed"
+            type="submit"
+            trailing
+            @click="$emit('on-click-primary-button')"
+        />
+    </footer>
+</template>

package/app/pages/test.vue

@@ -1,7 +1,15 @@
-<script lang="ts" setup></script>
+<script lang="jsx" setup>
+import { CModalDanger } from '#components'
+
+const modelIsOpenModal = ref(false)
+const overlay = useOverlay()
+
+// Abriendo modal de forma programática (mientras no sea necesario pasar slots)
+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">
@@ -23,7 +31,12 @@
                 <template #header>
                     <BCardHeader title="Crear una nueva actividad" subtitle="Subtitle" has-left-button-icon>
                         <template #actions>
-                            <UButton label="Action" />
+                            <DActionButtons
+                                primary-button-text="Guardar"
+                                secondary-button-text="Cancelar"
+                                secondary-button-icon="heroicons:pencil"
+                                is-block-buttons
+                            />
                         </template>
                     </BCardHeader>
                 </template>
@@ -38,22 +51,103 @@
                     title="Crear una nueva actividad"
                     subtitle="Subtitle"
                     variant="secondary"
-                    variant-subtitle="secondary"
                     class="my-6"
                     class-title=""
-                    has-border
                 >
                     <template #actions>
                         <UButton label="Action" />
                     </template>
                 </BCardHeader>
 
-                <BCardInner>
-                    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 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,
+                        molestiae maxime illum explicabo ut corrupti, distinctio atque dolor.
+                    </p>
+
+                    <DActionButtons
+                        primary-button-text="Guardar"
+                        secondary-button-text="Cancelar"
+                        secondary-button-icon="heroicons:pencil"
+                        class-buttons="w-[200px]"
+                        has-buttons-block
+                    />
                 </BCardInner>
             </BCard>
+
+            <hr class="my-6" />
+
+            <UButton label="Open modal" @click="modelIsOpenModal = !modelIsOpenModal" />
+            <!-- <UButton label="Open modal danger" @click="modelIsOpenModalDanger = !modelIsOpenModalDanger" /> -->
+            <UButton
+                label="Open modal danger"
+                color="error"
+                @click="
+                    modalDanger.open({
+                        title: 'Title Danger',
+                        text: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui aut exercitationem necessitatibus, perspiciatis vel suscipit nam. Facilis, placeat! Dicta quo eveniet rerum officiis quibusdam laborum error necessitatibus sequi itaque praesentium.',
+                        onOnClickSecondaryButton: () => {
+                            modalDanger.close()
+                        },
+                    })
+                "
+            />
+
+            <BModal
+                v-model="modelIsOpenModal"
+                title="Marcar como completada"
+                class-button="justify-end"
+                class="w-[700px]"
+            >
+                <!-- <template #header> header </template> -->
+
+                <p class="h-screen">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam pariatur, suscipit
+                    veritatis delectus architecto hic non quidem ducimus, cum ex alias obcaecati enim maiores
+                    animi nesciunt, perferendis commodi in quae.
+                </p>
+
+                <!-- <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/commitlint.config.js

@@ -1 +1,8 @@
-export default { extends: ['@commitlint/config-conventional'] };
+export default {
+    extends: ['@commitlint/config-conventional'],
+    rules: {
+        // 'body-max-line-length': [0],
+        'body-max-line-length': [2, 'always', 500],
+        'header-max-length': [2, 'always', 120],
+    },
+}

package/package.json

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