srcdev-nuxt-forms 0.2.0 → 1.0.0

package/components/forms/input-radio/InputRadiobuttonCore.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="input-radiobutton-wrapper" :data-form-theme="formTheme" :class="[size, checkboxAppearance, { error: fieldHasError }]">
+    <input
+      type="radio"
+      :true-value="trueValue"
+      :false-value="falseValue"
+      :id
+      :name
+      :required="required && !multipleOptions"
+      :value="trueValue"
+      :class="['input-radiobutton-core', size, checkboxAppearance, { error: fieldHasError }]"
+      v-model="modelValue"
+      ref="inputField"
+    />
+    <div v-if="checkboxAppearance === 'with-decorator'" :class="['input-radiobutton-decorator', size, checkboxStyle]">
+      <div v-if="checkboxStyle === 'check' || checkboxStyle === 'cross'" :class="[checkboxStyle, { checked: isChecked }]"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, checkboxAppearance, checkboxStyle, fieldHasError } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  multipleOptions: {
+    type: Boolean,
+    default: false,
+  },
+  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);
+    },
+  },
+  checkboxAppearance: {
+    type: String as PropType<string>,
+    default: null,
+    validator(value: string) {
+      return propValidators.checkboxAppearance.includes(value);
+    },
+  },
+  checkboxStyle: {
+    type: String as PropType<string>,
+    default: 'check',
+    validator(value: string) {
+      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 formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel<any>();
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+const isArray = Array.isArray(modelValue.value);
+
+const isChecked = computed(() => {
+  if (isArray) {
+    return modelValue.value.indexOf(trueValue) > -1;
+  } else {
+    return modelValue.value === trueValue;
+  }
+});
+</script>
+
+<style scoped lang="css">
+.input-radiobutton-wrapper {
+  --_checkbox-size: initial;
+  --_outline-width: var(--input-outline-width-thin);
+  --_border-width: var(--input-border-width-thin);
+
+  display: grid;
+  grid-template-areas: 'element-stack';
+
+  &.with-decorator {
+    border-radius: 50%;
+    border: var(--_border-width) solid var(--theme-form-input-border);
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+    overflow: hidden;
+
+    &:has(.input-radiobutton-core:focus-visible) {
+      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);
+    }
+  }
+
+  /* Sizes */
+  &.x-small {
+    --_checkbox-size: 20px;
+  }
+  &.small {
+    --_checkbox-size: 24px;
+  }
+  &.normal {
+    --_checkbox-size: 30px;
+  }
+  &.medium {
+    --_checkbox-size: 40px;
+  }
+  &.large {
+    --_checkbox-size: 44px;
+  }
+
+  .input-radiobutton-decorator {
+    --_padding: 5px;
+    display: grid;
+    grid-area: element-stack;
+    background-color: var(--theme-form-checkbox-bg);
+
+    place-content: center;
+    position: relative;
+    z-index: -1;
+
+    div {
+      grid-area: stack;
+      background-color: hsl(from var(--theme-form-radio-symbol) h s 50%);
+      width: calc(var(--_checkbox-size) - (var(--_padding) * 2));
+      height: calc(var(--_checkbox-size) - var(--_padding) * 2);
+      border: 1px solid var(--theme-form-input-border);
+      border-radius: 50%;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+
+      &.checked {
+        opacity: 1;
+      }
+    }
+  }
+
+  .input-radiobutton-core {
+    grid-area: element-stack;
+    border: var(--_border-width) solid var(--theme-form-input-border);
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+
+    transition: all 0.2s ease-in-out;
+
+    &.with-decorator {
+      appearance: none;
+      margin: 0;
+      overflow: hidden;
+      opacity: 0;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    /* &:focus-visible {
+      border-radius: var(--input-border-radius);
+    } */
+
+    &:focus {
+      border: var(--_border-width) solid var(--theme-form-input-border);
+      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline) h s 50%);
+    }
+
+    &:checked::after {
+      display: grid;
+      font-family: var(--font-family);
+      place-content: center;
+      font-size: calc(var(--_checkbox-size) * 0.75);
+    }
+  }
+}
+</style>

