srcdev-nuxt-forms 5.1.0 → 6.0.0

package/assets/styles/setup/utility-classes/_padding-helpers.css

@@ -1,308 +0,0 @@
-/* Padding */
-.p-0 {
-  padding: 0;
-}
-.pbs-0 {
-  padding-block-start: 0;
-}
-.pbe-0 {
-  padding-block-end: 0;
-}
-.pis-0 {
-  padding-inline-start: 0;
-}
-.pie-0 {
-  padding-inline-end: 0;
-}
-.pi-0 {
-  padding-inline: 0;
-}
-.pb-0 {
-  padding-block: 0;
-}
-
-.p-1 {
-  padding: 0.1rem;
-}
-.pbs-1 {
-  padding-block-start: 0.1rem;
-}
-.pbe-1 {
-  padding-block-end: 0.1rem;
-}
-.pis-1 {
-  padding-inline-start: 0.1rem;
-}
-.pie-1 {
-  padding-inline-end: 0.1rem;
-}
-.pi-1 {
-  padding-inline: 0.1rem;
-}
-.pb-1 {
-  padding-block: 0.1rem;
-}
-
-.p-2 {
-  padding: 0.2rem;
-}
-.pbs-2 {
-  padding-block-start: 0.2rem;
-}
-.pbe-2 {
-  padding-block-end: 0.2rem;
-}
-.pis-2 {
-  padding-inline-start: 0.2rem;
-}
-.pie-2 {
-  padding-inline-end: 0.2rem;
-}
-.pi-2 {
-  padding-inline: 0.2rem;
-}
-.pb-2 {
-  padding-block: 0.2rem;
-}
-
-.p-4 {
-  padding: 0.4rem;
-}
-.pbs-4 {
-  padding-block-start: 0.4rem;
-}
-.pbe-4 {
-  padding-block-end: 0.4rem;
-}
-.pis-4 {
-  padding-inline-start: 0.4rem;
-}
-.pie-4 {
-  padding-inline-end: 0.4rem;
-}
-.pi-4 {
-  padding-inline: 0.4rem;
-}
-.pb-4 {
-  padding-block: 0.4rem;
-}
-
-.p-6 {
-  padding: 0.6rem;
-}
-.pbs-6 {
-  padding-block-start: 0.6rem;
-}
-.pbe-6 {
-  padding-block-end: 0.6rem;
-}
-.pis-6 {
-  padding-inline-start: 0.6rem;
-}
-.pie-6 {
-  padding-inline-end: 0.6rem;
-}
-.pi-6 {
-  padding-inline: 0.6rem;
-}
-.pb-6 {
-  padding-block: 0.6rem;
-}
-
-.p-8 {
-  padding: 0.8rem;
-}
-.pbs-8 {
-  padding-block-start: 0.8rem;
-}
-.pbe-8 {
-  padding-block-end: 0.8rem;
-}
-.pis-8 {
-  padding-inline-start: 0.8rem;
-}
-.pie-8 {
-  padding-inline-end: 0.8rem;
-}
-.pi-8 {
-  padding-inline: 0.8rem;
-}
-.pb-8 {
-  padding-block: 0.8rem;
-}
-
-.p-10 {
-  padding: 1rem;
-}
-.pbs-10 {
-  padding-block-start: 1rem;
-}
-.pbe-10 {
-  padding-block-end: 1rem;
-}
-.pis-10 {
-  padding-inline-start: 1rem;
-}
-.pie-10 {
-  padding-inline-end: 1rem;
-}
-.pi-10 {
-  padding-inline: 1rem;
-}
-.pb-10 {
-  padding-block: 1rem;
-}
-
-.p-12 {
-  padding: 1.2rem;
-}
-.pbs-12 {
-  padding-block-start: 1.2rem;
-}
-.pbe-12 {
-  padding-block-end: 1.2rem;
-}
-.pis-12 {
-  padding-inline-start: 1.2rem;
-}
-.pie-12 {
-  padding-inline-end: 1.2rem;
-}
-.pi-12 {
-  padding-inline: 1.2rem;
-}
-.pb-12 {
-  padding-block: 1.2rem;
-}
-
-.p-18 {
-  padding: 1.8rem;
-}
-.pbs-18 {
-  padding-block-start: 1.8rem;
-}
-.pbe-18 {
-  padding-block-end: 1.8rem;
-}
-.pis-18 {
-  padding-inline-start: 1.8rem;
-}
-.pie-18 {
-  padding-inline-end: 1.8rem;
-}
-.pi-18 {
-  padding-inline: 1.8rem;
-}
-.pb-18 {
-  padding-block: 1.8rem;
-}
-
-.p-20 {
-  padding: 2rem;
-}
-.pbs-20 {
-  padding-block-start: 2rem;
-}
-.pbe-20 {
-  padding-block-end: 2rem;
-}
-.pis-20 {
-  padding-inline-start: 2rem;
-}
-.pie-20 {
-  padding-inline-end: 2rem;
-}
-.pi-20 {
-  padding-inline: 2rem;
-}
-.pb-20 {
-  padding-block: 2rem;
-}
-
-.p-24 {
-  padding: 2.4rem;
-}
-.pbs-24 {
-  padding-block-start: 2.4rem;
-}
-.pbe-24 {
-  padding-block-end: 2.4rem;
-}
-.pis-24 {
-  padding-inline-start: 2.4rem;
-}
-.pie-24 {
-  padding-inline-end: 2.4rem;
-}
-.pi-24 {
-  padding-inline: 2.4rem;
-}
-.pb-24 {
-  padding-block: 2.4rem;
-}
-
-.p-32 {
-  padding: 3.2rem;
-}
-.pbs-32 {
-  padding-block-start: 3.2rem;
-}
-.pbe-32 {
-  padding-block-end: 3.2rem;
-}
-.pis-32 {
-  padding-inline-start: 3.2rem;
-}
-.pie-32 {
-  padding-inline-end: 3.2rem;
-}
-.pi-32 {
-  padding-inline: 3.2rem;
-}
-.pb-32 {
-  padding-block: 3.2rem;
-}
-
-.p-40 {
-  padding: 4rem;
-}
-.pbs-40 {
-  padding-block-start: 4rem;
-}
-.pbe-40 {
-  padding-block-end: 4rem;
-}
-.pis-40 {
-  padding-inline-start: 4rem;
-}
-.pie-40 {
-  padding-inline-end: 4rem;
-}
-.pi-40 {
-  padding-inline: 4rem;
-}
-.pb-40 {
-  padding-block: 4rem;
-}
-
-.p-60 {
-  padding: 6rem;
-}
-.pbs-60 {
-  padding-block-start: 6rem;
-}
-.pbe-60 {
-  padding-block-end: 6rem;
-}
-.pis-60 {
-  padding-inline-start: 6rem;
-}
-.pie-60 {
-  padding-inline-end: 6rem;
-}
-.pi-60 {
-  padding-inline: 6rem;
-}
-.pb-60 {
-  padding-block: 6rem;
-}

