Merge pull request #10 from jmsche/controller-value

Use a Stimulus controller value for success content
stimulus-components · Jun 1, 2023 · 4f2f796 · 4f2f796
2 parents 994f270 + 03d9c04
commit 4f2f796
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Allow to use HTML for success content.
+- Use a Stimulus controller value for success content.
 
 ## [3.3.0] - 2022-12-23
 

diff --git a/index.html b/index.html
@@ -137,7 +137,7 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
       <section class="mt-16">
         <div
           data-controller="clipboard"
-          data-clipboard-success-content="<strong>Copied!</strong>"
+          data-clipboard-success-content-value="<strong>Copied!</strong>"
           class="mt-1 flex rounded-md shadow-sm"
         >
           <input

diff --git a/src/index.ts b/src/index.ts
@@ -4,6 +4,7 @@ export default class extends Controller {
   hasButtonTarget: boolean
   originalContent: string
   successDurationValue: number
+  successContentValue: string
   timeout: number
   buttonTarget: HTMLElement
   sourceTarget: HTMLInputElement
@@ -13,7 +14,11 @@ export default class extends Controller {
     successDuration: {
       type: Number,
       default: 2000
-    }
+    },
+    successContent: {
+      type: String,
+      default: '',
+    },
   }
 
   connect (): void {
@@ -37,7 +42,7 @@ export default class extends Controller {
       clearTimeout(this.timeout)
     }
 
-    this.buttonTarget.innerHTML = this.data.get('successContent')
+    this.buttonTarget.innerHTML = this.successContentValue
 
     this.timeout = setTimeout(() => {
       this.buttonTarget.innerHTML = this.originalContent