@vixoniccom/aniversarios 1.4.6-dev.1 → 1.4.7-dev.0

package/configuration/appearanceGroup/AppearanceInputs.ts

@@ -7,9 +7,23 @@ import {
   Switch,
   TextInput,
 } from '@vixoniccom/modules'
+import { ShowValidations } from '../utils'
 
 export const appearanceInputs = [
-  new Label({ label: 'Orientación' }),
+  new Label({ label: 'Tema predefinido' }),
+  new SelectInput({
+    id: 'themePreset',
+    label: 'Tema',
+    description: 'Elige un tema para aplicar un estilo visual completo. Selecciona "Personalizado" para configurar cada campo de estilo de forma individual.',
+    items: [
+      { label: 'Personalizado', value: 'personalizado' },
+      { label: 'Aniversarios inferior', value: 'preset1' },
+      { label: 'Aniversarios lista', value: 'preset2' },
+      { label: 'Aniversarios vertical (1 persona)', value: 'preset3' },
+    ],
+  }),
+
+  new Label({ label: 'Orientación', show: ShowValidations.personalizado }),
   new SelectInput({
     id: 'orientation',
     required: true,
@@ -19,9 +33,10 @@ export const appearanceInputs = [
       { label: 'Vertical', value: 'v' },
     ],
     defaultValue: 'h',
+    show: ShowValidations.personalizado,
   }),
 
-  new Label({ label: 'Animación' }),
+  new Label({ label: 'Animación', show: ShowValidations.personalizado }),
   new SelectInput({
     id: 'animationMode',
     required: true,
@@ -32,7 +47,8 @@ export const appearanceInputs = [
       { label: 'Derecha - izquierda', value: 'slideLeft' },
     ],
     defaultValue: 'fade',
-    description: 'Por defecto, Fundido.'
+    description: 'Por defecto, Fundido.',
+    show: ShowValidations.personalizado,
   }),
   new SelectInput({
     id: 'animationSpeed',
@@ -43,13 +59,15 @@ export const appearanceInputs = [
       { label: 'Rápida', value: 1 },
     ],
     defaultValue: 1.5,
+    show: ShowValidations.personalizado,
   }),
   new Switch({
-    id: "animationOrder",
-    label: "Orden",
-    displayOnTrue: "Invertido",
-    displayOnFalse: "Normal",
-    defaultValue: false
+    id: 'animationOrder',
+    label: 'Orden',
+    displayOnTrue: 'Invertido',
+    displayOnFalse: 'Normal',
+    defaultValue: false,
+    show: ShowValidations.personalizado,
   }),
   new NumberInput({
     id: 'animationTime',
@@ -57,32 +75,37 @@ export const appearanceInputs = [
     description: 'Duración de cada grupo de datos (en segundos).',
     required: true,
     range: new NumberRangeValue(1, 9999),
+    show: ShowValidations.personalizado,
   }),
 
-  new Label({ label: 'Contenedor' }),
+  new Label({ label: 'Contenedor', show: ShowValidations.personalizado }),
   new NumberInput({
     id: 'containerColumns',
     label: 'Columnas',
     description: 'Cantidad de items horizontales. Por defecto, 1.',
     range: new NumberRangeValue(1, 999),
+    show: ShowValidations.personalizado,
   }),
   new NumberInput({
     id: 'containerColumnsGap',
     label: 'Separador horizontal',
     description: 'Espacio entre columnas (en porcentaje). Por defecto, 1%.',
     range: new NumberRangeValue(1, 100),
+    show: ShowValidations.personalizado,
   }),
   new NumberInput({
     id: 'containerRows',
     label: 'Filas',
     description: 'Cantidad de items verticales. Por defecto, 3.',
     range: new NumberRangeValue(1, 999),
+    show: ShowValidations.personalizado,
   }),
   new NumberInput({
     id: 'containerRowsGap',
     label: 'Separador vertical',
     description: 'Espacio entre filas (en porcentaje). Por defecto, 5%.',
     range: new NumberRangeValue(1, 100),
+    show: ShowValidations.personalizado,
   }),
 
   new Label({ label: 'Avanzado' }),
@@ -97,5 +120,6 @@ export const appearanceInputs = [
     required: false,
     label: 'Márgenes',
     description: 'CSS para dar espacio arriba/derecha/abajo/izquieda.',
+    show: ShowValidations.personalizado,
   }),
 ]

package/configuration/standardGroup/StandardInputs.ts

@@ -10,8 +10,17 @@ import {
 } from '@vixoniccom/modules'
 import { ShowValidations } from '../utils'
 
