srcdev-nuxt-forms 2.4.23 → 3.0.0

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>

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

@@ -1,225 +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">
-      <div class="input-range-markers">
-        <div class="marker">
-          <LazyIcon name="material-symbols:night-sight-auto-sharp" class="marker-icon" />
-        </div>
-        <div class="marker">
-          <LazyIcon name="radix-icons:sun" class="marker-icon" />
-        </div>
-        <div class="marker" v>
-          <LazyIcon name="radix-icons:moon" class="marker-icon" />
-        </div>
-      </div>
-
-      <div class="scheme-marker-wrapper">
-        <div class="scheme-marker-indicator"></div>
-      </div>
-
-      <div class="form-elements">
-        <div class="form-input">
-          <input type="radio" id="auto" name="colour-scheme" v-model="colourScheme" value="auto" />
-          <label for="auto" class="sr-only">Auto</label>
-        </div>
-        <div class="form-input">
-          <input type="radio" id="light" name="colour-scheme" v-model="colourScheme" value="light" />
-          <label for="light" class="sr-only">Light</label>
-        </div>
-        <div class="form-input">
-          <input type="radio" id="dark" name="colour-scheme" v-model="colourScheme" 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';
-
-defineProps({
-  name: {
-    type: String,
-    defaul: useId(),
-  },
-  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);
-    },
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const colourScheme = ref<'auto' | 'dark' | 'light'>('auto');
-
-useColourScheme(colourScheme);
-</script>
-
-<style lang="css">
-.colour-scheme-select {
-  --_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);
-
-  --_background-color: var(--theme-form-radio-bg);
-  --_border-color: var(--theme-form-radio-border);
-  --_border-radius: 50%;
-  --_outline-color: var(--theme-form-radio-outline);
-
-  --_form-padding: 0.5rem;
-  --_form-input-outline-width: 0.2rem;
-
-  --_scheme-marker-position: start;
-
-  .colour-scheme-select-form {
-    display: grid;
-    grid-template-areas: 'element-stack';
-    align-items: center;
-
-    background-color: var(--theme-form-radio-bg);
-    border: var(--_border-width) solid var(--_border-color);
-
-    border-radius: calc((var(--_icon-size) / 2) + var(--_form-padding) + var(--_border-width) + var(--_outline-width) + var(--_form-input-outline-width));
-
-    outline: var(--_outline-width) solid var(--_outline-color);
-    box-shadow: var(--_box-shadow);
-
-    /* height: calc(var(--_icon-size) + 4px); */
-    width: calc((var(--_icon-size) * 3) + (var(--_form-padding) * 17));
-
-    transition: all 0.2s ease-in-out;
-
-    .input-range-markers {
-      grid-area: element-stack;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      padding: var(--_form-padding);
-
-      .marker {
-        background-color: black;
-        padding: var(--_form-padding);
-        border-radius: 50%;
-        overflow: hidden;
-        /* outline: 1px solid gray; */
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        .marker-icon {
-          /* font-size: 2rem; */
-          display: block;
-          color: white;
-          height: var(--_icon-size);
-          width: var(--_icon-size);
-        }
-      }
-    }
-
-    .scheme-marker-wrapper {
-      grid-area: element-stack;
-      display: grid;
-      gap: 1rem;
-
-      grid-template-columns: repeat(3, 1fr);
-      /* transition: grid-template-columns 0.2s; */
-      /* text-align: var(--_scheme-marker-position); */
-      padding: var(--_form-padding);
-      /* z-index: 9; */
-
-      .scheme-marker-indicator {
-        grid-column: 3;
-        aspect-ratio: 1;
-        background-color: var(--theme-form-radio-bg);
-        background-color: red;
-        border-radius: 50%;
-        height: calc(var(--_icon-size) + var(--_form-padding));
-        /* width: calc(var(--_icon-size) + var(--_form-padding)); */
-        padding: var(--_form-padding);
-        transition: grid-columns 0.2s;
-      }
-    }
-
-    .form-elements {
-      grid-area: element-stack;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-      padding: var(--_form-padding);
-
-      .form-input {
-        border-radius: 50%;
-        display: flex;
-        place-content: center;
-        padding: var(--_form-padding);
-        outline: var(--_form-input-outline-width) solid gray;
-        opacity: 0.75;
-
-        &:has(input[value='auto']) {
-          background-color: green;
-
-          &:has(input[value='auto']:checked) {
-            --_scheme-marker-position: start;
-            outline: var(--_form-input-outline-width) solid var(--_border-color);
-            opacity: 1;
-          }
-        }
-
-        &:has(input[value='light']) {
-          background-color: orange;
-
-          &:has(input[value='light']:checked) {
-            --_scheme-marker-position: center;
-            outline: var(--_form-input-outline-width) solid var(--_border-color);
-            opacity: 1;
-          }
-        }
-
-        &:has(input[value='dark']) {
-          background-color: black;
-
-          &:has(input[value='dark']:checked) {
-            --_scheme-marker-position: end;
-            outline: var(--_form-input-outline-width) solid var(--_border-color);
-            opacity: 1;
-          }
-        }
-
-        input[type='radio'] {
-          opacity: 0;
-          height: var(--_icon-size);
-          width: var(--_icon-size);
-          margin: 0;
-          padding: 0;
-
-          &:hover {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue

@@ -1,47 +0,0 @@
-<template>
-  <ToggleSwitchWithLabelInline v-model="currentColourScheme" :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
-    <template #iconOn>
-      <LazyIcon name="radix-icons:moon" class="icon" />
-    </template>
-    <template #iconOff>
-      <LazyIcon name="radix-icons:sun" class="icon" />
-    </template>
-  </ToggleSwitchWithLabelInline>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../../forms/c12/prop-validators';
-
-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);
-    },
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'small',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-// const displayMode = ref<'auto' | 'dark' | 'light'>('auto');
-
-const { currentColourScheme } = useColourScheme();
-</script>

package/composables/useApiRequest.ts

@@ -1,25 +0,0 @@
-class CustomError extends Error {
-  // name = "CustomError";
-  override name = 'CustomError';
-  extraProp = 'Error: test';
-}
-
-async function useApiRequest<T, E extends new (message?: string) => Error>(promise: Promise<T>, errorsToCatch?: E[]): Promise<[undefined, T] | [InstanceType<E>]> {
-  return promise
-    .then((data) => {
-      return [undefined, data] as [undefined, T];
-    })
-    .catch((error) => {
-      if (errorsToCatch == undefined) {
-        return [error];
-      }
-
-      if (errorsToCatch.some((errorType) => error instanceof errorType)) {
-        return [error];
-      }
-
-      throw error;
-    });
-}
-
-export default useApiRequest;