ember-primitives 0.12.0 → 0.14.0
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.
- package/declarations/components/-private/utils.d.ts +1 -1
- package/declarations/components/-private/utils.d.ts.map +1 -1
- package/declarations/components/toggle-group.d.ts +139 -0
- package/declarations/components/toggle-group.d.ts.map +1 -0
- package/declarations/components/toggle.d.ts +18 -2
- package/declarations/components/toggle.d.ts.map +1 -1
- package/declarations/index.d.ts +2 -0
- package/declarations/index.d.ts.map +1 -1
- package/declarations/services/ember-primitives/setup.d.ts +27 -0
- package/declarations/services/ember-primitives/setup.d.ts.map +1 -0
- package/declarations/test-support/a11y.d.ts +7 -0
- package/declarations/test-support/a11y.d.ts.map +1 -0
- package/dist/_app_/components/toggle-group.js +1 -0
- package/dist/_app_/services/ember-primitives/setup.js +1 -0
- package/dist/components/-private/utils.js +5 -3
- package/dist/components/-private/utils.js.map +1 -1
- package/dist/components/toggle-group.js +103 -0
- package/dist/components/toggle-group.js.map +1 -0
- package/dist/components/toggle.js +9 -1
- package/dist/components/toggle.js.map +1 -1
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -1
- package/dist/services/ember-primitives/setup.js +35 -0
- package/dist/services/ember-primitives/setup.js.map +1 -0
- package/dist/test-support/a11y.js +17 -0
- package/dist/test-support/a11y.js.map +1 -0
- package/package.json +6 -2
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* If the user provides an onChange or similar function, use that,
|
|
3
3
|
* otherwise fallback to the uncontrolled toggle
|
|
4
4
|
*/
|
|
5
|
-
export declare function toggleWithFallback(uncontrolledToggle: () => void, controlledToggle?: () => void): void;
|
|
5
|
+
export declare function toggleWithFallback(uncontrolledToggle: (...args: unknown[]) => void, controlledToggle?: (...args: any[]) => void, ...args: unknown[]): void;
|
|
6
6
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/-private/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/-private/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,kBAAkB,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAEhD,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAC3C,GAAG,IAAI,EAAE,OAAO,EAAE,QAOnB"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import Component from '@glimmer/component';
|
|
2
|
+
import type { ComponentLike } from '@glint/template';
|
|
3
|
+
export interface ItemSignature<Value = any> {
|
|
4
|
+
/**
|
|
5
|
+
* The button element will have aria-pressed="true" on it when the button is in the pressed state.
|
|
6
|
+
*/
|
|
7
|
+
Element: HTMLButtonElement;
|
|
8
|
+
Args: {
|
|
9
|
+
/**
|
|
10
|
+
* When used in a group of Toggles, this option will be helpful to
|
|
11
|
+
* know which toggle was pressed if you're using the same @onChange
|
|
12
|
+
* handler for multiple toggles.
|
|
13
|
+
*/
|
|
14
|
+
value?: Value;
|
|
15
|
+
};
|
|
16
|
+
Blocks: {
|
|
17
|
+
default: [
|
|
18
|
+
/**
|
|
19
|
+
* the current pressed state of the toggle button
|
|
20
|
+
*
|
|
21
|
+
* Useful when using the toggle button as an uncontrolled component
|
|
22
|
+
*/
|
|
23
|
+
pressed: boolean
|
|
24
|
+
];
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
export type Item<Value = any> = ComponentLike<ItemSignature<Value>>;
|
|
28
|
+
export interface SingleSignature<Value> {
|
|
29
|
+
Element: HTMLDivElement;
|
|
30
|
+
Args: {
|
|
31
|
+
/**
|
|
32
|
+
* Optionally set the initial toggle state
|
|
33
|
+
*/
|
|
34
|
+
value?: Value;
|
|
35
|
+
/**
|
|
36
|
+
* Callback for when the toggle-group's state is changed.
|
|
37
|
+
*
|
|
38
|
+
* Can be used to control the state of the component.
|
|
39
|
+
*
|
|
40
|
+
*
|
|
41
|
+
* When none of the toggles are selected, undefined will be passed.
|
|
42
|
+
*/
|
|
43
|
+
onChange?: (value: Value | undefined) => void;
|
|
44
|
+
};
|
|
45
|
+
Blocks: {
|
|
46
|
+
default: [
|
|
47
|
+
{
|
|
48
|
+
/**
|
|
49
|
+
* The Toggle Switch
|
|
50
|
+
*/
|
|
51
|
+
Item: Item;
|
|
52
|
+
}
|
|
53
|
+
];
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
export interface MultiSignature<Value = any> {
|
|
57
|
+
Element: HTMLDivElement;
|
|
58
|
+
Args: {
|
|
59
|
+
/**
|
|
60
|
+
* Optionally set the initial toggle state
|
|
61
|
+
*/
|
|
62
|
+
value?: Value[] | Set<Value> | Value;
|
|
63
|
+
/**
|
|
64
|
+
* Callback for when the toggle-group's state is changed.
|
|
65
|
+
*
|
|
66
|
+
* Can be used to control the state of the component.
|
|
67
|
+
*
|
|
68
|
+
*
|
|
69
|
+
* When none of the toggles are selected, undefined will be passed.
|
|
70
|
+
*/
|
|
71
|
+
onChange?: (value: Set<Value>) => void;
|
|
72
|
+
};
|
|
73
|
+
Blocks: {
|
|
74
|
+
default: [
|
|
75
|
+
{
|
|
76
|
+
/**
|
|
77
|
+
* The Toggle Switch
|
|
78
|
+
*/
|
|
79
|
+
Item: Item;
|
|
80
|
+
}
|
|
81
|
+
];
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
interface PrivateSingleSignature<Value = any> {
|
|
85
|
+
Element: HTMLDivElement;
|
|
86
|
+
Args: {
|
|
87
|
+
type?: 'single';
|
|
88
|
+
/**
|
|
89
|
+
* Optionally set the initial toggle state
|
|
90
|
+
*/
|
|
91
|
+
value?: Value;
|
|
92
|
+
/**
|
|
93
|
+
* Callback for when the toggle-group's state is changed.
|
|
94
|
+
*
|
|
95
|
+
* Can be used to control the state of the component.
|
|
96
|
+
*
|
|
97
|
+
*
|
|
98
|
+
* When none of the toggles are selected, undefined will be passed.
|
|
99
|
+
*/
|
|
100
|
+
onChange?: (value: Value | undefined) => void;
|
|
101
|
+
};
|
|
102
|
+
Blocks: {
|
|
103
|
+
default: [
|
|
104
|
+
{
|
|
105
|
+
Item: Item;
|
|
106
|
+
}
|
|
107
|
+
];
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
interface PrivateMultiSignature<Value = any> {
|
|
111
|
+
Element: HTMLDivElement;
|
|
112
|
+
Args: {
|
|
113
|
+
type: 'multi';
|
|
114
|
+
/**
|
|
115
|
+
* Optionally set the initial toggle state
|
|
116
|
+
*/
|
|
117
|
+
value?: Value[] | Set<Value> | Value;
|
|
118
|
+
/**
|
|
119
|
+
* Callback for when the toggle-group's state is changed.
|
|
120
|
+
*
|
|
121
|
+
* Can be used to control the state of the component.
|
|
122
|
+
*
|
|
123
|
+
*
|
|
124
|
+
* When none of the toggles are selected, undefined will be passed.
|
|
125
|
+
*/
|
|
126
|
+
onChange?: (value: Set<Value>) => void;
|
|
127
|
+
};
|
|
128
|
+
Blocks: {
|
|
129
|
+
default: [
|
|
130
|
+
{
|
|
131
|
+
Item: Item;
|
|
132
|
+
}
|
|
133
|
+
];
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
export declare class ToggleGroup<Value = any> extends Component<PrivateSingleSignature<Value> | PrivateMultiSignature<Value>> {
|
|
137
|
+
}
|
|
138
|
+
export {};
|
|
139
|
+
//# sourceMappingURL=toggle-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAc3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AASrD,MAAM,WAAW,aAAa,CAAC,KAAK,GAAG,GAAG;IACxC;;OAEG;IACH,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE;QACJ;;;;WAIG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;;;;eAIG;YACH,OAAO,EAAE,OAAO;SACjB,CAAC;KACH,CAAC;CACH;AAED,MAAM,MAAM,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAEpE,MAAM,WAAW,eAAe,CAAC,KAAK;IACpC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACd;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;KAC/C,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE;;mBAEG;gBACH,IAAI,EAAE,IAAI,CAAC;aACZ;SACF,CAAC;KACH,CAAC;CACH;AAED,MAAM,WAAW,cAAc,CAAC,KAAK,GAAG,GAAG;IACzC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QACrC;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;KACxC,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE;;mBAEG;gBACH,IAAI,EAAE,IAAI,CAAC;aACZ;SACF,CAAC;KACH,CAAC;CACH;AAED,UAAU,sBAAsB,CAAC,KAAK,GAAG,GAAG;IAC1C,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,IAAI,CAAC,EAAE,QAAQ,CAAC;QAEhB;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACd;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;KAC/C,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,IAAI,CAAC;aACZ;SACF,CAAC;KACH,CAAC;CACH;AAED,UAAU,qBAAqB,CAAC,KAAK,GAAG,GAAG;IACzC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QACrC;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;KACxC,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,IAAI,CAAC;aACZ;SACF,CAAC;KACH,CAAC;CACH;AAMD,qBAAa,WAAW,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,SAAS,CACrD,sBAAsB,CAAC,KAAK,CAAC,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAC7D;CA0BA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { TOC } from '@ember/component/template-only';
|
|
2
|
-
export interface Signature {
|
|
2
|
+
export interface Signature<Value = any> {
|
|
3
3
|
Element: HTMLButtonElement;
|
|
4
4
|
Args: {
|
|
5
5
|
/**
|
|
@@ -12,8 +12,24 @@ export interface Signature {
|
|
|
12
12
|
* Callback for when the toggle's state is changed.
|
|
13
13
|
*
|
|
14
14
|
* Can be used to control the state of the component.
|
|
15
|
+
*
|
|
16
|
+
* if a `@value` is passed to this `<Toggle>`, that @value will
|
|
17
|
+
* be passed to the `@onChange` handler.
|
|
18
|
+
*
|
|
19
|
+
* This can be useful when using the same function for the `@onChange`
|
|
20
|
+
* handler with multiple `<Toggle>` components.
|
|
21
|
+
*/
|
|
22
|
+
onChange?: (value: Value | undefined, pressed: boolean) => void;
|
|
23
|
+
/**
|
|
24
|
+
* When used in a group of Toggles, this option will be helpful to
|
|
25
|
+
* know which toggle was pressed if you're using the same @onChange
|
|
26
|
+
* handler for multiple toggles.
|
|
27
|
+
*/
|
|
28
|
+
value?: Value;
|
|
29
|
+
/**
|
|
30
|
+
* When controlling state in a wrapping component, this function can be used in conjunction with `@value` to determine if this `<Toggle>` should appear pressed.
|
|
15
31
|
*/
|
|
16
|
-
|
|
32
|
+
isPressed?: (value?: Value | undefined) => boolean;
|
|
17
33
|
};
|
|
18
34
|
Blocks: {
|
|
19
35
|
default: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.ts"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAG1D,MAAM,WAAW,SAAS,CAAC,KAAK,GAAG,GAAG;IACpC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE;QACJ;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB;;;;;;;;;;WAUG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;QAEhE;;;;WAIG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QAEd;;WAEG;QACH,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,OAAO,CAAC;KACpD,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;;;;eAIG;YACH,OAAO,EAAE,OAAO;SACjB,CAAC;KACH,CAAC;CACH;AAaD,eAAO,MAAM,MAAM,EAAE,GAAG,CAAC,SAAS,CAmBhC,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
package/declarations/index.d.ts
CHANGED
|
@@ -16,5 +16,7 @@ export { Scroller } from "./components/scroller";
|
|
|
16
16
|
export { Shadowed } from "./components/shadowed";
|
|
17
17
|
export { Switch } from "./components/switch";
|
|
18
18
|
export { Toggle } from "./components/toggle";
|
|
19
|
+
export { ToggleGroup } from "./components/toggle-group";
|
|
19
20
|
export * from './helpers.ts';
|
|
21
|
+
export type { default as SetupService } from './services/ember-primitives/setup.ts';
|
|
20
22
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,YAAY,EACV,iCAAiC,EACjC,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,GAClC,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,cAAc,cAAc,CAAC;AAC7B,YAAY,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sCAAsC,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import Service from '@ember/service';
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/
|
|
5
|
+
export declare const PRIMITIVES: unique symbol;
|
|
6
|
+
export default class EmberPrimitivesSetup extends Service {
|
|
7
|
+
#private;
|
|
8
|
+
/**
|
|
9
|
+
* Sets up required features for accessibility.
|
|
10
|
+
*/
|
|
11
|
+
setup: ({ tabster, setTabsterRoot, }?: {
|
|
12
|
+
/**
|
|
13
|
+
* Let this setup function initalize tabster.
|
|
14
|
+
* https://tabster.io/docs/core
|
|
15
|
+
*
|
|
16
|
+
* This should be done only once per application as we don't want
|
|
17
|
+
* focus managers fighting with each other.
|
|
18
|
+
*
|
|
19
|
+
* Defaults to `true`,
|
|
20
|
+
*
|
|
21
|
+
* Will fallback to an existing tabster instance automatically if `getCurrentTabster` returns a value.
|
|
22
|
+
*/
|
|
23
|
+
tabster?: boolean | undefined;
|
|
24
|
+
setTabsterRoot?: boolean | undefined;
|
|
25
|
+
}) => void;
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=setup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../../src/services/ember-primitives/setup.ts"],"names":[],"mappings":";;AACA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAIrC;;GAEG;AACH,eAAO,MAAM,UAAU,eAAyC,CAAC;AAEjE,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,OAAO;;IACvD;;OAEG;IACH,KAAK;QAIH;;;;;;;;;;WAUG;;;eAkBH;CAKH"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/test-support/a11y.ts"],"names":[],"mappings":";;;;AAGA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAEtC;;;GAGG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,QAQjC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-primitives/components/toggle-group";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-primitives/services/ember-primitives/setup";
|
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
* If the user provides an onChange or similar function, use that,
|
|
3
3
|
* otherwise fallback to the uncontrolled toggle
|
|
4
4
|
*/
|
|
5
|
-
function toggleWithFallback(uncontrolledToggle,
|
|
5
|
+
function toggleWithFallback(uncontrolledToggle,
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7
|
+
controlledToggle, ...args) {
|
|
6
8
|
if (controlledToggle) {
|
|
7
|
-
return controlledToggle();
|
|
9
|
+
return controlledToggle(...args);
|
|
8
10
|
}
|
|
9
|
-
uncontrolledToggle();
|
|
11
|
+
uncontrolledToggle(...args);
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
export { toggleWithFallback };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/components/-private/utils.ts"],"sourcesContent":["/**\n * If the user provides an onChange or similar function, use that,\n * otherwise fallback to the uncontrolled toggle\n */\nexport function toggleWithFallback(uncontrolledToggle: () => void
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/components/-private/utils.ts"],"sourcesContent":["/**\n * If the user provides an onChange or similar function, use that,\n * otherwise fallback to the uncontrolled toggle\n */\nexport function toggleWithFallback(\n uncontrolledToggle: (...args: unknown[]) => void,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n controlledToggle?: (...args: any[]) => void,\n ...args: unknown[]\n) {\n if (controlledToggle) {\n return controlledToggle(...args);\n }\n\n uncontrolledToggle(...args);\n}\n"],"names":["toggleWithFallback","uncontrolledToggle","controlledToggle","args"],"mappings":"AAAA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAChCC,kBAAgD;AAChD;AACAC,gBAA2C,EAC3C,GAAGC,IAAe,EAClB;AACA,EAAA,IAAID,gBAAgB,EAAE;AACpB,IAAA,OAAOA,gBAAgB,CAAC,GAAGC,IAAI,CAAC,CAAA;AAClC,GAAA;EAEAF,kBAAkB,CAAC,GAAGE,IAAI,CAAC,CAAA;AAC7B;;;;"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import Component from '@glimmer/component';
|
|
2
|
+
import { cached } from '@glimmer/tracking';
|
|
3
|
+
import { Types } from 'tabster';
|
|
4
|
+
import { TrackedSet } from 'tracked-built-ins';
|
|
5
|
+
import { localCopy } from 'tracked-toolbox';
|
|
6
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
7
|
+
import { setComponentTemplate } from '@ember/component';
|
|
8
|
+
import { g, i, n } from 'decorator-transforms/runtime';
|
|
9
|
+
import { hash } from '@ember/helper';
|
|
10
|
+
import { Toggle } from './toggle.js';
|
|
11
|
+
|
|
12
|
+
const TABSTER_CONFIG = JSON.stringify({
|
|
13
|
+
mover: {
|
|
14
|
+
direction: Types.MoverDirections.Both,
|
|
15
|
+
cyclic: true
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
function isMulti(x1) {
|
|
19
|
+
return x1 === 'multi';
|
|
20
|
+
}
|
|
21
|
+
class ToggleGroup extends Component {
|
|
22
|
+
// See: https://github.com/typed-ember/glint/issues/715
|
|
23
|
+
static {
|
|
24
|
+
setComponentTemplate(precompileTemplate("\n {{#if (isMulti this.args.type)}}\n <MultiToggleGroup @value={{this.args.value}} @onChange={{this.args.onChange}} ...attributes as |x|>\n {{yield x}}\n </MultiToggleGroup>\n {{else}}\n <SingleToggleGroup @value={{this.args.value}} @onChange={{this.args.onChange}} ...attributes as |x|>\n {{yield x}}\n </SingleToggleGroup>\n {{/if}}\n ", {
|
|
25
|
+
scope: () => ({
|
|
26
|
+
isMulti,
|
|
27
|
+
MultiToggleGroup,
|
|
28
|
+
SingleToggleGroup
|
|
29
|
+
}),
|
|
30
|
+
strictMode: true
|
|
31
|
+
}), this);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
let SingleToggleGroup = class SingleToggleGroup extends Component {
|
|
35
|
+
static {
|
|
36
|
+
g(this.prototype, "activePressed", [localCopy('args.value')]);
|
|
37
|
+
}
|
|
38
|
+
#activePressed = (i(this, "activePressed"), void 0);
|
|
39
|
+
handleToggle = value1 => {
|
|
40
|
+
if (this.activePressed === value1) {
|
|
41
|
+
this.activePressed = undefined;
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
this.activePressed = value1;
|
|
45
|
+
this.args.onChange?.(this.activePressed);
|
|
46
|
+
};
|
|
47
|
+
isPressed = value1 => value1 === this.activePressed;
|
|
48
|
+
static {
|
|
49
|
+
setComponentTemplate(precompileTemplate("\n <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n </div>\n ", {
|
|
50
|
+
scope: () => ({
|
|
51
|
+
TABSTER_CONFIG,
|
|
52
|
+
hash,
|
|
53
|
+
Toggle
|
|
54
|
+
}),
|
|
55
|
+
strictMode: true
|
|
56
|
+
}), this);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
let MultiToggleGroup = class MultiToggleGroup extends Component {
|
|
60
|
+
/**
|
|
61
|
+
* Normalizes @value to a Set
|
|
62
|
+
* and makes sure that even if the input Set is reactive,
|
|
63
|
+
* we don't mistakenly dirty it.
|
|
64
|
+
*/
|
|
65
|
+
get activePressed() {
|
|
66
|
+
let value1 = this.args.value;
|
|
67
|
+
if (!value1) {
|
|
68
|
+
return new TrackedSet();
|
|
69
|
+
}
|
|
70
|
+
if (Array.isArray(value1)) {
|
|
71
|
+
return new TrackedSet(value1);
|
|
72
|
+
}
|
|
73
|
+
if (value1 instanceof Set) {
|
|
74
|
+
return new TrackedSet(value1);
|
|
75
|
+
}
|
|
76
|
+
return new TrackedSet([value1]);
|
|
77
|
+
}
|
|
78
|
+
static {
|
|
79
|
+
n(this.prototype, "activePressed", [cached]);
|
|
80
|
+
}
|
|
81
|
+
handleToggle = value1 => {
|
|
82
|
+
if (this.activePressed.has(value1)) {
|
|
83
|
+
this.activePressed.delete(value1);
|
|
84
|
+
} else {
|
|
85
|
+
this.activePressed.add(value1);
|
|
86
|
+
}
|
|
87
|
+
this.args.onChange?.(new Set(this.activePressed.values()));
|
|
88
|
+
};
|
|
89
|
+
isPressed = value1 => this.activePressed.has(value1);
|
|
90
|
+
static {
|
|
91
|
+
setComponentTemplate(precompileTemplate("\n <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n </div>\n ", {
|
|
92
|
+
scope: () => ({
|
|
93
|
+
TABSTER_CONFIG,
|
|
94
|
+
hash,
|
|
95
|
+
Toggle
|
|
96
|
+
}),
|
|
97
|
+
strictMode: true
|
|
98
|
+
}), this);
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
export { ToggleGroup };
|
|
103
|
+
//# sourceMappingURL=toggle-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-group.js","sources":["../../src/components/toggle-group.gts"],"sourcesContent":["import { template } from \"@ember/template-compiler\";\nimport Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { Types } from 'tabster';\nimport { TrackedSet } from 'tracked-built-ins';\n// The consumer will need to provide types for tracked-toolbox.\n// Or.. better yet, we PR to trakcked-toolbox to provide them\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport { localCopy } from 'tracked-toolbox';\nimport { Toggle } from './toggle.gts';\nimport type { ComponentLike } from '@glint/template';\nconst TABSTER_CONFIG = JSON.stringify({\n mover: {\n direction: Types.MoverDirections.Both,\n cyclic: true\n }\n});\nexport interface ItemSignature<Value = any> {\n /**\n * The button element will have aria-pressed=\"true\" on it when the button is in the pressed state.\n */ Element: HTMLButtonElement;\n Args: {\n /**\n * When used in a group of Toggles, this option will be helpful to\n * know which toggle was pressed if you're using the same @onChange\n * handler for multiple toggles.\n */ value?: Value;\n };\n Blocks: {\n default: [/**\n * the current pressed state of the toggle button\n *\n * Useful when using the toggle button as an uncontrolled component\n */ pressed: boolean];\n };\n}\nexport type Item<Value = any> = ComponentLike<ItemSignature<Value>>;\nexport interface SingleSignature<Value> {\n Element: HTMLDivElement;\n Args: {\n /**\n * Optionally set the initial toggle state\n */ value?: Value;\n /**\n * Callback for when the toggle-group's state is changed.\n *\n * Can be used to control the state of the component.\n *\n *\n * When none of the toggles are selected, undefined will be passed.\n */ onChange?: (value: Value | undefined) => void;\n };\n Blocks: {\n default: [{\n /**\n * The Toggle Switch\n */ Item: Item;\n }];\n };\n}\nexport interface MultiSignature<Value = any> {\n Element: HTMLDivElement;\n Args: {\n /**\n * Optionally set the initial toggle state\n */ value?: Value[] | Set<Value> | Value;\n /**\n * Callback for when the toggle-group's state is changed.\n *\n * Can be used to control the state of the component.\n *\n *\n * When none of the toggles are selected, undefined will be passed.\n */ onChange?: (value: Set<Value>) => void;\n };\n Blocks: {\n default: [{\n /**\n * The Toggle Switch\n */ Item: Item;\n }];\n };\n}\ninterface PrivateSingleSignature<Value = any> {\n Element: HTMLDivElement;\n Args: {\n type?: 'single';\n /**\n * Optionally set the initial toggle state\n */ value?: Value;\n /**\n * Callback for when the toggle-group's state is changed.\n *\n * Can be used to control the state of the component.\n *\n *\n * When none of the toggles are selected, undefined will be passed.\n */ onChange?: (value: Value | undefined) => void;\n };\n Blocks: {\n default: [{\n Item: Item;\n }];\n };\n}\ninterface PrivateMultiSignature<Value = any> {\n Element: HTMLDivElement;\n Args: {\n type: 'multi';\n /**\n * Optionally set the initial toggle state\n */ value?: Value[] | Set<Value> | Value;\n /**\n * Callback for when the toggle-group's state is changed.\n *\n * Can be used to control the state of the component.\n *\n *\n * When none of the toggles are selected, undefined will be passed.\n */ onChange?: (value: Set<Value>) => void;\n };\n Blocks: {\n default: [{\n Item: Item;\n }];\n };\n}\nfunction isMulti(x1: 'single' | 'multi' | undefined): x is 'multi' {\n return x1 === 'multi';\n}\nexport class ToggleGroup<Value = any> extends Component<PrivateSingleSignature<Value> | PrivateMultiSignature<Value>> {\n // See: https://github.com/typed-ember/glint/issues/715\n static{\n template(`\n {{#if (isMulti this.args.type)}}\n <MultiToggleGroup\n @value={{this.args.value}}\n @onChange={{this.args.onChange}}\n ...attributes\n as |x|\n >\n {{yield x}}\n </MultiToggleGroup>\n {{else}}\n <SingleToggleGroup\n @value={{this.args.value}}\n @onChange={{this.args.onChange}}\n ...attributes\n as |x|\n >\n {{yield x}}\n </SingleToggleGroup>\n {{/if}}\n `, {\n component: this,\n eval () {\n return eval(arguments[0]);\n }\n });\n }\n}\nlet SingleToggleGroup = class SingleToggleGroup<Value = any> extends Component<SingleSignature<Value>> {\n @localCopy('args.value')\n activePressed?: Value;\n handleToggle = (value1: Value)=>{\n if (this.activePressed === value1) {\n this.activePressed = undefined;\n return;\n }\n this.activePressed = value1;\n this.args.onChange?.(this.activePressed);\n };\n isPressed = (value1: Value | undefined)=>value1 === this.activePressed;\n static{\n template(`\n <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n </div>\n `, {\n component: this,\n eval () {\n return eval(arguments[0]);\n }\n });\n }\n};\nlet MultiToggleGroup = class MultiToggleGroup<Value = any> extends Component<MultiSignature<Value>> {\n /**\n * Normalizes @value to a Set\n * and makes sure that even if the input Set is reactive,\n * we don't mistakenly dirty it.\n */ @cached\n get activePressed(): TrackedSet<Value> {\n let value1 = this.args.value;\n if (!value1) {\n return new TrackedSet();\n }\n if (Array.isArray(value1)) {\n return new TrackedSet(value1);\n }\n if (value1 instanceof Set) {\n return new TrackedSet(value1);\n }\n return new TrackedSet([\n value1\n ]);\n }\n handleToggle = (value1: Value)=>{\n if (this.activePressed.has(value1)) {\n this.activePressed.delete(value1);\n } else {\n this.activePressed.add(value1);\n }\n this.args.onChange?.(new Set<Value>(this.activePressed.values()));\n };\n isPressed = (value1: Value)=>this.activePressed.has(value1);\n static{\n template(`\n <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n </div>\n `, {\n component: this,\n eval () {\n return eval(arguments[0]);\n }\n });\n }\n};\n"],"names":["TABSTER_CONFIG","JSON","stringify","mover","direction","Types","MoverDirections","Both","cyclic","isMulti","x1","ToggleGroup","Component","setComponentTemplate","precompileTemplate","scope","MultiToggleGroup","SingleToggleGroup","strictMode","g","this","prototype","localCopy","i","void 0","handleToggle","value1","activePressed","undefined","args","onChange","isPressed","hash","Toggle","value","TrackedSet","Array","isArray","Set","n","cached","has","delete","add","values"],"mappings":"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"}
|
|
@@ -6,9 +6,17 @@ import { precompileTemplate } from '@ember/template-compilation';
|
|
|
6
6
|
import { setComponentTemplate } from '@ember/component';
|
|
7
7
|
import templateOnly from '@ember/component/template-only';
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
// import Component from '@glimmer/component';
|
|
10
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
11
|
+
function isPressed(pressed1, value1, isPressed1) {
|
|
12
|
+
if (!value1) return Boolean(pressed1);
|
|
13
|
+
if (!isPressed1) return Boolean(pressed1);
|
|
14
|
+
return isPressed1(value1);
|
|
15
|
+
}
|
|
16
|
+
const Toggle = setComponentTemplate(precompileTemplate("\n {{#let (cell (isPressed @pressed @value @isPressed)) as |pressed|}}\n <button type=\"button\" aria-pressed=\"{{pressed.current}}\" {{on \"click\" (fn toggleWithFallback pressed.toggle @onChange @value)}} ...attributes>\n {{yield pressed.current}}\n </button>\n {{/let}}\n", {
|
|
10
17
|
scope: () => ({
|
|
11
18
|
cell,
|
|
19
|
+
isPressed,
|
|
12
20
|
on,
|
|
13
21
|
fn,
|
|
14
22
|
toggleWithFallback
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.js","sources":["../../src/components/toggle.gts"],"sourcesContent":["import { template } from \"@ember/template-compiler\";\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { cell } from 'ember-resources';\nimport { toggleWithFallback } from './-private/utils.ts';\nimport type { TOC } from '@ember/component/template-only';\nexport interface Signature {\n Element: HTMLButtonElement;\n Args: {\n /**\n * The pressed-state of the toggle.\n *\n * Can be used to control the state of the component.\n */ pressed?: boolean;\n /**\n * Callback for when the toggle's state is changed.\n *\n * Can be used to control the state of the component.\n */ onChange?: () => void;\n };\n Blocks: {\n default: [/**\n * the current pressed state of the toggle button\n *\n * Useful when using the toggle button as an uncontrolled component\n */ pressed: boolean];\n };\n}\nexport const Toggle: TOC<Signature> = template(`\n {{#let (cell @pressed) as |pressed|}}\n <button\n type=\"button\"\n aria-pressed=\"{{pressed.current}}\"\n {{on \"click\" (fn toggleWithFallback pressed.toggle @onChange)}}\n ...attributes\n >\n {{yield pressed.current}}\n </button>\n {{/let}}\n`, {\n eval () {\n return eval(arguments[0]);\n }\n});\nexport default Toggle;\n"],"names":["Toggle","setComponentTemplate","precompileTemplate","scope","cell","on","fn","toggleWithFallback","strictMode","templateOnly"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"toggle.js","sources":["../../src/components/toggle.gts"],"sourcesContent":["// import Component from '@glimmer/component';\nimport { template } from \"@ember/template-compiler\";\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { cell } from 'ember-resources';\nimport { toggleWithFallback } from './-private/utils.ts';\nimport type { TOC } from '@ember/component/template-only';\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface Signature<Value = any> {\n Element: HTMLButtonElement;\n Args: {\n /**\n * The pressed-state of the toggle.\n *\n * Can be used to control the state of the component.\n */ pressed?: boolean;\n /**\n * Callback for when the toggle's state is changed.\n *\n * Can be used to control the state of the component.\n *\n * if a `@value` is passed to this `<Toggle>`, that @value will\n * be passed to the `@onChange` handler.\n *\n * This can be useful when using the same function for the `@onChange`\n * handler with multiple `<Toggle>` components.\n */ onChange?: (value: Value | undefined, pressed: boolean) => void;\n /**\n * When used in a group of Toggles, this option will be helpful to\n * know which toggle was pressed if you're using the same @onChange\n * handler for multiple toggles.\n */ value?: Value;\n /**\n * When controlling state in a wrapping component, this function can be used in conjunction with `@value` to determine if this `<Toggle>` should appear pressed.\n */ isPressed?: (value?: Value | undefined) => boolean;\n };\n Blocks: {\n default: [/**\n * the current pressed state of the toggle button\n *\n * Useful when using the toggle button as an uncontrolled component\n */ pressed: boolean];\n };\n}\nfunction isPressed(pressed1?: boolean, value1?: unknown, isPressed1?: (value?: unknown) => boolean): boolean {\n if (!value1) return Boolean(pressed1);\n if (!isPressed1) return Boolean(pressed1);\n return isPressed1(value1);\n}\nexport const Toggle: TOC<Signature> = template(`\n {{#let (cell (isPressed @pressed @value @isPressed)) as |pressed|}}\n <button\n type=\"button\"\n aria-pressed=\"{{pressed.current}}\"\n {{on \"click\" (fn toggleWithFallback pressed.toggle @onChange @value)}}\n ...attributes\n >\n {{yield pressed.current}}\n </button>\n {{/let}}\n`, {\n eval () {\n return eval(arguments[0]);\n }\n});\nexport default Toggle;\n"],"names":["isPressed","pressed1","value1","isPressed1","Boolean","Toggle","setComponentTemplate","precompileTemplate","scope","cell","on","fn","toggleWithFallback","strictMode","templateOnly"],"mappings":";;;;;;;;AAAA;AAOA;AAqCA,SAASA,SAASA,CAACC,QAAkB,EAAEC,MAAgB,EAAEC,UAAyC,EAAW;AACzG,EAAA,IAAI,CAACD,MAAM,EAAE,OAAOE,OAAO,CAACH,QAAQ,CAAC,CAAA;AACrC,EAAA,IAAI,CAACE,UAAU,EAAE,OAAOC,OAAO,CAACH,QAAQ,CAAC,CAAA;EACzC,OAAOE,UAAU,CAACD,MAAM,CAAC,CAAA;AAC7B,CAAA;MACaG,MAAsB,GAAAC,oBAAA,CAAGC,kBAAA,CAWnC,iSAAA,EAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;IAAAT,SAAA;IAAAU,EAAA;IAAAC,EAAA;AAAAC,IAAAA,kBAAAA;AAAA,GAAA,CAAA;EAAAC,UAAA,EAAA,IAAA;AAIH,CAAC,CAAC,EAAAC,YAAA,EAAA;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -16,8 +16,16 @@ export { Scroller } from './components/scroller.js';
|
|
|
16
16
|
export { Shadowed } from './components/shadowed.js';
|
|
17
17
|
export { Switch } from './components/switch.js';
|
|
18
18
|
export { Toggle } from './components/toggle.js';
|
|
19
|
+
export { ToggleGroup } from './components/toggle-group.js';
|
|
19
20
|
export { service } from './helpers/service.js';
|
|
20
21
|
|
|
22
|
+
/**
|
|
23
|
+
* DANGER: this is a *barrel file*
|
|
24
|
+
*
|
|
25
|
+
* It forces the whole library to be loaded and all dependencies.
|
|
26
|
+
*
|
|
27
|
+
* If you have a small app, you probably don't want to import from here -- instead import from each sub-path.
|
|
28
|
+
*/
|
|
21
29
|
if (macroCondition(isDevelopingApp())) {
|
|
22
30
|
importSync('./components/violations.css');
|
|
23
31
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n AccordionContentExternalSignature,\n AccordionHeaderExternalSignature,\n AccordionItemExternalSignature,\n AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Dialog, Dialog as Modal } from './components/dialog.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { StickyFooter } from './components/layout/sticky-footer/index.gts';\nexport { Link } from './components/link.gts';\nexport { OTP, OTPInput } from './components/one-time-password/index.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport * from './helpers.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n AccordionContentExternalSignature,\n AccordionHeaderExternalSignature,\n AccordionItemExternalSignature,\n AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Dialog, Dialog as Modal } from './components/dialog.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { StickyFooter } from './components/layout/sticky-footer/index.gts';\nexport { Link } from './components/link.gts';\nexport { OTP, OTPInput } from './components/one-time-password/index.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport * from './helpers.ts';\nexport type { default as SetupService } from './services/ember-primitives/setup.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC,CAAA;AAC3C"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import Service from '@ember/service';
|
|
2
|
+
import { getTabster, createTabster, getMover } from 'tabster';
|
|
3
|
+
|
|
4
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @internal
|
|
8
|
+
*/
|
|
9
|
+
const PRIMITIVES = Symbol.for('ember-primitives-globals');
|
|
10
|
+
class EmberPrimitivesSetup extends Service {
|
|
11
|
+
/**
|
|
12
|
+
* Sets up required features for accessibility.
|
|
13
|
+
*/
|
|
14
|
+
setup = ({
|
|
15
|
+
tabster,
|
|
16
|
+
setTabsterRoot
|
|
17
|
+
} = {}) => {
|
|
18
|
+
tabster ??= true;
|
|
19
|
+
setTabsterRoot ??= true;
|
|
20
|
+
if (!tabster) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
let existing = getTabster(window);
|
|
24
|
+
this.#setupTabster(existing ?? createTabster(window));
|
|
25
|
+
if (setTabsterRoot) {
|
|
26
|
+
document.body.setAttribute('data-tabster', '{ "root": {} }');
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
#setupTabster = tabster => {
|
|
30
|
+
getMover(tabster);
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export { PRIMITIVES, EmberPrimitivesSetup as default };
|
|
35
|
+
//# sourceMappingURL=setup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"setup.js","sources":["../../../src/services/ember-primitives/setup.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport Service from '@ember/service';\n\nimport { createTabster, getMover, getTabster } from 'tabster';\n\n/**\n * @internal\n */\nexport const PRIMITIVES = Symbol.for('ember-primitives-globals');\n\nexport default class EmberPrimitivesSetup extends Service {\n /**\n * Sets up required features for accessibility.\n */\n setup = ({\n tabster,\n setTabsterRoot,\n }: {\n /**\n * Let this setup function initalize tabster.\n * https://tabster.io/docs/core\n *\n * This should be done only once per application as we don't want\n * focus managers fighting with each other.\n *\n * Defaults to `true`,\n *\n * Will fallback to an existing tabster instance automatically if `getCurrentTabster` returns a value.\n */\n tabster?: boolean;\n setTabsterRoot?: boolean;\n } = {}) => {\n tabster ??= true;\n setTabsterRoot ??= true;\n\n if (!tabster) {\n return;\n }\n\n let existing = getTabster(window);\n\n this.#setupTabster(existing ?? createTabster(window));\n\n if (setTabsterRoot) {\n document.body.setAttribute('data-tabster', '{ \"root\": {} }');\n }\n };\n\n #setupTabster = (tabster: ReturnType<typeof createTabster>) => {\n getMover(tabster);\n };\n}\n"],"names":["PRIMITIVES","Symbol","for","EmberPrimitivesSetup","Service","setup","tabster","setTabsterRoot","existing","getTabster","window","createTabster","document","body","setAttribute","getMover"],"mappings":";;;AAAA;;AAKA;AACA;AACA;AACO,MAAMA,UAAU,GAAGC,MAAM,CAACC,GAAG,CAAC,0BAA0B,EAAC;AAEjD,MAAMC,oBAAoB,SAASC,OAAO,CAAC;AACxD;AACF;AACA;AACEC,EAAAA,KAAK,GAAGA,CAAC;IACPC,OAAO;AACPC,IAAAA,cAAAA;GAeD,GAAG,EAAE,KAAK;AACTD,IAAAA,OAAO,KAAK,IAAI,CAAA;AAChBC,IAAAA,cAAc,KAAK,IAAI,CAAA;IAEvB,IAAI,CAACD,OAAO,EAAE;AACZ,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAIE,QAAQ,GAAGC,UAAU,CAACC,MAAM,CAAC,CAAA;IAEjC,IAAI,CAAC,aAAa,CAACF,QAAQ,IAAIG,aAAa,CAACD,MAAM,CAAC,CAAC,CAAA;AAErD,IAAA,IAAIH,cAAc,EAAE;MAClBK,QAAQ,CAACC,IAAI,CAACC,YAAY,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAA;AAC9D,KAAA;GACD,CAAA;EAED,aAAa,GAAIR,OAAyC,IAAK;IAC7DS,QAAQ,CAACT,OAAO,CAAC,CAAA;GAClB,CAAA;AACH;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { assert } from '@ember/debug';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Sets up all support utilities for primitive components.
|
|
5
|
+
* Including the tabster root.
|
|
6
|
+
*/
|
|
7
|
+
function setup(owner) {
|
|
8
|
+
let service = owner.lookup('service:ember-primitives/setup');
|
|
9
|
+
assert('Could not find the ember-primitives service', service);
|
|
10
|
+
service.setup({
|
|
11
|
+
setTabsterRoot: false
|
|
12
|
+
});
|
|
13
|
+
document.querySelector('#ember-testing')?.setAttribute('data-tabster', '{ "root": {} }');
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export { setup };
|
|
17
|
+
//# sourceMappingURL=a11y.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"a11y.js","sources":["../../src/test-support/a11y.ts"],"sourcesContent":["import { assert } from '@ember/debug';\n\nimport type SetupService from '../services/ember-primitives/setup.ts';\nimport type Owner from '@ember/owner';\n\n/**\n * Sets up all support utilities for primitive components.\n * Including the tabster root.\n */\nexport function setup(owner: Owner) {\n let service = owner.lookup('service:ember-primitives/setup');\n\n assert('Could not find the ember-primitives service', service);\n\n (service as SetupService).setup({ setTabsterRoot: false });\n\n document.querySelector('#ember-testing')?.setAttribute('data-tabster', '{ \"root\": {} }');\n}\n"],"names":["setup","owner","service","lookup","assert","setTabsterRoot","document","querySelector","setAttribute"],"mappings":";;AAKA;AACA;AACA;AACA;AACO,SAASA,KAAKA,CAACC,KAAY,EAAE;AAClC,EAAA,IAAIC,OAAO,GAAGD,KAAK,CAACE,MAAM,CAAC,gCAAgC,CAAC,CAAA;AAE5DC,EAAAA,MAAM,CAAC,6CAA6C,EAAEF,OAAO,CAAC,CAAA;EAE7DA,OAAO,CAAkBF,KAAK,CAAC;AAAEK,IAAAA,cAAc,EAAE,KAAA;AAAM,GAAC,CAAC,CAAA;EAE1DC,QAAQ,CAACC,aAAa,CAAC,gBAAgB,CAAC,EAAEC,YAAY,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAA;AAC1F;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ember-primitives",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"description": "Making apps easier to build",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"*.css"
|
|
@@ -25,6 +25,8 @@
|
|
|
25
25
|
"ember-element-helper": "^0.8.4",
|
|
26
26
|
"ember-velcro": "^2.1.3",
|
|
27
27
|
"reactiveweb": "^1.2.0",
|
|
28
|
+
"tabster": "^7.0.1",
|
|
29
|
+
"tracked-built-ins": "^3.2.0",
|
|
28
30
|
"tracked-toolbox": "^2.0.0"
|
|
29
31
|
},
|
|
30
32
|
"devDependencies": {
|
|
@@ -97,8 +99,10 @@
|
|
|
97
99
|
"./components/scroller.js": "./dist/_app_/components/scroller.js",
|
|
98
100
|
"./components/shadowed.js": "./dist/_app_/components/shadowed.js",
|
|
99
101
|
"./components/switch.js": "./dist/_app_/components/switch.js",
|
|
102
|
+
"./components/toggle-group.js": "./dist/_app_/components/toggle-group.js",
|
|
100
103
|
"./components/toggle.js": "./dist/_app_/components/toggle.js",
|
|
101
|
-
"./helpers/service.js": "./dist/_app_/helpers/service.js"
|
|
104
|
+
"./helpers/service.js": "./dist/_app_/helpers/service.js",
|
|
105
|
+
"./services/ember-primitives/setup.js": "./dist/_app_/services/ember-primitives/setup.js"
|
|
102
106
|
}
|
|
103
107
|
},
|
|
104
108
|
"exports": {
|