first commit

components/ui-components/ratting/BasicRatting.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating = ref(3);
+</script>
+<template>
+    <div>
+        <v-rating v-model="rating" density="compact" color="warning"></v-rating>
+    </div>
+</template>

components/ui-components/ratting/ClearableRatting.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating3 = ref(3);
+</script>
+<template>
+    <div >
+        <v-rating v-model="rating3" clearable density="compact" color="warning"></v-rating>
+    </div>
+</template>

components/ui-components/ratting/HalfRatting.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating2 = ref(2.5);
+</script>
+<template>
+    <div>
+    <v-rating v-model="rating2"  half-increments density="compact" color="warning"></v-rating>
+    </div>
+</template>

components/ui-components/ratting/HoverRatting.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating5 = ref(3);
+</script>
+<template>
+    <div>
+        <v-rating v-model="rating5" color="warning" hover density="compact"></v-rating>
+    </div>
+</template>

components/ui-components/ratting/IconsRatting.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating7 = ref(3.5);
+</script>
+<template>
+    <div >
+        <v-rating
+            class="d-block mb-4"
+            v-model="rating7"
+            color="error"
+            empty-icon="mdi-heart-outline"
+            full-icon="mdi-heart"
+            half-icon="mdi-heart-half"
+            half-increments density="compact"
+            hover
+        ></v-rating>
+        <v-rating
+            class="d-block mb-4"
+            v-model="rating7"
+            color="primary"
+            empty-icon="mdi-circle-outline"
+            full-icon="mdi-circle"
+            half-icon="mdi-circle-half"
+            half-increments density="compact"
+            hover
+        ></v-rating>
+    </div>
+</template>

components/ui-components/ratting/LabelRatting.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating6 = ref(3);
+const rating7 = ref(2);
+</script>
+<template>
+    <div >
+        <v-rating
+            v-model="rating6"
+            :item-labels="['sad', '', '', '', 'happy']"
+            item-label-position="top"
+            color="warning" density="compact"
+            hover
+        ></v-rating>
+        <v-rating class="mb-0 d-block"
+            v-model="rating6"
+            color="warning" density="compact"
+            hover
+        ></v-rating>
+
+    </div>
+</template>

components/ui-components/ratting/LengthRatting.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating = ref(3);
+</script>
+<template>
+    <div>
+        <v-rating v-model="rating" length="10" density="compact" color="warning"></v-rating>
+    </div>
+</template>

components/ui-components/ratting/ReadOnlyRatting.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating3 = ref(2);
+</script>
+<template>
+    <div >
+        <v-rating v-model="rating3" readonly   density="compact" color="warning"></v-rating>
+    </div>
+</template>

components/ui-components/ratting/SizeRatting.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <v-rating class="d-block mb-2" color="warning" density="compact" value="3" size="x-small"></v-rating>
+        <v-rating class="d-block ml-n1" color="warning" density="compact" value="3" size="small"></v-rating>
+        <v-rating class="d-block ml-n2" color="warning" density="compact" value="3" size="large"></v-rating>
+    </div>
+</template>