package/components/forms/input-radio/InputRadiobuttonWithLabel.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="input-radiobutton-with-label" :class="[elementClasses, { error: fieldHasError }]">
+    <InputRadiobuttonCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :checkboxAppearance :checkboxStyle :fieldHasError :theme />
+    <label v-if="hasLabelContent" class="input-radiobutton-label body-normal" :for="id">
+      <slot name="labelContent"></slot>
+    </label>
+    <label v-else class="input-radiobutton-label body-normal-semibold" :for="id">{{ label }}</label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const { id, name, label, required, fieldHasError, trueValue, falseValue, size, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  checkboxAppearance: {
+    type: String as PropType<string>,
+    default: null,
+    validator(value: string) {
+      return propValidators.checkboxAppearance.includes(value);
+    },
+  },
+  checkboxStyle: {
+    type: String as PropType<string>,
+    default: 'check',
+    validator(value: string) {
+      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 hasLabelContent = computed(() => slots.labelContent !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const modelValue = defineModel();
+</script>
+
+<style lang="css">
+.input-radiobutton-with-label {
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+
+  .input-radiobutton-label {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    margin-block: 8px;
+    padding-inline: 8px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,166 @@
+<template>
+  <fieldset class="multiple-radiobuttons-fieldset" :class="[{ error: fieldHasError }]">
+    <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
+    <template v-if="hasDescription">
+      <slot name="description"></slot>
+    </template>
+    <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
+      <template v-for="item in fieldData.data" :key="item.id">
+        <InputRadiobuttonWithLabel
+          :id="item.value"
+          :name="item.name"
+          :required
+          :label="item.label"
+          :fieldHasError
+          v-model="modelValue"
+          :true-value="item.value"
+          :size
+          :checkboxAppearance
+          :checkboxStyle
+          :theme
+        />
+      </template>
+    </div>
+    <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
+
+import type { C12nMultipleCheckboxes, IFormFieldC12, IFormData } from '@/types/types.forms';
+
+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,
+  },
+  legend: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  multipleOptions: {
+    type: Boolean,
+    default: false,
+  },
+  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,
+  },
+  checkboxAppearance: {
+    type: String as PropType<string>,
+    default: null,
+    validator(value: string) {
+      return propValidators.checkboxAppearance.includes(value);
+    },
+  },
+  checkboxStyle: {
+    type: String as PropType<string>,
+    default: 'check',
+    validator(value: string) {
+      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();
+const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+</script>
+
+<style lang="css">
+.multiple-radiobuttons-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  legend {
+    font-family: var(--font-family);
+    font-size: 16px;
+    font-weight: 500;
+
+    &.has-description {
+      margin-bottom: 0;
+    }
+  }
+
+  .label-description {
+    font-family: var(--font-family);
+    font-size: 16px;
+    margin-top: 12px;
+  }
+}
+
+.multiple-radiobuttons-items {
+  display: flex;
+  gap: 12px;
+  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-range/InputRangeCore.vue

@@ -1,21 +1,28 @@
 <template>
-  <div class="input-range-wrapper">
+  <div class="input-range-wrapper" :data-form-theme="formTheme">
     <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 class="input-range-container">
+      <input
+        type="range"
+        :id
+        :name
+        :required
+        :min
+        :max
+        :step
+        :list="hasDataList ? name + '-datalist' : ''"
+        :class="['input-range-core', `input-range--${size}`, `input-range--${weight}`, styleClassPassthrough]"
+        v-model="modelValue"
+        ref="inputField"
+      />
+
+      <template v-if="hasDataList">
+        <slot name="datalist"></slot>
+      </template>
+    </div>
     <div v-if="hasRightContent" class="slot right">
       <slot name="right"></slot>
     </div>
@@ -25,10 +32,8 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
-const props = defineProps({
+const { id, name, required, min, max, step, theme, size, weight, styleClassPassthrough, fieldHasError } = defineProps({
   id: {
-    // type: String as PropType<string>,
     type: String,
     required: true,
   },
@@ -36,30 +41,26 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  required: {
-    type: Boolean,
-    value: false,
-  },
   min: {
     type: Number,
-    default: 0,
+    required: true,
   },
   max: {
     type: Number,
-    default: 100,
+    required: true,
   },
   step: {
     type: Number,
     default: 1,
   },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  styleClassPassthrough: {
+  placeholder: {
     type: String,
     default: '',
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
   theme: {
     type: String as PropType<string>,
     default: 'primary',
@@ -81,90 +82,71 @@ const props = defineProps({
       return propValidators.weight.includes(value);
     },
   },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
 });
 
 const slots = useSlots();
+const hasDataList = computed(() => slots.datalist !== 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 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 formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
 });
 
-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();
-});
+const modelValue = defineModel<number | readonly number[]>();
 </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);
 
+  --_input-range-height: 24px;
+  --_slot-translate-y: calc(var(--_input-range-height) / 4);
+
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
 
-  .input-range-core {
+  .slot {
+    align-self: flex-start;
+    transform: translateY(-4px);
+  }
+
+  .input-range-container {
     flex-grow: 1;
-    height: 24px;
+    .input-range-core {
+      height: var(--_input-range-height);
+      margin: 0;
+      width: 100%;
+
+      &:focus-visible {
+        box-shadow: var(--theme-form-focus-box-shadow);
+      }
+    }
 
-    &:focus-visible {
-      outline: var(--focus-visible-outline);
-      box-shadow: var(--focus-visible-box-shadow);
+    .input-range-datalist {
+      display: flex;
+      flex-direction: column;
+      font-family: var(--font-family);
+      font-size: 14px;
+      font-weight: 500;
+      justify-content: space-between;
+      writing-mode: vertical-lr;
+      width: 100%;
+      option {
+        padding: 0;
+      }
     }
   }
 }