srcdev-nuxt-forms 0.1.0 → 0.2.0

package/components/forms/input-radio/variants/MultipleRadio.vue

@@ -0,0 +1,183 @@
+<template>
+  <fieldset class="multiple-radio-fieldset" :class="[`theme-${theme}`, { error: fieldHasError }]" :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup">
+    <legend :class="[{ 'has-description': hasDescription }]">
+      {{ legend }}
+      <span v-if="required">&nbsp;(Required)</span>
+    </legend>
+    <template v-if="hasDescription">
+      <slot name="description"></slot>
+    </template>
+    <InputError :errorMessaging :fieldHasError :id="name" :isDetached="true" />
+    <div class="multiple-radio-items" :class="[optionsLayout]">
+      <template v-for="item in fieldData.data" :key="item.id">
+        <InputRadioWithLabel
+          :id="item.value"
+          :name
+          :required
+          :c12="{
+            label: item.label,
+            placeholder: 'eg. Type something here',
+            errorMessage: 'Please accept our terms and conditions',
+          }"
+          v-model="modelValue"
+          :true-value="item.value"
+          :theme
+          :size
+          :radioAppearance
+        />
+      </template>
+    </div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
+
+import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  legend: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+  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',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  optionsLayout: {
+    type: String as PropType<string>,
+    default: 'equal-widths',
+    validator(value: string) {
+      return propValidators.optionsLayout.includes(value);
+    },
+  },
+  equalCols: {
+    type: Boolean,
+    default: true,
+  },
+  radioAppearance: {
+    type: String as PropType<string>,
+    default: null,
+    validator(value: string) {
+      return propValidators.radioAppearance.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasDescription = computed(() => slots.description !== undefined);
+
+const modelValue = defineModel() as Ref<IFormData>;
+const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+
+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;
+  }
+});
+
+// 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;
+});
+</script>
+
+<style lang="css">
+.multiple-radio-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-weight: 500;
+
+    &.has-description {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.multiple-radio-items {
+  display: flex;
+  gap: 18px;
+  margin-top: 12px;
+
+  &.inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &.block {
+    flex-direction: column;
+  }
+
+  &.equal-widths {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
+}
+</style>

package/components/forms/input-radio/variants/SingleRadio.vue

@@ -0,0 +1,131 @@
+<template>
+  <fieldset class="single-radio-fieldset" :class="[`theme-${theme}`, { 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" />
+    <InputRadioWithLabel :id :name :required :c12 v-model="modelValue" :theme :size :radioAppearance />
+  </fieldset>
+</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({
+  id: {
+    // type: String as PropType<string>,
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  legend: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    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',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  radioAppearance: {
+    type: String as PropType<string>,
+    default: null,
+    validator(value: string) {
+      return propValidators.radioAppearance.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasDescription = computed(() => slots.description !== undefined);
+
+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[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">
+.single-radio-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-weight: 500;
+    margin-bottom: 12px;
+
+    &.has-description {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

package/components/forms/input-range/InputRangeCore.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="input-range-wrapper">
+    <div v-if="hasLeftContent" class="slot left">
+      <slot name="left"></slot>
+    </div>
+
+    <input
+      type="range"
+      :id
+      :name
+      :required
+      :min
+      :max
+      :step
+      :class="['input-range-core', `input-range--${theme}`, `input-range--${size}`, `input-range--${weight}`, styleClassPassthrough]"
+      v-model="modelValue.data[name]"
+      ref="inputField"
+    />
+    <div v-if="hasRightContent" class="slot right">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
+const props = defineProps({
+  id: {
+    // type: String as PropType<string>,
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+  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',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLeftContent = computed(() => slots.left !== undefined);
+const hasRightContent = computed(() => slots.right !== undefined);
+
+const modelValue = defineModel() as Ref<IFormData>;
+
+const name = computed(() => {
+  return props.name !== null ? props.name : props.id;
+});
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+const formFieldC12 = <IFormFieldC12>{
+  label: props.c12.label,
+  placeholder: props.c12.placeholder,
+  errorMessage: props.c12.errorMessage,
+  useCustomError: false,
+  customErrors: {},
+  isValid: false,
+  isDirty: false,
+  type: 'number',
+  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 (!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;
+
+  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 lang="css">
+.input-range-wrapper {
+  --_form-theme: var(--theme-form-primary);
+  --_focus-colour: var(--theme-form-primary-focus);
+  --_gutter: 12px;
+  --_border-width: var(--input-border-width-thin);
+  --_border-color: var(--_form-theme);
+  --_outline-width: var(--input-outline-width-thin);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  .input-range-core {
+    flex-grow: 1;
+    height: 24px;
+
+    &:focus-visible {
+      outline: var(--focus-visible-outline);
+      box-shadow: var(--focus-visible-box-shadow);
+    }
+  }
+}
+</style>

package/components/forms/input-range/variants/InputRangeDefault.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="input-range-with-label" :class="[styleClassPassthrough, `theme-${theme}`, { error: fieldHasError }]">
+    <label class="input-range-label" :for="id">{{ c12.label }}</label>
+    <template v-if="hasDescription">
+      <slot name="description"></slot>
+    </template>
+    <InputRangeCore :id :name :required :c12 v-model="modelValue" :theme :size :weight :min :max :step>
+      <template v-if="hasLeftContent" #left>
+        <slot name="left"></slot>
+      </template>
+      <template v-if="hasRightContent" #right>
+        <slot name="right"></slot>
+      </template>
+    </InputRangeCore>
+  </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({
+  id: {
+    // type: String as PropType<string>,
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+  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',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasDescription = computed(() => slots.description !== undefined);
+const hasLeftContent = computed(() => slots.left !== undefined);
+const hasRightContent = computed(() => slots.right !== undefined);
+
+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;
+});
+</script>
+
+<style lang="css">
+.input-range-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;
+
+  &.theme-secondary {
+    --_form-theme: var(--theme-form-secondary);
+  }
+
+  &.error {
+    --_form-theme: var(--theme-error);
+  }
+
+  .input-range-label {
+    color: var(--_form-theme);
+    display: block;
+    font-family: var(--font-family);
+    font-size: 18px;
+    font-weight: 500;
+    margin-bottom: 12px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .label-description {
+    font-family: var(--font-family);
+    font-size: 16px;
+    margin-top: 12px;
+    color: var(--theme-form-secondary);
+  }
+}
+</style>