=

arikaim-package.json

@@ -2,7 +2,7 @@
     "title": "Html components",
     "package-type": "components",
     "name": "tailwind",
-    "version": "1.4.14",
+    "version": "1.4.15",
     "description": "Arikaim CMS html components library created with Tailwind CSS.",
     "repository": "https://github.com/arikaim/tailwind-components.git",
     "require": {

modal/flowbite/flowbite.html

@@ -0,0 +1,41 @@
+<div 
+    id="{{ component_id }}"
+    tabindex="-1" 
+    class="fixed top-0 left-0 right-0 z-50 hidden w-full overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
+    <div 
+        class="relative w-full max-w-md max-h-full  
+        {{ size|default('w-11/12 max-w-md') }} 
+        {{ color|default('bg-white') }}
+        {{ border|default('rounded-lg shadow') }}">
+        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+            <div class="flex items-center justify-between p-2 border-gray-200 border-b rounded-t dark:border-gray-600">
+                {% if icon is not empty %}
+                    {{ component(icon,{ size: 'w-6 h-6', color: 'text-orange-500' },'svg') }}
+                {% endif %}
+                <h3 class="px-2 modal-title text-md font-semibold text-gray-900 dark:text-white">
+                    {{ title|default(title) }}
+                </h3>
+                <button 
+                    type="button" 
+                    class="modal-cancel-button text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
+                    {{ component('icons~close',{ size: 'w-4 h-4' },'svg') }}
+                </button>
+            </div>          
+            <div class="modal-content {{ content_class|default('p-4') }}">
+                {{ content }}
+            </div>
+            <div class="py-4 modal-action flex items-center {{ action_class|default('p-4') }}">
+                <button 
+                    type="button" 
+                    class="modal-confirm-button text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-1 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                    {{ confirm_button|default(labels.confirm) }}
+                </button>
+                <button 
+                    type="button" 
+                    class="modal-cancel-button mx-8 text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-4 py-1 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+                    {{ cancel_button|default(labels.cancel) }}
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

modal/flowbite/flowbite.js

@@ -0,0 +1,68 @@
+'use strict';
+
+arikaim.component.onLoaded(function(component) { 
+    var modal;
+
+    component.getModal = function() {
+        return modal;
+    }
+
+    component.close = function() {             
+        component.getModal().hide(); 
+    };
+
+    component.setContent = function(content) {
+        $(this.getElement()).find('.modal-content').html(content);
+    };
+
+    component.getContentElement = function() {
+        return $(this.getElement()).find('.modal-content');
+    };
+
+    component.setTitle = function(title) {
+        $(this.getElement()).find('.modal-title').html(title);
+    };
+
+    component.open = function(onConfirm, onCancel) {            
+        component.setVar('onConfirm',onConfirm);
+        component.setVar('onCancel',onCancel);
+
+       component.getModal().show(); 
+    };
+
+    component.init = function() {      
+        var modalEl = $(component.getElement())[0];
+
+        modal = new Modal(modalEl,{
+            placement: 'center',
+            backdrop: 'dynamic',
+            backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
+            closable: true,
+            onToggle: () => {
+                $(button).find('.button-icon').toggleClass('rotate-180');
+            }
+        },{
+            id: modalEl,
+            override: true
+        });
+
+        var closeButton = $(this.getElement()).find('.modal-cancel-button');
+        var confirmButton = $(this.getElement()).find('.modal-confirm-button');
+
+        $(closeButton).off();
+        $(closeButton).on('click',function() {
+            callFunction(component.getVar('onCancel'));
+            component.close();
+        });
+
+        $(confirmButton).off();
+        $(confirmButton).on('click',function() {
+            callFunction(component.getVar('onConfirm'));
+            component.close();
+        });
+    };
+
+    component.init();
+
+    return component;
+});

modal/flowbite/flowbite.json

@@ -0,0 +1,8 @@
+{
+    "title": "Confirm",
+    "labels": {
+        "close": "Close",
+        "confirm": "Confirm",
+        "cancel": "Cancel"
+    }    
+}