srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/components/forms/input-range-fancy/InputRangeFancyCore.vue

@@ -0,0 +1,426 @@
+<template>
+  <div ref="control" class="control">
+    <div ref="toolTip" aria-hidden="true" class="tooltip">
+      <div ref="toolTipLow" class="range-label range-low-label">
+        {{ rangeLowLabel }}
+        <span class="value">{{ lowValue }} %</span>
+      </div>
+      <div ref="toolTipHigh" class="range-label range-high-label">
+        <span class="value">{{ highValue }} %</span>
+        {{ rangeHighLabel }}
+      </div>
+    </div>
+    <input
+      :id
+      ref="inputRef"
+      v-model="modelValue"
+      type="range"
+      :name
+      :min
+      :max
+      :step
+      @input="update()"
+      @pointerdown="update()"
+    />
+
+    <div ref="controlTrack" class="control__track">
+      <div class="control__track-slide">
+        <div class="control__fill"></div>
+        <div class="control__indicator"></div>
+        <div class="control__fill"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, FormWeight } from "~/types/forms/types.forms";
+
+interface Props {
+  id: string;
+  name: string;
+  min: number;
+  max: number;
+  step?: number;
+  rangeLowLabel: string;
+  rangeHighLabel: string;
+  placeholder?: string;
+  required?: boolean;
+  theme?: FormUiTheme;
+  weight?: FormWeight;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  placeholder: "",
+  required: false,
+  theme: "default",
+  weight: "wght-400",
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+});
+
+const modelValue = defineModel<number | readonly number[]>();
+
+const control = ref<HTMLDivElement | null>(null);
+const controlTrack = ref<HTMLDivElement | null>(null);
+const toolTip = ref<HTMLDivElement | null>(null);
+const toolTipLow = ref<HTMLDivElement | null>(null);
+const toolTipHigh = ref<HTMLDivElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// Box sizes
+const toolTipWidth = ref(0);
+const toolTipLowWidth = ref(0);
+const toolTipHighWidth = ref(0);
+// const toolTipMargin = 20;
+
+// const toolTipLowContainerEnd = computed(() => {
+//   return Math.floor(((toolTipHighWidth.value + toolTipMargin) / toolTipWidth.value) * 100) + "%";
+// });
+
+// const toolTipHighContainerStart = computed(() => {
+//   return Math.floor(((toolTipWidth.value - (toolTipHighWidth.value + toolTipMargin)) / toolTipWidth.value) * 100) + "%";
+// });
+
+const lowValue = computed(() => {
+  return Math.floor(Number(props.max) - Number(highValue.value));
+});
+const highValue = computed(() => {
+  return Math.floor((Number(modelValue.value) / props.max) * 100);
+});
+
+const update = () => {
+  control.value?.style.setProperty("--value", String(modelValue.value));
+  const value = typeof modelValue.value === "number" ? modelValue.value : 0;
+  controlTrack.value?.style.setProperty("--shift", value > 40 && value < 68 ? "1" : "0");
+  toolTip.value?.style.setProperty("--shift", value > 40 && value < 68 ? "1" : "0");
+};
+
+const updateBoxSizes = () => {
+  toolTipWidth.value = toolTip.value?.offsetWidth || 0;
+  toolTipLowWidth.value = toolTipLow.value?.offsetWidth || 0;
+  toolTipHighWidth.value = toolTipHigh.value?.offsetWidth || 0;
+};
+
+onMounted(() => {
+  updateBoxSizes();
+  if (!CSS.supports("animation-timeline: scroll()")) {
+    update();
+  }
+});
+</script>
+
+<style lang="css">
+@layer components {
+@layer foundation {
+  .control {
+    position: relative;
+    display: grid;
+    place-items: center;
+    margin: 0 auto;
+  }
+
+  .control:focus-within,
+  .control:hover {
+    --active: 1;
+  }
+
+  [type="range"] {
+    width: 100%;
+    opacity: 0;
+    height: 6rem;
+  }
+
+  [type="range"]:hover {
+    cursor: -webkit-grab;
+  }
+  [type="range"]:active {
+    cursor: -webkit-grabbing;
+  }
+
+  [type="range"]:focus-visible {
+    outline-offset: var(--form-element-outline-offset-focus);
+    outline-color: transparent;
+  }
+
+  @property --shift {
+    initial-value: 0;
+    inherits: true;
+    syntax: "<integer>";
+  }
+
+  .tooltip {
+    font-size: 1rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50%;
+    pointer-events: none;
+    transform: translateY(calc(var(--shift, 0) * 50%));
+    transition: transform var(--speed) var(--timing);
+    z-index: 2;
+  }
+  @keyframes shift {
+    0%,
+    31%,
+    61%,
+    100% {
+      --shift: 0;
+    }
+    32%,
+    60% {
+      --shift: 1;
+    }
+  }
+
+  /* .tooltip::after, */
+  /* .tooltip::before, */
+  .tooltip .range-label {
+    display: block;
+    font-inputvariant: tabular-nums;
+    position: absolute;
+    top: 50%;
+    translate: 0 -50%;
+    font-weight: bold;
+    color: white;
+    font-weight: 40;
+    font-family: monospace;
+  }
+
+  [type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    height: 6rem;
+    width: 4rem;
+    margin-top: 0rem;
+    opacity: 1;
+  }
+  [type="range"]::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    height: 6rem;
+    /* background: hsl(10 80% 50% / 0.5); */
+    margin-top: 0rem; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+    box-shadow:
+      0.1rem 0.1rem 0.1rem #000000,
+      0rem 0rem 0.1rem #0d0d0d;
+  }
+  [type="range"]::-moz-range-track {
+    height: 6rem;
+    /* background: hsl(10 80% 50% / 0.5); */
+    margin-top: 0rem; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+    box-shadow:
+      0.1rem 0.1rem 0.1rem #000000,
+      0rem 0rem 0.1rem #0d0d0d;
+  }
+}
+
+@layer scrolls {
+  @property --value {
+    initial-value: 0;
+    syntax: "<integer>";
+    inherits: true;
+  }
+
+  @keyframes sync {
+    to {
+      --value: 100;
+    }
+  }
+
+  [type="range"] {
+    overflow: hidden;
+    opacity: 0;
+    touch-action: none;
+    /* extras */
+    accent-color: hsl(24 74% calc(24% + (30% * ((100 - var(--value, 0)) / 100)) / 1) / 0.4);
+    outline: 0.2rem dashed #0000;
+    transition-property: outline-color, opacity, translate;
+    transition-duration: 0.25s;
+  }
+
+  [data-reveal="true"] [type="range"] {
+    opacity: 1;
+    translate: 0 -150%;
+    outline-color: white;
+  }
+
+  .control {
+    width: 100%;
+    animation:
+      sync both linear reverse,
+      shift both linear;
+    animation-timeline: --thumb;
+    animation-range: contain;
+    container-type: inline-size;
+  }
+
+  .control__track {
+    --coffee: hsl(24 74% calc(24% + (30% * ((100 - var(--value, 0)) / 100)) / 1) / 0.4);
+    --milk: hsl(0 0% 100% / calc(0.1 + (0.4 * ((100 - var(--value, 0)) / 100))));
+    height: calc(50% + (var(--shift) * 50%));
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    pointer-events: none;
+    transition: height var(--speed) var(--timing);
+    z-index: 5;
+    clip-path: inset(0 -0.25rem 0 -0.25rem round 0.6rem);
+  }
+
+  [data-reveal="true"] .control__track {
+    clip-path: unset;
+    outline: 0.2rem dashed white;
+  }
+
+  .control__track-slide {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    translate: calc(-50% + (var(--value) * 1cqi)) 0;
+    transition: translate var(--update);
+  }
+  .control__fill {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    border-radius: 0.6rem;
+
+    &:nth-of-type(1) {
+      background: var(--coffee);
+      right: calc(50% + 0.5rem);
+    }
+    &:nth-of-type(3) {
+      background: var(--milk);
+      left: calc(50% + 0.5rem);
+    }
+  }
+
+  .control__indicator {
+    height: 75%;
+    border-radius: 0.4rem;
+    width: 0.4rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: hsl(0 0% 100% / calc((var(--active, 0) * 0.5) + 0.5));
+    /* left: calc(var(--value, 0) * 1%); */
+    z-index: 2;
+    translate: -50% -50%;
+    /* transition: left var(--update); */
+  }
+
+  :where(html) {
+    --speed: 0.65s;
+    --update: 0s;
+    --timing: linear(
+      0,
+      0.5007 7.21%,
+      0.7803 12.29%,
+      0.8883 14.93%,
+      0.9724 17.63%,
+      1.0343 20.44%,
+      1.0754 23.44%,
+      1.0898 25.22%,
+      1.0984 27.11%,
+      1.1014 29.15%,
+      1.0989 31.4%,
+      1.0854 35.23%,
+      1.0196 48.86%,
+      1.0043 54.06%,
+      0.9956 59.6%,
+      0.9925 68.11%,
+      1
+    );
+    timeline-scope: --thumb;
+  }
+
+  @supports (animation-timeline: scroll()) {
+    :where(html) {
+      --speed: 0.65s;
+      --update: 0.1s;
+      --timing: linear(
+        0,
+        0.5007 7.21%,
+        0.7803 12.29%,
+        0.8883 14.93%,
+        0.9724 17.63%,
+        1.0343 20.44%,
+        1.0754 23.44%,
+        1.0898 25.22%,
+        1.0984 27.11%,
+        1.1014 29.15%,
+        1.0989 31.4%,
+        1.0854 35.23%,
+        1.0196 48.86%,
+        1.0043 54.06%,
+        0.9956 59.6%,
+        0.9925 68.11%,
+        1
+      );
+      timeline-scope: --thumb;
+    }
+
+    [type="range"]::-webkit-slider-thumb {
+      view-timeline-name: --thumb;
+      view-timeline-axis: inline;
+    }
+  }
+}
+
+@layer tip {
+  .tooltip {
+    counter-set: low var(--value) high calc(100 - var(--value));
+    z-index: 6;
+
+    /* .tooltip::before {
+    --range: calc((70 - (var(--value) / 100 * 10)) * 1%);
+    color: hsl(24 74% 54%);
+    content: 'COFFEE ' counter(low) '%';
+    mask: linear-gradient(90deg, hsl(0 0% 100% / 0.6) var(--range), hsl(0 0% 100% / 1) var(--range));
+    left: 0.5rem;
+  } */
+    /* .tooltip::after {
+    --range: calc((50 - (var(--value) / 100 * 10)) * 1%);
+    content: counter(high) '% MILK';
+    mask: linear-gradient(90deg, hsl(0 0% 100% / 1) var(--range), hsl(0 0% 100% / 0.5) var(--range));
+    right: 0.5rem;
+  } */
+
+    .range-low-label {
+      --range: calc((70 - (var(--value) / 100 * 10)) * 1%);
+
+      display: flex;
+      gap: 1.2rem;
+      color: hsl(24 74% 54%);
+      mask: linear-gradient(90deg, hsl(0 0% 100% / 0.6) var(--range), hsl(0 0% 100% / 1) var(--range));
+      left: 0.5rem;
+      .low-value {
+        display: inline-block;
+        border: 0.1rem solid white;
+        height: 2rem;
+        width: 5rem;
+      }
+    }
+
+    .range-high-label {
+      --range: calc((50 - (var(--value) / 100 * 10)) * 1%);
+
+      display: flex;
+      gap: 1.2rem;
+      mask: linear-gradient(90deg, hsl(0 0% 100% / 1) var(--range), hsl(0 0% 100% / 0.5) var(--range));
+      right: 0.5rem;
+      .high-value {
+        display: inline-block;
+        border: 0.1rem solid white;
+        height: 2rem;
+        width: 5rem;
+      }
+    }
+  }
+}
+}
+</style>

