noph-ui 0.12.0 → 0.12.2

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 (8) hide show
  1. package/dist/button/types.d.ts +1 -1
  2. package/dist/card/Card.svelte +19 -2
  3. package/dist/checkbox/Checkbox.svelte +31 -20
  4. package/dist/checkbox/types.d.ts +1 -1
  5. package/dist/chip/FilterChip.svelte +31 -20
  6. package/dist/chip/types.d.ts +1 -1
  7. package/dist/list/Item.svelte +19 -2
  8. package/package.json +10 -10
package/dist/button/types.d.ts CHANGED
@@ -45,7 +45,7 @@ export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
45
45
  icon?: Snippet;
46
46
  onclick?: (event: Event) => void;
47
47
  }[];
48
- group?: string | number | null;
48
+ group?: string | number | (string | number)[] | null;
49
49
  element?: HTMLElement;
50
50
  }
51
51
  export {};
package/dist/card/Card.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 { CardProps } from './types.ts'
4
5
 
5
6
  let {
@@ -12,6 +13,8 @@
12
13
  supportingText,
13
14
  action,
14
15
  children,
16
+ onfocus,
17
+ onblur,
15
18
  ...attributes
16
19
  }: CardProps = $props()
17
20
 
@@ -82,7 +85,14 @@
82
85
  aria-disabled={disabled}
83
86
  {...attributes}
84
87
  bind:this={element}
85
- bind:focused
88
+ onfocus={(event) => {
89
+ focused = true
90
+ ;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
91
+ }}
92
+ onblur={(event) => {
93
+ focused = false
94
+ ;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
95
+ }}
86
96
  {disabled}
