@onereach/ui-components 6.4.7 → 6.4.8-beta.3469.0

package/src/components/or-resizeable-panel-v3/OrResizeablePanel.vue

@@ -0,0 +1,284 @@
+<template>
+  <div
+    :ref="'root'"
+    :class="rootStyles"
+    :style="{ [currentDirection]: !collapsible || state === 'open' ? `${currentSize}px` : 'auto' }"
+  >
+    <template v-if="!collapsible || state === 'open'">
+      <div :class="contentStyles">
+        <slot />
+      </div>
+    </template>
+
+    <template v-if="resizeable && state === 'open'">
+      <div
+        :ref="'resizeBar'"
+        :class="resizeBarStyles"
+        :activated="isResizing ? '' : null"
+      />
+    </template>
+
+    <template v-if="collapsible">
+      <div :class="collapseButtonContainerStyles">
+        <OrIconButton
+          :icon="collapseButtonIcon"
+          :size="'xl'"
+          @click="toggle()"
+        />
+      </div>
+    </template>
+
+    <template v-if="$slots.toolbar">
+      <div :class="toolbarStyles">
+        <slot name="toolbar" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { useDraggable } from '@vueuse/core';
+import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
+import { usePopoverState } from '../../hooks';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
+import { ResizeablePanelPlacement } from './props';
+import { ResizeablePanel, ResizeablePanelCollapseButtonContainer, ResizeablePanelCollapseButtonContainerPlacements, ResizeablePanelContent, ResizeablePanelPlacements, ResizeablePanelResizeBar, ResizeablePanelResizeBarPlacements, ResizeablePanelToolbar, ResizeablePanelToolbarPlacements } from './styles';
+
+export default defineComponent({
+  components: {
+    OrIconButton,
+  },
+
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: true,
+    },
+
+    width: {
+      type: Number,
+      default: 320,
+    },
+
+    minWidth: {
+      type: Number,
+      default: 256,
+    },
+
+    maxWidth: {
+      type: Number,
+      default: 384,
+    },
+
+    placement: {
+      type: String as PropType<`${ResizeablePanelPlacement}`>,
+      required: true,
+    },
+
+    resizeable: {
+      type: Boolean,
+      default: true,
+    },
+
+    collapsible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'update:state',
+
+    'open',
+    'close',
+  ],
+
+  expose: [
+    'root',
+
+    'state',
+
+    'open',
+    'close',
+    'toggle',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+    const resizeBar = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-resizeable-panel-v3',
+      ...ResizeablePanel,
+      ...ResizeablePanelPlacements[props.placement],
+    ]);
+
+    const contentStyles = computed(() => [
+      ...ResizeablePanelContent,
+    ]);
+
+    const resizeBarStyles = computed(() => [
+      ...ResizeablePanelResizeBar,
+      ...ResizeablePanelResizeBarPlacements[props.placement],
+    ]);
+
+    const collapseButtonContainerStyles = computed(() => [
+      ...ResizeablePanelCollapseButtonContainer,
+      ...ResizeablePanelCollapseButtonContainerPlacements[props.placement],
+    ]);
+
+    const toolbarStyles = computed(() => [
+      ...ResizeablePanelToolbar,
+      ...ResizeablePanelToolbarPlacements[props.placement],
+    ]);
+
+    // State
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
+
+    const collapseButtonIcon = computed(() => {
+      if (state.value === 'open') {
+        switch (props.placement) {
+          case ResizeablePanelPlacement.Top:
+            return 'keyboard_arrow_up';
+
+          case ResizeablePanelPlacement.Bottom:
+            return 'keyboard_arrow_down';
+
+          case ResizeablePanelPlacement.Left:
+            return 'keyboard_arrow_left';
+
+          case ResizeablePanelPlacement.Right:
+            return 'keyboard_arrow_right';
+        }
+      }
+
+      if (state.value === 'closed') {
+        switch (props.placement) {
+          case ResizeablePanelPlacement.Top:
+            return 'keyboard_arrow_down';
+
+          case ResizeablePanelPlacement.Bottom:
+            return 'keyboard_arrow_up';
+
+          case ResizeablePanelPlacement.Left:
+            return 'keyboard_arrow_right';
+
+          case ResizeablePanelPlacement.Right:
+            return 'keyboard_arrow_left';
+        }
+      }
+
+      return 'menu';
+    });
+
+    const currentDirection = computed(() => {
+      switch (props.placement) {
+        case ResizeablePanelPlacement.Top:
+        case ResizeablePanelPlacement.Bottom:
+          return 'height';
+      }
+
+      return 'width';
+    });
+
+    const currentSize = ref(props.width);
+
+    watch(() => props.width, (value) => {
+      currentSize.value = value;
+    });
+
+    const isResizing = ref(false);
+
+    // Effects
+    // #region Resize
+    let referencePoint = 0;
+
+    useDraggable(resizeBar, {
+      onStart: (_position, event) => {
+        isResizing.value = true;
+
+        switch (props.placement) {
+          case ResizeablePanelPlacement.Top:
+          case ResizeablePanelPlacement.Bottom:
+            referencePoint = event.y;
+            break;
+
+          case ResizeablePanelPlacement.Left:
+          case ResizeablePanelPlacement.Right:
+            referencePoint = event.x;
+            break;
+        }
+
+        document.body.style.userSelect = 'none';
+      },
+
+      onMove: (position) => {
+        let nextWidth = 0;
+
+        switch (props.placement) {
+          case ResizeablePanelPlacement.Top:
+            nextWidth = currentSize.value + (position.y - referencePoint);
+            referencePoint = position.y;
+            break;
+
+          case ResizeablePanelPlacement.Bottom:
+            nextWidth = currentSize.value + (referencePoint - position.y);
+            referencePoint = position.y;
+            break;
+
+          case ResizeablePanelPlacement.Left:
+            nextWidth = currentSize.value + (position.x - referencePoint);
+            referencePoint = position.x;
+            break;
+
+          case ResizeablePanelPlacement.Right:
+            nextWidth = currentSize.value + (referencePoint - position.x);
+            referencePoint = position.x;
+            break;
+        }
+
+        if (nextWidth < props.minWidth) {
+          nextWidth = props.minWidth;
+        }
+
+        if (nextWidth > props.maxWidth) {
+          nextWidth = props.maxWidth;
+        }
+
+        currentSize.value = nextWidth;
+      },
+
+      onEnd: () => {
+        isResizing.value = false;
+
+        document.body.style.userSelect = '';
+      },
+    });
+    // #endregion
+
+    return {
+      root,
+      resizeBar,
+
+      rootStyles,
+      contentStyles,
+      resizeBarStyles,
+      collapseButtonContainerStyles,
+      toolbarStyles,
+
+      state,
+      open,
+      close,
+      toggle,
+
+      collapseButtonIcon,
+      currentDirection,
+      currentSize,
+
+      isResizing,
+    };
+  },
+});
+</script>