package/assets/styles/setup/utility-classes/_page.css

@@ -1,49 +0,0 @@
-html {
-  color-scheme: light dark;
-
-  &[data-color-scheme='light'] {
-    color-scheme: light;
-  }
-
-  &[data-color-scheme='dark'] {
-    color-scheme: dark;
-  }
-
-  background-color: var(--page-bg);
-
-  font-size: 62.5%;
-
-  transition: background-color 0.4s ease, color 0.4s ease;
-  scrollbar-gutter: stable;
-}
-body,
-p,
-pre,
-code,
-div,
-fieldset,
-legend,
-li,
-a {
-  color: light-dark(var(--gray-12), var(--gray-3));
-  font-family: var(--font-family);
-  font-size: var(--step-1);
-}
-
-body {
-  &.page-theme-grey {
-    background-color: lightseagreen;
-  }
-}
-
-form {
-  input {
-    font: inherit;
-    /* accent-color: var(--accent-color, red); */
-  }
-
-  label {
-    text-box-trim: both;
-    text-box-edge: cap alphabetic;
-  }
-}

package/assets/styles/setup/utility-classes/index.css

@@ -1,3 +0,0 @@
-@import './_page.css';
-@import './_margin-helpers.css';
-@import './_padding-helpers.css';

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

@@ -1,218 +0,0 @@
-<template>
-  <div class="input-checkbox-radio-options-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 :displayAsDisc>
-      <template #checkedIcon>
-        <slot name="checkedIcon"></slot>
-      </template>
-    </InputCheckboxRadioCore>
-    <label v-if="hasLabelContent" class="input-checkbox-radio-options-button-label" :for="id">
-      <slot name="labelContent"></slot>
-    </label>
-    <label v-else class="input-checkbox-radio-options-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,
-  },
-  displayAsDisc: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-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-options-button {
-  /* --_checkbox-size: initial; */
-
-  --_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;
-  /* --_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(--input-checkbox-radio-options-button-gap);
-
-  background-color: var(--input-checkbox-radio-options-button-background-color);
-  border-radius: var(--input-checkbox-radio-options-button-border-radius);
-  border: var(--input-checkbox-radio-options-button-border);
-  outline: var(--input-checkbox-radio-options-button-outline);
-
-  box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem var(--_box-shadow);
-  padding-block: var(--input-checkbox-radio-options-padding-block);
-  padding-inline: var(--input-checkbox-radio-options-padding-inline);
-
-  &:hover {
-    /* background-color: var(--input-checkbox-radio-options-button-background-color-active); */
-    background-color: var(--form-core-background-color-hover);
-    border: var(--input-checkbox-radio-options-button-border-active);
-    outline: var(--input-checkbox-radio-options-button-outline-active);
-  }
-
-  &.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; */
-    /* --_border-radius: 2rem; */
-    /* --_padding-block: 0.2rem; */
-    /* --_padding-inline: 1.6rem; */
-  }
-  &.small {
-    /* --_checkbox-size: 2.2rem; */
-    /* --_border-radius: 1.8rem; */
-    /* --_padding-block: 0rem; */
-    /* --_padding-inline: 1.2rem; */
-  }
-  &.normal {
-    /* --_checkbox-size: 3.4rem; */
-    /* --_border-radius: 2rem; */
-    /* --_padding-block: 0.4rem; */
-    /* --_padding-inline: 1.2rem; */
-  }
-  &.medium {
-    /* --_checkbox-size: 3.4rem; */
-    /* --_border-radius: 2rem; */
-    /* --_padding-block: 0.4rem; */
-    /* --_padding-inline: 1.2rem; */
-  }
-  &.large {
-    /* --_checkbox-size: 3.4rem; */
-    /* --_border-radius: 2rem; */
-    /* --_padding-block: 0.4rem; */
-    /* --_padding-inline: 1.2rem; */
-  }
-}
-
-.input-checkbox-radio-options-button-label {
-  display: flex;
-  flex-grow: 1;
-  color: var(--input-checkbox-radio-options-button-label-text-color);
-  font-size: var(--input-checkbox-radio-options-button-label-font-size);
-  width: 100%;
-  min-height: var(--input-checkbox-radio-options-button-label-min-height);
-  align-items: center;
-  justify-content: center;
-  margin-block: var(--input-checkbox-radio-options-button-label-margin-block);
-  padding-inline: var(--input-checkbox-radio-options-button-label-padding-inline);
-  white-space: var(--_white-space);
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--input-checkbox-radio-options-button-label-icon-color);
-  height: var(--form-input-checkbox-radio-button-size);
-  width: var(--form-input-checkbox-radio-button-size);
-}
-</style>