@oicl/openbridge-webcomponents-svelte 2.0.0-next.37 → 2.0.0-next.38

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.
@@ -16,21 +16,38 @@
16
16
 
17
17
  Changing this property updates the icons and directionality of the stepper buttons. */
18
18
  type?: ObcStepperBoxType;
19
- /** If true, displays the `helper-text` slot content below the control for additional guidance or status. */
20
- hasHelperText?: boolean;
21
19
  /** If true, the stepper box is disabled and the buttons are not clickable. */
22
- disabled?: boolean
20
+ disabled?: boolean;
21
+ /** The current numeric value displayed in the field.
22
+ Pass `null` to clear the value and show the `placeholder` instead. */
23
+ value?: number | null;
24
+ /** Optional lower bound; decrement button disables at this value. */
25
+ min?: number | undefined;
26
+ /** Optional upper bound; increment button disables at this value. */
27
+ max?: number | undefined;
28
+ /** Increment step size (default 1). */
29
+ stepUp?: number;
30
+ /** Decrement step size (default 1). */
31
+ stepDown?: number;
32
+ /** Unit text displayed inside the field. Overridden by the `unit` slot if assigned. */
33
+ unit?: string;
34
+ /** Helper text displayed below the stepper. When set, the helper text is shown. */
35
+ helperText?: string;
36
+ /** Placeholder text shown when the input is empty. */
37
+ placeholder?: string;
38
+ /** If true, the input is non-editable; programmatic value changes still apply. */
39
+ readonly?: boolean
23
40
  }
24
41
  export interface Events {
25
- onDown?: (event: CustomEvent<void>) => void;
26
- onUp?: (event: CustomEvent<void>) => void
42
+ onDown?: (event: CustomEvent<{value: number}>) => void;
43
+ onUp?: (event: CustomEvent<{value: number}>) => void;
44
+ onInput?: (event: CustomEvent<{value: string}>) => void;
45
+ onChange?: (event: CustomEvent<{value: number | null}>) => void
27
46
  }
28
47
  export interface Slots {
29
- children?: Snippet;
30
- unit?: Snippet;
31
- helperText?: Snippet
48
+ unitSnippet?: Snippet
32
49
  }
33
- const {onDown, onUp, class: className, style, children, unit, helperText, ...props} = $props<Props & Events & Slots>();
50
+ const {onDown, onUp, onInput, onChange, class: className, style, unitSnippet, ...props} = $props<Props & Events & Slots>();
34
51
 
35
52
  </script>
36
53
  <obc-stepper-box
@@ -38,21 +55,13 @@ disabled?: boolean
38
55
  class={className}
39
56
  style={style}
40
57
  ondown={onDown}
41
- onup={onUp} >
58
+ onup={onUp}
59
+ oninput={onInput}
60
+ onchange={onChange} >
42
61
 
