srcdev-nuxt-forms 6.1.1 → 6.1.3

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

@@ -8,9 +8,14 @@
     :data-testid
     :styleClassPassthrough="['multiple-checkboxes-fieldset']"
   >
-    <template #description>
-      <slot name="description"></slot>
-    </template>
+    <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]">
@@ -22,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>
@@ -48,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>
@@ -72,23 +77,7 @@
 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",
@@ -176,11 +165,11 @@ const slots = useSlots()
 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 = slots.description ? `${name}-description` : undefined
-  return fieldHasError ? errorId : ariaDescribedbyId
+  const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined
+  return props.fieldHasError ? errorId : ariaDescribedbyId
 })
 </script>
 

package/app/components/forms/input-description/InputDescription.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    v-if="slots.descriptionText || slots.descriptionHtml"
+    class="input-description"
+    :class="[elementClasses]"
+    :id="descriptionId"
+  >
+    <div v-if="slots.descriptionHtml" class="input-description-html">
+      <slot name="descriptionHtml"></slot>
+    </div>
+    <p v-if="slots.descriptionText" class="input-description-text">
+      <slot name="descriptionText"></slot>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from "../c12/prop-validators"
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: "primary",
+    validator(value: string) {
+      return propValidators.theme.includes(value)
+    },
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: "default",
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value)
+    },
+  },
+})
+
+const slots = useSlots()
+
+const descriptionId = `${props.id}-description`
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+</script>
+<style lang="css">
+.input-description {
+  .input-description-html {
+    margin-block: 0.4rem 0.8rem;
+  }
+  .input-description-text {
+    color: var(--form-description-color);
+    font-size: var(--step-4);
+    margin-block: 0.4rem 0.8rem;
+    line-height: var(--step-4);
+  }
+}
+</style>

package/app/components/forms/input-label/InputLabel.vue

@@ -73,5 +73,9 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     line-height: 1.5;
     display: block;
   }
+
+  & + .input-description {
+    margin-block-end: 0.2rem;
+  }
 }
 </style>

package/app/components/forms/input-select/variants/InputSelectWithLabel.vue

@@ -19,9 +19,21 @@
         <template #textLabel>{{ label }}</template>
       </InputLabel>
 
-      <div v-if="inputVariant === 'normal' && slots.description" :id="`${id}-description`">
-        <slot name="description"></slot>
-      </div>
+      <InputDescription
+        v-if="inputVariant !== 'outlined'"
+        :id
+        :name
+        :input-variant
+        :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>
 
       <InputSelectCore
         v-model="modelValue"
@@ -31,13 +43,13 @@
         :id
         :name
         :placeholder
-        :fieldHasError
+        :field-has-error
         :required
-        :styleClassPassthrough
+        :style-class-passthrough
         :theme="formTheme"
-        :ariaDescribedby="ariaDescribedby"
+        :aria-describedby
         :size
-        :inputVariant
+        :input-variant
       />
 
       <InputError
@@ -48,9 +60,21 @@
         :inputVariant
       />
     </div>
-    <div v-if="inputVariant !== 'normal' && slots.description" :id="`${id}-description`">
-      <slot name="description"></slot>
-    </div>
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
+      :id
+      :name
+      :input-variant
+      :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>
   </div>
 </template>
 
@@ -121,9 +145,9 @@ const formTheme = computed(() => {
 })
 
 const id = `${props.name}-${useId()}`
-const errorId = `${name}-error-message`
+const errorId = `${id}-error-message`
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = slots.description ? `${id}-description` : undefined
+  const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined
   return props.fieldHasError ? errorId : ariaDescribedbyId
 })
 

package/app/components/forms/input-text/variants/InputTextWithLabel.vue

@@ -17,9 +17,21 @@
         <template #textLabel>{{ label }}</template>
       </InputLabel>
 
-      <div v-if="inputVariant === 'normal' && slots.description" :id="`${id}-description`">
-        <slot name="description"></slot>
-      </div>
+      <InputDescription
+        v-if="inputVariant !== 'outlined'"
+        :id
+        :name
+        :input-variant
+        :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>
 
       <InputTextCore
         v-model="modelValue"
@@ -33,13 +45,13 @@
         :placeholder
         :label
         :errorMessage
-        :fieldHasError
+        :field-has-error
         :required
-        :styleClassPassthrough
+        :style-class-passthrough
         :theme
-        :ariaDescribedby
+        :aria-describedby
         :size
