From 528dc006246a70641082ba34ff7bbb88b95b9ea5 Mon Sep 17 00:00:00 2001
From: Arikaim <info@arikaim.com>
Date: Wed, 8 Nov 2023 15:42:31 +0200
Subject: [PATCH] =

---
 arikaim-package.json |  2 +-
 modal/modal.html     | 26 +++++++++++++-------------
 modal/modal.js       |  6 +++---
 view/type/type.html  | 33 +++++++++++++++++++++++++++++++++
 view/type/type.js    | 34 ++++++++++++++++++++++++++++++++++
 view/type/type.json  | 15 +++++++++++++++
 6 files changed, 99 insertions(+), 17 deletions(-)
 create mode 100644 view/type/type.html
 create mode 100644 view/type/type.js
 create mode 100644 view/type/type.json

diff --git a/arikaim-package.json b/arikaim-package.json
index b613eca..5d57064 100644
--- a/arikaim-package.json
+++ b/arikaim-package.json
@@ -2,7 +2,7 @@
     "title": "Html components",
     "package-type": "components",
     "name": "tailwind",
-    "version": "1.4.10",
+    "version": "1.4.11",
     "description": "Arikaim CMS html components library created with Tailwind CSS.",
     "repository": "https://github.com/arikaim/tailwind-components.git",
     "require": {
diff --git a/modal/modal.html b/modal/modal.html
index 8cc9acb..110e552 100644
--- a/modal/modal.html
+++ b/modal/modal.html
@@ -1,25 +1,25 @@
 <modal 
     id="{{ component_id }}"     
-    class="modal fixed hidden top-0 left-0 w-screen h-screen z-100  
+    class="modal fixed  top-0 left-0 w-screen h-screen z-100  
     {{ color|default('bg-gray-700 bg-opacity-50') }}">
     <div 
-        class="modal-container absolute inline-block overflow-y-auto bg-opacity-100 z-101
+        class="modal-box
         {{ position|default('left-0 top-1/2 right-0 m-auto') }}
         {{ border|default('border border-gray-500 border-solid') }}
         {{ color|default('bg-white rounded-lg shadow-lg') }}
-        {{ size|default('w-2/4') }}">
-        <header class="bg-white modal-header flex justify-between items-center {{ space|default('py-4 px-6') }}">				       
-            <h4 class="modal-title {{ title_class|default('text-2xl font-bold') }}">
-                {{ title }}
-            </h4>
-            {{  component(close_icon|default('icons~close'),{ 
-                    class: 'cursor-pointer modal-close transition-color duration-500 ease-in-out', 
+        {{ size|default('w-2/4') }}">  		       
+        <div class="flex flex-rows items-center">
+            <h4 class="flex-grow modal-title {{ title_class|default('text-2xl font-bold') }}">           
+                {{ title }}           
+            </h4> 
+            {{  component('icons~close',{ 
                     size: 'h-6 w-6', 
-                    color: 'text-gray-800 hover:text-red-500' 
+                    class: 'inline-block modal-close cursor-pointer transition-color duration-500 ease-in-out',
+                    color: 'text-gray-800' 
                 },'svg') 
-            }}               
-        </header>
-        <content class="modal-content {{ space|default('py-4 px-6') }}">
+            }}
+        </div>	              
+        <content {{ content_id|attr('id') }}class="modal-content {{ space|default('p-2') }}">
             {{ content }}
         </content>
         <footer class="modal-footer flex flex-row 
diff --git a/modal/modal.js b/modal/modal.js
index b30082e..fc1a021 100644
--- a/modal/modal.js
+++ b/modal/modal.js
@@ -3,7 +3,7 @@
 arikaim.component.onLoaded(function(component) { 
 
     component.close = function() {             
-        $(this.getElement()).fadeOut(500);
+        $(this.getElement()).removeClass('modal-open');  
     };
 
     component.setContent = function(content) {
@@ -14,8 +14,8 @@ arikaim.component.onLoaded(function(component) {
         $(this.getElement()).find('.modal-title').html(title);
     };
 
-    component.open = function() {     
-        $(this.getElement()).removeClass('hidden').fadeIn(500);  
+    component.open = function() {          
+        $(this.getElement()).addClass('modal-open');  
     };
 
     component.init = function() {        
diff --git a/view/type/type.html b/view/type/type.html
new file mode 100644
index 0000000..15bf7f2
--- /dev/null
+++ b/view/type/type.html
@@ -0,0 +1,33 @@
+{% set selected = selected|default(getViewType(namespace)) %}
+{% set size = size|default('h-6 w-6') %}
+{% set color = color|default('text-gray-800 dark:text-gray-100') %}
+{%  set icons = {
+        table: 'icons~list',
+        grid: 'icons~template'
+    }
+%}
+<div class="tooltip" data-tip="{{ tooltip }}">
+    <label    
+        class="swap swap-rotate {{ class }}">
+        <input 
+            id="{{ component_id|default('view-type') }}"          
+            namespace="{{ namespace }}"
+            view-type="{{ items[selected].value }}" 
+            {{ (selected == 'table') ? 'checked' : '' }}
+            type="checkbox" />
+
+        {{  component(icons.table,{
+                color: color, 
+                size: size, 
+                class: 'swap-on'
+            },'svg') 
+        }}    
+
+        {{  component(icons.grid,{
+                color: color, 
+                size: size, 
+                class: 'swap-off'
+            },'svg') 
+        }}       
+    </label>
+</div>
\ No newline at end of file
diff --git a/view/type/type.js b/view/type/type.js
new file mode 100644
index 0000000..0e6636d
--- /dev/null
+++ b/view/type/type.js
@@ -0,0 +1,34 @@
+/**
+ *  Arikaim
+ *  @copyright  Copyright (c) Intersoft <info@arikaim.com>
+ *  @license    http://www.arikaim.com/license
+ *  http://www.arikaim.com
+*/
+'use strict';
+
+arikaim.component.onLoaded(function(component) { 
+    
+    component.setViewType = function(viewType, onSuccess, onError) {    
+        return arikaim.put('/core/api/ui/paginator/view/type',{ 
+            view: viewType,
+            namespace: component.get('namespace','')  
+        },onSuccess,onError);       
+    };
+
+    component.init = function() {
+    
+        arikaim.ui.button($(component.getElement()),function(element) {
+            var checked = $(element).prop('checked');         
+            var viewType = (checked == true) ? 'table' : 'grid';
+
+            component.setViewType(viewType,function(result) {
+                component.set('view-type',result.view);
+            });
+        });
+       
+    };
+
+    component.init();
+
+    return component;
+});
diff --git a/view/type/type.json b/view/type/type.json
new file mode 100644
index 0000000..abe415e
--- /dev/null
+++ b/view/type/type.json
@@ -0,0 +1,15 @@
+{  
+    "tooltip": "View Type",
+    "items": {
+        "table": {
+            "value": "table",
+            "title": "Table",
+            "icon": "list"
+        },      
+        "grid": {
+            "value": "grid",
+            "title": "Grid",
+            "icon": "th"   
+        }
+    }
+}
\ No newline at end of file