Merge pull request #3 from mkocansey/main

Stable version

README.md

@@ -1,2 +1,46 @@
-# bladewind-ui-components
-UI Components using TailwindCSS , Laravel Blade Templates and vanilla Javascript
+<p><img src="https://img.shields.io/github/license/mkocansey/bladewind" alt="License" /></p><br />
+
+## About BladewindUI
+
+BladewindUI is a collection of UI components written purely using TailwindCSS, Laravel blade templates and Vanilla Javascript. These components are super simple to use and come with different levels of customization.
+<br /><br />
+### Components Include
+
+- **[Alert](https://bladewindui.com/component/alert)**
+- **[Avatar](https://bladewindui.com/component/avatar)**
+- **[Button](https://bladewindui.com/component/button)**
+- **[Card](https://bladewindui.com/component/card)**
+- **[Centered Element](https://bladewindui.com/component/centered-element)**
+- **[Checkbox](https://bladewindui.com/component/checkbox)**
+- **[Datepicker](https://bladewindui.com/component/datepicker)**
+- **[Dropdown](https://bladewindui.com/component/dropdown)**
+- **[Empty State](https://bladewindui.com/component/empty-state)**
+- **[Filepicker](https://bladewindui.com/component/filepicker)**
+- **[Horizontal Line Graph](https://bladewindui.com/component/horizontal-line-graph)**
+- **[List View](https://bladewindui.com/component/list-view)**
+- **[Modal](https://bladewindui.com/component/modal)**
+- **[Notification](https://bladewindui.com/component/notification)**
+- **[Process Indicator](https://bladewindui.com/component/process-indicator)**
+- **[Progress Bar](https://bladewindui.com/component/progress-bar)**
+- **[Radio Button](https://bladewindui.com/component/radio-button)**
+- **[Rating](https://bladewindui.com/component/rating)**
+- **[Statistic](https://bladewindui.com/component/statistic)**
+- **[Spinner](https://bladewindui.com/component/spinner)**
+- **[Tab](https://bladewindui.com/component/tab)**
+- **[Table](https://bladewindui.com/component/table)**
+- **[Tag](https://bladewindui.com/component/tag)**
+- **[Textbox](https://bladewindui.com/component/textbox)**
+- **[Textarea](https://bladewindui.com/component/textarea)**
+- **[Toggle](https://bladewindui.com/component/toggle)**
+
+<br /><br />
+
+## Security Vulnerabilities
+
+If you discover a security vulnerability, please e-mail Michael K. Ocansey at [[email protected]](mailto:[email protected]).
+
+<br />
+
+## License
+
+BladewindUI components is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

composer.json

@@ -1,9 +1,9 @@
 {
     "name": "mkocansey/bladewind",
-    "description": "UI Components using TailwindCSS , Laravel Blade Templates and vanilla Javascript",
+    "description": "Laravel UI Components using TailwindCSS, Blade Templates and vanilla Javascript",
     "keywords": ["laravel", "ui components", "tailwindcss", "blade components"],
     "require": {
-        "php": "^7.3|^8.1"
+        "php": ">=7.3"
     },
     "license": "MIT",
     "type": "library",

src/resources/assets/compiled/js/dropdown.js

@@ -15,7 +15,8 @@ dom_els(`.${el_name} .dropdown-items>div.dd-item`).forEach((el) => {
         let user_function = el.getAttribute('aria-user-function');
         if(parent_tag != null) {
             dom_el(`.bw-${parent_tag}`).value = value;
-            dom_el(`.${parent_tag}>button>label`).innerHTML = `<div class="flex justify-center">${el.innerHTML}</div>`;
+            console.log(el.innerHTML);
+            dom_el(`.${parent_tag}>button>label`).innerHTML = `<div class="flex items-center">${el.innerHTML}</div>`;
             el.parentElement.parentElement.classList.toggle('hidden');
 
             if(href !== '' && href !== null && href !== undefined) {
@@ -54,10 +55,11 @@ searchDropdown = (value, parent) => {
     });
 }
 
-dom_els('.search-dropdown').forEach((el) => {
-    el.addEventListener('click', function (e){
-        e.stopImmediatePropagation();
+if(dom_els('.search-dropdown')){
+    dom_els('.search-dropdown').forEach((el) => {
+        el.addEventListener('click', function (e){
+            e.stopImmediatePropagation();
+        });
     });
-});
-
+}
 window.onload = () => { selectSelectedValues(); }

src/resources/assets/compiled/js/helpers.js

@@ -11,9 +11,9 @@ var     dropdownIsOpen = false;
 
 dom_el = (element) => { return (document.querySelector(element) != null) ? document.querySelector(element) : false;  }
 
-dom_els = function(element) { return (document.querySelectorAll(element).length>0) ? document.querySelectorAll(element) : false;  }
+dom_els = (element) => { return (document.querySelectorAll(element).length>0) ? document.querySelectorAll(element) : false;  }
 
-validateForm = function(element) {
+validateForm = (element) => {
     let has_error = 0;
     let BreakException = {};
     try{
@@ -33,7 +33,7 @@ validateForm = function(element) {
     return has_error === 0;
 }
 
-isNumberKey = function(evt) {   // usage:  onkeypress="return isNumberKey(event)"
+isNumberKey = (evt) => {   // usage:  onkeypress="return isNumberKey(event)"
     var charCode = (evt.which) ? evt.which : evt.keyCode
     if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57))) {
         return false;
@@ -45,7 +45,7 @@ callUserFunction = (func) => {
     if (func !== '' && func !== undefined) eval(func); 
 };
 
-serialize = function(form){
+serialize = (form) => {
     let data = new FormData(dom_el(form));
     let obj = {};
     for (let [key, value] of data) {
@@ -62,7 +62,7 @@ serialize = function(form){
     }   return obj;
 }
 
-showMessage = function(message, type, dismissable=true) {
+showMessage = (message, type, dismissable=true) => {
     clearTimeout(notification_timeout);
     let notification_bar = dom_el('.bw-notification');
     let message_container = dom_el('.bw-notification .message-container');
@@ -95,7 +95,7 @@ showMessage = function(message, type, dismissable=true) {
     }
 }
 
-displayFormErrors = function(errors){
+displayFormErrors = (errors) => {
     if( errors) {
         let number_of_errors = Object.keys(errors).length;
         if ( number_of_errors > 0 ) {
@@ -105,22 +105,22 @@ displayFormErrors = function(errors){
     }
 }
 
-stringContains = function(str, keyword) { 
+stringContains = (str, keyword) => { 
     if(typeof(str) !== 'string') return false; 
     return (str.indexOf(keyword) != -1); 
 }
 
-doNothing = function() { }
+doNothing = () => { }
 
-changeCssForDomArray = function(els, css, mode='add') { 
+changeCssForDomArray = (els, css, mode='add') => { 
     if(dom_els(els).length > 0){
         dom_els(els).forEach((el) => { 
             changeCss(el, css, mode, true);
         });
     }
 }
 
-changeCss = function(el, css, mode='add', elIsDomObject=false) { 
+changeCss = (el, css, mode='add', elIsDomObject=false) => { 
     // css can be comma separated
     // if elIsDomObject dont run it through dom_el
     if( (! elIsDomObject && dom_el(el) != null) || (elIsDomObject && el != null)){
@@ -141,17 +141,17 @@ changeCss = function(el, css, mode='add', elIsDomObject=false) {
     }
 }
 
-showModal = function(el) { unhide(`.bw-${el}-modal`); }
+showModal = (el) => { unhide(`.bw-${el}-modal`); }
 
-hideModal = function(el) { hide(`.bw-${el}-modal`); }
+hideModal = (el) => { hide(`.bw-${el}-modal`); }
 
-hide = function(el, elIsDomObject=false) { 
+hide = (el, elIsDomObject=false) => { 
     if( (! elIsDomObject && dom_el(el) != null) || (elIsDomObject && el != null)){
         changeCss(el, 'hidden', 'add', elIsDomObject); 
     }
 }
 
-unhide = function(el, elIsDomObject=false) { 
+unhide = (el, elIsDomObject=false) => { 
     if( (! elIsDomObject && dom_el(el) != null) || (elIsDomObject && el != null)){ 
         changeCss(el, 'hidden', 'remove', elIsDomObject); 
     }
@@ -193,10 +193,34 @@ animateCSS = (element, animation) =>
       }
   }
 
-  removeCommas = function(amount) {
+  removeCommas = (amount) => {
     return amount.toString().replace(/,/g, '');
   }
 
-  toCurrency = function(amount) {
+  toCurrency = (amount) => {
     return ((parseFloat(amount).toFixed(2))*1).toLocaleString();
+  }
+
+  goToTab = (el, color) => {
+      let tab_content = dom_el('.bw-tc-'+el);
+      if( tab_content === null ) {
+          alert('no matching x-bladewind.tab-content div found for this tab');
+          return false;
+      }
+      changeCssForDomArray(
+          'li.atab span', 
+          `text-${color}-500,border-${color}-500,hover:text-${color}-500,hover:border-${color}-500`, 
+          'remove');
+      changeCssForDomArray(
+          'li.atab span', 
+          'text-gray-500,border-transparent,hover:text-gray-600,hover:border-gray-300');
+      changeCss(
+          `.atab-${el} span`, 
+          'text-gray-500,border-transparent,hover:text-gray-600,hover:border-gray-300', 'remove');
+      changeCss(
+          `.atab-${el} span`, 
+          `text-${color}-500,border-${color}-500,hover:text-${color}-500,hover:border-${color}-500`);
+
+      dom_els('div.atab-content').forEach((el) => { hide(el, true); });
+      unhide(tab_content, true);
   }

src/resources/assets/raw/css/input.css

@@ -3,19 +3,34 @@
     .bw-input,
     select {
         @apply 
-            border 
-            border-slate-300/50 
             py-3 px-4
             !outline-none
             !ring-0
             focus:outline-none 
             focus:border 
-            focus:border-blue-300 
+            focus:border-blue-300
             peer-placeholder-shown:mt-2
+            rounded-md 
     }
     input.no-label{
         @apply placeholder-transparent
     }
+    .form-label {
+        @apply 
+            absolute 
+            left-3.5 
+            -top-1.5 
+            text-xs 
+            px-1 
+            py-0 
+            font-semibold 
+            transition-all 
+            peer-placeholder-shown:top-3.5 
+            peer-placeholder-shown:text-sm  
+            peer-focus:-top-1.5 
+            peer-focus:text-xs
+            cursor-text
+    }
     .form-tick:checked {
         background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
         border-color: transparent;

src/resources/views/components/card.blade.php

@@ -3,11 +3,23 @@
     'css' => '',
     'has_shadow' => 'true',
     'reduce_padding' => 'false',
+    'header' => '',
+    'footer' => '',
 ])
 
-<div class="bw-card bg-white @if($reduce_padding=='false')p-8 @else px-4 pb-4 pt-2 @endif rounded-lg @if($has_shadow=='true')shadow-2xl shadow-gray-200/40 @endif {{$css}}">
-    @if($title !== '')<div class="uppercase tracking-wide text-xs text-gray-400/90 mb-2">{{ $title}}</div>@endif
-    <div @if($title !== '')class="mt-6"@endif>
+<div class="bw-card bg-white @if($header == '') @if($reduce_padding=='false')p-8 @else px-4 pb-4 pt-2 @endif @endif rounded-lg @if($has_shadow=='true')shadow-2xl shadow-gray-200/40 @endif {{$css}}">
+    @if($header != '')
+        <div class="border-b border-gray-100/30">
+            {{$header}}
+        </div>
+    @endif
+    @if($title !== '' && $header == '')<div class="uppercase tracking-wide text-xs text-gray-400/90 mb-2">{{ $title}}</div>@endif
+    <div @if($title !== '' && $header == '')class="mt-6"@endif>
         {{ $slot }}
     </div>
+    @if($footer != '')
+        <div class="border-t border-gray-100/30">
+            {{$footer}}
+        </div>
+    @endif
 </div>

src/resources/views/components/centered-content.blade.php

@@ -1,10 +1,10 @@
 @props([
-    'size' => 'default',
+    'size' => 'xl',
     'width' => [
-        'xxl' => '7xl',
-        'default' => '6xl',
+        'omg' => '7xl',
+        'xxl' => '6xl',
         'xl' => '4xl',
-        'large' => '3xl',
+        'big' => '3xl',
         'medium' => '2xl',
         'small' => 'lg',
         'tiny' => 'md'

src/resources/views/components/dropdown.blade.php

@@ -104,7 +104,7 @@
 @endphp
 
 <div class="relative {{ $name }}">
-    <button type="button" class="bw-dropdown bg-white cursor-pointer text-left w-full text-gray-400  flex justify-between">
+    <button type="button" class="bw-dropdown bg-white cursor-pointer text-left w-full text-gray-400 flex justify-between">
         <label class="cursor-pointer">
             @if($show_filter_icon == 'true')
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">

src/resources/views/components/error.blade.php

@@ -1,19 +1,19 @@
 @props([
     'heading' => 'Error!',
     'description' => 'Something went wrong',
-    'buttonText' => 'Go to homepage',
-    'buttonUrl' => '',
-    'image' => '/assets/images/ss-login.svg',
+    'button_text' => 'Go to homepage',
+    'button_url' => '/',
+    'image' => '',
 ])
 <div class="flex justify-center items-center">
     <div class="max-w-xl px-8">
-        <img src="{{ $image }}" alt="{{$heading}}" class="p-6 h-1/2" />
+        <div class="p-6">{!!$image!!}</div>
         <h1 class="text-center text-2xl zoom-out font-extralight tracking-wider text-red-400 -mt-10">{{ $heading }}</h1>
-        <p class="mt-1 mb-7 font-light text-sm text-gray-600/80 text-center px-12">
+        <p class="mt-2 mb-12 font-light text-gray-600/80 text-center px-12">
             {!! $description !!}
         </p>
         <div class="text-center pt-2">
-            <a href="{{ $buttonUrl }}"><x-button type="primary">{{ $buttonText }}</x-button></a>
+            <a href="{{ $button_url }}"><x-bladewind::button type="primary" size="small">{{ $button_text }}</x-bladewind::button></a>
         </div>
     </div>
 </div>

src/resources/views/components/horizontal-line-graph.blade.php

@@ -1,18 +1,20 @@
+@php use Illuminate\Support\Str; @endphp
 @props([
     'label' => '',
     'percentage' => 0,
-    'color' => 'gray',
-    'showPercentage' => 'true',
-    'showLabel' => 'true'
+    'color' => 'blue',
+    'shade' => 'faint',
+    'percentage_label_opacity' => '50',
+    'css' => '',
 ])
-<div class="bg-gray-300 bg-blue-300 bg-green-300 bg-red-300 bg-yellow-300 bg-black bg-orange-300"></div>
-<div class="w-[0%] w-[1%] w-[2%] w-[3%] w-[4%] w-[5%] w-[6%] w-[7%] w-[8%] w-[9%] w-[10%] w-[11%] w-[12%] w-[13%] w-[14%] w-[15%] w-[16%] w-[17%] w-[18%] w-[19%] w-[20%] w-[21%] w-[22%] w-[23%] w-[24%] w-[25%] w-[26%] w-[27%] w-[28%] w-[29%] w-[30%] w-[31%] w-[32%] w-[33%] w-[34%] w-[35%] w-[36%] w-[37%] w-[38%] w-[39%] w-[40%] w-[41%] w-[42%] w-[43%] w-[44%] w-[45%] w-[46%] w-[47%] w-[48%] w-[49%] w-[50%] w-[51%] w-[52%] w-[53%] w-[54%] w-[55%] w-[56%] w-[57%] w-[58%] w-[59%] w-[60%] w-[61%] w-[62%] w-[63%] w-[64%] w-[65%] w-[66%] w-[67%] w-[68%] w-[69%] w-[70%] w-[71%] w-[72%] w-[73%] w-[74%] w-[75%] w-[76%] w-[77%] w-[78%] w-[79%] w-[80%] w-[81%] w-[82%] w-[83%] w-[84%] w-[85%] w-[86%] w-[87%] w-[88%] w-[89%] w-[90%] w-[91%] w-[92%] w-[93%] w-[94%] w-[95%] w-[96%] w-[97%] w-[98%] w-[99%] w-[100%]"></div>
-
-<div {{ $attributes->merge(['class' => ""]) }}>
-    @if($showLabel == 'true')
-    <span class="text-xs">{{ $label }} @if($showPercentage == 'true')(<span class="legend">{{ $slot }}{{ $percentage}}</span>%) @endif</span>
-    @endif
-    <div class="bg-gray-100 w-full mt-1 mb-4">
-        <div class="w-[{{$percentage}}%] h-1 bg-{{$color}}-300 rounded-full bar-width"></div>
-    </div>
-</div>
+<span class="opacity-0 opacity-5 opacity-10 opacity-20 opacity-25 opacity-30 opacity-40 opacity-50 opacity-60 opacity-70 opacity-75 opacity-80 opacity-90 opacity-95 opacity-100"></span>
+<x-bladewind::progress-bar 
+    percentage="{{$percentage}}" 
+    shade="{{$shade}}"
+    color="{{$color}}"
+    percentage_prefix="{{$label}}"
+    show_percentage_label="true"
+    show_percentage_label_inline="false"
+    percentage_label_position="top left"
+    percentage_label_opacity="{{$percentage_label_opacity}}"
+    css={{$css}} />