noph-ui 0.10.11 → 0.10.12

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 (4) hide show
  1. package/dist/list/Item.svelte +29 -11
  2. package/dist/select/Select.svelte +11 -13
  3. package/dist/snackbar/Snackbar.svelte +12 -11
  4. package/package.json +4 -4
package/dist/list/Item.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import Ripple from '../ripple/Ripple.svelte'
3
+ import type { FocusEventHandler } from 'svelte/elements'
3
4
  import type { ItemProps } from './types.ts'
4
5
 
5
6
  let {
@@ -8,22 +9,14 @@
8
9
  end,
9
10
  children,
10
11
  supportingText,
12
+ onblur,
13
+ onfocus,
11
14
  disabled = false,
12
15
  ...attributes
13
16
  }: ItemProps = $props()
14
17
 
15
18
  let focused = $state(false)
16
19
  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
- })
27
20
  </script>
28
21
 
29
22
  {#snippet content()}
@@ -60,12 +53,29 @@
60
53
  {@render content()}
61
54
  </div>
62
55
  {:else if attributes.variant === 'text' || attributes.variant === undefined}
63
- <div {...attributes} class={['np-item', selected && 'selected', attributes.class]}>
56
+ <div
57
+ {...attributes}
58
+ onfocus={(event) => {
59
+ ;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
60
+ }}
61
+ onblur={(event) => {
62
+ ;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
63
+ }}
64
+ class={['np-item', selected && 'selected', attributes.class]}
65
+ >
64
66
  {@render content()}
65
67
  </div>
66
68
  {:else if attributes.variant === 'button'}
67
69
  <button
68
70
  {...attributes}
71
+ onfocus={(event) => {
72
+ focused = true
73
+ ;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
74
+ }}
75
+ onblur={(event) => {
76
+ focused = false
77
+ ;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
78
+ }}
69
79
  class={['np-item', selected && 'selected', attributes.class]}
70
80
  bind:this={element}
71
81
  >{@render content()}
@@ -73,6 +83,14 @@
73
83
  {:else if attributes.variant === 'link'}
74
84
  <a
75
85
  {...attributes}
86
+ onfocus={(event) => {
87
+ focused = true
88
+ ;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
89
+ }}
90
+ onblur={(event) => {
91
+ focused = false
92
+ ;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
93
+ }}
76
94
  class={['np-item', selected && 'selected', attributes.class]}
77
95
  bind:this={element}>{@render content()}</a
78
96
  >
package/dist/select/Select.svelte CHANGED
@@ -51,19 +51,6 @@
51
51
  selectElement.form?.addEventListener('reset', () => {
52
52
  errorRaw = error
53
53
  })
54
- selectElement.addEventListener('invalid', (event) => {
55
- event.preventDefault()
56
- const { currentTarget } = event as Event & {
57
- currentTarget: HTMLInputElement | HTMLTextAreaElement
58
- }
59
- errorRaw = true
60
- if (errorText === '') {
61
- errorTextRaw = currentTarget.validationMessage
62
- }
63
- if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
64
- currentTarget.focus()
65
- }
66
- })
67
54
  }
68
55
  })
69
56
  </script>
@@ -167,6 +154,17 @@
167
154
  {form}
168
155
  {onchange}
169
156
  {oninput}
157
+ oninvalid={(event) => {
158
+ event.preventDefault()
159
+ const { currentTarget } = event
160
+ errorRaw = true
161
+ if (errorText === '') {
162
+ errorTextRaw = currentTarget.validationMessage
163
+ }
164
+ if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
165
+ currentTarget.focus()
166
+ }
167
+ }}
170
168
  bind:value
171
169
  bind:this={selectElement}
172
170
  >
package/dist/snackbar/Snackbar.svelte CHANGED
@@ -14,6 +14,7 @@
14
14
  },
15
15
  showPopover = $bindable(),
16
16
  hidePopover = $bindable(),
17
+ onbeforetoggle,
17
18
  timeout = 3000,
18
19
  element = $bindable(),
19
20
  popover = 'auto',
@@ -30,9 +31,15 @@
30
31
  hidePopover = () => {
31
32
  element?.hidePopover()
32
33
  }
34
+ </script>
33
35
 
34
- const toggleHandler = (event: Event) => {
35
- let { newState } = event as ToggleEvent
36
+ <div
37
+ {...attributes}
38
+ {popover}
39
+ class={['np-snackbar', attributes.class]}
40
+ bind:this={element}
41
+ onbeforetoggle={(event) => {
42
+ let { newState } = event
36
43
  if (newState === 'closed') {
37
44
  clearTimeout(timeoutId)
38
45
  }
@@ -41,15 +48,9 @@
41
48
  element?.hidePopover()
42
49
  }, timeout)
43
50
  }
44
- }
45
- $effect(() => {
46
- if (element) {
47
- element.addEventListener('beforetoggle', toggleHandler)
48
- }
49
- })
50
- </script>
51
-
52
- <div {...attributes} {popover} class={['np-snackbar', attributes.class]} bind:this={element}>
51
+ onbeforetoggle?.(event)
52
+ }}
53
+ >
53
54
  <div class="np-snackbar-inner">
54
55
  <div class="np-snackbar-label-container">
55
56
  <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.10.11",
3
+ "version": "0.10.12",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -59,17 +59,17 @@
59
59
  "@sveltejs/package": "^2.3.9",
60
60
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
61
61
  "@types/eslint": "^9.6.1",
62
- "eslint": "^9.18.0",
62
+ "eslint": "^9.19.0",
63
63
  "eslint-config-prettier": "^10.0.1",
64
64
  "eslint-plugin-svelte": "^2.46.1",
65
65
  "globals": "^15.14.0",
66
66
  "prettier": "^3.4.2",
67
67
  "prettier-plugin-svelte": "^3.3.3",
68
68
  "publint": "^0.3.2",
69
- "svelte": "^5.19.2",
69
+ "svelte": "^5.19.3",
70
70
  "svelte-check": "^4.1.4",
71
71
  "typescript": "^5.7.3",
72
- "typescript-eslint": "^8.21.0",
72
+ "typescript-eslint": "^8.22.0",
73
73
  "vite": "^6.0.11",
74
74
  "vitest": "^3.0.4"
75
75
  },