diff --git a/biome.json b/biome.json index fa28e19135e..f3ea766f657 100644 --- a/biome.json +++ b/biome.json @@ -21,7 +21,8 @@ "rules": { "suspicious": { "noExplicitAny": "off", - "noEmptyBlockStatements": "off" + "noEmptyBlockStatements": "off", + "noPrototypeBuiltins": "off" }, "complexity": { "noStaticOnlyClass": "off", diff --git a/src/Toolkit/kits/shadcn/alert-dialog/EXAMPLES.md b/src/Toolkit/kits/shadcn/alert-dialog/EXAMPLES.md index 68ac76447fb..390a266e659 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/EXAMPLES.md +++ b/src/Toolkit/kits/shadcn/alert-dialog/EXAMPLES.md @@ -22,26 +22,3 @@ ``` - -## Opened by default - -```twig {"preview":true,"height":"500px"} - - - Open - - - - Are you absolutely sure? - - This action cannot be undone. This will permanently delete your account - and remove your data from our servers. - - - - Cancel - Continue - - - -``` diff --git a/src/Toolkit/kits/shadcn/alert-dialog/assets/controllers/alert_dialog_controller.js b/src/Toolkit/kits/shadcn/alert-dialog/assets/controllers/alert_dialog_controller.js index 5624ec54c13..5a673eb2530 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/assets/controllers/alert_dialog_controller.js +++ b/src/Toolkit/kits/shadcn/alert-dialog/assets/controllers/alert_dialog_controller.js @@ -1,27 +1,34 @@ import { Controller } from '@hotwired/stimulus'; -import { enter, leave } from 'el-transition'; export default class extends Controller { - static targets = ['trigger', 'overlay', 'dialog', 'content']; + static targets = ['trigger', 'dialog']; async open() { this.dialogTarget.showModal(); - await Promise.all([enter(this.overlayTarget), enter(this.contentTarget)]); - if (this.hasTriggerTarget) { - this.triggerTarget.setAttribute('aria-expanded', 'true'); + if (this.dialogTarget.getAnimations().length > 0) { + this.dialogTarget.addEventListener('transitionend', () => { + this.triggerTarget.setAttribute('aria-expanded', 'true'); + }) + } else { + this.triggerTarget.setAttribute('aria-expanded', 'true'); + } } } async close() { - await Promise.all([leave(this.overlayTarget), leave(this.contentTarget)]); - this.dialogTarget.close(); if (this.hasTriggerTarget) { - this.triggerTarget.setAttribute('aria-expanded', 'false'); + if (this.dialogTarget.getAnimations().length > 0) { + this.dialogTarget.addEventListener('transitionend', () => { + this.triggerTarget.setAttribute('aria-expanded', 'false'); + }) + } else { + this.triggerTarget.setAttribute('aria-expanded', 'false'); + } } } } diff --git a/src/Toolkit/kits/shadcn/alert-dialog/manifest.json b/src/Toolkit/kits/shadcn/alert-dialog/manifest.json index f710c361a90..bffc95ea4a6 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/manifest.json +++ b/src/Toolkit/kits/shadcn/alert-dialog/manifest.json @@ -9,8 +9,6 @@ }, "dependencies": { "recipe": ["button"], - "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra"], - "npm": ["el-transition"], - "importmap": ["el-transition"] + "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra"] } } diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig index d67a5d6460f..ccbd42136e4 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig +++ b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig @@ -1,8 +1,7 @@ -{# @prop open boolean Open (or not) the AlertDialog at initial rendering, default to `false` #} +{# @prop id string Unique suffix identifier for generating AlertDialog internal IDs #} {# @block content The default block #} -{%- props open = false, id -%} +{%- props id -%} -{%- set _alert_dialog_open = open %} {%- set _alert_dialog_id = 'alert-dialog-' ~ id -%} {%- set _alert_dialog_title_id = _alert_dialog_id ~ '-title' -%} {%- set _alert_dialog_description_id = _alert_dialog_id ~ '-description' -%} diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig index 3fe2fb21d18..50e89bd421f 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig +++ b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig @@ -1,38 +1,10 @@ {# @block content The default block #} -
- -
-
- {%- block content %}{% endblock -%} -
-
+ {%- block content %}{% endblock -%} diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig index 0418bcad2ae..b316be43bc4 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig +++ b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig @@ -3,6 +3,6 @@ 'data-action': 'click->alert-dialog#open', 'data-alert-dialog-target': 'trigger', 'aria-haspopup': 'dialog', - 'aria-expanded': _alert_dialog_open ? 'true' : 'false', + 'aria-expanded': 'false', } -%} {%- block content %}{% endblock -%} diff --git a/src/Toolkit/kits/shadcn/dialog/EXAMPLES.md b/src/Toolkit/kits/shadcn/dialog/EXAMPLES.md new file mode 100644 index 00000000000..e9a8a15ce83 --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/EXAMPLES.md @@ -0,0 +1,85 @@ +# Examples + +## Default + +```twig {"preview":true,"height":"500px"} + + + Open + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete your account + and remove your data from our servers. + + + + +``` + +## Custom close button + +```twig {"preview":true,"height":"500px"} + + + Share + + + + Share link + + Anyone who has this link will be able to view this. + + +
+
+ Link + +
+
+ + + + Close + + + + + +``` + +## With form + +```twig {"preview":true,"height":"500px"} + + + Open Dialog + + + + Edit profile + + Make changes to your profile here. Click save when you're done. + + +
+
+ Name + +
+
+ Username + +
+
+ + + Cancel + + Save changes + + + +``` diff --git a/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js b/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js new file mode 100644 index 00000000000..1c740895c99 --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js @@ -0,0 +1,40 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + + static targets = ['trigger', 'dialog']; + + open() { + this.dialogTarget.showModal(); + + if (this.hasTriggerTarget) { + if (this.dialogTarget.getAnimations().length > 0) { + this.dialogTarget.addEventListener('transitionend', () => { + this.triggerTarget.setAttribute('aria-expanded', 'true'); + }) + } else { + this.triggerTarget.setAttribute('aria-expanded', 'true'); + } + } + } + + closeOnClickOutside({ target }) { + if (target === this.dialogTarget) { + this.close() + } + } + + close() { + this.dialogTarget.close(); + + if (this.hasTriggerTarget) { + if (this.dialogTarget.getAnimations().length > 0) { + this.dialogTarget.addEventListener('transitionend', () => { + this.triggerTarget.setAttribute('aria-expanded', 'false'); + }) + } else { + this.triggerTarget.setAttribute('aria-expanded', 'false'); + } + } + } +} diff --git a/src/Toolkit/kits/shadcn/dialog/manifest.json b/src/Toolkit/kits/shadcn/dialog/manifest.json new file mode 100644 index 00000000000..ca9fed15540 --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/manifest.json @@ -0,0 +1,18 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Dialog", + "description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.", + "copy-files": { + "assets/": "assets/", + "templates/": "templates/" + }, + "dependencies": { + "composer": [ + "symfony/ux-icons", + "twig/extra-bundle", + "twig/html-extra:^3.12.0", + "tales-from-a-dev/twig-tailwind-extra" + ] + } +} diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog.html.twig new file mode 100644 index 00000000000..ea74d7fefd4 --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog.html.twig @@ -0,0 +1,15 @@ +{# @prop open boolean Open (or not) the Dialog at initial rendering, default to `false` #} +{# @prop id string Unique suffix identifier for generating Dialog internal IDs #} +{# @block content The default block #} +{%- props open = false, id -%} + +{%- set _dialog_id = 'dialog-' ~ id -%} +{%- set _dialog_title_id = _dialog_id ~ '-title' -%} +{%- set _dialog_description_id = _dialog_id ~ '-description' -%} +
+ {% block content %}{% endblock %} +
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig new file mode 100644 index 00000000000..d1a4f560f3b --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig @@ -0,0 +1,5 @@ +{# @block content The default block #} +{%- set close_attrs = { + 'data-action': 'click->dialog#close', +} -%} +{%- block content %}{% endblock -%} diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Content.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Content.html.twig new file mode 100644 index 00000000000..c3e3688d223 --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Content.html.twig @@ -0,0 +1,18 @@ +{# @prop showCloseButton boolean Whether the close button is shown, default to `true` #} +{# @block content The default block #} +{%- props showCloseButton = true -%} + + + {%- block content %}{% endblock -%} + {% if showCloseButton %} + + {% endif %} + diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Description.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Description.html.twig new file mode 100644 index 00000000000..684498ed732 --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Description.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +

+ {%- block content %}{% endblock -%} +

diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Footer.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Footer.html.twig new file mode 100644 index 00000000000..229c51772ad --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Footer.html.twig @@ -0,0 +1,7 @@ +{# @block content The default block #} + diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Header.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Header.html.twig new file mode 100644 index 00000000000..7bf9e31016c --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Header.html.twig @@ -0,0 +1,7 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Title.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Title.html.twig new file mode 100644 index 00000000000..8cd87623819 --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Title.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +

+ {%- block content %}{% endblock -%} +

diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Trigger.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Trigger.html.twig new file mode 100644 index 00000000000..b80a22a5003 --- /dev/null +++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Trigger.html.twig @@ -0,0 +1,7 @@ +{# @block content The default block #} +{%- set trigger_attrs = { + 'data-action': 'click->dialog#open', + 'data-dialog-target': 'trigger', + 'aria-haspopup': 'dialog', +} -%} +{%- block content %}{% endblock -%} diff --git a/src/Toolkit/kits/shadcn/label/EXAMPLES.md b/src/Toolkit/kits/shadcn/label/EXAMPLES.md index 8fd5b0fa634..29adac919c2 100644 --- a/src/Toolkit/kits/shadcn/label/EXAMPLES.md +++ b/src/Toolkit/kits/shadcn/label/EXAMPLES.md @@ -22,7 +22,7 @@ ```twig {"preview":true}
- Email + Email
``` diff --git a/src/Toolkit/kits/shadcn/label/templates/components/Label.html.twig b/src/Toolkit/kits/shadcn/label/templates/components/Label.html.twig index 80df99b10b7..ab198dbf08f 100644 --- a/src/Toolkit/kits/shadcn/label/templates/components/Label.html.twig +++ b/src/Toolkit/kits/shadcn/label/templates/components/Label.html.twig @@ -1,6 +1,6 @@ {# @block content The default block #}