-        :inputVariant
+        :input-variant
       >
         <template v-if="slots.left" #left>
           <slot name="left"></slot>
@@ -52,9 +64,21 @@
       <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="false" :inputVariant />
     </div>
 
-    <div v-if="inputVariant !== 'normal' && slots.description" :id="`${id}-description`">
-      <slot name="description"></slot>
-    </div>
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
+      :id
+      :name
+      :input-variant
+      :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>
   </div>
 </template>
 
@@ -136,7 +160,7 @@ const formTheme = computed(() => {
 const id = `${props.name}-${useId()}`
 const errorId = `${id}-error-message`
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = slots.description ? `${id}-description` : undefined
+  const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined
   return props.fieldHasError ? errorId : ariaDescribedbyId
 })
 

package/app/components/forms/input-textarea/InputTextareaCore.vue

@@ -26,7 +26,7 @@
       v-model="modelValue"
       ref="inputField"
       :aria-invalid="fieldHasError"
-      :aria-describedby="`${id}-error-message`"
+      :aria-describedby
       @focusin="updateFocus(true)"
       @focusout="updateFocus(false)"
     ></textarea>
@@ -56,6 +56,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  ariaDescribedby: {
+    type: String,
+    default: "",
+  },
   fieldHasError: {
     type: Boolean,
     default: false,

package/app/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -1,45 +1,79 @@
 <template>
-  <div
-    class="input-textarea-with-label"
-    :data-theme="formTheme"
-    :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
-  >
-    <InputLabel
-      :for="id"
-      :id
-      :theme
-      :name
-      :input-variant
-      :field-has-error
-      :style-class-passthrough="['input-textarea-label']"
+  <div>
+    <div
+      class="input-textarea-with-label"
+      :data-theme="formTheme"
+      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
     >
-      <template #textLabel>{{ label }}</template>
-    </InputLabel>
+      <InputLabel
+        :for="id"
+        :id
+        :theme
+        :name
+        :input-variant
+        :field-has-error
+        :style-class-passthrough="['input-textarea-label']"
+      >
+        <template #textLabel>{{ label }}</template>
+      </InputLabel>
+
+      <InputDescription
+        v-if="inputVariant !== 'outlined'"
+        :id
+        :name
+        :input-variant
+        :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>
 
-    <InputTextareaCore
-      v-model="modelValue"
-      v-model:isDirty="isDirty"
-      v-model:isActive="isActive"
-      :maxlength
+      <InputTextareaCore
+        v-model="modelValue"
+        v-model:isDirty="isDirty"
+        v-model:isActive="isActive"
+        :maxlength
+        :id
+        :name
+        :placeholder
+        :label
+        :field-has-error
+        :required
+        :style-class-passthrough
+        :theme
+        :size
+        :input-variant
+      >
+        <template v-if="slots.left" #left>
+          <slot name="left"></slot>
+        </template>
+        <template v-if="slots.right" #right>
+          <slot name="right"></slot>
+        </template>
+      </InputTextareaCore>
+      <InputError :errorMessage :showError="fieldHasError" :id :isDetached="false" :inputVariant />
+    </div>
+
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
       :id
       :name
-      :placeholder
-      :label
-      :fieldHasError
-      :required
-      :styleClassPassthrough
-      :theme
-      :size
-      :inputVariant
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
     >
-      <template v-if="slots.left" #left>
-        <slot name="left"></slot>
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
       </template>
-      <template v-if="slots.right" #right>
-        <slot name="right"></slot>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
       </template>
-    </InputTextareaCore>
-    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="false" :inputVariant />
+    </InputDescription>
   </div>
 </template>
 
@@ -103,11 +137,17 @@ const props = defineProps({
 
 const slots = useSlots()
 
-const id = useId()
 const formTheme = computed(() => {
   return props.fieldHasError ? "error" : props.theme
 })
 
+const id = `${props.name}-${useId()}`
+const errorId = `${id}-error-message`
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined
+  return props.fieldHasError ? errorId : ariaDescribedbyId
+})
+
 const modelValue = defineModel<string | number | readonly string[] | null | undefined>()
 const isActive = ref<boolean>(false)
 const isDirty = ref<boolean>(false)

package/nuxt.config.ts

@@ -2,7 +2,6 @@
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ["modern-normalize", "./app/assets/styles/main.css"],
   modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/test-utils/module"],
   alias: {
     "#shared": "./shared",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",

package/app/assets/styles/extends-layer/srcdev-forms/components/_form-fieldset.css

@@ -1,38 +0,0 @@
-.srcdev-forms-extended {
-  .form-fieldset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-
-    &.single-checkbox-fieldset {
-    }
-
-    &.multiple-checkboxes-fieldset {
-    }
-
-    &.multiple-radiobuttons-fieldset {
-    }
-
-    .form-fieldset-legend {
-      color: var(--form-fieldset-legend-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-
-      &.has-description {
-        margin-bottom: 0;
-      }
-    }
-
-    .form-fieldset-description {
-      font-size: 1.6rem;
-      margin-top: 1.2rem;
-    }
-
-    .form-fieldset-content {
-      margin-block-start: 0;
-      margin-block-end: 0;
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-button.css

@@ -1,66 +0,0 @@
-.srcdev-forms-extended {
-  .input-button-core {
-    gap: var(--form-button-icon-gap);
-    border-radius: var(--form-input-border-radius);
-
-    padding-inline: var(--form-button-padding-inline);
-    padding-block-start: var(--form-element-padding-block-start);
-    padding-block-end: var(--form-element-padding-block-end);
-
-    box-shadow: var(--box-shadow-off);
-    background-color: var(--theme-button-surface);
-    border: var(--form-element-border-width) solid var(--theme-button-border);
-    color: var(--theme-button-text);
-    outline: var(--form-element-outline-width) solid var(--theme-button-outline);
-    outline-offset: var(--form-element-outline-offset-focus);
-
-    &:hover {
-      background-color: var(--theme-button-surface-hover);
-      border-color: var(--theme-input-border-hover);
-      color: var(--theme-button-text-hover);
-      outline-color: var(--theme-button-outline-hover);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &:focus-visible {
-      background-color: var(--theme-button-surface-hover);
-      border-color: var(--theme-button-border-focus);
-      color: var(--theme-button-text-focus);
-      outline-color: var(--theme-button-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &[readonly] {
-      opacity: 0.5;
-      &:hover,
-      &:focus-visible {
-        cursor: not-allowed;
-      }
-    }
-
-    &.icon-only {
-      aspect-ratio: 1;
-      height: var(--form-icon-only-button-size);
-      width: var(--form-icon-only-button-size);
-      margin: 0;
-      padding: 0;
-    }
-
-    .btn-text {
-      display: inline-block;
-      white-space: nowrap;
-      font-size: var(--form-element-font-size);
-      line-height: var(--form-element-line-height);
-    }
-
-    .btn-icon {
-      display: flex;
-      .icon {
-        aspect-ratio: 1;
-        display: inline-block;
-        height: var(--form-icon-size);
-        width: var(--form-icon-size);
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-core.css

@@ -1,66 +0,0 @@
-.srcdev-forms-extended {
-  .input-checkbox-radio-wrapper {
-    background-color: var(--theme-checkbox-symbol-surface);
-    border: var(--form-element-border-width) solid var(--theme-input-border);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-    box-shadow: var(--_box-shadow);
-
-    &.x-small {
-      --input-symbol-size: var(--step-3);
-    }
-
-    &.small {
-      --input-symbol-size: var(--step-4);
-    }
-
-    &.default {
-      --input-symbol-size: var(--step-7);
-    }
-
-    &.medium {
-      --input-symbol-size: var(--step-6);
-    }
-
-    &.large {
-      --input-symbol-size: var(--step-6);
-    }
-
-    &.checkbox {
-      border-radius: var(--form-input-border-radius);
-      &.button {
-        &.display-as-disc {
-          border-radius: 50%;
-        }
-      }
-    }
-
-    &.radio {
-      border-radius: 50%;
-    }
-
-    /* focus-visible */
-    &:not(.button):focus-within {
-      background-color: var(--theme-input-surface-focus);
-      outline-color: var(--theme-input-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    .input-checked-icon {
-      color: var(--theme-checkbox-symbol-color);
-      box-shadow: var(--_box-shadow);
-    }
-
-    .input-checkbox-radio-core {
-      margin: 0;
-      opacity: 0;
-
-      &:not(.is-button) {
-        &:focus-visible {
-          /* background-color: var(--theme-input-surface-focus);
-          outline-color: var(--theme-input-outline-focus);
-          outline-offset: var(--form-element-outline-offset-focus); */
-        }
-      }
-    }
-  }
-}