srcdev-nuxt-forms 2.4.24 → 3.0.0

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-form-theme="formTheme">
-    <label class="toggle-switch-label input-text-label body-normal-bold" :for="`toggle-sitch-${id}`">{{ label }}</label>
-    <div v-if="hasDescriptionSlot" :id="`${id}-description`">
-      <slot name="description"></slot>
-    </div>
-    <ToggleSwitchCore v-model="modelValue" :id :name :required :field-has-error :true-value :false-value :theme :round :size :ariaDescribedby>
-      <template v-if="hasIconOnSlot" #iconOn>
-        <slot name="iconOn"></slot>
-      </template>
-
-      <template v-if="hasIconOffSlot" #iconOff>
-        <slot name="iconOff"></slot>
-      </template>
-    </ToggleSwitchCore>
-    <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  errorMessage: {
-    type: [Object, String],
-    default: '',
-    required: false,
-  },
-  fieldHasError: {
-    type: Boolean,
-    default: false,
-  },
-  trueValue: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-  falseValue: {
-    type: [String, Number, Boolean],
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  round: {
-    type: Boolean,
-    default: true,
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'normal',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
-const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
-
-const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
-
-const id = useId();
-const errorId = `${id}-error-message`;
-const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
-  return props.fieldHasError ? errorId : ariaDescribedbyId;
-});
-
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-.toggle-switch-with-label {
-  --_transition-duration: 0.4s;
-
-  .toggle-switch-label {
-    display: block;
-  }
-}
-</style>

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabelInline.vue

@@ -1,102 +0,0 @@
-<template>
-  <div class="toggle-switch-with-label-inline" :class="[elementClasses]" :data-form-theme="theme">
-    <label class="toggle-switch-label input-text-label" :class="labelWeightClass" :for="`toggle-sitch-${id}`">{{ label }}</label>
-    <ToggleSwitchCore v-model="modelValue" :id :name :true-value :false-value :theme :round :size>
-      <template v-if="hasIconOnSlot" #iconOn>
-        <slot name="iconOn"></slot>
-      </template>
-
-      <template v-if="hasIconOffSlot" #iconOff>
-        <slot name="iconOff"></slot>
-      </template>
-    </ToggleSwitchCore>
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  labelWeight: {
-    type: String as PropType<string>,
-    default: 'semi-bold',
-    validator(value: string) {
-      return propValidators.labelWeight.includes(value);
-    },
-  },
-  trueValue: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-  falseValue: {
-    type: [String, Number, Boolean],
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  round: {
-    type: Boolean,
-    default: true,
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'normal',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
-const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
-
-const id = useId();
-
-const labelWeightClass = computed(() => {
-  switch (props.labelWeight) {
-    case 'bold':
-      return 'body-normal-bold';
-    case 'semi-bold':
-      return 'body-normal-semibold';
-    case 'normal':
-      return 'body-normal';
-    default:
-      return 'body-normal-semibold';
-  }
-});
-
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-.toggle-switch-with-label-inline {
-  --_transition-duration: 0.4s;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  .toggle-switch-label {
-    display: block;
-    white-space: nowrap;
-  }
-}
-</style>

package/components/forms/ui/FormField.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="form-field" :class="[width, styleClassPassthrough, { 'has-gutter': hasGutter }, { error: fieldHasError }]">
-    <div class="form-field-inner">
-      <slot name="default"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  width: {
-    type: String as PropType<string>,
-    default: 'narrow',
-    validator: (val: string) => ['narrow', 'medium', 'wide'].includes(val),
-  },
-  fieldHasError: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  hasGutter: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<style lang="css">
-.form-field {
-  --_gutter-width: 0rem;
-  --_max-width: 400px;
-  --_background-color: transparent;
-  --_border-radius: 0.4rem;
-
-  background-color: var(--_background-color);
-  border-radius: var(--_border-radius);
-  margin-inline: auto;
-  margin-block: 1lh;
-
-  width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
-  outline: 0rem solid var(--gray-5);
-
-  &.error {
-    background-color: var(--theme-error-surface);
-  }
-
-  &:has(.underline) {
-    --_background-color: var(--theme-form-input-bg-underlined);
-  }
-
-  .form-field-inner {
-    background-color: var(--_background-color);
-    border-radius: var(--_border-radius);
-    margin-inline-start: 0rem;
-    padding-inline-start: 0rem;
-    outline: 0 solid var(--gray-5);
-  }
-
-  &.has-gutter {
-    --_gutter-width: 1.6rem;
-  }
-
-  &.narrow {
-    max-width: 400px;
-  }
-
-  &.medium {
-    --_max-width: 800px;
-  }
-
-  &.wide {
-    --_max-width: 1200px;
-  }
-}
-</style>

package/components/forms/ui/FormWrapper.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="form-wrapper" :class="width">
-    <slot name="default"></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  width: {
-    type: String as PropType<string>,
-    default: 'narrow',
-    validator: (val: string) => ['narrow', 'medium', 'wide'].includes(val),
-  },
-});
-</script>
-
-<style lang="css">
-.form-wrapper {
-  outline: 0rem solid var(--gray-12);
-  padding-bottom: 2rem;
-  margin-trim: block;
-
-  &.narrow {
-    max-width: 400px;
-  }
-
-  &.medium {
-    max-width: 800px;
-  }
-
-  &.wide {
-    max-width: 1200px;
-  }
-}
-</style>

