@mlightcad/ui-components 0.0.8 → 0.0.10

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.
Files changed (35) hide show
  1. package/README.md +21 -3
  2. package/dist/ui-components.es.js +416 -318
  3. package/dist/ui-components.umd.js +2 -2
  4. package/lib/index.d.ts +2 -1
  5. package/lib/index.js +3 -1
  6. package/package.json +1 -1
  7. package/src/components/MlCollapse.vue +11 -5
  8. package/src/components/MlStatusBar.vue +43 -0
  9. package/src/components/MlToolPalette.vue +41 -30
  10. package/src/{composable → composables}/types.ts +10 -0
  11. package/src/composables/useAutoOpen.ts +77 -0
  12. package/src/composables/useBoundingRect.ts +161 -0
  13. package/src/composables/useDrag.ts +176 -0
  14. package/src/{composable → composables}/useDragEx.ts +16 -6
  15. package/src/{composable → composables}/useInitialRect.ts +13 -13
  16. package/src/composables/useLastPosAndSize.ts +43 -0
  17. package/src/composables/useLeftPosAndWidth.ts +47 -0
  18. package/src/{composable → composables}/useResize.ts +36 -28
  19. package/src/{composable → composables}/useTransition.ts +31 -24
  20. package/src/index.ts +10 -1
  21. package/lib/MlDropdown.vue.d.ts +0 -59
  22. package/lib/MlDropdown.vue.js +0 -106
  23. package/lib/MlLanguage.vue.d.ts +0 -29
  24. package/lib/MlLanguage.vue.js +0 -67
  25. package/lib/MlToolPalette.vue.d.ts +0 -2
  26. package/lib/MlToolPalette.vue.js +0 -149
  27. package/lib/MlToolbar.vue.d.ts +0 -74
  28. package/lib/MlToolbar.vue.js +0 -129
  29. package/src/composable/useBoundingRect.ts +0 -87
  30. package/src/composable/useDrag.ts +0 -157
  31. package/src/composable/useRect.ts +0 -23
  32. /package/src/{composable → composables}/useWindowSize.ts +0 -0
  33. /package/src/{svg → svgs}/arrow-left.svg +0 -0
  34. /package/src/{svg → svgs}/arrow-right.svg +0 -0
  35. /package/src/{svg → svgs}/svg.d.ts +0 -0
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" width="400" height="92" alt="Tool Palette Example">
20
+ <img src="./doc/palette.jpg" alt="Tool Palette Example">
21
21
 
22
- You can customize tool palette by the following properties. More properties will be coming soon.
22
+ You can customize tool palette by the following properties.
23
23
 
24
24
  ```javascript
25
25
  /**
@@ -30,10 +30,26 @@ 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
 
36
- It is quite easy to use it.
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 certain 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.
37
53
 
38
54
  ```javascript
39
55
  <script lang="ts" setup>
@@ -46,6 +62,8 @@ const toolPaletteVisible = ref<boolean>(false)
46
62
  class="tool-palette"
47
63
  v-model="toolPaletteVisible"
48
64
  title="Tool Palette Test"
65
+ :top-offset="60"
66
+ :bottom-offset="20"
49
67
  >
50
68
  <span>Tool Palette Test</span>
51
69
  </ml-tool-palette>