noph-ui 0.8.10 → 0.8.11

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 (5) hide show
  1. package/dist/card/Card.svelte +11 -7
  2. package/dist/list/Item.svelte +13 -12
  3. package/dist/menu/Menu.svelte +17 -14
  4. package/dist/snackbar/Snackbar.svelte +10 -10
  5. package/package.json +3 -3
package/dist/card/Card.svelte CHANGED
@@ -28,6 +28,16 @@
28
28
  })
29
29
  }
30
30
  })
31
+ $effect(() => {
32
+ if (element) {
33
+ element.addEventListener('focus', () => {
34
+ focused = true
35
+ })
36
+ element.addEventListener('blur', () => {
37
+ focused = false
38
+ })
39
+ }
40
+ })
31
41
  </script>
32
42
 
33
43
  {#snippet content()}
@@ -78,15 +88,9 @@
78
88
  </div>
79
89
  {:else if attributes.type === 'button'}
80
90
  <button
91
+ aria-disabled={disabled}
81
92
  {...attributes}
82
93
  bind:this={element}
83
- aria-disabled={disabled}
84
- onfocusin={() => {
85
- focused = true
86
- }}
87
- onfocusout={() => {
88
- focused = false
89
- }}
90
94
  {disabled}
91
95
  class={[
92
96
  'np-card-container',
package/dist/list/Item.svelte CHANGED
@@ -13,6 +13,17 @@
13
13
  }: ItemProps = $props()
14
14
 
15
15
  let focused = $state(false)
16
+ let element: HTMLButtonElement | HTMLAnchorElement | undefined = $state()
17
+ $effect(() => {
18
+ if (element) {
19
+ element.addEventListener('focus', () => {
20
+ focused = true
21
+ })
22
+ element.addEventListener('blur', () => {
23
+ focused = false
24
+ })
25
+ }
26
+ })
16
27
  </script>
17
28
 
18
29
  {#snippet content()}
@@ -56,23 +67,13 @@
56
67
  <button
57
68
  {...attributes}
58
69
  class={['np-item', selected && 'selected', attributes.class]}
59
- onfocus={() => {
60
- focused = true
61
- }}
62
- onfocusout={() => {
63
- focused = false
64
- }}>{@render content()}</button
70
+ bind:this={element}>{@render content()}</button
65
71
  >
66
72
  {:else if attributes.variant === 'link'}
67
73
  <a
68
74
  {...attributes}
69
75
  class={['np-item', selected && 'selected', attributes.class]}
70
- onfocus={() => {
71
- focused = true
72
- }}
73
- onfocusout={() => {
74
- focused = false
75
- }}>{@render content()}</a
76
+ bind:this={element}>{@render content()}</a
76
77
  >
77
78
  {/if}
78
79
 
package/dist/menu/Menu.svelte CHANGED
@@ -50,6 +50,23 @@
50
50
 
51
51
  $effect(() => {
52
52
  if (anchor && element) {
53
+ element.addEventListener('toggle', (event) => {
54
+ const { newState, currentTarget } = event as ToggleEvent & {
55
+ currentTarget: EventTarget & HTMLDivElement
56
+ }
57
+ if (newState === 'open') {
58
+ const rect = currentTarget.getBoundingClientRect()
59
+ const viewportHeight = window.innerHeight
60
+
61
+ if (rect.bottom > viewportHeight) {
62
+ const maxHeight = viewportHeight - rect.top - 18
63
+ currentTarget.style.maxHeight = `${maxHeight}px`
64
+ }
65
+ }
66
+ if (newState === 'closed') {
67
+ currentTarget.style.maxHeight = '80dvh'
68
+ }
69
+ })
53
70
  if (!('anchorName' in document.documentElement.style)) {
54
71
  anchor.addEventListener('click', () => {
55
72
  refreshValues()
@@ -86,20 +103,6 @@
86
103
  popover="auto"
87
104
  class={[position, 'np-menu', attributes.class]}
88
105
  role="menu"
89
- ontoggle={(event) => {
90
- if (event.newState === 'open') {
91
- const rect = event.currentTarget.getBoundingClientRect()
92
- const viewportHeight = window.innerHeight
93
-
94
- if (rect.bottom > viewportHeight) {
95
- const maxHeight = viewportHeight - rect.top - 18
96
- event.currentTarget.style.maxHeight = `${maxHeight}px`
97
- }
98
- }
99
- if (event.newState === 'closed') {
100
- event.currentTarget.style.maxHeight = '80dvh'
101
- }
102
- }}
103
106
  >
104
107
  {@render children()}
105
108
  </div>
package/dist/snackbar/Snackbar.svelte CHANGED
@@ -31,25 +31,25 @@
31
31
  element?.hidePopover()
32
32
  }
33
33
 
34
- const toggleHandler = (event: ToggleEvent) => {
35
- if (event.newState === 'closed') {
34
+ const toggleHandler = (event: Event) => {
35
+ let { newState } = event as ToggleEvent
36
+ if (newState === 'closed') {
36
37
  clearTimeout(timeoutId)
37
38
  }
38
- if (event.newState === 'open' && timeout > 0) {
39
+ if (newState === 'open' && timeout > 0) {
39
40
  timeoutId = setTimeout(() => {
40
41
  element?.hidePopover()
41
42
  }, timeout)
42
43
  }
43
44
  }
45
+ $effect(() => {
46
+ if (element) {
47
+ element.addEventListener('beforetoggle', toggleHandler)
48
+ }
49
+ })
44
50
  </script>
45
51
 
46
- <div
47
- {...attributes}
48
- {popover}
49
- class={['np-snackbar', attributes.class]}
50
- onbeforetoggle={toggleHandler}
51
- bind:this={element}
52
- >
52
+ <div {...attributes} {popover} class={['np-snackbar', attributes.class]} bind:this={element}>
53
53
  <div class="np-snackbar-inner">
54
54
  <div class="np-snackbar-label-container">
55
55
  <div class="np-snackbar-label">{label}</div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.8.10",
3
+ "version": "0.8.11",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -66,11 +66,11 @@
66
66
  "prettier": "^3.4.2",
67
67
  "prettier-plugin-svelte": "^3.3.2",
68
68
  "publint": "^0.2.12",
69
- "svelte": "^5.16.0",
69
+ "svelte": "^5.16.1",
70
70
  "svelte-check": "^4.1.1",
71
71
  "typescript": "^5.7.2",
72
72
  "typescript-eslint": "^8.19.0",
73
- "vite": "^6.0.6",
73
+ "vite": "^6.0.7",
74
74
  "vitest": "^2.1.8"
75
75
  },
76
76
  "svelte": "./dist/index.js",