srcdev-nuxt-forms 3.0.0 → 4.0.0

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

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

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

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

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

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