@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.10

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue

@@ -34,7 +34,11 @@
         </div>
       </div>
       <div class="bk-sidebar-detached-inner" :style="innerStyle">
-        <slot :width="userWidth" :height="userHeight" />
+        <slot
+          :width="userWidth"
+          :height="userHeight"
+          :is-resizing="isResizing"
+        />
         <template v-if="!size && !isMinimized">
           <div
             class="bk-sidebar-detached-handle bk-is-bottom"
@@ -54,147 +58,102 @@
   </ViewportBlockingRect>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   useBlokkli,
   ref,
   onBeforeUnmount,
   computed,
   watch,
-  useState,
-} from '#imports'
-import { Icon, ViewportBlockingRect, ScrollBoundary } from '#blokkli/components'
-import type { BlokkliIcon } from '#blokkli-build/icons'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-
-const props = withDefaults(
-  defineProps<{
-    id: string
-    title: string
-    icon: BlokkliIcon
-    minWidth?: number
-    minHeight?: number
-    size?: { width: number; height: number }
-    isLeft?: boolean
-  }>(),
-  {
-    minWidth: 300,
-    minHeight: 300,
-    size: undefined,
-  },
-)
-
-defineEmits(['close'])
-
-const { storage, ui, keyboard, selection } = useBlokkli()
-
-function onPointerMove(e: PointerEvent) {
+  useState
+} from "#imports";
+import { Icon, ViewportBlockingRect, ScrollBoundary } from "#blokkli/components";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  icon: { type: null, required: true },
+  minWidth: { type: Number, required: false, default: 300 },
+  minHeight: { type: Number, required: false, default: 300 },
+  size: { type: Object, required: false, default: void 0 },
+  isLeft: { type: Boolean, required: false }
+});
+defineEmits(["close"]);
+const { storage, ui, keyboard, selection } = useBlokkli();
+function onPointerMove(e) {
   if (keyboard.isPressingSpace.value || selection.isDragging.value) {
-    return
+    return;
   }
-
-  e.stopPropagation()
+  e.stopPropagation();
 }
-
-const BASE_Z = 190000
-
+const BASE_Z = 19e4;
 const isMinimized = storage.use(
-  computed(() => 'sidebar:detached:minimized:' + props.id),
-  false,
-)
-const storageKey = computed(() => 'sidebar:detached:size:' + props.id)
-const focusedSidebar = storage.use('sidebar:focused', '')
-const zStorageKey = computed(() => 'sidebar:detached:zIndex:' + props.id)
-const globalZ = useState('blokkli:zIndex', () => BASE_Z)
-const z = storage.use(zStorageKey.value, BASE_Z)
-
+  computed(() => "sidebar:detached:minimized:" + props.id),
+  false
+);
+const storageKey = computed(() => "sidebar:detached:size:" + props.id);
+const focusedSidebar = storage.use("sidebar:focused", "");
+const zStorageKey = computed(() => "sidebar:detached:zIndex:" + props.id);
+const globalZ = useState("blokkli:zIndex", () => BASE_Z);
+const z = storage.use(zStorageKey.value, BASE_Z);
 if (z.value > globalZ.value) {
-  globalZ.value = z.value
+  globalZ.value = z.value;
 }
