@mlightcad/ui-components 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -2
- package/dist/ui-components.es.js +388 -315
- package/dist/ui-components.umd.js +2 -2
- package/package.json +1 -1
- package/src/components/MlCollapse.vue +9 -3
- package/src/components/MlToolPalette.vue +37 -25
- package/src/composable/types.ts +10 -0
- package/src/composable/useAutoOpen.ts +77 -0
- package/src/composable/useBoundingRect.ts +95 -35
- package/src/composable/useDrag.ts +90 -64
- package/src/composable/useDragEx.ts +12 -6
- package/src/composable/useInitialRect.ts +14 -14
- package/src/composable/useLastPosAndSize.ts +43 -0
- package/src/composable/useLeftPosAndWidth.ts +47 -0
- package/src/composable/useResize.ts +37 -29
- package/src/composable/useTransition.ts +31 -24
- package/src/composable/useRect.ts +0 -23
package/README.md
CHANGED
|
@@ -17,9 +17,9 @@ AutoCAD uses [tool palettes](https://help.autodesk.com/view/ACD/2025/ENU/?guid=G
|
|
|
17
17
|
- Folderable: roll open or closed as your need
|
|
18
18
|
- Auto-hide: roll open and closed as the cursor moves across it. When this option is cleared, the full tool palette stays open continuously.
|
|
19
19
|
|
|
20
|
-
<img src="./doc/palette.jpg"
|
|
20
|
+
<img src="./doc/palette.jpg" alt="Tool Palette Example">
|
|
21
21
|
|
|
22
|
-
You can customize tool palette by the following properties.
|
|
22
|
+
You can customize tool palette by the following properties.
|
|
23
23
|
|
|
24
24
|
```javascript
|
|
25
25
|
/**
|
|
@@ -30,9 +30,27 @@ interface Props {
|
|
|
30
30
|
* The title of tool palette dialog
|
|
31
31
|
*/
|
|
32
32
|
title?: string
|
|
33
|
+
/**
|
|
34
|
+
* The minimum distance from the left side of the tool palette to the left side of the window
|
|
35
|
+
*/
|
|
36
|
+
leftOffset?: number
|
|
37
|
+
/**
|
|
38
|
+
* The minimum distance from the right side of the tool palette to the right side of the window
|
|
39
|
+
*/
|
|
40
|
+
rightOffset?: number
|
|
41
|
+
/**
|
|
42
|
+
* The minimum distance from the top side of the tool palette to the top side of the window
|
|
43
|
+
*/
|
|
44
|
+
topOffset?: number
|
|
45
|
+
/**
|
|
46
|
+
* The minimum distance from the bottom side of the tool palette to the bottom side of the window
|
|
47
|
+
*/
|
|
48
|
+
bottomOffset?: number
|
|
33
49
|
}
|
|
34
50
|
```
|
|
35
51
|
|
|
52
|
+
Four `offsetXXX` properties are used to set the minimum distance from the side of the tool palette to the side of the window. It is quite useful if you want the tool palette is shown within area. For example, one web page has one title bar at the top of window, one status bar at the bottom of window, and one canvas area between the title bar and the status bar. The height of the title bar is 60px and the height of the status bar is 20px. Then you can set `topOffset` to 60 and `bottomOffset` to 20 to let the tool palette are shown and moved within canvas area only.
|
|
53
|
+
|
|
36
54
|
It is quite easy to use it.
|
|
37
55
|
|
|
38
56
|
```javascript
|
|
@@ -46,6 +64,8 @@ const toolPaletteVisible = ref<boolean>(false)
|
|
|
46
64
|
class="tool-palette"
|
|
47
65
|
v-model="toolPaletteVisible"
|
|
48
66
|
title="Tool Palette Test"
|
|
67
|
+
:top-offset="60"
|
|
68
|
+
:bottom-offset="20"
|
|
49
69
|
>
|
|
50
70
|
<span>Tool Palette Test</span>
|
|
51
71
|
</ml-tool-palette>
|