@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/components/AppRating/VueStarRating/Star.vue

@@ -0,0 +1,215 @@
+<script lang="ts" setup>
+  import { ref, computed, nextTick, onBeforeMount } from 'vue';
+  import AlphaColor from './classes/AlphaColor';
+
+  const props = withDefaults(defineProps<{
+    fill?: number;
+    points?: number[];
+    size?: number;
+    starId: number;
+    activeColor: string;
+    inactiveColor: string;
+    borderColor?: string;
+    activeBorderColor?: string;
+    borderWidth?: number;
+    roundedCorners?: boolean;
+    glow?: number;
+    glowColor?: string;
+    animate?: boolean;
+  }>(), {
+    fill: 0,
+    points: () => [],
+    size: 50,
+    borderColor: '#000',
+    activeBorderColor: '#000',
+    borderWidth: 0,
+    roundedCorners: false,
+    glow: 0,
+    glowColor: undefined,
+    animate: false,
+  });
+
+  const emit = defineEmits<{
+    (event: 'starMouseMove', value: { id: number; position: number }): void;
+    (event: 'starSelected', value: { id: number; position: number }): void;
+  }>();
+
+  const starPoints = ref<number[]>([19.8, 2.2, 6.6, 43.56, 39.6, 17.16, 0, 17.16, 33, 43.56]);
+  const grad = ref('');
+  const glowId = ref('');
+  const isStarActive = ref(true);
+
+  const starPointsToString = computed(() => {
+    return starPoints.value.join(',');
+  });
+  const gradId = computed(() => `url(#${grad.value})`);
+  const border = computed(() => ((props.roundedCorners && props.borderWidth <= 0) ? 6 : props.borderWidth));
+  const starSize = computed(() => {
+    const size = (props.roundedCorners && props.borderWidth <= 0)
+      ? parseInt(`${props.size}`, 10) - parseInt(`${border.value}`, 10)
+      : props.size;
+
+    return parseInt(`${size}`, 10) + parseInt(`${border.value}`, 10);
+  });
+  const starFill = computed(() => `${props.fill}%`);
+  const getBorderColor = computed(() => {
+    if (props.roundedCorners && props.borderWidth <= 0) {
+      return (props.fill <= 0) ? props.inactiveColor : props.activeColor;
+    }
+
+    return (props.fill <= 0) ? props.borderColor : props.activeBorderColor;
+  });
+  const maxSize = computed(() => {
+    // eslint-disable-next-line unicorn/no-array-reduce
+    return [...starPoints.value].reduce((pointA, pointB) => Math.max(pointA, pointB));
+  });
+  const viewBox = computed(() => {
+    return `0 0 ${maxSize.value} ${maxSize.value}`;
+  });
+  const shouldAnimate = computed(() => {
+    return props.animate && isStarActive.value;
+  });
+  const strokeLinejoin = computed(() => {
+    return props.roundedCorners ? 'round' : 'miter';
+  });
+
+  onBeforeMount(() => {
+    starPoints.value = (props.points.length > 0) ? props.points : starPoints.value;
+
+    calculatePoints();
+
+    grad.value = getRandomId();
+    glowId.value = getRandomId();
+  });
+
+  function mouseMoving($event: MouseEvent & { touchAction?: string }): void {
+    if ($event.touchAction !== 'undefined') {
+      emit('starMouseMove', {
+        position: getPosition($event),
+        id: props.starId,
+      });
+    }
+  }
+
+  function touchStart(): void {
+    nextTick(() => {
+      isStarActive.value = true;
+    });
+  }
+
+  function touchEnd(): void {
+    nextTick(() => {
+      isStarActive.value = false;
+    });
+  }
+
+  function getPosition($event): number {
+    const starWidth = (92 / 100) * props.size;
+    const offset = Math.max($event.offsetX, 1);
+    const position = Math.round((100 / starWidth) * offset);
+
+    return Math.min(position, 100);
+  }
+
+  function selected($event): void {
+    emit('starSelected', {
+      id: props.starId,
+      position: getPosition($event),
+    });
+  }
+
+  function getRandomId(): string {
+    return Math.random().toString(36).slice(7);
+  }
+
+  function calculatePoints(): void {
+    starPoints.value = starPoints.value.map((point, index) => {
+      const offset = index % 2 === 0 ? border.value * 1.5 : 0;
+
+      return ((props.size / maxSize.value) * point) + offset;
+    });
+  }
+
+  function getColor(color: string): string {
+    return new AlphaColor(color).parseAlphaColor().color;
+  }
+
+  function getOpacity(color: string): number | string | undefined {
+    return new AlphaColor(color).parseAlphaColor().opacity;
+  }
+</script>
+
+<template>
+  <svg
+    :class="{ 'transition-all hover:rotate-12': shouldAnimate }"
+    :height="starSize"
+    :width="starSize"
+    :viewBox="viewBox"
+    class="overflow-visible"
+    @mousemove="mouseMoving"
+    @click="selected"
+    @touchstart="touchStart"
+    @touchend="touchEnd"
+  >
+
+    <linearGradient
+      :id="grad"
+      x1="0"
+      x2="100%"
+      y1="0"
+      y2="0"
+    >
+      <stop
+        :offset="starFill"
+        :stop-color="getColor(activeColor)"
+        :stop-opacity="getOpacity(activeColor)"
+      ></stop>
+
+      <stop
+        :offset="starFill"
+        :stop-color="getColor(inactiveColor)"
+        :stop-opacity="getOpacity(inactiveColor)"
+      ></stop>
+    </linearGradient>
+
+    <filter
+      :id="glowId"
+      height="130%"
+      width="130%"
+      filterUnits="userSpaceOnUse"
+    >
+      <feGaussianBlur
+        :stdDeviation="glow"
+        result="coloredBlur"
+      ></feGaussianBlur>
+
+      <feMerge>
+        <feMergeNode in="coloredBlur"></feMergeNode>
+
+        <feMergeNode in="SourceGraphic"></feMergeNode>
+      </feMerge>
+    </filter>
+
+    <polygon
+      v-show="glowColor && glow > 0 && fill > 0"
+      :points="starPointsToString"
+      :fill="gradId"
+      :stroke="glowColor"
+      :filter="`url(#${glowId})`"
+      :stroke-width="border"
+    ></polygon>
+
+    <polygon
+      :points="starPointsToString"
+      :fill="gradId"
+      :stroke="getBorderColor"
+      :stroke-width="border"
+      :stroke-linejoin="strokeLinejoin"
+    ></polygon>
+
+    <polygon
+      :points="starPointsToString"
+      :fill="gradId"
+    ></polygon>
+  </svg>
+</template>