43
- {#if children}
44
- {@render children()}
45
- {/if}
46
-
47
- {#if unit}
62
+ {#if unitSnippet}
48
63
  <div slot="unit">
49
- {@render unit()}
50
- </div>
51
- {/if}
52
-
53
- {#if helperText}
54
- <div slot="helper-text">
55
- {@render helperText()}
64
+ {@render unitSnippet()}
56
65
  </div>
57
66
  {/if}
58
67
  </obc-stepper-box>
@@ -11,19 +11,44 @@ export interface Props {
11
11
 
12
12
  Changing this property updates the icons and directionality of the stepper buttons. */
13
13
  type?: ObcStepperBoxType;
14
- /** If true, displays the `helper-text` slot content below the control for additional guidance or status. */
15
- hasHelperText?: boolean;
16
14
  /** If true, the stepper box is disabled and the buttons are not clickable. */
17
15
  disabled?: boolean;
16
+ /** The current numeric value displayed in the field.
17
+ Pass `null` to clear the value and show the `placeholder` instead. */
18
+ value?: number | null;
19
+ /** Optional lower bound; decrement button disables at this value. */
20
+ min?: number | undefined;
21
+ /** Optional upper bound; increment button disables at this value. */
22
+ max?: number | undefined;
23
+ /** Increment step size (default 1). */
24
+ stepUp?: number;
25
+ /** Decrement step size (default 1). */
26
+ stepDown?: number;
27
+ /** Unit text displayed inside the field. Overridden by the `unit` slot if assigned. */
28
+ unit?: string;
29
+ /** Helper text displayed below the stepper. When set, the helper text is shown. */
30
+ helperText?: string;
31
+ /** Placeholder text shown when the input is empty. */
32
+ placeholder?: string;
33
+ /** If true, the input is non-editable; programmatic value changes still apply. */
34
+ readonly?: boolean;
18
35
  }
19
36
  export interface Events {
20
- onDown?: (event: CustomEvent<void>) => void;
21
- onUp?: (event: CustomEvent<void>) => void;
37
+ onDown?: (event: CustomEvent<{
38
+ value: number;
39
+ }>) => void;
40
+ onUp?: (event: CustomEvent<{
41
+ value: number;
42
+ }>) => void;
43
+ onInput?: (event: CustomEvent<{
44
+ value: string;
45
+ }>) => void;
46
+ onChange?: (event: CustomEvent<{
47
+ value: number | null;
48
+ }>) => void;
22
49
  }
23
50
  export interface Slots {
24
- children?: Snippet;
25
- unit?: Snippet;
26
- helperText?: Snippet;
51
+ unitSnippet?: Snippet;
27
52
  }
28
53
  type $$ComponentProps = Props & Events & Slots;
29
54
  declare const ObcStepperBox: import("svelte").Component<$$ComponentProps, {
@@ -59,6 +59,14 @@ Can be overridden by slotting content into the `title` slot.
59
59
 
60
60
  Default: 'Tab title' */
61
61
  title?: string;
62
+ /** Shows contextual text below the tab title.
63
+
64
+ Default: false */
65
+ showSubtitle?: boolean;
66
+ /** Contextual text shown below the tab title when `showSubtitle` is true.
67
+
68
+ Default: '' */
69
+ subtitle?: string;
62
70
  /** Disables the tab, preventing user interaction and applying disabled styles.
63
71
 
64
72
  Default: false */
@@ -53,6 +53,14 @@ Can be overridden by slotting content into the `title` slot.
53
53
 
54
54
  Default: 'Tab title' */
55
55
  title?: string;
56
+ /** Shows contextual text below the tab title.
57
+
58
+ Default: false */
59
+ showSubtitle?: boolean;
60
+ /** Contextual text shown below the tab title when `showSubtitle` is true.
61
+
62
+ Default: '' */
63
+ subtitle?: string;
56
64
  /** Disables the tab, preventing user interaction and applying disabled styles.
57
65
 
58
66
  Default: false */
@@ -9,10 +9,12 @@
9
9
  export interface Props {
10
10
  class?: string;
11
11
  style?: string;
12
- /** The list of tabs to display. Each tab is defined by an object with properties such as `id`, `title`, `hasLeadingIcon`, `hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`, and `disabled`.
12
+ /** The list of tabs to display. Each tab is defined by an object with properties such as `id`, `title`, `subtitle`, `showSubtitle`, `hasLeadingIcon`, `hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`, and `disabled`.
13
13
 
14
14
  - `id` (string): Unique identifier for the tab.
15
15
  - `title` (string): Display label for the tab.
16
+ - `subtitle` (string): Contextual text shown below the title when subtitle display is enabled.
17
+ - `showSubtitle` (boolean): Optional per-tab override for displaying the subtitle.
16
18
  - `hasLeadingIcon` (boolean): Whether to show a leading icon (default: true).
17
19
  - `hasBadge` (boolean): Whether to show a badge on the tab.
18
20
  - `badgeCount` (number): Number to display in the badge.
@@ -34,6 +36,10 @@ hasClose?: boolean;
34
36
 
35
37
  Default: `false`. */
36
38
  hug?: boolean;
39
+ /** Whether to display subtitle text for each tab. Individual tabs can override this with `tab.showSubtitle`.
40
+
41
+ Default: `false`. */
42
+ showSubtitle?: boolean;
37
43
  /** Whether to display an "add new tab" button at the end of the tab row. When clicked, emits the `add-new-tab` event.
38
44
 
39
45
  Default: `false`. */
@@ -4,10 +4,12 @@ import type { Snippet } from 'svelte';
4
4
  export interface Props {
5
5
  class?: string;
6
6
  style?: string;
7
- /** The list of tabs to display. Each tab is defined by an object with properties such as `id`, `title`, `hasLeadingIcon`, `hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`, and `disabled`.
7
+ /** The list of tabs to display. Each tab is defined by an object with properties such as `id`, `title`, `subtitle`, `showSubtitle`, `hasLeadingIcon`, `hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`, and `disabled`.
8
8
 
9
9
  - `id` (string): Unique identifier for the tab.
10
10
  - `title` (string): Display label for the tab.
11
+ - `subtitle` (string): Contextual text shown below the title when subtitle display is enabled.
12
+ - `showSubtitle` (boolean): Optional per-tab override for displaying the subtitle.
11
13
  - `hasLeadingIcon` (boolean): Whether to show a leading icon (default: true).
12
14
  - `hasBadge` (boolean): Whether to show a badge on the tab.
13
15
  - `badgeCount` (number): Number to display in the badge.
@@ -29,6 +31,10 @@ Default: `false`. */
29
31
 
30
32
  Default: `false`. */
31
33
  hug?: boolean;
34
+ /** Whether to display subtitle text for each tab. Individual tabs can override this with `tab.showSubtitle`.
35
+
36
+ Default: `false`. */
37
+ showSubtitle?: boolean;
32
38
  /** Whether to display an "add new tab" button at the end of the tab row. When clicked, emits the `add-new-tab` event.
33
39
 
34
40
  Default: `false`. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents-svelte",
3
- "version": "2.0.0-next.37",
3
+ "version": "2.0.0-next.38",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run prepack",
@@ -31,7 +31,7 @@
31
31
  }
32
32
  },
33
33
  "dependencies": {
34
- "@oicl/openbridge-webcomponents": "^2.0.0-next.36"
34
+ "@oicl/openbridge-webcomponents": "^2.0.0-next.37"
35
35
  },
36
36
  "peerDependencies": {
37
37
  "svelte": "^5.0.0"