From 6eef38156add316ff31ae5652f5b062320c81ba2 Mon Sep 17 00:00:00 2001 From: victor Date: Fri, 15 Nov 2024 12:32:28 +0100 Subject: [PATCH 01/15] Add Stimulus Radio Uncheck component with initial implementation --- components/radio-uncheck/CHANGELOG.md | 7 +++ components/radio-uncheck/README.md | 17 ++++++ components/radio-uncheck/index.html | 66 +++++++++++++++++++++ components/radio-uncheck/package.json | 36 +++++++++++ components/radio-uncheck/spec/index.test.ts | 50 ++++++++++++++++ components/radio-uncheck/src/index.ts | 17 ++++++ components/radio-uncheck/tailwind.config.ts | 4 ++ components/radio-uncheck/tsconfig.json | 3 + components/radio-uncheck/vite.config.mts | 23 +++++++ 9 files changed, 223 insertions(+) create mode 100644 components/radio-uncheck/CHANGELOG.md create mode 100644 components/radio-uncheck/README.md create mode 100644 components/radio-uncheck/index.html create mode 100644 components/radio-uncheck/package.json create mode 100644 components/radio-uncheck/spec/index.test.ts create mode 100644 components/radio-uncheck/src/index.ts create mode 100644 components/radio-uncheck/tailwind.config.ts create mode 100644 components/radio-uncheck/tsconfig.json create mode 100644 components/radio-uncheck/vite.config.mts diff --git a/components/radio-uncheck/CHANGELOG.md b/components/radio-uncheck/CHANGELOG.md new file mode 100644 index 0000000..c866093 --- /dev/null +++ b/components/radio-uncheck/CHANGELOG.md @@ -0,0 +1,7 @@ +# Changelog + +## [1.0.0] - 2024-11-10 + +### Added + +- Adding controller diff --git a/components/radio-uncheck/README.md b/components/radio-uncheck/README.md new file mode 100644 index 0000000..eb52cc2 --- /dev/null +++ b/components/radio-uncheck/README.md @@ -0,0 +1,17 @@ +# Stimulus Radio Uncheck + +## Getting started + +A Stimulus controller for unchecking all radio buttons in a group. + +## 📚 Documentation + +See [stimulus-radio-uncheck documentation](https://www.stimulus-components.com/docs/stimulus-radio-uncheck/). + +## 👷‍♂️ Contributing + +Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome. + +## 📝 License + +This project is released under the [MIT](http://opensource.org/licenses/MIT) license. diff --git a/components/radio-uncheck/index.html b/components/radio-uncheck/index.html new file mode 100644 index 0000000..b1a2c97 --- /dev/null +++ b/components/radio-uncheck/index.html @@ -0,0 +1,66 @@ + + + + + + + Stimulus Radio Uncheck All + + + + + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + diff --git a/components/radio-uncheck/package.json b/components/radio-uncheck/package.json new file mode 100644 index 0000000..5d0432c --- /dev/null +++ b/components/radio-uncheck/package.json @@ -0,0 +1,36 @@ +{ + "name": "@stimulus-components/radio-uncheck", + "version": "6.0.0", + "description": "A Stimulus controller to uncheck all radio buttons in a group.", + "keywords": [ + "stimulus", + "stimulusjs", + "stimulus controller", + "radio", + "radio-uncheck" + ], + "repository": "git@github.com:stimulus-components/stimulus-components.git", + "bugs": { + "url": "https://github.com/stimulus-components/stimulus-components/issues" + }, + "author": "Guillaume Briday ", + "license": "MIT", + "homepage": "https://github.com/stimulus-components/stimulus-components", + "private": false, + "publishConfig": { + "access": "public" + }, + "main": "dist/stimulus-radio-uncheck.umd.js", + "module": "dist/stimulus-radio-uncheck.mjs", + "types": "dist/types/index.d.ts", + "scripts": { + "types": "tsc --noEmit false --declaration true --emitDeclarationOnly true --outDir dist/types", + "dev": "vite", + "build": "vite build && pnpm run types", + "version": "pnpm run build", + "np": "np --no-2fa" + }, + "peerDependencies": { + "@hotwired/stimulus": "^3" + } +} diff --git a/components/radio-uncheck/spec/index.test.ts b/components/radio-uncheck/spec/index.test.ts new file mode 100644 index 0000000..9345dfc --- /dev/null +++ b/components/radio-uncheck/spec/index.test.ts @@ -0,0 +1,50 @@ +/** + * @jest-environment jsdom + */ + +import { beforeEach, describe, it, expect } from "vitest" +import { Application } from "@hotwired/stimulus" +import RadioUncheck from "../src/index" + +const startStimulus = (): void => { + const application = Application.start() + application.register("radio-uncheck", RadioUncheck) +} + +beforeEach((): void => { + startStimulus() + + document.body.innerHTML = ` +
+ + + + + + + + + + +
+ ` +}) + +describe("#uncheck", () => { + it("should uncheck all radio buttons", (): void => { + const uncheckButton: HTMLButtonElement = document.querySelector("[data-action='radio-uncheck#uncheck']") + const radios: HTMLInputElement[] = [ + document.querySelector("#team-1"), + document.querySelector("#team-2"), + document.querySelector("#team-3"), + ] + + radios.forEach((radioToCheck) => { + radioToCheck.checked = true + uncheckButton.click() + radios.forEach((radio) => { + expect(radio.checked).toBe(false) + }) + }) + }) +}) diff --git a/components/radio-uncheck/src/index.ts b/components/radio-uncheck/src/index.ts new file mode 100644 index 0000000..8ff9c67 --- /dev/null +++ b/components/radio-uncheck/src/index.ts @@ -0,0 +1,17 @@ +import { Controller } from "@hotwired/stimulus" + +export default class RadioUncheckApp extends Controller { + declare hasRadioTarget: boolean + declare radioTargets: HTMLInputElement[] + + static targets = ["radio"] + + uncheck(): void { + if (!this.hasRadioTarget) return + + this.radioTargets.forEach((radio) => { + radio.checked = false + radio.dispatchEvent(new Event("change", { bubbles: true })) + }) + } +} diff --git a/components/radio-uncheck/tailwind.config.ts b/components/radio-uncheck/tailwind.config.ts new file mode 100644 index 0000000..0155e63 --- /dev/null +++ b/components/radio-uncheck/tailwind.config.ts @@ -0,0 +1,4 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ["./index.html", "./src/**/*.{js,ts}"], +} diff --git a/components/radio-uncheck/tsconfig.json b/components/radio-uncheck/tsconfig.json new file mode 100644 index 0000000..4082f16 --- /dev/null +++ b/components/radio-uncheck/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} diff --git a/components/radio-uncheck/vite.config.mts b/components/radio-uncheck/vite.config.mts new file mode 100644 index 0000000..5cf45cd --- /dev/null +++ b/components/radio-uncheck/vite.config.mts @@ -0,0 +1,23 @@ +import { resolve } from "path" +import { defineConfig } from "vite" + +export default defineConfig({ + esbuild: { + minifyIdentifiers: false, + }, + build: { + lib: { + entry: resolve(__dirname, "src/index.ts"), + name: "StimulusRadioUncheck", + fileName: "stimulus-radio-uncheck", + }, + rollupOptions: { + external: ["@hotwired/stimulus"], + output: { + globals: { + "@hotwired/stimulus": "Stimulus", + }, + }, + }, + }, +}) From 9782dd3c880caa6377920056e7014732f89ed478 Mon Sep 17 00:00:00 2001 From: victor Date: Tue, 17 Dec 2024 21:16:25 +0100 Subject: [PATCH 02/15] Add Stimulus dependency for Radio Uncheck component in pnpm-lock.yaml --- pnpm-lock.yaml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 654e583..fe0c45a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -204,6 +204,12 @@ importers: specifier: ^3 version: 3.2.2 + components/radio-uncheck: + dependencies: + '@hotwired/stimulus': + specifier: ^3 + version: 3.2.2 + components/rails-nested-form: dependencies: '@hotwired/stimulus': From 600169d56ca6e3958e8a5403f612a4809edb6aed Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 11:44:42 +0100 Subject: [PATCH 03/15] Add radio-uncheck component to package.json --- docs/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/package.json b/docs/package.json index 0b18ebd..8a1b94e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -35,6 +35,7 @@ "@stimulus-components/password-visibility": "workspace:*", "@stimulus-components/popover": "workspace:*", "@stimulus-components/rails-nested-form": "workspace:*", + "@stimulus-components/radio-uncheck": "workspace:*", "@stimulus-components/read-more": "workspace:*", "@stimulus-components/remote-rails": "workspace:*", "@stimulus-components/reveal": "workspace:*", From f2a41c552ec037111a32168f5cdb9c7a3ac42c96 Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 11:44:59 +0100 Subject: [PATCH 04/15] Add RadioUncheck component for form functionality --- docs/components/content/Demo/RadioUncheck.vue | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 docs/components/content/Demo/RadioUncheck.vue diff --git a/docs/components/content/Demo/RadioUncheck.vue b/docs/components/content/Demo/RadioUncheck.vue new file mode 100644 index 0000000..2baa0a2 --- /dev/null +++ b/docs/components/content/Demo/RadioUncheck.vue @@ -0,0 +1,49 @@ + + + From 5b7f73fc9b529f7ef06dfda45bbd881b7254623c Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 11:45:13 +0100 Subject: [PATCH 05/15] Add documentation for Radio Uncheck Stimulus controller --- docs/content/docs/stimulus-radio-uncheck.md | 53 +++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 docs/content/docs/stimulus-radio-uncheck.md diff --git a/docs/content/docs/stimulus-radio-uncheck.md b/docs/content/docs/stimulus-radio-uncheck.md new file mode 100644 index 0000000..7de25fb --- /dev/null +++ b/docs/content/docs/stimulus-radio-uncheck.md @@ -0,0 +1,53 @@ +--- +title: Radio Uncheck +description: A Stimulus controller to uncheck radio buttons. +package: radio-uncheck +packagePath: "@stimulus-components/radio-uncheck" +isNew: true +--- + +## Installation + +:installation-block{:package="package" :packagePath="packagePath" controllerName="radio-uncheck"} + +## Examples + +:radio-uncheck + +## Usage + +::code-block{tabName="app/views/index.html"} + +```html +
+ + + + + + + + +
+``` + +:: + +## Extending Controller + +::extending-controller +::code-block{tabName="app/javascript/controllers/radio_uncheck_controller.js"} + +```js +import RadioUncheck from "@stimulus-components/radio-uncheck" + +export default class extends RadioUncheckController { + connect() { + super.connect() + console.log("Do what you want here.") + } +} +``` + +:: +:: From ce5e099e6960e073d75d29ce1610bc5cd31aaab6 Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 11:47:16 +0100 Subject: [PATCH 06/15] Register RadioUncheck component in Stimulus client --- docs/plugins/stimulus.client.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/plugins/stimulus.client.ts b/docs/plugins/stimulus.client.ts index ff040c1..d713c95 100644 --- a/docs/plugins/stimulus.client.ts +++ b/docs/plugins/stimulus.client.ts @@ -16,6 +16,7 @@ import Lightbox from "@stimulus-components/lightbox/src" import Notification from "@stimulus-components/notification/src" import PasswordVisibility from "@stimulus-components/password-visibility/src" import Popover from "@stimulus-components/popover/src" +import RadioUncheck from "@stimulus-components/radio-uncheck/src" import RailsNestedForm from "@stimulus-components/rails-nested-form/src" import ReadMore from "@stimulus-components/read-more/src" import RemoteRails from "@stimulus-components/remote-rails/src" @@ -47,6 +48,7 @@ export default defineNuxtPlugin(() => { application.register("notification", Notification) application.register("password-visibility", PasswordVisibility) application.register("popover", Popover) + application.register("radio-uncheck", RadioUncheck) application.register("read-more", ReadMore) application.register("remote", RemoteRails) application.register("reveal", Reveal) From 09720e6dfaca367d5a409ee24aa7dfce830c6588 Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 12:00:37 +0100 Subject: [PATCH 07/15] Bump version of radio-uncheck component to 1.0.0 --- components/radio-uncheck/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/radio-uncheck/package.json b/components/radio-uncheck/package.json index 5d0432c..e7593f5 100644 --- a/components/radio-uncheck/package.json +++ b/components/radio-uncheck/package.json @@ -1,6 +1,6 @@ { "name": "@stimulus-components/radio-uncheck", - "version": "6.0.0", + "version": "1.0.0", "description": "A Stimulus controller to uncheck all radio buttons in a group.", "keywords": [ "stimulus", From 8862dbc64220e10d9dd57c322a96104a7eea0bc3 Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 12:00:49 +0100 Subject: [PATCH 08/15] Fix data attribute alignment in RadioUncheck demo component --- docs/components/content/Demo/RadioUncheck.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/components/content/Demo/RadioUncheck.vue b/docs/components/content/Demo/RadioUncheck.vue index 2baa0a2..d4bb2f4 100644 --- a/docs/components/content/Demo/RadioUncheck.vue +++ b/docs/components/content/Demo/RadioUncheck.vue @@ -3,8 +3,8 @@
Date: Mon, 30 Dec 2024 12:00:57 +0100 Subject: [PATCH 09/15] Fix self-closing tags in Radio Uncheck documentation example --- docs/content/docs/stimulus-radio-uncheck.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/content/docs/stimulus-radio-uncheck.md b/docs/content/docs/stimulus-radio-uncheck.md index 7de25fb..0af4e3c 100644 --- a/docs/content/docs/stimulus-radio-uncheck.md +++ b/docs/content/docs/stimulus-radio-uncheck.md @@ -20,11 +20,11 @@ isNew: true ```html
- + - + - + From 70d99074c907dc15e3851b79008b1fb327e67376 Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 12:04:29 +0100 Subject: [PATCH 10/15] Update components/radio-uncheck/CHANGELOG.md --- components/radio-uncheck/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/radio-uncheck/CHANGELOG.md b/components/radio-uncheck/CHANGELOG.md index c866093..0cc5240 100644 --- a/components/radio-uncheck/CHANGELOG.md +++ b/components/radio-uncheck/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## [1.0.0] - 2024-11-10 +## [1.0.0] - 2024-12-30 ### Added From 9755d20ef749cb13849cd3a445f1813abcf85f8a Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 12:06:23 +0100 Subject: [PATCH 11/15] Update docs/content/docs/stimulus-radio-uncheck.md --- docs/content/docs/stimulus-radio-uncheck.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/docs/stimulus-radio-uncheck.md b/docs/content/docs/stimulus-radio-uncheck.md index 0af4e3c..3f47f3d 100644 --- a/docs/content/docs/stimulus-radio-uncheck.md +++ b/docs/content/docs/stimulus-radio-uncheck.md @@ -27,7 +27,7 @@ isNew: true - +
``` From 3b653fd647dd1dcd6a9ed6590bc71f443a57f4cf Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 12:07:25 +0100 Subject: [PATCH 12/15] Update docs/components/content/Demo/RadioUncheck.vue --- docs/components/content/Demo/RadioUncheck.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/content/Demo/RadioUncheck.vue b/docs/components/content/Demo/RadioUncheck.vue index d4bb2f4..c34afbe 100644 --- a/docs/components/content/Demo/RadioUncheck.vue +++ b/docs/components/content/Demo/RadioUncheck.vue @@ -7,7 +7,7 @@ data-radio-uncheck-target="radio" name="team" type="radio" - class="h-4 w-4 border-gray-300 text-orange-600 focus:ring-orange-600" + class="size-4 border-gray-300 text-orange-600 focus:ring-orange-600" />
From 22f4ed0d28fa1732b87e60dcecbcfcf019a0daba Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 12:08:52 +0100 Subject: [PATCH 13/15] Update docs/components/content/Demo/RadioUncheck.vue --- docs/components/content/Demo/RadioUncheck.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/content/Demo/RadioUncheck.vue b/docs/components/content/Demo/RadioUncheck.vue index c34afbe..396d90d 100644 --- a/docs/components/content/Demo/RadioUncheck.vue +++ b/docs/components/content/Demo/RadioUncheck.vue @@ -17,7 +17,7 @@ data-radio-uncheck-target="radio" name="team" type="radio" - class="h-4 w-4 border-gray-300 text-orange-600 focus:ring-orange-600" + class="size-4 border-gray-300 text-orange-600 focus:ring-orange-600" />
From 42d4fc5694a3bfaf9e3560e7ad096cf4950924af Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 12:08:57 +0100 Subject: [PATCH 14/15] Update docs/components/content/Demo/RadioUncheck.vue --- docs/components/content/Demo/RadioUncheck.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/content/Demo/RadioUncheck.vue b/docs/components/content/Demo/RadioUncheck.vue index 396d90d..9094829 100644 --- a/docs/components/content/Demo/RadioUncheck.vue +++ b/docs/components/content/Demo/RadioUncheck.vue @@ -27,7 +27,7 @@ data-radio-uncheck-target="radio" name="team" type="radio" - class="h-4 w-4 border-gray-300 text-orange-600 focus:ring-orange-600" + class="size-4 border-gray-300 text-orange-600 focus:ring-orange-600" />
From abd03fc8e71ba8595e318d112c3c11a41e28c477 Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 30 Dec 2024 12:12:09 +0100 Subject: [PATCH 15/15] Update docs/content/docs/stimulus-radio-uncheck.md --- docs/content/docs/stimulus-radio-uncheck.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/docs/stimulus-radio-uncheck.md b/docs/content/docs/stimulus-radio-uncheck.md index 3f47f3d..68a8005 100644 --- a/docs/content/docs/stimulus-radio-uncheck.md +++ b/docs/content/docs/stimulus-radio-uncheck.md @@ -1,6 +1,6 @@ --- title: Radio Uncheck -description: A Stimulus controller to uncheck radio buttons. +description: A Stimulus controller for unchecking all radio buttons in a group. package: radio-uncheck packagePath: "@stimulus-components/radio-uncheck" isNew: true