ember-primitives 0.55.0 → 0.55.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.
- package/README.md +9 -0
- package/declarations/color-scheme.d.ts.map +1 -1
- package/declarations/components/tabs.d.ts +1 -0
- package/declarations/components/tabs.d.ts.map +1 -1
- package/dist/color-scheme.js +1 -0
- package/dist/color-scheme.js.map +1 -1
- package/dist/components/tabs.js.map +1 -1
- package/package.json +7 -7
- package/src/color-scheme.ts +2 -0
- package/src/components/tabs.gts +1 -0
package/README.md
CHANGED
|
@@ -75,6 +75,13 @@ See the [Contributing](CONTRIBUTING.md) guide for details.
|
|
|
75
75
|
<sub><b>pulien</b></sub>
|
|
76
76
|
</a>
|
|
77
77
|
</td>
|
|
78
|
+
<td align="center">
|
|
79
|
+
<a href="https://github.com/bendemboski">
|
|
80
|
+
<img src="https://avatars.githubusercontent.com/u/559001?v=4" width="100;" alt="bendemboski"/>
|
|
81
|
+
<br />
|
|
82
|
+
<sub><b>Ben Demboski</b></sub>
|
|
83
|
+
</a>
|
|
84
|
+
</td>
|
|
78
85
|
<td align="center">
|
|
79
86
|
<a href="https://github.com/bartocc">
|
|
80
87
|
<img src="https://avatars.githubusercontent.com/u/47953?v=4" width="100;" alt="bartocc"/>
|
|
@@ -96,6 +103,8 @@ See the [Contributing](CONTRIBUTING.md) guide for details.
|
|
|
96
103
|
<sub><b>ember-tomster</b></sub>
|
|
97
104
|
</a>
|
|
98
105
|
</td>
|
|
106
|
+
</tr>
|
|
107
|
+
<tr>
|
|
99
108
|
<td align="center">
|
|
100
109
|
<a href="https://github.com/johanrd">
|
|
101
110
|
<img src="https://avatars.githubusercontent.com/u/4601554?v=4" width="100;" alt="johanrd"/>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../src/color-scheme.ts"],"names":[],"mappings":"AAgBA;;GAEG;AACH,eAAO,MAAM,WAAW;IACtB;;OAEG;oBACa,MAAM;;QAOpB;;WAEG;2BACgB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI;;;QAKhD;;WAEG;2BACgB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI;;IAKlD;;OAEG;aACY,MAAM,GAAG,SAAS;;;CAsBlC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,SAyBnB;
|
|
1
|
+
{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../src/color-scheme.ts"],"names":[],"mappings":"AAgBA;;GAEG;AACH,eAAO,MAAM,WAAW;IACtB;;OAEG;oBACa,MAAM;;QAOpB;;WAEG;2BACgB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI;;;QAKhD;;WAEG;2BACgB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI;;IAKlD;;OAEG;aACY,MAAM,GAAG,SAAS;;;CAsBlC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,SAyBnB;AAgBD;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;mBAIH,MAAM;CACtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,eAAe;;;oBAGV,MAAM;;CAEvB,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,WAAW,UAInD;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;AAC1E,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;AAkBpD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,CAAC,EAAE,WAAW,QAItD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.gts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.gts"],"names":[],"mappings":"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"}
|
package/dist/color-scheme.js
CHANGED
|
@@ -94,6 +94,7 @@ const queries = {
|
|
|
94
94
|
none: window.matchMedia('(prefers-color-scheme: no-preference)')
|
|
95
95
|
};
|
|
96
96
|
queries.dark.addEventListener('change', e => {
|
|
97
|
+
if (localPreference.isSet()) return;
|
|
97
98
|
const mode = e.matches ? 'dark' : 'light';
|
|
98
99
|
colorScheme.update(mode);
|
|
99
100
|
});
|
package/dist/color-scheme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-scheme.js","sources":["../src/color-scheme.ts"],"sourcesContent":["import { waitForPromise } from '@ember/test-waiters';\n\nimport { cell } from 'ember-resources';\n\nconst _colorScheme = cell<string | undefined>();\n\nlet callbacks: Set<(colorScheme: string) => void> = new Set();\n\nasync function runCallbacks(theme: string) {\n await Promise.resolve();\n\n for (const callback of callbacks.values()) {\n callback(theme);\n }\n}\n\n/**\n * Object for managing the color scheme\n */\nexport const colorScheme = {\n /**\n * Set's the current color scheme to the passed value\n */\n update: (value: string) => {\n colorScheme.current = value;\n\n void waitForPromise(runCallbacks(value));\n },\n\n on: {\n /**\n * register a function to be called when the color scheme changes.\n */\n update: (callback: (colorScheme: string) => void) => {\n callbacks.add(callback);\n },\n },\n off: {\n /**\n * unregister a function that would have been called when the color scheme changes.\n */\n update: (callback: (colorScheme: string) => void) => {\n callbacks.delete(callback);\n },\n },\n\n /**\n * the current valuel of the \"color scheme\"\n */\n get current(): string | undefined {\n return _colorScheme.current;\n },\n set current(value: string | undefined) {\n _colorScheme.current = value;\n\n if (!value) {\n localPreference.delete();\n\n return;\n }\n\n localPreference.update(value);\n setColorScheme(value);\n },\n\n get isDark() {\n return _colorScheme.current === 'dark';\n },\n get isLight() {\n return _colorScheme.current !== 'dark';\n },\n};\n\n/**\n * Synchronizes state of `colorScheme` with the users preferences as well as reconciles with previously set theme in local storage.\n *\n * This may only be called once per app.\n */\nexport function sync() {\n /**\n * reset the callbacks\n */\n callbacks = new Set();\n\n /**\n * If local prefs are set, then we don't care what prefers-color-scheme is\n */\n const userPreference = localPreference.read();\n\n if (userPreference) {\n setColorScheme(userPreference);\n _colorScheme.current = userPreference;\n\n return;\n }\n\n if (prefers.dark()) {\n setColorScheme('dark');\n _colorScheme.current = 'dark';\n } else if (prefers.light()) {\n setColorScheme('light');\n _colorScheme.current = 'light';\n }\n}\n\nconst queries = {\n dark: window.matchMedia('(prefers-color-scheme: dark)'),\n light: window.matchMedia('(prefers-color-scheme: light)'),\n none: window.matchMedia('(prefers-color-scheme: no-preference)'),\n};\n\nqueries.dark.addEventListener('change', (e) => {\n const mode = e.matches ? 'dark' : 'light';\n\n colorScheme.update(mode);\n});\n\n/**\n * Helper methods to determining what the user's preferred color scheme is\n * based on the system preferences rather than the users explicit preference.\n */\nexport const prefers = {\n dark: () => queries.dark.matches,\n light: () => queries.light.matches,\n none: () => queries.none.matches,\n custom: (name: string) => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,\n};\n\nconst LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';\n\n/**\n * Helper methods for working with the color scheme preference in local storage\n */\nexport const localPreference = {\n isSet: () => Boolean(localPreference.read()),\n read: () => localStorage.getItem(LOCAL_PREF_KEY),\n update: (value: string) => localStorage.setItem(LOCAL_PREF_KEY, value),\n delete: () => localStorage.removeItem(LOCAL_PREF_KEY),\n};\n\n/**\n * For the given element, returns the `color-scheme` of that element.\n */\nexport function getColorScheme(element?: HTMLElement) {\n const style = styleOf(element);\n\n return style.getPropertyValue('color-scheme');\n}\n\nexport function setColorScheme(element: HTMLElement, value: string): void;\nexport function setColorScheme(value: string): void;\n\nexport function setColorScheme(...args: [string] | [HTMLElement, string]): void {\n if (typeof args[0] === 'string') {\n styleOf().setProperty('color-scheme', args[0]);\n\n return;\n }\n\n if (typeof args[1] === 'string') {\n styleOf(args[0]).setProperty('color-scheme', args[1]);\n\n return;\n }\n\n throw new Error(`Invalid arity, expected up to 2 args, received ${args.length}`);\n}\n\n/**\n * Removes the `color-scheme` from the given element\n */\nexport function removeColorScheme(element?: HTMLElement) {\n const style = styleOf(element);\n\n style.removeProperty('color-scheme');\n}\n\nfunction styleOf(element?: HTMLElement) {\n if (element) {\n return element.style;\n }\n\n return document.documentElement.style;\n}\n\nsync();\n\nwindow.addEventListener('storage', (e: StorageEvent) => {\n try {\n if (e.key !== LOCAL_PREF_KEY) return;\n\n // If the key was removed in another tab, fall back to system preference\n if (e.newValue === null) {\n if (prefers.dark()) {\n colorScheme.update('dark');\n\n return;\n } else if (prefers.light()) {\n colorScheme.update('light');\n\n return;\n }\n\n // default to light\n colorScheme.update('light');\n\n return;\n }\n\n const newScheme = e.newValue;\n\n colorScheme.update(newScheme);\n } catch {\n // swallow errors from storage event handling\n }\n});\n"],"names":["_colorScheme","cell","callbacks","Set","runCallbacks","theme","Promise","resolve","callback","values","colorScheme","update","value","current","waitForPromise","on","add","off","delete","localPreference","setColorScheme","isDark","isLight","sync","userPreference","read","prefers","dark","light","queries","window","matchMedia","none","addEventListener","e","mode","matches","custom","name","LOCAL_PREF_KEY","isSet","Boolean","localStorage","getItem","setItem","removeItem","getColorScheme","element","style","styleOf","getPropertyValue","args","setProperty","Error","length","removeColorScheme","removeProperty","document","documentElement","key","newValue","newScheme"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"color-scheme.js","sources":["../src/color-scheme.ts"],"sourcesContent":["import { waitForPromise } from '@ember/test-waiters';\n\nimport { cell } from 'ember-resources';\n\nconst _colorScheme = cell<string | undefined>();\n\nlet callbacks: Set<(colorScheme: string) => void> = new Set();\n\nasync function runCallbacks(theme: string) {\n await Promise.resolve();\n\n for (const callback of callbacks.values()) {\n callback(theme);\n }\n}\n\n/**\n * Object for managing the color scheme\n */\nexport const colorScheme = {\n /**\n * Set's the current color scheme to the passed value\n */\n update: (value: string) => {\n colorScheme.current = value;\n\n void waitForPromise(runCallbacks(value));\n },\n\n on: {\n /**\n * register a function to be called when the color scheme changes.\n */\n update: (callback: (colorScheme: string) => void) => {\n callbacks.add(callback);\n },\n },\n off: {\n /**\n * unregister a function that would have been called when the color scheme changes.\n */\n update: (callback: (colorScheme: string) => void) => {\n callbacks.delete(callback);\n },\n },\n\n /**\n * the current valuel of the \"color scheme\"\n */\n get current(): string | undefined {\n return _colorScheme.current;\n },\n set current(value: string | undefined) {\n _colorScheme.current = value;\n\n if (!value) {\n localPreference.delete();\n\n return;\n }\n\n localPreference.update(value);\n setColorScheme(value);\n },\n\n get isDark() {\n return _colorScheme.current === 'dark';\n },\n get isLight() {\n return _colorScheme.current !== 'dark';\n },\n};\n\n/**\n * Synchronizes state of `colorScheme` with the users preferences as well as reconciles with previously set theme in local storage.\n *\n * This may only be called once per app.\n */\nexport function sync() {\n /**\n * reset the callbacks\n */\n callbacks = new Set();\n\n /**\n * If local prefs are set, then we don't care what prefers-color-scheme is\n */\n const userPreference = localPreference.read();\n\n if (userPreference) {\n setColorScheme(userPreference);\n _colorScheme.current = userPreference;\n\n return;\n }\n\n if (prefers.dark()) {\n setColorScheme('dark');\n _colorScheme.current = 'dark';\n } else if (prefers.light()) {\n setColorScheme('light');\n _colorScheme.current = 'light';\n }\n}\n\nconst queries = {\n dark: window.matchMedia('(prefers-color-scheme: dark)'),\n light: window.matchMedia('(prefers-color-scheme: light)'),\n none: window.matchMedia('(prefers-color-scheme: no-preference)'),\n};\n\nqueries.dark.addEventListener('change', (e) => {\n if (localPreference.isSet()) return;\n\n const mode = e.matches ? 'dark' : 'light';\n\n colorScheme.update(mode);\n});\n\n/**\n * Helper methods to determining what the user's preferred color scheme is\n * based on the system preferences rather than the users explicit preference.\n */\nexport const prefers = {\n dark: () => queries.dark.matches,\n light: () => queries.light.matches,\n none: () => queries.none.matches,\n custom: (name: string) => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,\n};\n\nconst LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';\n\n/**\n * Helper methods for working with the color scheme preference in local storage\n */\nexport const localPreference = {\n isSet: () => Boolean(localPreference.read()),\n read: () => localStorage.getItem(LOCAL_PREF_KEY),\n update: (value: string) => localStorage.setItem(LOCAL_PREF_KEY, value),\n delete: () => localStorage.removeItem(LOCAL_PREF_KEY),\n};\n\n/**\n * For the given element, returns the `color-scheme` of that element.\n */\nexport function getColorScheme(element?: HTMLElement) {\n const style = styleOf(element);\n\n return style.getPropertyValue('color-scheme');\n}\n\nexport function setColorScheme(element: HTMLElement, value: string): void;\nexport function setColorScheme(value: string): void;\n\nexport function setColorScheme(...args: [string] | [HTMLElement, string]): void {\n if (typeof args[0] === 'string') {\n styleOf().setProperty('color-scheme', args[0]);\n\n return;\n }\n\n if (typeof args[1] === 'string') {\n styleOf(args[0]).setProperty('color-scheme', args[1]);\n\n return;\n }\n\n throw new Error(`Invalid arity, expected up to 2 args, received ${args.length}`);\n}\n\n/**\n * Removes the `color-scheme` from the given element\n */\nexport function removeColorScheme(element?: HTMLElement) {\n const style = styleOf(element);\n\n style.removeProperty('color-scheme');\n}\n\nfunction styleOf(element?: HTMLElement) {\n if (element) {\n return element.style;\n }\n\n return document.documentElement.style;\n}\n\nsync();\n\nwindow.addEventListener('storage', (e: StorageEvent) => {\n try {\n if (e.key !== LOCAL_PREF_KEY) return;\n\n // If the key was removed in another tab, fall back to system preference\n if (e.newValue === null) {\n if (prefers.dark()) {\n colorScheme.update('dark');\n\n return;\n } else if (prefers.light()) {\n colorScheme.update('light');\n\n return;\n }\n\n // default to light\n colorScheme.update('light');\n\n return;\n }\n\n const newScheme = e.newValue;\n\n colorScheme.update(newScheme);\n } catch {\n // swallow errors from storage event handling\n }\n});\n"],"names":["_colorScheme","cell","callbacks","Set","runCallbacks","theme","Promise","resolve","callback","values","colorScheme","update","value","current","waitForPromise","on","add","off","delete","localPreference","setColorScheme","isDark","isLight","sync","userPreference","read","prefers","dark","light","queries","window","matchMedia","none","addEventListener","e","isSet","mode","matches","custom","name","LOCAL_PREF_KEY","Boolean","localStorage","getItem","setItem","removeItem","getColorScheme","element","style","styleOf","getPropertyValue","args","setProperty","Error","length","removeColorScheme","removeProperty","document","documentElement","key","newValue","newScheme"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sources":["../../src/components/tabs.gts"],"sourcesContent":["/**\n * References:\n * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role\n * - https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n *\n *\n * Keyboard behaviors (optionally) provided by tabster\n */\n\nimport Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { isDestroyed, isDestroying } from \"@ember/destroyable\";\nimport { fn } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { next } from \"@ember/runloop\";\n\nimport { getTabsterAttribute, MoverDirections } from \"tabster\";\n\nimport { uniqueId } from \"../utils.ts\";\nimport Portal from \"./portal.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type Owner from \"@ember/owner\";\nimport type { ComponentLike, WithBoundArgs } from \"@glint/template\";\n\nconst UNSET = Symbol.for(\"ember-primitives:tabs:unset\");\n\nconst TABSTER_CONFIG = getTabsterAttribute(\n {\n mover: {\n direction: MoverDirections.Both,\n cyclic: true,\n memorizeCurrent: true,\n },\n deloser: {},\n },\n true,\n);\n\nconst TabLink: TOC<{\n Element: HTMLAnchorElement;\n Args: {\n /**\n * @internal\n * for linking of aria\n */\n id: string;\n /**\n * @internal\n * for linking of aria\n */\n panelId: string;\n };\n Blocks: { default: [] };\n}> = <template>\n <a href=\"##missing##\" ...attributes role=\"tab\" aria-controls={{@panelId}} id={{@id}}>\n {{yield}}\n </a>\n</template>;\n\nexport type ButtonType = ComponentLike<ButtonSignature>;\nexport interface ButtonSignature {\n Element: HTMLButtonElement;\n Blocks: {\n default: [];\n };\n}\n\nconst TabButton: TOC<{\n Args: {\n /**\n * @internal\n * for linking of aria\n */\n id: string;\n /**\n * @internal\n * for linking of aria\n */\n panelId: string;\n\n /**\n * @internal\n * for managing state\n */\n handleClick: () => void;\n\n /**\n * @internal\n * for managing state\n */\n value: string | undefined;\n\n /**\n * @internal\n */\n state: TabState;\n };\n Blocks: {\n default: [];\n };\n}> = <template>\n <button\n ...attributes\n role=\"tab\"\n type=\"button\"\n aria-controls={{@panelId}}\n aria-selected={{String (@state.isActive @id @value)}}\n id={{@id}}\n {{on \"click\" @handleClick}}\n {{! The Types for modifier are wrong }}\n {{! @glint-expect-error}}\n {{(if @state.isAutomatic (modifier on \"focus\" @handleClick))}}\n >\n {{yield}}\n </button>\n</template>;\n\nexport type ContentType = ComponentLike<ContentSignature>;\nexport interface ContentSignature {\n /**\n * the [role=tabpanel] element\n */\n Element: HTMLDivElement;\n Blocks: {\n default: [];\n };\n}\n\nconst TabContent: TOC<{\n Element: HTMLDivElement;\n Args: {\n /**\n * @internal\n * for linking of aria\n */\n id: string;\n /**\n * @internal\n * for linking of aria\n */\n tabId: string;\n /**\n * @internal\n */\n state: TabState;\n };\n Blocks: {\n default: [];\n };\n}> = <template>\n <Portal @to=\"#{{@state.tabpanelId}}\" @append={{true}}>\n {{#if (@state.isActive @tabId)}}\n <div ...attributes role=\"tabpanel\" aria-labelledby={{@tabId}} id={{@id}}>\n {{yield}}\n </div>\n {{/if}}\n </Portal>\n</template>;\n\nfunction isString(x: unknown): x is string {\n return typeof x === \"string\";\n}\n\nfunction makeTab(tabButton: any, tabLink: any): any {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n tabButton.Link = tabLink;\n\n return tabButton;\n}\n\nexport type ContainerType = ComponentLike<ContainerSignature>;\nexport type ContainerSignature =\n | {\n Blocks: {\n default: [];\n };\n }\n | {\n Args: {\n label: string | ComponentLike;\n content: string | ComponentLike;\n };\n }\n | {\n Args: {\n label: string | ComponentLike;\n };\n Blocks: {\n /**\n * The content for the tab\n */\n default: [];\n };\n };\n\nclass TabContainer extends Component<{\n Args: {\n /**\n * @internal\n */\n state: TabState;\n\n /**\n * When opting for a \"controlled component\",\n * the value will be needed to make sense of the selected tab.\n *\n * The default value used for communication within the Tabs component (and eventually emitted via the @onChange argument) is a unique random id.\n * So while that could still be used for controlling the tabs component, it may be more easy to grok with user-managed values.\n */\n value?: string;\n\n /**\n * optional user-passable label\n */\n label?: string | ComponentLike;\n\n /**\n * optional user-passable content.\n */\n content?: string | ComponentLike;\n };\n Blocks: {\n default: [\n Label: WithBoundArgs<typeof TabButton, \"state\" | \"id\" | \"panelId\" | \"handleClick\" | \"value\">,\n Content: WithBoundArgs<typeof TabContent, \"state\" | \"id\" | \"tabId\">,\n ];\n };\n}> {\n id = `ember-primitives__tab-${uniqueId()}`;\n\n get tabId() {\n return `${this.id}__tab`;\n }\n\n get panelId() {\n return `${this.id}__panel`;\n }\n\n get label() {\n return this.args.label ?? this.tabId;\n }\n\n <template>\n {{#if @label}}\n <TabButton\n @state={{@state}}\n @id={{this.tabId}}\n @value={{@value}}\n @panelId={{this.panelId}}\n @handleClick={{fn @state.handleChange this.tabId @value}}\n >\n {{#if (isString @label)}}\n {{@label}}\n {{else}}\n <@label />\n {{/if}}\n </TabButton>\n\n <TabContent @state={{@state}} @id={{this.panelId}} @tabId={{this.tabId}}>\n {{#if @content}}\n {{#if (isString @content)}}\n {{@content}}\n {{else}}\n <@content />\n {{/if}}\n {{else}}\n {{yield}}\n {{/if}}\n </TabContent>\n {{else}}\n {{yield\n (makeTab\n (component\n TabButton\n state=@state\n value=@value\n id=this.tabId\n panelId=this.panelId\n handleClick=(fn @state.handleChange this.tabId @value)\n )\n (component TabLink state=@state id=this.tabId panelId=this.panelId)\n )\n (component TabContent state=@state id=this.panelId tabId=this.tabId)\n }}\n {{/if}}\n </template>\n}\n\nconst Label: TOC<{\n /**\n * The label wiring (id, aria, etc) are handled for you.\n * If you'd like to use a heading element (h3, etc), place that in the block content\n * when invoking this Label component.\n */\n Element: null;\n Args: {\n /**\n * @internal\n */\n state: TabState;\n };\n Blocks: { default: [] };\n}> = <template>\n <Portal @to=\"#{{@state.labelId}}\">\n {{yield}}\n </Portal>\n</template>;\n\nexport interface Signature {\n /**\n * The wrapping element for the overall Tabs component.\n * This should be used for styling the layout of the tabs.\n */\n Element: HTMLDivElement;\n Args: {\n /**\n * Sets the active tab.\n * If not passed, the first tab will be selected\n */\n activeTab?: string;\n\n /**\n * Optional label for the overall TabList\n */\n label?: string | ComponentLike;\n\n /**\n * When the tab changes, this function will be called.\n * The function receives both the newly selected tab as well as the previous tab.\n *\n * However, if the tabs are not configured with names, these values will be null.\n */\n onChange?: (selectedTab: string, previousTab: string | null) => void;\n\n /**\n * When activationMode is set to \"automatic\", tabs are activated when receiving focus. When set to \"manual\", tabs are activated when clicked (or when \"enter\" is pressed via the keyboard).\n */\n activationMode?: \"automatic\" | \"manual\";\n };\n Blocks: {\n default: [\n Tab: WithBoundArgs<typeof TabContainer, \"state\"> & {\n Label: WithBoundArgs<typeof Label, \"state\">;\n },\n ];\n };\n}\n\n/**\n * We're doing old skool hax with this, so we don't need to care about what the types think, really\n */\nfunction makeAPI(tabContainer: any, labelComponent: any): any {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n tabContainer.Label = labelComponent;\n\n return tabContainer;\n}\n\nimport { buildWaiter } from \"@ember/test-waiters\";\n\nconst stateWaiter = buildWaiter(\"ember-primitives:tabs\");\n\n/**\n * State bucket passed around to all the sub-components.\n *\n * Sort of a \"Context\", but with a bit of prop-drilling (which is more efficient than dom-context)\n */\nclass TabState {\n declare args: {\n activeTab?: string;\n activationMode?: \"automatic\" | \"manual\";\n onChange?: (selected: string, previous: string | null) => void;\n };\n\n @tracked _active: string | null = null;\n\n @tracked _label: string | undefined;\n\n #first: string | null = null;\n id: string;\n labelId: string;\n tabpanelId: string;\n #token: unknown;\n\n constructor(args: { activeTab?: string; onChange?: () => void }) {\n this.args = args;\n\n this.id = `ember-primitives-${uniqueId()}`;\n this.labelId = `${this.id}__label`;\n this.tabpanelId = `${this.id}__tabpanel`;\n }\n\n get activationMode() {\n return this.args.activationMode ?? \"automatic\";\n }\n\n get isAutomatic() {\n return this.activationMode === \"automatic\";\n }\n\n /**\n * This function relies on the fact that during rendering,\n * the first component to be rendered will be first,\n * and it will be the one to set the secret first value,\n * which means all other tabs will not be first.\n *\n */\n isActive = (tabId: string, tabValue: undefined | string) => {\n /**\n * When users pass the @value to a tab, we use that for managing\n * the \"active state\" instead of the DOM ID.\n *\n * NOTE: DOM IDs must be unique across the whole document, but @value\n * does not need to be unqiue.\n * `@value` *should* be unique for the Tabs component though\n */\n const isSelected = (x: string) => {\n if (tabValue) return x === tabValue;\n\n return x === tabId;\n };\n\n if (this.active === UNSET) {\n if (this.#first) return isSelected(this.#first);\n\n this.#first = tabValue ?? tabId;\n this.#token = stateWaiter.beginAsync();\n\n // eslint-disable-next-line ember/no-runloop\n next(() => {\n if (!this.#token) return;\n stateWaiter.endAsync(this.#token);\n if (this._active) return;\n if (isDestroyed(this) || isDestroying(this)) return;\n\n this._label = tabValue ?? tabId;\n });\n\n return true;\n }\n\n return isSelected(this.active);\n };\n\n get active() {\n return this._active ?? this.args.activeTab ?? UNSET;\n }\n\n get activeLabel() {\n /**\n * This is only needed during the first set\n * because we prioritize rendering first, and then updating metadata later\n * (next render)\n *\n * NOTE: this does not mean that the a11y tree is updated later.\n * it is correct on initial render\n */\n if (this._label) {\n return this._label;\n }\n\n if (this.active === UNSET) {\n return \"Pending\";\n }\n\n return this.active;\n }\n\n handleChange = (tabId: string, tabValue: string | undefined) => {\n const previous = this.active;\n const next = tabValue ?? tabId;\n\n // No change, no need to be noisy\n if (next === previous) return;\n\n this._active = this._label = next;\n\n this.args.onChange?.(next, previous === UNSET ? null : previous);\n };\n}\n\nexport class Tabs extends Component<Signature> {\n state: TabState;\n\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n constructor(owner: Owner, args: {}) {\n super(owner, args);\n\n this.state = new TabState(args);\n }\n\n <template>\n <div class=\"ember-primitives__tabs\" ...attributes data-active={{this.state.activeLabel}}>\n {{! This element will be portaled in to and replaced if tabs.Label is invoked }}\n <div class=\"ember-primitives__tabs__label\" id={{this.state.labelId}}>\n {{#if (isString @label)}}\n {{@label}}\n {{else}}\n <@label />\n {{/if}}\n </div>\n <div\n class=\"ember-primitives__tabs__tablist\"\n role=\"tablist\"\n aria-labelledby={{this.state.labelId}}\n data-tabster={{TABSTER_CONFIG}}\n >\n {{yield\n (makeAPI (component TabContainer state=this.state) (component Label state=this.state))\n }}\n </div>\n {{!\n Tab's contents are portaled in to this element\n }}\n <div class=\"ember-primitives__tabs__tabpanel\" id={{this.state.tabpanelId}}></div>\n </div>\n </template>\n}\n"],"names":["UNSET","Symbol","for","TABSTER_CONFIG","getTabsterAttribute","mover","direction","MoverDirections","Both","cyclic","memorizeCurrent","deloser","TabLink","setComponentTemplate","precompileTemplate","strictMode","templateOnly","TabButton","scope","String","on","TabContent","Portal","isString","x","makeTab","tabButton","tabLink","Link","TabContainer","Component","id","uniqueId","tabId","panelId","label","args","fn","Label","makeAPI","tabContainer","labelComponent","stateWaiter","buildWaiter","TabState","g","prototype","tracked","i","labelId","tabpanelId","constructor","activationMode","isAutomatic","isActive","tabValue","isSelected","active","beginAsync","next","endAsync","_active","isDestroyed","isDestroying","_label","activeTab","activeLabel","handleChange","previous","onChange","Tabs","state","owner"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":["../../src/components/tabs.gts"],"sourcesContent":["/**\n * References:\n * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role\n * - https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n *\n *\n * Keyboard behaviors (optionally) provided by tabster\n */\n\nimport Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { isDestroyed, isDestroying } from \"@ember/destroyable\";\nimport { fn } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { next } from \"@ember/runloop\";\n\nimport { getTabsterAttribute, MoverDirections } from \"tabster\";\n\nimport { uniqueId } from \"../utils.ts\";\nimport Portal from \"./portal.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type Owner from \"@ember/owner\";\nimport type { ComponentLike, WithBoundArgs } from \"@glint/template\";\n\nconst UNSET = Symbol.for(\"ember-primitives:tabs:unset\");\n\nconst TABSTER_CONFIG = getTabsterAttribute(\n {\n mover: {\n direction: MoverDirections.Both,\n cyclic: true,\n memorizeCurrent: true,\n },\n deloser: {},\n },\n true,\n);\n\nconst TabLink: TOC<{\n Element: HTMLAnchorElement;\n Args: {\n /**\n * @internal\n * for linking of aria\n */\n id: string;\n /**\n * @internal\n * for linking of aria\n */\n panelId: string;\n };\n Blocks: { default: [] };\n}> = <template>\n <a href=\"##missing##\" ...attributes role=\"tab\" aria-controls={{@panelId}} id={{@id}}>\n {{yield}}\n </a>\n</template>;\n\nexport type ButtonType = ComponentLike<ButtonSignature>;\nexport interface ButtonSignature {\n Element: HTMLButtonElement;\n Blocks: {\n default: [];\n };\n}\n\nconst TabButton: TOC<{\n Element: HTMLButtonElement;\n Args: {\n /**\n * @internal\n * for linking of aria\n */\n id: string;\n /**\n * @internal\n * for linking of aria\n */\n panelId: string;\n\n /**\n * @internal\n * for managing state\n */\n handleClick: () => void;\n\n /**\n * @internal\n * for managing state\n */\n value: string | undefined;\n\n /**\n * @internal\n */\n state: TabState;\n };\n Blocks: {\n default: [];\n };\n}> = <template>\n <button\n ...attributes\n role=\"tab\"\n type=\"button\"\n aria-controls={{@panelId}}\n aria-selected={{String (@state.isActive @id @value)}}\n id={{@id}}\n {{on \"click\" @handleClick}}\n {{! The Types for modifier are wrong }}\n {{! @glint-expect-error}}\n {{(if @state.isAutomatic (modifier on \"focus\" @handleClick))}}\n >\n {{yield}}\n </button>\n</template>;\n\nexport type ContentType = ComponentLike<ContentSignature>;\nexport interface ContentSignature {\n /**\n * the [role=tabpanel] element\n */\n Element: HTMLDivElement;\n Blocks: {\n default: [];\n };\n}\n\nconst TabContent: TOC<{\n Element: HTMLDivElement;\n Args: {\n /**\n * @internal\n * for linking of aria\n */\n id: string;\n /**\n * @internal\n * for linking of aria\n */\n tabId: string;\n /**\n * @internal\n */\n state: TabState;\n };\n Blocks: {\n default: [];\n };\n}> = <template>\n <Portal @to=\"#{{@state.tabpanelId}}\" @append={{true}}>\n {{#if (@state.isActive @tabId)}}\n <div ...attributes role=\"tabpanel\" aria-labelledby={{@tabId}} id={{@id}}>\n {{yield}}\n </div>\n {{/if}}\n </Portal>\n</template>;\n\nfunction isString(x: unknown): x is string {\n return typeof x === \"string\";\n}\n\nfunction makeTab(tabButton: any, tabLink: any): any {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n tabButton.Link = tabLink;\n\n return tabButton;\n}\n\nexport type ContainerType = ComponentLike<ContainerSignature>;\nexport type ContainerSignature =\n | {\n Blocks: {\n default: [];\n };\n }\n | {\n Args: {\n label: string | ComponentLike;\n content: string | ComponentLike;\n };\n }\n | {\n Args: {\n label: string | ComponentLike;\n };\n Blocks: {\n /**\n * The content for the tab\n */\n default: [];\n };\n };\n\nclass TabContainer extends Component<{\n Args: {\n /**\n * @internal\n */\n state: TabState;\n\n /**\n * When opting for a \"controlled component\",\n * the value will be needed to make sense of the selected tab.\n *\n * The default value used for communication within the Tabs component (and eventually emitted via the @onChange argument) is a unique random id.\n * So while that could still be used for controlling the tabs component, it may be more easy to grok with user-managed values.\n */\n value?: string;\n\n /**\n * optional user-passable label\n */\n label?: string | ComponentLike;\n\n /**\n * optional user-passable content.\n */\n content?: string | ComponentLike;\n };\n Blocks: {\n default: [\n Label: WithBoundArgs<typeof TabButton, \"state\" | \"id\" | \"panelId\" | \"handleClick\" | \"value\">,\n Content: WithBoundArgs<typeof TabContent, \"state\" | \"id\" | \"tabId\">,\n ];\n };\n}> {\n id = `ember-primitives__tab-${uniqueId()}`;\n\n get tabId() {\n return `${this.id}__tab`;\n }\n\n get panelId() {\n return `${this.id}__panel`;\n }\n\n get label() {\n return this.args.label ?? this.tabId;\n }\n\n <template>\n {{#if @label}}\n <TabButton\n @state={{@state}}\n @id={{this.tabId}}\n @value={{@value}}\n @panelId={{this.panelId}}\n @handleClick={{fn @state.handleChange this.tabId @value}}\n >\n {{#if (isString @label)}}\n {{@label}}\n {{else}}\n <@label />\n {{/if}}\n </TabButton>\n\n <TabContent @state={{@state}} @id={{this.panelId}} @tabId={{this.tabId}}>\n {{#if @content}}\n {{#if (isString @content)}}\n {{@content}}\n {{else}}\n <@content />\n {{/if}}\n {{else}}\n {{yield}}\n {{/if}}\n </TabContent>\n {{else}}\n {{yield\n (makeTab\n (component\n TabButton\n state=@state\n value=@value\n id=this.tabId\n panelId=this.panelId\n handleClick=(fn @state.handleChange this.tabId @value)\n )\n (component TabLink state=@state id=this.tabId panelId=this.panelId)\n )\n (component TabContent state=@state id=this.panelId tabId=this.tabId)\n }}\n {{/if}}\n </template>\n}\n\nconst Label: TOC<{\n /**\n * The label wiring (id, aria, etc) are handled for you.\n * If you'd like to use a heading element (h3, etc), place that in the block content\n * when invoking this Label component.\n */\n Element: null;\n Args: {\n /**\n * @internal\n */\n state: TabState;\n };\n Blocks: { default: [] };\n}> = <template>\n <Portal @to=\"#{{@state.labelId}}\">\n {{yield}}\n </Portal>\n</template>;\n\nexport interface Signature {\n /**\n * The wrapping element for the overall Tabs component.\n * This should be used for styling the layout of the tabs.\n */\n Element: HTMLDivElement;\n Args: {\n /**\n * Sets the active tab.\n * If not passed, the first tab will be selected\n */\n activeTab?: string;\n\n /**\n * Optional label for the overall TabList\n */\n label?: string | ComponentLike;\n\n /**\n * When the tab changes, this function will be called.\n * The function receives both the newly selected tab as well as the previous tab.\n *\n * However, if the tabs are not configured with names, these values will be null.\n */\n onChange?: (selectedTab: string, previousTab: string | null) => void;\n\n /**\n * When activationMode is set to \"automatic\", tabs are activated when receiving focus. When set to \"manual\", tabs are activated when clicked (or when \"enter\" is pressed via the keyboard).\n */\n activationMode?: \"automatic\" | \"manual\";\n };\n Blocks: {\n default: [\n Tab: WithBoundArgs<typeof TabContainer, \"state\"> & {\n Label: WithBoundArgs<typeof Label, \"state\">;\n },\n ];\n };\n}\n\n/**\n * We're doing old skool hax with this, so we don't need to care about what the types think, really\n */\nfunction makeAPI(tabContainer: any, labelComponent: any): any {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n tabContainer.Label = labelComponent;\n\n return tabContainer;\n}\n\nimport { buildWaiter } from \"@ember/test-waiters\";\n\nconst stateWaiter = buildWaiter(\"ember-primitives:tabs\");\n\n/**\n * State bucket passed around to all the sub-components.\n *\n * Sort of a \"Context\", but with a bit of prop-drilling (which is more efficient than dom-context)\n */\nclass TabState {\n declare args: {\n activeTab?: string;\n activationMode?: \"automatic\" | \"manual\";\n onChange?: (selected: string, previous: string | null) => void;\n };\n\n @tracked _active: string | null = null;\n\n @tracked _label: string | undefined;\n\n #first: string | null = null;\n id: string;\n labelId: string;\n tabpanelId: string;\n #token: unknown;\n\n constructor(args: { activeTab?: string; onChange?: () => void }) {\n this.args = args;\n\n this.id = `ember-primitives-${uniqueId()}`;\n this.labelId = `${this.id}__label`;\n this.tabpanelId = `${this.id}__tabpanel`;\n }\n\n get activationMode() {\n return this.args.activationMode ?? \"automatic\";\n }\n\n get isAutomatic() {\n return this.activationMode === \"automatic\";\n }\n\n /**\n * This function relies on the fact that during rendering,\n * the first component to be rendered will be first,\n * and it will be the one to set the secret first value,\n * which means all other tabs will not be first.\n *\n */\n isActive = (tabId: string, tabValue: undefined | string) => {\n /**\n * When users pass the @value to a tab, we use that for managing\n * the \"active state\" instead of the DOM ID.\n *\n * NOTE: DOM IDs must be unique across the whole document, but @value\n * does not need to be unqiue.\n * `@value` *should* be unique for the Tabs component though\n */\n const isSelected = (x: string) => {\n if (tabValue) return x === tabValue;\n\n return x === tabId;\n };\n\n if (this.active === UNSET) {\n if (this.#first) return isSelected(this.#first);\n\n this.#first = tabValue ?? tabId;\n this.#token = stateWaiter.beginAsync();\n\n // eslint-disable-next-line ember/no-runloop\n next(() => {\n if (!this.#token) return;\n stateWaiter.endAsync(this.#token);\n if (this._active) return;\n if (isDestroyed(this) || isDestroying(this)) return;\n\n this._label = tabValue ?? tabId;\n });\n\n return true;\n }\n\n return isSelected(this.active);\n };\n\n get active() {\n return this._active ?? this.args.activeTab ?? UNSET;\n }\n\n get activeLabel() {\n /**\n * This is only needed during the first set\n * because we prioritize rendering first, and then updating metadata later\n * (next render)\n *\n * NOTE: this does not mean that the a11y tree is updated later.\n * it is correct on initial render\n */\n if (this._label) {\n return this._label;\n }\n\n if (this.active === UNSET) {\n return \"Pending\";\n }\n\n return this.active;\n }\n\n handleChange = (tabId: string, tabValue: string | undefined) => {\n const previous = this.active;\n const next = tabValue ?? tabId;\n\n // No change, no need to be noisy\n if (next === previous) return;\n\n this._active = this._label = next;\n\n this.args.onChange?.(next, previous === UNSET ? null : previous);\n };\n}\n\nexport class Tabs extends Component<Signature> {\n state: TabState;\n\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n constructor(owner: Owner, args: {}) {\n super(owner, args);\n\n this.state = new TabState(args);\n }\n\n <template>\n <div class=\"ember-primitives__tabs\" ...attributes data-active={{this.state.activeLabel}}>\n {{! This element will be portaled in to and replaced if tabs.Label is invoked }}\n <div class=\"ember-primitives__tabs__label\" id={{this.state.labelId}}>\n {{#if (isString @label)}}\n {{@label}}\n {{else}}\n <@label />\n {{/if}}\n </div>\n <div\n class=\"ember-primitives__tabs__tablist\"\n role=\"tablist\"\n aria-labelledby={{this.state.labelId}}\n data-tabster={{TABSTER_CONFIG}}\n >\n {{yield\n (makeAPI (component TabContainer state=this.state) (component Label state=this.state))\n }}\n </div>\n {{!\n Tab's contents are portaled in to this element\n }}\n <div class=\"ember-primitives__tabs__tabpanel\" id={{this.state.tabpanelId}}></div>\n </div>\n </template>\n}\n"],"names":["UNSET","Symbol","for","TABSTER_CONFIG","getTabsterAttribute","mover","direction","MoverDirections","Both","cyclic","memorizeCurrent","deloser","TabLink","setComponentTemplate","precompileTemplate","strictMode","templateOnly","TabButton","scope","String","on","TabContent","Portal","isString","x","makeTab","tabButton","tabLink","Link","TabContainer","Component","id","uniqueId","tabId","panelId","label","args","fn","Label","makeAPI","tabContainer","labelComponent","stateWaiter","buildWaiter","TabState","g","prototype","tracked","i","labelId","tabpanelId","constructor","activationMode","isAutomatic","isActive","tabValue","isSelected","active","beginAsync","next","endAsync","_active","isDestroyed","isDestroying","_label","activeTab","activeLabel","handleChange","previous","onChange","Tabs","state","owner"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ember-primitives",
|
|
3
|
-
"version": "0.55.
|
|
3
|
+
"version": "0.55.2",
|
|
4
4
|
"description": "Making apps easier to build",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ember-addon"
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@babel/runtime": "^7.28.6",
|
|
21
21
|
"@embroider/addon-shim": "^1.10.2",
|
|
22
|
-
"@embroider/macros": "^1.19.7",
|
|
23
22
|
"@floating-ui/dom": "^1.7.5",
|
|
24
23
|
"decorator-transforms": "2.3.1",
|
|
25
24
|
"ember-element-helper": "^0.8.8",
|
|
@@ -29,7 +28,7 @@
|
|
|
29
28
|
"tabster": "^8.7.0",
|
|
30
29
|
"tracked-built-ins": "^4.1.0",
|
|
31
30
|
"tracked-toolbox": "^2.2.0",
|
|
32
|
-
"which-heading-do-i-need": "0.2.
|
|
31
|
+
"which-heading-do-i-need": "0.2.7"
|
|
33
32
|
},
|
|
34
33
|
"devDependencies": {
|
|
35
34
|
"@arethetypeswrong/cli": "^0.18.0",
|
|
@@ -46,13 +45,14 @@
|
|
|
46
45
|
"@ember/test-helpers": "^5.4.1",
|
|
47
46
|
"@ember/test-waiters": "^4.1.0",
|
|
48
47
|
"@embroider/addon-dev": "^8.3.0",
|
|
48
|
+
"@embroider/macros": "^1.19.7",
|
|
49
49
|
"@glimmer/component": "^2.0.0",
|
|
50
50
|
"@glimmer/tracking": "^1.1.2",
|
|
51
51
|
"@glint/ember-tsc": "^1.1.1",
|
|
52
|
-
"@glint/template": "1.7.
|
|
52
|
+
"@glint/template": "1.7.7",
|
|
53
53
|
"@glint/tsserver-plugin": "^2.1.0",
|
|
54
54
|
"@nullvoxpopuli/eslint-configs": "^5.5.0",
|
|
55
|
-
"@rollup/plugin-babel": "^
|
|
55
|
+
"@rollup/plugin-babel": "^7.0.0",
|
|
56
56
|
"@tsconfig/ember": "^3.0.12",
|
|
57
57
|
"babel-plugin-ember-template-compilation": "^4.0.0",
|
|
58
58
|
"concurrently": "^9.2.1",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"publint": "^0.3.17",
|
|
69
69
|
"rollup": "^4.57.1",
|
|
70
70
|
"rollup-plugin-copy": "^3.5.0",
|
|
71
|
-
"typescript": "^
|
|
71
|
+
"typescript": "^6.0.2"
|
|
72
72
|
},
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"registry": "https://registry.npmjs.org"
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
"@ember/test-helpers": ">= 3.2.0",
|
|
118
118
|
"@ember/test-waiters": ">= 3.0.2",
|
|
119
119
|
"@glimmer/component": "^2.0.0",
|
|
120
|
-
"@glint/template": "1.7.4",
|
|
120
|
+
"@glint/template": "^1.7.4",
|
|
121
121
|
"ember-modifier": ">= 4.1.0",
|
|
122
122
|
"ember-resources": ">= 6.1.0"
|
|
123
123
|
},
|
package/src/color-scheme.ts
CHANGED