srcdev-nuxt-forms 0.2.0 → 1.0.0

package/components/forms/input-checkbox/InputCheckboxCore.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="input-checkbox-wrapper" :class="[size, `theme-${theme}`, checkboxAppearance, { error: fieldHasError }]">
+  <div class="input-checkbox-wrapper" :data-form-theme="formTheme" :class="[size, checkboxAppearance, { error: fieldHasError }]">
     <input
       type="checkbox"
       :true-value="trueValue"
       :false-value="falseValue"
       :id
       :name
-      :required="props.required && !props.multipleOptions"
+      :required="required && !multipleOptions"
       :value="trueValue"
-      :class="['input-checkbox-core', `theme-${theme}`, size, checkboxAppearance, { error: fieldHasError }]"
-      v-model="modelValue.data[name]"
+      :class="['input-checkbox-core', size, checkboxAppearance, { error: fieldHasError }]"
+      v-model="modelValue"
       ref="inputField"
     />
     <div v-if="checkboxAppearance === 'with-decorator'" :class="['input-checkbox-decorator', size, checkboxStyle]">
@@ -21,13 +21,8 @@
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-
-import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
-// import { validationConfig } from '@/components/forms/c12/validation-patterns';
-
-const props = defineProps({
+const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, checkboxAppearance, checkboxStyle, fieldHasError } = defineProps({
   id: {
-    // type: String as PropType<string>,
     type: String,
     required: true,
   },
@@ -39,10 +34,6 @@ const props = defineProps({
     type: Boolean,
     value: false,
   },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
   trueValue: {
     type: [String, Number, Boolean],
     default: true,
@@ -55,10 +46,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
   theme: {
     type: String as PropType<string>,
     default: 'primary',
@@ -87,162 +74,57 @@ const props = defineProps({
       return propValidators.checkboxStyle.includes(value);
     },
   },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
 });
 
-const slots = useSlots();
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
 
-const modelValue = defineModel() as Ref<IFormData>;
-
-// const updateFocus = (name: string, isFocused: boolean) => {
-//   modelValue.value.focusedField = isFocused ? name : '';
-// };
-
-// const isFocused = computed(() => {
-//   return modelValue.value.focusedField == name.value;
-// });
-
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
 });
 
-// const validatorLocale = toRef(useRuntimeConfig().public.validatorLocale);
+const modelValue = defineModel<any>();
 
-// const componentValidation = validationConfig[validatorLocale.value][props.validation];
 const inputField = ref<HTMLInputElement | null>(null);
 
-const isArray = Array.isArray(modelValue.value.data[name.value]);
+const isArray = Array.isArray(modelValue.value);
 
 const isChecked = computed(() => {
   if (isArray) {
-    if (name.value in modelValue.value.data) {
-      const keyValue = modelValue.value.data[name.value] as any[];
-      const isValid = keyValue.indexOf(props.trueValue) > -1;
-      // modelValue.value.validityState[name.value] = isValid;
-      return isValid;
-    }
-  } else {
-    const isValid = modelValue.value.data[name.value] === props.trueValue;
-    modelValue.value.validityState[name.value] = isValid;
-    return isValid;
-  }
-});
-
-const isFocussed = ref(false);
-
-// watch(isChecked, () => {
-//   console.log('inputField.value', inputField.value?.validity);
-// });
-
-// const fieldIsDirty = computed(() => {
-//   return modelValue.value!.formFieldsC12[name.value].isDirty;
-// });
-const fieldHasError = computed(() => {
-  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[name.value].isValid;
-});
-
-// const { updateFieldValidity } = useFormControl(name.value);
-
-if (
-  // !isArray &&
-  modelValue.value.formFieldsC12[name.value] === undefined
-) {
-  const formFieldC12 = <IFormFieldC12>{
-    label: props.c12.label,
-    placeholder: props.c12.placeholder,
-    errorMessage: props.c12.errorMessage,
-    useCustomError: false,
-    customErrors: {},
-    isValid: false,
-    isDirty: false,
-    type: isArray ? 'array' : 'string',
-    previousValue: null,
-  };
-  modelValue.value.formFieldsC12[name.value] = formFieldC12;
-}
-
-// const { initFormFieldsC12 } = useFormControl();
-// initFormFieldsC12(props.name, formFieldC12);
-
-const fieldValue = computed(() => {
-  return modelValue.value.data[name.value];
-});
-
-watch(fieldValue, () => {
-  if (isArray) {
-    // console.log(Object.values(modelValue.value.data[name.value] ?? []).length);
-    modelValue.value.validityState[name.value] = Object.values(modelValue.value.data[name.value] ?? []).length > 0;
-    modelValue.value!.formFieldsC12[name.value].isValid = modelValue.value.validityState[name.value];
-    // console.log(Object.keys(modelValue.value.data[name.value]).length);
-    // if (name.value in modelValue.value.data) {
-    //   const keyValue = modelValue.value.data[name.value] as any[];
-    //   const isValid = keyValue.indexOf(props.trueValue) > -1;
-    //   modelValue.value.validityState[name.value] = isValid;
-    // }
+    return modelValue.value.indexOf(trueValue) > -1;
   } else {
-    // updateFieldValidity(name.value, inputField.value?.validity.valid ?? false);
-    if (!modelValue.value!.formFieldsC12[name.value].isDirty) {
-      modelValue.value!.formFieldsC12[name.value].isDirty = modelValue.value.data[name.value] !== '';
-    }
-    modelValue.value!.formFieldsC12[name.value].isValid = inputField.value?.validity.valid ?? false;
-    modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
+    return modelValue.value === trueValue;
   }
-
-  // if (modelValue.value!.formFieldsC12[name.value].useCustomError && modelValue.value.data[props.name] === modelValue.value.formFieldsC12[props.name].previousValue) {
-  //   modelValue.value!.validityState[name.value] = false;
-  //   modelValue.value!.formFieldsC12[name.value].isValid = false;
-  //   modelValue.value.displayErrorMessages = true;
-  // }
 });
-
-// const isValid = () => {
-//   setTimeout(() => {
-//     modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
-//     modelValue.value!.formFieldsC12[name.value].isValid = inputField.value?.validity.valid ?? false;
-//     if (!modelValue.value!.formFieldsC12[name.value].isDirty) {
-//       modelValue.value!.formFieldsC12[name.value].isDirty = modelValue.value.data[name.value] !== '';
-//     }
-//   }, 0);
-// };
-
-// onMounted(() => {
-//   isValid();
-// });
 </script>
 
 <style scoped lang="css">
 .input-checkbox-wrapper {
   --_checkbox-size: initial;
   --_checkbox-border-radius: 4px;
-  --_form-theme: var(--theme-form-primary);
   --_outline-width: var(--input-outline-width-thin);
-  --_border-width: var(--input-border-width-thin);
-  --_border-color: var(--_form-theme);
-  --_focus-colour: var(--theme-form-primary-focus);
+  --_border-width: var(--input-border-width-thin); /* --input-border-width-default / 2px */
 
   display: grid;
-  grid-template-areas: 'checkbox-stack';
-
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-    --_focus-colour: var(--theme-form-secondary-focus);
-  }
-
-  &.error {
-    --_form-theme: var(--theme-error);
-  }
+  grid-template-areas: 'element-stack';
 
   &.with-decorator {
     border-radius: var(--_checkbox-border-radius);
-    border: var(--_border-width) solid var(--_border-color);
+    border: var(--_border-width) solid var(--theme-form-input-border);
     height: var(--_checkbox-size);
     width: var(--_checkbox-size);
 
     &:has(.input-checkbox-core:focus-visible) {
-      --_border-color: white;
-      box-shadow: 0 0 2px 3px var(--_focus-colour);
-      outline-color: var(--_focus-colour);
+      border: var(--_border-width) solid var(--theme-form-input-border-focus);
+      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 50%);
+      box-shadow: var(--theme-form-focus-box-shadow);
     }
   }
 
@@ -265,7 +147,8 @@ watch(fieldValue, () => {
 
   .input-checkbox-decorator {
     display: grid;
-    grid-area: checkbox-stack;
+    grid-area: element-stack;
+    background-color: var(--theme-form-checkbox-bg);
 
     height: var(--_checkbox-size);
     width: var(--_checkbox-size);
@@ -284,10 +167,9 @@ watch(fieldValue, () => {
       grid-area: stack;
       width: calc(var(--_checkbox-size) * 0.2);
       height: calc(var(--_checkbox-size) * 0.45);
-      border-bottom: 3px solid var(--_form-theme);
-      border-right: 3px solid var(--_form-theme);
+      border-bottom: 3px solid var(--theme-form-checkbox-symbol);
+      border-right: 3px solid var(--theme-form-checkbox-symbol);
       transform: rotate(45deg) translate(-1px, -1px);
-      /* transform: translate(-3px, 0px); */
       opacity: 0;
       transition: opacity 0.2s ease-in-out;
 
@@ -300,7 +182,7 @@ watch(fieldValue, () => {
       grid-area: stack;
       width: calc(var(--_checkbox-size) * 0.65);
       height: 3px;
-      background-color: var(--_form-theme);
+      background-color: var(--theme-form-checkbox-symbol);
       transform: rotate(45deg);
       opacity: 0;
       transition: opacity 0.2s ease-in-out;
@@ -319,7 +201,7 @@ watch(fieldValue, () => {
         display: block;
         width: calc(var(--_checkbox-size) * 0.65);
         height: 3px;
-        background-color: var(--_form-theme);
+        background-color: var(--theme-form-checkbox-symbol);
         transform: rotate(-90deg);
         opacity: 0;
         transition: opacity 0.2s ease-in-out;
@@ -345,8 +227,8 @@ watch(fieldValue, () => {
   }
 
   .input-checkbox-core {
-    grid-area: checkbox-stack;
-    border: var(--_border-width) solid var(--_form-theme);
+    grid-area: element-stack;
+    border: var(--_border-width) solid var(--theme-form-input-border);
     height: var(--_checkbox-size);
     width: var(--_checkbox-size);
 
@@ -364,12 +246,9 @@ watch(fieldValue, () => {
     }
 
     &:focus-visible {
-      border-radius: var(--input-border-radius);
-    }
-
-    &:focus {
-      border: var(--_border-width) solid var(--_form-theme);
-      outline: var(--_outline-width) solid hsl(from var(--_form-theme) h s 50%);
+      border: var(--_border-width) solid var(--theme-form-input-border);
+      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 50%);
+      box-shadow: var(--theme-form-focus-box-shadow);
     }
 
     &:checked::after {
@@ -379,29 +258,6 @@ watch(fieldValue, () => {
       place-content: center;
       font-size: calc(var(--_checkbox-size) * 0.75);
     }
-    &.error {
-      /* border-color: var(--theme-error); */
-      border: var(--_border-width) solid var(--theme-error);
-      outline: var(--_outline-width) solid hsl(from var(--theme-error) h s 75%);
-      background-color: hsl(from var(--theme-error) h s 95%);
-    }
-
-    &.theme-secondary {
-      --_form-theme: var(--theme-form-secondary);
-    }
-
-    /* &:valid {
-      border-color: var(--theme-success);
-    }
-    &:invalid {
-      border-color: var(--theme-error);
-    }
-    &:not(:placeholder-shown):valid {
-      border-color: var(--theme-success);
-    }
-    &:not(:placeholder-shown):invalid {
-      border-color: var(--theme-error);
-    } */
   }
 }
 </style>

package/components/forms/input-checkbox/InputCheckboxWithLabel.vue

@@ -1,19 +1,18 @@
 <template>
-  <div class="input-checkbox-with-label" :class="[styleClassPassthrough, `theme-${theme}`, { error: fieldHasError }]">
-    <InputCheckboxCore :id :name :required :c12 v-model="modelValue" :theme :size :trueValue :falseValue :checkboxAppearance :checkboxStyle />
-    <label class="input-checkbox-label" :for="id">{{ c12.label }}</label>
+  <div class="input-checkbox-with-label" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
+    <InputCheckboxCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :checkboxAppearance :checkboxStyle :fieldHasError :theme />
+    <label v-if="hasLabelContent" class="input-checkbox-label body-normal" :for="id">
+      <slot name="labelContent"></slot>
+    </label>
+    <label v-else class="input-checkbox-label body-normal-semibold" :for="id">{{ label }}</label>
   </div>
 </template>
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
-// import { validationConfig } from '@/components/forms/c12/validation-patterns';
-
-const props = defineProps({
+const { id, name, label, required, fieldHasError, trueValue, falseValue, size, checkboxAppearance, checkboxStyle, optionsLayout, styleClassPassthrough, theme } = defineProps({
   id: {
-    // type: String as PropType<string>,
     type: String,
     required: true,
   },
@@ -21,13 +20,17 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  label: {
+    type: String,
+    required: true,
+  },
   required: {
     type: Boolean,
-    value: false,
+    default: false,
   },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
+  fieldHasError: {
+    type: Boolean,
+    default: false,
   },
   trueValue: {
     type: [String, Number, Boolean],
@@ -37,21 +40,6 @@ const props = defineProps({
     type: [String, Number, Boolean],
     default: false,
   },
-  multipleOptions: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
   size: {
     type: String as PropType<string>,
     default: 'medium',
@@ -73,49 +61,52 @@ const props = defineProps({
       return propValidators.checkboxStyle.includes(value);
     },
   },
+  optionsLayout: {
+    type: String as PropType<string>,
+    default: 'equal-widths',
+    validator(value: string) {
+      return propValidators.optionsLayout.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
 });
 
 const slots = useSlots();
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
+const hasLabelContent = computed(() => slots.labelContent !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
 
-const modelValue = defineModel() as Ref<IFormData>;
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
-});
-const fieldHasError = computed(() => {
-  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[name.value].isValid;
-});
+const modelValue = defineModel();
 </script>
 
 <style lang="css">
 .input-checkbox-with-label {
-  --_form-theme: var(--theme-form-primary);
-  --_border-width: var(--input-border-width-default);
-  --_outline-width: var(--input-outline-width-thin);
-  --_label-padding-inline: 10px;
+  --_white-space: wrap;
 
   display: flex;
   align-items: center;
 
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-  }
-
-  &.error {
-    --_form-theme: var(--theme-error);
+  &.inline {
+    --_white-space: nowrap;
   }
 
   .input-checkbox-label {
-    color: var(--_form-theme);
-    font-family: var(--font-family);
-    font-size: 14px;
-    font-weight: 500;
     display: flex;
     width: 100%;
     height: 100%;
     align-items: center;
-    padding-inline: var(--_label-padding-inline);
+    margin-block: 8px;
+    padding-inline: 8px;
+    white-space: var(--_white-space);
 
     &:hover {
       cursor: pointer;

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

@@ -1,30 +1,28 @@
 <template>
-  <fieldset class="multiple-checkboxes-fieldset" :class="[`theme-${theme}`, { error: fieldHasError }]">
+  <fieldset class="multiple-checkboxes-fieldset" :class="[{ error: fieldHasError }]">
     <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
     <template v-if="hasDescription">
       <slot name="description"></slot>
     </template>
-    <InputError :errorMessaging :fieldHasError :id="name" :isDetached="true" />
     <div class="multiple-checkboxes-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
         <InputCheckboxWithLabel
           :id="item.value"
           :name
           :required
-          :c12="{
-            label: item.label,
-            placeholder: 'eg. Type something here',
-            errorMessage: 'Please accept our terms and conditions',
-          }"
+          :label="item.label"
+          :fieldHasError
           v-model="modelValue"
           :true-value="item.value"
-          :theme
           :size
           :checkboxAppearance
+          :optionsLayout
           :checkboxStyle
+          :theme
         />
       </template>
     </div>
+    <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
   </fieldset>
 </template>
 
@@ -32,9 +30,13 @@
 import propValidators from '../../c12/prop-validators';
 import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
-import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
+import type { C12nMultipleCheckboxes, IFormFieldC12, IFormData } from '@/types/types.forms';
 
-const props = defineProps({
+const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
   name: {
     type: String,
     required: true,
@@ -43,28 +45,29 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  required: {
-    type: Boolean,
-    value: false,
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
   },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
+  errorMessage: {
+    type: [Object, String],
     required: true,
   },
-  multipleOptions: {
+  required: {
     type: Boolean,
     default: false,
   },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
+  fieldHasError: {
+    type: Boolean,
+    default: false,
   },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
+  multipleOptions: {
+    type: Boolean,
+    default: false,
   },
   size: {
     type: String as PropType<string>,
@@ -98,65 +101,36 @@ const props = defineProps({
       return propValidators.checkboxStyle.includes(value);
     },
   },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
 });
 
 const slots = useSlots();
 const hasDescription = computed(() => slots.description !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
 
-const modelValue = defineModel() as Ref<IFormData>;
+const modelValue = defineModel();
 const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
-
-// const isArray = Array.isArray(modelValue.value.data[props.name]);
-// const formFieldC12 = <IFormFieldC12>{
-//   label: props.c12.label,
-//   placeholder: props.c12.placeholder,
-//   errorMessage: props.c12.errorMessage,
-//   useCustomError: false,
-//   customErrors: {},
-//   isValid: false,
-//   isDirty: false,
-//   type: isArray ? 'array' : 'string',
-//   previousValue: null,
-// };
-// modelValue.value.formFieldsC12[props.name] = formFieldC12;
-
-const fieldHasError = computed(() => {
-  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[props.name].isValid;
-});
-
-const errorMessaging = computed(() => {
-  if (
-    typeof modelValue.value!.formFieldsC12[props.name] !== 'undefined' &&
-    modelValue.value!.formFieldsC12[props.name].useCustomError &&
-    modelValue.value.data[props.name] === modelValue.value.formFieldsC12[props.name].previousValue
-  ) {
-    return modelValue.value.formFieldsC12[props.name]?.customErrors || [];
-  } else {
-    return props.c12.errorMessage;
-  }
-});
 </script>
 
 <style lang="css">
 .multiple-checkboxes-fieldset {
-  --_form-theme: var(--theme-form-primary);
-
   margin: 0;
   padding: 0;
   border: 0;
 
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-  }
-
-  &.error {
-    --_form-theme: var(--theme-error);
-  }
-
   legend {
-    color: var(--_form-theme);
     font-family: var(--font-family);
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
 
     &.has-description {
@@ -168,7 +142,6 @@ const errorMessaging = computed(() => {
     font-family: var(--font-family);
     font-size: 16px;
     margin-top: 12px;
-    color: var(--theme-form-secondary);
   }
 }