srcdev-nuxt-forms 2.4.23 → 3.0.0

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

@@ -1,450 +0,0 @@
-<template>
-  <div class="control" ref="control">
-    <div aria-hidden="true" class="tooltip" ref="toolTip">
-      <div class="range-label range-low-label" ref="toolTipLow">
-        {{ rangeLowLabel }}<span class="value">{{ lowValue }} %</span>
-      </div>
-      <div class="range-label range-high-label" ref="toolTipHigh">
-        <span class="value">{{ highValue }} %</span>{{ rangeHighLabel }}
-      </div>
-    </div>
-    <input type="range" v-model="modelValue" ref="inputRef" @input="update()" @pointerdown="update()" :id :name :min :max :step />
-
-    <div class="control__track" ref="controlTrack">
-      <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 propValidators from '../c12/prop-validators';
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  min: {
-    type: Number,
-    required: true,
-  },
-  max: {
-    type: Number,
-    required: true,
-  },
-  step: {
-    type: Number,
-    default: 1,
-  },
-  rangeLowLabel: {
-    type: String,
-    required: true,
-  },
-  rangeHighLabel: {
-    type: String,
-    required: true,
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  weight: {
-    type: String as PropType<string>,
-    default: 'wght-400',
-    validator(value: string) {
-      return propValidators.weight.includes(value);
-    },
-  },
-  fieldHasError: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-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;
-  console.log('toolTipWidth', toolTipWidth.value);
-  console.log('toolTipLowContainerEnd', toolTipLowContainerEnd.value);
-  console.log('toolTipHighContainerStart', toolTipHighContainerStart.value);
-};
-
-onMounted(() => {
-  updateBoxSizes();
-  if (!CSS.supports('animation-timeline: scroll()')) {
-    update();
-  }
-});
-</script>
-
-<style lang="css">
-@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: 0.25rem;
-    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-variant: 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); */
-  }
-
-  :root {
-    --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()) {
-    :root {
-      --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/components/forms/input-range-fancy/InputRangeFancyWithLabel.vue

@@ -1,124 +0,0 @@
-<template>
-  <div class="input-range-fancy-with-label" :data-form-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
-    <label class="input-range-fancy-label body-normal-bold" :for="id">{{ label }}</label>
-    <template v-if="hasDescription">
-      <slot name="description"></slot>
-    </template>
-
-    <InputRangeFancyCore v-model="modelValue" :id :name :rangeLowLabel :rangeHighLabel :min :max :step :theme :required :size :weight :fieldHasError />
-    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="true" :styleClassPassthrough="['mbe-20']" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  rangeLowLabel: {
-    type: String,
-    required: true,
-  },
-  rangeHighLabel: {
-    type: String,
-    required: true,
-  },
-  min: {
-    type: Number,
-    required: true,
-  },
-  max: {
-    type: Number,
-    required: true,
-  },
-  step: {
-    type: Number,
-    default: 1,
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  errorMessage: {
-    type: [Object, String],
-    required: true,
-  },
-  fieldHasError: {
-    type: Boolean,
-    default: false,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  weight: {
-    type: String as PropType<string>,
-    default: 'wght-400',
-    validator(value: string) {
-      return propValidators.weight.includes(value);
-    },
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  deepCssClassPassthrough: {
-    type: String,
-    default: '',
-  },
-});
-
-const slots = useSlots();
-const hasDescription = computed(() => slots.description !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
-
-const modelValue = defineModel<number | readonly number[]>();
-</script>
-
-<style lang="css">
-.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>