package/app/components/forms/input-range-fancy/InputRangeFancyWithLabel.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="input-range-fancy-with-label" :data-theme="theme" :class="[elementClasses, { error: fieldHasError }]">
+    <label class="input-range-fancy-label body-normal-bold" :for="id">{{ label }}</label>
+    <template v-if="slots.description">
+      <slot name="description"></slot>
+    </template>
+
+    <InputRangeFancyCore
+      :id
+      v-model="modelValue"
+      :name
+      :range-low-label
+      :range-high-label
+      :min
+      :max
+      :step
+      :theme
+      :required
+      :weight
+      :field-has-error
+    />
+    <InputError
+      :id
+      :error-message
+      :show-error="fieldHasError"
+      :is-detached="true"
+      :style-class-passthrough="['mbe-20']"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, FormWeight } from "~/types/forms/types.forms";
+
+interface Props {
+  id: string;
+  name: string;
+  label: string;
+  rangeLowLabel: string;
+  rangeHighLabel: string;
+  min: number;
+  max: number;
+  step?: number;
+  placeholder?: string;
+  errorMessage: object | string;
+  fieldHasError?: boolean;
+  required?: boolean;
+  theme?: FormUiTheme;
+  weight?: FormWeight;
+  styleClassPassthrough?: string | string[];
+  deepCssClassPassthrough?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  placeholder: "",
+  fieldHasError: false,
+  required: false,
+  theme: "default",
+  weight: "wght-400",
+  styleClassPassthrough: () => [],
+  deepCssClassPassthrough: "",
+});
+
+const slots = useSlots();
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const FormUiTheme = computed(() => {
+  return props.fieldHasError ? "error" : props.theme;
+});
+
+const modelValue = defineModel<number | readonly number[]>();
+</script>
+
+<style lang="css">
+@layer components {
+.input-range-fancy-with-label {
+  .input-range-fancy-label {
+    display: block;
+    margin-block: 0.8rem;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .label-description {
+    font-family: var(--font-family);
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
+  }
+}
+}
+</style>

package/app/components/forms/input-select/InputSelectCore.vue

@@ -0,0 +1,171 @@
+<template>
+  <div
+    class="input-select-wrapper"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
+  >
+    <select
+      :id
+      v-model="modelValue"
+      :aria-invalid="fieldHasError ? 'true' : undefined"
+      class="input-select-core"
+      :name
+      :title
+      :aria-describedby="ariaDescribedby"
+    >
+      <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-core-option placeholder">
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="item in fieldData.data"
+        :key="item.id"
+        :value="item.value"
+        :selected="Number(item.value) === modelValue"
+        class="input-select-core-option"
+      >
+        <Icon
+          v-if="item.icon"
+          :name="item.icon"
+          class="input-select-core-option-decorator-icon"
+          aria-hidden="true"
+          focusable="false"
+        />
+        {{ item.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IFormMultipleOptions } from "~/types/forms/types.forms";
+
+interface Props {
+  id: string;
+  name: string;
+  placeholder?: string;
+  title?: string;
+  required?: boolean;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: "default" | "success" | "error" | "warning";
+  inputVariant?: "normal" | "outlined" | "underlined";
+  ariaDescribedby?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  placeholder: "",
+  title: "Please select an option",
+  required: false,
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+  ariaDescribedby: "",
+});
+
+const modelValue = defineModel<string | number | readonly number[]>({ required: true });
+const isDirty = defineModel<boolean>("isDirty");
+const isActive = defineModel<boolean>("isActive");
+const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
+</script>
+
+<style lang="css">
+@layer components {
+.input-select-wrapper {
+  background-color: var(--theme-input-surface);
+  overflow: hidden;
+
+  z-index: 2;
+  position: relative;
+  transition: all var(--theme-form-transition-duration) ease-in-out;
+
+  &.normal {
+    border: var(--form-element-border-width) solid var(--theme-input-border);
+    border-radius: var(--form-input-border-radius);
+    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+  }
+
+  &.underlined {
+    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-input-border);
+    background-color: var(--theme-input-surface);
+  }
+
+  &:has(select:focus-visible, :hover) {
+    outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+    outline-offset: var(--form-element-outline-offset-focus);
+  }
+
+  .input-select-core {
+    appearance: none;
+    background-color: transparent;
+
+    /* For legacy support - eg, Safari */
+    /* &::after {
+      content: '';
+      width: 0.8em;
+      height: 0.5em;
+      background-color: var(--theme-input-border);
+      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+    } */
+
+    /* Start modern Select CSS */
+    &,
+    &::picker(select) {
+      appearance: base-select;
+    }
+
+    &::picker(select) {
+      transition:
+        display allow-discrete var(--theme-form-transition-duration),
+        opacity var(--theme-form-transition-duration),
+        overlay var(--theme-form-transition-duration) allow-discrete;
+    }
+
+    &:not(:open)::picker(select) {
+      opacity: 0;
+    }
+
+    &:open::picker(select) {
+      opacity: 1;
+      border: var(--form-element-border-width) solid var(--theme-input-border);
+      outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    border: none;
+    outline: none;
+    border-radius: 0;
+    width: 100%;
+
+    /* END modern Select CSS */
+
+    font-family: var(--font-family);
+    font-size: var(--input-font-size);
+    line-height: var(--input-element-line-height);
+    padding-block: var(--input-padding-block);
+    padding-inline: var(--input-padding-inline);
+    min-height: var(--input-min-height);
+
+    .input-select-core-option {
+      min-height: var(--input-select-option-min-height);
+      gap: 1.5rem;
+      transition: all var(--theme-form-transition-duration) ease-in-out;
+
+      &:hover {
+        background-color: var(--theme-input-surface-hover);
+      }
+
+      .input-select-core-option-decorator-icon {
+        display: inline-block;
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+  }
+}
+}
+</style>