srcdev-nuxt-forms 3.0.0 → 4.1.0

package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="input-checkbox-radio-button-button" :data-form-theme="formTheme" :data-size="size" :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]">
+    <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby>
+      <template #checkedIcon>
+        <slot name="checkedIcon"></slot>
+      </template>
+    </InputCheckboxRadioCore>
+    <label v-if="hasLabelContent" class="input-checkbox-radio-button-label" :for="id">
+      <slot name="labelContent"></slot>
+    </label>
+    <label v-else class="input-checkbox-radio-button-label" :for="id">{{ label }}</label>
+    <div class="item-icon">
+      <slot name="itemIcon">
+        <Icon name="material-symbols:add-2" class="icon" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  type: {
+    type: String as PropType<'checkbox' | 'radio'>,
+    required: true,
+  },
+  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);
+    },
+  },
+  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);
+    },
+  },
+  direction: {
+    type: String as PropType<'row' | 'row-reverse'>,
+    default: 'row',
+    validator(value: string) {
+      return ['row', 'row-reverse'].includes(value);
+    },
+  },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
+});
+
+const slots = useSlots();
+const hasLabelContent = computed(() => slots.labelContent !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const modelValue = defineModel();
+
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+const flexDirection = ref(props.direction);
+</script>
+
+<style lang="css">
+.input-checkbox-radio-button-button {
+  /* --_checkbox-size: initial; */
+  --_background-color: var(--theme-checkbox-radio-button-bg-default);
+  --_outline-width: var(--form-element-outline-width);
+  --_border-color: var(--theme-checkbox-radio-button-border-default);
+  --_outline-color: var(--theme-checkbox-radio-button-outline-default);
+  --_label-color: var(--theme-checkbox-radio-button-label-default);
+  --_box-shadow: var(--theme-checkbox-radio-button-shadow);
+  --_white-space: wrap;
+  --_gap: 0.4rem;
+  /* --_border-radius: 2.2rem; */
+  --_padding-block: 0.4rem;
+  --_padding-inline: 1.2rem;
+
+  display: flex;
+  flex-direction: v-bind(flexDirection);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--_gap);
+
+  background-color: var(--_background-color);
+  border-radius: calc(var(--form-element-line-height) / 1);
+  border: var(--theme-checkbox-radio-button-border-width) solid var(--_border-color);
+  outline: var(--theme-checkbox-radio-button-outline-width) solid var(--_outline-color);
+  box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem var(--_box-shadow);
+  padding-block: var(--_padding-block);
+  padding-inline: var(--_padding-inline);
+
+  &.inline {
+    --_white-space: nowrap;
+  }
+
+  /* &:focus-within {
+    --_box-shadow: var(--theme-checkbox-radio-button-shadow-focus);
+    --_outline-color: var(--theme-checkbox-radio-button-outline-focus);
+  } */
+
+  &:has(.input-checkbox-radio-core:focus-visible) {
+    --_box-shadow: var(--theme-checkbox-radio-button-shadow-focus);
+    --_outline-color: var(--theme-checkbox-radio-button-outline-focus);
+  }
+
+  /* Sizes */
+  &.x-small {
+    /* --_checkbox-size: 2rem; */
+    --_gap: 1rem;
+    /* --_border-radius: 2rem; */
+    --_padding-block: 0.2rem;
+    --_padding-inline: 1.6rem;
+  }
+  &.small {
+    /* --_checkbox-size: 2.2rem; */
+    --_gap: 1.2rem;
+    /* --_border-radius: 1.8rem; */
+    --_padding-block: 0rem;
+    --_padding-inline: 1.2rem;
+  }
+  &.normal {
+    /* --_checkbox-size: 3.4rem; */
+    --_gap: 1rem;
+    /* --_border-radius: 2rem; */
+    --_padding-block: 0.4rem;
+    --_padding-inline: 1.2rem;
+  }
+  &.medium {
+    /* --_checkbox-size: 3.4rem; */
+    --_gap: 1rem;
+    /* --_border-radius: 2rem; */
+    --_padding-block: 0.4rem;
+    --_padding-inline: 1.2rem;
+  }
+  &.large {
+    /* --_checkbox-size: 3.4rem; */
+    --_gap: 1rem;
+    /* --_border-radius: 2rem; */
+    --_padding-block: 0.4rem;
+    --_padding-inline: 1.2rem;
+  }
+}
+
+.input-checkbox-radio-button-label {
+  display: flex;
+  flex-grow: 1;
+  color: var(--_label-color);
+  font-size: var(--form-element-font-size);
+  width: 100%;
+  height: var(--form-element-line-height);
+  align-items: center;
+  justify-content: center;
+  margin-block: 0.8rem;
+  padding-inline: 0.8rem;
+  white-space: var(--_white-space);
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--_border-color);
+  height: var(--form-input-checkbox-radio-button-size);
+  width: var(--form-input-checkbox-radio-button-size);
+}
+</style>

