srcdev-nuxt-forms 2.4.23 → 3.0.0

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

@@ -1,214 +0,0 @@
-<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

@@ -1,191 +0,0 @@
-<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

@@ -1,111 +0,0 @@
-<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

@@ -1,203 +0,0 @@
-<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>