bits-ui 0.14.0 → 0.15.1

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,6 +14,8 @@ export let collisionPadding = 8;
14
14
  export let avoidCollisions = true;
15
15
  export let collisionBoundary = void 0;
16
16
  export let fitViewport = false;
17
+ export let strategy = "absolute";
18
+ export let overlap = false;
17
19
  export let el = void 0;
18
20
  const {
19
21
  elements: { menu },
@@ -37,7 +39,9 @@ $:
37
39
  collisionPadding,
38
40
  avoidCollisions,
39
41
  collisionBoundary,
40
- fitViewport
42
+ fitViewport,
43
+ strategy,
44
+ overlap
41
45
  });
42
46
  </script>
43
47
 
@@ -12,7 +12,9 @@ export function updatePositioning(store, props) {
12
12
  sameWidth: false,
13
13
  avoidCollisions: true,
14
14
  collisionPadding: 8,
15
- fitViewport: false
15
+ fitViewport: false,
16
+ strategy: "absolute",
17
+ overlap: false
16
18
  };
17
19
  const withDefaults = { ...defaultPositioningProps, ...props };
18
20
  store.update((prev) => {
@@ -28,7 +30,10 @@ export function updatePositioning(store, props) {
28
30
  sameWidth: withDefaults.sameWidth,
29
31
  flip: withDefaults.avoidCollisions,
30
32
  overflowPadding: withDefaults.collisionPadding,
31
- boundary: withDefaults.collisionBoundary
33
+ boundary: withDefaults.collisionBoundary,
34
+ fitViewport: withDefaults.fitViewport,
35
+ strategy: withDefaults.strategy,
36
+ overlap: withDefaults.overlap
32
37
  };
33
38
  });
34
39
  }
@@ -38,19 +38,21 @@ $:
38
38
  $:
39
39
  Object.assign(builder, attrs);
40
40
  $:
41
- updatePositioning({
42
- side,
43
- align,
44
- sideOffset,
45
- alignOffset,
46
- collisionPadding,
47
- avoidCollisions,
48
- collisionBoundary,
49
- sameWidth,
50
- fitViewport,
51
- strategy,
52
- overlap
53
- });
41
+ if ($open) {
42
+ updatePositioning({
43
+ side,
44
+ align,
45
+ sideOffset,
46
+ alignOffset,
47
+ collisionPadding,
48
+ avoidCollisions,
49
+ collisionBoundary,
50
+ sameWidth,
51
+ fitViewport,
52
+ strategy,
53
+ overlap
54
+ });
55
+ }
54
56
  </script>
55
57
 