-
 const offsetX = computed(() => {
-  if (
-    x.value + width.value >
-    ui.visibleViewport.value.x + ui.visibleViewport.value.width
-  ) {
-    return (
-      x.value +
-      width.value -
-      (ui.visibleViewport.value.x + ui.visibleViewport.value.width) +
-      15
-    )
+  if (x.value + width.value > ui.visibleViewport.value.x + ui.visibleViewport.value.width) {
+    return x.value + width.value - (ui.visibleViewport.value.x + ui.visibleViewport.value.width) + 15;
   } else if (x.value < ui.visibleViewport.value.x) {
-    return x.value - ui.visibleViewport.value.x - 15
+    return x.value - ui.visibleViewport.value.x - 15;
   }
-  return 0
-})
-
+  return 0;
+});
 const storedData = storage.use(storageKey, {
   x: props.isLeft ? 0 : window.innerWidth - 360,
   y: 50,
   width: 360,
   height: 520,
   viewportWidth: 0,
-  viewportHeight: 0,
-})
-
-type MouseMode =
-  | 'move'
-  | 'resize-right'
-  | 'resize-bottom'
-  | 'resize-bottom-right'
-  | ''
-
-const isDragging = ref(false)
-const isResizing = ref(false)
-
-const mouseMode = ref<MouseMode>('')
-
-const x = ref(0)
-const y = ref(0)
-const userWidth = ref(storedData.value.width)
-const userHeight = ref(storedData.value.height)
-
+  viewportHeight: 0
+});
+const isDragging = ref(false);
+const mouseMode = ref("");
+const isResizing = computed(() => mouseMode.value.includes("resize"));
+const x = ref(0);
+const y = ref(0);
+const userWidth = ref(storedData.value.width);
+const userHeight = ref(storedData.value.height);
 const width = computed(() => {
-  return props.size?.width || userWidth.value
-})
-
+  return props.size?.width || userWidth.value;
+});
 const height = computed(() => {
-  return props.size?.height || userHeight.value
-})
-
-const headerHeight = computed(() => 40)
-
-const startMouseX = ref(0)
-const startMouseY = ref(0)
-
+  return props.size?.height || userHeight.value;
+});
+const headerHeight = computed(() => 40);
+const startMouseX = ref(0);
+const startMouseY = ref(0);
 const rootCursor = computed(() => {
   switch (mouseMode.value) {
-    case 'resize-bottom-right':
-      return 'se-resize'
-    case 'resize-bottom':
-      return 'ns-resize'
-    case 'resize-right':
-      return 'ew-resize'
-    case 'move':
-      return 'move'
+    case "resize-bottom-right":
+      return "se-resize";
+    case "resize-bottom":
+      return "ns-resize";
+    case "resize-right":
+      return "ew-resize";
+    case "move":
+      return "move";
   }
-
-  return ''
-})
-
+  return "";
+});
 watch(rootCursor, (cursor) => {
-  document.documentElement.style.cursor = cursor
-})
-
+  document.documentElement.style.cursor = cursor;
+});
 watch(mouseMode, (mode) => {
   if (mode) {
-    document.documentElement.classList.add('bk-is-sidebar-interacting')
+    document.documentElement.classList.add("bk-is-sidebar-interacting");
   } else {
-    document.documentElement.classList.remove('bk-is-sidebar-interacting')
+    document.documentElement.classList.remove("bk-is-sidebar-interacting");
   }
-})
-
+});
 const updateStored = () => {
   storedData.value = {
     x: x.value,
@@ -202,135 +161,111 @@ const updateStored = () => {
     width: width.value,
     height: height.value,
     viewportWidth: window.innerWidth,
-    viewportHeight: window.innerHeight,
-  }
-}
-
+    viewportHeight: window.innerHeight
+  };
+};
 watch(
   () => props.size,
   () => {
-    updateStored()
-  },
-)
-
+    updateStored();
+  }
+);
 const style = computed(() => {
   return {
     transform: `translate(${x.value - offsetX.value}px, ${y.value}px)`,
-    zIndex: z.value,
-  }
-})
-
+    zIndex: z.value
+  };
+});
 const innerStyle = computed(() => {
   return {
-    width: (props.size?.width || width.value) + 'px',
-    height: isMinimized.value ? 0 : (props.size?.height || height.value) + 'px',
-  }
-})
-
+    width: (props.size?.width || width.value) + "px",
+    height: isMinimized.value ? 0 : (props.size?.height || height.value) + "px"
+  };
+});
 const onFocus = () => {
-  focusedSidebar.value = props.id
-  globalZ.value++
-  z.value = globalZ.value
-}
-
-const onMouseDown = (e: MouseEvent, mode: MouseMode) => {
-  mouseMode.value = mode
-  startMouseX.value = e.clientX
-  startMouseY.value = e.clientY
-
-  window.addEventListener('pointermove', onMouseMove, { capture: true })
-  window.addEventListener('pointerup', onMouseUp, { capture: true })
-}
-
-const setCoordinates = (newX: number, newY: number) => {
+  focusedSidebar.value = props.id;
+  globalZ.value++;
+  z.value = globalZ.value;
+};
+const onMouseDown = (e, mode) => {
+  mouseMode.value = mode;
+  startMouseX.value = e.clientX;
+  startMouseY.value = e.clientY;
+  window.addEventListener("pointermove", onMouseMove, { capture: true });
+  window.addEventListener("pointerup", onMouseUp, { capture: true });
+};
+const setCoordinates = (newX, newY) => {
   x.value = Math.min(
     Math.max(newX, ui.visibleViewport.value.x),
-    ui.visibleViewport.value.width + ui.visibleViewport.value.x - width.value,
-  )
+    ui.visibleViewport.value.width + ui.visibleViewport.value.x - width.value
+  );
   y.value = Math.min(
     Math.max(newY, ui.visibleViewport.value.y),
-    ui.visibleViewport.value.y +
-      ui.visibleViewport.value.height -
-      headerHeight.value,
-  )
-}
-
-const setSizes = (newWidth?: number, newHeight?: number) => {
-  if (newWidth !== undefined) {
+    ui.visibleViewport.value.y + ui.visibleViewport.value.height - headerHeight.value
+  );
+};
+const setSizes = (newWidth, newHeight) => {
+  if (newWidth !== void 0) {
     userWidth.value = Math.min(
       Math.max(newWidth, props.minWidth),
-      window.innerWidth - 300,
-    )
+      window.innerWidth - 300
+    );
   }
