adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/elements/star-rating/AStarRating.vue

@@ -1,189 +1,189 @@
-<script setup lang="ts">
-import Star from "./ui/Star.vue";
-import type {StarMoveEvent} from "./types";
-import AAlert from "#adata-ui/components/elements/alert/AAlert.vue";
-
-const modelValue = defineModel<number>(0)
-
-interface Props {
-  max?: number;
-  readonly?: boolean;
-  increment?: number;
-  roundStartRating?: boolean;
-  starSize?: number;
-  activeOnClick?: boolean;
-  fixedPoints?: number | null;
-  gap?: number;
-  ratingPlacement?: 'left' | 'right';
-  fontSize?: number;
-  error?: string | boolean;
-  errorSize?: 'sm' | 'lg';
-  hideValue?: boolean;
-  hideEmptyStars?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  max: 5,
-  increment: 1,
-  readonly: false,
-  roundStartRating: true,
-  starSize: 16,
-  activeOnClick: false,
-  fixedPoints: null,
-  gap: 4,
-  ratingPlacement: 'left',
-  fontSize: 14,
-  error: false,
-  errorSize: 'lg',
-  hideValue: false,
-  hideEmptyStars: false
-})
-
-const fillLevel = ref<number[]>([])
-const currentRating = ref<number>(modelValue.value)
-const selectedRating = ref<number>(modelValue.value)
-const ratingSelected = ref<boolean>(false)
-
-const gapStyle = computed(() => {
-  return {
-    gap: `${props.gap}px`
-  }
-})
-const roundedRating = computed(() => {
-  const inv = 1.0 / props.increment
-  return Math.min(props.max, Math.ceil(currentRating.value * inv) / inv)
-})
-const shouldRound = computed(() => ratingSelected.value || props.roundStartRating)
-
-const visibleStarsCount = computed(() => {
-  if (!props.hideEmptyStars) return props.max
-  return Math.min(props.max, Math.max(1, Math.ceil(currentRating.value)))
-})
-
-watch(modelValue, (e)=>{
-  currentRating.value = e
-  selectedRating.value = e
-  createStars()
-})
-
-const resetRating = () => {
-  if (!props.readonly) {
-    currentRating.value = selectedRating.value
-    modelValue.value = selectedRating.value
-    createStars(shouldRound.value)
-  }
-}
-
-const createStars = (round: boolean = true, applyFill: boolean = true) => {
-  currentRating.value = (round) ? roundedRating.value : currentRating.value
-
-  for (let i = 0; i < props.max; i++) {
-    let level = 0
-    if (i < currentRating.value) {
-      level = (currentRating.value - i > 1) ? 100 : (currentRating.value - i) * 100
-    }
-    if (applyFill) {
-      fillLevel.value[i] = Math.round(level)
-    }
-  }
-}
-
-const setRating = (event: StarMoveEvent, persist: boolean) => {
-  if (!props.readonly) {
-    const position = event.position / 100
-    currentRating.value = ((event.id + position) - 1).toFixed(2)
-    currentRating.value = (currentRating.value > props.max) ? props.max : currentRating.value
-    modelValue.value = roundedRating.value
-    if (persist) {
-      createStars(true, true)
-      selectedRating.value = (currentRating.value === selectedRating.value) ? 0 : currentRating.value
-      modelValue.value = selectedRating.value
-      ratingSelected.value = true
-
-    } else {
-      createStars(true, !props.activeOnClick)
-    }
-  }
-}
-
-createStars(shouldRound.value)
-</script>
-
-<template>
-  <div>
-    <div class="w-full flex items-center gap-2">
-      <span
-        v-if="ratingPlacement === 'left' && !hideValue"
-        class="text-quaternary mt-px"
-        :style="{fontSize: `${fontSize}px`}"
-      >
-        {{ modelValue }}
-      </span>
-      <div
-        :class="{'pointer-events-none': readonly}"
-        class="flex items-center"
-        :style="gapStyle"
-        @mouseleave="resetRating"
-      >
-        <star
-          v-for="n in visibleStarsCount"
-          :key="n"
-          :fill="fillLevel[n-1]"
-          :size="starSize"
-          :star-id="n"
-          @star-selected="setRating($event, true)"
-        />
-      </div>
-      <span
-        v-if="ratingPlacement === 'right' && !hideValue"
-        class="text-body-md text-quaternary mt-px"
-      >
-        {{ modelValue }}
-      </span>
-    </div>
-    <Transition name="slide-in">
-      <div
-        v-if="error && typeof error === 'string'"
-        class="mt-1"
-      >
-        <a-alert
-          :color="'red'"
-          :size="errorSize"
-          :icon-type="'triangle'"
-        >
-          <template #default>
-            <span
-              v-for="(err, index) in error.split(', ')"
-              :key="index"
-            >{{ err }}<br></span>
-          </template>
-        </a-alert>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.slide-in-enter-active {
-  z-index: 0;
-  opacity: 0;
-  transform: translateY(-50%);
-  transition: transform 0.5s;
-}
-
-.slide-in-enter-to {
-  z-index: auto;
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.slide-in-leave-active {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.slide-in-leave-to {
-  opacity: 0;
-  transform: translateY(-100%);
-}
-</style>
+<script setup lang="ts">
+import Star from "./ui/Star.vue";
+import type {StarMoveEvent} from "./types";
+import AAlert from "#adata-ui/components/elements/alert/AAlert.vue";
+
+const modelValue = defineModel<number>(0)
+
+interface Props {
+  max?: number;
+  readonly?: boolean;
+  increment?: number;
+  roundStartRating?: boolean;
+  starSize?: number;
+  activeOnClick?: boolean;
+  fixedPoints?: number | null;
+  gap?: number;
+  ratingPlacement?: 'left' | 'right';
+  fontSize?: number;
+  error?: string | boolean;
+  errorSize?: 'sm' | 'lg';
+  hideValue?: boolean;
+  hideEmptyStars?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  max: 5,
+  increment: 1,
+  readonly: false,
+  roundStartRating: true,
+  starSize: 16,
+  activeOnClick: false,
+  fixedPoints: null,
+  gap: 4,
+  ratingPlacement: 'left',
+  fontSize: 14,
+  error: false,
+  errorSize: 'lg',
+  hideValue: false,
+  hideEmptyStars: false
+})
+
+const fillLevel = ref<number[]>([])
+const currentRating = ref<number>(modelValue.value)
+const selectedRating = ref<number>(modelValue.value)
+const ratingSelected = ref<boolean>(false)
+
+const gapStyle = computed(() => {
+  return {
+    gap: `${props.gap}px`
+  }
+})
+const roundedRating = computed(() => {
+  const inv = 1.0 / props.increment
+  return Math.min(props.max, Math.ceil(currentRating.value * inv) / inv)
+})
+const shouldRound = computed(() => ratingSelected.value || props.roundStartRating)
+
+const visibleStarsCount = computed(() => {
+  if (!props.hideEmptyStars) return props.max
+  return Math.min(props.max, Math.max(1, Math.ceil(currentRating.value)))
+})
+
+watch(modelValue, (e)=>{
+  currentRating.value = e
+  selectedRating.value = e
+  createStars()
+})
+
+const resetRating = () => {
+  if (!props.readonly) {
+    currentRating.value = selectedRating.value
+    modelValue.value = selectedRating.value
+    createStars(shouldRound.value)
+  }
+}
+
+const createStars = (round: boolean = true, applyFill: boolean = true) => {
+  currentRating.value = (round) ? roundedRating.value : currentRating.value
+
+  for (let i = 0; i < props.max; i++) {
+    let level = 0
+    if (i < currentRating.value) {
+      level = (currentRating.value - i > 1) ? 100 : (currentRating.value - i) * 100
+    }
+    if (applyFill) {
+      fillLevel.value[i] = Math.round(level)
+    }
+  }
+}
+
+const setRating = (event: StarMoveEvent, persist: boolean) => {
+  if (!props.readonly) {
+    const position = event.position / 100
+    currentRating.value = ((event.id + position) - 1).toFixed(2)
+    currentRating.value = (currentRating.value > props.max) ? props.max : currentRating.value
+    modelValue.value = roundedRating.value
+    if (persist) {
+      createStars(true, true)
+      selectedRating.value = (currentRating.value === selectedRating.value) ? 0 : currentRating.value
+      modelValue.value = selectedRating.value
+      ratingSelected.value = true
+
+    } else {
+      createStars(true, !props.activeOnClick)
+    }
+  }
+}
+
+createStars(shouldRound.value)
+</script>
+
+<template>
+  <div>
+    <div class="w-full flex items-center gap-2">
+      <span
+        v-if="ratingPlacement === 'left' && !hideValue"
+        class="text-quaternary mt-px"
+        :style="{fontSize: `${fontSize}px`}"
+      >
+        {{ modelValue }}
+      </span>
+      <div
+        :class="{'pointer-events-none': readonly}"
+        class="flex items-center"
+        :style="gapStyle"
+        @mouseleave="resetRating"
+      >
+        <star
+          v-for="n in visibleStarsCount"
+          :key="n"
+          :fill="fillLevel[n-1]"
+          :size="starSize"
+          :star-id="n"
+          @star-selected="setRating($event, true)"
+        />
+      </div>
+      <span
+        v-if="ratingPlacement === 'right' && !hideValue"
+        class="text-body-md text-quaternary mt-px"
+      >
+        {{ modelValue }}
+      </span>
+    </div>
+    <Transition name="slide-in">
+      <div
+        v-if="error && typeof error === 'string'"
+        class="mt-1"
+      >
+        <a-alert
+          :color="'red'"
+          :size="errorSize"
+          :icon-type="'triangle'"
+        >
+          <template #default>
+            <span
+              v-for="(err, index) in error.split(', ')"
+              :key="index"
+            >{{ err }}<br></span>
+          </template>
+        </a-alert>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.slide-in-enter-active {
+  z-index: 0;
+  opacity: 0;
+  transform: translateY(-50%);
+  transition: transform 0.5s;
+}
+
+.slide-in-enter-to {
+  z-index: auto;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-in-leave-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-in-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+</style>

package/components/elements/star-rating/types.ts

@@ -1,8 +1,8 @@
-export type SelectEvent = {
-    position: number;
-    id: number;
-}
-
-export type StarMoveEvent = SelectEvent & {
-    event: MouseEvent;
+export type SelectEvent = {
+    position: number;
+    id: number;
+}
+
+export type StarMoveEvent = SelectEvent & {
+    event: MouseEvent;
 }

package/components/elements/star-rating/ui/Star.vue

@@ -1,74 +1,74 @@
-<script setup lang="ts">
-import HalfStar from "#adata-ui/icons/star/star-half-filled.vue";
-import FillStar from "#adata-ui/icons/star/star-filled.vue";
-import Star from "#adata-ui/icons/star/star.vue";
-import type {SelectEvent, StarMoveEvent} from "./../types";
-
-interface Props {
-  fill: number;
-  size?: number;
-  starId: number;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 16,
-  fill: 0,
-})
-
-const emit = defineEmits<{
-  (e: 'star-mouse-move', event: StarMoveEvent): void,
-  (e: 'star-selected', event: SelectEvent): void
-}>()
-
-const star = computed(() => {
-  if (props.fill === 0) {
-    return Star
-  } else if (props.fill > 0 && props.fill <= 50) {
-    return HalfStar
-  } else {
-    return FillStar
-  }
-})
-
-const getPosition = (event: MouseEvent) => {
-  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)
-}
-
-const mouseMoving = (event: MouseEvent) => {
-  if (event.touchAction !== 'undefined') {
-    emit('star-mouse-move', {
-      event: event,
-      position: getPosition(event),
-      id: props.starId
-    })
-  }
-}
-
-const selected = (event: MouseEvent) => {
-  emit('star-selected', {
-    id: props.starId,
-    position: getPosition(event)
-  })
-}
-</script>
-
-<template>
-  <div>
-    <component
-      :is="star"
-      class="cursor-pointer"
-      :width="size"
-      :height="size"
-      @mousemove="mouseMoving"
-      @click="selected"
-    />
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import HalfStar from "#adata-ui/icons/star/star-half-filled.vue";
+import FillStar from "#adata-ui/icons/star/star-filled.vue";
+import Star from "#adata-ui/icons/star/star.vue";
+import type {SelectEvent, StarMoveEvent} from "./../types";
+
+interface Props {
+  fill: number;
+  size?: number;
+  starId: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 16,
+  fill: 0,
+})
+
+const emit = defineEmits<{
+  (e: 'star-mouse-move', event: StarMoveEvent): void,
+  (e: 'star-selected', event: SelectEvent): void
+}>()
+
+const star = computed(() => {
+  if (props.fill === 0) {
+    return Star
+  } else if (props.fill > 0 && props.fill <= 50) {
+    return HalfStar
+  } else {
+    return FillStar
+  }
+})
+
+const getPosition = (event: MouseEvent) => {
+  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)
+}
+
+const mouseMoving = (event: MouseEvent) => {
+  if (event.touchAction !== 'undefined') {
+    emit('star-mouse-move', {
+      event: event,
+      position: getPosition(event),
+      id: props.starId
+    })
+  }
+}
+
+const selected = (event: MouseEvent) => {
+  emit('star-selected', {
+    id: props.starId,
+    position: getPosition(event)
+  })
+}
+</script>
+
+<template>
+  <div>
+    <component
+      :is="star"
+      class="cursor-pointer"
+      :width="size"
+      :height="size"
+      @mousemove="mouseMoving"
+      @click="selected"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>