87
97
  class={[
88
98
  'np-card-container',
@@ -100,7 +110,14 @@
100
110
  aria-disabled={disabled}
101
111
  tabindex={disabled ? -1 : undefined}
102
112
  role="link"
103
- bind:focused
113
+ onfocus={(event) => {
114
+ focused = true
115
+ ;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
116
+ }}
117
+ onblur={(event) => {
118
+ focused = false
119
+ ;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
120
+ }}
104
121
  class={[
105
122
  'np-card-container',
106
123
  `np-card-${variant}`,
package/dist/checkbox/Checkbox.svelte CHANGED
@@ -10,31 +10,42 @@
10
10
  style,
11
11
  ...attributes
12
12
  }: CheckboxProps = $props()
13
+
14
+ $effect(() => {
15
+ if (group && attributes.value) {
16
+ checked = group.includes(attributes.value)
17
+ }
18
+ })
19
+
20
+ $effect(() => {
21
+ if (attributes.value && group) {
22
+ const index = group.indexOf(attributes.value)
23
+ if (checked) {
24
+ if (index < 0) {
25
+ group?.push(attributes.value)
26
+ group = group
27
+ }
28
+ } else {
29
+ if (index >= 0) {
30
+ group.splice(index, 1)
31
+ group = group
32
+ }
33
+ }
34
+ }
35
+ })
13
36
  </script>
14
37
 
15
38
  <div {style} class={['np-host', attributes.class]} bind:this={element}>
16
39
  <div class="np-container">
17
40
  <label class="np-input-wrapper">
18
- {#if group !== undefined}
19
- <input
20
- {...attributes}
21
- class="np-input"
22
- type="checkbox"
23
- bind:indeterminate
24
- bind:checked
25
- bind:group
26
- aria-checked={indeterminate ? 'mixed' : undefined}
27
- />
28
- {:else}
29
- <input
30
- {...attributes}
31
- class="np-input"
32
- type="checkbox"
33
- bind:indeterminate
34
- bind:checked
35
- aria-checked={indeterminate ? 'mixed' : undefined}
36
- />
37
- {/if}
41
+ <input
42
+ {...attributes}
43
+ class="np-input"
44
+ type="checkbox"
45
+ bind:indeterminate
46
+ bind:checked
47
+ aria-checked={indeterminate ? 'mixed' : undefined}
48
+ />
38
49
  {#if !attributes.disabled}
39
50
  <Ripple />
40
51
  {/if}
package/dist/checkbox/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { HTMLInputAttributes } from 'svelte/elements';
2
2
  export interface CheckboxProps extends Omit<HTMLInputAttributes, 'type'> {
3
3
  element?: HTMLElement;
4
- group?: string | number | null;
4
+ group?: (string | number)[] | null;
5
5
  }
package/dist/chip/FilterChip.svelte CHANGED
@@ -23,6 +23,29 @@
23
23
  }: FilterChipProps = $props()
24
24
 
25
25
  let chipLabel: HTMLLabelElement | undefined = $state()
26
+
27
+ $effect(() => {
28
+ if (group && value) {
29
+ selected = group.includes(value)
30
+ }
31
+ })
32
+
33
+ $effect(() => {
34
+ if (value && group) {
35
+ const index = group.indexOf(value)
36
+ if (selected) {
37
+ if (index < 0) {
38
+ group?.push(value)
39
+ group = group
40
+ }
41
+ } else {
42
+ if (index >= 0) {
43
+ group.splice(index, 1)
44
+ group = group
45
+ }
46
+ }
47
+ }
48
+ })
26
49
  </script>
27
50
 
28
51
  <div
@@ -47,26 +70,14 @@
47
70
  <CheckIcon width={18} height={18} />
48
71
  </div>
49
72
  <div class="np-chip-label">{label}</div>
50
- {#if group !== undefined}
51
- <input
52
- type="checkbox"
53
- bind:checked={selected}
54
- {value}
55
- {name}
56
- {disabled}
57
- defaultChecked={defaultSelected}
58
- bind:group
59
- />
60
- {:else}
61
- <input
62
- type="checkbox"
63
- bind:checked={selected}
64
- {value}
65
- {name}
66
- {disabled}
67
- defaultChecked={defaultSelected}
68
- />
69
- {/if}
73
+ <input
74
+ type="checkbox"
75
+ bind:checked={selected}
76
+ {value}
77
+ {name}
78
+ {disabled}
79
+ defaultChecked={defaultSelected}
80
+ />
70
81
  </label>
71
82
  {#if !disabled}
72
83
  <Ripple forElement={chipLabel} />
package/dist/chip/types.d.ts CHANGED
@@ -11,7 +11,7 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
11
11
  element?: HTMLDivElement;
12
12
  name?: string;
13
13
  value?: string;
14
- group?: string | number | null;
14
+ group?: (string | number)[] | null;
15
15
  defaultSelected?: boolean | null;
16
16
  remove?: (chip: HTMLDivElement) => void;
17
17
  }
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 {
@@ -9,6 +10,8 @@
9
10
  children,
10
11
  supportingText,
11
12
  disabled = false,
13
+ onfocus,
14
+ onblur,
12
15
  ...attributes
13
16
  }: ItemProps = $props()
14
17
 
@@ -53,7 +56,14 @@
53
56
  {:else if attributes.variant === 'button'}
54
57
  <button
55
58
  {...attributes}
56
- bind:focused
59
+ onfocus={(event) => {
60
+ focused = true
61
+ ;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
62
+ }}
63
+ onblur={(event) => {
64
+ focused = false
65
+ ;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
66
+ }}
57
67
  class={['np-item', selected && 'selected', attributes.class]}
58
68
  bind:this={element}
59
69
  >
@@ -63,7 +73,14 @@
63
73
  {:else if attributes.variant === 'link'}
64
74
  <a
65
75
  {...attributes}
66
- bind:focused
76
+ onfocus={(event) => {
77
+ focused = true
78
+ ;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
79
+ }}
80
+ onblur={(event) => {
81
+ focused = false
82
+ ;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
83
+ }}
67
84
  class={['np-item', selected && 'selected', attributes.class]}
68
85
  bind:this={element}
69
86
  >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.12.0",
3
+ "version": "0.12.2",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -53,10 +53,10 @@
53
53
  },
54
54
  "devDependencies": {
55
55
  "@material/material-color-utilities": "^0.3.0",
56
- "@playwright/test": "^1.50.0",
57
- "@sveltejs/adapter-vercel": "^5.5.3",
58
- "@sveltejs/kit": "^2.16.1",
59
- "@sveltejs/package": "^2.3.9",
56
+ "@playwright/test": "^1.50.1",
57
+ "@sveltejs/adapter-vercel": "^5.6.1",
58
+ "@sveltejs/kit": "^2.17.1",
59
+ "@sveltejs/package": "^2.3.10",
60
60
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
61
61
  "@types/eslint": "^9.6.1",
62
62
  "eslint": "^9.19.0",
@@ -65,13 +65,13 @@
65
65
  "globals": "^15.14.0",
66
66
  "prettier": "^3.4.2",
67
67
  "prettier-plugin-svelte": "^3.3.3",
68
- "publint": "^0.3.2",
69
- "svelte": "^5.19.5",
68
+ "publint": "^0.3.3",
69
+ "svelte": "^5.19.7",
70
70
  "svelte-check": "^4.1.4",
71
71
  "typescript": "^5.7.3",
72
- "typescript-eslint": "^8.22.0",
73
- "vite": "^6.0.11",
74
- "vitest": "^3.0.4"
72
+ "typescript-eslint": "^8.23.0",
73
+ "vite": "^6.1.0",
74
+ "vitest": "^3.0.5"
75
75
  },
76
76
  "svelte": "./dist/index.js",
77
77
  "types": "./dist/index.d.ts",