@onereach/ui-components 18.0.1 → 18.0.3

package/dist/bundled/utils/functions/dom.js

@@ -1,6 +1,6 @@
-import { g as get_1 } from '../../components/OrRadio-68f9f3a2.js';
-import { _ as _baseGetTag, b as isObjectLike_1 } from '../../components/OrDateTimePicker-59344b4e.js';
-import { j as _getPrototype } from '../../components/OrList-30e43559.js';
+import { g as get_1 } from '../../components/OrRadio-3b424a55.js';
+import { _ as _baseGetTag, b as isObjectLike_1 } from '../../components/OrDateTimePicker-90765015.js';
+import { j as _getPrototype } from '../../components/OrList-4133f1c5.js';
 
 var baseGetTag = _baseGetTag,
   getPrototype = _getPrototype,

package/dist/esm/components/index.js

@@ -233,6 +233,6 @@ import './or-select-v3/partials/or-select-control-input/index.js';
 import './or-select-v3/partials/or-select-placeholder/index.js';
 import './or-select-v3/partials/or-select-single-control/index.js';
 import 'lodash/range';
-import '../styles-5034a773.js';
+import '../styles-79a4c2cb.js';
 import '../useOverflow-5793f499.js';
 import 'lodash/isNil';

package/dist/esm/components/or-data-grid-v3/index.js

@@ -46,7 +46,7 @@ import '../or-error-v3/index.js';
 import '../or-hint-v3/index.js';
 import '../../style-inject.es-87955792.js';
 import '../../px-to-rem-a21cdf39.js';
-import '../../styles-5034a773.js';
+import '../../styles-79a4c2cb.js';
 import 'lodash/range';
 import '../or-date-picker-v3/index.js';
 import '../../directives/index.js';

package/dist/esm/components/or-menu-item-v3/index.js

@@ -37,7 +37,7 @@ const MenuItem = [
 // Theme
 'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
 // Theme (selected)
-'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark',
+'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:bg-primary-opacity-0-08', 'dark:selected:bg-primary-opacity-0-08-dark',
 // Theme (hover)
 'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
 // Theme (active)

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

@@ -3,5 +3,5 @@ export { OrSkeletonRectV3 } from './or-skeleton-rect-v3/index.js';
 export { OrSkeletonTextV3 } from './or-skeleton-text-v3/index.js';
 import 'vue';
 import '../../px-to-rem-a21cdf39.js';
-import '../../styles-5034a773.js';
+import '../../styles-79a4c2cb.js';
 import 'lodash/range';

package/dist/esm/components/or-skeleton-v3/or-skeleton-circle-v3/index.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle } from 'vue';
 import { p as pxToRem } from '../../../px-to-rem-a21cdf39.js';
