Merge branch 'develop'

forxer · Oct 15, 2024 · d939d25 · d939d25
2 parents 8f8d322 + 67940c2
commit d939d25
Show file tree

Hide file tree

Showing 18 changed files with 357 additions and 202 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,13 @@
 CHANGELOG
 =========
 
+0.22.0 (2024-10-15)
+-------------------
+
+- Added `<x-btn-copy />` action button component
+- The shared button code has been put into Blade partials
+
+
 0.21.0 (2024-10-14)
 -------------------
 

diff --git a/config/blade-ui-kit-bootstrap.php b/config/blade-ui-kit-bootstrap.php
@@ -34,6 +34,7 @@
         'btn-archive' => Actions\Archive::class,
         'btn-archives' => Actions\Archives::class,
         'btn-cancel' => Actions\Cancel::class,
+        'btn-copy' => Actions\Copy::class,
         'btn-create' => Actions\Create::class,
         'btn-delete' => Actions\Delete::class,
         'btn-destroy' => Actions\Destroy::class,

diff --git a/docs/buttons/action-buttons.md b/docs/buttons/action-buttons.md
@@ -37,6 +37,7 @@ Action buttons extends either [Form button](./form-button.md), the [Link button]
     - [Email button](#email-button)
     - [Phone button](#phone-button)
     - [Website button](#website-button)
+    - [Copy button](#copy-button)
 
 Attributes
 ----------
@@ -800,7 +801,7 @@ Behind the scenes, the "Website button" component extends the [Link button](./li
 Available attributes: [Text](./buttons.md#text), [Hide text](./buttons.md#hide-text), [Start and end content](./buttons.md#start-and-end-content), [Icons](./buttons.md#icons), [Variant](./buttons.md#variant), [Outline and no-outline](./buttons.md#outline-and-no-outline), [Sizes](./buttons.md#sizes), [Title](./buttons.md#title), [Confirm](./buttons.md#confirm), [Confirm Variant](./buttons.md#confirm-variant),  [Disabled](./buttons.md#disabled), [Confirm ID](./simple-button.md#confirm-id).
 
 ```blade
-<x-website url="http://example.com" />
+<x-btn-website url="http://example.com" />
 ```
 
 This will output the following HTML:
@@ -809,4 +810,54 @@ This will output the following HTML:
 <a href="http://example.com" role="button" class="btn btn-info" data-bs-toggle="tooltip" title="See website example.com">
     See website
 </a>
-```
+```
+
+### Copy button
+
+A simple button to copy a string or the content of another element to the clipboard.
+
+**Warning!** This button requires access to the [clipboard.js](https://clipboardjs.com/) package; this must be installed in your application and instantiated like this:
+
+```js
+import ClipboardJS from 'clipboard'
+window.ClipboardJS = new ClipboardJS('.btn-clipboard')
+```
+
+**Warning!** We are phasing out support for Bootstrap 4, this button may not work properly with this version.
+
+This button has two additional attributes: `target` and `string`. Note that for this, and unlike most attributes, these attributes will be automatically escaped by the component.
+
+Behind the scenes, the "Copy button" component extends the [Simple button](./simple-button.md) component with the following default properties:
+- Text: "Copy"
+- Variant: `secondary`
+- Confirm Variant: `secondary`
+
+Available attributes: [Text](./buttons.md#text), [Hide text](./buttons.md#hide-text), [Start and end content](./buttons.md#start-and-end-content), [Icons](./buttons.md#icons), [Variant](./buttons.md#variant), [Outline and no-outline](./buttons.md#outline-and-no-outline), [Sizes](./buttons.md#sizes), [Title](./buttons.md#title), [Confirm](./buttons.md#confirm), [Confirm Variant](./buttons.md#confirm-variant),  [Disabled](./buttons.md#disabled), [Confirm ID](./simple-button.md#confirm-id), [Type](./simple-button.md#type), [Form ID](./simple-button.md#form-id)
+
+```blade
+<x-btn-copy string="string to copy" />
+```
+
+This will output the following HTML:
+
+```html
+<button class="btn btn-secondary btn-clipboard" type="button" data-clipboard-text="string to copy" data-bs-toggle="tooltip" title="Copy string to copy">
+    Copy
+</button>
+```
+
+You can target the content of a given element:
+
+```blade
+<input type="text" value="string to copy" id="element">
+<x-btn-copy target="#element" />
+```
+
+This will output the following HTML:
+
+```html
+<input type="text" value="string to copy" id="element">
+<button class="btn btn-secondary btn-clipboard" type="button" data-clipboard-target="#element" data-bs-toggle="tooltip" title="Copy">
+    Copy
+</button>
+```
diff --git a/lang/en/clipboard.php b/lang/en/clipboard.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'success' => 'Copied',
+    'error' => 'Press Ctrl+C to copy',
+];
diff --git a/lang/fr/clipboard.php b/lang/fr/clipboard.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'success' => 'Copié',
+    'error' => 'Appuyez sur Ctrl+C pour copier',
+];
diff --git a/resources/views/bootstrap-4/components/buttons/actions/copy.blade.php b/resources/views/bootstrap-4/components/buttons/actions/copy.blade.php
@@ -0,0 +1,58 @@
+<button
+    {{ $attributes->class([
+        'btn btn-'.$variant.($size !== null ? ' btn-'.$size : ''),
+        'btn-clipboard' => !$disabled,
+    ]) }}
+    type="{{ $type }}"
+    @if ($formId !== null)
+        form="{!! $formId !!}"
+    @endif
+    @disabled($disabled)
+    @if ($target !== null)
+        data-clipboard-target="{{ $target }}"
+    @elseif ($string !== null)
+        data-clipboard-text="{{ $string }}"
+    @endif
+    @include('blade-ui-kit-bootstrap::bootstrap-4.components.buttons.partials.attributes')
+>
+@include('blade-ui-kit-bootstrap::bootstrap-4.components.buttons.partials.content')
+</button>
+
+@push('blade-ui-kit-bs-scripts')
+    @once
+        <script>
+            window.ClipboardJS.on('success', function(e) {
+                let triggerButton = e.trigger;
+
+                let dataBsOriginalTitle = triggerButton.getAttribute("data-original-title");
+
+                triggerButton.setAttribute("data-original-title", "{{ trans('blade-ui-kit-bootstrap::clipboard.success') }}");
+
+                let bsTooltip = $(triggerButton).tooltip();
+                bsTooltip.tooltip('show');
+
+                if (dataBsOriginalTitle !== null) {
+                    triggerButton.setAttribute("data-original-title", dataBsOriginalTitle);
+                }
+
+                e.clearSelection();
+            });
+            window.ClipboardJS.on('error', function(e) {
+                let triggerButton = e.trigger;
+
+                let dataBsOriginalTitle = triggerButton.getAttribute("data-original-title");
+
+                triggerButton.setAttribute("data-original-title", "{{ trans('blade-ui-kit-bootstrap::clipboard.error') }}");
+
+                let bsTooltip = $(triggerButton).tooltip();
+                bsTooltip.tooltip('show');
+
+                if (dataBsOriginalTitle !== null) {
+                    triggerButton.setAttribute("data-original-title", dataBsOriginalTitle);
+                }
+
+                e.clearSelection();
+            });
+        </script>
+    @endonce
+@endpush
diff --git a/resources/views/bootstrap-4/components/buttons/form-button.blade.php b/resources/views/bootstrap-4/components/buttons/form-button.blade.php
@@ -2,42 +2,15 @@
     {{ $attributes->merge(['class' => 'btn btn-'.$variant.($size !== null ? ' btn-'.$size : '')]) }}
     type="{{ $type }}"
     form="{!! $formId !!}"
-    @if ($title !== null)
-        data-toggle="tooltip"
-        title="{!! $title !!}"
-    @endif
-    @if ($confirm !== null)
-        data-buk-confirm="{!! $confirm !!}"
-        data-buk-confirm-modal="confirm-modal-{!! $confirmId !!}"
-    @endif
+    @include('blade-ui-kit-bootstrap::bootstrap-4.components.buttons.partials.attributes')
     @disabled($disabled)
 >
-    @if ($startContent !== null)
-        {!! $startContent !!}
-    @endif
-    @if ($slot->isEmpty())
-        @if ($hideText)
-            <span class="sr-only">
-                {!! $text !!}
-            </span>
-        @else
-            {!! $text !!}
-        @endif
-    @else
-        {!! $slot !!}
-    @endif
-    @if ($endContent !== null)
-        {!! $endContent !!}
-    @endif
+@include('blade-ui-kit-bootstrap::bootstrap-4.components.buttons.partials.content')
 </button>
 
 @push('blade-ui-kit-bs-html')
     <form id="{{ $formId }}" method="{!! $formMethodValue() !!}" action="{{ $url }}" @if ($novalidate === true) novalidate="true" @endif>
         @csrf
         @method($method)
     </form>
-@endpush
-
-@if ($confirm !== null)
-    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
-@endif
+@endpush
diff --git a/resources/views/bootstrap-4/components/buttons/link-button.blade.php b/resources/views/bootstrap-4/components/buttons/link-button.blade.php
@@ -7,34 +7,7 @@
     @else
         {{ $attributes->merge(['role' => 'button', 'class' => 'disabled btn btn-'.$variant.($size !== null ? ' btn-'.$size : ''), 'aria-disabled' => 'true', 'tabindex' => '-1']) }}
     @endif
-    @if ($title !== null)
-        data-toggle="tooltip"
-        title="{!! $title !!}"
-    @endif
-    @if ($confirm !== null)
-        data-buk-confirm="{!! $confirm !!}"
-        data-buk-confirm-modal="confirm-modal-{!! $confirmId !!}"
-    @endif
+    @include('blade-ui-kit-bootstrap::bootstrap-4.components.buttons.partials.attributes')
 >
-    @if ($startContent !== null)
-        {!! $startContent !!}
-    @endif
-    @if ($slot->isEmpty())
-        @if ($hideText)
-            <span class="sr-only">
-                {!! $text !!}
-            </span>
-        @else
-            {!! $text !!}
-        @endif
-    @else
-        {!! $slot !!}
-    @endif
-    @if ($endContent !== null)
-        {!! $endContent !!}
-    @endif
-</a>
-
-@if ($confirm !== null)
-    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
-@endif
+@include('blade-ui-kit-bootstrap::bootstrap-4.components.buttons.partials.content')
+</a>
diff --git a/resources/views/bootstrap-4/components/buttons/partials/attributes.blade.php b/resources/views/bootstrap-4/components/buttons/partials/attributes.blade.php
@@ -0,0 +1,9 @@
+@if ($title !== null)
+    data-toggle="tooltip"
+    title="{!! $title !!}"
+@endif
+@if ($confirm !== null)
+    data-buk-confirm="{!! $confirm !!}"
+    data-buk-confirm-modal="confirm-modal-{!! $confirmId !!}"
+    <x-modal-confirm :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
+@endif
diff --git a/resources/views/bootstrap-4/components/buttons/partials/content.blade.php b/resources/views/bootstrap-4/components/buttons/partials/content.blade.php
@@ -0,0 +1,23 @@
+@if ($startIcon !== null)
+    {!! $startIcon !!}
+@endif
+@if ($startContent !== null)
+    {!! $startContent !!}
+@endif
+@if ($slot->isEmpty())
+    @if ($hideText)
+        <span class="sr-only">
+            {!! $text !!}
+        </span>
+    @else
+        {!! $text !!}
+    @endif
+@else
+    {!! $slot !!}
+@endif
+@if ($endContent !== null)
+    {!! $endContent !!}
+@endif
+@if ($endIcon !== null)
+    {!! $endIcon !!}
+@endif
diff --git a/resources/views/bootstrap-4/components/buttons/simple-button.blade.php b/resources/views/bootstrap-4/components/buttons/simple-button.blade.php
@@ -4,35 +4,8 @@
     @if ($formId !== null)
         form="{!! $formId !!}"
     @endif
-    @if ($title !== null)
-        data-toggle="tooltip"
-        title="{!! $title !!}"
-    @endif
-    @if ($confirm !== null)
-        data-buk-confirm="{!! $confirm !!}"
-        data-buk-confirm-modal="confirm-modal-{!! $confirmId !!}"
-    @endif
+    @include('blade-ui-kit-bootstrap::bootstrap-4.components.buttons.partials.attributes')
     @disabled($disabled)
 >
-    @if ($startContent !== null)
-        {!! $startContent !!}
-    @endif
-    @if ($slot->isEmpty())
-        @if ($hideText)
-            <span class="sr-only">
-                {!! $text !!}
-            </span>
-        @else
-            {!! $text !!}
-        @endif
-    @else
-        {!! $slot !!}
-    @endif
-    @if ($endContent !== null)
-        {!! $endContent !!}
-    @endif
-</button>
-
-@if ($confirm !== null)
-    <x-modal-confirm :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
-@endif
+@include('blade-ui-kit-bootstrap::bootstrap-4.components.buttons.partials.content')
+</button>
diff --git a/resources/views/bootstrap-5/components/buttons/actions/copy.blade.php b/resources/views/bootstrap-5/components/buttons/actions/copy.blade.php
@@ -0,0 +1,58 @@
+<button
+    {{ $attributes->class([
+        'btn btn-'.$variant.($size !== null ? ' btn-'.$size : ''),
+        'btn-clipboard' => !$disabled,
+    ]) }}
+    type="{{ $type }}"
+    @if ($formId !== null)
+        form="{!! $formId !!}"
+    @endif
+    @disabled($disabled)
+    @if ($target !== null)
+        data-clipboard-target="{{ $target }}"
+    @elseif ($string !== null)
+        data-clipboard-text="{{ $string }}"
+    @endif
+    @include('blade-ui-kit-bootstrap::bootstrap-5.components.buttons.partials.attributes')
+>
+@include('blade-ui-kit-bootstrap::bootstrap-5.components.buttons.partials.content')
+</button>
+
+@push('blade-ui-kit-bs-scripts')
+    @once
+        <script>
+            window.ClipboardJS.on('success', function(e) {
+                let triggerButton = e.trigger;
+
+                let dataBsOriginalTitle = triggerButton.getAttribute("data-bs-original-title");
+
+                triggerButton.setAttribute("data-bs-original-title", "{{ trans('blade-ui-kit-bootstrap::clipboard.success') }}");
+
+                let bsTooltip = bootstrap.Tooltip.getInstance(triggerButton);
+                bsTooltip.show();
+
+                if (dataBsOriginalTitle !== null) {
+                    triggerButton.setAttribute("data-bs-original-title", dataBsOriginalTitle);
+                }
+
+                e.clearSelection();
+            });
+            window.ClipboardJS.on('error', function(e) {
+                let triggerButton = e.trigger;
+
+                let dataBsOriginalTitle = triggerButton.getAttribute("data-bs-original-title");
+
+                triggerButton.setAttribute("data-bs-original-title", "{{ trans('blade-ui-kit-bootstrap::clipboard.error') }}");
+
+                let bsTooltip = bootstrap.Tooltip.getInstance(triggerButton);
+                bsTooltip.show();
+
+                if (dataBsOriginalTitle !== null) {
+                    triggerButton.setAttribute("data-bs-original-title", dataBsOriginalTitle);
+                }
+
+                e.clearSelection();
+            });
+        </script>
+    @endonce
+@endpush