srcdev-nuxt-forms 6.1.0 → 6.1.2

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

@@ -3,9 +3,16 @@
     class="input-textarea-wrapper"
     :data-theme="formTheme"
     :data-size="size"
-    :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
+    :class="[
+      inputVariant,
+      { dirty: isDirty },
+      { active: isActive },
+      { error: fieldHasError },
+      { 'has-left-slot': slots.left },
+      { 'has-right-slot': slots.right },
+    ]"
   >
-    <span v-if="hasLeftSlot" class="slot left-slot">
+    <span v-if="slots.left" class="slot left-slot">
       <slot name="left"></slot>
     </span>
 
@@ -19,19 +26,19 @@
       v-model="modelValue"
       ref="inputField"
       :aria-invalid="fieldHasError"
-      :aria-describedby="`${id}-error-message`"
+      :aria-describedby
       @focusin="updateFocus(true)"
       @focusout="updateFocus(false)"
     ></textarea>
 
-    <span v-if="hasRightSlot" class="slot right-slot">
+    <span v-if="slots.right" class="slot right-slot">
       <slot name="right"></slot>
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 const props = defineProps({
   maxlength: {
     type: Number,
@@ -47,7 +54,11 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
+  },
+  ariaDescribedby: {
+    type: String,
+    default: "",
   },
   fieldHasError: {
     type: Boolean,
@@ -63,46 +74,44 @@ const props = defineProps({
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   size: {
     type: String as PropType<string>,
-    default: 'default',
+    default: "default",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   inputVariant: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: "normal",
     validator(value: string) {
-      return propValidators.inputVariant.includes(value);
+      return propValidators.inputVariant.includes(value)
     },
   },
-});
+})
 
-const slots = useSlots();
-const hasLeftSlot = computed(() => slots.left !== undefined);
-const hasRightSlot = computed(() => slots.right !== undefined);
+const slots = useSlots()
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
-const isDirty = defineModel('isDirty');
-const isActive = defineModel('isActive');
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>()
+const isDirty = defineModel("isDirty")
+const isActive = defineModel("isActive")
 
 const updateFocus = (isFocused: boolean) => {
-  isActive.value = isFocused;
-};
+  isActive.value = isFocused
+}
 
-const inputField = ref<HTMLInputElement | null>(null);
+const inputField = ref<HTMLInputElement | null>(null)
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

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

@@ -1,38 +1,84 @@
 <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']">
-      <template #textLabel>{{ label }}</template>
-    </InputLabel>
+  <div>
+    <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']"
+      >
+        <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="hasLeftSlot" #left>
-        <slot name="left"></slot>
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
       </template>
-      <template v-if="hasRightSlot" #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>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 const props = defineProps({
   maxlength: {
     type: Number,
@@ -44,7 +90,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   label: {
     type: String,
@@ -68,58 +114,62 @@ const props = defineProps({
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   size: {
     type: String as PropType<string>,
-    default: 'default',
+    default: "default",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   inputVariant: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: "normal",
     validator(value: string) {
-      return propValidators.inputVariant.includes(value);
+      return propValidators.inputVariant.includes(value)
     },
   },
-});
+})
 
-const slots = useSlots();
-const hasLeftSlot = computed(() => slots.left !== undefined);
-const hasRightSlot = computed(() => slots.right !== undefined);
+const slots = useSlots()
 
-const id = useId();
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  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);
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>()
+const isActive = ref<boolean>(false)
+const isDirty = ref<boolean>(false)
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 const testDirty = () => {
-  const watchValue = modelValue.value ?? '';
+  const watchValue = modelValue.value ?? ""
 
-  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
-    isDirty.value = true;
+  if (!isDirty.value && typeof watchValue === "string" && watchValue.length > 0) {
+    isDirty.value = true
   }
-};
+}
 
 onMounted(() => {
-  testDirty();
-});
+  testDirty()
+})
 
 watch(
   () => modelValue.value,
   () => {
-    testDirty();
+    testDirty()
   }
-);
+)
 </script>

package/app/components/forms/toggle-switch/ToggleSwitchCore.vue

@@ -1,7 +1,23 @@
 <template>
   <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
-    <div @click="toggleSwitchValue" class="toggle-switch-wrapper" :class="[{ round }, { 'use-default-icons': useDefaultIcons }]" :for="inputId">
-      <input type="checkbox" v-model="modelValue" :true-value :false-value :aria-invalid="fieldHasError" :id="inputId" :aria-describedby="`${id}-description`" :name :required :checked="isChecked" />
+    <div
+      @click="toggleSwitchValue"
+      class="toggle-switch-wrapper"
+      :class="[{ round }, { 'use-default-icons': useDefaultIcons }]"
+      :for="inputId"
+    >
+      <input
+        type="checkbox"
+        v-model="modelValue"
+        :true-value
+        :false-value
+        :aria-invalid="fieldHasError"
+        :id="inputId"
+        :aria-describedby="`${id}-description`"
+        :name
+        :required
+        :checked="isChecked"
+      />
       <div class="symbol-wrapper" :class="[{ round }]">
         <div class="symbol" :class="[{ round }]">
           <div class="symbol-icon icon-on">
