@onereach/ui-components 4.11.1-beta.2967.0 → 4.11.1

package/src/components/or-fab-v3/OrFab.vue

@@ -33,7 +33,7 @@ export default defineComponent({
     },
 
     color: {
-      type: String as PropType<`${FabColor}`>,
+      type: String as PropType<FabColor>,
       default: FabColor.Primary,
     },
 

package/src/components/or-icon-button-v3/OrIconButton.vue

@@ -3,7 +3,7 @@
     <button
       ref="root"
       v-bind="$attrs"
-      :class="[rootStyles, ...additionalStyles]"
+      :class="rootStyles"
       :type="'button'"
       :selected="selected ? '' : null"
       :disabled="disabled"
@@ -41,12 +41,6 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
-    // TODO: Remove after migration to Vue 3
-    additionalStyles: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-
     icon: {
       type: [String, Object] as PropType<string | Omit<InstanceType<typeof OrIcon>['$props'], 'size'>>,
       required: true,

package/src/components/or-sidebar-v3/OrSidebar.vue

@@ -18,15 +18,12 @@
         ref="resizeBar"
         :class="resizeStyles"
       />
-
-      <template v-if="collapsible">
-        <OrSidebarCollapseButton
-          v-model="isCollapsed"
-          :class="collapsibleButtonStyles"
-          :side="side"
-        />
-      </template>
-
+      <or-sidebar-collapse-button
+        v-if="collapsible"
+        v-model="isCollapsed"
+        :class="collapsibleButtonStyles"
+        :side="side"
+      />
       <div
         v-show="!isCollapsed"
         :class="mainStyles"
@@ -60,7 +57,7 @@
 
 <script lang="ts">
 import { useDraggable, useElementBounding } from '@vueuse/core';
-import { PropType, computed, defineComponent, ref, useSlots, watch } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, useSlots, watch } from 'vue-demi';
 import { OrSidebarCollapseButton } from './partials';
 import { OrSidebarPlacement } from './props';
 import { CollapsibleSidebarToolbar, SidebarBar, SidebarCollapseButton, SidebarCollapseButtonSides, SidebarContent, SidebarFooter, SidebarHeader, SidebarMain, SidebarResize, SidebarResizeSides, SidebarResizingSides, SidebarRoot, SidebarSides, SidebarToolbar, SidebarToolbarSides } from './styles';
@@ -77,17 +74,14 @@ export default defineComponent({
       type: Number,
       default: 320,
     },
-
     minimumWidth: {
       type: Number,
       default: 256,
     },
-
     maximumWidth: {
       type: Number,
       default: 384,
     },
-
     /**
      * User may put the component on the right or the left side of a container.
      * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
@@ -96,15 +90,13 @@ export default defineComponent({
      * @values left, right
      */
     side: {
-      type: String as PropType<`${OrSidebarPlacement}`>,
-      default: OrSidebarPlacement.Right,
+      type: String as PropType<OrSidebarPlacement>,
+      default: OrSidebarPlacement.right,
     },
-
     draggable: {
       type: Boolean,
       default: true,
     },
-
     collapsible: {
       type: Boolean,
       default: false,
@@ -123,7 +115,7 @@ export default defineComponent({
     'close',
   ],
 
-  setup(props, context) {
+  setup(props, { emit }) {
     // Refs
     const root = ref<HTMLElement>();
     const resizeBar = ref<HTMLElement | null>(null);
@@ -192,7 +184,7 @@ export default defineComponent({
         isResizing.value = true;
       },
       onMove: (position => {
-        const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.Left ? -1 : 1);
+        const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
         const newWidth = localWidth.value - delta;
         localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value :
           newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
@@ -239,9 +231,9 @@ export default defineComponent({
       if (newMaximum < localWidth.value) localWidth.value = newMaximum;
     });
 
-    watch(localWidth, (val: number) => context.emit('change:width', val));
+    watch(localWidth, (val: number) => emit('change:width', val));
 
-    watch(isCollapsed, (val: boolean) => context.emit(val ? 'close' : 'open'));
+    watch(isCollapsed, (val: boolean) => emit(val ? 'close' : 'open'));
 
     return {
       root,

package/src/components/or-sidebar-v3/partials/index.ts

@@ -1 +1 @@
-export { default as OrSidebarCollapseButton } from './or-sidebar-collapse-button/OrSidebarCollapseButton.vue';
+export * from './or-sidebar-collapse-button';

package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.ts

@@ -0,0 +1,48 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import OrSidebarCollapseButton from './OrSidebarCollapseButton.vue';
+import { OrSidebarPlacement } from '../../props';
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue-demi';
+
+export default {
+  title: 'Components/Sidebar/Partials/CollapseButton',
+  component: OrSidebarCollapseButton,
+
+  argTypes: {
+    // Props
+    modelValue: {
+      control: { type: 'boolean' },
+    },
+
+    side: {
+      control: { type: 'select' },
+      options: Object.values(OrSidebarPlacement),
+    },
+  },
+} as Meta<typeof OrSidebarCollapseButton>;
+
+const DefaultTemplate: StoryFn<typeof OrSidebarCollapseButton> = (args) => ({
+  components: {
+    OrSidebarCollapseButton,
+  },
+
+  setup() {
+    const collapsed = ref<boolean>(!!args.modelValue);
+
+    return {
+      args,
+      collapsed,
+    };
+  },
+
+  methods: {
+    onUpdateModelValue: action('update:modelValue'),
+  },
+
+  template: '<OrSidebarCollapseButton v-model="collapsed" v-bind="args" @update:modelValue="onUpdateModelValue" />',
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  side: OrSidebarPlacement.right,
+};

package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue

@@ -3,11 +3,11 @@
     ref="root"
     :class="rootStyles"
   >
-    <OrIconButton
-      :additional-styles="buttonStyles"
+    <or-icon-button
+      :class="buttonStyles"
       :icon="{ icon, size: 'inherit' }"
-      :color="'inherit'"
-      @click.stop="$emit('update:modelValue', !modelValue)"
+      color="inherit"
+      @click="$emit('update:modelValue', !modelValue)"
     />
   </div>
 </template>
@@ -16,7 +16,7 @@
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
 import { OrSidebarPlacement } from '../../props';
-import { CollapseButton, CollapseButtonButton } from './styles';
+import { CollapseButton, CollapseButtonContainer } from './styles';
 
 export default defineComponent({
   name: 'OrSidebarCollapseButton',
@@ -38,20 +38,15 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
     side: {
       type: String as PropType<OrSidebarPlacement>,
-      default: OrSidebarPlacement.Right,
+      default: OrSidebarPlacement.right,
     },
   },
 
-  emits: [
-    'update:modelValue',
-  ],
+  emits: ['update:modelValue'],
 
-  expose: [
-    'root',
-  ],
+  expose: ['root'],
 
   setup(props) {
     // Refs
@@ -59,19 +54,17 @@ export default defineComponent({
 
     const rootStyles = computed(() => [
       'or-sidebar-collapse-button-v3',
-      ...CollapseButton,
+      ...CollapseButtonContainer,
     ]);
 
     const buttonStyles = computed(() => [
-      ...CollapseButtonButton,
+      ...CollapseButton,
     ]);
 
-    // State
-    const icon = computed(() => {
-      return props.side === OrSidebarPlacement.Left !== props.modelValue
-        ? 'keyboard_arrow_left'
-        : 'keyboard_arrow_right';
-    });
+    const icon = computed(() => (props.side === OrSidebarPlacement.left !== props.modelValue) ?
+      'keyboard_arrow_left' :
+      'keyboard_arrow_right',
+    );
 
     return {
       root,

package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.ts

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

package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.ts

@@ -1,4 +1,4 @@
-export const CollapseButton: string[] = [
+export const CollapseButtonContainer: string[] = [
   // Box
   'w-[24px]',
   'h-[24px]',
@@ -9,7 +9,7 @@ export const CollapseButton: string[] = [
   'bg-background dark:bg-background-dark',
 ];
 
-export const CollapseButtonButton: string[] = [
+export const CollapseButton: string[] = [
   // Box
   'w-[24px]',
   'h-[24px]',

package/src/components/or-sidebar-v3/props.ts

@@ -1,4 +1,4 @@
 export enum OrSidebarPlacement {
-  Left = 'left',
-  Right = 'right',
+  left = 'left',
+  right = 'right',
 }

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

@@ -72,14 +72,13 @@ export const CollapsibleSidebarToolbar: string[] = [
 ];
 
 export const SidebarSides: Record<OrSidebarPlacement, string[]> = {
-  'left': [
+  [OrSidebarPlacement.left]: [
     // Borders
     'border-r-[1px]',
     'border-r-solid',
     'border-r-outline-variant dark:border-r-outline-variant-dark',
   ],
-
-  'right': [
+  [OrSidebarPlacement.right]: [
     // Borders
     'border-l-[1px]',
     'border-l-solid',
@@ -88,14 +87,13 @@ export const SidebarSides: Record<OrSidebarPlacement, string[]> = {
 };
 
 export const SidebarToolbarSides: Record<OrSidebarPlacement, string[]> = {
-  'left': [
+  [OrSidebarPlacement.left]: [
     // Borders
     'border-r-[1px]',
     'border-r-solid',
     'border-r-outline-variant dark:border-r-outline-variant-dark',
   ],
-
-  'right': [
+  [OrSidebarPlacement.right]: [
     // Borders
     'border-l-[1px]',
     'border-l-solid',
@@ -118,7 +116,7 @@ export const SidebarResize: string[] = [
 ];
 
 export const SidebarResizeSides: Record<OrSidebarPlacement, string[]> = {
-  'left': [
+  [OrSidebarPlacement.left]: [
     // Position
     '-right-[1px]',
 
@@ -129,8 +127,7 @@ export const SidebarResizeSides: Record<OrSidebarPlacement, string[]> = {
     // Transition
     'transition-[border-right]',
   ],
-
-  'right': [
+  [OrSidebarPlacement.right]: [
     // Position
     '-left-[1px]',
 
@@ -152,25 +149,23 @@ export const SidebarCollapseButton: string[] = [
 ];
 
 export const SidebarCollapseButtonSides: Record<OrSidebarPlacement, string[]> = {
-  'left': [
+  [OrSidebarPlacement.left]: [
     // Position
     '-right-[12px]',
   ],
-
-  'right': [
+  [OrSidebarPlacement.right]: [
     // Position
     '-left-[12px]',
   ],
 };
 
 export const SidebarResizingSides: Record<OrSidebarPlacement, string[]> = {
-  'left': [
+  [OrSidebarPlacement.left]: [
     // Borders
     'border-r-2',
     'border-r-primary-hover dark:border-r-primary-hover-dark',
   ],
-
-  'right': [
+  [OrSidebarPlacement.right]: [
     // Borders
     'border-l-2',
     'border-l-primary-hover dark:border-l-primary-hover-dark',

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

@@ -0,0 +1,65 @@
+<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

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

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

@@ -0,0 +1,235 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <div
+      ref="nodeRoot"
+      :class="nodeStyles"
+      :draggable="canDrag ? true : undefined"
+      :selected="selected ? true : undefined"
+      @dragend="isDrag = false"
+      @dragstart.stop="handleDragStart"
+      @dragover.prevent="handleDragOver"
+      @dragenter.prevent="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+      @click="handleClick"
+      @contextmenu="handleContextMenu"
+    >
+      <template
+        v-if="hasCollapseTrigger"
+      >
+        <OrButton
+          variant="link"
+          @click.stop="handleCollapse"
+        >
+          <OrIcon
+            :class="[isOpen ? 'rotate-90': 'rotate-0']"
+            icon="arrow_right"
+            size="l"
+          />
+        </OrButton>
+      </template>
+      <slot
+        name="node"
+        v-bind="{node, isOpen, isLeaf, isDrag, isDragOver, depth}"
+      >
+        {{ node.key }}
+      </slot>
+      <div
+        v-if="isDragOver && !isDrag"
+        :class="dragIndicatorStyles"
+      />
+    </div>
+    <template
+      v-if="!isLeaf && isOpen"
+    >
+      <OrTreeNode
+        v-for="child in node.children"
+        :key="child.key"
+        :parent-selected="selected || undefined"
+        :node="child"
+        :depth="depth + 1"
+        :selected="child.selected"
+        :draggable="draggable"
+        @drop="$emit('drop', $event)"
+        @dragstart="$emit('dragstart', $event)"
+        @click="$emit('click', $event)"
+        @expand="$emit('expand', $event)"
+        @collapse="$emit('collapse', $event)"
+        @contextmenu="(e, key) => $emit('contextmenu', e, key)"
+      >
+        <template v-slot:node="props">
+          <slot
+            name="node"
+            v-bind="props"
+          />
+        </template>
+      </OrTreeNode>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType, ref, computed, watch, unref, onMounted } from 'vue-demi';
+import { useToggle } from '@vueuse/core';
+import { OrButtonV3 as OrButton } from '../../../or-button-v3';
+import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
+import { getDropOffset, applyPadding } from './utils';
+import { TreeNode, TreeNodeDropPosition } from '../../types';
+import { TreeNodeRoot, TreeNodeItemRoot, TreeNodeDragIndicator, TreeNodeDragIndicatorPosition, TreeNodeItemRootParentSelected } from './styles';
+
+export default defineComponent({
+  name: 'OrTreeNode',
+  components: {
+    OrButton,
+    OrIcon,
+  },
+  props: {
+    node: {
+      type: Object as PropType<TreeNode>,
+      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, { emit }) {
+    // Refs
+    const root = ref<HTMLElement>();
+    const nodeRoot = ref<HTMLElement>();
+
+    // State
+    const isDragOver = ref(false);
+    const isDrag = ref(false);
+    const dragPosition = ref<`${TreeNodeDropPosition}`>('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: DragEvent) => {
+      const nodeKey = e?.dataTransfer?.getData('node-key');
+      isDragOver.value = false;
+      emit('drop', {
+        dropKey: props.node.key,
+        dragKey: nodeKey,
+        dropPosition: dragPosition.value,
+      });
+    };
+
+    const handleDragStart = (e: DragEvent) => {
+      isDrag.value = true;
+      setIsOpen(false);
+      e?.dataTransfer?.setData('node-key', props.node.key);
+      emit('dragstart', props.node.key);
+    };
+
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragPosition.value = getDropOffset(e, props.node.canMiddleDrop || props.node.collapsible || hasChildren.value);
+      isDragOver.value = true;
+    };
+
+    const handleDragLeave = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      isDragOver.value = false;
+    };
+
+    const handleContextMenu = (e: MouseEvent) => {
+      emit('contextmenu', Object.assign(e, { nodeKey: props.node.key }));
+    };
+
+    const handleClick = (e: MouseEvent) => {
+      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>