Initial commit of the MoonBear Blade Components Laravel package

JunaidQadirB · Sep 23, 2019 · 0424e9c · 0424e9c
commit 0424e9c
Show file tree

Hide file tree

Showing 28 changed files with 1,123 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,53 @@
+# Created by .ignore support plugin (hsz.mobi)
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+.idea/
+# CMake
+cmake-build-debug/
+cmake-build-release/
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+### Laravel template
+vendor/
+node_modules/
+npm-debug.log
+
+# Laravel 4 specific
+bootstrap/compiled.php
+app/storage/
+
+# Laravel 5 & Lumen specific
+public/storage
+public/hot
+storage/*.key
+.env.*.php
+.env.php
+.env
+Homestead.yaml
+Homestead.json
+
+# Rocketeer PHP task runner and deployment package. https://github.com/rocketeers/rocketeer
+.rocketeer/
diff --git a/README.md b/README.md
@@ -0,0 +1,13 @@
+# MoonBear Blade Components
+
+This packages is a set of reusable, self-contained set of blade UI components.
+The default theme uses the Bootstrap4.
+You can extend and customize them as your liking and need.
+
+## Installation
+    ```bash
+    composer require moonbear/blade-components
+    ```
+## Usage
+
+## Publishing
diff --git a/composer.json b/composer.json
@@ -0,0 +1,28 @@
+{
+    "name": "moonbear/blade-components",
+        "description": "Laravel Blade components",
+    "version": "1.0.0",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Junaid Qadir Shekhanzai",
+            "email": "[email protected]"
+        }
+    ],
+    "minimum-stability": "dev",
+    "require": [],
+    "autoload": {
+        "files": [
+        ],
+        "psr-4": {
+            "MoonBear\\BladeComponents\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "MoonBear\\BladeComponents\\ServiceProvider"
+            ]
+        }
+    }
+}
diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace MoonBear\BladeComponents;
+
+class ServiceProvider extends \Illuminate\Support\ServiceProvider
+{
+    /**
+     * Register services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->loadViewsFrom(__DIR__.'/resources/views/components', 'moonbear/blade-components');
+        $this->publishes([
+            __DIR__.'/resources/views/components' => resource_path('views/vendor/moonbear/blade-components'),
+        ]);
+    }
+}
diff --git a/src/resources/views/components/themes/default/alert.blade.php b/src/resources/views/components/themes/default/alert.blade.php
@@ -0,0 +1,22 @@
+<div
+    class="alert alert-{{$type}} alert-dismissible fade show text-center border-left-0 border-bottom-0 border-right-0 border-{{$type}} border-top mb-0"
+    role="alert">
+    {!! $slot !!}
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+
+@push('scripts')
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            $('.alert').animate({
+                marginTop: "+=50px"
+            }, 500, '', function () {
+                $(this).delay(3000).animate({marginTop: "-=50px"}, 500, 'linear', function () {
+                    $(this).hide();
+                });
+            });
+        })
+    </script>
+@endpush
diff --git a/src/resources/views/components/themes/default/checkbox.blade.php b/src/resources/views/components/themes/default/checkbox.blade.php
@@ -0,0 +1,21 @@
+<div class="form-group row">
+    <label for="{{$name}}" class="{{@$leftCol??'col-sm-6'}} col-form-label text-md-right">{{$label}}</label>
+    <div class="{{@$rightCol??'col-sm'}}">
+        @foreach($options as $key => $option)
+            <div class="form-check mt-2">
+                <input class="form-check-input" type="checkbox" name="{{$name}}" id="{{$name}}{{$key}}"
+                       value="{{$option['value']}}"
+                       @if($value == $option['value']) checked @endif
+                >
+                <label class="form-check-label" for="{{$name}}{{$key}}">
+                    {{$option['label']}}
+                </label>
+            </div>
+        @endforeach
+        @if($errors->has($name))
+            <small id="{{$name}}HelpId" class="form-text text-danger">{{$errors->first($name)}}</small>
+        @else
+            <small id="{{$name}}HelpId" class="form-text text-muted">{{$helpText}}</small>
+        @endif
+    </div>
+</div>
diff --git a/src/resources/views/components/themes/default/datetime-picker.blade.php b/src/resources/views/components/themes/default/datetime-picker.blade.php
@@ -0,0 +1,69 @@
+<div class="form-group row">
+    <label for="{{isset($id)?$id:$name}}"
+           class="{{@$leftCol??'col-sm-6'}} col-form-label text-md-right">{{$label}}</label>
+    <div class="{{@$rightCol??'col-sm'}}">
+        <div class="input-group flatpickr">
+            @if(isset($prepend) && strlen(trim($prepend)) > 0)
+                <div class="input-group-prepend">
+                    @if($prepend != strip_tags($prepend))
+                        {!! $prepend !!}
+                    @else
+                        <span class="input-group-text">{{$prepend}}</span>
+                    @endif
+                </div>
+            @endif
+            <input data-input class="form-control  {{$errors->has($name) ? 'is-invalid' : null}}"
+                   type="{{@$type?:'text'}}"
+                   name="{{$name}}" id="{{isset($id)?$id:$name}}" aria-describedby="{{isset($id)?$id:$name}}HelpId"
+                   value="{{old($name, $value)}}"
+                   @if(@$placeholder) placeholder="{{@$placeholder}}" @endif
+                   @if(@$pattern) pattern="{{@$pattern}}" @endif
+                   @if($type == 'number') step="{{@$step?:1}}" @endif
+                   @if($type == 'number') min="{{@$min?:0}}" @endif
+                   @if($type == 'number' && isset($max)) max="{{@$max}}" @endif
+            />
+            <div class="input-group-append">
+                <button type="button" class="btn btn-outline-secondary" title="Toggle" data-toggle>
+                    <i class="fas fa-calendar"></i>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" title="Clear" data-clear>
+                    <i class="fas fa-times  "></i>
+                </button>
+            </div>
+            {{-- <flat-pickr class="form-control {{$errors->has($name) ? 'is-invalid' : null}}"
+                         name="{{$name}}" id="{{isset($id)?$id:$name}}" aria-describedby="{{isset($id)?$id:$name}}HelpId"
+                         value="{{old($name, $value)}}"
+                         :config="{
+                                     wrap: true,
+                                     altFormat: 'F j, Y  @ h:i K',
+                                     altInput: true,
+                                     dateFormat: 'Y-m-d H:i:S',
+                                     enableTime: true,
+                                     enableSeconds:true,
+                                 }"></flat-pickr>--}}
+
+        </div>
+
+        @if($errors->has($name))
+            <small id="{{isset($id)?$id:$name}}HelpId" class="form-text text-danger">{{$errors->first($name)}}</small>
+        @else
+            <small id="{{isset($id)?$id:$name}}HelpId" class="form-text text-muted">{{$helpText}}</small>
+        @endif
+    </div>
+</div>
+
+@push('scripts')
+    <script>
+        $(document).ready(($) => {
+            flatpickr("#{{$name}}", {
+                wrap: false,
+                altFormat: '{{@$config['altFormat'] ? @$config['altFormat'] : 'F j, Y '}}',
+                altInput: true,
+                dateFormat: '{{ @$config['dateFormat'] ? @$config['dateFormat'] : 'Y-m-d H:i:S' }}',
+                enableTime: {{@$config['enableTime']?$config['enableTime']:'false'}},
+                enableSeconds: false,
+            });
+        })
+        //'F j, Y  @ h:i K'
+    </script>
+@endpush
diff --git a/src/resources/views/components/themes/default/file.blade.php b/src/resources/views/components/themes/default/file.blade.php
@@ -0,0 +1,84 @@
+<div class="form-group mb-3 row {{@$isImage ? 'mb-0' : ''}}">
+    <label for="{{$name}}" class="{{@$leftCol??'col-sm-6'}} col-form-label text-md-right">{{$label}}</label>
+    <div class="{{@$rightCol??'col-sm'}}">
+        <div class="input-group">
+            @if(isset($prepend) && strlen(trim($prepend)) > 0)
+                <div class="input-group-prepend">
+                    @if($prepend != strip_tags($prepend))
+                        {!! $prepend !!}
+                    @else
+                        <span class="input-group-text">{{$prepend}}</span>
+                    @endif
+                </div>
+            @endif
+            <input class="form-control pb-5 {{$errors->has($name) ? 'is-invalid' : null}}"
+                   type="file"
+                   name="{{$name}}" id="{{$name}}" aria-describedby="{{$name}}HelpId"
+                   value="{{old($name, $value)}}"
+                   @if(@$placeholder) placeholder="{{@$placeholder}}" @endif
+            />
+            @if(isset($append) && strlen(trim($append)) > 0)
+                <div class="input-group-append">
+                    @if($append != strip_tags($append))
+                        {!! $append !!}
+                    @else
+                        <span class="input-group-text">{{$append}}</span>
+                    @endif
+                </div>
+            @endif
+        </div>
+        @if(@$isImage)
+            <div class="form-control text-center border-top-0" style="height: 150px">
+                <img class="align-self-center ml-auto mr-auto"
+                     id="{{$name}}Preview" height="100px"
+                     src=""/>
+            </div>
+        @endif
+        @if($errors->has($name))
+            <small id="{{$name}}HelpId" class="form-text text-danger">{{$errors->first($name)}}</small>
+        @else
+            <small id="{{$name}}HelpId" class="form-text text-muted">{{$helpText}}</small>
+        @endif
+    </div>
+    {{--<div class="col-sm-2 p-2">
+        <img id="{{$name}}Preview" class="img-thumbnail d-block ml-auto mr-auto "
+             alt="" width="150px" src="{{@$preview}}"/>
+    </div>--}}
+</div>
+@if(@$isImage)
+    {{--    <div class="form-group row mb-4">
+            <div class="col-sm-6"></div>
+            <div class="col-sm-6 d-flex text-center">
+                <img class="align-self-center ml-auto mr-auto"
+                     id="{{$name}}Preview" height="100px"
+                     src=""/>
+            </div>
+        </div>--}}
+
+    @push('scripts')
+    <script>
+        (function () {
+            $ = jQuery;
+            function setPreview(file) {
+                var reader = new FileReader();
+                // Set preview image into the popover data-content
+                reader.onload = function (e) {
+
+                    let src = e.target.result;
+                    $('#{{$name}}Preview').attr('src', src);
+                };
+                reader.readAsDataURL(file);
+            }
+
+            @if($value)
+            $('#{{$name}}Preview').attr('src', "{{$value}}");
+            @endif
+
+            $("#{{$name}}:file").change(function () {
+                var file = this.files[0];
+                setPreview(file);
+            });
+        })();
+    </script>
+    @endpush
+@endif
diff --git a/src/resources/views/components/themes/default/form-base.blade.php b/src/resources/views/components/themes/default/form-base.blade.php
@@ -0,0 +1,21 @@
+<form action="{{$action}}" method="post"
+      @if(@$hasFile==true)
+      enctype="multipart/form-data"
+        @endif
+>
+    {{csrf_field()}}
+    @if($method != 'post')
+        <input type="hidden" name="_method" value="{{$method}}"/>
+    @endif
+    <div class="row">
+        <div class="col-md-8">
+            @include($form)
+            <div class="form-group row">
+                <div class="col-md-6">&nbsp;</div>
+                <div class="col-md-6">
+                    {{$slot}}
+                </div>
+            </div>
+        </div>
+    </div>
+</form>