@@ -22,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   id: {
@@ -55,9 +71,9 @@ const props = defineProps({
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   round: {
@@ -66,39 +82,36 @@ 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)
     },
   },
   ariaDescribedby: {
     type: String,
     default: null,
   },
-});
+})
 
-const slots = useSlots();
-const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
-const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
-const useDefaultIcons = computed(() => !hasIconOnSlot.value && !hasIconOffSlot.value);
+const slots = useSlots()
+const useDefaultIcons = computed(() => !slots.iconOn && !slots.iconOff)
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const modelValue = defineModel()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const inputId = computed(() => `toggle-sitch-${props.id}`);
+const inputId = computed(() => `toggle-sitch-${props.id}`)
 
 const isChecked = computed(() => {
-  return modelValue.value === props.trueValue;
-});
+  return modelValue.value === props.trueValue
+})
 
 const toggleSwitchValue = () => {
-  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
-  console.log(`toggleSwitchValue(${modelValue.value})`);
-};
+  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue
+}
 </script>
 
 <style lang="css">
@@ -149,16 +162,21 @@ const toggleSwitchValue = () => {
       /* background: blue; */
       border: var(--theme-form-toggle-border-width) solid var(--theme-form-toggle-border-color);
       outline: var(--theme-form-toggle-outline-width) solid var(--theme-form-toggle-outline-color);
-      border-radius: calc(var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 2) + calc(var(--_switch-padding) * 2));
+      border-radius: calc(
+        var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 2) + calc(var(--_switch-padding) * 2)
+      );
       display: inline-flex;
       align-items: center;
       justify-content: start;
-      width: calc(var(--_symbol-size) + var(--_symbol-checked-offset) + calc(var(--theme-form-toggle-border-width) * 2) + calc(var(--_switch-padding) * 2));
+      width: calc(
+        var(--_symbol-size) + var(--_symbol-checked-offset) + calc(var(--theme-form-toggle-border-width) * 2) +
+          calc(var(--_switch-padding) * 2)
+      );
       padding: var(--_switch-padding);
 
       .symbol {
         display: inline-grid;
-        grid-template-areas: 'icon';
+        grid-template-areas: "icon";
         place-content: center;
 
         aspect-ratio: 1/1;

package/app/components/forms/toggle-switch/ToggleSwitchCoreOld.vue

@@ -1,14 +1,24 @@
 <template>
   <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
     <div @click="toggleSwitchValue" class="toggle-switch-input" :class="[{ round }]" :for="inputId">
-      <input type="checkbox" v-model="modelValue" :true-value :false-value :aria-invalid="fieldHasError" :id="inputId" :aria-describedby="`${id}-description`" :name :required />
+      <input
+        type="checkbox"
+        v-model="modelValue"
+        :true-value
+        :false-value
+        :aria-invalid="fieldHasError"
+        :id="inputId"
+        :aria-describedby="`${id}-description`"
+        :name
+        :required
+      />
       <div class="symbol-wrapper" :class="[{ round }]">
         <div class="symbol" :class="[{ round }]">
-          <div v-if="hasIconOnSlot" class="symbol-icon icon-on">
+          <div v-if="slots.iconOn" class="symbol-icon icon-on">
             <slot name="iconOn"></slot>
           </div>
 
-          <div v-if="hasIconOffSlot" class="symbol-icon icon-off">
+          <div v-if="slots.iconOff" class="symbol-icon icon-off">
             <slot name="iconOff"></slot>
           </div>
         </div>
@@ -18,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   id: {
@@ -51,9 +61,9 @@ const props = defineProps({
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   round: {
@@ -62,33 +72,31 @@ 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)
     },
   },
   ariaDescribedby: {
     type: String,
     default: null,
   },
-});
+})
 
-const slots = useSlots();
-const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
-const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
+const slots = useSlots()
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const modelValue = defineModel()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const inputId = computed(() => `toggle-sitch-${props.id}`);
+const inputId = computed(() => `toggle-sitch-${props.id}`)
 
 const toggleSwitchValue = () => {
-  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
-};
+  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue
+}
 </script>
 
 <style lang="css">
@@ -102,8 +110,14 @@ const toggleSwitchValue = () => {
   .toggle-switch-input {
     position: relative;
     display: inline-block;
-    height: calc(var(--form-toggle-symbol-size) + calc(var(--form-element-border-width) * 2) + calc(var(--form-element-outline-width) * 2));
-    width: calc(var(--form-toggle-symbol-size) * 2 - calc(var(--form-element-border-width) * 2) + calc(var(--form-element-outline-width) * 2) + var(--form-toggle-switch-width-adjustment));
+    height: calc(
+      var(--form-toggle-symbol-size) + calc(var(--form-element-border-width) * 2) +
+        calc(var(--form-element-outline-width) * 2)
+    );
+    width: calc(
+      var(--form-toggle-symbol-size) * 2 - calc(var(--form-element-border-width) * 2) +
+        calc(var(--form-element-outline-width) * 2) + var(--form-toggle-switch-width-adjustment)
+    );
 
     input {
       opacity: 0;
@@ -126,7 +140,7 @@ const toggleSwitchValue = () => {
 
       .symbol {
         display: grid;
-        grid-template-areas: 'icon-stack';
+        grid-template-areas: "icon-stack";
         overflow: clip;
         position: absolute;