@onereach/ui-components 8.13.0-beta.3770.0 → 8.13.0

package/dist/esm/v3/index.js

@@ -91,6 +91,7 @@ export { s as OrRadioGroupV3 } from './OrRadioGroup-b4b6d364.js';
 export { s as OrRadioV3 } from './OrRadio-50b0ead5.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-8edcdad1.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-a0ec670e.js';
+export { s as OrRatingV3 } from './OrRating-fdb024b7.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-60f83f9a.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-a1f04ce6.js';
 export { s as OrSearch } from './OrSearch-2800e9bf.js';
@@ -119,7 +120,7 @@ export { s as OrTabV3 } from './OrTab-45853fd2.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-b076c7e7.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from './OrTagInput-1290510b.js';
+export { s as OrTagInputV3 } from './OrTagInput-4a9158c9.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-ff483e6b.js';
 export { s as OrTagsV3, T as TagsOverflow } from './OrTags-942e528e.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.13.0-beta.3770.0",
+  "version": "8.13.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^6.5.0",
+    "@onereach/styles": "^6.6.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -176,5 +176,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "3e1145e0603cef516dbe83442131c68cb121146a"
 }

package/src/components/index.ts

@@ -77,6 +77,7 @@ export * from './or-radio-group';
 export * from './or-radio-group-v3';
 export * from './or-radio-v3';
 export * from './or-range-slider-v3';
+export * from './or-rating-v3';
 export * from './or-resizeable-panel-v3';
 export * from './or-rich-text-editor-v3';
 export * from './or-search';

package/src/components/or-rating-v3/OrRating.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+    :disabled="disabled"
+  >
+    <div
+      v-for="value of length"
+      ref="stars"
+      :key="value"
+      :class="starStyles"
+      :activated="value <= Math.ceil(proxyModelValue)"
+      :disabled="disabled"
+      @mouseenter="onMouseEnter($event, value - 1)"
+      @mousemove="onMouseMove($event, value - 1)"
+      @mouseleave="onMouseLeave($event, value - 1)"
+      @click="proxyModelValue = draftModelValue"
+    >
+      <OrIcon
+        :icon="draftModelValue - value + 1 === 0.5 ? 'star_half' : 'star'"
+        :variant="value <= draftModelValue ? 'filled' : 'outlined'"
+        :size="hoverIndex[value - 1] ? 'xl' : 'l'"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, reactive, ref, toRef, watch } from 'vue-demi';
+import { useProxyModelValue } from '../../hooks';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { Rating, RatingStar } from './styles';
+
+export const RATING_LENGTH = Symbol();
+
+export default defineComponent({
+  components: {
+    OrIcon,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+  ],
+
+  expose: [
+    'root',
+  ],
+
+  setup(props, context) {
+    // Options
+    const length = inject(RATING_LENGTH, 5);
+
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-rating-v3',
+      ...Rating,
+    ]);
+
+    const starStyles = computed(() => [
+      ...RatingStar,
+    ]);
+
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
+
+    watch(proxyModelValue, (value) => {
+      draftModelValue.value = value;
+    });
+
+    const hoverIndex = reactive(Array<boolean>(length).fill(false));
+
+    // Handlers
+    function onMouseEnter(event: MouseEvent, index: number): void {
+      hoverIndex[index] = true;
+    }
+
+    function onMouseMove(event: MouseEvent, index: number): void {
+      const { width } = (event.currentTarget as Element).getBoundingClientRect();
+
+      draftModelValue.value = Math.ceil((index - (width - event.offsetX) / width + 1) * 2) / 2;
+    }
+
+    function onMouseLeave(event: MouseEvent, index: number): void {
+      hoverIndex[index] = false;
+
+      draftModelValue.value = proxyModelValue.value;
+    }
+
+    return {
+      length,
+
+      root,
+
+      rootStyles,
+      starStyles,
+
+      proxyModelValue,
+      draftModelValue,
+
+      hoverIndex,
+
+      onMouseEnter,
+      onMouseMove,
+      onMouseLeave,
+    };
+  },
+});
+</script>

package/src/components/or-rating-v3/index.ts

@@ -0,0 +1 @@
+export { default as OrRatingV3 } from './OrRating.vue';

package/src/components/or-rating-v3/styles.ts

@@ -0,0 +1,28 @@
+export const Rating: string[] = [
+  // Layout
+  'layout-row',
+
+  // Theme
+  'theme-foreground-disabled',
+  'dark:theme-foreground-disabled-dark',
+];
+
+export const RatingStar: string[] = [
+  // Layout
+  'layout-row justify-center',
+
+  // Interactivity
+  'interactivity-click',
+
+  // Box
+  'w-[28px] md:w-[24px]',
+  'h-[28px] 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',
+];

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -202,11 +202,6 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-
-    saveDraftValueOnClickOutside: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -234,7 +229,7 @@ export default defineComponent({
     const tags = ref<InstanceType<typeof OrTags>>();
 
     // Props
-    const { modelValue, overflow, placeholder, disabled, readonly, saveDraftValueOnClickOutside } = toRefs(props);
+    const { modelValue, overflow, placeholder, disabled, readonly } = toRefs(props);
 
     // Styles
     const rootStyles = computed(() => [
@@ -327,7 +322,6 @@ export default defineComponent({
     // Effects
     onClickOutside((inputBox as MaybeElementRef), () => {
       if (activated.value === false || (tags.value?.overflowPopover as any)?.state === 'open') return;
-      if (saveDraftValueOnClickOutside.value) add();
       deactivate();
     });