@mlightcad/ui-components 0.0.6 → 0.0.8

package/src/composable/useResize.ts

@@ -0,0 +1,184 @@
+import { onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue'
+
+import { Rect } from './types'
+
+/**
+ * Resize the specified element when moving mouse to its
+ * - right border, bottom border, and right-bottom corner if argument `reverse` is false
+ * - or left border, bottom border, and left-bottom corner if argument `reverse` is true
+ * @param targetRef Input element to resize
+ * @param reverse Input flag to decide where to resize the element
+ * @param minSize Input minimum size to resize.
+ * @returns Return the following data.
+ * - width: new width of the element after resized
+ * - height: new height of the element after resized
+ * - isResizing: flag to indicate whether the element is in resizing state
+ */
+export function useResize(
+  targetRef: Ref<HTMLElement | null>,
+  reverse: Ref<boolean> = ref(false),
+  minSize: { width: number; height: number } = { width: 20, height: 40 }
+) {
+  const resizedBoundingRect = ref<Rect>({
+    width: null,
+    height: null,
+    left: null,
+    top: null
+  })
+  const isResizing = ref(false)
+  let initialLeft = 0
+  let initialWidth = 0
+  let initialHeight = 0
+  let startX = 0
+  let startY = 0
+  const resizeThreshold = 5 // Defines the area where resize can be triggered
+  const resizeDirection = ref<'left' | 'right' | 'bottom' | 'right-bottom-corner' | 'left-bottom-corner' | null>(
+    null
+  ) // Track the resize direction
+
+  const onMouseMove = (event: MouseEvent) => {
+    if (!targetRef.value) return
+
+    if (!isResizing.value) {
+      const rect = targetRef.value.getBoundingClientRect()
+      const offsetX = event.clientX - rect.left
+      const offsetY = event.clientY - rect.top
+
+      // Check if the mouse is near the borders or the corner
+      const nearLeft = offsetX <= resizeThreshold
+      const nearRight = offsetX >= rect.width - resizeThreshold
+      const nearBottom = offsetY >= rect.height - resizeThreshold
+
+      // Set the resize cursor based on the position
+      if (nearLeft && nearBottom && reverse.value) {
+        targetRef.value.style.cursor = 'nesw-resize' // Change to bottom-right resize cursor
+        resizeDirection.value = 'left-bottom-corner'
+      } else if (nearRight && nearBottom && !reverse.value) {
+        targetRef.value.style.cursor = 'nwse-resize' // Change to bottom-left resize cursor
+        resizeDirection.value = 'right-bottom-corner'
+      } else if (nearLeft && reverse.value) {
+        targetRef.value.style.cursor = 'ew-resize' // Change to left-side resize cursor
+        resizeDirection.value = 'left'
+      } else if (nearRight && !reverse.value) {
+        targetRef.value.style.cursor = 'ew-resize' // Change to right-side resize cursor
+        resizeDirection.value = 'right'
+      } else if (nearBottom) {
+        targetRef.value.style.cursor = 'ns-resize' // Change to bottom-side resize cursor
+        resizeDirection.value = 'bottom'
+      } else {
+        targetRef.value.style.cursor = '' // Reset cursor if not near the edges
+        resizeDirection.value = null
+      }
+    } else {
+      // While resizing, update dimensions based on the direction
+      const deltaX = event.clientX - startX
+      const deltaY = event.clientY - startY
+
+      if (
+        resizeDirection.value === 'left' ||
+        resizeDirection.value === 'left-bottom-corner'
+      ) {
+        resizedBoundingRect.value.width = Math.max(
+          minSize.width,
+          initialWidth - deltaX
+        )
+        resizedBoundingRect.value.left = initialLeft + deltaX
+        targetRef.value.style.left = resizedBoundingRect.value.left + 'px'
+        targetRef.value.style.width = resizedBoundingRect.value.width + 'px'
+      }
+      if (
+        resizeDirection.value === 'right' ||
+        resizeDirection.value === 'right-bottom-corner'
+      ) {
+        resizedBoundingRect.value.width = Math.max(
+          minSize.width,
+          initialWidth + deltaX
+        )
+        targetRef.value.style.width = resizedBoundingRect.value.width + 'px'
+      }
+      if (
+        resizeDirection.value === 'bottom' ||
+        resizeDirection.value === 'left-bottom-corner' ||
+        resizeDirection.value === 'right-bottom-corner'
+      ) {
+        resizedBoundingRect.value.height = Math.max(
+          minSize.height,
+          initialHeight + deltaY
+        )
+        targetRef.value.style.height = resizedBoundingRect.value.height + 'px'
+      }
+    }
+  }
+
+  const onMouseDown = (event: MouseEvent) => {
+    if (!targetRef.value || !resizeDirection.value) return
+
+    const rect = targetRef.value.getBoundingClientRect()
+    startX = event.clientX
+    startY = event.clientY
+
+    initialWidth = rect.width
+    initialHeight = rect.height
+    initialLeft = rect.left
+
+    // Set width and height before resizing starts
+    resizedBoundingRect.value.width = initialWidth
+    resizedBoundingRect.value.height = initialHeight
+    resizedBoundingRect.value.left = rect.left
+    resizedBoundingRect.value.top = rect.top
+
+    isResizing.value = true
+
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+  }
+
+  const onMouseUp = () => {
+    isResizing.value = false
+    resizeDirection.value = null
+
+    // Reset the cursor to default after resizing
+    if (targetRef.value) {
+      targetRef.value.style.cursor = ''
+    }
+
+    document.removeEventListener('mousemove', onMouseMove)
+    document.removeEventListener('mouseup', onMouseUp)
+  }
+
+  const cleanupListeners = () => {
+    if (targetRef.value) {
+      targetRef.value.removeEventListener('mousedown', onMouseDown)
+      targetRef.value.removeEventListener('mousemove', onMouseMove)
+    }
+    document.removeEventListener('mouseup', onMouseUp)
+  }
+
+  const setupListeners = () => {
+    if (targetRef.value) {
+      targetRef.value.addEventListener('mousedown', onMouseDown)
+      targetRef.value.addEventListener('mousemove', onMouseMove)
+    }
+  }
+
+  onMounted(() => {
+    if (targetRef.value) {
+      setupListeners()
+    }
+  })
+
+  onBeforeUnmount(() => {
+    cleanupListeners()
+  })
+
+  // Watch for changes in the targetRef, to handle cases where v-if makes the element appear/disappear
+  watch(targetRef, newVal => {
+    if (newVal) {
+      setupListeners()
+    } else {
+      cleanupListeners()
+    }
+  })
+
+  return { rect: resizedBoundingRect, isResizing }
+}

package/src/composable/useTransition.ts

@@ -0,0 +1,67 @@
+import { onBeforeUnmount, onMounted, Ref, watch } from 'vue'
+
+/**
+ * Add and clean transition style for the specified element
+ * @param targetRef Input element to add and clean transition style
+ * @param reversed Input flag whether to reverse cllapse icon
+ * @param collapsed Input flag to indicate whether the element is collapsed
+ */
+export function useTransition(
+  targetRef: Ref<HTMLElement | null>,
+  reversed: Ref<boolean>,
+  collapsed: Ref<boolean>,
+) {
+  // Clean transition logic
+  function cleanTransition() {
+    if (targetRef.value) {
+      // Here you can clean up or reset the style after transition
+      targetRef.value.style.transition = '' // Reset any inline transitions
+    }
+  }
+
+  const cleanupListeners = () => {
+    if (targetRef.value) {
+      targetRef.value.removeEventListener('transitionend', cleanTransition)
+    }
+  }
+
+  const setupListeners = () => {
+    if (targetRef.value) {
+      targetRef.value.addEventListener('transitionend', cleanTransition)
+    }
+  }
+
+  // Attach and remove the transitionend event listener
+  onMounted(() => {
+    if (targetRef.value) {
+      targetRef.value.addEventListener('transitionend', cleanTransition)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (targetRef.value) {
+      targetRef.value.removeEventListener('transitionend', cleanTransition)
+    }
+  })
+
+  // Watch for changes in the targetRef, to handle cases where v-if makes the element appear/disappear
+  watch(targetRef, newVal => {
+    if (newVal) {
+      setupListeners()
+    } else {
+      cleanupListeners()
+    }
+  })
+
+  // Add transition style
+  watch(collapsed, () => {
+    if (targetRef.value) {
+      const element = targetRef.value as HTMLElement
+      if (reversed.value) {
+        element.style.transition = 'width 0.3s ease-out, left 0.3s ease-out'
+      } else {
+        element.style.transition = 'width 0.3s ease'
+      }
+    }
+  })
+}

package/src/composable/useWindowSize.ts

@@ -0,0 +1,25 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+/**
+ * Get window size
+ * @returns Return window size
+ */
+export function useWindowSize() {
+  const windowWidth = ref(window.innerWidth)
+  const windowHeight = ref(window.innerHeight)
+
+  const updateWindowSize = () => {
+    windowWidth.value = window.innerWidth
+    windowHeight.value = window.innerHeight
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', updateWindowSize)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateWindowSize)
+  })
+
+  return { windowWidth, windowHeight }
+}

package/src/index.ts

@@ -1,11 +1,20 @@
-import MlToolbar from './MlToolbar.vue'
-export { MlToolbar }
-export type { MlButtonData } from './MlToolbar.vue'
+import MlCollapse from './components/MlCollapse.vue'
+import MlDropdown from './components/MlDropdown.vue'
+import MlLanguage from './components/MlLanguage.vue'
+import MlToolbar from './components/MlToolbar.vue'
+import MlToolPalette from './components/MlToolPalette.vue'
+export { MlCollapse, MlDropdown, MlLanguage, MlToolbar, MlToolPalette }
+export type { MlDropdownMenuItem } from './components/MlDropdown.vue'
+export type { MlButtonData } from './components/MlToolbar.vue'
 
 // Optionally, export them as a plugin for Vue
 export default {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   install(app: any) {
+    app.component('MlCollapse', MlDropdown)
+    app.component('MlDropdown', MlDropdown)
+    app.component('MlLanguage', MlLanguage)
     app.component('MlToolbar', MlToolbar)
+    app.component('MlToolPalette', MlToolPalette)
   }
 }

package/src/svg/arrow-left.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 1024 1024"
+>
+  <path
+    fill="currentColor"
+    d="M609.408 149.376L277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0a30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688a29.12 29.12 0 0 0-41.728 0"
+  />
+</svg>

package/src/svg/arrow-right.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 1024 1024"
+>
+  <path
+    fill="currentColor"
+    d="M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512L340.864 831.872a30.59 30.59 0 0 0 0 42.752a29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
+  />
+</svg>

package/src/svg/svg.d.ts

@@ -0,0 +1,6 @@
+// svg.d.ts
+declare module '*.svg' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const content: any
+  export default content
+}

package/dist/style.css

@@ -1 +0,0 @@
-.ml-vertical-toolbar-button-group[data-v-0fe7ba99]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-0fe7ba99]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-0fe7ba99]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-0fe7ba99]{margin-left:0;margin-top:5px}