package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="input-checkbox-radio-wrapper" :data-form-theme="formTheme" :data-theme="size" :class="[type, size, elementClasses, { error: fieldHasError }, { button: isButton }]">
+    <slot name="checkedIcon" v-if="isChecked">
+      <Icon :name="defaultIcon" class="input-checked-icon" />
+    </slot>
+
+    <input
+      :type
+      :true-value
+      :false-value
+      :id
+      :name
+      :required="required && !multipleOptions"
+      :value="trueValue"
+      class="input-checkbox-radio-core"
+      :class="[size, { error: fieldHasError }, { 'is-button': isButton }]"
+      v-model="modelValue"
+      ref="inputField"
+      :aria-checked="isChecked"
+      :aria-describedby
+      :aria-invalid="fieldHasError"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+const props = defineProps({
+  isButton: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String as PropType<'checkbox' | 'radio'>,
+    required: true,
+  },
+  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);
+    },
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+const modelValue = defineModel<any>();
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+const defaultIcon = computed(() => {
+  return props.type === 'checkbox' ? 'material-symbols:check-small' : 'material-symbols:circle';
+});
+
+const isArray = Array.isArray(modelValue.value);
+
+const isChecked = computed(() => {
+  if (isArray) {
+    return modelValue.value.includes(props.trueValue);
+  } else {
+    return modelValue.value === props.trueValue;
+  }
+});
+</script>
+
+<style lang="css">
+.input-checkbox-radio-wrapper {
+  --_outline-width: 0.1rem;
+  --_border-width: 0.1rem;
+  --_border-radius: 50%;
+  --_background-color: var(--theme-form-checkbox-bg);
+  --_box-shadow: none;
+
+  --_icon-size: var(--form-input-checkbox-radio-button-size);
+
+  &:not(.button) {
+    --_icon-size: var(--form-toggle-symbol-size);
+    --_outline-width: var(--form-element-outline-width);
+    --_border-width: var(--form-element-border-width);
+    &.checkbox {
+      --_background-color: var(--theme-form-checkbox-bg);
+      --_border-color: var(--theme-form-checkbox-border);
+      --_border-radius: 0.4rem;
+      --_outline-color: var(--theme-form-checkbox-outline);
+    }
+
+    &.radio {
+      --_background-color: var(--theme-form-radio-bg);
+      --_border-color: var(--theme-form-radio-border);
+      --_border-radius: 50%;
+      --_outline-color: var(--theme-form-radio-outline);
+    }
+  }
+
+  display: grid;
+  grid-template-areas: 'element-stack';
+  place-content: center;
+
+  background-color: var(--_background-color);
+  border: var(--_border-width) solid var(--_border-color);
+  border-radius: var(--_border-radius);
+  outline: 0.1rem solid var(--_outline-color);
+  box-shadow: var(--_box-shadow);
+
+  height: var(--_icon-size);
+  width: var(--_icon-size);
+
+  transition: all 0.2s ease-in-out;
+
+  &:not(.button):has(.input-checkbox-radio-core:focus-visible) {
+    --_box-shadow: var(--form-focus-box-shadow);
+  }
+
+  .input-checked-icon {
+    grid-area: element-stack;
+    color: var(--theme-form-checkbox-symbol);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
+    box-shadow: var(--_box-shadow);
+  }
+
+  .input-checkbox-radio-core {
+    grid-area: element-stack;
+    appearance: none;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+
+    height: var(--_icon-size);
+    width: var(--_icon-size);
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:not(.is-button) {
+      &:focus-visible {
+        --_box-shadow: var(--form-focus-box-shadow);
+      }
+    }
+  }
+}
+</style>

