@onereach/ui-components 4.10.2-beta.2936.0 → 4.10.2

package/dist/esm/v3/OrTree-07b5540c.js

@@ -1,342 +0,0 @@
-import { defineComponent, ref, computed, watch, unref, onMounted } from 'vue-demi';
-import { useToggle } from '@vueuse/core';
-import { s as script$2 } from './OrButton-c2b6aa9e.js';
-import { s as script$3 } from './OrIcon-62793572.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, createBlock, withCtx, createVNode, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, Fragment, renderList } from 'vue';
-
-var TreeNodeDropPosition;
-(function (TreeNodeDropPosition) {
-  TreeNodeDropPosition["Top"] = "top";
-  TreeNodeDropPosition["Bottom"] = "bottom";
-  TreeNodeDropPosition["Middle"] = "middle";
-})(TreeNodeDropPosition || (TreeNodeDropPosition = {}));
-
-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: script$2,
-    OrIcon: script$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.collapsible && props.node.canMiddleDrop !== false);
-      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
-    };
-  }
-});
-
-const _hoisted_1 = ["draggable", "selected"];
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrIcon = resolveComponent("OrIcon");
-  const _component_OrButton = resolveComponent("OrButton");
-  const _component_OrTreeNode = resolveComponent("OrTreeNode", true);
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [createElementVNode("div", {
-    ref: "nodeRoot",
-    class: normalizeClass(_ctx.nodeStyles),
-    draggable: _ctx.canDrag ? true : undefined,
-    selected: _ctx.selected ? true : undefined,
-    onDragend: _cache[0] || (_cache[0] = $event => _ctx.isDrag = false),
-    onDragstart: _cache[1] || (_cache[1] = withModifiers(function () {
-      return _ctx.handleDragStart && _ctx.handleDragStart(...arguments);
-    }, ["stop"])),
-    onDragover: _cache[2] || (_cache[2] = withModifiers(function () {
-      return _ctx.handleDragOver && _ctx.handleDragOver(...arguments);
-    }, ["prevent"])),
-    onDragenter: _cache[3] || (_cache[3] = withModifiers(function () {
-      return _ctx.handleDragOver && _ctx.handleDragOver(...arguments);
-    }, ["prevent"])),
-    onDragleave: _cache[4] || (_cache[4] = function () {
-      return _ctx.handleDragLeave && _ctx.handleDragLeave(...arguments);
-    }),
-    onDrop: _cache[5] || (_cache[5] = function () {
-      return _ctx.handleDrop && _ctx.handleDrop(...arguments);
-    }),
-    onClick: _cache[6] || (_cache[6] = function () {
-      return _ctx.handleClick && _ctx.handleClick(...arguments);
-    }),
-    onContextmenu: _cache[7] || (_cache[7] = function () {
-      return _ctx.handleContextMenu && _ctx.handleContextMenu(...arguments);
-    })
-  }, [_ctx.hasCollapseTrigger ? (openBlock(), createBlock(_component_OrButton, {
-    key: 0,
-    variant: "link",
-    onClick: withModifiers(_ctx.handleCollapse, ["stop"])
-  }, {
-    default: withCtx(() => [createVNode(_component_OrIcon, {
-      class: normalizeClass([_ctx.isOpen ? 'rotate-90' : 'rotate-0']),
-      icon: "arrow_right",
-      size: "l"
-    }, null, 8 /* PROPS */, ["class"])]),
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["onClick"])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "node", normalizeProps(guardReactiveProps({
-    node: _ctx.node,
-    isOpen: _ctx.isOpen,
-    isLeaf: _ctx.isLeaf,
-    isDrag: _ctx.isDrag,
-    isDragOver: _ctx.isDragOver,
-    depth: _ctx.depth
-  })), () => [createTextVNode(toDisplayString(_ctx.node.key), 1 /* TEXT */)]), _ctx.isDragOver && !_ctx.isDrag ? (openBlock(), createElementBlock("div", {
-    key: 1,
-    class: normalizeClass(_ctx.dragIndicatorStyles)
-  }, null, 2 /* CLASS */)) : createCommentVNode("v-if", true)], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), !_ctx.isLeaf && _ctx.isOpen ? (openBlock(true), createElementBlock(Fragment, {
-    key: 0
-  }, renderList(_ctx.node.children, child => {
-    return openBlock(), createBlock(_component_OrTreeNode, {
-      key: child.key,
-      "parent-selected": _ctx.selected || undefined,
-      node: child,
-      depth: _ctx.depth + 1,
-      selected: child.selected,
-      draggable: _ctx.draggable,
-      onDrop: _cache[8] || (_cache[8] = $event => _ctx.$emit('drop', $event)),
-      onDragstart: _cache[9] || (_cache[9] = $event => _ctx.$emit('dragstart', $event)),
-      onClick: _cache[10] || (_cache[10] = $event => _ctx.$emit('click', $event)),
-      onExpand: _cache[11] || (_cache[11] = $event => _ctx.$emit('expand', $event)),
-      onCollapse: _cache[12] || (_cache[12] = $event => _ctx.$emit('collapse', $event)),
-      onContextmenu: _cache[13] || (_cache[13] = (e, key) => _ctx.$emit('contextmenu', e, key))
-    }, {
-      node: withCtx(props => [renderSlot(_ctx.$slots, "node", normalizeProps(guardReactiveProps(props)))]),
-      _: 2 /* DYNAMIC */
-    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["parent-selected", "node", "depth", "selected", "draggable"]);
-  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
-}
-
-script$1.render = render$1;
-script$1.__file = "src/components/or-tree-v3/partials/or-tree-node/OrTreeNode.vue";
-
-var script = defineComponent({
-  name: 'OrTree',
-  components: {
-    OrTreeNode: script$1
-  },
-  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
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrTreeNode = resolveComponent("OrTreeNode");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.nodes, item => {
-    return openBlock(), createBlock(_component_OrTreeNode, {
-      key: item.key,
-      node: item,
-      expanded: item.expanded,
-      selected: item.selected,
-      draggable: !item.hasOwnProperty('draggable') || item.draggable === null ? _ctx.draggable : item.draggable,
-      onDrop: _cache[0] || (_cache[0] = $event => _ctx.$emit('drop', $event)),
-      onDragstart: _cache[1] || (_cache[1] = $event => _ctx.$emit('dragstart', $event)),
-      onClick: _cache[2] || (_cache[2] = $event => _ctx.$emit('click', $event)),
-      onCollapse: _cache[3] || (_cache[3] = $event => _ctx.$emit('collapse', $event)),
-      onExpand: _cache[4] || (_cache[4] = $event => _ctx.$emit('expand', $event)),
-      onContextmenu: _cache[5] || (_cache[5] = $event => _ctx.$emit('contextmenu', $event))
-    }, {
-      node: withCtx(props => [renderSlot(_ctx.$slots, "node", normalizeProps(guardReactiveProps(props)))]),
-      _: 2 /* DYNAMIC */
-    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["node", "expanded", "selected", "draggable"]);
-  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-tree-v3/OrTree.vue";
-
-export { TreeNodeDropPosition as T, script as s };

package/dist/esm/v3/components/or-tree-v3/OrTree.vue.d.ts

@@ -1,35 +0,0 @@
-import { PropType } from 'vue-demi';
-import { TreeNode } from './types';
-declare const _default: import("vue-demi").DefineComponent<{
-    nodes: {
-        type: PropType<TreeNode[]>;
-        default: () => never[];
-    };
-    draggable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    root: import("vue-demi").Ref<HTMLElement | null>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("drop" | "dragstart" | "click" | "expand" | "collapse" | "contextmenu")[], "drop" | "dragstart" | "click" | "expand" | "collapse" | "contextmenu", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    nodes: {
-        type: PropType<TreeNode[]>;
-        default: () => never[];
-    };
-    draggable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & {
-    onDrop?: ((...args: any[]) => any) | undefined;
-    onDragstart?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
-    onExpand?: ((...args: any[]) => any) | undefined;
-    onCollapse?: ((...args: any[]) => any) | undefined;
-    onContextmenu?: ((...args: any[]) => any) | undefined;
-}, {
-    nodes: TreeNode[];
-    draggable: boolean;
-}>;
-export default _default;

package/dist/esm/v3/components/or-tree-v3/index.d.ts

@@ -1,2 +0,0 @@
-export { default as OrTreeV3 } from './OrTree.vue';
-export * from './types';

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

@@ -1,7 +0,0 @@
-export { s as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-07b5540c.js';
-import 'vue-demi';
-import '@vueuse/core';
-import '../../OrButton-c2b6aa9e.js';
-import '../../OrLoader-b79022da.js';
-import 'vue';
-import '../../OrIcon-62793572.js';

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

@@ -1,88 +0,0 @@
-import { PropType } from 'vue-demi';
-import { TreeNode } from '../../types';
-declare const _default: import("vue-demi").DefineComponent<{
-    node: {
-        type: PropType<TreeNode>;
-        required: true;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    parentSelected: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    expanded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    depth: {
-        type: NumberConstructor;
-        default: number;
-    };
-    draggable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    root: import("vue-demi").Ref<HTMLElement | undefined>;
-    isOpen: import("vue-demi").Ref<boolean>;
-    isLeaf: import("vue-demi").ComputedRef<boolean>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-    nodeStyles: import("vue-demi").ComputedRef<string[]>;
-    dragIndicatorStyles: import("vue-demi").ComputedRef<string[]>;
-    setIsOpen: (value?: boolean | undefined) => boolean;
-    nodeRoot: import("vue-demi").Ref<HTMLElement | undefined>;
-    isDrag: import("vue-demi").Ref<boolean>;
-    canDrag: import("vue-demi").ComputedRef<boolean>;
-    dragPosition: import("vue-demi").Ref<"top" | "bottom" | "middle">;
-    handleDragStart: (e: DragEvent) => void;
-    handleDrop: (e: DragEvent) => void;
-    handleCollapse: () => void;
-    handleContextMenu: (e: MouseEvent) => void;
-    handleClick: (e: MouseEvent) => void;
-    handleDragOver: (e: DragEvent) => void;
-    handleDragLeave: (e: DragEvent) => void;
-    hasCollapseTrigger: import("vue-demi").ComputedRef<boolean>;
-    isDragOver: import("vue-demi").Ref<boolean>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("drop" | "dragstart" | "click" | "expand" | "collapse" | "contextmenu")[], "drop" | "dragstart" | "click" | "expand" | "collapse" | "contextmenu", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    node: {
-        type: PropType<TreeNode>;
-        required: true;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    parentSelected: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    expanded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    depth: {
-        type: NumberConstructor;
-        default: number;
-    };
-    draggable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & {
-    onDrop?: ((...args: any[]) => any) | undefined;
-    onDragstart?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
-    onExpand?: ((...args: any[]) => any) | undefined;
-    onCollapse?: ((...args: any[]) => any) | undefined;
-    onContextmenu?: ((...args: any[]) => any) | undefined;
-}, {
-    selected: boolean;
-    parentSelected: boolean;
-    expanded: boolean;
-    depth: number;
-    draggable: boolean;
-}>;
-export default _default;

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

@@ -1,6 +0,0 @@
-import { TreeNodeDropPosition } from '../../types';
-export declare const TreeNodeRoot: never[];
-export declare const TreeNodeItemRoot: string[];
-export declare const TreeNodeItemRootParentSelected: string[];
-export declare const TreeNodeDragIndicator: string[];
-export declare const TreeNodeDragIndicatorPosition: Record<TreeNodeDropPosition, string[]>;

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

@@ -1,3 +0,0 @@
-import { TreeNodeDropPosition } from '../../types';
-export declare function getDropOffset(e: DragEvent, canMiddleDrop?: boolean): TreeNodeDropPosition;
-export declare function applyPadding(element: HTMLElement, level: number, hasCollapseTrigger: boolean): void;

package/dist/esm/v3/components/or-tree-v3/types.d.ts

@@ -1,15 +0,0 @@
-export type TreeNode = {
-    key: string;
-    children?: TreeNode[];
-    collapsible?: boolean;
-    expanded?: boolean;
-    selected?: boolean;
-    draggable?: boolean;
-    [key: string]: any;
-    canMiddleDrop?: boolean;
-};
-export declare enum TreeNodeDropPosition {
-    Top = "top",
-    Bottom = "bottom",
-    Middle = "middle"
-}

package/src/components/or-tree-v3/OrTree.vue

@@ -1,65 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <OrTreeNode
-      v-for="item in nodes"
-      :key="item.key"
-      :node="item"
-      :expanded="item.expanded"
-      :selected="item.selected"
-      :draggable="(!item.hasOwnProperty('draggable') || item.draggable === null) ? draggable : item.draggable"
-      @drop="$emit('drop', $event)"
-      @dragstart="$emit('dragstart', $event)"
-      @click="$emit('click', $event)"
-      @collapse="$emit('collapse', $event)"
-      @expand="$emit('expand', $event)"
-      @contextmenu="$emit('contextmenu', $event)"
-    >
-      <template v-slot:node="props">
-        <slot
-          name="node"
-          v-bind="props"
-        />
-      </template>
-    </OrTreeNode>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, PropType, ref, computed } from 'vue-demi';
-import OrTreeNode from './partials/or-tree-node/OrTreeNode.vue';
-import { TreeNode } from './types';
-
-export default defineComponent({
-  name: 'OrTree',
-  components: {
-    OrTreeNode,
-  },
-  props: {
-    nodes: {
-      type: Array as PropType<TreeNode[]>,
-      default: () => [],
-    },
-    draggable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
-  setup() {
-    // Refs
-    const root = ref<HTMLElement | null>(null);
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-tree-v3',
-    ]);
-
-    return {
-      root,
-      rootStyles,
-    };
-  },
-});
-</script>

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

@@ -1,2 +0,0 @@
-export { default as OrTreeV3 } from './OrTree.vue';
-export * from './types';