srcdev-nuxt-forms 0.2.0 → 1.0.0

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

@@ -1,135 +1,142 @@
 <template>
-  <fieldset class="single-checkbox-fieldset" :class="[styleClassPassthrough, `theme-${theme}`, { error: fieldHasError }]">
+  <fieldset class="single-checkbox-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" />
-    <InputCheckboxWithLabel :id :name :required :c12 v-model="modelValue" :theme :size :checkboxAppearance :checkboxStyle />
+    <div class="single-checkbox-items" :class="[optionsLayout]">
+      <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :checkboxAppearance :checkboxStyle :theme>
+        <template v-if="hasLabelContent" #labelContent>
+          <slot name="labelContent"></slot>
+        </template>
+      </InputCheckboxWithLabel>
+    </div>
+    <InputError :errorMessage :fieldHasError :id="name" :isDetached="true" :styleClassPassthrough="inputErrorStyles" />
   </fieldset>
 </template>
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
+import type { IFormMultipleOptions } from '@/types/types.forms';
 
-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);
-    },
-  },
-  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);
-    },
-  },
-});
+const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } =
+  defineProps({
+    id: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    legend: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: false,
+      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);
+      },
+    },
+    trueValue: {
+      type: [String, Number, Boolean],
+      default: true,
+    },
+    falseValue: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    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 hasLabelContent = computed(() => slots.labelContent !== 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;
-});
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const modelValue = defineModel();
+const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+
+const inputErrorStyles = ref<string[]>(styleClassPassthrough);
 
-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 || [];
+watchEffect(() => {
+  if (!hasDescription.value && fieldHasError) {
+    inputErrorStyles.value.push('mbs-12');
   } else {
-    return props.c12.errorMessage;
+    inputErrorStyles.value = inputErrorStyles.value.filter((style) => style !== 'mbs-12');
   }
 });
 </script>
 
 <style lang="css">
 .single-checkbox-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;
-    margin-bottom: 12px;
-    transition: color 0.2s;
 
     &.has-description {
       margin-bottom: 0;
@@ -140,18 +147,26 @@ const errorMessaging = computed(() => {
     font-family: var(--font-family);
     font-size: 16px;
     margin-top: 12px;
-    color: var(--theme-form-secondary);
+  }
+}
+
+.single-checkbox-items {
+  display: flex;
+  gap: 12px;
+  margin-top: 12px;
+
+  &.inline {
+    flex-direction: row;
+    flex-wrap: wrap;
   }
 
-  .input-checkbox-with-label {
-    margin-block-start: 12px;
+  &.block {
+    flex-direction: column;
   }
 
-  /* &:has(.input-error-message.show) {
-    .input-checkbox-with-label {
-      margin-block-start: 12px;
-      transition: margin 500ms linear;
-    }
-  } */
+  &.equal-widths {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
 }
 </style>

package/components/forms/input-number/InputNumberCore.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="input-number-wrapper" :data-form-theme="formTheme" :class="elementClasses">
+    <div v-if="hasLeftContent" class="slot left">
+      <slot name="left"></slot>
+    </div>
+
+    <div class="input-number-container">
+      <input
+        type="number"
+        :id
+        :name
+        :required
+        :min
+        :max
+        :step
+        :class="['input-number-core', `input-number--${theme}`, `input-number--${size}`, `input-number--${weight}`, styleClassPassthrough]"
+        v-model="modelValue"
+        ref="inputField"
+        inputmode="numeric"
+        pattern="[0-9]+"
+      />
+    </div>
+    <div v-if="hasRightContent" class="slot right">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const { id, name, required, min, max, step, theme, size, weight, fieldHasError, styleClassPassthrough } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  min: {
+    type: Number,
+    required: true,
+  },
+  max: {
+    type: Number,
+    required: true,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  required: {
+    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);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.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 formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel<number | readonly number[]>();
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const minLength = computed(() => `${max.toString().length + 3}ch`);
+
+onMounted(() => {
+  updateElementClasses(['number-1']);
+});
+</script>
+
+<style lang="css">
+.input-number-wrapper {
+  --_gutter: 12px;
+  --_border-width: var(--input-border-width-thin);
+  --_min-width: v-bind(minLength);
+
+  display: flex;
+  align-items: center;
+
+  width: fit-content;
+
+  .slot {
+    display: inline-block;
+    padding-inline: 8px;
+
+    .icon {
+      font-weight: 900;
+    }
+  }
+
+  &.has-left-slot {
+    .left-slot {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &.has-right-slot {
+    .right-slot {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .input-number-core {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    box-shadow: none;
+
+    background-color: var(--theme-form-input-bg);
+    border-radius: var(--input-border-width-default);
+    border: var(--_border-width) solid var(--theme-form-input-border);
+    outline: var(--_outline-width) solid var(--theme-form-input-outline);
+
+    /* color: var(--theme-form-input-text); */
+    font-family: var(--font-family);
+    font-size: var(--theme-form-button-font-size-normal);
+    line-height: var(--line-height);
+    padding: 4px 16px;
+    text-align: center;
+    min-width: var(--_min-width);
+
+    &:focus-visible {
+      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);
+    }
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      font-style: italic;
+      font-weight: 400;
+    }
+  }
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>

package/components/forms/input-number/variants/InputNumberDefault.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="input-number-with-label" :data-form-theme="formTheme" :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]">
+    <label class="input-number-label body-normal-bold" :for="id">{{ label }}</label>
+    <template v-if="hasDescription">
+      <slot name="description"></slot>
+    </template>
+
+    <InputNumberCore v-model="modelValue" :id :name :min :max :step :theme :required :size :weight :fieldHasError>
+      <template v-if="hasLeftContent" #left>
+        <InputButtonCore
+          type="button"
+          @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
+          :readonly="Number(modelValue) === min"
+          :is-pending="false"
+          buttonText="Step down"
+          theme="primary"
+          size="x-small"
+        >
+          <template #iconOnly>
+            <slot name="left"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+      <template v-if="hasRightContent" #right>
+        <InputButtonCore
+          type="button"
+          @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
+          :readonly="Number(modelValue) === max"
+          :is-pending="false"
+          buttonText="Step up"
+          theme="primary"
+          size="x-small"
+        >
+          <template #iconOnly>
+            <slot name="right"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+    </InputNumberCore>
+    <InputError :errorMessage :fieldHasError :id :isDetached="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+
+const { id, name, label, required, min, max, step, theme, size, weight, styleClassPassthrough, errorMessage, fieldHasError } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  min: {
+    type: Number,
+    required: true,
+  },
+  max: {
+    type: Number,
+    required: true,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    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);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const slots = useSlots();
+const hasDescription = computed(() => slots.description !== undefined);
+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<number | readonly number[]>();
+
+const updateValue = (step: number, withinRangeLimit: boolean) => {
+  if (withinRangeLimit) {
+    modelValue.value = (Number(modelValue.value) + step) as number;
+  }
+};
+</script>
+
+<style lang="css">
+.input-number-with-label {
+  --_border-width: var(--input-border-width-default);
+  --_outline-width: var(--input-outline-width-thin);
+  --_label-padding-inline: 10px;
+
+  .input-number-label {
+    display: block;
+    margin-block: 8px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .label-description {
+    font-family: var(--font-family);
+    font-size: 16px;
+    margin-top: 12px;
+  }
+}
+</style>