package/src/modules/components/AppRating/VueStarRating/StarRating.vue

@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+  import { onBeforeMount, watch, computed, ref } from 'vue';
+  import Star from './Star.vue';
+
+  const props = withDefaults(defineProps<{
+    rating?: number;
+    increment?: number;
+    roundStartRating?: boolean;
+    activeColor?: string | string[];
+    inactiveColor?: string;
+    maxRating?: number;
+    starPoints?: number[];
+    starSize?: number;
+    showRating?: boolean;
+    readOnly?: boolean;
+    textClass?: string;
+    inline?: boolean;
+    borderColor?: string;
+    activeBorderColor?: null | string | string[];
+    borderWidth?: number;
+    roundedCorners?: boolean;
+    padding?: number;
+    rtl?: boolean;
+    fixedPoints?: number | null;
+    glow?: number;
+    glowColor?: string;
+    clearable?: boolean;
+    activeOnClick?: boolean;
+    animate?: boolean;
+  }>(), {
+    rating: 0,
+    increment: 1,
+    roundStartRating: true,
+    activeColor: '#ffd055',
+    inactiveColor: '#d8d8d8',
+    maxRating: 5,
+    starPoints: () => [],
+    starSize: 50,
+    showRating: true,
+    readOnly: false,
+    textClass: '',
+    inline: false,
+    borderColor: '#999',
+    activeBorderColor: null,
+    borderWidth: 0,
+    roundedCorners: false,
+    padding: 0,
+    rtl: false,
+    fixedPoints: null,
+    glow: 0,
+    glowColor: '#fff',
+    clearable: false,
+    activeOnClick: false,
+    animate: false,
+  });
+
+  const emit = defineEmits<{
+    (event: 'update:rating', value: number): void;
+    (event: 'hover:rating', value: number): void;
+  }>();
+
+  const step = ref<number>(0);
+  const fillLevel = ref<number[]>([]);
+  const currentRating = ref<number>(0);
+  const selectedRating = ref<number>(0);
+  const ratingSelected = ref<boolean>(false);
+
+  const formattedRating = computed((): string | number => {
+    return (props.fixedPoints === null) ? currentRating.value : currentRating.value.toFixed(props.fixedPoints);
+  });
+  const shouldRound = computed((): boolean => ratingSelected.value || props.roundStartRating);
+  const margin = computed((): number => props.padding + props.borderWidth);
+  const activeColors = computed((): number[] => {
+    if (Array.isArray(props.activeColor)) {
+      return padColors(props.activeColor, props.maxRating, props.activeColor.slice(-1)[0]);
+    }
+
+    return (Array.from({ length: props.maxRating }).fill(props.activeColor)) as number[];
+  });
+  const currentActiveColor = computed((): string => {
+    if (!props.activeOnClick) {
+      return `${(currentRating.value > 0) ? activeColors.value[Math.ceil(currentRating.value) - 1] : props.inactiveColor}`;
+    }
+
+    return `${(selectedRating.value > 0) ? activeColors.value[Math.ceil(selectedRating.value) - 1] : props.inactiveColor}`;
+  });
+  const activeBorderColors = computed((): string[] | number[] => {
+    if (Array.isArray(props.activeBorderColor)) {
+      return padColors(props.activeBorderColor, props.maxRating, props.activeBorderColor.slice(-1)[0]);
+    }
+
+    const borderColor = (props.activeBorderColor) ? props.activeBorderColor : props.borderColor;
+
+    return Array.from<string>({ length: props.maxRating }).fill(borderColor) as string[];
+  });
+  const currentActiveBorderColor = computed((): string => {
+    if (!props.activeOnClick) {
+      return `${(currentRating.value > 0) ? activeBorderColors.value[Math.ceil(currentRating.value) - 1] : props.borderColor}`;
+    }
+
+    return `${(selectedRating.value > 0) ? activeBorderColors.value[Math.ceil(selectedRating.value) - 1] : props.borderColor}`;
+  });
+  const roundedRating = computed((): number => {
+    const inv = 1 / props.increment;
+
+    return Math.min(props.maxRating, Math.ceil(currentRating.value * inv) / inv);
+  });
+
+  watch(() => props.rating, (value: number) => {
+    currentRating.value = value;
+    selectedRating.value = value;
+    createStars(shouldRound.value);
+  });
+
+  onBeforeMount(() => {
+    step.value = props.increment * 100;
+    currentRating.value = props.rating;
+    selectedRating.value = currentRating.value;
+    createStars(props.roundStartRating);
+  });
+
+  function setRating($event: { id: number; position: number }, persist = false): void {
+    if (props.readOnly) { return; }
+
+    const position = (props.rtl) ? (100 - $event.position) / 100 : $event.position / 100;
+
+    // @ts-expect-error - TS complains about the value being a string
+    currentRating.value = (($event.id + position) - 1).toFixed(2);
+    currentRating.value = (currentRating.value > props.maxRating) ? props.maxRating : currentRating.value;
+
+    if (persist) {
+      createStars(true, true);
+      selectedRating.value = (props.clearable && currentRating.value === selectedRating.value) ? 0 : currentRating.value;
+      emit('update:rating', selectedRating.value);
+      ratingSelected.value = true;
+
+      return;
+    }
+
+    createStars(true, !props.activeOnClick);
+
+    // eslint-disable-next-line vue/custom-event-name-casing
+    emit('hover:rating', currentRating.value);
+  }
+
+  function resetRating(): void {
+    if (props.readOnly) { return; }
+
+    currentRating.value = selectedRating.value;
+    createStars(shouldRound.value);
+  }
+
+  function createStars(round = true, applyFill = true): void {
+    currentRating.value = (round) ? roundedRating.value : currentRating.value;
+
+    // eslint-disable-next-line no-plusplus
+    for (let number = 0; number < props.maxRating; number++) {
+      let level = 0;
+
+      if (number < currentRating.value) {
+        level = (currentRating.value - number > 1) ? 100 : (currentRating.value - number) * 100;
+      }
+
+      if (applyFill) {
+        fillLevel.value[number] = Math.round(level);
+      }
+    }
+  }
+
+  function padColors(array, minLength, fillValue): number[] {
+    return Object.assign([minLength].fill(fillValue), array);
+  }
+</script>
+
+<template>
+  <div
+    :class="{ 'inline-flex': inline }"
+    class="flex items-center"
+  >
+    <div class="sr-only">
+      <slot
+        :rating="selectedRating"
+        :stars="maxRating"
+        name="screen-reader"
+      >
+        <span>Rated {{ selectedRating }} stars out of {{ maxRating }}</span>
+      </slot>
+    </div>
+
+    <div
+      class="flex items-center"
+      @mouseleave="resetRating"
+    >
+      <span
+        v-for="n in maxRating"
+        :key="n"
+        :class="{ 'cursor-pointer': !readOnly }"
+        :style="`margin-right: ${margin}px`"
+        class="inline-block"
+      >
+        <Star
+          :fill="fillLevel[n-1]"
+          :size="starSize"
+          :points="starPoints"
+          :star-id="n"
+          :step="step"
+          :active-color="currentActiveColor"
+          :inactive-color="inactiveColor"
+          :border-color="borderColor"
+          :active-border-color="currentActiveBorderColor"
+          :border-width="borderWidth"
+          :rounded-corners="roundedCorners"
+          :rtl="rtl"
+          :glow="glow"
+          :glow-color="glowColor"
+          :animate="animate"
+          @star-selected="$event => setRating($event, true)"
+          @star-mouse-move="setRating"
+        />
+      </span>
+
+      <span
+        v-if="showRating"
+        :class="textClass"
+        class="ml-2"
+      >
+        {{ formattedRating }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/modules/components/AppRating/VueStarRating/classes/AlphaColor.ts

@@ -0,0 +1,68 @@
+interface Color {
+  color: string;
+  opacity: number | string | undefined;
+}
+
+class AlphaColor {
+  public readonly color: string = '';
+
+  public constructor(color: string) {
+    this.color = color;
+  }
+
+  public parseAlphaColor(): Color {
+    if (/^rgba\((\d{1,3}%?\s*,\s*){3}(\d*(?:\.\d+)?)\)$/.test(this.color)) {
+      return this.parseRgba();
+    }
+
+    if (/^hsla\(\d+\s*,\s*([\d.]+%\s*,\s*){2}(\d*(?:\.\d+)?)\)$/.test(this.color)) {
+      return this.parseHsla();
+    }
+
+    if (/^#([\dA-Fa-f]{4}|[\dA-Fa-f]{8})$/.test(this.color)) {
+      return this.parseAlphaHex();
+    }
+
+    if (/^transparent$/.test(this.color)) {
+      return this.parseTransparent();
+    }
+
+    return {
+      color: this.color,
+      opacity: '1',
+    };
+  }
+
+  public parseRgba(): Color {
+    return {
+      color: this.color.replace(/,(?!.*,).*(?=\))|a/g, ''),
+      opacity: this.color.match(/\.\d+|[01](?=\))/)?.[0],
+    };
+  }
+
+  public parseHsla(): Color {
+    return {
+      color: this.color.replace(/,(?!.*,).*(?=\))|a/g, ''),
+      opacity: this.color.match(/\.\d+|[01](?=\))/)?.[0],
+    };
+  }
+
+  public parseAlphaHex(): Color {
+    return {
+      color: this.color.length === 5 ? this.color.slice(0, 4) : this.color.slice(0, 7),
+      opacity: this.color.length === 5
+        ? (parseInt(this.color.slice(4, 5) + this.color.slice(4, 5), 16) / 255).toFixed(2)
+        : (parseInt(this.color.slice(7, 9), 16) / 255).toFixed(2),
+    };
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  public parseTransparent(): Color {
+    return {
+      color: '#fff',
+      opacity: 0,
+    };
+  }
+}
+
+export default AlphaColor;