From 5d91d97387a694fe8b1f01edeb2912b32b2d0998 Mon Sep 17 00:00:00 2001 From: Markus Sanin Date: Fri, 3 Oct 2025 08:01:29 +0200 Subject: [PATCH 01/22] Replace prismjs with shiki to get gts/gjs support & replace first usage --- docs/app/app.ts | 14 - .../{code-block.ts => code-block.gts} | 17 +- docs/app/components/code-block.hbs | 12 - docs/app/components/code-example.gts | 119 ++++++++ docs/app/components/code-example.hbs | 67 ---- docs/app/components/code-example.js | 21 -- .../{code-inline.ts => code-inline.gts} | 38 ++- docs/app/components/code-inline.hbs | 3 - .../components/snippets/how-to-use-it-1.gts | 12 + .../components/snippets/how-to-use-it-1.hbs | 4 - .../components/snippets/how-to-use-it-1.js | 4 - docs/app/controllers/public-pages.js | 2 +- docs/app/controllers/public-pages/docs.js | 4 +- docs/app/styles/app.scss | 1 + docs/app/styles/components/code-block.scss | 10 + .../public-pages/docs/how-to-use-it.hbs | 2 +- docs/package.json | 5 +- docs/tsconfig.json | 2 +- pnpm-lock.yaml | 288 ++++++++++++++++-- 19 files changed, 436 insertions(+), 189 deletions(-) rename docs/app/components/{code-block.ts => code-block.gts} (64%) delete mode 100644 docs/app/components/code-block.hbs create mode 100644 docs/app/components/code-example.gts delete mode 100644 docs/app/components/code-example.hbs delete mode 100644 docs/app/components/code-example.js rename docs/app/components/{code-inline.ts => code-inline.gts} (55%) delete mode 100644 docs/app/components/code-inline.hbs create mode 100644 docs/app/components/snippets/how-to-use-it-1.gts delete mode 100644 docs/app/components/snippets/how-to-use-it-1.hbs delete mode 100644 docs/app/components/snippets/how-to-use-it-1.js create mode 100644 docs/app/styles/components/code-block.scss diff --git a/docs/app/app.ts b/docs/app/app.ts index cd81bd6b..fde5a802 100644 --- a/docs/app/app.ts +++ b/docs/app/app.ts @@ -2,26 +2,12 @@ import Application from '@ember/application'; import Resolver from 'ember-resolver'; import loadInitializers from 'ember-load-initializers'; import config from 'docs/config/environment'; -import Prism from 'prismjs'; import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros'; -import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace'; -import 'prismjs/components/prism-css'; -import 'prismjs/components/prism-scss'; -import 'prismjs/components/prism-javascript'; -import 'prismjs/components/prism-handlebars'; -import 'prismjs/components/prism-markup-templating'; -// @ts-expect-error no types shipped from prismjs-glimmer -import { setup } from 'prismjs-glimmer'; - -import 'prismjs/themes/prism.css'; if (macroCondition(isDevelopingApp())) { importSync('./deprecation-workflow'); } -// eslint-disable-next-line @typescript-eslint/no-unsafe-call -setup(Prism); - export default class App extends Application { modulePrefix = config.modulePrefix; podModulePrefix = config.podModulePrefix; diff --git a/docs/app/components/code-block.ts b/docs/app/components/code-block.gts similarity index 64% rename from docs/app/components/code-block.ts rename to docs/app/components/code-block.gts index 76668d0c..ecd8f2e8 100644 --- a/docs/app/components/code-block.ts +++ b/docs/app/components/code-block.gts @@ -1,12 +1,11 @@ import Component from '@glimmer/component'; +import CodeInline from './code-inline'; interface CodeBlockSignature { Element: HTMLElement; Args: { code: string; language?: string; - showLineNumbers?: boolean; - start?: string; }; } @@ -15,9 +14,17 @@ export default class CodeBlock extends Component { return this.args.language ?? 'markup'; } - get languageClass() { - return `language-${this.language}`; - } + } declare module '@glint/environment-ember-loose/registry' { diff --git a/docs/app/components/code-block.hbs b/docs/app/components/code-block.hbs deleted file mode 100644 index 92803647..00000000 --- a/docs/app/components/code-block.hbs +++ /dev/null @@ -1,12 +0,0 @@ -
-  {{~! ~}}
-  
-  {{~! ~}}
-
\ No newline at end of file diff --git a/docs/app/components/code-example.gts b/docs/app/components/code-example.gts new file mode 100644 index 00000000..0cbb8c58 --- /dev/null +++ b/docs/app/components/code-example.gts @@ -0,0 +1,119 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; +import { on } from '@ember/modifier'; +import { fn } from '@ember/helper'; +import { eq, and } from 'ember-truth-helpers'; +import CodeBlock from './code-block'; +// @ts-expect-error Could not find a declaration file for module 'ember-code-snippet'. +import { getCodeSnippet } from 'ember-code-snippet'; + +interface CodeExampleSignature { + Element: HTMLElement; + Args: { + glimmerTs?: string; + hbs?: string; + hbs2?: string; + js?: string; + css?: string; + }, + Blocks: { + default: [] + } +} + +export default class CodeExampleComponent extends Component { + showResult = true; + @tracked _activeTab: string = ''; + + get activeTab() { + return this._activeTab || (this.showResult ? 'result' : 'js'); + } + + @action + setActiveTab(value: string) { + this._activeTab = value; + } + + +} diff --git a/docs/app/components/code-example.hbs b/docs/app/components/code-example.hbs deleted file mode 100644 index a5ddde6e..00000000 --- a/docs/app/components/code-example.hbs +++ /dev/null @@ -1,67 +0,0 @@ -
- - {{#if (and @hbs (eq this.activeTab "hbs"))}} - {{#let (get-code-snippet @hbs) as |snippet|}} - - {{/let}} - {{/if}} - {{#if @hbs2}} - {{#let (get-code-snippet @hbs2) as |snippet|}} - - {{/let}} - {{/if}} - {{#if (and @js (eq this.activeTab "js"))}} - {{#let (get-code-snippet @js) as |snippet|}} - - {{/let}} - {{/if}} - {{#if (and @css (eq this.activeTab "css"))}} - {{#let (get-code-snippet @css) as |snippet|}} - - {{/let}} - {{/if}} - {{#if (and this.showResult (has-block))}} -
- {{yield this.partialName}} -
- {{/if}} -
\ No newline at end of file diff --git a/docs/app/components/code-example.js b/docs/app/components/code-example.js deleted file mode 100644 index 77cc3636..00000000 --- a/docs/app/components/code-example.js +++ /dev/null @@ -1,21 +0,0 @@ -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; -import { action } from '@ember/object'; - -export default class CodeExampleComponent extends Component { - showResult = true; - @tracked _activeTab = undefined; - - get activeTab() { - return this._activeTab || (this.showResult ? 'result' : 'js'); - } - - get partialName() { - return `snippets/${this.args.hbs.replace('.hbs', '')}`; - } - - @action - setActiveTab(value) { - this._activeTab = value; - } -} diff --git a/docs/app/components/code-inline.ts b/docs/app/components/code-inline.gts similarity index 55% rename from docs/app/components/code-inline.ts rename to docs/app/components/code-inline.gts index 2648337c..9d375aaf 100644 --- a/docs/app/components/code-inline.ts +++ b/docs/app/components/code-inline.gts @@ -3,7 +3,8 @@ import { modifier } from 'ember-modifier'; import { htmlSafe, type SafeString } from '@ember/template'; import { tracked } from '@glimmer/tracking'; import { assert } from '@ember/debug'; -import Prism from 'prismjs'; +import { codeToHtml } from 'shiki'; +import { task } from 'ember-concurrency'; interface CodeInlineSignature { Element: HTMLElement; @@ -23,10 +24,6 @@ export default class CodeInline extends Component { "ember-prism's and components require a `code` parameter to be passed in.", code !== undefined, ); - if (Prism?.plugins['NormalizeWhitespace']) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access - return Prism.plugins['NormalizeWhitespace'].normalize(code) as string; - } return code; } @@ -35,28 +32,27 @@ export default class CodeInline extends Component { return this.args.language ?? 'markup'; } - get languageClass() { - return `language-${this.language}`; - } + setup = modifier(() => { + void this.generateCode.perform(); + }); - setPrismCode = modifier((element: Element) => { + generateCode = task(async () => { const code = this.code; const language = this.language; - const grammar = Prism.languages[language]; - - if (code && language && grammar) { - this.prismCode = htmlSafe(Prism.highlight(code, grammar, language)); - } else { - this.prismCode = ''; - } - // Force plugin initialization, required for Prism.highlight usage. - // See https://github.com/PrismJS/prism/issues/1234 - Prism.hooks.run('complete', { - code, - element, + const htmlCode = await codeToHtml(code, { + lang: language, + theme: 'github-light-default' }); + + this.prismCode = htmlSafe(htmlCode) }); + + } declare module '@glint/environment-ember-loose/registry' { diff --git a/docs/app/components/code-inline.hbs b/docs/app/components/code-inline.hbs deleted file mode 100644 index 6cf4785e..00000000 --- a/docs/app/components/code-inline.hbs +++ /dev/null @@ -1,3 +0,0 @@ - - {{~! ~}}{{this.prismCode}}{{~! ~}} - \ No newline at end of file diff --git a/docs/app/components/snippets/how-to-use-it-1.gts b/docs/app/components/snippets/how-to-use-it-1.gts new file mode 100644 index 00000000..a1b25d48 --- /dev/null +++ b/docs/app/components/snippets/how-to-use-it-1.gts @@ -0,0 +1,12 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/how-to-use-it-1.hbs b/docs/app/components/snippets/how-to-use-it-1.hbs deleted file mode 100644 index 02cee1b2..00000000 --- a/docs/app/components/snippets/how-to-use-it-1.hbs +++ /dev/null @@ -1,4 +0,0 @@ - - Click me - Hello world - \ No newline at end of file diff --git a/docs/app/components/snippets/how-to-use-it-1.js b/docs/app/components/snippets/how-to-use-it-1.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/how-to-use-it-1.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/controllers/public-pages.js b/docs/app/controllers/public-pages.js index 8fabd994..5769359e 100644 --- a/docs/app/controllers/public-pages.js +++ b/docs/app/controllers/public-pages.js @@ -1,4 +1,4 @@ -import { inject as service } from '@ember/service'; +import { service } from '@ember/service'; import { action } from '@ember/object'; import { htmlSafe } from '@ember/template'; import Controller from '@ember/controller'; diff --git a/docs/app/controllers/public-pages/docs.js b/docs/app/controllers/public-pages/docs.js index 70c9d4ab..174bd031 100644 --- a/docs/app/controllers/public-pages/docs.js +++ b/docs/app/controllers/public-pages/docs.js @@ -1,4 +1,4 @@ -import { inject as service } from '@ember/service'; +import { service } from '@ember/service'; import { action } from '@ember/object'; import Controller from '@ember/controller'; @@ -35,7 +35,7 @@ const groupedSections = [ }, { id: 'upgrade', - groupName: 'Advanced customization', + groupName: 'Upgrade', options: [ { route: 'public-pages.docs.migrate-7-0-to-8-0', diff --git a/docs/app/styles/app.scss b/docs/app/styles/app.scss index cbebcb46..c1cb22e7 100644 --- a/docs/app/styles/app.scss +++ b/docs/app/styles/app.scss @@ -15,6 +15,7 @@ @import "components/docs"; @import "components/cookbook"; @import "components/spinners"; +@import "components/code-block"; // Looks and feels for examples @import "look-and-feels/animations"; diff --git a/docs/app/styles/components/code-block.scss b/docs/app/styles/components/code-block.scss new file mode 100644 index 00000000..1f3e059f --- /dev/null +++ b/docs/app/styles/components/code-block.scss @@ -0,0 +1,10 @@ +// Cookbook +.code-block { + background: #f5f2f0; + padding: 1rem; + + pre { + background: transparent !important; + margin-bottom: 0; + } +} diff --git a/docs/app/templates/public-pages/docs/how-to-use-it.hbs b/docs/app/templates/public-pages/docs/how-to-use-it.hbs index f15d2add..f35f640e 100644 --- a/docs/app/templates/public-pages/docs/how-to-use-it.hbs +++ b/docs/app/templates/public-pages/docs/how-to-use-it.hbs @@ -25,7 +25,7 @@ Go, use it and inspect the DOM. I know it looks ugly, we'll style it later.

- + {{component (ensure-safe-component this.howToUseIt1Component)}} diff --git a/docs/package.json b/docs/package.json index 5e9bdfe5..8fdbabc1 100644 --- a/docs/package.json +++ b/docs/package.json @@ -51,7 +51,6 @@ "@glint/environment-ember-template-imports": "^1.5.2", "@glint/template": "1.5.2", "@tsconfig/ember": "^3.0.11", - "@types/prismjs": "^1.26.5", "@types/qunit": "^2.19.13", "@types/rsvp": "^4.0.9", "broccoli-asset-rev": "^3.0.0", @@ -80,6 +79,7 @@ "ember-source-channel-url": "^3.0.0", "ember-template-imports": "^4.3.0", "ember-template-lint": "^7.9.3", + "ember-truth-helpers": "^5.0.0", "ember-try": "^4.0.0", "eslint": "^9.36.0", "eslint-config-prettier": "^10.1.8", @@ -92,12 +92,11 @@ "prember-crawler": "^1.0.0", "prettier": "^3.6.2", "prettier-plugin-ember-template-tag": "^2.1.0", - "prismjs": "^1.30.0", - "prismjs-glimmer": "^1.1.1", "qunit": "^2.24.1", "qunit-dom": "^3.5.0", "rsvp": "^4.8.5", "sass": "^1.93.2", + "shiki": "^3.13.0", "stylelint": "^16.24.0", "stylelint-config-standard": "^39.0.0", "tracked-built-ins": "^4.0.0", diff --git a/docs/tsconfig.json b/docs/tsconfig.json index d0f1c6f4..a15a5200 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -13,6 +13,6 @@ "docs/*": ["app/*"], "*": ["types/*"] }, - "types": ["ember-source/types", "./node_modules/@types/prismjs"] + "types": ["ember-source/types"] } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a04f203a..54e4f08e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,9 +90,6 @@ importers: '@tsconfig/ember': specifier: ^3.0.11 version: 3.0.11 - '@types/prismjs': - specifier: ^1.26.5 - version: 1.26.5 '@types/qunit': specifier: ^2.19.13 version: 2.19.13 @@ -177,6 +174,9 @@ importers: ember-template-lint: specifier: ^7.9.3 version: 7.9.3 + ember-truth-helpers: + specifier: ^5.0.0 + version: 5.0.0 ember-try: specifier: ^4.0.0 version: 4.0.0(encoding@0.1.13) @@ -213,12 +213,6 @@ importers: prettier-plugin-ember-template-tag: specifier: ^2.1.0 version: 2.1.0(prettier@3.6.2) - prismjs: - specifier: ^1.30.0 - version: 1.30.0 - prismjs-glimmer: - specifier: ^1.1.1 - version: 1.1.1(prismjs@1.30.0) qunit: specifier: ^2.24.1 version: 2.24.1 @@ -231,6 +225,9 @@ importers: sass: specifier: ^1.93.2 version: 1.93.2 + shiki: + specifier: ^3.13.0 + version: 3.13.0 stylelint: specifier: ^16.24.0 version: 16.24.0(typescript@5.9.3) @@ -2018,6 +2015,27 @@ packages: '@rtsao/scc@1.1.0': resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} + '@shikijs/core@3.13.0': + resolution: {integrity: sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA==} + + '@shikijs/engine-javascript@3.13.0': + resolution: {integrity: sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg==} + + '@shikijs/engine-oniguruma@3.13.0': + resolution: {integrity: sha512-O42rBGr4UDSlhT2ZFMxqM7QzIU+IcpoTMzb3W7AlziI1ZF7R8eS2M0yt5Ry35nnnTX/LTLXFPUjRFCIW+Operg==} + + '@shikijs/langs@3.13.0': + resolution: {integrity: sha512-672c3WAETDYHwrRP0yLy3W1QYB89Hbpj+pO4KhxK6FzIrDI2FoEXNiNCut6BQmEApYLfuYfpgOZaqbY+E9b8wQ==} + + '@shikijs/themes@3.13.0': + resolution: {integrity: sha512-Vxw1Nm1/Od8jyA7QuAenaV78BG2nSr3/gCGdBkLpfLscddCkzkL36Q5b67SrLLfvAJTOUzW39x4FHVCFriPVgg==} + + '@shikijs/types@3.13.0': + resolution: {integrity: sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw==} + + '@shikijs/vscode-textmate@10.0.2': + resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} + '@simple-dom/document@1.4.0': resolution: {integrity: sha512-/RUeVH4kuD3rzo5/91+h4Z1meLSLP66eXqpVAw/4aZmYozkeqUkMprq0znL4psX/adEed5cBgiNJcfMz/eKZLg==} @@ -2107,6 +2125,9 @@ packages: resolution: {integrity: sha512-00UxlRaIUvYm4R4W9WYkN8/J+kV8fmOQ7okeH6YFtGWFMt3odD45tpG5yA5wnL7HE6lLgjaTW5n14ju2hl2NNA==} deprecated: This is a stub types definition. glob provides its own type definitions, so you do not need this installed. + '@types/hast@3.0.4': + resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} + '@types/http-errors@2.0.5': resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==} @@ -2142,9 +2163,6 @@ packages: resolution: {integrity: sha512-EULJ8LApcVEPbrfND0cRQqutIOdiIgJ1Mgrhpy755r14xMohPTEpkV/k28SJvuOs9bHRFW8x+KeDAEPiGQPB9Q==} deprecated: This is a stub types definition. parse-path provides its own type definitions, so you do not need this installed. - '@types/prismjs@1.26.5': - resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==} - '@types/qs@6.14.0': resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==} @@ -2234,6 +2252,9 @@ packages: resolution: {integrity: sha512-qsaFBA3e09MIDAGFUrTk+dzqtfv1XPVz8t8d1f0ybTzrCY7BKiMC5cjrl1O/P7UmHsNyW90EYSkU/ZWpmXelag==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@ungap/structured-clone@1.3.0': + resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==} + '@warp-drive/build-config@5.6.0': resolution: {integrity: sha512-7qdE7x1U0yRhbGy1wO47lirgKO6cjMqmKJUdLhpIhX31fIo0MM2/6n8p/+2rNTlZiCMhLNeV7RelA8LoIkxW3Q==} @@ -3004,6 +3025,9 @@ packages: caseless@0.12.0: resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==} + ccount@2.0.1: + resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} + chalk@1.1.3: resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==} engines: {node: '>=0.10.0'} @@ -3020,6 +3044,12 @@ packages: resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==} engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} + character-entities-html4@2.1.0: + resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==} + + character-entities-legacy@3.0.0: + resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==} + character-entities@2.0.2: resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} @@ -3174,6 +3204,9 @@ packages: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} + comma-separated-tokens@2.0.3: + resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} + commander@2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} @@ -4898,6 +4931,12 @@ packages: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} + hast-util-to-html@9.0.5: + resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==} + + hast-util-whitespace@3.0.0: + resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} + heimdalljs-fs-monitor@1.1.2: resolution: {integrity: sha512-M7OPf3Tu+ybhAXdiC07O1vUYFyhCgfew4L3vaG2nn4Be05xzNvtBcU6IKMTfHJ9AxWFa3w9rrmiJovkxHhpopw==} @@ -4944,6 +4983,9 @@ packages: resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} engines: {node: '>=8'} + html-void-elements@3.0.0: + resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} + http-cache-semantics@4.2.0: resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==} @@ -5751,6 +5793,9 @@ packages: mdast-util-from-markdown@2.0.2: resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==} + mdast-util-to-hast@13.2.0: + resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==} + mdast-util-to-string@4.0.0: resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==} @@ -6229,6 +6274,12 @@ packages: resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==} engines: {node: '>=18'} + oniguruma-parser@0.12.1: + resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==} + + oniguruma-to-es@4.3.3: + resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==} + open@10.2.0: resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==} engines: {node: '>=18'} @@ -6584,16 +6635,6 @@ packages: resolution: {integrity: sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw==} engines: {node: '>= 0.9.0'} - prismjs-glimmer@1.1.1: - resolution: {integrity: sha512-GNLdqx749bMQx40nPtLtRjhs6c+xBGmJCRizv0mZs2LPH2bhw6sYBEYKbXZWMmFWdhPdGQWB8Qf8h/k9wgBIvw==} - engines: {node: '>= 10'} - peerDependencies: - prismjs: ^1.23.0 - - prismjs@1.30.0: - resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==} - engines: {node: '>=6'} - private@0.1.8: resolution: {integrity: sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==} engines: {node: '>= 0.6'} @@ -6635,6 +6676,9 @@ packages: proper-lockfile@4.1.2: resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==} + property-information@7.1.0: + resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==} + protocols@2.0.2: resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==} @@ -6757,6 +6801,15 @@ packages: resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==} engines: {node: '>=0.10.0'} + regex-recursion@6.0.2: + resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==} + + regex-utilities@2.3.0: + resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} + + regex@6.0.1: + resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==} + regexp.prototype.flags@1.5.4: resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==} engines: {node: '>= 0.4'} @@ -7148,6 +7201,9 @@ packages: shellwords@0.1.1: resolution: {integrity: sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==} + shiki@3.13.0: + resolution: {integrity: sha512-aZW4l8Og16CokuCLf8CF8kq+KK2yOygapU5m3+hoGw0Mdosc6fPitjM+ujYarppj5ZIKGyPDPP1vqmQhr+5/0g==} + side-channel-list@1.0.0: resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==} engines: {node: '>= 0.4'} @@ -7272,6 +7328,9 @@ packages: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} deprecated: Please use @jridgewell/sourcemap-codec instead + space-separated-tokens@2.0.2: + resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} + spawn-args@0.2.0: resolution: {integrity: sha512-73BoniQDcRWgnLAf/suKH6V5H54gd1KLzwYN9FB6J/evqTV33htH9xwV/4BHek+++jzxpVlZQKKZkqstPQPmQg==} @@ -7359,6 +7418,9 @@ packages: string_decoder@1.3.0: resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==} + stringify-entities@4.0.4: + resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==} + strip-ansi@3.0.1: resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==} engines: {node: '>=0.10.0'} @@ -7646,6 +7708,9 @@ packages: resolution: {integrity: sha512-OLWW+Nd99NOM53aZ8ilT/YpEiOo6mXD3F4/wLbARqybSZ3Jb8IxHK5UGVbZaae0wtXAyQshVV+SeqVBik+Fbmw==} engines: {node: '>=8'} + trim-lines@3.0.1: + resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} + ts-api-utils@2.1.0: resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==} engines: {node: '>=18.12'} @@ -7789,9 +7854,21 @@ packages: resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==} engines: {node: '>=8'} + unist-util-is@6.0.0: + resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} + + unist-util-position@5.0.0: + resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} + unist-util-stringify-position@4.0.0: resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + unist-util-visit-parents@6.0.1: + resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + + unist-util-visit@5.0.0: + resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} + universal-user-agent@7.0.3: resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==} @@ -7888,6 +7965,12 @@ packages: resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==} engines: {'0': node >=0.6.0} + vfile-message@4.0.3: + resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==} + + vfile@6.0.3: + resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} + vscode-jsonrpc@8.1.0: resolution: {integrity: sha512-6TDy/abTQk+zDGYazgbIPc+4JoXdwC8NHU9Pbn4UJP1fehUyZmM4RHp5IthX7A6L5KS30PRui+j+tbbMMMafdw==} engines: {node: '>=14.0.0'} @@ -8208,6 +8291,9 @@ packages: resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==} engines: {node: '>=18'} + zwitch@2.0.4: + resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} + snapshots: '@asamuzakjp/css-color@3.2.0': @@ -9954,6 +10040,39 @@ snapshots: '@rtsao/scc@1.1.0': {} + '@shikijs/core@3.13.0': + dependencies: + '@shikijs/types': 3.13.0 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + hast-util-to-html: 9.0.5 + + '@shikijs/engine-javascript@3.13.0': + dependencies: + '@shikijs/types': 3.13.0 + '@shikijs/vscode-textmate': 10.0.2 + oniguruma-to-es: 4.3.3 + + '@shikijs/engine-oniguruma@3.13.0': + dependencies: + '@shikijs/types': 3.13.0 + '@shikijs/vscode-textmate': 10.0.2 + + '@shikijs/langs@3.13.0': + dependencies: + '@shikijs/types': 3.13.0 + + '@shikijs/themes@3.13.0': + dependencies: + '@shikijs/types': 3.13.0 + + '@shikijs/types@3.13.0': + dependencies: + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + + '@shikijs/vscode-textmate@10.0.2': {} + '@simple-dom/document@1.4.0': dependencies: '@simple-dom/interface': 1.4.0 @@ -10057,6 +10176,10 @@ snapshots: dependencies: glob: 8.1.0 + '@types/hast@3.0.4': + dependencies: + '@types/unist': 3.0.3 + '@types/http-errors@2.0.5': {} '@types/json-schema@7.0.15': {} @@ -10089,8 +10212,6 @@ snapshots: dependencies: parse-path: 7.1.0 - '@types/prismjs@1.26.5': {} - '@types/qs@6.14.0': {} '@types/qunit@2.19.13': {} @@ -10216,6 +10337,8 @@ snapshots: '@typescript-eslint/types': 8.45.0 eslint-visitor-keys: 4.2.1 + '@ungap/structured-clone@1.3.0': {} + '@warp-drive/build-config@5.6.0(@glint/template@1.5.2)': dependencies: '@embroider/addon-shim': 1.10.0 @@ -11399,6 +11522,8 @@ snapshots: caseless@0.12.0: {} + ccount@2.0.1: {} + chalk@1.1.3: dependencies: ansi-styles: 2.2.1 @@ -11420,6 +11545,10 @@ snapshots: chalk@5.6.2: {} + character-entities-html4@2.1.0: {} + + character-entities-legacy@3.0.0: {} + character-entities@2.0.2: {} chardet@0.7.0: {} @@ -11562,6 +11691,8 @@ snapshots: dependencies: delayed-stream: 1.0.0 + comma-separated-tokens@2.0.3: {} + commander@2.20.3: {} commander@2.8.1: @@ -13876,6 +14007,24 @@ snapshots: dependencies: function-bind: 1.1.2 + hast-util-to-html@9.0.5: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + comma-separated-tokens: 2.0.3 + hast-util-whitespace: 3.0.0 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.2.0 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + stringify-entities: 4.0.4 + zwitch: 2.0.4 + + hast-util-whitespace@3.0.0: + dependencies: + '@types/hast': 3.0.4 + heimdalljs-fs-monitor@1.1.2: dependencies: callsites: 3.1.0 @@ -13929,6 +14078,8 @@ snapshots: html-tags@3.3.1: {} + html-void-elements@3.0.0: {} + http-cache-semantics@4.2.0: {} http-errors@1.6.3: @@ -14844,6 +14995,18 @@ snapshots: transitivePeerDependencies: - supports-color + mdast-util-to-hast@13.2.0: + dependencies: + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + '@ungap/structured-clone': 1.3.0 + devlop: 1.1.0 + micromark-util-sanitize-uri: 2.0.1 + trim-lines: 3.0.1 + unist-util-position: 5.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + mdast-util-to-string@4.0.0: dependencies: '@types/mdast': 4.0.4 @@ -15393,6 +15556,14 @@ snapshots: dependencies: mimic-function: 5.0.1 + oniguruma-parser@0.12.1: {} + + oniguruma-to-es@4.3.3: + dependencies: + oniguruma-parser: 0.12.1 + regex: 6.0.1 + regex-recursion: 6.0.2 + open@10.2.0: dependencies: default-browser: 5.2.1 @@ -15752,12 +15923,6 @@ snapshots: printf@0.6.1: {} - prismjs-glimmer@1.1.1(prismjs@1.30.0): - dependencies: - prismjs: 1.30.0 - - prismjs@1.30.0: {} - private@0.1.8: {} proc-log@5.0.0: {} @@ -15789,6 +15954,8 @@ snapshots: retry: 0.12.0 signal-exit: 3.0.7 + property-information@7.1.0: {} + protocols@2.0.2: {} proxy-addr@2.0.7: @@ -15943,6 +16110,16 @@ snapshots: extend-shallow: 3.0.2 safe-regex: 1.1.0 + regex-recursion@6.0.2: + dependencies: + regex-utilities: 2.3.0 + + regex-utilities@2.3.0: {} + + regex@6.0.1: + dependencies: + regex-utilities: 2.3.0 + regexp.prototype.flags@1.5.4: dependencies: call-bind: 1.0.8 @@ -16424,6 +16601,17 @@ snapshots: shellwords@0.1.1: {} + shiki@3.13.0: + dependencies: + '@shikijs/core': 3.13.0 + '@shikijs/engine-javascript': 3.13.0 + '@shikijs/engine-oniguruma': 3.13.0 + '@shikijs/langs': 3.13.0 + '@shikijs/themes': 3.13.0 + '@shikijs/types': 3.13.0 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + side-channel-list@1.0.0: dependencies: es-errors: 1.3.0 @@ -16603,6 +16791,8 @@ snapshots: sourcemap-codec@1.4.8: {} + space-separated-tokens@2.0.2: {} + spawn-args@0.2.0: {} split-string@3.1.0: @@ -16712,6 +16902,11 @@ snapshots: dependencies: safe-buffer: 5.2.1 + stringify-entities@4.0.4: + dependencies: + character-entities-html4: 2.1.0 + character-entities-legacy: 3.0.0 + strip-ansi@3.0.1: dependencies: ansi-regex: 2.1.1 @@ -17137,6 +17332,8 @@ snapshots: transitivePeerDependencies: - supports-color + trim-lines@3.0.1: {} + ts-api-utils@2.1.0(typescript@5.9.3): dependencies: typescript: 5.9.3 @@ -17289,10 +17486,29 @@ snapshots: dependencies: crypto-random-string: 2.0.0 + unist-util-is@6.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-position@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-stringify-position@4.0.0: dependencies: '@types/unist': 3.0.3 + unist-util-visit-parents@6.0.1: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + + unist-util-visit@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + universal-user-agent@7.0.3: {} universalify@0.1.2: {} @@ -17367,6 +17583,16 @@ snapshots: core-util-is: 1.0.2 extsprintf: 1.3.0 + vfile-message@4.0.3: + dependencies: + '@types/unist': 3.0.3 + unist-util-stringify-position: 4.0.0 + + vfile@6.0.3: + dependencies: + '@types/unist': 3.0.3 + vfile-message: 4.0.3 + vscode-jsonrpc@8.1.0: {} vscode-languageserver-protocol@3.17.3: @@ -17716,3 +17942,5 @@ snapshots: yoctocolors-cjs@2.1.3: {} yoctocolors@2.1.2: {} + + zwitch@2.0.4: {} From 89f638689361b8086de9c3a3e1a922b5167b66d0 Mon Sep 17 00:00:00 2001 From: Markus Sanin Date: Fri, 3 Oct 2025 17:47:44 +0200 Subject: [PATCH 02/22] Convert examples to gts --- docs/app/components/snippets/animations-1.gts | 18 +++ docs/app/components/snippets/animations-1.hbs | 9 -- docs/app/components/snippets/animations-1.js | 4 - .../components/snippets/content-events-1.gts | 91 +++++++++++ .../components/snippets/content-events-1.hbs | 45 ------ .../components/snippets/content-events-1.js | 33 ---- .../components/snippets/custom-position-1.gts | 28 ++++ .../components/snippets/custom-position-1.hbs | 9 -- .../components/snippets/custom-position-1.js | 14 -- .../components/snippets/custom-position-2.gts | 47 ++++++ .../components/snippets/custom-position-2.hbs | 14 -- .../components/snippets/custom-position-2.js | 28 ---- docs/app/components/snippets/disabled-1.gts | 15 ++ docs/app/components/snippets/disabled-1.hbs | 7 - docs/app/components/snippets/disabled-1.js | 4 - .../components/snippets/dropdown-events-1.gts | 34 +++++ .../components/snippets/dropdown-events-1.hbs | 13 -- .../components/snippets/dropdown-events-1.js | 15 -- .../components/snippets/dropdown-events-2.gts | 48 ++++++ .../components/snippets/dropdown-events-2.hbs | 15 -- .../components/snippets/dropdown-events-2.js | 29 ---- .../components/snippets/dropdown-events-3.gts | 50 ++++++ .../components/snippets/dropdown-events-3.hbs | 29 ---- .../components/snippets/dropdown-events-3.js | 12 -- .../components/snippets/how-to-use-it-2.gts | 19 +++ .../components/snippets/how-to-use-it-2.hbs | 9 -- .../components/snippets/how-to-use-it-2.js | 4 - .../components/snippets/how-to-use-it-3.gts | 15 ++ .../components/snippets/how-to-use-it-3.hbs | 7 - .../components/snippets/how-to-use-it-3.js | 4 - docs/app/components/snippets/no-trigger-1.gts | 29 ++++ docs/app/components/snippets/no-trigger-1.hbs | 20 --- docs/app/components/snippets/no-trigger-1.js | 4 - docs/app/components/snippets/no-trigger-2.gts | 22 +++ docs/app/components/snippets/no-trigger-2.hbs | 13 -- docs/app/components/snippets/no-trigger-2.js | 4 - docs/app/components/snippets/overlays-1.gts | 15 ++ docs/app/components/snippets/overlays-1.hbs | 7 - docs/app/components/snippets/overlays-1.js | 4 - docs/app/components/snippets/position-1.gts | 142 ++++++++++++++++++ docs/app/components/snippets/position-1.hbs | 126 ---------------- docs/app/components/snippets/position-1.js | 8 - docs/app/components/snippets/position-2.gts | 15 ++ docs/app/components/snippets/position-2.hbs | 7 - docs/app/components/snippets/position-2.js | 4 - docs/app/components/snippets/position-3.gts | 15 ++ docs/app/components/snippets/position-3.hbs | 7 - docs/app/components/snippets/position-3.js | 4 - .../snippets/scrollable-container-1.gts | 29 ++++ .../snippets/scrollable-container-1.hbs | 21 --- .../snippets/scrollable-container-1.js | 4 - .../components/snippets/trigger-events-0.gts | 33 ++++ .../components/snippets/trigger-events-0.hbs | 23 --- .../components/snippets/trigger-events-0.js | 4 - .../components/snippets/trigger-events-1.gts | 29 ++++ .../components/snippets/trigger-events-1.hbs | 12 -- .../components/snippets/trigger-events-1.js | 9 -- .../components/snippets/trigger-events-2.gts | 27 ++++ .../components/snippets/trigger-events-2.hbs | 12 -- .../components/snippets/trigger-events-2.js | 8 - .../components/snippets/trigger-events-3.gts | 51 +++++++ .../components/snippets/trigger-events-3.hbs | 22 --- .../components/snippets/trigger-events-3.js | 22 --- .../components/snippets/trigger-events-4.gts | 46 ++++++ .../components/snippets/trigger-events-4.hbs | 24 --- .../components/snippets/trigger-events-4.js | 15 -- .../public-pages/cookbook/no-trigger.hbs | 4 +- .../public-pages/docs/animations.hbs | 2 +- .../public-pages/docs/api-reference.hbs | 27 ++-- .../public-pages/docs/content-events.hbs | 2 +- .../public-pages/docs/custom-position.hbs | 4 +- .../templates/public-pages/docs/disabled.hbs | 2 +- .../public-pages/docs/dropdown-events.hbs | 6 +- .../public-pages/docs/how-to-use-it.hbs | 4 +- .../templates/public-pages/docs/overlays.hbs | 2 +- .../templates/public-pages/docs/position.hbs | 6 +- .../public-pages/docs/trigger-events.hbs | 10 +- docs/app/templates/scrolling-container.hbs | 2 +- 78 files changed, 853 insertions(+), 724 deletions(-) create mode 100644 docs/app/components/snippets/animations-1.gts delete mode 100644 docs/app/components/snippets/animations-1.hbs delete mode 100644 docs/app/components/snippets/animations-1.js create mode 100644 docs/app/components/snippets/content-events-1.gts delete mode 100644 docs/app/components/snippets/content-events-1.hbs delete mode 100644 docs/app/components/snippets/content-events-1.js create mode 100644 docs/app/components/snippets/custom-position-1.gts delete mode 100644 docs/app/components/snippets/custom-position-1.hbs delete mode 100644 docs/app/components/snippets/custom-position-1.js create mode 100644 docs/app/components/snippets/custom-position-2.gts delete mode 100644 docs/app/components/snippets/custom-position-2.hbs delete mode 100644 docs/app/components/snippets/custom-position-2.js create mode 100644 docs/app/components/snippets/disabled-1.gts delete mode 100644 docs/app/components/snippets/disabled-1.hbs delete mode 100644 docs/app/components/snippets/disabled-1.js create mode 100644 docs/app/components/snippets/dropdown-events-1.gts delete mode 100644 docs/app/components/snippets/dropdown-events-1.hbs delete mode 100644 docs/app/components/snippets/dropdown-events-1.js create mode 100644 docs/app/components/snippets/dropdown-events-2.gts delete mode 100644 docs/app/components/snippets/dropdown-events-2.hbs delete mode 100644 docs/app/components/snippets/dropdown-events-2.js create mode 100644 docs/app/components/snippets/dropdown-events-3.gts delete mode 100644 docs/app/components/snippets/dropdown-events-3.hbs delete mode 100644 docs/app/components/snippets/dropdown-events-3.js create mode 100644 docs/app/components/snippets/how-to-use-it-2.gts delete mode 100644 docs/app/components/snippets/how-to-use-it-2.hbs delete mode 100644 docs/app/components/snippets/how-to-use-it-2.js create mode 100644 docs/app/components/snippets/how-to-use-it-3.gts delete mode 100644 docs/app/components/snippets/how-to-use-it-3.hbs delete mode 100644 docs/app/components/snippets/how-to-use-it-3.js create mode 100644 docs/app/components/snippets/no-trigger-1.gts delete mode 100644 docs/app/components/snippets/no-trigger-1.hbs delete mode 100644 docs/app/components/snippets/no-trigger-1.js create mode 100644 docs/app/components/snippets/no-trigger-2.gts delete mode 100644 docs/app/components/snippets/no-trigger-2.hbs delete mode 100644 docs/app/components/snippets/no-trigger-2.js create mode 100644 docs/app/components/snippets/overlays-1.gts delete mode 100644 docs/app/components/snippets/overlays-1.hbs delete mode 100644 docs/app/components/snippets/overlays-1.js create mode 100644 docs/app/components/snippets/position-1.gts delete mode 100644 docs/app/components/snippets/position-1.hbs delete mode 100644 docs/app/components/snippets/position-1.js create mode 100644 docs/app/components/snippets/position-2.gts delete mode 100644 docs/app/components/snippets/position-2.hbs delete mode 100644 docs/app/components/snippets/position-2.js create mode 100644 docs/app/components/snippets/position-3.gts delete mode 100644 docs/app/components/snippets/position-3.hbs delete mode 100644 docs/app/components/snippets/position-3.js create mode 100644 docs/app/components/snippets/scrollable-container-1.gts delete mode 100644 docs/app/components/snippets/scrollable-container-1.hbs delete mode 100644 docs/app/components/snippets/scrollable-container-1.js create mode 100644 docs/app/components/snippets/trigger-events-0.gts delete mode 100644 docs/app/components/snippets/trigger-events-0.hbs delete mode 100644 docs/app/components/snippets/trigger-events-0.js create mode 100644 docs/app/components/snippets/trigger-events-1.gts delete mode 100644 docs/app/components/snippets/trigger-events-1.hbs delete mode 100644 docs/app/components/snippets/trigger-events-1.js create mode 100644 docs/app/components/snippets/trigger-events-2.gts delete mode 100644 docs/app/components/snippets/trigger-events-2.hbs delete mode 100644 docs/app/components/snippets/trigger-events-2.js create mode 100644 docs/app/components/snippets/trigger-events-3.gts delete mode 100644 docs/app/components/snippets/trigger-events-3.hbs delete mode 100644 docs/app/components/snippets/trigger-events-3.js create mode 100644 docs/app/components/snippets/trigger-events-4.gts delete mode 100644 docs/app/components/snippets/trigger-events-4.hbs delete mode 100644 docs/app/components/snippets/trigger-events-4.js diff --git a/docs/app/components/snippets/animations-1.gts b/docs/app/components/snippets/animations-1.gts new file mode 100644 index 00000000..c8effe79 --- /dev/null +++ b/docs/app/components/snippets/animations-1.gts @@ -0,0 +1,18 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} + diff --git a/docs/app/components/snippets/animations-1.hbs b/docs/app/components/snippets/animations-1.hbs deleted file mode 100644 index 0257c78d..00000000 --- a/docs/app/components/snippets/animations-1.hbs +++ /dev/null @@ -1,9 +0,0 @@ - - Animate me - - -
  • Miguel
    • -
  • Matthew
    • -
  • Dan
    • -     -     \ No newline at end of file diff --git a/docs/app/components/snippets/animations-1.js b/docs/app/components/snippets/animations-1.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/animations-1.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/content-events-1.gts b/docs/app/components/snippets/content-events-1.gts new file mode 100644 index 00000000..226a4b0b --- /dev/null +++ b/docs/app/components/snippets/content-events-1.gts @@ -0,0 +1,91 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { didCancel, task, timeout } from 'ember-concurrency'; +import BasicDropdown, { type BasicDropdownDefaultBlock } from 'ember-basic-dropdown/components/basic-dropdown'; +import { on } from '@ember/modifier'; +import { fn } from '@ember/helper'; + +export default class extends Component { + notifications = [ + { text: 'Edward' }, + { text: 'Jonathan' }, + { text: 'Tom' }, + { text: 'Eric' }, + ]; + + // Actions + prevent(e: Event) { + return e.stopImmediatePropagation(); + } + + @action + open(dropdown: BasicDropdownDefaultBlock) { + void this.closeLaterTask.cancelAll(); + dropdown.actions.open(); + } + + @action + async closeLater(dropdown: BasicDropdownDefaultBlock) { + try { + await this.closeLaterTask.perform(dropdown); + } catch (e) { + if (!didCancel(e)) { + // re-throw the non-cancelation error + throw e; + } + } + } + + closeLaterTask = task(async (dropdown: BasicDropdownDefaultBlock) => { + await timeout(200); + dropdown.actions.close(); + }); + + +} diff --git a/docs/app/components/snippets/content-events-1.hbs b/docs/app/components/snippets/content-events-1.hbs deleted file mode 100644 index f774449c..00000000 --- a/docs/app/components/snippets/content-events-1.hbs +++ /dev/null @@ -1,45 +0,0 @@ -
    - -
    \ No newline at end of file diff --git a/docs/app/components/snippets/content-events-1.js b/docs/app/components/snippets/content-events-1.js deleted file mode 100644 index b78e97e1..00000000 --- a/docs/app/components/snippets/content-events-1.js +++ /dev/null @@ -1,33 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { task, timeout } from 'ember-concurrency'; - -export default class extends Component { - notifications = [ - { text: 'Edward' }, - { text: 'Jonathan' }, - { text: 'Tom' }, - { text: 'Eric' }, - ]; - - // Actions - prevent(e) { - return e.stopImmediatePropagation(); - } - - @action - open(dropdown) { - this.closeLaterTask.cancelAll(); - dropdown.actions.open(); - } - - @action - closeLater(dropdown) { - this.closeLaterTask.perform(dropdown); - } - - closeLaterTask = task(async (dropdown) => { - await timeout(200); - dropdown.actions.close(); - }); -} diff --git a/docs/app/components/snippets/custom-position-1.gts b/docs/app/components/snippets/custom-position-1.gts new file mode 100644 index 00000000..9b607c03 --- /dev/null +++ b/docs/app/components/snippets/custom-position-1.gts @@ -0,0 +1,28 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; +import type { CalculatePositionOptions, CalculatePositionResult } from 'ember-basic-dropdown/utils/calculate-position'; + +export default class extends Component { + calculatePosition(trigger: Element, content: HTMLElement, _destination: HTMLElement, { horizontalPosition, verticalPosition }: CalculatePositionOptions): CalculatePositionResult { + const { top, left, width, height } = trigger.getBoundingClientRect(); + const { height: contentHeight } = content.getBoundingClientRect(); + const style = { + left: left + width, + top: top + window.pageYOffset + height / 2 - contentHeight / 2, + }; + + return { horizontalPosition, verticalPosition, style }; + } + + +} diff --git a/docs/app/components/snippets/custom-position-1.hbs b/docs/app/components/snippets/custom-position-1.hbs deleted file mode 100644 index 99729482..00000000 --- a/docs/app/components/snippets/custom-position-1.hbs +++ /dev/null @@ -1,9 +0,0 @@ - - Click me - - - Hello from the right! -
    - See? It wasn't that hard. -     -     \ No newline at end of file diff --git a/docs/app/components/snippets/custom-position-1.js b/docs/app/components/snippets/custom-position-1.js deleted file mode 100644 index 33639653..00000000 --- a/docs/app/components/snippets/custom-position-1.js +++ /dev/null @@ -1,14 +0,0 @@ -import Component from '@glimmer/component'; - -export default class extends Component { - calculatePosition(trigger, content) { - let { top, left, width, height } = trigger.getBoundingClientRect(); - let { height: contentHeight } = content.getBoundingClientRect(); - let style = { - left: left + width, - top: top + window.pageYOffset + height / 2 - contentHeight / 2, - }; - - return { style }; - } -} diff --git a/docs/app/components/snippets/custom-position-2.gts b/docs/app/components/snippets/custom-position-2.gts new file mode 100644 index 00000000..d3e3584e --- /dev/null +++ b/docs/app/components/snippets/custom-position-2.gts @@ -0,0 +1,47 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { task, timeout } from 'ember-concurrency'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; +import type { CalculatePositionOptions, CalculatePositionResult } from 'ember-basic-dropdown/utils/calculate-position'; + +const NAMES = ['Katie', 'Ricardo', 'Igor', 'Alex', 'Martin', 'Godfrey']; + +export default class extends Component { + @tracked names: string[] = []; + + calculatePosition(trigger: Element, content: HTMLElement, _destination: HTMLElement, { horizontalPosition, verticalPosition }: CalculatePositionOptions): CalculatePositionResult { + const { top, left, width, height } = trigger.getBoundingClientRect(); + const { height: contentHeight } = content.getBoundingClientRect(); + const style = { + left: left + width, + top: top + window.pageYOffset + height / 2 - contentHeight / 2, + }; + + return { horizontalPosition, verticalPosition, style }; + } + + addNames = task(async () => { + this.names = []; + for (const name of NAMES) { + this.names = [...this.names, name]; + await timeout(750); + } + }); + + +} diff --git a/docs/app/components/snippets/custom-position-2.hbs b/docs/app/components/snippets/custom-position-2.hbs deleted file mode 100644 index ce9a07ff..00000000 --- a/docs/app/components/snippets/custom-position-2.hbs +++ /dev/null @@ -1,14 +0,0 @@ - - Click me - - - {{#each this.names as |name|}} - {{name}} -
    - {{/each}} -     -     \ No newline at end of file diff --git a/docs/app/components/snippets/custom-position-2.js b/docs/app/components/snippets/custom-position-2.js deleted file mode 100644 index f1442b33..00000000 --- a/docs/app/components/snippets/custom-position-2.js +++ /dev/null @@ -1,28 +0,0 @@ -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; -import { task, timeout } from 'ember-concurrency'; - -const NAMES = ['Katie', 'Ricardo', 'Igor', 'Alex', 'Martin', 'Godfrey']; - -export default class extends Component { - @tracked names = []; - - calculatePosition(trigger, content) { - let { top, left, width, height } = trigger.getBoundingClientRect(); - let { height: contentHeight } = content.getBoundingClientRect(); - let style = { - left: left + width, - top: top + window.pageYOffset + height / 2 - contentHeight / 2, - }; - - return { style }; - } - - addNames = task(async () => { - this.names = []; - for (let name of NAMES) { - this.names = [...this.names, name]; - await timeout(750); - } - }); -} diff --git a/docs/app/components/snippets/disabled-1.gts b/docs/app/components/snippets/disabled-1.gts new file mode 100644 index 00000000..87ca3b75 --- /dev/null +++ b/docs/app/components/snippets/disabled-1.gts @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/disabled-1.hbs b/docs/app/components/snippets/disabled-1.hbs deleted file mode 100644 index 3d47ec44..00000000 --- a/docs/app/components/snippets/disabled-1.hbs +++ /dev/null @@ -1,7 +0,0 @@ - - Click me - - - You can't see this - - \ No newline at end of file diff --git a/docs/app/components/snippets/disabled-1.js b/docs/app/components/snippets/disabled-1.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/disabled-1.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/dropdown-events-1.gts b/docs/app/components/snippets/dropdown-events-1.gts new file mode 100644 index 00000000..68bb823c --- /dev/null +++ b/docs/app/components/snippets/dropdown-events-1.gts @@ -0,0 +1,34 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; +import { task, timeout } from 'ember-concurrency'; + +const users = [ + { name: 'Nathan', assignment: 'CLI' }, + { name: 'Rober', assignment: 'Whatnot' }, + { name: 'Leah', assignment: 'Community' }, +]; + +export default class extends Component { + users: typeof users = []; + + loadUsers = task(async () => { + await timeout(1000); + this.users = users; + }); + + +} diff --git a/docs/app/components/snippets/dropdown-events-1.hbs b/docs/app/components/snippets/dropdown-events-1.hbs deleted file mode 100644 index 89a50556..00000000 --- a/docs/app/components/snippets/dropdown-events-1.hbs +++ /dev/null @@ -1,13 +0,0 @@ - - Click me - - - {{#if this.loadUsers.isRunning}} -
    - {{else}} - {{#each this.loadUsers.lastSuccessful.value as |user|}} -

    {{user.name}} - {{user.assignment}}

    - {{/each}} - {{/if}} -     -     \ No newline at end of file diff --git a/docs/app/components/snippets/dropdown-events-1.js b/docs/app/components/snippets/dropdown-events-1.js deleted file mode 100644 index 3b9974bc..00000000 --- a/docs/app/components/snippets/dropdown-events-1.js +++ /dev/null @@ -1,15 +0,0 @@ -import Component from '@glimmer/component'; -import { task, timeout } from 'ember-concurrency'; - -const users = [ - { name: 'Nathan', assignment: 'CLI' }, - { name: 'Rober', assignment: 'Whatnot' }, - { name: 'Leah', assignment: 'Community' }, -]; - -export default class extends Component { - loadUsers = task(async () => { - await timeout(1000); - return users; - }); -} diff --git a/docs/app/components/snippets/dropdown-events-2.gts b/docs/app/components/snippets/dropdown-events-2.gts new file mode 100644 index 00000000..b4eb6aa3 --- /dev/null +++ b/docs/app/components/snippets/dropdown-events-2.gts @@ -0,0 +1,48 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { task, timeout } from 'ember-concurrency'; +import BasicDropdown, { type Dropdown } from 'ember-basic-dropdown/components/basic-dropdown'; + +const users = [ + { name: 'Nathan', assignment: 'CLI' }, + { name: 'Rober', assignment: 'Whatnot' }, + { name: 'Leah', assignment: 'Community' }, +]; + +export default class extends Component { + users = users; + + // Actions + @action + waitForUsers(dropdown: Dropdown, e?: Event) { + if (e) { + void this.loadUsersAndOpen.perform(dropdown); + return false; + } + } + + // Tasks + loadUsersAndOpen = task(async (dropdown: Dropdown) => { + await timeout(1000); + dropdown.actions.open(); // invoked without event + return users; + }); + + +} diff --git a/docs/app/components/snippets/dropdown-events-2.hbs b/docs/app/components/snippets/dropdown-events-2.hbs deleted file mode 100644 index b9cb4448..00000000 --- a/docs/app/components/snippets/dropdown-events-2.hbs +++ /dev/null @@ -1,15 +0,0 @@ - - - {{#if this.loadUsersAndOpen.isRunning}} - Loading... - {{else}} - Click me - {{/if}} - - - - {{#each this.loadUsersAndOpen.lastSuccessful.value as |user|}} -

    {{user.name}} - {{user.assignment}}

    - {{/each}} -     -     \ No newline at end of file diff --git a/docs/app/components/snippets/dropdown-events-2.js b/docs/app/components/snippets/dropdown-events-2.js deleted file mode 100644 index 214231e9..00000000 --- a/docs/app/components/snippets/dropdown-events-2.js +++ /dev/null @@ -1,29 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { task, timeout } from 'ember-concurrency'; - -const users = [ - { name: 'Nathan', assignment: 'CLI' }, - { name: 'Rober', assignment: 'Whatnot' }, - { name: 'Leah', assignment: 'Community' }, -]; - -export default class extends Component { - users = users; - - // Actions - @action - waitForUsers(dropdown, e) { - if (e) { - this.loadUsersAndOpen.perform(dropdown, e); - return false; - } - } - - // Tasks - loadUsersAndOpen = task(async (dropdown) => { - await timeout(1000); - dropdown.actions.open(); // invoked without event - return users; - }); -} diff --git a/docs/app/components/snippets/dropdown-events-3.gts b/docs/app/components/snippets/dropdown-events-3.gts new file mode 100644 index 00000000..5a221b08 --- /dev/null +++ b/docs/app/components/snippets/dropdown-events-3.gts @@ -0,0 +1,50 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; +import { on } from '@ember/modifier'; +import { fn } from '@ember/helper'; +import { tracked } from '@glimmer/tracking'; + +export default class extends Component { + @tracked selected: string = ''; + + @action + preventUntilSelected() { + if (!this.selected) { + alert('You have to choose!'); + return false; + } + } + + +} diff --git a/docs/app/components/snippets/dropdown-events-3.hbs b/docs/app/components/snippets/dropdown-events-3.hbs deleted file mode 100644 index 5ef6872e..00000000 --- a/docs/app/components/snippets/dropdown-events-3.hbs +++ /dev/null @@ -1,29 +0,0 @@ - - Click me - - -

    - Who you love more? -

    -

    - - -

    -

    - - -

    -     -     \ No newline at end of file diff --git a/docs/app/components/snippets/dropdown-events-3.js b/docs/app/components/snippets/dropdown-events-3.js deleted file mode 100644 index e5b3cbd6..00000000 --- a/docs/app/components/snippets/dropdown-events-3.js +++ /dev/null @@ -1,12 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; - -export default class extends Component { - @action - preventUntilSelected() { - if (!this.selected) { - alert('You have to choose!'); - return false; - } - } -} diff --git a/docs/app/components/snippets/how-to-use-it-2.gts b/docs/app/components/snippets/how-to-use-it-2.gts new file mode 100644 index 00000000..e99a5702 --- /dev/null +++ b/docs/app/components/snippets/how-to-use-it-2.gts @@ -0,0 +1,19 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/how-to-use-it-2.hbs b/docs/app/components/snippets/how-to-use-it-2.hbs deleted file mode 100644 index 450fb6f5..00000000 --- a/docs/app/components/snippets/how-to-use-it-2.hbs +++ /dev/null @@ -1,9 +0,0 @@ - - Click me - - - -

    I look like bootstrap, right?

    -

    You can style me however you want

    -     -     \ No newline at end of file diff --git a/docs/app/components/snippets/how-to-use-it-2.js b/docs/app/components/snippets/how-to-use-it-2.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/how-to-use-it-2.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/how-to-use-it-3.gts b/docs/app/components/snippets/how-to-use-it-3.gts new file mode 100644 index 00000000..457e18f1 --- /dev/null +++ b/docs/app/components/snippets/how-to-use-it-3.gts @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/how-to-use-it-3.hbs b/docs/app/components/snippets/how-to-use-it-3.hbs deleted file mode 100644 index a984a39c..00000000 --- a/docs/app/components/snippets/how-to-use-it-3.hbs +++ /dev/null @@ -1,7 +0,0 @@ - - + - - - puppy - - \ No newline at end of file diff --git a/docs/app/components/snippets/how-to-use-it-3.js b/docs/app/components/snippets/how-to-use-it-3.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/how-to-use-it-3.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/no-trigger-1.gts b/docs/app/components/snippets/no-trigger-1.gts new file mode 100644 index 00000000..4d620312 --- /dev/null +++ b/docs/app/components/snippets/no-trigger-1.gts @@ -0,0 +1,29 @@ +import { on } from '@ember/modifier'; +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/no-trigger-1.hbs b/docs/app/components/snippets/no-trigger-1.hbs deleted file mode 100644 index b939efca..00000000 --- a/docs/app/components/snippets/no-trigger-1.hbs +++ /dev/null @@ -1,20 +0,0 @@ - -
    - - -
    - - - I don't like the button, I like the input. - -     \ No newline at end of file diff --git a/docs/app/components/snippets/no-trigger-1.js b/docs/app/components/snippets/no-trigger-1.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/no-trigger-1.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/no-trigger-2.gts b/docs/app/components/snippets/no-trigger-2.gts new file mode 100644 index 00000000..1a6c909e --- /dev/null +++ b/docs/app/components/snippets/no-trigger-2.gts @@ -0,0 +1,22 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; +import basicDropdownTrigger from 'ember-basic-dropdown/modifiers/basic-dropdown-trigger'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/no-trigger-2.hbs b/docs/app/components/snippets/no-trigger-2.hbs deleted file mode 100644 index dc4a13e0..00000000 --- a/docs/app/components/snippets/no-trigger-2.hbs +++ /dev/null @@ -1,13 +0,0 @@ - - - - - I was opened with a custom trigger - - \ No newline at end of file diff --git a/docs/app/components/snippets/no-trigger-2.js b/docs/app/components/snippets/no-trigger-2.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/no-trigger-2.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/overlays-1.gts b/docs/app/components/snippets/overlays-1.gts new file mode 100644 index 00000000..10b64862 --- /dev/null +++ b/docs/app/components/snippets/overlays-1.gts @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/overlays-1.hbs b/docs/app/components/snippets/overlays-1.hbs deleted file mode 100644 index 049a8dc8..00000000 --- a/docs/app/components/snippets/overlays-1.hbs +++ /dev/null @@ -1,7 +0,0 @@ - - Click me - - - By default the overlays is black and transparent, but you can change that. - - \ No newline at end of file diff --git a/docs/app/components/snippets/overlays-1.js b/docs/app/components/snippets/overlays-1.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/overlays-1.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/position-1.gts b/docs/app/components/snippets/position-1.gts new file mode 100644 index 00000000..d4fbab37 --- /dev/null +++ b/docs/app/components/snippets/position-1.gts @@ -0,0 +1,142 @@ +import { fn } from '@ember/helper'; +import { on } from '@ember/modifier'; +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; +import { eq, not } from 'ember-truth-helpers'; +import type { HorizontalPosition, VerticalPosition } from 'ember-basic-dropdown/types'; + +export default class extends Component { + horizontalPosition: HorizontalPosition = 'auto'; + verticalPosition: VerticalPosition = 'auto'; + buttonPosition = 'left'; + renderInPlace = false; + + +} diff --git a/docs/app/components/snippets/position-1.hbs b/docs/app/components/snippets/position-1.hbs deleted file mode 100644 index 068efb5e..00000000 --- a/docs/app/components/snippets/position-1.hbs +++ /dev/null @@ -1,126 +0,0 @@ -horizontalPosition: -{{this.horizontalPosition}} -verticalPosition: -{{this.verticalPosition}} -buttonPosition: -{{this.buttonPosition}} -
    - {{#if this.renderInPlace}} - - Click me - - tomster - - - {{else}} - - Click me - - tomster - - - {{/if}} -
    -

    - Horizontal -
    - - - - - - - - - - -

    -

    - Vertical -
    - - - - - - -

    -

    - Button position -
    - - - - -

    - -

    - RenderInPlace -
    - - -

    \ No newline at end of file diff --git a/docs/app/components/snippets/position-1.js b/docs/app/components/snippets/position-1.js deleted file mode 100644 index 4f1fbc24..00000000 --- a/docs/app/components/snippets/position-1.js +++ /dev/null @@ -1,8 +0,0 @@ -import Component from '@glimmer/component'; - -export default class extends Component { - horizontalPosition = 'auto'; - verticalPosition = 'auto'; - buttonPosition = 'left'; - renderInPlace = false; -} diff --git a/docs/app/components/snippets/position-2.gts b/docs/app/components/snippets/position-2.gts new file mode 100644 index 00000000..f2e8a94e --- /dev/null +++ b/docs/app/components/snippets/position-2.gts @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/position-2.hbs b/docs/app/components/snippets/position-2.hbs deleted file mode 100644 index 5970fc35..00000000 --- a/docs/app/components/snippets/position-2.hbs +++ /dev/null @@ -1,7 +0,0 @@ - - Click me - - - I'm not in the root of the app - - \ No newline at end of file diff --git a/docs/app/components/snippets/position-2.js b/docs/app/components/snippets/position-2.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/position-2.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/position-3.gts b/docs/app/components/snippets/position-3.gts new file mode 100644 index 00000000..c0205ac2 --- /dev/null +++ b/docs/app/components/snippets/position-3.gts @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/position-3.hbs b/docs/app/components/snippets/position-3.hbs deleted file mode 100644 index 1ccf5faa..00000000 --- a/docs/app/components/snippets/position-3.hbs +++ /dev/null @@ -1,7 +0,0 @@ - - Click me! - - - I'm not in the root of the app - - \ No newline at end of file diff --git a/docs/app/components/snippets/position-3.js b/docs/app/components/snippets/position-3.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/position-3.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/scrollable-container-1.gts b/docs/app/components/snippets/scrollable-container-1.gts new file mode 100644 index 00000000..7cb4ae3b --- /dev/null +++ b/docs/app/components/snippets/scrollable-container-1.gts @@ -0,0 +1,29 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/scrollable-container-1.hbs b/docs/app/components/snippets/scrollable-container-1.hbs deleted file mode 100644 index 74c93a4c..00000000 --- a/docs/app/components/snippets/scrollable-container-1.hbs +++ /dev/null @@ -1,21 +0,0 @@ -
    -
    -
    -
    -
    - - Click me - - - -

    I look like bootstrap, right?

    -

    You can style me however you want

    -

    Option 3

    -

    Option 4

    -     -     -
    -
    -
    -
    -
    \ No newline at end of file diff --git a/docs/app/components/snippets/scrollable-container-1.js b/docs/app/components/snippets/scrollable-container-1.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/scrollable-container-1.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/trigger-events-0.gts b/docs/app/components/snippets/trigger-events-0.gts new file mode 100644 index 00000000..5b589f94 --- /dev/null +++ b/docs/app/components/snippets/trigger-events-0.gts @@ -0,0 +1,33 @@ +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +// eslint-disable-next-line ember/no-empty-glimmer-component-classes +export default class extends Component { + +} diff --git a/docs/app/components/snippets/trigger-events-0.hbs b/docs/app/components/snippets/trigger-events-0.hbs deleted file mode 100644 index 7429eb31..00000000 --- a/docs/app/components/snippets/trigger-events-0.hbs +++ /dev/null @@ -1,23 +0,0 @@ -
    -
    - - Mousedown (default) - - - I open as soon as you press the mouse button - - -
    -
    - - Click - - - I only open when you release the mouse button - - -
    -
    \ No newline at end of file diff --git a/docs/app/components/snippets/trigger-events-0.js b/docs/app/components/snippets/trigger-events-0.js deleted file mode 100644 index 1af80ea0..00000000 --- a/docs/app/components/snippets/trigger-events-0.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@glimmer/component'; - -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class extends Component {} diff --git a/docs/app/components/snippets/trigger-events-1.gts b/docs/app/components/snippets/trigger-events-1.gts new file mode 100644 index 00000000..e5385383 --- /dev/null +++ b/docs/app/components/snippets/trigger-events-1.gts @@ -0,0 +1,29 @@ +import { fn } from '@ember/helper'; +import { on } from '@ember/modifier'; +import Component from '@glimmer/component'; +import BasicDropdown, { type BasicDropdownDefaultBlock } from 'ember-basic-dropdown/components/basic-dropdown'; + +export default class extends Component { + openOnArrowDown(dropdown: BasicDropdownDefaultBlock, e: KeyboardEvent) { + if (e.keyCode === 38) { + dropdown.actions.open(e); + } + } + + +} diff --git a/docs/app/components/snippets/trigger-events-1.hbs b/docs/app/components/snippets/trigger-events-1.hbs deleted file mode 100644 index 1bf44680..00000000 --- a/docs/app/components/snippets/trigger-events-1.hbs +++ /dev/null @@ -1,12 +0,0 @@ - -
    - - Click me - - - Don't you love those little keys? - - \ No newline at end of file diff --git a/docs/app/components/snippets/trigger-events-1.js b/docs/app/components/snippets/trigger-events-1.js deleted file mode 100644 index 8a47c5e2..00000000 --- a/docs/app/components/snippets/trigger-events-1.js +++ /dev/null @@ -1,9 +0,0 @@ -import Component from '@glimmer/component'; - -export default class extends Component { - openOnArrowDown(dropdown, e) { - if (e.keyCode === 38) { - dropdown.actions.open(e); - } - } -} diff --git a/docs/app/components/snippets/trigger-events-2.gts b/docs/app/components/snippets/trigger-events-2.gts new file mode 100644 index 00000000..15b40909 --- /dev/null +++ b/docs/app/components/snippets/trigger-events-2.gts @@ -0,0 +1,27 @@ +import { on } from '@ember/modifier'; +import Component from '@glimmer/component'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +export default class extends Component { + useTheKeyboard(e: Event) { + alert('Use the keyboard!'); + return e.stopImmediatePropagation(); + } + + +} diff --git a/docs/app/components/snippets/trigger-events-2.hbs b/docs/app/components/snippets/trigger-events-2.hbs deleted file mode 100644 index 99baf479..00000000 --- a/docs/app/components/snippets/trigger-events-2.hbs +++ /dev/null @@ -1,12 +0,0 @@ - -
    - - Do not click me - - - hello world - - \ No newline at end of file diff --git a/docs/app/components/snippets/trigger-events-2.js b/docs/app/components/snippets/trigger-events-2.js deleted file mode 100644 index dd37112d..00000000 --- a/docs/app/components/snippets/trigger-events-2.js +++ /dev/null @@ -1,8 +0,0 @@ -import Component from '@glimmer/component'; - -export default class extends Component { - useTheKeyboard(e) { - alert('Use the keyboard!'); - return e.stopImmediatePropagation(); - } -} diff --git a/docs/app/components/snippets/trigger-events-3.gts b/docs/app/components/snippets/trigger-events-3.gts new file mode 100644 index 00000000..2a248cd8 --- /dev/null +++ b/docs/app/components/snippets/trigger-events-3.gts @@ -0,0 +1,51 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { htmlSafe, type TrustedHTML } from '@ember/template'; +import { not } from 'ember-truth-helpers'; +import { on } from '@ember/modifier'; +import { fn } from '@ember/helper'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; + +export default class extends Component { + dropdownDisabled = true; + checkboxClass = null; + checkboxLabelStyle: TrustedHTML | string = ''; + + // Actions + @action + highlightCheckboxIfDisabled() { + if (this.dropdownDisabled) { + this.checkboxLabelStyle = htmlSafe('color: red'); + } + } + + @action + resetHighlight() { + this.checkboxLabelStyle = ''; + } + + +} diff --git a/docs/app/components/snippets/trigger-events-3.hbs b/docs/app/components/snippets/trigger-events-3.hbs deleted file mode 100644 index 6c748e0a..00000000 --- a/docs/app/components/snippets/trigger-events-3.hbs +++ /dev/null @@ -1,22 +0,0 @@ - - -
    - - - - Can you open me? - - - - You solved the puzzle! - - \ No newline at end of file diff --git a/docs/app/components/snippets/trigger-events-3.js b/docs/app/components/snippets/trigger-events-3.js deleted file mode 100644 index 9220ecd6..00000000 --- a/docs/app/components/snippets/trigger-events-3.js +++ /dev/null @@ -1,22 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { htmlSafe } from '@ember/template'; - -export default class extends Component { - dropdownDisabled = true; - checkboxClass = null; - checkboxLabelStyle = null; - - // Actions - @action - highlightCheckboxIfDisabled() { - if (this.dropdownDisabled) { - this.checkboxLabelStyle = htmlSafe('color: red'); - } - } - - @action - resetHighlight() { - this.checkboxLabelStyle = null; - } -} diff --git a/docs/app/components/snippets/trigger-events-4.gts b/docs/app/components/snippets/trigger-events-4.gts new file mode 100644 index 00000000..d6ee2e87 --- /dev/null +++ b/docs/app/components/snippets/trigger-events-4.gts @@ -0,0 +1,46 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { on } from '@ember/modifier'; +import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; +import { tracked } from '@glimmer/tracking'; + +export default class extends Component { + @tracked parentDivClass: string | null = null; + + @action + simulateFocusParent() { + this.parentDivClass = 'input-group--focused'; + } + + @action + simulateBlurParent() { + this.parentDivClass = null; + } + + +} diff --git a/docs/app/components/snippets/trigger-events-4.hbs b/docs/app/components/snippets/trigger-events-4.hbs deleted file mode 100644 index 903f37d8..00000000 --- a/docs/app/components/snippets/trigger-events-4.hbs +++ /dev/null @@ -1,24 +0,0 @@ -

    Focus alternatively the input and the button next to it

    -
    - - - - - - - - -

    Option1

    -

    Option2

    -     -     -
    \ No newline at end of file diff --git a/docs/app/components/snippets/trigger-events-4.js b/docs/app/components/snippets/trigger-events-4.js deleted file mode 100644 index 82d37fa8..00000000 --- a/docs/app/components/snippets/trigger-events-4.js +++ /dev/null @@ -1,15 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; - -export default class extends Component { - parentDivClass = null; - @action - simulateFocusParent() { - this.parentDivClass = 'input-group--focused'; - } - - @action - simulateBlurParent() { - this.parentDivClass = null; - } -} diff --git a/docs/app/templates/public-pages/cookbook/no-trigger.hbs b/docs/app/templates/public-pages/cookbook/no-trigger.hbs index b5206e35..7abbf562 100644 --- a/docs/app/templates/public-pages/cookbook/no-trigger.hbs +++ b/docs/app/templates/public-pages/cookbook/no-trigger.hbs @@ -46,7 +46,7 @@ will open below the input, not not below the button that you clicked.

    - + {{component (ensure-safe-component this.noTrigger1Component)}} @@ -67,6 +67,6 @@ component gets.

    - + {{component (ensure-safe-component this.noTrigger2Component)}} \ No newline at end of file diff --git a/docs/app/templates/public-pages/docs/animations.hbs b/docs/app/templates/public-pages/docs/animations.hbs index 44a386ac..18fcbb83 100644 --- a/docs/app/templates/public-pages/docs/animations.hbs +++ b/docs/app/templates/public-pages/docs/animations.hbs @@ -21,7 +21,7 @@ to have different animations depending on where the dropdown is positioned.

    - + {{component (ensure-safe-component this.animations1Component)}} diff --git a/docs/app/templates/public-pages/docs/api-reference.hbs b/docs/app/templates/public-pages/docs/api-reference.hbs index a40f94dc..084cc60d 100644 --- a/docs/app/templates/public-pages/docs/api-reference.hbs +++ b/docs/app/templates/public-pages/docs/api-reference.hbs @@ -56,7 +56,7 @@ contentComponent - String or Component + Component The component to render as content instead of the default content component. You probably @@ -115,7 +115,7 @@ triggerComponent - String + Component The component to render as trigger instead of the default trigger component. @@ -246,12 +246,6 @@ String The class of the dropdown's content - - to - String - [DEPRECATED]The selector of a DOM element where the - dropdown will be rendered using ember-wormhole - animationEnabled boolean @@ -296,12 +290,17 @@ 
    -  { uniqueId: <string>, // Contains the unique of this instance of
-  EmberBasicDropdown. It's of the form `ember1234`. disabled: <boolean>,
-  // Truthy if the component received `disabled=true` isOpen: <boolean>,
-  // Truthy if the component is currently opened actions: { close() { ... }, //
-  Closes the dropdown open() { ... }, // Opens the dropdown reposition() { ...
-  }, // Repositions the dropdown toggle() { ... } // Toggles the dropdown } }
+  {
+    uniqueId: <string>, // Contains the unique of this instance of EmberBasicDropdown. It's of the form `ember1234`.
+    disabled: <boolean>, // Truthy if the component received `disabled=true`
+    isOpen: <boolean>, // Truthy if the component is currently opened
+    actions: {
+      close() { ... }, // Closes the dropdown
+      open() { ... }, // Opens the dropdown
+      reposition() { ... }, // Repositions the dropdown
+      toggle() { ... } // Toggles the dropdown
+    }
+  }
    diff --git a/docs/app/templates/public-pages/docs/content-events.hbs b/docs/app/templates/public-pages/docs/content-events.hbs index 595b8b76..05ff8551 100644 --- a/docs/app/templates/public-pages/docs/content-events.hbs +++ b/docs/app/templates/public-pages/docs/content-events.hbs @@ -24,7 +24,7 @@ your favourite social network:

    - + {{component (ensure-safe-component this.contentEvents1Component)}} diff --git a/docs/app/templates/public-pages/docs/custom-position.hbs b/docs/app/templates/public-pages/docs/custom-position.hbs index 84b425be..d9671986 100644 --- a/docs/app/templates/public-pages/docs/custom-position.hbs +++ b/docs/app/templates/public-pages/docs/custom-position.hbs @@ -106,7 +106,7 @@ centered with it.

    - + {{component (ensure-safe-component this.customPosition1Component)}} @@ -117,7 +117,7 @@ MutationObservers.

    - + {{component (ensure-safe-component this.customPosition2Component)}} diff --git a/docs/app/templates/public-pages/docs/disabled.hbs b/docs/app/templates/public-pages/docs/disabled.hbs index dd26ac6d..a71d4d54 100644 --- a/docs/app/templates/public-pages/docs/disabled.hbs +++ b/docs/app/templates/public-pages/docs/disabled.hbs @@ -5,7 +5,7 @@ keyboard or touch screen.

    - + {{component (ensure-safe-component this.disabled1Component)}} diff --git a/docs/app/templates/public-pages/docs/dropdown-events.hbs b/docs/app/templates/public-pages/docs/dropdown-events.hbs index 5312f799..a63c81f9 100644 --- a/docs/app/templates/public-pages/docs/dropdown-events.hbs +++ b/docs/app/templates/public-pages/docs/dropdown-events.hbs @@ -28,7 +28,7 @@ is opened.

    - + {{component (ensure-safe-component this.dropDownEvents1Component)}} @@ -45,7 +45,7 @@ open it.

    - + {{component (ensure-safe-component this.dropDownEvents2Component)}} @@ -65,7 +65,7 @@ close until one checkbox is selected.

    - + {{component (ensure-safe-component this.dropDownEvents3Component)}} diff --git a/docs/app/templates/public-pages/docs/how-to-use-it.hbs b/docs/app/templates/public-pages/docs/how-to-use-it.hbs index f35f640e..dc100809 100644 --- a/docs/app/templates/public-pages/docs/how-to-use-it.hbs +++ b/docs/app/templates/public-pages/docs/how-to-use-it.hbs @@ -67,7 +67,7 @@ inspired by dropdown buttons in bootstrap:

    - + {{component (ensure-safe-component this.howToUseIt2Component)}} @@ -82,7 +82,7 @@ Let's make a material-like round button with a round content.

    - + {{component (ensure-safe-component this.howToUseIt3Component)}} diff --git a/docs/app/templates/public-pages/docs/overlays.hbs b/docs/app/templates/public-pages/docs/overlays.hbs index c3c9a33f..2d952565 100644 --- a/docs/app/templates/public-pages/docs/overlays.hbs +++ b/docs/app/templates/public-pages/docs/overlays.hbs @@ -6,7 +6,7 @@ that and make dropdowns look cooler.

    - + {{component (ensure-safe-component this.overlays1Component)}} diff --git a/docs/app/templates/public-pages/docs/position.hbs b/docs/app/templates/public-pages/docs/position.hbs index 5582ef66..2f3843cc 100644 --- a/docs/app/templates/public-pages/docs/position.hbs +++ b/docs/app/templates/public-pages/docs/position.hbs @@ -39,7 +39,7 @@

    This sounds like a lot, but with an example it will be crystal clear.

    - + {{component (ensure-safe-component this.position1Component)}} @@ -78,7 +78,7 @@ to the component. Inspect the DOM of the next example to see the difference.

    - + {{component (ensure-safe-component this.position2Component)}} @@ -98,7 +98,7 @@ option to enable this behaviour.

    - + {{component (ensure-safe-component this.position3Component)}} diff --git a/docs/app/templates/public-pages/docs/trigger-events.hbs b/docs/app/templates/public-pages/docs/trigger-events.hbs index ffc63e4d..b45b0581 100644 --- a/docs/app/templates/public-pages/docs/trigger-events.hbs +++ b/docs/app/templates/public-pages/docs/trigger-events.hbs @@ -14,7 +14,7 @@ to the trigger. Check below for both approaches. The difference is subtle.

    - + {{component (ensure-safe-component this.triggerEvents0Component)}} @@ -49,7 +49,7 @@ the arrow keys.

    - + {{component (ensure-safe-component this.triggerEvents1Component)}} @@ -79,7 +79,7 @@ and/or react in some way to those attempts.

    - + {{component (ensure-safe-component this.triggerEvents2Component)}} @@ -103,7 +103,7 @@ other element in the form that the user must enable first.

    - + {{component (ensure-safe-component this.triggerEvents3Component)}} @@ -117,7 +117,7 @@ pseudo selector.

    - + {{component (ensure-safe-component this.triggerEvents4Component)}} diff --git a/docs/app/templates/scrolling-container.hbs b/docs/app/templates/scrolling-container.hbs index 82044c08..ff702a79 100644 --- a/docs/app/templates/scrolling-container.hbs +++ b/docs/app/templates/scrolling-container.hbs @@ -11,7 +11,7 @@ for the dropdown to be positioned properly.

    - + {{component (ensure-safe-component this.scrollableContainer1Component)}}
    \ No newline at end of file From a13e6ce1daa98e93d467676176be8fa85fbc3e8a Mon Sep 17 00:00:00 2001 From: Markus Sanin Date: Fri, 3 Oct 2025 17:53:22 +0200 Subject: [PATCH 03/22] Remove system wide section --- docs/app/components/snippets/no-trigger-1.gts | 2 +- .../cookbook/{no-trigger.js => index.js} | 0 docs/app/templates/public-pages/cookbook.hbs | 4 - .../templates/public-pages/cookbook/index.hbs | 80 ++++++++++++------- .../public-pages/cookbook/no-trigger.hbs | 72 ----------------- .../snippets/system-wide-config-1-js.js | 9 --- 6 files changed, 53 insertions(+), 114 deletions(-) rename docs/app/controllers/public-pages/cookbook/{no-trigger.js => index.js} (100%) delete mode 100644 docs/app/templates/public-pages/cookbook/no-trigger.hbs delete mode 100644 docs/app/templates/snippets/system-wide-config-1-js.js diff --git a/docs/app/components/snippets/no-trigger-1.gts b/docs/app/components/snippets/no-trigger-1.gts index 4d620312..08e731a0 100644 --- a/docs/app/components/snippets/no-trigger-1.gts +++ b/docs/app/components/snippets/no-trigger-1.gts @@ -1,6 +1,6 @@ -import { on } from '@ember/modifier'; import Component from '@glimmer/component'; import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; +import { on } from '@ember/modifier'; // eslint-disable-next-line ember/no-empty-glimmer-component-classes export default class extends Component { diff --git a/docs/app/controllers/public-pages/cookbook/no-trigger.js b/docs/app/controllers/public-pages/cookbook/index.js similarity index 100% rename from docs/app/controllers/public-pages/cookbook/no-trigger.js rename to docs/app/controllers/public-pages/cookbook/index.js diff --git a/docs/app/templates/public-pages/cookbook.hbs b/docs/app/templates/public-pages/cookbook.hbs index 6df5b198..334a77b0 100644 --- a/docs/app/templates/public-pages/cookbook.hbs +++ b/docs/app/templates/public-pages/cookbook.hbs @@ -4,10 +4,6 @@ System-wide config - Usage without trigger
    diff --git a/docs/app/templates/public-pages/cookbook/index.hbs b/docs/app/templates/public-pages/cookbook/index.hbs index 50fd5829..7abbf562 100644 --- a/docs/app/templates/public-pages/cookbook/index.hbs +++ b/docs/app/templates/public-pages/cookbook/index.hbs @@ -1,48 +1,72 @@ -

    System-wide config

    +

    Usage without trigger

    - Ember Basic Dropdown can take a fair amount of configuration options on - invocations to alter its default behavior. + Use the component without a trigger? Is that possible?

    - If you want all your dropdowns to behave on a certain way or have some certain - classes? Repeating the same options over and over on your templates is boring. + Yes, it is. You don't need to invoke the + <dropdown.trigger> + component to make the dropdown work. The yielded + dropdown + has actions you can invoke from any other item. Yes, it is. You don't need to + invoke the + <dropdown.trigger> + component to make the dropdown work. The yielded + dropdown + has actions you can invoke from any other item.

    - If you want to apply a configuration option to all your dropdowns there is no - special way or key in the - /config/environment.js - you need to learn. Just use The Ember Wayโ„ข. + Sometimes you just cannot achieve what you want with this approach, so you + need to step down and wire things yourself.

    - Inside your app's - /app/components - folder create a - ember-basic-dropdown.js - file: + If you invoke the + open + or + toggle + action from say, a button, the dropdown is going to open and will take as the + element to be anchored to element with + data-ebd-id="\{{dropdown.uniqueId}}-trigger".

    -{{#let (get-code-snippet "system-wide-config-1-js.js") as |snippet|}} - -{{/let}} +

    + What kind of things can you do with this? +

    + +

    + By example, you can open or close the component when an item is clicked but + make the dropdown attach itself to an entirely different item in the page. +

    + +

    + Let's create an input with a button. When that button is clicked the drodown + will open below the input, not not below the button that you clicked. +

    + + + {{component (ensure-safe-component this.noTrigger1Component)}} +

    - That's all. No new concepts to learn, just your usual ember-cli work flow. + Remember that almost always you will want to use the provided trigger + component + <dropdown.trigger> + because it takes care of all the A11y, bindings and classes for you, but when + you can't it's good to know that you can still use your own markup and wire + things together yourself.

    - In this example the component is also named - \{{basic-dropdown}} - but using this approach you can create many components with different names - that extend and customize the default one without modifying it. + A good middle-ground is to apply the same trigger modifier that the component + uses, but to your element or component. It will get all of the same a11y and + bindings that the + <dropdown.trigger> + component gets.

    -
    - Usage without trigger > -
    \ No newline at end of file + + {{component (ensure-safe-component this.noTrigger2Component)}} + \ No newline at end of file diff --git a/docs/app/templates/public-pages/cookbook/no-trigger.hbs b/docs/app/templates/public-pages/cookbook/no-trigger.hbs deleted file mode 100644 index 7abbf562..00000000 --- a/docs/app/templates/public-pages/cookbook/no-trigger.hbs +++ /dev/null @@ -1,72 +0,0 @@ -

    Usage without trigger

    - -

    - Use the component without a trigger? Is that possible? -

    - -

    - Yes, it is. You don't need to invoke the - <dropdown.trigger> - component to make the dropdown work. The yielded - dropdown - has actions you can invoke from any other item. Yes, it is. You don't need to - invoke the - <dropdown.trigger> - component to make the dropdown work. The yielded - dropdown - has actions you can invoke from any other item. -

    - -

    - Sometimes you just cannot achieve what you want with this approach, so you - need to step down and wire things yourself. -

    - -

    - If you invoke the - open - or - toggle - action from say, a button, the dropdown is going to open and will take as the - element to be anchored to element with - data-ebd-id="\{{dropdown.uniqueId}}-trigger". -

    - -

    - What kind of things can you do with this? -

    - -

    - By example, you can open or close the component when an item is clicked but - make the dropdown attach itself to an entirely different item in the page. -

    - -

    - Let's create an input with a button. When that button is clicked the drodown - will open below the input, not not below the button that you clicked. -

    - - - {{component (ensure-safe-component this.noTrigger1Component)}} - - -

    - Remember that almost always you will want to use the provided trigger - component - <dropdown.trigger> - because it takes care of all the A11y, bindings and classes for you, but when - you can't it's good to know that you can still use your own markup and wire - things together yourself. -

    - -

    - A good middle-ground is to apply the same trigger modifier that the component - uses, but to your element or component. It will get all of the same a11y and - bindings that the - <dropdown.trigger> - component gets. -

    - - - {{component (ensure-safe-component this.noTrigger2Component)}} - \ No newline at end of file diff --git a/docs/app/templates/snippets/system-wide-config-1-js.js b/docs/app/templates/snippets/system-wide-config-1-js.js deleted file mode 100644 index 1c88e92e..00000000 --- a/docs/app/templates/snippets/system-wide-config-1-js.js +++ /dev/null @@ -1,9 +0,0 @@ -import EmberBasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; - -export default class extends EmberBasicDropdown { - // Place here your system-wide preferences - triggerComponent = 'my-custom-trigger'; - calculatePosition() { - // your custom function to position the dropdown - } -} From 3cf0cde996a148270c5906ec0bcbc3bd5b547449 Mon Sep 17 00:00:00 2001 From: Markus Sanin Date: Fri, 3 Oct 2025 17:56:03 +0200 Subject: [PATCH 04/22] Drop addon section (outdated) --- docs/app/templates/public-pages.hbs | 4 ---- docs/app/templates/public-pages/addons.hbs | 5 ----- .../templates/public-pages/addons/index.hbs | 19 ------------------- 3 files changed, 28 deletions(-) delete mode 100644 docs/app/templates/public-pages/addons.hbs delete mode 100644 docs/app/templates/public-pages/addons/index.hbs diff --git a/docs/app/templates/public-pages.hbs b/docs/app/templates/public-pages.hbs index bb6ea184..2102d479 100644 --- a/docs/app/templates/public-pages.hbs +++ b/docs/app/templates/public-pages.hbs @@ -9,10 +9,6 @@ @route="public-pages.cookbook" class="main-header-nav-link" >Cookbook - Addons -
    - {{outlet}} -
    -
    \ No newline at end of file diff --git a/docs/app/templates/public-pages/addons/index.hbs b/docs/app/templates/public-pages/addons/index.hbs deleted file mode 100644 index b22437c9..00000000 --- a/docs/app/templates/public-pages/addons/index.hbs +++ /dev/null @@ -1,19 +0,0 @@ -

    Addons

    - -

    - This component is pretty low lever and is intended to be a building block to - build your own components on top. -

    - -

    - If you build something reusable that you think it's worth sharing you can - publish it as an addon so other can use it. -

    - -

    If so, let me know and I'll add it to this section. You can use the one below - as inspiration.

    - -     \ No newline at end of file From 35390bc6ddd67a2a4c8714e62827f8348ce8ac86 Mon Sep 17 00:00:00 2001 From: Markus Sanin Date: Fri, 3 Oct 2025 18:01:00 +0200 Subject: [PATCH 05/22] Fix snippets / header styling --- docs/app/components/snippets/custom-position-2.gts | 8 +++++++- docs/app/components/snippets/dropdown-events-1.gts | 8 +++++++- docs/app/styles/components/main-header.scss | 2 +- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/app/components/snippets/custom-position-2.gts b/docs/app/components/snippets/custom-position-2.gts index d3e3584e..38086e0a 100644 --- a/docs/app/components/snippets/custom-position-2.gts +++ b/docs/app/components/snippets/custom-position-2.gts @@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking'; import { task, timeout } from 'ember-concurrency'; import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'; import type { CalculatePositionOptions, CalculatePositionResult } from 'ember-basic-dropdown/utils/calculate-position'; +import { action } from '@ember/object'; const NAMES = ['Katie', 'Ricardo', 'Igor', 'Alex', 'Martin', 'Godfrey']; @@ -28,10 +29,15 @@ export default class extends Component { } }); + @action + open() { + void this.addNames.perform(); + } +