srcdev-nuxt-forms 6.1.0 → 6.1.2

package/app/assets/styles/setup/utility-classes/_padding.css

@@ -0,0 +1,308 @@
+/* Padding */
+.p-0 {
+  padding: 0;
+}
+.pbs-0 {
+  padding-block-start: 0;
+}
+.pbe-0 {
+  padding-block-end: 0;
+}
+.pis-0 {
+  padding-inline-start: 0;
+}
+.pie-0 {
+  padding-inline-end: 0;
+}
+.pi-0 {
+  padding-inline: 0;
+}
+.pb-0 {
+  padding-block: 0;
+}
+
+.p-1 {
+  padding: 0.1rem;
+}
+.pbs-1 {
+  padding-block-start: 0.1rem;
+}
+.pbe-1 {
+  padding-block-end: 0.1rem;
+}
+.pis-1 {
+  padding-inline-start: 0.1rem;
+}
+.pie-1 {
+  padding-inline-end: 0.1rem;
+}
+.pi-1 {
+  padding-inline: 0.1rem;
+}
+.pb-1 {
+  padding-block: 0.1rem;
+}
+
+.p-2 {
+  padding: 0.2rem;
+}
+.pbs-2 {
+  padding-block-start: 0.2rem;
+}
+.pbe-2 {
+  padding-block-end: 0.2rem;
+}
+.pis-2 {
+  padding-inline-start: 0.2rem;
+}
+.pie-2 {
+  padding-inline-end: 0.2rem;
+}
+.pi-2 {
+  padding-inline: 0.2rem;
+}
+.pb-2 {
+  padding-block: 0.2rem;
+}
+
+.p-4 {
+  padding: 0.4rem;
+}
+.pbs-4 {
+  padding-block-start: 0.4rem;
+}
+.pbe-4 {
+  padding-block-end: 0.4rem;
+}
+.pis-4 {
+  padding-inline-start: 0.4rem;
+}
+.pie-4 {
+  padding-inline-end: 0.4rem;
+}
+.pi-4 {
+  padding-inline: 0.4rem;
+}
+.pb-4 {
+  padding-block: 0.4rem;
+}
+
+.p-6 {
+  padding: 0.6rem;
+}
+.pbs-6 {
+  padding-block-start: 0.6rem;
+}
+.pbe-6 {
+  padding-block-end: 0.6rem;
+}
+.pis-6 {
+  padding-inline-start: 0.6rem;
+}
+.pie-6 {
+  padding-inline-end: 0.6rem;
+}
+.pi-6 {
+  padding-inline: 0.6rem;
+}
+.pb-6 {
+  padding-block: 0.6rem;
+}
+
+.p-8 {
+  padding: 0.8rem;
+}
+.pbs-8 {
+  padding-block-start: 0.8rem;
+}
+.pbe-8 {
+  padding-block-end: 0.8rem;
+}
+.pis-8 {
+  padding-inline-start: 0.8rem;
+}
+.pie-8 {
+  padding-inline-end: 0.8rem;
+}
+.pi-8 {
+  padding-inline: 0.8rem;
+}
+.pb-8 {
+  padding-block: 0.8rem;
+}
+
+.p-10 {
+  padding: 1rem;
+}
+.pbs-10 {
+  padding-block-start: 1rem;
+}
+.pbe-10 {
+  padding-block-end: 1rem;
+}
+.pis-10 {
+  padding-inline-start: 1rem;
+}
+.pie-10 {
+  padding-inline-end: 1rem;
+}
+.pi-10 {
+  padding-inline: 1rem;
+}
+.pb-10 {
+  padding-block: 1rem;
+}
+
+.p-12 {
+  padding: 1.2rem;
+}
+.pbs-12 {
+  padding-block-start: 1.2rem;
+}
+.pbe-12 {
+  padding-block-end: 1.2rem;
+}
+.pis-12 {
+  padding-inline-start: 1.2rem;
+}
+.pie-12 {
+  padding-inline-end: 1.2rem;
+}
+.pi-12 {
+  padding-inline: 1.2rem;
+}
+.pb-12 {
+  padding-block: 1.2rem;
+}
+
+.p-18 {
+  padding: 1.8rem;
+}
+.pbs-18 {
+  padding-block-start: 1.8rem;
+}
+.pbe-18 {
+  padding-block-end: 1.8rem;
+}
+.pis-18 {
+  padding-inline-start: 1.8rem;
+}
+.pie-18 {
+  padding-inline-end: 1.8rem;
+}
+.pi-18 {
+  padding-inline: 1.8rem;
+}
+.pb-18 {
+  padding-block: 1.8rem;
+}
+
+.p-20 {
+  padding: 2rem;
+}
+.pbs-20 {
+  padding-block-start: 2rem;
+}
+.pbe-20 {
+  padding-block-end: 2rem;
+}
+.pis-20 {
+  padding-inline-start: 2rem;
+}
+.pie-20 {
+  padding-inline-end: 2rem;
+}
+.pi-20 {
+  padding-inline: 2rem;
+}
+.pb-20 {
+  padding-block: 2rem;
+}
+
+.p-24 {
+  padding: 2.4rem;
+}
+.pbs-24 {
+  padding-block-start: 2.4rem;
+}
+.pbe-24 {
+  padding-block-end: 2.4rem;
+}
+.pis-24 {
+  padding-inline-start: 2.4rem;
+}
+.pie-24 {
+  padding-inline-end: 2.4rem;
+}
+.pi-24 {
+  padding-inline: 2.4rem;
+}
+.pb-24 {
+  padding-block: 2.4rem;
+}
+
+.p-32 {
+  padding: 3.2rem;
+}
+.pbs-32 {
+  padding-block-start: 3.2rem;
+}
+.pbe-32 {
+  padding-block-end: 3.2rem;
+}
+.pis-32 {
+  padding-inline-start: 3.2rem;
+}
+.pie-32 {
+  padding-inline-end: 3.2rem;
+}
+.pi-32 {
+  padding-inline: 3.2rem;
+}
+.pb-32 {
+  padding-block: 3.2rem;
+}
+
+.p-40 {
+  padding: 4rem;
+}
+.pbs-40 {
+  padding-block-start: 4rem;
+}
+.pbe-40 {
+  padding-block-end: 4rem;
+}
+.pis-40 {
+  padding-inline-start: 4rem;
+}
+.pie-40 {
+  padding-inline-end: 4rem;
+}
+.pi-40 {
+  padding-inline: 4rem;
+}
+.pb-40 {
+  padding-block: 4rem;
+}
+
+.p-60 {
+  padding: 6rem;
+}
+.pbs-60 {
+  padding-block-start: 6rem;
+}
+.pbe-60 {
+  padding-block-end: 6rem;
+}
+.pis-60 {
+  padding-inline-start: 6rem;
+}
+.pie-60 {
+  padding-inline-end: 6rem;
+}
+.pi-60 {
+  padding-inline: 6rem;
+}
+.pb-60 {
+  padding-block: 6rem;
+}

