=

arikaim-package.json

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

dropdown/flowbite/component.json

@@ -0,0 +1,3 @@
+{     
+    "include-styles": true
+}

dropdown/flowbite/flowbite.html

@@ -0,0 +1,32 @@
+{% set data_field = data_field|default('value') %}
+{% set title_field = title_field|default('title') %}
+<div
+    id="{{ component_id }}"
+    selected="{{ selected }}"
+    class="relative {{ class|default(styles.class) }}">
+    <button 
+        class="dropdown-toggle flex flex-row items-center {{ toggle_class|default(styles.toggle) }}" 
+        type="button">
+        <div 
+            class="{{ title_class|default(styles.title) }}">
+            {{ title|default(labels.select) }}
+        </div>
+        {{  component('icons~chevron.down',{ 
+                size: 'w-4 h-4',
+                class: 'button-icon ml-2 -mr-1 transition duration-300 transition-transform' 
+            },'svg') 
+        }}
+    </button>
+    <div 
+        role="menu" 
+        aria-orientation="vertical" 
+        class="dropdown-menu z-10 hidden {{ menu_class|default(styles.menu) }} ">
+        {% for item in items %}
+            <div
+                value="{{ item[data_field] }}"
+                class="dropdown-item {{ item_class|default(styles.item) }} ">
+                {{ item[title_field] }}
+            </div>
+        {% endfor %}           
+    </div>
+</div>

dropdown/flowbite/flowbite.js

@@ -0,0 +1,51 @@
+'use strict';
+
+arikaim.component.onLoaded(function(component) {
+    var dropdown;
+
+    component.getDropdown = function() {
+        return dropdown;
+    }
+
+    component.select = function(element) {
+        var title = $(element).html().trim();
+
+        document.activeElement.blur();
+        component.set('selected',$(element).attr('value'));
+
+        $(component.getElement()).find('.dropdown-title').html(title);   
+        $(component.getElement()).find('.dropdown-item').removeClass('active-menu'); 
+        $(element).addClass('active-menu');
+    };
+
+    component.init = function() {
+        var menu =  $(component.getElement()).find('.dropdown-menu')[0];
+        var button = $(component.getElement()).find('.dropdown-toggle')[0]; 
+
+        dropdown = new Dropdown(menu,button,{
+            placement: 'bottom',
+            triggerType: 'click',
+            offsetSkidding: 0,
+            offsetDistance: 10,
+            delay: 300,
+            ignoreClickOutsideClass: false,
+            onToggle: () => {
+                $(button).find('.button-icon').toggleClass('rotate-180');
+            }
+        },{
+            id: menu,
+            override: true
+        });
+
+        arikaim.ui.button($(component.getElement()).find('.dropdown-item'),function(btn) {
+            console.log('select');
+            component.select(btn);
+            console.log( component.get('selected') );
+            dropdown.toggle();
+        });     
+    };
+
+    component.init();
+
+    return component;
+});

dropdown/flowbite/flowbite.json

@@ -0,0 +1,5 @@
+{
+    "labels": {
+        "select": "Select"
+    }
+}

dropdown/flowbite/styles.json

@@ -0,0 +1,7 @@
+{
+    "class": "inline-block w-full",
+    "toggle": "w-full py-1 px-4 rounded-md shadow-sm bg-white border border-gray-300",
+    "title": "text-left dropdown-title flex-grow text-md font-medium text-gray-700",
+    "item": "flex items-center gap-x-2 p-2 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700",
+    "menu": "absolute origin-top-right right-0 py-2 bg-white divide-y divide-gray-100 rounded-lg shadow w-full dark:bg-gray-700"
+}