diff --git a/.eslintignore b/.eslintignore index 0b620c8a..c78eccfd 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,26 +1,15 @@ # unconventional js /blueprints/*/files/ -/vendor/ # compiled output +/declarations/ /dist/ -/tmp/ - -# dependencies -/bower_components/ -/node_modules/ # misc /coverage/ !.* .*/ -.eslintcache # ember-try /.node_modules.ember-try/ -/bower.json.ember-try -/npm-shrinkwrap.json.ember-try -/package.json.ember-try -/package-lock.json.ember-try -/yarn.lock.ember-try /pnpm-lock.yaml.ember-try diff --git a/.eslintrc.js b/.eslintrc.js index 54bcadba..e922731d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -2,12 +2,20 @@ module.exports = { root: true, - parser: 'babel-eslint', + parser: '@babel/eslint-parser', parserOptions: { - ecmaVersion: 2020, + ecmaVersion: 'latest', sourceType: 'module', - ecmaFeatures: { - legacyDecorators: true, + requireConfigFile: false, + babelOptions: { + plugins: [ + [ + '@babel/plugin-proposal-decorators', + { + decoratorsBeforeExport: true, + }, + ], + ], }, }, plugins: ['ember'], @@ -19,23 +27,16 @@ module.exports = { env: { browser: true, }, - globals: { - globalThis: 'readonly', - }, rules: { 'no-setter-return': 'off', 'ember/classic-decorator-no-classic-methods': 'warn', 'ember/classic-decorator-hooks': 'warn', - 'ember/no-actions-hash': 'warn', 'ember/no-classic-classes': 'warn', 'ember/no-classic-components': 'warn', 'ember/no-component-lifecycle-hooks': 'warn', 'ember/no-computed-properties-in-native-classes': 'warn', - 'ember/no-get': 'warn', 'ember/no-observers': 'warn', - 'ember/require-computed-macros': 'warn', 'ember/require-tagless-components': 'warn', - 'ember/no-jquery': 'error', }, overrides: [ // node files @@ -43,6 +44,7 @@ module.exports = { files: [ './.eslintrc.js', './.prettierrc.js', + './.stylelintrc.js', './.template-lintrc.js', './ember-cli-build.js', './index.js', @@ -58,8 +60,7 @@ module.exports = { browser: false, node: true, }, - plugins: ['node'], - extends: ['plugin:node/recommended'], + extends: ['plugin:n/recommended'], }, { // test files diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b52e2200..9154b7a6 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -18,6 +18,7 @@ jobs: test: name: "Tests" runs-on: ubuntu-latest + timeout-minutes: 5 steps: - uses: actions/checkout@v4 @@ -46,11 +47,12 @@ jobs: - name: Lint run: pnpm lint - name: Run Tests - run: pnpm test:ember + run: pnpm test floating: name: "Floating Dependencies" runs-on: ubuntu-latest + timeout-minutes: 5 steps: - uses: actions/checkout@v4 @@ -77,29 +79,25 @@ jobs: shell: bash run: pnpm store prune - name: Run Tests - run: pnpm test:ember + run: pnpm test try-scenarios: name: ${{ matrix.try-scenario }} runs-on: ubuntu-latest - needs: 'test' + timeout-minutes: 5 strategy: fail-fast: false matrix: try-scenario: - - ember-lts-3.24 - ember-lts-3.28 - - ember-lts-4.4 - - ember-lts-4.8 - ember-lts-4.12 - - ember-lts-5.4 - - ember-lts-5.8 + - ember-lts-5.12 - ember-release - ember-beta - ember-canary - embroider-safe - - embroider-optimized + # - embroider-optimized steps: - uses: actions/checkout@v4 @@ -126,4 +124,4 @@ jobs: shell: bash run: pnpm store prune - name: Run Tests - run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }} + run: pnpm test:ember-compatibility ${{ matrix.try-scenario }} --- pnpm test diff --git a/.gitignore b/.gitignore index 9535777d..faee1e23 100644 --- a/.gitignore +++ b/.gitignore @@ -1,30 +1,26 @@ -# See https://help.github.com/ignore-files/ for more about ignoring files. - # compiled output /dist/ -/tmp/ +/declarations/ # dependencies -/bower_components/ /node_modules/ # misc /.env* /.pnp* -/.sass-cache /.eslintcache -/connect.lock /coverage/ -/libpeerconnection.log /npm-debug.log* /testem.log /yarn-error.log # ember-try /.node_modules.ember-try/ -/bower.json.ember-try /npm-shrinkwrap.json.ember-try /package.json.ember-try /package-lock.json.ember-try /yarn.lock.ember-try /pnpm-lock.yaml.ember-try + +# broccoli-debug +/DEBUG/ diff --git a/.npmignore b/.npmignore index 42619c8f..d9016faf 100644 --- a/.npmignore +++ b/.npmignore @@ -2,11 +2,7 @@ /dist/ /tmp/ -# dependencies -/bower_components/ - # misc -/.bowerrc /.editorconfig /.ember-cli /.env* @@ -18,15 +14,16 @@ /.gitignore /.prettierignore /.prettierrc.js +/.stylelintignore +/.stylelintrc.js /.template-lintrc.js -/.travis.yml /.watchmanconfig -/bower.json -/config/ember-try.js /CONTRIBUTING.md /ember-cli-build.js /testem.js /tests/ +/tsconfig.declarations.json +/tsconfig.json /yarn-error.log /yarn.lock /pnpm-lock.yaml @@ -34,7 +31,6 @@ # ember-try /.node_modules.ember-try/ -/bower.json.ember-try /npm-shrinkwrap.json.ember-try /package.json.ember-try /package-lock.json.ember-try diff --git a/.prettierignore b/.prettierignore index d7b26671..027154cf 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,26 +1,14 @@ # unconventional js /blueprints/*/files/ -/vendor/ # compiled output /dist/ -/tmp/ - -# dependencies -/bower_components/ -/node_modules/ # misc /coverage/ !.* -.eslintcache -.lint-todo/ +.*/ # ember-try /.node_modules.ember-try/ -/bower.json.ember-try -/npm-shrinkwrap.json.ember-try -/package.json.ember-try -/package-lock.json.ember-try -/yarn.lock.ember-try /pnpm-lock.yaml.ember-try diff --git a/.prettierrc.js b/.prettierrc.js index 534e6d35..5d758282 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,5 +1,20 @@ 'use strict'; module.exports = { - singleQuote: true, + overrides: [ + { + files: '*.hbs', + options: { + printWidth: 64, + singleQuote: false, + }, + }, + { + files: '*.{js,ts}', + options: { + printWidth: 80, + singleQuote: true, + }, + }, + ], }; diff --git a/.template-lintrc.js b/.template-lintrc.js index db6664a2..7daf635e 100644 --- a/.template-lintrc.js +++ b/.template-lintrc.js @@ -1,10 +1,17 @@ 'use strict'; module.exports = { - extends: 'recommended', + plugins: ['ember-template-lint-plugin-prettier'], + extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'], rules: { 'no-action': false, - 'no-curly-component-invocation': false, - 'require-button-type': false, }, + overrides: [ + { + files: ['tests/**/*-test.{js,ts}'], + rules: { + prettier: 'off', + }, + }, + ], }; diff --git a/addon/components/basic-dialog.js b/addon/components/basic-dialog.js index 27c338a6..d02c4232 100644 --- a/addon/components/basic-dialog.js +++ b/addon/components/basic-dialog.js @@ -36,7 +36,7 @@ export default class BasicDialog extends Component { 'attachmentClass', 'containerClass', 'containerClassNames.{[],join}', - 'targetAttachmentClass' + 'targetAttachmentClass', ) get containerClassNamesString() { let classNames = @@ -72,7 +72,7 @@ export default class BasicDialog extends Component { 'targetAttachmentClass', 'variantWrapperClass', 'wrapperClass', - 'wrapperClassNames.{[],join}' + 'wrapperClassNames.{[],join}', ) get wrapperClassNamesString() { let classNames = @@ -100,7 +100,7 @@ export default class BasicDialog extends Component { // Convert tether-styled values like 'middle right' to 'right' targetAttachment = targetAttachment.split(' ').slice(-1)[0]; return `ember-modal-dialog-target-attachment-${dasherize( - targetAttachment + targetAttachment, )} emd-target-attachment-${dasherize(targetAttachment)}`; } diff --git a/addon/components/liquid-tether-dialog.js b/addon/components/liquid-tether-dialog.js index 502abe84..328ac7fb 100644 --- a/addon/components/liquid-tether-dialog.js +++ b/addon/components/liquid-tether-dialog.js @@ -13,7 +13,7 @@ export default class LiquidTetherDialog extends BasicDialog { // Convert tether-styled values like 'middle right' to 'right' targetAttachment = targetAttachment.split(' ').slice(-1)[0]; return `ember-modal-dialog-target-attachment-${dasherize( - targetAttachment + targetAttachment, )} emd-target-attachment-${dasherize(targetAttachment)}`; } diff --git a/addon/components/modal-dialog/index.js b/addon/components/modal-dialog/index.js index 85532133..d9f20e7d 100644 --- a/addon/components/modal-dialog/index.js +++ b/addon/components/modal-dialog/index.js @@ -115,10 +115,10 @@ export default class ModalDialog extends Component { if (VALID_OVERLAY_POSITIONS.indexOf(overlayPosition) === -1) { warn( `overlayPosition value '${overlayPosition}' is not valid (valid values [${VALID_OVERLAY_POSITIONS.join( - ', ' + ', ', )}])`, false, - { id: 'ember-modal-dialog.validate-overlay-position' } + { id: 'ember-modal-dialog.validate-overlay-position' }, ); } } @@ -128,10 +128,10 @@ export default class ModalDialog extends Component { if (DEBUG && VALID_OVERLAY_POSITIONS.indexOf(result) === -1) { warn( `overlayPosition value '${result}' is not valid (valid values [${VALID_OVERLAY_POSITIONS.join( - ', ' + ', ', )}])`, false, - { id: 'ember-modal-dialog.validate-overlay-position' } + { id: 'ember-modal-dialog.validate-overlay-position' }, ); } return result; @@ -140,7 +140,7 @@ export default class ModalDialog extends Component { ensureEmberTetherPresent() { if (!this.modalService.hasEmberTether) { throw new Error( - 'Please install ember-tether in order to pass a tetherTarget to modal-dialog' + 'Please install ember-tether in order to pass a tetherTarget to modal-dialog', ); } } @@ -154,7 +154,7 @@ export default class ModalDialog extends Component { assert( 'onClose handler must be a function', - typeOf(onClose) === 'function' + typeOf(onClose) === 'function', ); onClose(); @@ -172,7 +172,7 @@ export default class ModalDialog extends Component { assert( 'onClickOverlay handler must be a function', - typeOf(onClickOverlay) === 'function' + typeOf(onClickOverlay) === 'function', ); onClickOverlay(); diff --git a/addon/components/overlay/index.hbs b/addon/components/overlay/index.hbs index 4ff05c9f..a825d8b7 100644 --- a/addon/components/overlay/index.hbs +++ b/addon/components/overlay/index.hbs @@ -1,8 +1,8 @@
modal-dialog
componentmodal-dialog
+ component
+
- If liquid-wormhole
- is installed and `animatable=true` is passed, the component will
- automatically become animatable using liquid-fire
.
+ If
+ liquid-wormhole
+ is installed and `animatable=true` is passed, the component
+ will automatically become animatable using
+ liquid-fire
.
Basic
- +With Translucent Overlay
- +Without Overlay
- +Without Overlay - Click Outside to Close
- +Without Overlay Another One - Click Outside to Close
- +Custom Styles
- +Via Subclass
- +- The modal-dialog component can behave in four different ways. + The modal-dialog component can behave in four different + ways.
modal-dialog
componentmodal-dialog
+ component
+
- This component uses ember-wormhole
to relocate the dialog in the
- DOM to better sit in a layer above the rest of your document.
+ This component uses
+ ember-wormhole
+ to relocate the dialog in the DOM to better sit in a layer
+ above the rest of your document.
- It requires no additional dependencies because ember-wormhole
is included with
- this addon. If liquid-wormhole
is installed, this component will detect it,
- and will become animatable=true
is passed.
+ It requires no additional dependencies because
+ ember-wormhole
+ is included with this addon. If
+ liquid-wormhole
+ is installed, this component will detect it, and will become
+ animatable=true
+ is passed.
Basic
-With Translucent Overlay
-Translucent Overlay with Callback
-Without Overlay
-With Translucent Overlay as Sibling
-Custom Styles
-Target - Selector: "#alignModalDialogToMe"
Target Attachment: {{this.exampleTargetAttachment}}
Attachment: {{this.exampleAttachment}}
-Target Attachment: {{this.exampleTargetAttachment}}
Attachment: {{this.exampleAttachment}}
-Via Subclass
-Via Subclass
-In Place
-In Place
-Centered on element.
modal-dialog
componentmodal-dialog
+ component
+
- These examples specify a tetherTarget
property, as well as demonstrate
- animation via liquid-fire
. If requires that you install
- liquid-tether
- into your app. Once installed and `animatable=true` is passed, the component will
- automatically become animatable using liquid-fire
.
+ These examples specify a
+ tetherTarget
+ property, as well as demonstrate animation via
+ liquid-fire
. If requires that you install
+ liquid-tether
+ into your app. Once installed and `animatable=true` is passed,
+ the component will automatically become animatable using
+ liquid-fire
.
- If a tetherTarget
is specified and neither ember-tether
- nor liquid-tether
is installed, an error will be raised.
+ If a
+ tetherTarget
+ is specified and neither
+ ember-tether
+ nor
+ liquid-tether
+ is installed, an error will be raised.
Custom Styles
-Target - Selector: "#alignTetherDialogToMe"
Target Attachment: {{this.exampleTargetAttachment}}
Attachment: {{this.exampleAttachment}}
-Target - Element #bwtde
Target Attachment: {{this.exampleTargetAttachment}}
Attachment: {{this.exampleAttachment}}
-Centered on element.
If you open 1, then 2 (different stacks), #1 should animate closed, and #2 should animate open.
+ +If you open 1, then 2 (different stacks), #1 should animate + closed, and #2 should animate open.
If you open 2, then 3, the #2 should animate to #3"s spot.
- {{#let (get-code-snippet "separate-stacks-modal-dialog-liquid-tether.hbs") as |snippet|}} -I am modal 1.
I am modal 2.
I am modal 3.
modal-dialog
componentmodal-dialog
+ component
+
- These examples specify a tetherTarget
property, which makes the
- component attempt to use ember-tether
to be positioned relative
- to the tetherTarget
element and sit in a layer above the rest of the
- document. It requires that you install
- ember-tether
+ These examples specify a
+ tetherTarget
+ property, which makes the component attempt to use
+ ember-tether
+ to be positioned relative to the
+ tetherTarget
+ element and sit in a layer above the rest of the document. It
+ requires that you install
+ ember-tether
into your app.
- If liquid-tether
- is installed and `animated=true` is passed, this component will become
+ If
+ liquid-tether
+ is installed and `animated=true` is passed, this component
+ will become
- If a tetherTarget
is specified and neither ember-tether
- nor liquid-tether
is installed, an error will be raised.
+ If a
+ tetherTarget
+ is specified and neither
+ ember-tether
+ nor
+ liquid-tether
+ is installed, an error will be raised.
Custom Styles
-Target - Selector: "#alignTetherDialogToMe"
Target Attachment: {{this.exampleTargetAttachment}}
Attachment: {{this.exampleAttachment}}
-Target - Element #bwtde
Target Attachment: {{this.exampleTargetAttachment}}
Attachment: {{this.exampleAttachment}}
-Centered on element.
Basic
+With Translucent Overlay
+Without Overlay
+Without Overlay - Click Outside to Close
+Custom Styles
+Via Subclass
+Basic
+With Translucent Overlay
+Translucent Overlay with Callback
+Without Overlay
+With Translucent Overlay as Sibling
+Custom Styles
+Target - Selector: "#alignModalDialogToMe"
+Target Attachment: {{this.exampleTargetAttachment}}
+Attachment: {{this.exampleAttachment}}
+Target - Element #bwmde
+Target Attachment: {{this.exampleTargetAttachment}}
+Attachment: {{this.exampleAttachment}}
+Via Subclass
+Via Subclass
+Via Subclass
+In Place
+In Place
+Centered on element.
+Custom Styles
+Target - Selector: "#alignTetherDialogToMe"
+Target Attachment: {{this.exampleTargetAttachment}}
+Attachment: {{this.exampleAttachment}}
+Target - Element #bwtde
+Target Attachment: {{this.exampleTargetAttachment}}
+Attachment: {{this.exampleAttachment}}
+Centered on element.
+I am modal 1.
+I am modal 2.
+I am modal 3.
+Custom Styles
+Target - Selector: "#alignTetherDialogToMe"
+Target Attachment: {{this.exampleTargetAttachment}}
+Attachment: {{this.exampleAttachment}}
+Target - Element #bwtde
+Target Attachment: {{this.exampleTargetAttachment}}
+Attachment: {{this.exampleAttachment}}
+Centered on element.
+