@onereach/ui-components 8.4.1-beta.3657.0 → 8.5.0

package/dist/bundled/v2/components/OrTooltipV3-8df03b27.js

@@ -0,0 +1,182 @@
+import { P as PopoverPlacement, _ as __vue_component__$1 } from './OrPopoverV3-3af55d28.js';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { t as usePopoverState } from './OrBottomSheetV3-022aa5f7.js';
+import { n as normalizeComponent } from './OrAvatar-7d519020.js';
+
+const Tooltip = [
+// Layout
+'layout-inline-row'];
+const TooltipBody = [
+// Layout
+'layout-inline-column',
+// Shape
+'rounded-sm',
+// Spacing
+'mx-sm', 'my-sm', 'px-sm', 'py-xs',
+// Typography
+'typography-caption-regular',
+// Theme
+'bg-inverse-surface', 'dark:bg-inverse-surface-dark', 'text-inverse-on-surface', 'dark:text-inverse-on-surface-dark'];
+const TooltipBodyPlacements = {
+  [PopoverPlacement.Top]: [],
+  [PopoverPlacement.TopStart]: [
+  // Spacing
+  'ml-none'],
+  [PopoverPlacement.TopEnd]: [
+  // Spacing
+  'mr-none'],
+  [PopoverPlacement.Bottom]: [],
+  [PopoverPlacement.BottomStart]: [
+  // Spacing
+  'ml-none'],
+  [PopoverPlacement.BottomEnd]: [
+  // Spacing
+  'mr-none'],
+  [PopoverPlacement.Left]: [],
+  [PopoverPlacement.LeftStart]: [
+  // Spacing
+  'mt-none'],
+  [PopoverPlacement.LeftEnd]: [
+  // Spacing
+  'mb-none'],
+  [PopoverPlacement.Right]: [],
+  [PopoverPlacement.RightStart]: [
+  // Spacing
+  'mt-none'],
+  [PopoverPlacement.RightEnd]: [
+  // Spacing
+  'mb-none']
+};
+
+var script = defineComponent({
+  name: 'OrTooltip',
+  components: {
+    OrPopover: __vue_component__$1
+  },
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @deprecated
+     */
+    text: {
+      type: String,
+      default: undefined,
+      validator: () => {
+        console.warn('OrTooltip: Property \'text\' is deprecated. Use \'content\' instead.');
+        return true;
+      }
+    },
+    content: {
+      type: String,
+      default: undefined
+    },
+    placement: {
+      type: String,
+      default: PopoverPlacement.Bottom
+    },
+    offset: {
+      type: [Number, Object, Function],
+      default: undefined
+    },
+    externalControl: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'open', 'close', 'toggle'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-tooltip-v3', ...Tooltip]);
+    const popoverStyles = computed(() => ['or-tooltip-popover-v3']);
+    const bodyStyles = computed(() => [...TooltipBody, ...TooltipBodyPlacements[props.placement]]);
+    // State
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit, {
+      debounce: 250
+    });
+    return {
+      root,
+      rootStyles,
+      popoverStyles,
+      bodyStyles,
+      state,
+      open,
+      close,
+      toggle
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    on: {
+      "mouseenter": function ($event) {
+        !_vm.externalControl && _vm.open();
+      },
+      "mouseleave": function ($event) {
+        !_vm.externalControl && _vm.close();
+      }
+    }
+  }, [_vm._t("default"), _vm._v(" "), _vm.$slots.content || _vm.content || _vm.text ? [_c('OrPopover', {
+    class: _vm.popoverStyles,
+    attrs: {
+      "custom-styles": _vm.popoverStyles,
+      "is-open": _vm.state === 'open',
+      "variant": 'popover',
+      "trigger": _vm.root,
+      "placement": _vm.placement,
+      "offset": _vm.offset,
+      "disable-default-styles": true
+    },
+    on: {
+      "update:state": function ($event) {
+        _vm.state = $event;
+      }
+    }
+  }, [_c('div', {
+    class: _vm.bodyStyles
+  }, [_vm._t("content", function () {
+    return [_vm._v("\n          " + _vm._s(_vm.content || _vm.text) + "\n        ")];
+  })], 2)])] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { Tooltip as T, __vue_component__ as _, TooltipBody as a, TooltipBodyPlacements as b };

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

@@ -1,423 +1,2 @@
-import { defineComponent, ref, computed, watch, unref, onMounted } from 'vue-demi';
-import { TreeNodeDropPosition } from './types.js';
-import __vue_component__$2 from '../OrButtonV3/OrButton.js';
-import __vue_component__$3 from '../OrIconV3/OrIcon.js';
-import { u as useToggle } from '../../index-5564585f.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-
-function inRange(num, min, max) {
-  return num >= min && num <= max;
-}
-function getDropOffset(e) {
-  let canMiddleDrop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const {
-    clientY
-  } = e;
-  const {
-    top,
-    height
-  } = e.target.getBoundingClientRect();
-  const offset = Math.max((clientY - top) / height, 0); // sometimes offset is negative
-  if (canMiddleDrop && inRange(offset, 0.4, 0.7)) {
-    return TreeNodeDropPosition.Middle;
-  } else if (inRange(offset, 0, 0.5)) {
-    return TreeNodeDropPosition.Top;
-  }
-  return TreeNodeDropPosition.Bottom;
-}
-function applyPadding(element, level, hasCollapseTrigger) {
-  const padding = level * 20 - (hasCollapseTrigger ? 20 : 0);
-  Object.assign(element.style, {
-    paddingLeft: `${padding}px`
-  });
-}
-
-const TreeNodeRoot = [];
-const TreeNodeItemRoot = [
-// Layout
-'layout-row', 'py-xs', '!items-start', 'relative',
-// Theme
-'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'];
-const TreeNodeDragIndicator = [
-// Layout
-'absolute h-[2px] w-full left-[0px]',
-// Theme
-'bg-primary',
-// Interaction
-'pointer-events-none'];
-const TreeNodeDragIndicatorPosition = {
-  top: ['top-[-1px]'],
-  middle: ['top-[-1px]', 'left-[0px]', 'w-full', '!h-[calc(100%+2px)]',
-  // Theme
-  'bg-transparent', 'border-x-0', 'border-y-2', 'border-primary', 'dark:border-primary-dark'],
-  bottom: ['bottom-[-1px]']
-};
-
-var script$1 = defineComponent({
-  name: 'OrTreeNode',
-  components: {
-    OrButton: __vue_component__$2,
-    OrIcon: __vue_component__$3
-  },
-  props: {
-    node: {
-      type: Object,
-      required: true
-    },
-    selected: {
-      type: Boolean,
-      default: undefined
-    },
-    parentSelected: {
-      type: Boolean,
-      default: undefined
-    },
-    expanded: {
-      type: Boolean,
-      default: true
-    },
-    depth: {
-      type: Number,
-      default: 1
-    },
-    draggable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
-  setup(props, _ref) {
-    let {
-      emit
-    } = _ref;
-    // Refs
-    const root = ref();
-    const nodeRoot = ref();
-    // State
-    const isDragOver = ref(false);
-    const isDrag = ref(false);
-    const dragPosition = ref('top');
-    const hasChildren = computed(() => !!props.node.children && props.node.children.length > 0);
-    const [isOpen, setIsOpen] = useToggle(props.expanded);
-    const hasCollapseTrigger = computed(() => props.node.collapsible || hasChildren.value);
-    const isLeaf = computed(() => !hasChildren.value);
-    const canDrag = computed(() => props.draggable !== false && props.node.draggable !== false);
-    // Effects
-    watch(() => props.depth, value => {
-      applyPadding(unref(nodeRoot), value, hasCollapseTrigger.value);
-    });
-    watch(() => props.expanded, value => {
-      if (value !== undefined) {
-        setIsOpen(value);
-      }
-    }, {
-      immediate: true
-    });
-    onMounted(() => {
-      applyPadding(unref(nodeRoot), props.depth, hasCollapseTrigger.value);
-    });
-    // Methods
-    const handleDrop = e => {
-      var _a;
-      const nodeKey = (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('node-key');
-      isDragOver.value = false;
-      emit('drop', {
-        dropKey: props.node.key,
-        dragKey: nodeKey,
-        dropPosition: dragPosition.value
-      });
-    };
-    const handleDragStart = e => {
-      var _a;
-      isDrag.value = true;
-      setIsOpen(false);
-      (_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 handleDragOver = e => {
-      e.preventDefault();
-      e.stopPropagation();
-      dragPosition.value = getDropOffset(e, props.node.canMiddleDrop || props.node.collapsible || hasChildren.value);
-      isDragOver.value = true;
-    };
-    const handleDragLeave = e => {
-      e.preventDefault();
-      e.stopPropagation();
-      isDragOver.value = false;
-    };
-    const handleContextMenu = e => {
-      emit('contextmenu', Object.assign(e, {
-        nodeKey: props.node.key
-      }));
-    };
-    const handleClick = e => {
-      e.preventDefault();
-      emit('click', 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', ...TreeNodeRoot]);
-    const nodeStyles = computed(() => [...TreeNodeItemRoot, ...(props.parentSelected ? TreeNodeItemRootParentSelected : [])]);
-    const dragIndicatorStyles = computed(() => [...TreeNodeDragIndicator, ...TreeNodeDragIndicatorPosition[dragPosition.value]]);
-    return {
-      root,
-      isOpen,
-      isLeaf,
-      rootStyles,
-      nodeStyles,
-      dragIndicatorStyles,
-      setIsOpen,
-      nodeRoot,
-      isDrag,
-      canDrag,
-      dragPosition,
-      handleDragStart,
-      handleDrop,
-      handleCollapse,
-      handleContextMenu,
-      handleClick,
-      handleDragOver,
-      handleDragLeave,
-      hasCollapseTrigger,
-      isDragOver
-    };
-  }
-});
-
-/* script */
-const __vue_script__$1 = script$1;
-
-/* template */
-var __vue_render__$1 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    ref: "root",
-    class: _vm.rootStyles
-  }, [_c('div', {
-    ref: "nodeRoot",
-    class: _vm.nodeStyles,
-    attrs: {
-      "draggable": _vm.canDrag ? true : undefined,
-      "selected": _vm.selected ? true : undefined
-    },
-    on: {
-      "dragend": function ($event) {
-        _vm.isDrag = false;
-      },
-      "dragstart": function ($event) {
-        $event.stopPropagation();
-        return _vm.handleDragStart.apply(null, arguments);
-      },
-      "dragover": function ($event) {
-        $event.preventDefault();
-        return _vm.handleDragOver.apply(null, arguments);
-      },
-      "dragenter": function ($event) {
-        $event.preventDefault();
-        return _vm.handleDragOver.apply(null, arguments);
-      },
-      "dragleave": _vm.handleDragLeave,
-      "drop": _vm.handleDrop,
-      "click": _vm.handleClick,
-      "contextmenu": _vm.handleContextMenu
-    }
-  }, [_vm.hasCollapseTrigger ? [_c('OrButton', {
-    attrs: {
-      "variant": "link"
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.handleCollapse.apply(null, arguments);
-      }
-    }
-  }, [_c('OrIcon', {
-    class: [_vm.isOpen ? 'rotate-90' : 'rotate-0'],
-    attrs: {
-      "icon": "arrow_right",
-      "size": "l"
-    }
-  })], 1)] : _vm._e(), _vm._v(" "), _vm._t("node", function () {
-    return [_vm._v("\n      " + _vm._s(_vm.node.key) + "\n    ")];
-  }, null, {
-    node: _vm.node,
-    isOpen: _vm.isOpen,
-    isLeaf: _vm.isLeaf,
-    isDrag: _vm.isDrag,
-    isDragOver: _vm.isDragOver,
-    depth: _vm.depth
-  }), _vm._v(" "), _vm.isDragOver && !_vm.isDrag ? _c('div', {
-    class: _vm.dragIndicatorStyles
-  }) : _vm._e()], 2), _vm._v(" "), !_vm.isLeaf && _vm.isOpen ? _vm._l(_vm.node.children, function (child) {
-    return _c('OrTreeNode', {
-      key: child.key,
-      attrs: {
-        "parent-selected": _vm.selected || undefined,
-        "node": child,
-        "depth": _vm.depth + 1,
-        "selected": child.selected,
-        "draggable": _vm.draggable
-      },
-      on: {
-        "drop": function ($event) {
-          return _vm.$emit('drop', $event);
-        },
-        "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 (e, key) {
-          return _vm.$emit('contextmenu', e, key);
-        }
-      },
-      scopedSlots: _vm._u([{
-        key: "node",
-        fn: function (props) {
-          return [_vm._t("node", null, null, props)];
-        }
-      }], null, true)
-    });
-  }) : _vm._e()], 2);
-};
-var __vue_staticRenderFns__$1 = [];
-
-/* style */
-const __vue_inject_styles__$1 = undefined;
-/* scoped */
-const __vue_scope_id__$1 = undefined;
-/* module identifier */
-const __vue_module_identifier__$1 = undefined;
-/* functional template */
-const __vue_is_functional_template__$1 = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$1,
-  staticRenderFns: __vue_staticRenderFns__$1
-}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
-var OrTreeNode = __vue_component__$1;
-
-var script = defineComponent({
-  name: 'OrTree',
-  components: {
-    OrTreeNode
-  },
-  props: {
-    nodes: {
-      type: Array,
-      default: () => []
-    },
-    draggable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
-  setup() {
-    // Refs
-    const root = ref(null);
-    // Styles
-    const rootStyles = computed(() => ['or-tree-v3']);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    ref: "root",
-    class: _vm.rootStyles
-  }, _vm._l(_vm.nodes, function (item) {
-    return _c('OrTreeNode', {
-      key: item.key,
-      attrs: {
-        "node": item,
-        "expanded": item.expanded,
-        "selected": item.selected,
-        "draggable": !item.hasOwnProperty('draggable') || item.draggable === null ? _vm.draggable : item.draggable
-      },
-      on: {
-        "drop": function ($event) {
-          return _vm.$emit('drop', $event);
-        },
-        "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([{
-        key: "node",
-        fn: function (props) {
-          return [_vm._t("node", null, null, props)];
-        }
-      }], null, true)
-    });
-  }), 1);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { __vue_component__ as default };
+export { OrTreeV3 as default } from './index.js';
+import '../OrAvatar-7d519020.js';