revert: remove bi-directional support

apps/ui/src/components/Ui/ResizableHorizontal.vue

@@ -3,23 +3,19 @@ import { lsGet, lsSet } from '@/helpers/utils';
 
 const CACHE_KEY_SUFFIX = 'width';
 
-const props = withDefaults(
-  defineProps<{
-    id: string;
-    default: number;
-    max?: number;
-    min?: number;
-    resizeDirection?: 'LEFT' | 'RIGHT';
-  }>(),
-  { resizeDirection: 'RIGHT' }
-);
+const props = defineProps<{
+  id: string;
+  default: number;
+  max?: number;
+  min?: number;
+}>();
 
 const containerEl = ref<HTMLElement | null>(null);
 const sliderEl = ref<HTMLElement | null>(null);
 const initialized = ref(false);
-const sliderOriginalPositionX = ref(0);
 const dragging = ref(false);
 const width = ref(lsGet(`${props.id}.${CACHE_KEY_SUFFIX}`, props.default));
+const sliderOriginalPositionX = ref(0);
 
 const { x, y } = useDraggable(sliderEl, {
   axis: 'x',
@@ -32,15 +28,14 @@ const { x, y } = useDraggable(sliderEl, {
 });
 
 const containerWidth = computed(() => {
-  const offset =
-    sliderOriginalPositionX.value +
-    x.value * (props.resizeDirection === 'RIGHT' ? 1 : -1);
-  const newWidth = Math.round(width.value + offset);
+  const newWidth = Math.round(
+    width.value + sliderOriginalPositionX.value - x.value
+  );
 
   if (props.max && newWidth > props.max) return props.max;
   if (props.min && newWidth < props.min) return props.min;
 
-  return Math.round(newWidth);
+  return newWidth;
 });
 
 function initResizer() {
@@ -74,9 +69,7 @@ onMounted(() => {
       :class="[
         'slider',
         {
-          dragging: dragging,
-          left: resizeDirection === 'LEFT',
-          right: resizeDirection === 'RIGHT'
+          dragging: dragging
         }
       ]"
     />
@@ -94,10 +87,6 @@ onMounted(() => {
     @apply left-[-#{calc($sliderSize / 2)}];
   }
 
-  &.right {
-    @apply right-[-#{calc($sliderSize / 2)}];
-  }
-
   &:hover,
   &.dragging {
     @apply bg-skin-border cursor-col-resize;