@cloudparker/moldex.js 0.0.66 → 0.0.67

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.
@@ -14,7 +14,7 @@ let {
14
14
  id,
15
15
  appearance,
16
16
  size,
17
- label = "MY btn",
17
+ label,
18
18
  type,
19
19
  children,
20
20
  dropdownSnippet,
@@ -28,7 +28,7 @@ let {
28
28
  let placement = $state(false);
29
29
  let dropdownState = $state(3 /* CLOSED */);
30
30
  export function toggleDropdown(ev) {
31
- ev && ev.stopPropagation();
31
+ handleBackdropEvent(ev);
32
32
  if (placement) {
33
33
  dropdownState = 3 /* CLOSED */;
34
34
  setTimeout(() => {
@@ -44,6 +44,9 @@ export function toggleDropdown(ev) {
44
44
  function handleToggleDropdown(ev) {
45
45
  toggleDropdown(ev);
46
46
  }
47
+ function handleBackdropEvent(ev) {
48
+ ev.stopPropagation();
49
+ }
47
50
  </script>
48
51
 
49
52
  <div class="relative max-w-min {containerClassName}">
@@ -59,15 +62,18 @@ function handleToggleDropdown(ev) {
59
62
  />
60
63
 
61
64
  {#if placement}
62
- <button
65
+ <div
63
66
  aria-label="backdrop"
64
- type="button"
65
67
  id="{id}-dropdown-backdrop"
66
68
  class="cursor-auto fixed inset-0 z-10 {backgropClassName}"
69
+ onmousedown={handleBackdropEvent}
70
+ ontouchstart={handleBackdropEvent}
67
71
  onclick={handleToggleDropdown}
68
72
  tabindex="-1"
69
- ></button>
73
+ role="presentation"
74
+ ></div>
70
75
  <div
76
+ role="dialog"
71
77
  class="absolute z-10 min-w-40 max-h-1/2vh overflow-y-auto origin-top right-0 rounded-md bg-white dark:bg-base-800 shadow-lg focus:outline-none transition ease-out duration-100 {dropdownClassName} {dropdownState ==
72
78
  DropdownStateEnum.OPENED
73
79
  ? `transform opacity-100 scale-100 ${dropdownOpenClassName}`
@@ -1,6 +1,6 @@
1
1
  <script lang="ts" module></script>
2
2
 
3
- <script lang="ts">import { Label, mdiChevronDown, mdiMagnify } from "../../../../..";
3
+ <script lang="ts">import { mdiDotsHorizontal } from "../../../../..";
4
4
  import ButtonDropdown from "../button-dropdown/button-dropdown.svelte";
5
5
  import Icon from "../../../icon/components/icon/icon.svelte";
6
6
  import ButtonListItem from "../button-list-item/button-list-item.svelte";
@@ -10,7 +10,7 @@ let {
10
10
  appearance,
11
11
  size,
12
12
  children,
13
- iconPath = mdiChevronDown,
13
+ iconPath = mdiDotsHorizontal,
14
14
  iconClassName,
15
15
  menus,
16
16
  onMenu,
@@ -20,3 +20,4 @@ export declare const mdiPhone = "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L
20
20
  export declare const mdiSquare = "M3,3V21H21V3";
21
21
  export declare const mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";
22
22
  export declare const mdiOpenInNew = "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z";
23
+ export declare const mdiDotsHorizontal = "M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z";
@@ -21,3 +21,4 @@ export const mdiPhone = "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15
21
21
  export const mdiSquare = "M3,3V21H21V3";
22
22
  export const mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";
23
23
  export const mdiOpenInNew = "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z";
24
+ export const mdiDotsHorizontal = "M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudparker/moldex.js",
3
- "version": "0.0.66",
3
+ "version": "0.0.67",
4
4
  "author": "cloudparker.com",
5
5
  "license": "MIT",
6
6
  "keywords": [