package/src/components/or-resizeable-panel-v3/index.ts

@@ -0,0 +1,2 @@
+export { default as OrResizeablePanelV3 } from './OrResizeablePanel.vue';
+export * from './props';

package/src/components/or-resizeable-panel-v3/props.ts

@@ -0,0 +1,6 @@
+export enum ResizeablePanelPlacement {
+  Top = 'top',
+  Bottom = 'bottom',
+  Left = 'left',
+  Right = 'right',
+}

package/src/components/or-resizeable-panel-v3/styles.ts

@@ -0,0 +1,260 @@
+import { ResizeablePanelPlacement } from './props';
+
+export const ResizeablePanel: string[] = [
+  // Position
+  'relative',
+
+  // Layout
+  'shrink-0',
+];
+
+export const ResizeablePanelPlacements: Record<ResizeablePanelPlacement, string[]> = {
+  [ResizeablePanelPlacement.Top]: [
+    // Layout
+    'layout-column',
+  ],
+
+  [ResizeablePanelPlacement.Bottom]: [
+    // Layout
+    'layout-column-reverse',
+  ],
+
+  [ResizeablePanelPlacement.Left]: [
+    // Layout
+    'layout-row !items-stretch',
+  ],
+
+  [ResizeablePanelPlacement.Right]: [
+    // Layout
+    'layout-row-reverse !items-stretch',
+  ],
+};
+
+export const ResizeablePanelContent: string[] = [
+  // Layout
+  'grow',
+
+  // Overflow
+  'overflow-auto',
+
+  // Box
+  'max-w-full',
+  'max-h-full',
+
+  // Spacing
+  'px-md',
+  'py-md',
+];
+
+export const ResizeablePanelResizeBar: string[] = [
+  // Position
+  'relative z-1',
+
+  // Layout
+  'shrink-0',
+
+  // Layout (after)
+  'after:block',
+
+  // Theme (after)
+  'after:border-outline-variant',
+  'after:dark:border-outline-variant-dark',
+
+  // Theme (after, hover)
+  'after:hover:border-primary-hover',
+  'after:dark:hover:border-primary-hover-dark',
+
+  // Theme (after, activated)
+  'after:activated:border-primary-hover',
+  'after:dark:activated:border-primary-hover-dark',
+];
+
+export const ResizeablePanelResizeBarPlacements: Record<ResizeablePanelPlacement, string[]> = {
+  [ResizeablePanelPlacement.Top]: [
+    // Layout
+    'flex flex-col justify-center',
+
+    // Interactivity
+    'cursor-row-resize',
+
+    // Box
+    'h-[calc(theme(spacing.md)+1px)]',
+
+    // Spacing
+    '-my-[calc(theme(spacing.md)/2)]',
+
+    // Theme (after)
+    'after:border-b-1',
+  ],
+
+  [ResizeablePanelPlacement.Bottom]: [
+    // Layout
+    'flex flex-col justify-center',
+
+    // Interactivity
+    'cursor-row-resize',
+
+    // Box
+    'h-[calc(theme(spacing.md)+1px)]',
+
+    // Spacing
+    '-my-[calc(theme(spacing.md)/2)]',
+
+    // Theme (after)
+    'after:border-t-1',
+  ],
+
+  [ResizeablePanelPlacement.Left]: [
+    // Layout
+    'flex flex-row justify-center',
+
+    // Interactivity
+    'cursor-col-resize',
+
+    // Box
+    'w-[calc(theme(spacing.md)+1px)]',
+
+    // Spacing
+    '-mx-[calc(theme(spacing.md)/2)]',
+
+    // Theme (after)
+    'after:border-r-1',
+  ],
+
+  [ResizeablePanelPlacement.Right]: [
+    // Layout
+    'flex flex-row justify-center',
+
+    // Interactivity
+    'cursor-col-resize',
+
+    // Box
+    'w-[calc(theme(spacing.md)+1px)]',
+
+    // Spacing
+    '-mx-[calc(theme(spacing.md)/2)]',
+
+    // Theme (after)
+    'after:border-l-1',
+  ],
+};
+
+export const ResizeablePanelCollapseButtonContainer: string[] = [
+  // Position
+  'relative',
+
+  // Box
+  'w-fit',
+  'h-fit',
+
+  // Spacing
+  'px-[1px]',
+  'py-[1px]',
+
+  // Shape
+  'rounded-full',
+
+  // Typography
+  'leading-[0]',
+
+  // Theme
+  'theme-background-default',
+  'dark:theme-background-default-dark',
+
+  'theme-border-1-outline-variant',
+  'dark:theme-border-1-outline-variant-dark',
+];
+
+export const ResizeablePanelCollapseButtonContainerPlacements: Record<ResizeablePanelPlacement, string[]> = {
+  [ResizeablePanelPlacement.Top]: [
+    // Position
+    'left-md',
+    '-top-[3px]',
+
+    // Spacing
+    '-my-sm+',
+  ],
+
+  [ResizeablePanelPlacement.Bottom]: [
+    // Position
+    'left-md',
+    '-bottom-[3px]',
+
+    // Spacing
+    '-my-sm+',
+  ],
+
+  [ResizeablePanelPlacement.Left]: [
+    // Position
+    'top-md',
+    '-left-[3px]',
+
+    // Spacing
+    '-mx-sm+',
+  ],
+
+  [ResizeablePanelPlacement.Right]: [
+    // Position
+    'top-md',
+    '-right-[3px]',
+
+    // Spacing
+    '-mx-sm+',
+  ],
+};
+
+export const ResizeablePanelToolbar: string[] = [
+  // Layout
+  'shrink-0',
+
+  // Overflow
+  'overflow-auto',
+
+  // Spacing
+  'px-md',
+  'py-md',
+
+  'gap-md',
+
+  // Theme
+  'theme-border-1-outline-variant',
+  'dark:theme-border-1-outline-variant-dark',
+];
+
+export const ResizeablePanelToolbarPlacements: Record<ResizeablePanelPlacement, string[]> = {
+  [ResizeablePanelPlacement.Top]: [
+    // Layout
+    'layout-row',
+
+    // Theme
+    '!border-t-0',
+    '!border-x-0',
+  ],
+
+  [ResizeablePanelPlacement.Bottom]: [
+    // Layout
+    'layout-row',
+
+    // Theme
+    '!border-b-0',
+    '!border-x-0',
+  ],
+
+  [ResizeablePanelPlacement.Left]: [
+    // Layout
+    'layout-column',
+
+    // Theme
+    '!border-l-0',
+    '!border-y-0',
+  ],
+
+  [ResizeablePanelPlacement.Right]: [
+    // Layout
+    'layout-column',
+
+    // Theme
+    '!border-r-0',
+    '!border-y-0',
+  ],
+};