design-system-dashboard-devmunity 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [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/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,3 @@
 export { default as card } from './components/card.js'
 export { default as button } from './components/button.js'
+export { default as modal } from './components/modal.js'

package/app/components/a/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/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,4 +1,12 @@
-<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">
@@ -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,65 @@
                     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>
         </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.2.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",