package/components/forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="input-checkbox-radio-with-label" :data-size="size" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
+    <InputCheckboxRadioCore :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby>
+      <template #checkedIcon>
+        <slot name="checkedIcon"></slot>
+      </template>
+    </InputCheckboxRadioCore>
+    <label v-if="hasLabelContent" class="input-checkbox-radio-label body-normal" :for="id">
+      <slot name="labelContent"></slot>
+    </label>
+    <label v-else class="input-checkbox-radio-label body-normal-semibold" :for="id">{{ label }}</label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  type: {
+    type: String as PropType<'checkbox' | 'radio'>,
+    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);
+    },
+  },
+  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);
+    },
+  },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
+});
+
+const slots = useSlots();
+const hasLabelContent = computed(() => slots.labelContent !== undefined);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const modelValue = defineModel();
+const id = useId();
+</script>
+
+<style lang="css">
+.input-checkbox-radio-with-label {
+  --_white-space: wrap;
+
+  display: flex;
+  align-items: center;
+
+  &.inline {
+    --_white-space: nowrap;
+  }
+
+  .input-checkbox-radio-label {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    margin-block: 0.8rem;
+    padding-inline: 0.8rem;
+    white-space: var(--_white-space);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,203 @@
+<template>
+  <div class="input-number-wrapper" :data-form-theme="formTheme" :data-size="size">
+    <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="[elementClasses, 'input-number-core', `input-number--${theme}`, `input-number--${size}`, `input-number--${weight}`]"
+        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 props = 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 props.fieldHasError ? 'error' : props.theme;
+});
+
+const modelValue = defineModel<number | readonly number[]>();
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const minLength = computed(() => `${props.max.toString().length + 1}em`);
+</script>
+
+<style lang="css">
+.input-number-wrapper {
+  --_focus-box-shadow: var(--box-shadow-off);
+  --_min-width: v-bind(minLength);
+
+  display: flex;
+  align-items: center;
+
+  width: fit-content;
+
+  background-color: var(--theme-form-input-bg-normal);
+  border-radius: var(--form-element-border-width);
+  border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  box-shadow: var(--_focus-box-shadow);
+
+  .slot {
+    display: inline-block;
+
+    .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-normal);
+    color: var(--theme-form-input-text-color-normal);
+    font-family: var(--font-family);
+    font-size: var(--form-element-font-size);
+    line-height: var(--form-element-line-height);
+
+    padding-inline: var(--form-text-padding-inline);
+    padding-block-start: var(--form-element-padding-block-start);
+    padding-block-end: var(--form-element-padding-block-end);
+    text-align: center;
+    min-width: var(--_min-width);
+
+    &:focus-visible {
+      --_focus-box-shadow: var(--box-shadow-on);
+    }
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      font-style: italic;
+      font-weight: 400;
+    }
+  }
+
+  &:has(.has-left-button),
+  &:has(.has-right-button) {
+    .slot {
+      .input-button-core {
+        border: initial;
+        border-radius: 0;
+        outline: initial;
+        box-shadow: unset;
+      }
+    }
+
+    .left-slot {
+      margin-inline-end: 0;
+      border-right: 2px solid var(--theme-btn-bg-hover);
+    }
+
+    .right-slot {
+      margin-inline-end: 0;
+      border-left: 2px solid var(--theme-btn-bg-hover);
+    }
+  }
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>