-import { a as SkeletonRoot, e as SkeletonCircle, c as SkeletonAnimated } from '../../../styles-5034a773.js';
+import { a as SkeletonRoot, d as SkeletonCircle, c as SkeletonAnimated } from '../../../styles-79a4c2cb.js';
 
 var script = defineComponent({
   name: 'OrSkeletonCircle',

package/dist/esm/components/or-skeleton-v3/or-skeleton-rect-v3/index.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle } from 'vue';
 import { p as pxToRem } from '../../../px-to-rem-a21cdf39.js';
-import { a as SkeletonRoot, d as SkeletonRect, c as SkeletonAnimated } from '../../../styles-5034a773.js';
+import { a as SkeletonRoot, e as SkeletonRect, c as SkeletonAnimated } from '../../../styles-79a4c2cb.js';
 
 var script = defineComponent({
   name: 'OrSkeletonRect',

package/dist/esm/components/or-skeleton-v3/or-skeleton-text-v3/index.js

@@ -1,7 +1,7 @@
 import range from 'lodash/range';
 import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderList } from 'vue';
 import { p as pxToRem } from '../../../px-to-rem-a21cdf39.js';
-import { S as SkeletonTextContainerRoot, a as SkeletonRoot, b as SkeletonText, c as SkeletonAnimated } from '../../../styles-5034a773.js';
+import { S as SkeletonTextContainerRoot, a as SkeletonRoot, b as SkeletonText, c as SkeletonAnimated } from '../../../styles-79a4c2cb.js';
 
 var script = defineComponent({
   name: 'OrSkeletonText',

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

@@ -1,9 +1,9 @@
 import { defineComponent, ref, computed, watch, unref, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, createBlock, withCtx, createVNode, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, Fragment, renderList } from 'vue';
-import { useToggle } from '@vueuse/core';
 import { OrButtonV3 as script$2 } from '../or-button-v3/index.js';
 import { OrIconV3 as script$3 } from '../or-icon-v3/index.js';
 import '../../constants-57e8b5da.js';
 import '../or-loader-v3/index.js';
+import '@vueuse/core';
 
 const TreeNodeRoot = [];
 const TreeNodeItemRoot = [
@@ -13,12 +13,12 @@ const TreeNodeItemRoot = [
 'hover:bg-primary-opacity-0-08', 'dark:hover:bg-primary-opacity-0-08-dark', 'selected:bg-primary-opacity-0-16', 'dark:selected:bg-primary-opacity-0-16-dark', 'selected:hover:bg-primary-opacity-0-16', 'dark:selected:hover:bg-primary-opacity-0-16-dark'];
 const TreeNodeItemRootParentSelected = [
 // Theme
-'bg-primary-opacity-0-08', 'bg-primary-opacity-0-08-dark', 'hover:bg-primary-opacity-0-16', 'dark:hover:bg-primary-opacity-0-16-dark'];
+'bg-primary-opacity-0-08', 'dark:bg-primary-opacity-0-08-dark', 'hover:bg-primary-opacity-0-16', 'dark:hover:bg-primary-opacity-0-16-dark'];
 const TreeNodeDragIndicator = [
 // Layout
 'absolute h-[2px] w-full left-[0px]',
 // Theme
-'bg-primary',
+'bg-primary-hover', 'dark:bg-primary-hover-dark',
 // Interaction
 'pointer-events-none'];
 const TreeNodeDragIndicatorPosition = {
@@ -29,7 +29,7 @@ const TreeNodeDragIndicatorPosition = {
   // Layout
   'top-[-1px]', 'left-[0px]', 'w-full', '!h-[calc(100%+2px)]',
   // Theme
-  'bg-transparent', 'border-1', 'border-primary-hover', 'dark:border-primary-hover-dark'],
+  'bg-transparent', 'dark:bg-transparent', 'border-1', 'border-primary-hover', 'dark:border-primary-hover-dark'],
   bottom: [
   // Layout
   'bottom-[-1px]']
@@ -38,7 +38,7 @@ const ChildrenDragoverStyles = [
 // Layout
 'top-[-1px]', 'left-[0px]', 'w-full', '!h-[calc(100%+2px)]',
 // Theme
-'bg-transparent', 'border-1', 'border-primary-hover', 'dark:border-primary-hover-dark'];
+'bg-transparent', 'dark:bg-transparent', 'border-1', 'border-primary-hover', 'dark:border-primary-hover-dark'];
 
 var TreeNodeDropPosition;
 (function (TreeNodeDropPosition) {
@@ -121,7 +121,10 @@ var script$1 = defineComponent({
     const isDrag = ref(false);
     const dragOverPosition = ref('top');
     const hasChildren = computed(() => !!props.node.children && props.node.children.length > 0);
-    const [isOpen, setIsOpen] = useToggle(props.expanded);
+    const isOpen = ref(props.expanded);
+    const setIsOpen = value => {
+      isOpen.value = value;
+    };
     const hasCollapseTrigger = computed(() => props.node.collapsible || hasChildren.value);
     const isLeaf = computed(() => !hasChildren.value);
     const canDrag = computed(() => props.draggable !== false && props.node.draggable !== false);

package/dist/esm/components/or-tree-v3/partials/or-tree-node/OrTreeNode.vue.d.ts

@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
     nodeStyles: import("vue").ComputedRef<string[]>;
     dragIndicatorStyles: import("vue").ComputedRef<string[]>;
     childrenTreeNodes: import("vue").Ref<any[]>;
-    setIsOpen: (value?: boolean | undefined) => boolean;
+    setIsOpen: (value: boolean) => void;
     nodeRoot: import("vue").Ref<HTMLElement | undefined>;
     isDrag: import("vue").Ref<boolean>;
     canDrag: import("vue").ComputedRef<boolean>;

package/dist/esm/index.js

@@ -235,6 +235,6 @@ import './components/or-select-v3/partials/or-select-control-input/index.js';
 import './components/or-select-v3/partials/or-select-placeholder/index.js';
 import './components/or-select-v3/partials/or-select-single-control/index.js';
 import 'lodash/range';
-import './styles-5034a773.js';
+import './styles-79a4c2cb.js';
 import 'lodash/isNil';
 import 'lodash/isElement';

package/dist/esm/{styles-5034a773.js → styles-79a4c2cb.js}

@@ -31,4 +31,4 @@ const SkeletonAnimated = [
 // Animation
 'animate-skeleton-loader'];
 
-export { SkeletonTextContainerRoot as S, SkeletonRoot as a, SkeletonText as b, SkeletonAnimated as c, SkeletonRect as d, SkeletonCircle as e };
+export { SkeletonTextContainerRoot as S, SkeletonRoot as a, SkeletonText as b, SkeletonAnimated as c, SkeletonCircle as d, SkeletonRect as e };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "18.0.1",
+  "version": "18.0.3",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v3",
   "sideEffects": false,
@@ -33,7 +33,7 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^18.0.1",
+    "@onereach/styles": "^18.0.3",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -141,5 +141,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "c2c95e278a512498b26cdf7a02eae77fc6f09dbf"
+  "gitHead": "ada21e6c9eebe3b74633dd9be1988a4528857f5d"
 }

package/src/components/or-menu-item-v3/styles.ts

@@ -28,6 +28,9 @@ export const MenuItem: string[] = [
   'selected:theme-foreground-default',
   'dark:selected:theme-foreground-default-dark',
 
+  'selected:bg-primary-opacity-0-08',
+  'dark:selected:bg-primary-opacity-0-08-dark',
+
   // Theme (hover)
   'hover:md:theme-foreground-default',
   'dark:hover:md:theme-foreground-default-dark',

package/src/components/or-tree-v3/partials/or-tree-node/OrTreeNode.vue

@@ -72,12 +72,11 @@
   </div>
 </template>
 <script lang="ts">
-import { useToggle } from '@vueuse/core';
 import { PropType, computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
 import { TreeNode, TreeNodeDropPosition, TreeNodeType } from '../../types';
-import { ChildrenDragoverStyles, TreeNodeDragIndicator, TreeNodeDragIndicatorPosition, TreeNodeItemRoot, TreeNodeItemRootParentSelected, TreeNodeRoot } from './styles';
+import * as Styles from './styles';
 import { applyPadding, getDropOffset, dataTransferCache } from './utils';
 
 export default defineComponent({
@@ -135,7 +134,11 @@ export default defineComponent({
     const isDrag = ref(false);
     const dragOverPosition = ref<`${TreeNodeDropPosition}`>('top');
     const hasChildren = computed(() => !!props.node.children && props.node.children.length > 0);
-    const [isOpen, setIsOpen] = useToggle(props.expanded);
+    const isOpen = ref(props.expanded);
+
+    const setIsOpen = (value: boolean) => {
+      isOpen.value = value;
+    };
     const hasCollapseTrigger = computed(() => props.node.collapsible || hasChildren.value);
     const isLeaf = computed(() => !hasChildren.value);
     const canDrag = computed(() => props.draggable !== false && props.node.draggable !== false);
@@ -237,18 +240,18 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-tree-node-v3',
-      ...TreeNodeRoot,
+      ...Styles.TreeNodeRoot,
     ]);
 
     const nodeStyles = computed(() => [
-      ...TreeNodeItemRoot,
-      ...(props.parentSelected ? TreeNodeItemRootParentSelected : []),
+      ...Styles.TreeNodeItemRoot,
+      ...(props.parentSelected ? Styles.TreeNodeItemRootParentSelected : []),
     ]);
 
     const dragIndicatorStyles = computed(() => [
-      ...TreeNodeDragIndicator,
-      ...TreeNodeDragIndicatorPosition[dragOverPosition.value],
-      ...(hasDragoverChildren.value ? ChildrenDragoverStyles : []),
+      ...Styles.TreeNodeDragIndicator,
+      ...Styles.TreeNodeDragIndicatorPosition[dragOverPosition.value],
+      ...(hasDragoverChildren.value ? Styles.ChildrenDragoverStyles : []),
     ]);
 
     return {

package/src/components/or-tree-v3/partials/or-tree-node/styles.ts

@@ -23,7 +23,7 @@ export const TreeNodeItemRoot = [
 export const TreeNodeItemRootParentSelected = [
   // Theme
   'bg-primary-opacity-0-08',
-  'bg-primary-opacity-0-08-dark',
+  'dark:bg-primary-opacity-0-08-dark',
 
   'hover:bg-primary-opacity-0-16',
   'dark:hover:bg-primary-opacity-0-16-dark',
@@ -33,7 +33,8 @@ export const TreeNodeDragIndicator = [
   'absolute h-[2px] w-full left-[0px]',
 
   // Theme
-  'bg-primary',
+  'bg-primary-hover',
+  'dark:bg-primary-hover-dark',
 
   // Interaction
   'pointer-events-none',
@@ -53,6 +54,8 @@ export const TreeNodeDragIndicatorPosition: Record<TreeNodeDropPosition, string[
 
     // Theme
     'bg-transparent',
+    'dark:bg-transparent',
+
     'border-1',
     'border-primary-hover',
     'dark:border-primary-hover-dark',
@@ -72,6 +75,8 @@ export const ChildrenDragoverStyles: string[] = [
 
   // Theme
   'bg-transparent',
+  'dark:bg-transparent',
+
   'border-1',
   'border-primary-hover',
   'dark:border-primary-hover-dark',