srcdev-nuxt-forms 0.1.0 → 1.0.0

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

@@ -0,0 +1,167 @@
+<template>
+  <fieldset class="multiple-checkboxes-fieldset" :class="[{ error: fieldHasError }]">
+    <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
+    <template v-if="hasDescription">
+      <slot name="description"></slot>
+    </template>
+    <div class="multiple-checkboxes-items" :class="[optionsLayout]">
+      <template v-for="item in fieldData.data" :key="item.id">
+        <InputCheckboxWithLabel
+          :id="item.value"
+          :name
+          :required
+          :label="item.label"
+          :fieldHasError
+          v-model="modelValue"
+          :true-value="item.value"
+          :size
+          :checkboxAppearance
+          :optionsLayout
+          :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-checkboxes-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-checkboxes-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-checkbox/variants/SingleCheckbox.vue

@@ -0,0 +1,172 @@
+<template>
+  <fieldset class="single-checkbox-fieldset" :class="[{ error: fieldHasError }]">
+    <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
+    <template v-if="hasDescription">
+      <slot name="description"></slot>
+    </template>
+    <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';
+
+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 { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const modelValue = defineModel();
+const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+
+const inputErrorStyles = ref<string[]>(styleClassPassthrough);
+
+watchEffect(() => {
+  if (!hasDescription.value && fieldHasError) {
+    inputErrorStyles.value.push('mbs-12');
+  } else {
+    inputErrorStyles.value = inputErrorStyles.value.filter((style) => style !== 'mbs-12');
+  }
+});
+</script>
+
+<style lang="css">
+.single-checkbox-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;
+  }
+}
+
+.single-checkbox-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-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>