noph-ui 0.12.1 → 0.12.3

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 (7) hide show
  1. package/README.md +1 -0
  2. package/dist/button/Button.svelte +24 -4
  3. package/dist/button/types.d.ts +2 -0
  4. package/dist/card/Card.svelte +19 -2
  5. package/dist/checkbox/Checkbox.svelte.d.ts +1 -1
  6. package/dist/list/Item.svelte +19 -2
  7. package/package.json +10 -10
package/README.md CHANGED
@@ -80,3 +80,4 @@ In progress (Breaking changes expected)
80
80
  Pending
81
81
 
82
82
  - Tabs
83
+ - Date Field
package/dist/button/Button.svelte CHANGED
@@ -3,6 +3,7 @@
3
3
  import Tooltip from '../tooltip/Tooltip.svelte'
4
4
  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
5
5
  import type { ButtonProps } from './types.ts'
6
+ import CircularProgress from '../progress/CircularProgress.svelte'
6
7
 
7
8
  let {
8
9
  variant = 'outlined',
@@ -12,6 +13,7 @@
12
13
  title,
13
14
  element = $bindable(),
14
15
  disabled = false,
16
+ loading = false,
15
17
  keepTooltipOnClick,
16
18
  ...attributes
17
19
  }: ButtonProps = $props()
@@ -27,9 +29,14 @@
27
29
  </script>
28
30
 
29
31
  {#snippet content()}
30
- {#if !disabled}
32
+ {#if !disabled && !loading}
31
33
  <Ripple />
32
34
  {/if}
35
+ {#if loading}
36
+ <div class="circular-progress">
37
+ <CircularProgress indeterminate />
38
+ </div>
39
+ {/if}
33
40
  <div class="button-icon">
34
41
  {#if start}
35
42
  {@render start()}
@@ -47,16 +54,17 @@
47
54
  </div>
48
55
  {/snippet}
49
56
 
50
- {#if isButton(attributes) || disabled}
57
+ {#if isButton(attributes) || disabled || loading}
51
58
  <button
52
59
  {...attributes as HTMLButtonAttributes}
53
60
  aria-describedby={title ? tooltipId : attributes['aria-describedby']}
54
61
  aria-label={title || attributes['aria-label']}
55
- {disabled}
62
+ disabled={disabled || loading}
56
63
  bind:this={element}
57
64
  class={[
58
65
  'np-button',
59
- disabled ? `${variant}-disabled disabled` : `${variant} enabled`,
66
+ loading ? 'np-loading' : '',
67
+ disabled || loading ? `${variant}-disabled disabled` : `${variant} enabled`,
60
68
  attributes.class,
61
69
  ]}
62
70
  >
@@ -85,6 +93,18 @@
85
93
  text-overflow: ellipsis;
86
94
  text-wrap: nowrap;
87
95
  }
96
+ .circular-progress {
97
+ --np-circular-progress-size: calc(var(--button-height) * 0.75);
98
+ --np-circular-progress-color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
99
+ position: absolute;
100
+ top: 50%;
101
+ left: 50%;
102
+ transform: translate(-50%, -50%);
103
+ }
104
+ .np-loading .button-icon,
105
+ .np-loading .children-wrapper {
106
+ opacity: 0;
107
+ }
88
108
  .np-button {
89
109
  box-sizing: border-box;
90
110
  font-family: inherit;
package/dist/button/types.d.ts CHANGED
@@ -6,6 +6,7 @@ interface ButtonButtonProps extends HTMLButtonAttributes {
6
6
  end?: Snippet | undefined;
7
7
  element?: HTMLElement;
8
8
  disabled?: boolean;
9
+ loading?: boolean;
9
10
  keepTooltipOnClick?: boolean;
10
11
  }
11
12
  interface ButtonAnchorProps extends HTMLAnchorAttributes {
@@ -15,6 +16,7 @@ interface ButtonAnchorProps extends HTMLAnchorAttributes {
15
16
  element?: HTMLElement;
16
17
  keepTooltipOnClick?: boolean;
17
18
  disabled?: boolean;
19
+ loading?: boolean;
18
20
  }
19
21
  interface IconButtonButtonProps extends HTMLButtonAttributes {
20
22
  variant?: 'text' | 'filled' | 'outlined' | 'tonal';
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.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import type { CheckboxProps } from './types.ts';
2
- declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "element" | "group" | "checked" | "indeterminate">;
2
+ declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "element" | "group" | "indeterminate" | "checked">;
3
3
  type Checkbox = ReturnType<typeof Checkbox>;
4
4
  export default Checkbox;
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.1",
3
+ "version": "0.12.3",
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.4",
69
+ "svelte": "^5.19.9",
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",