package/app/assets/styles/setup/utility-classes/index.css

@@ -1,2 +1,4 @@
-@import './_fluid-spacing';
-@import './animations/';
+@import "./animations/";
+@import "./_fluid-spacing";
+@import "./_margin";
+@import "./_padding";

package/app/components/forms/form-fieldset/FormFieldset.vue

@@ -1,10 +1,19 @@
 <template>
-  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" :id :name class="form-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid="dataTestid">
-    <legend v-if="legend" class="form-fieldset-legend" :class="[{ 'has-description': hasDescription }]">
+  <fieldset
+    :aria-required="required"
+    :aria-invalid="fieldHasError"
+    role="radiogroup"
+    :id
+    :name
+    class="form-fieldset"
+    :class="[elementClasses, { error: fieldHasError }]"
+    :data-testid="dataTestid"
+  >
+    <legend v-if="legend" class="form-fieldset-legend" :class="[{ 'has-description': slots.description }]">
       <slot name="legend">{{ legend }}</slot>
     </legend>
 
-    <div v-if="hasDescriptionSlot" class="form-fieldset-description" :id="`${id}-description`">
+    <div v-if="slots.description" class="form-fieldset-description" :id="`${id}-description`">
       <slot name="description"></slot>
     </div>
 
@@ -28,7 +37,7 @@ const props = defineProps({
   },
   legend: {
     type: String,
-    default: '',
+    default: "",
   },
   required: {
     type: Boolean,
@@ -40,18 +49,18 @@ const props = defineProps({
   },
   dataTestid: {
     type: String,
-    default: '',
+    default: "",
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasDescription = computed(() => slots.description !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
+// const hasDescriptionSlot = computed(() => slots.description !== undefined);
+const hasDescription = computed(() => slots.description !== undefined)
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

package/app/components/forms/input-button/InputButtonCore.vue

@@ -7,21 +7,21 @@
     :data-theme="theme"
     :data-size="size"
     class="input-button-core"
-    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': isIconOnly }]"
+    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': slots.iconOnly }]"
   >
     <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
-    <template v-if="hasLeftContent && !isIconOnly">
+    <template v-if="slots.left && !slots.iconOnly">
       <span class="btn-icon left">
         <slot name="left"></slot>
       </span>
     </template>
-    <span class="btn-text" :class="[weight, { 'sr-only': isIconOnly }]">{{ buttonText }}</span>
-    <template v-if="hasRightContent && !isIconOnly">
+    <span class="btn-text" :class="[weight, { 'sr-only': slots.iconOnly }]">{{ buttonText }}</span>
+    <template v-if="slots.right && !slots.iconOnly">
       <span class="btn-icon right">
         <slot name="right"></slot>
       </span>
     </template>
-    <template v-if="isIconOnly">
+    <template v-if="slots.iconOnly">
       <span class="btn-icon icon-only">
         <slot name="iconOnly"></slot>
       </span>
@@ -30,35 +30,35 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   size: {
     type: String as PropType<string>,
-    default: 'default',
+    default: "default",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   weight: {
     type: String as PropType<string>,
-    default: 'wght-400',
+    default: "wght-400",
     validator(value: string) {
-      return propValidators.weight.includes(value);
+      return propValidators.weight.includes(value)
     },
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   type: {
-    type: String as PropType<'submit' | 'button' | 'reset'>,
-    default: 'button',
+    type: String as PropType<"submit" | "button" | "reset">,
+    default: "button",
     validator(value: string) {
-      return propValidators.inputTypesButton.includes(value);
+      return propValidators.inputTypesButton.includes(value)
     },
   },
   buttonText: {
@@ -67,7 +67,7 @@ const props = defineProps({
   },
   dataTestid: {
     type: String,
-    default: '',
+    default: "",
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
@@ -79,9 +79,9 @@ const props = defineProps({
   },
   effect: {
     type: String as PropType<string>,
-    default: 'fancy',
+    default: "fancy",
     validator(value: string) {
-      return ['fancy', 'pulse'].includes(value);
+      return ["fancy", "pulse"].includes(value)
     },
   },
   isPending: {
@@ -92,23 +92,20 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const type = toRef(() => props.type);
+const type = toRef(() => props.type)
 const effectClass = computed(() => {
   if (props.useEffect) {
-    return props.effect === 'fancy' ? '' : props.effect;
+    return props.effect === "fancy" ? "" : props.effect
   } else {
-    return '';
+    return ""
   }
-});
+})
 
-const slots = useSlots();
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
-const isIconOnly = computed(() => slots.iconOnly !== undefined);
+const slots = useSlots()
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

package/app/components/forms/input-checkbox/MultipleCheckboxes.vue

@@ -1,8 +1,21 @@
 <template>
-  <FormFieldset :id :name :legend :fieldHasError :required :data-testid :styleClassPassthrough="['multiple-checkboxes-fieldset']">
-    <template #description>
-      <slot name="description"></slot>
-    </template>
+  <FormFieldset
+    :id
+    :name
+    :legend
+    :fieldHasError
+    :required
+    :data-testid
+    :styleClassPassthrough="['multiple-checkboxes-fieldset']"
+  >
+    <InputDescription :id :name :field-has-error="fieldHasError" :style-class-passthrough="['input-text-description']">
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
 
     <template #content>
       <div class="multiple-checkboxes-items" :class="[optionsLayout]">
@@ -14,15 +27,15 @@
             :name
             :required
             :label="item.label"
-            :fieldHasError
+            :field-has-error
             v-model="modelValue"
             :true-value="item.value"
             :size
-            :optionsLayout
+            :options-layout
             :theme
             :direction
-            :ariaDescribedby
-            :displayAsDisc
+            :aria-describedby
+            :display-as-disc
           >
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>
@@ -40,14 +53,14 @@
             :name
             :required
             :label="item.label"
-            :fieldHasError
+            :field-has-error
             v-model="modelValue"
             :true-value="item.value"
             :size
-            :optionsLayout
+            :options-layout
             :theme
-            :ariaDescribedby
-            :displayAsDisc
+            :aria-describedby
+            :display-as-disc
           >
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>
@@ -61,13 +74,13 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-import type { IOptionsConfig, IFormMultipleOptions } from '../../../../shared/types/types.forms';
+import propValidators from "../c12/prop-validators"
+import type { IOptionsConfig, IFormMultipleOptions } from "../../../../shared/types/types.forms"
 
-const { dataTestid, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+const props = defineProps({
   dataTestid: {
     type: String,
-    default: 'multiple-checkboxes',
+    default: "multiple-checkboxes",
   },
   name: {
     type: String,
@@ -83,7 +96,7 @@ const { dataTestid, name, legend, label, required, fieldHasError, placeholder, i
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   isButton: {
     type: Boolean,
@@ -107,16 +120,16 @@ const { dataTestid, name, legend, label, required, fieldHasError, placeholder, i
   },
   size: {
     type: String as PropType<string>,
-    default: 'medium',
+    default: "medium",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   optionsLayout: {
     type: String as PropType<string>,
-    default: 'equal-widths',
+    default: "equal-widths",
     validator(value: string) {
-      return propValidators.optionsLayout.includes(value);
+      return propValidators.optionsLayout.includes(value)
     },
   },
   equalCols: {
@@ -129,38 +142,35 @@ const { dataTestid, name, legend, label, required, fieldHasError, placeholder, i
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   direction: {
-    type: String as PropType<'row' | 'row-reverse'>,
-    default: 'row',
+    type: String as PropType<"row" | "row-reverse">,
+    default: "row",
     validator(value: string) {
-      return ['row', 'row-reverse'].includes(value);
+      return ["row", "row-reverse"].includes(value)
     },
   },
   displayAsDisc: {
     type: Boolean,
     default: false,
   },
-});
+})
 
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasDescription = computed(() => slots.description !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const slots = useSlots()
 
-const modelValue = defineModel();
-const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+const modelValue = defineModel()
+const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
 
-const id = `${name}-input-${useId()}`;
-const errorId = `${name}-error-message`;
+const id = `${props.name}-${useId()}`
+const errorId = `${id}-error-message`
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
-  return fieldHasError ? errorId : ariaDescribedbyId;
-});
+  const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined
+  return props.fieldHasError ? errorId : ariaDescribedbyId
+})
 </script>
 
 <style lang="css">