package/components/utils/colour-scheme-select/ColourSchemeSelect.vue

@@ -1,270 +0,0 @@
-<template>
-  <div class="colour-scheme-select" :data-size="size" :data-form-theme="theme">
-    <p>Color Scheme select</p>
-
-    <form class="colour-scheme-select-form mbe-20" ref="colourSchemeWrapper">
-      <div class="select-scheme-marker-wrapper">
-        <div class="select-scheme-marker" :class="[{ show: showMarker }]"></div>
-      </div>
-      <div class="select-scheme-group-wrapper">
-        <div class="select-scheme-group">
-          <LazyIcon name="material-symbols:night-sight-auto-sharp" class="scheme-icon" />
-          <input type="radio" id="auto" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="auto" />
-          <label for="auto" class="sr-only">Auto</label>
-        </div>
-        <div class="select-scheme-group">
-          <LazyIcon name="radix-icons:sun" class="scheme-icon" />
-          <input type="radio" id="light" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="light" />
-          <label for="light" class="sr-only">Light</label>
-        </div>
-        <div class="select-scheme-group">
-          <LazyIcon name="radix-icons:moon" class="scheme-icon" />
-          <input type="radio" id="dark" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="dark" />
-          <label for="dark" class="sr-only">Dark</label>
-        </div>
-      </div>
-    </form>
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../../forms/c12/prop-validators';
-
-const props = defineProps({
-  name: {
-    type: String,
-    defaul: 'colour-scheme-select',
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  stepAnimationDuration: {
-    type: Number as PropType<number>,
-    default: 100,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const duration = ref(props.stepAnimationDuration);
-
-const { currentColourScheme } = useColourScheme();
-
-const colourSchemeWrapper = ref<HTMLFormElement | null>(null);
-const colourSchemeGroupElements = ref<HTMLDivElement[]>([]);
-const colourSchemeInputElements = ref<HTMLInputElement[]>([]);
-const showMarker = ref(false);
-
-const findIndexOfInputValueFromCurrentColourScheme = () => {
-  if (currentColourScheme.value === 'auto') return 1;
-  if (currentColourScheme.value === 'light') return 2;
-  if (currentColourScheme.value === 'dark') return 3;
-  return undefined;
-};
-
-const findIndexOfCheckedInput = () => {
-  return colourSchemeInputElements.value.findIndex((input) => input.checked);
-};
-
-const currentActiveIndex = ref(findIndexOfCheckedInput());
-
-const setColourSchemeAttr = async () => {
-  const index = findIndexOfInputValueFromCurrentColourScheme() ?? 0;
-
-  await nextTick();
-  currentActiveIndex.value = findIndexOfCheckedInput();
-
-  const wrapperLeftPosition = colourSchemeWrapper.value?.getBoundingClientRect().left ?? 0;
-  const parentLeftPosition = colourSchemeWrapper.value?.parentElement?.getBoundingClientRect().left ?? 0;
-  const relativeLeftPosition = wrapperLeftPosition - parentLeftPosition;
-
-  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-step-animation-duration', colourSchemeGroupElements.value?.length * duration.value + 'ms');
-
-  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-position', index !== undefined ? index.toString() : '0');
-  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-left-offset', colourSchemeGroupElements.value?.[index - 1]?.offsetLeft - relativeLeftPosition + 'px');
-  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-width', colourSchemeGroupElements.value?.[index - 1]?.getBoundingClientRect().width + 'px');
-};
-
-const handleInputActiveClass = () => {
-  colourSchemeInputElements.value.forEach((element) => {
-    element.classList.remove('active');
-  });
-
-  setTimeout(() => {
-    colourSchemeInputElements.value?.[currentActiveIndex.value].classList.add('active');
-  }, duration.value);
-};
-
-onMounted(() => {
-  colourSchemeGroupElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.select-scheme-group') || []) as HTMLInputElement[];
-  colourSchemeInputElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.scheme-input') || []) as HTMLInputElement[];
-
-  if (colourSchemeWrapper.value !== null) {
-    setColourSchemeAttr();
-    setTimeout(() => {
-      showMarker.value = true;
-      handleInputActiveClass();
-    }, duration.value);
-  }
-});
-
-watch(currentColourScheme, () => {
-  setColourSchemeAttr();
-});
-
-watch(currentActiveIndex, () => {
-  handleInputActiveClass();
-});
-</script>
-
-<style lang="css">
-.colour-scheme-select {
-  --_form-background-color: var(--theme-form-checkbox-bg);
-  --_form-border-width: 0.1rem;
-  --_form-border-colour: var(--theme-form-radio-border);
-  --_form-outline-width: 0.1rem;
-
-  --_form-outline-colour: var(--theme-form-radio-outline);
-
-  --_form-border-radius: calc(
-    (var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) + var(--_form-padding) + var(--_select-scheme-group-padding) + var(--_select-scheme-group-border-width) +
-      var(--_select-scheme-group-outline-width)
-  );
-
-  --_form-items-gap: 1rem;
-  --_form-padding: 0.6rem;
-
-  --_select-scheme-group-background-color: var(--theme-form-checkbox-bg);
-  --_select-scheme-group-padding: 0.5rem;
-  --_select-scheme-group-border-width: 0.2rem;
-  --_select-scheme-group-border-colour: transparent;
-  --_select-scheme-group-outline-width: 0.2rem;
-  --_select-scheme-group-outline-colour: transparent;
-  --_select-scheme-group-width: calc(
-    var(--_scheme-icon-font-size) + (var(--_select-scheme-group-padding) * 2) + (var(--_select-scheme-group-border-width) * 2) + (var(--_select-scheme-group-outline-width) * 2)
-  );
-
-  --_scheme-icon-font-size: 2rem;
-  --_scheme-icon-colour: black;
-
-  .colour-scheme-select-form {
-    display: inline-grid;
-    grid-template-areas: 'select-stack';
-    width: fit-content;
-
-    background-color: var(--_form-background-color);
-    border: var(--_form-border-width) solid var(--_form-border-colour);
-    outline: var(--_form-outline-width) solid var(--_form-outline-colour);
-    border-radius: var(--_form-border-radius);
-    padding: var(--_form-padding);
-
-    .select-scheme-marker-wrapper {
-      grid-area: select-stack;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      position: relative;
-
-      .select-scheme-marker {
-        aspect-ratio: 1;
-        width: var(--_select-scheme-group-width);
-        transition: all var(--_select-scheme-marker-step-animation-duration) ease-in-out;
-        background-color: var(--theme-form-radio-border);
-        border-radius: 50%;
-
-        position: absolute;
-        left: calc(var(--_select-scheme-marker-left-offset) - var(--_select-scheme-group-border-width));
-
-        opacity: 0;
-
-        &.show {
-          opacity: 1;
-        }
-      }
-    }
-
-    .select-scheme-group-wrapper {
-      display: grid;
-      grid-area: select-stack;
-      grid-template-columns: repeat(3, 1fr);
-      align-items: center;
-      width: fit-content;
-      z-index: 2;
-      gap: var(--_form-items-gap);
-      position: relative;
-
-      .select-scheme-group {
-        aspect-ratio: 1;
-        display: grid;
-        grid-template-areas: 'icon-stack';
-        place-content: center;
-        background: var(--_select-scheme-group-background-color);
-        border: var(--_select-scheme-group-border-width) solid var(--_select-scheme-group-border-colour);
-        outline: var(--_select-scheme-group-outline-width) solid var(--_select-scheme-group-outline-colour);
-        border-radius: 50%;
-        padding: var(--_select-scheme-group-padding);
-
-        transition: background calc(var(--_select-scheme-marker-step-animation-duration) / 3);
-
-        .scheme-icon {
-          grid-area: icon-stack;
-          display: block;
-          color: var(--_scheme-icon-colour);
-          font-size: var(--_scheme-icon-font-size);
-
-          &:hover {
-            cursor: pointer;
-          }
-        }
-
-        .scheme-input {
-          grid-area: icon-stack;
-          opacity: 0;
-
-          &:hover {
-            cursor: pointer;
-          }
-        }
-
-        &:has(input[value='auto']) {
-          &:has(.active) {
-            --_select-scheme-group-background-color: green;
-            --_scheme-icon-colour: white;
-          }
-        }
-
-        &:has(input[value='light']) {
-          &:has(.active) {
-            /* background: rgb(180, 58, 91);
-            background: linear-gradient(90deg, rgba(180, 58, 91, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); */
-            --_select-scheme-group-background-color: radial-gradient(circle, rgba(180, 58, 91, 1) 0%, rgba(253, 29, 29, 1) 27%, rgba(252, 176, 69, 1) 100%);
-            /* --_select-scheme-group-background-color: radial-gradient(circle, rgba(63, 94, 251, 1) 70%, rgba(63, 94, 251, 0.5550814075630253) 90%, rgba(255, 255, 255, 0.42622986694677867) 100%); */
-
-            --_scheme-icon-colour: white;
-          }
-        }
-
-        &:has(input[value='dark']) {
-          &:has(.active) {
-            --_select-scheme-group-background-color: black;
-            --_scheme-icon-colour: white;
-          }
-        }
-      }
-    }
-  }
-}
-</style>