@onereach/ui-components 21.3.1 → 21.3.2

package/dist/esm/components/or-rating-v3/OrRating.vue.d.ts

@@ -23,8 +23,10 @@ declare const _default: import("vue").DefineComponent<{
     root: import("vue").Ref<HTMLElement | undefined>;
     rootStyles: import("vue").ComputedRef<string[]>;
     starStyles: import("vue").ComputedRef<string[]>;
+    starSize: import("vue").ComputedRef<(index: number) => "inherit" | "xl" | "l">;
     model: import("@onereach/ui-components-common/hooks").UseProxyModelValueReturn<number>;
     draft: import("vue").Ref<number>;
+    isMobile: import("vue").ComputedRef<boolean>;
     hoverIndex: boolean[];
     onMouseEnter: (event: MouseEvent, index: number) => void;
     onMouseMove: (event: MouseEvent, index: number) => void;

package/dist/esm/components/or-rating-v3/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, inject, toRef, watch, reactive, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createVNode } from 'vue';
-import { r as re } from '../OrAutocompleteV3-961163d0.js';
+import { n as ne, r as re } from '../OrAutocompleteV3-961163d0.js';
 import { OrIconV3 as script$1 } from '../or-icon-v3/index.js';
 import '@vueuse/core';
 import '@onereach/styles/screens.json';
@@ -41,7 +41,7 @@ const RatingVariants = {
   'layout-row'],
   [RatingVariant.Fitted]: [
   // Layout
-  'layout-row justify-between']
+  'layout-row md:justify-between']
 };
 const RatingStar = [
 // Layout
@@ -49,11 +49,14 @@ const RatingStar = [
 // Interactivity
 'interactivity-click',
 // Box
-'w-[28px] md:w-[24px]', 'h-[28px] md:h-[24px]',
+'w-[32px] md:w-[24px]', 'h-[32px] md:h-[24px]',
 // Theme (activated)
 'activated:text-warning-hover', 'dark:activated:text-warning-hover-dark',
 // Theme (disabled)
 'disabled:text-disabled', 'dark:disabled:text-disabled-dark'];
+const RatingStarMobile = [
+// Typography;
+'text-[32px]'];
 
 const RATING_LENGTH = Symbol();
 var script = defineComponent({
@@ -88,8 +91,11 @@ var script = defineComponent({
   setup(props, context) {
     // Refs & Styles
     const root = ref();
+    const {
+      isMobile
+    } = ne();
     const rootStyles = computed(() => ['or-rating-v3', ...Rating, ...RatingVariants[props.variant]]);
-    const starStyles = computed(() => [...RatingStar, ...(props.readonly ? ['interactivity-none'] : [])]);
+    const starStyles = computed(() => [...RatingStar, ...(props.readonly ? ['interactivity-none'] : []), ...(isMobile.value ? RatingStarMobile : [])]);
     // Options
     const length = inject(RATING_LENGTH, 5);
     // State
@@ -103,6 +109,17 @@ var script = defineComponent({
       immediate: true
     });
     const hoverIndex = reactive(Array(length).fill(false));
+    const starSize = computed(() => {
+      return index => {
+        if (props.variant === 'fitted' || isMobile.value) {
+          return 'inherit';
+        }
+        if (hoverIndex[index]) {
+          return 'xl';
+        }
+        return 'l';
+      };
+    });
     // Handlers
     function onMouseEnter(event, index) {
       hoverIndex[index] = true;
@@ -122,8 +139,10 @@ var script = defineComponent({
       root,
       rootStyles,
       starStyles,
+      starSize,
       model,
       draft,
+      isMobile,
       hoverIndex,
       onMouseEnter,
       onMouseMove,
@@ -158,7 +177,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [createVNode(_component_OrIcon, {
       icon: _ctx.draft - value + 1 === 0.5 ? 'star_half' : 'star',
       variant: value <= _ctx.draft ? 'filled' : 'outlined',
-      size: _ctx.variant === 'fitted' ? 'inherit' : _ctx.hoverIndex[value - 1] ? 'xl' : 'l'
+      size: _ctx.starSize(value - 1)
     }, null, 8 /* PROPS */, ["icon", "variant", "size"])], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_2);
   }), 128 /* KEYED_FRAGMENT */))], 10 /* CLASS, PROPS */, _hoisted_1);
 }

package/dist/esm/components/or-rating-v3/styles.d.ts

@@ -2,3 +2,4 @@ import { RatingVariant } from './types';
 export declare const Rating: string[];
 export declare const RatingVariants: Record<RatingVariant, string[]>;
 export declare const RatingStar: string[];
+export declare const RatingStarMobile: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "21.3.1",
+  "version": "21.3.2",
   "description": "Vue components library for v3",
   "license": "Apache-2.0",
   "sideEffects": false,
@@ -45,8 +45,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^21.3.1",
-    "@onereach/ui-components-common": "^21.3.1",
+    "@onereach/styles": "^21.3.2",
+    "@onereach/ui-components-common": "^21.3.2",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -103,5 +103,5 @@
     "access": "public"
   },
   "npmUnpacked": "4.15.2",
-  "gitHead": "0ecc914fab53967c7357b45dc04eff8814db4c7a"
+  "gitHead": "fa5876d40691fa509d8575963492da0c2cce65d0"
 }