-  if (newHeight !== undefined) {
+  if (newHeight !== void 0) {
     userHeight.value = Math.min(
       Math.max(newHeight, props.minHeight),
-      window.innerHeight - 50,
-    )
+      window.innerHeight - 50
+    );
   }
-}
-
-const onMouseMove = (e: MouseEvent) => {
-  if (mouseMode.value === 'move') {
+};
+const onMouseMove = (e) => {
+  if (mouseMode.value === "move") {
     setCoordinates(
       storedData.value.x + e.clientX - startMouseX.value,
-      storedData.value.y + e.clientY - startMouseY.value,
-    )
-  } else if (mouseMode.value === 'resize-right') {
-    setSizes(storedData.value.width + e.clientX - startMouseX.value)
-  } else if (mouseMode.value === 'resize-bottom') {
-    setSizes(undefined, storedData.value.height + e.clientY - startMouseY.value)
-  } else if (mouseMode.value === 'resize-bottom-right') {
+      storedData.value.y + e.clientY - startMouseY.value
+    );
+  } else if (mouseMode.value === "resize-right") {
+    setSizes(storedData.value.width + e.clientX - startMouseX.value);
+  } else if (mouseMode.value === "resize-bottom") {
+    setSizes(void 0, storedData.value.height + e.clientY - startMouseY.value);
+  } else if (mouseMode.value === "resize-bottom-right") {
     setSizes(
       storedData.value.width + e.clientX - startMouseX.value,
-      storedData.value.height + e.clientY - startMouseY.value,
-    )
+      storedData.value.height + e.clientY - startMouseY.value
+    );
   }
-}
-
+};
 const onMouseUp = () => {
-  isDragging.value = false
-  isResizing.value = false
-  mouseMode.value = ''
-  window.removeEventListener('pointermove', onMouseMove, { capture: true })
-  window.removeEventListener('pointerup', onMouseUp, { capture: true })
-
-  updateStored()
-}
-
-const el = ref<HTMLDivElement | null>(null)
-
+  isDragging.value = false;
+  mouseMode.value = "";
+  window.removeEventListener("pointermove", onMouseMove, { capture: true });
+  window.removeEventListener("pointerup", onMouseUp, { capture: true });
+  updateStored();
+};
+const el = ref(null);
 const recalculatePositions = () => {
-  const storedViewportWidth =
-    storedData.value.viewportWidth || window.innerWidth
-  const storedViewportHeight =
-    storedData.value.viewportHeight || window.innerHeight
-  const diffWidth = window.innerWidth - storedViewportWidth + width.value
-  const diffHeight = window.innerHeight - storedViewportHeight
-
+  const storedViewportWidth = storedData.value.viewportWidth || window.innerWidth;
+  const storedViewportHeight = storedData.value.viewportHeight || window.innerHeight;
+  const diffWidth = window.innerWidth - storedViewportWidth + width.value;
+  const diffHeight = window.innerHeight - storedViewportHeight;
   if (x.value > window.innerWidth / 2) {
-    setCoordinates(x.value + diffWidth, y.value + diffHeight)
+    setCoordinates(x.value + diffWidth, y.value + diffHeight);
   } else {
-    setCoordinates(storedData.value.x, storedData.value.y)
+    setCoordinates(storedData.value.x, storedData.value.y);
   }
-
-  storedData.value.viewportWidth = window.innerWidth
-  storedData.value.viewportHeight = window.innerHeight
-}
-
-recalculatePositions()
-
+  storedData.value.viewportWidth = window.innerWidth;
+  storedData.value.viewportHeight = window.innerHeight;
+};
+recalculatePositions();
 watch(offsetX, () => {
-  updateStored()
-})
-
-onBlokkliEvent('ui:resized', () => {
-  recalculatePositions()
-  updateStored()
-})
-
+  updateStored();
+});
+onBlokkliEvent("ui:resized", () => {
+  recalculatePositions();
+  updateStored();
+});
 onBeforeUnmount(() => {
-  window.removeEventListener('pointermove', onMouseMove, { capture: true })
-  window.removeEventListener('pointerup', onMouseUp, { capture: true })
-})
+  window.removeEventListener("pointermove", onMouseMove, { capture: true });
+  window.removeEventListener("pointerup", onMouseUp, { capture: true });
+});
 </script>

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue.d.ts

@@ -0,0 +1,42 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    id: string;
+    title: string;
+    icon: BlokkliIcon;
+    minWidth?: number;
+    minHeight?: number;
+    size?: {
+        width: number;
+        height: number;
+    };
+    isLeft?: boolean;
+};
+declare var __VLS_16: {}, __VLS_30: {
+    width: number;
+    height: number;
+    isResizing: boolean;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_16) => any;
+} & {
+    default?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: {
+        width: number;
+        height: number;
+    };
+    minWidth: number;
+    minHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};