feat: smart separators

holtwick · Apr 25, 2024 · 5add083 · 5add083
1 parent 3f5f847
commit 5add083
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 60 deletions.
diff --git a/lib/basic/oui-resizeable.styl b/lib/basic/oui-resizeable.styl
@@ -2,10 +2,9 @@
 
 .oui-resizeable {
   position: relative;
-  box-sizing: border-box;
 
   .oui-resizeable-separator {
-    box-sizing: border-box;
+    position: static;
 
     &._left {
       left: var(--resizeable-border-size, 0);

diff --git a/lib/basic/oui-resizeable.vue b/lib/basic/oui-resizeable.vue
@@ -1,12 +1,9 @@
 <script lang="ts" setup>
 import { useLocalStorage } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
-import type { LoggerInterface } from 'zeed'
-import { Logger } from 'zeed'
-import { px } from './lib'
+import { ref } from 'vue'
 import OuiSeparator from './oui-separator.vue'
 
-import './oui-resizeable.styl'
+// import './oui-resizeable.styl'
 
 const props = withDefaults(defineProps<{
   name: string
@@ -17,53 +14,29 @@ const props = withDefaults(defineProps<{
 }>(), {
 })
 
-// const modelSize = defineModel<number>({ required: false, default: props.size })
-
-const log: LoggerInterface = Logger('oui-resizeable')
-
 const paneSize = useLocalStorage(`oui.resizeable.${props.name}`, props.size)
 
-function setSize(value: number) {
-  paneSize.value = Math.max(props.minSize, Math.min(props.maxSize, value))
-}
-
-setSize(paneSize.value)
-
-const root = ref()
-
-const borderSize = ref(0)
-
-const style = computed(() => {
-  if (props.side === 'top' || props.side === 'bottom') {
-    return {
-      'height': px(paneSize.value),
-      '--resizeable-border-size': borderSize.value,
-    }
-  }
-  else {
-    return {
-      'width': px(paneSize.value),
-      
-      '--resizeable-border-size': borderSize.value,
-    }
-  }
-})
-
-onMounted(() => {
-  const borderSize = Number.parseFloat(window.getComputedStyle(root.value).borderLeftWidth)
-})
+const style = ref()
 </script>
 
 <template>
-  <div ref="root" :style="style" class="oui-resizeable">
-    <OuiSeparator
-      v-model="paneSize"
-      :side="side"
-      :min-size="minSize"
-      :max-size="maxSize"
-      class="oui-resizeable-separator"
-    />
-    name={{ name }} size={{ paneSize }}
-    <slot />
-  </div>
+  <template v-if="side === 'right' || side === 'bottom'">
+    <div :style="style" class="oui-resizeable" v-bind="$attrs">
+      <slot />
+    </div>
+  </template>
+  <OuiSeparator
+    v-model="paneSize"
+    v-model:style-value="style"
+    :side="side"
+    :min-size="minSize"
+    :max-size="maxSize"
+    style="position: relative;"
+    class="oui-resizeable-separator"
+  />
+  <template v-if="side === 'left' || side === 'top'">
+    <div :style="style" class="oui-resizeable" v-bind="$attrs">
+      <slot />
+    </div>
+  </template>
 </template>
diff --git a/lib/basic/oui-separator.styl b/lib/basic/oui-separator.styl
@@ -1,8 +1,13 @@
 @require "../../stylus/index.styl";
 
 .oui-separator {
+  position: relative;
   background: var(--separator, transparent);
 
+  &._absolute {
+    position: absolute;
+  }
+
   &:hover {
     background: var(--separator-hover, var(--fg));
   }
@@ -12,7 +17,6 @@
   }
 
   &._left, &._right {
-    position: absolute;
     width: 1px;
     height: 100%;
     cursor: unquote("col-resize");
@@ -30,11 +34,9 @@
   }
 
   &._top, &._bottom {
-    position: absolute;
     height: 1px;
     width: 100%;
     cursor: unquote("row-resize");
-    sepHandleSize = px(5);
 
     &:after {
       position: absolute;
@@ -47,4 +49,20 @@
       z-index: -z-index-floating;
     }
   }
+
+  &._left {
+    left: var(--separator-shift, 0);
+  }
+
+  &._right {
+    right: var(--separator-shift, 0);
+  }
+
+  &._top {
+    top: var(--separator-shift, 0);
+  }
+
+  &._bottom {
+    bottom: var(--separator-shift, 0);
+  }
 }
diff --git a/lib/basic/oui-separator.vue b/lib/basic/oui-separator.vue
@@ -2,22 +2,38 @@
 import { ref } from 'vue'
 import type { OuiDraggableEvent } from './_types'
 import OuiDraggable from './oui-draggable.vue'
+import { px } from './lib'
 
 import './oui-separator.styl'
 
 const props = withDefaults(defineProps<{
   side: 'top' | 'left' | 'right' | 'bottom'
   minSize: number
   maxSize: number
+  absolute?: boolean
 }>(), {
+  absolute: false,
 })
 
 const _active = ref(false)
 
 const modelSize = defineModel<number>({ required: true })
+const modelStyle = defineModel<any>('styleValue', { required: false })
+
+function updateStyle() {
+  modelStyle.value = {
+    [props.side === 'top' || props.side === 'bottom'
+      ? 'height'
+      : 'width'
+    ]: px(modelSize.value),
+  }
+}
+
+updateStyle()
 
 function setSize(value: number) {
   modelSize.value = Math.max(props.minSize, Math.min(props.maxSize, value))
+  updateStyle()
 }
 
 let startSize = 0
@@ -50,6 +66,7 @@ function doHandleMoveEnd(e: OuiDraggableEvent) {
     :class="{
       [`_${side}`]: true,
       _active,
+      _absolute: absolute,
     }"
     @move-start="doHandleMoveStart"
     @move-end="doHandleMoveEnd"

diff --git a/lib/basic/oui-tableview.styl b/lib/basic/oui-tableview.styl
@@ -8,7 +8,12 @@
   overflow-x: auto; // this does not work together with sticky headers
   border-collapse: collapse;
   position: relative;
-  --separator-handle: transparent;
+
+  .oui-separator {
+    // --separator: red;
+    // --separator-handle: green;
+    position: absolute;
+  }
 
   ._tableview {
     &_row {

diff --git a/lib/basic/oui-tableview.vue b/lib/basic/oui-tableview.vue
@@ -151,7 +151,11 @@ function doSelect(pos: number) {
         side="right"
         :min-size="columns[i].minWidth ?? 80"
         :max-size="columns[i].maxWidth ?? 300"
-        :style="`left: ${px(arraySum(widths.slice(0, i + 1)) - 2)}`"
+        data-test="hello"
+        :style="{
+          color: 'green',
+          left: px(arraySum(widths.slice(0, i + 1)) - 1),
+        }"
       />
     </template>
   </div>

diff --git a/src/app-resizeable.vue b/src/app-resizeable.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
-import { OuiObject, OuiResizeable } from '@/lib'
+import { OuiCheckbox, OuiObject, OuiResizeable } from '@/lib'
 
 import './app-resizeable.styl'
 
@@ -12,6 +12,7 @@ const state = reactive({
   selected: undefined,
   fillLast: true,
   scrollToEnd: false,
+  showSepHandle: false,
 })
 
 const minSize = 100
@@ -21,7 +22,15 @@ const size = 200
 
 <template>
   <h2>Resizeable</h2>
-  <div class="app-resizeable" style="--separator-handle: rgba(255,0,0,0.25)">
+  <p>
+    <OuiCheckbox v-model="state.showSepHandle" switch>
+      showSepHandle
+    </OuiCheckbox>
+  </p>
+  <div
+    class="app-resizeable"
+    :style="state.showSepHandle && '--separator-handle: rgba(255,0,0,0.25)'"
+  >
     <OuiResizeable side="bottom" :min-size="minSize" :max-size="maxSize" :size="size" class="top" name="top">
       Top
     </OuiResizeable>
@@ -39,6 +48,7 @@ const size = 200
     <OuiResizeable side="top" :min-size="minSize" :max-size="maxSize" :size="size" class="bottom" name="bottom">
       Bottom
     </OuiResizeable>
+
+    <OuiObject :value="state" />
   </div>
-  <OuiObject :value="state" />
 </template>
diff --git a/src/app-tableview.vue b/src/app-tableview.vue
@@ -12,6 +12,7 @@ const state = reactive({
   selected: undefined,
   fillLast: true,
   scrollToEnd: false,
+  showSepHandle: false,
 })
 
 const columns: OuiTableColumn[] = [
@@ -62,8 +63,11 @@ const x = ref(0)
     <OuiCheckbox v-model="state.scrollToEnd" switch>
       scrollToEnd
     </OuiCheckbox>
+    <OuiCheckbox v-model="state.showSepHandle" switch>
+      showSepHandle
+    </OuiCheckbox>
   </p>
-  <div style="--separator-handle: rgba(255,0,0,0.25)">
+  <div :style="state.showSepHandle && '--separator-handle: rgba(255,0,0,0.25)'">
     <OuiTableview
       v-model="state.selected"
       v-model:sort="state.sort"