@onereach/ui-components 4.9.1-beta.2919.0 → 4.9.1-beta.2922.0

package/dist/bundled/v2/components/OrTreeV3/OrTree.js

@@ -15,6 +15,13 @@ import '../OrIconV3/styles.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
 
+const TreeNodeRoot = [];
+const TreeNodeItemRoot = [
+// Layout
+'layout-row', 'py-xs', '!items-start',
+// Theme
+'hover:bg-primary-opacity-0-08', 'dark:hover:bg-primary-opacity-0-08-dark', 'selected:bg-primary-opacity-0-08', 'dark:selected:bg-primary-opacity-0-08-dark', 'selected:hover:bg-primary-opacity-0-16', 'dark:selected:hover:bg-primary-opacity-0-16-dark'];
+
 var script$1 = defineComponent({
   name: 'OrTreeNode',
   components: {
@@ -30,6 +37,10 @@ var script$1 = defineComponent({
       type: Boolean,
       default: false
     },
+    selected: {
+      type: Boolean,
+      default: undefined
+    },
     expanded: {
       type: Boolean,
       default: true
@@ -43,7 +54,7 @@ var script$1 = defineComponent({
       default: null
     }
   },
-  emits: ['drop', 'dragstart'],
+  emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
   setup(props, _ref) {
     let {
       emit
@@ -51,16 +62,16 @@ var script$1 = defineComponent({
     // Refs
     const root = ref(null);
     const nodeRoot = ref(null);
-    const hover = ref(false);
     const dragOver = ref(false);
     const drag = ref(false);
     // State
     const hasChildren = computed(() => !!props.node.children && props.node.children.length > 0);
     const [isOpen, setIsOpen] = useToggle(props.expanded);
+    const hasCollapseTrigger = computed(() => props.collapsible && hasChildren.value);
     // Methods
-    const applyPadding = value => {
+    const applyPadding = depth => {
       const rootElement = unref(nodeRoot);
-      const padding = value * 20 - (props.collapsible ? 16 : 0);
+      const padding = depth * 20 - (hasCollapseTrigger.value ? 20 : 0);
       Object.assign(rootElement.style, {
         paddingLeft: `${padding}px`
       });
@@ -94,9 +105,18 @@ var script$1 = defineComponent({
       (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('node-key', props.node.key);
       emit('dragstart', props.node.key);
     };
+    const handleCollapse = () => {
+      if (isOpen.value) {
+        setIsOpen(false);
+        emit('collapse', props.node.key);
+      } else {
+        setIsOpen(true);
+        emit('expand', props.node.key);
+      }
+    };
     // Styles
-    const rootStyles = computed(() => ['or-tree-node-v3']);
-    const nodeStyles = computed(() => ['layout-row', 'py-xs', '!items-start', ...[hover.value ? ['bg-primary-opacity-0-08', 'dark:bg-primary-opacity-0-08-dark'] : []], ...[dragOver.value && !drag.value ? ['border-t-2', 'border-primary'] : []]]);
+    const rootStyles = computed(() => ['or-tree-node-v3', ...TreeNodeRoot]);
+    const nodeStyles = computed(() => [...TreeNodeItemRoot, ...[dragOver.value && !drag.value ? ['border-t-2', 'border-primary'] : []]]);
     return {
       root,
       hasChildren,
@@ -104,10 +124,11 @@ var script$1 = defineComponent({
       rootStyles,
       setIsOpen,
       nodeRoot,
-      hover,
       drag,
       handleDragStart,
       handleDrop,
+      handleCollapse,
+      hasCollapseTrigger,
       dragOver,
       nodeStyles
     };
@@ -129,15 +150,10 @@ var __vue_render__$1 = function () {
     ref: "nodeRoot",
     class: _vm.nodeStyles,
     attrs: {
-      "draggable": _vm.draggable ? true : undefined
+      "draggable": _vm.draggable ? true : undefined,
+      "selected": _vm.selected ? true : undefined
     },
     on: {
-      "mouseover": function ($event) {
-        _vm.hover = true;
-      },
-      "mouseleave": function ($event) {
-        _vm.hover = false;
-      },
       "dragend": function ($event) {
         _vm.drag = false;
       },
@@ -155,15 +171,25 @@ var __vue_render__$1 = function () {
       "dragleave": function ($event) {
         _vm.dragOver = false;
       },
-      "drop": _vm.handleDrop
+      "drop": _vm.handleDrop,
+      "click": function ($event) {
+        return _vm.$emit('click', _vm.node.key);
+      },
+      "contextmenu": function ($event) {
+        return _vm.$emit('contextmenu', {
+          $event: $event,
+          nodeKey: _vm.node.key
+        });
+      }
     }
-  }, [_vm.hasChildren && _vm.collapsible ? [_c('OrButton', {
+  }, [_vm.hasCollapseTrigger ? [_c('OrButton', {
     attrs: {
       "variant": "link"
     },
     on: {
-      "click": function () {
-        return _vm.setIsOpen(!_vm.isOpen);
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.handleCollapse.apply(null, arguments);
       }
     }
   }, [_c('OrIcon', {
@@ -183,6 +209,7 @@ var __vue_render__$1 = function () {
         "node": child,
         "collapsible": _vm.collapsible || child.collapsible,
         "depth": _vm.depth + 1,
+        "selected": _vm.selected || child.selected,
         "draggable": !child.hasOwnProperty('draggable') || child.draggable === null ? _vm.draggable : child.draggable
       },
       on: {
@@ -191,6 +218,18 @@ var __vue_render__$1 = function () {
         },
         "dragstart": function ($event) {
           return _vm.$emit('dragstart', $event);
+        },
+        "click": function ($event) {
+          return _vm.$emit('click', $event);
+        },
+        "expand": function ($event) {
+          return _vm.$emit('expand', $event);
+        },
+        "collapse": function ($event) {
+          return _vm.$emit('collapse', $event);
+        },
+        "contextmenu": function ($event) {
+          return _vm.$emit('contextmenu', $event);
         }
       },
       scopedSlots: _vm._u([{
@@ -252,7 +291,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['drop', 'dragstart'],
+  emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
   setup() {
     // Refs
     const root = ref(null);
@@ -282,6 +321,8 @@ var __vue_render__ = function () {
       attrs: {
         "node": item,
         "collapsible": _vm.collapsible || item.collapsible,
+        "expanded": item.expanded,
+        "selected": item.selected,
         "draggable": !item.hasOwnProperty('draggable') || item.draggable === null ? _vm.draggable : item.draggable
       },
       on: {
@@ -290,6 +331,18 @@ var __vue_render__ = function () {
         },
         "dragstart": function ($event) {
           return _vm.$emit('dragstart', $event);
+        },
+        "click": function ($event) {
+          return _vm.$emit('click', $event);
+        },
+        "collapse": function ($event) {
+          return _vm.$emit('collapse', $event);
+        },
+        "expand": function ($event) {
+          return _vm.$emit('expand', $event);
+        },
+        "contextmenu": function ($event) {
+          return _vm.$emit('contextmenu', $event);
         }
       },
       scopedSlots: _vm._u([{

package/dist/bundled/v2/components/OrTreeV3/types.d.ts

@@ -3,6 +3,7 @@ export type TreeNode = {
     children?: TreeNode[];
     collapsible?: boolean;
     expanded?: boolean;
+    selected?: boolean;
     draggable?: boolean;
     [key: string]: any;
 };