56
58
  {#if asChild && $open}
@@ -38,19 +38,21 @@ $:
38
38
  $:
39
39
  Object.assign(builder, attrs);
40
40
  $:
41
- updatePositioning({
42
- side,
43
- align,
44
- sideOffset,
45
- alignOffset,
46
- collisionPadding,
47
- avoidCollisions,
48
- collisionBoundary,
49
- sameWidth,
50
- fitViewport,
51
- strategy,
52
- overlap
53
- });
41
+ if ($open) {
42
+ updatePositioning({
43
+ side,
44
+ align,
45
+ sideOffset,
46
+ alignOffset,
47
+ collisionPadding,
48
+ avoidCollisions,
49
+ collisionBoundary,
50
+ sameWidth,
51
+ fitViewport,
52
+ strategy,
53
+ overlap
54
+ });
55
+ }
54
56
  </script>
55
57
 
56
58
  {#if asChild && $open}
@@ -17,6 +17,8 @@ export let avoidCollisions = true;
17
17
  export let collisionBoundary = void 0;
18
18
  export let sameWidth = false;
19
19
  export let fitViewport = false;
20
+ export let strategy = "absolute";
21
+ export let overlap = false;
20
22
  export let el = void 0;
21
23
  const {
22
24
  elements: { content },
@@ -34,17 +36,21 @@ $:
34
36
  $:
35
37
  Object.assign(builder, attrs);
36
38
  $:
37
- updatePositioning({
38
- side,
39
- align,
40
- sideOffset,
41
- alignOffset,
42
- collisionPadding,
43
- avoidCollisions,
44
- collisionBoundary,
45
- sameWidth,
46
- fitViewport
47
- });
39
+ if ($open) {
40
+ updatePositioning({
41
+ side,
42
+ align,
43
+ sideOffset,
44
+ alignOffset,
45
+ collisionPadding,
46
+ avoidCollisions,
47
+ collisionBoundary,
48
+ sameWidth,
49
+ fitViewport,
50
+ strategy,
51
+ overlap
52
+ });
53
+ }
48
54
  </script>
49
55
 
50
56
  {#if asChild && $open}
@@ -30,6 +30,12 @@ const {
30
30
  open = next;
31
31
  }
32
32
  return next;
33
+ },
34
+ positioning: {
35
+ gutter: 0,
36
+ offset: {
37
+ mainAxis: 1
38
+ }
33
39
  }
34
40
  });
35
41
  const idValues = derived(
@@ -15,6 +15,10 @@ export function setCtx(props) {
15
15
  const getAttrs = createBitAttrs(NAME, PARTS);
16
16
  const popover = {
17
17
  ...createPopover({
18
+ positioning: {
19
+ placement: "bottom",
20
+ gutter: 0
21
+ },
18
22
  ...removeUndefined(props),
19
23
  forceVisible: true
20
24
  }),
@@ -18,6 +18,8 @@ export let avoidCollisions = true;
18
18
  export let collisionBoundary = void 0;
19
19
  export let sameWidth = true;
20
20
  export let fitViewport = false;
21
+ export let strategy = "absolute";
22
+ export let overlap = false;
21
23
  export let el = void 0;
22
24
  const {
23
25
  elements: { menu },
@@ -36,17 +38,21 @@ $:
36
38
  $:
37
39
  Object.assign(builder, attrs);
38
40
  $:
39
- updatePositioning({
40
- side,
41
- align,
42
- sideOffset,
43
- alignOffset,
44
- collisionPadding,
45
- avoidCollisions,
46
- collisionBoundary,
47
- sameWidth,
48
- fitViewport
49
- });
41
+ if ($open) {
42
+ updatePositioning({
43
+ side,
44
+ align,
45
+ sideOffset,
46
+ alignOffset,
47
+ collisionPadding,
48
+ avoidCollisions,
49
+ collisionBoundary,
50
+ sameWidth,
51
+ fitViewport,
52
+ strategy,
53
+ overlap
54
+ });
55
+ }
50
56
  </script>
51
57
 
52
58
  <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
@@ -8,6 +8,7 @@ export let asChild = false;
8
8
  export let el = void 0;
9
9
  const {
10
10
  elements: { option: item },
11
+ helpers: { isSelected: isSelectedStore },
11
12
  getAttrs
12
13
  } = setItemCtx(value);
13
14
  const dispatch = createDispatcher();
@@ -16,12 +17,14 @@ $:
16
17
  builder = $item({ value, disabled, label });
17
18
  $:
18
19
  Object.assign(builder, attrs);
20
+ $:
21
+ isSelected = $isSelectedStore(value);
19
22
  </script>
20
23
 
21
24
  <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
22
25
 
23
26
  {#if asChild}
24
- <slot {builder} />
27
+ <slot {builder} {isSelected} />
25
28
  {:else}
26
29
  <div
27
30
  bind:this={el}
@@ -34,7 +37,7 @@ $:
34
37
  on:focusout
35
38
  on:pointerleave
36
39
  >
37
- <slot {builder}>
40
+ <slot {builder} {isSelected}>
38
41
  {label ? label : value}
39
42
  </slot>
40
43
  </div>
@@ -18,6 +18,7 @@ declare const __propDef: {
18
18
  } & {
19
19
  action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "pointermove">;
20
20
  };
21
+ isSelected: boolean;
21
22
  };
22
23
  };
23
24
  events: ItemEvents;
@@ -14,7 +14,12 @@ $:
14
14
  {#if asChild}
15
15
  <slot {label} {attrs} />
16
16
  {:else}
17
- <span bind:this={el} {...$$restProps} {...attrs}>
17
+ <span
18
+ bind:this={el}
19
+ {...$$restProps}
20
+ {...attrs}
21
+ data-placeholder={!label ? "" : undefined}
22
+ >
18
23
  {label ? label : placeholder}
19
24
  </span>
20
25
  {/if}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bits-ui",
3
- "version": "0.14.0",
3
+ "version": "0.15.1",
4
4
  "license": "MIT",
5
5
  "repository": "github:huntabyte/bits-ui",
6
6
  "exports": {