+const { personalizado, presetActive, descriptionEnabled, optionalEnabled, imageEnabled, dateEnabled, abbreviatedMonthsCondition, separatorEnabled } = ShowValidations
+
 export const standardInputs = [
-  new Label({ label: 'Textos' }),
+  new Label({ label: 'Fuentes', show: presetActive }),
+  new TextFormat({ id: 'nameFont', label: 'Fuente del nombre', show: presetActive }),
+  new TextFormat({ id: 'descriptionFont', label: 'Fuente de la descripción', show: presetActive }),
+  new TextFormat({ id: 'optionalFont', label: 'Fuente del campo opcional', show: presetActive }),
+  new TextFormat({ id: 'dateDayFont', label: 'Fuente del día', show: presetActive }),
+  new TextFormat({ id: 'dateMonthFont', label: 'Fuente del mes', show: presetActive }),
+
+  new Label({ label: 'Textos', show: personalizado }),
   new SelectInput({
     id: 'textPosition',
     label: 'Posición',
@@ -21,6 +30,7 @@ export const standardInputs = [
       { label: 'Final', value: 3 },
     ],
     defaultValue: 2,
+    show: personalizado,
   }),
   new SelectInput({
     id: 'textAlignment',
@@ -31,15 +41,17 @@ export const standardInputs = [
       { label: 'Final', value: 'end' },
     ],
     defaultValue: 'center',
+    show: personalizado,
   }),
 
-  new Label({ label: 'Nombre' }),
-  new TextFormat({ id: 'nameFormat', label: 'Formato' }),
-  new NumberInput({ id: 'nameMaxChar', label: 'Caracteres máximos' }),
+  new Label({ label: 'Nombre', show: personalizado }),
+  new TextFormat({ id: 'nameFormat', label: 'Formato', show: personalizado }),
+  new NumberInput({ id: 'nameMaxChar', label: 'Caracteres máximos', show: personalizado }),
   new TextInput({
     id: 'textMargin',
     label: 'Margen',
     description: 'Margen derecho de los textos (en porcentaje). Por defecto 4%.',
+    show: personalizado,
   }),
 
   new Switch({
@@ -48,11 +60,12 @@ export const standardInputs = [
     displayOnTrue: 'habilitada',
     displayOnFalse: 'deshabilitada',
     defaultValue: true,
+    show: personalizado,
   }),
 
-  new Label({ label: 'Descripción', show: ShowValidations.descriptionEnabled }),
-  new TextFormat({ id: 'descriptionFormat', label: 'Formato', show: ShowValidations.descriptionEnabled }),
-  new NumberInput({ id: 'descriptionMaxChar', label: 'Caracteres máximos', show: ShowValidations.descriptionEnabled }),
+  new Label({ label: 'Descripción', show: `${personalizado} && ${descriptionEnabled}` }),
+  new TextFormat({ id: 'descriptionFormat', label: 'Formato', show: `${personalizado} && ${descriptionEnabled}` }),
+  new NumberInput({ id: 'descriptionMaxChar', label: 'Caracteres máximos', show: `${personalizado} && ${descriptionEnabled}` }),
 
   new Switch({
     id: 'optionalEnabled',
@@ -60,20 +73,22 @@ export const standardInputs = [
     displayOnTrue: 'habilitado',
     displayOnFalse: 'deshabilitado',
     defaultValue: true,
+    show: personalizado,
   }),
 
-  new Label({ label: 'Campo opcional', show: ShowValidations.optionalEnabled }),
-  new TextFormat({ id: 'optionalFormat', label: 'Formato', show: ShowValidations.optionalEnabled }),
+  new Label({ label: 'Campo opcional', show: `${personalizado} && ${optionalEnabled}` }),
+  new TextFormat({ id: 'optionalFormat', label: 'Formato', show: `${personalizado} && ${optionalEnabled}` }),
 
-  new Label({ label: 'Fotografía' }),
+  new Label({ label: 'Fotografía', show: personalizado }),
 
-  new Label({ label: 'Imagen' }),
+  new Label({ label: 'Imagen', show: personalizado }),
   new Switch({
     id: 'imageEnabled',
     label: 'Imagen',
     displayOnTrue: 'habilitada',
     displayOnFalse: 'deshabilitada',
     defaultValue: true,
+    show: personalizado,
   }),
   new SelectInput({
     id: 'imagePosition',
@@ -84,7 +99,7 @@ export const standardInputs = [
       { label: 'Final', value: 3 },
     ],
     defaultValue: 2,
-    show: ShowValidations.imageEnabled,
+    show: `${personalizado} && ${imageEnabled}`,
   }),
   new SelectInput({
     id: 'imageAlignment',
@@ -95,7 +110,7 @@ export const standardInputs = [
       { label: 'Final', value: 'end' },
     ],
     defaultValue: 'center',
-    show: ShowValidations.imageEnabled,
+    show: `${personalizado} && ${imageEnabled}`,
   }),
   new SelectInput({
     id: 'imageStyle',
@@ -108,29 +123,30 @@ export const standardInputs = [
       { label: 'Círculo', value: 'circle' },
     ],
     defaultValue: 'normal',
-    show: ShowValidations.imageEnabled,
+    show: `${personalizado} && ${imageEnabled}`,
   }),
   new TextInput({
     id: 'imageMargin',
     label: 'Margen',
     description: 'Margen derecho de la imagen (en porcentaje). Por defecto 4%.',
-    show: ShowValidations.imageEnabled,
+    show: `${personalizado} && ${imageEnabled}`,
   }),
   new NumberInput({
     id: 'imageSize',
     label: 'Tamaño',
     description: 'Tamaño de la imagen (en porcentaje).',
     range: new NumberRangeValue(1, 100),
-    show: ShowValidations.imageEnabled,
+    show: `${personalizado} && ${imageEnabled}`,
   }),
 
-  new Label({ label: 'Fecha' }),
+  new Label({ label: 'Fecha', show: personalizado }),
   new Switch({
     id: 'dateEnabled',
     label: 'Fecha',
     displayOnTrue: 'habilitada',
     displayOnFalse: 'deshabilitada',
     defaultValue: true,
+    show: personalizado,
   }),
   new SelectInput({
     id: 'datePosition',
@@ -141,7 +157,7 @@ export const standardInputs = [
       { label: 'Final', value: 3 },
     ],
     defaultValue: 3,
-    show: ShowValidations.dateEnabled,
+    show: `${personalizado} && ${dateEnabled}`,
   }),
   new SelectInput({
     id: 'dateAlignment',
@@ -152,7 +168,7 @@ export const standardInputs = [
       { label: 'Final', value: 'end' },
     ],
     defaultValue: 'center',
-    show: ShowValidations.dateEnabled,
+    show: `${personalizado} && ${dateEnabled}`,
   }),
   new SelectInput({
     id: 'dateStyle',
@@ -167,17 +183,17 @@ export const standardInputs = [
       { label: 'Líneas', value: 'outlines' },
     ],
     defaultValue: 'calendarFlat',
-    show: ShowValidations.dateEnabled,
+    show: `${personalizado} && ${dateEnabled}`,
   }),
-  new TextFormat({ id: 'dateDayFormat', label: 'Formato del día', show: ShowValidations.dateEnabled }),
-  new TextFormat({ id: 'dateMonthFormat', label: 'Formato del mes', show: ShowValidations.dateEnabled }),
+  new TextFormat({ id: 'dateDayFormat', label: 'Formato del día', show: `${personalizado} && ${dateEnabled}` }),
+  new TextFormat({ id: 'dateMonthFormat', label: 'Formato del mes', show: `${personalizado} && ${dateEnabled}` }),
   new Switch({
     id: 'abbreviatedMonths',
     label: 'Meses',
     displayOnTrue: 'abreviados',
     displayOnFalse: 'no abreviados',
     defaultValue: false,
-    show: ShowValidations.abbreviatedMonthsCondition,
+    show: `${personalizado} && ${abbreviatedMonthsCondition}`,
   }),
   new ColorPicker({
     id: 'datePrimaryColor',
@@ -188,24 +204,25 @@ export const standardInputs = [
     id: 'dateMargin',
     label: 'Margen',
     description: 'Margen derecho de la fecha (en porcentaje). Por defecto 4%.',
-    show: ShowValidations.dateEnabled,
+    show: `${personalizado} && ${dateEnabled}`,
   }),
 
-  new Label({ label: 'Separador' }),
+  new Label({ label: 'Separador', show: personalizado }),
   new Switch({
     id: 'separator',
     label: 'Separador',
     displayOnTrue: 'habilitado',
     displayOnFalse: 'deshabilitado',
     defaultValue: true,
+    show: personalizado,
   }),
-  new NumberInput({ id: 'separatorWidth', label: 'Ancho', show: ShowValidations.separatorEnabled }),
-  new ColorPicker({ id: 'separatorColor', label: 'Color', show: ShowValidations.separatorEnabled }),
+  new NumberInput({ id: 'separatorWidth', label: 'Ancho', show: `${personalizado} && ${separatorEnabled}` }),
+  new ColorPicker({ id: 'separatorColor', label: 'Color', show: `${personalizado} && ${separatorEnabled}` }),
   new TextInput({
     id: 'itemMargins',
     label: 'Márgenes',
     description: 'Un CSS de longitud de uno o dos valores.',
     pattern: '^(( )?[+-]?[0-9]+.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc)){1,2}$',
-    show: ShowValidations.separatorEnabled,
+    show: `${personalizado} && ${separatorEnabled}`,
   }),
 ]

package/configuration/utils.ts

@@ -8,6 +8,8 @@ export const ShowValidations = {
   dateColorCondition:
     "({{dateEnabled}} === true && ['calendarFlat', 'circle', 'outlines'].indexOf({{dateStyle}}) !== -1)",
   separatorEnabled: '{{separator}} === true',
+  personalizado: '({{themePreset}} === "personalizado" || !{{themePreset}})',
+  presetActive: '{{themePreset}} && {{themePreset}} !== "personalizado"',
 }