=

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": {

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 

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() {        

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>

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;
+});

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"   
+        }
+    }
+}