208 lines
11 KiB
PHP
208 lines
11 KiB
PHP
|
|
@php use Illuminate\Support\Str; @endphp
|
|
@props([
|
|
// name to uniquely identity a dropdown
|
|
'name' => 'bw-dropdown',
|
|
|
|
// the default text to display when the dropdown shows
|
|
'placeholder' => 'Select One',
|
|
|
|
// optional function to execute when a dropdown item is selected
|
|
// by default the value of a dropdown item is written to an input field with the
|
|
// name dd_name. Where name is the name you provided for the dropdown
|
|
// if you named your dropdown countries for example, whatever country is selected can
|
|
// be found in the <input type="hidden" clas="input-countries" name="dd_countries" />
|
|
'onselect' => '',
|
|
|
|
// data to pass to the dropdown
|
|
// your data must be a json string (not object) with the keys value and label
|
|
// value is whatever value will be passed to your code when an item is selected
|
|
// label is what will be displayed to the user
|
|
// if you want to display icons for each item your json can contain the optional 'icon' key
|
|
// where icons are required, they must be in the semantic UI icon format
|
|
// [{"label":"Burkina Faso","icon":"bf flag","value":"+226"},{"label":"Ghana","icon":"gh flag","value":"+233"},{"label":"Ivory Coast","icon":"ivc flag","value":"+228"}]
|
|
'data' => [],
|
|
|
|
// what key in your data array should be used to populate 'value' of the dropdown when an item is selected
|
|
// by default a key of 'value' is used. If your data is something like [ {"id":"1","name":"Burkina Faso"}]
|
|
// your value_key will be 'id'
|
|
'value_key' => 'value',
|
|
'valueKey' => 'value',
|
|
|
|
// what key in your data array should be used to display the labels the user will see as dropdown items
|
|
// the default key used for labels is 'label'. If your data is something like [ {"id":"1","name":"Burkina Faso"}]
|
|
// your label_key will be 'name'
|
|
'label_key' => 'label',
|
|
'labelKey' => 'label',
|
|
|
|
// what key in your data array should be used to display flag icons next to the labels
|
|
// [ {"id":"1","name":"Burkina Faso", "flag":"/assets/images/bf-flag.png"}]
|
|
// your flag_key will be 'image'
|
|
'flag_key' => null,
|
|
'flagKey' => null,
|
|
|
|
// what key in your data array should be used to display images next to the labels
|
|
// the default key used for images is null, meaning images will be ignored. If your data is something like
|
|
// [ {"id":"1","name":"Burkina Faso", "image":"/assets/images/bf-flag.png"}]
|
|
// your image_key will be 'image'
|
|
'image_key' => null,
|
|
'imageKey' => null,
|
|
|
|
// there are times you will want the dropdown items to go to a link when clicked on
|
|
// useful if you are using the dropdown as a navigation component for example
|
|
// the url_key defines which key in your data array to be use as urls
|
|
// the default key used for urls is null, meaning urls will be ignored.
|
|
// setting a urlKey overwrites whatever is defined in 'onselect'
|
|
'url_key' => null,
|
|
'urlKey' => null,
|
|
|
|
// if url_key is set, should the selected item's value be appended to the url
|
|
'append_value_to_url' => config('bladewind.dropdown.append_value_to_url', false),
|
|
'appendValueToUrl' => config('bladewind.dropdown.append_value_to_url', false),
|
|
|
|
// if url_key is set and append_value_to_url is 'true', what variable name should
|
|
// the value be appended to the url as. Default is 'value'
|
|
// url will look like /user/settings/?value=devices
|
|
'append_value_to_url_as' => 'value',
|
|
'appendValueToUrlAs' => 'value',
|
|
|
|
// there are instances you want the name passed by the dropdown when you submit a form to be
|
|
// different from the name you gave the dropdown. Example. you may name the dropdown as country but
|
|
// want it to submit data as country_id.
|
|
'data_serialize_as' => '',
|
|
'dataSerializeAs' => '',
|
|
|
|
// enforces validation if set to true
|
|
'required' => 'false',
|
|
|
|
// adds margin after the input box
|
|
'add_clearing' => true,
|
|
'addClearing' => true,
|
|
|
|
// determines if a value passed in the data array should automatically be selected
|
|
// useful when using the component in edit mode or as part of filter options
|
|
// the value you specify should exist in your value_key. If your value_key is 'id', you
|
|
// cannot set a selected_value of 'maize white'
|
|
'selected_value' => '',
|
|
'selectedValue' => '',
|
|
|
|
// setting this to true adds a search box above the dropdown items
|
|
// this can be used to filter the contents of the dropdown items
|
|
'searchable' => false,
|
|
|
|
// this is just a hack to turn the dropdown into a filter component
|
|
// setting to true shows a filter icon in the component
|
|
'show_filter_icon' => false,
|
|
'showFilterIcon' => false,
|
|
])
|
|
@php
|
|
$append_value_to_url = filter_var($append_value_to_url, FILTER_VALIDATE_BOOLEAN);
|
|
$appendValueToUrl = filter_var($appendValueToUrl, FILTER_VALIDATE_BOOLEAN);
|
|
$show_filter_icon = filter_var($show_filter_icon, FILTER_VALIDATE_BOOLEAN);
|
|
$showFilterIcon = filter_var($showFilterIcon, FILTER_VALIDATE_BOOLEAN);
|
|
$add_clearing = filter_var($add_clearing, FILTER_VALIDATE_BOOLEAN);
|
|
$addClearing = filter_var($addClearing, FILTER_VALIDATE_BOOLEAN);
|
|
$searchable = filter_var($searchable, FILTER_VALIDATE_BOOLEAN);
|
|
$required = filter_var($required, FILTER_VALIDATE_BOOLEAN);
|
|
|
|
if($appendValueToUrl) $append_value_to_url = $appendValueToUrl;
|
|
if ($appendValueToUrlAs !== $append_value_to_url_as) $append_value_to_url_as = $appendValueToUrlAs;
|
|
if ($dataSerializeAs !== $data_serialize_as) $data_serialize_as = $dataSerializeAs;
|
|
if ($selectedValue !== $selected_value) $selected_value = $selectedValue;
|
|
if ($valueKey !== $value_key) $value_key = $valueKey;
|
|
if ($labelKey !== $label_key) $label_key = $labelKey;
|
|
if ($flagKey !== $flag_key) $flag_key = $flagKey;
|
|
if ($urlKey !== $url_key) $url_key = $urlKey;
|
|
if ($imageKey !== $image_key) $image_key = $imageKey;
|
|
if ($showFilterIcon) $show_filter_icon = $showFilterIcon;
|
|
if (!$add_clearing) $add_clearing = $addClearing;
|
|
|
|
$data = (!is_array($data)) ? json_decode(str_replace('"', '"', $data), true) : $data;
|
|
$onselect = str_replace(''', "'", $onselect);
|
|
$input_name = preg_replace('/[\s-]/', '_', $name);
|
|
|
|
if(! isset($data[0][$label_key]) ) {
|
|
die('<p style="color:red"><x-bladewind.dropdown />: ensure the value you set as label_key exists in your array data</p>');
|
|
}
|
|
if( !empty($url_key) && ! isset($data[0][$url_key]) ) {
|
|
die('<p style="color:red"><x-bladewind.dropdown />: ensure the value you set as url_key exists in your array</p>');
|
|
}
|
|
|
|
if( !empty($flag_key) && !isset($data[0][$flag_key]) ) {
|
|
die('<p style="color:red"><x-bladewind.dropdown />: ensure the value you set as flag_key exists in your array</p>');
|
|
}
|
|
|
|
@endphp
|
|
|
|
<div class="relative {{ $name }} @if($add_clearing == 'true') mb-3 @endif ">
|
|
<button type="button" class="bw-dropdown rounded-md bg-white cursor-pointer text-left w-full text-gray-400 flex justify-between dark:text-dark-300 dark:border-dark-700 dark:bg-dark-800">
|
|
<label class="cursor-pointer">
|
|
@if($show_filter_icon)
|
|
<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">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
|
</svg>
|
|
@endif
|
|
{{ $placeholder }}@if($required) <span class="text-red-300">*</span>@endif</label>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-40 mr-[-10px]" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
<div class="w-full absolute z-50 bg-white -mt-1 shadow-md cursor-pointer dropdown-items-parent dark:text-dark-300 dark:border-dark-700 dark:bg-dark-800 hidden" style="max-height: 270px; overflow: scroll;">
|
|
<div class="dropdown-items border border-gray-300 dark:border-dark-700 divide-y relative w-full">
|
|
@if($searchable)
|
|
<div class="bg-slate-50 dark:text-dark-300 dark:border-dark-700 dark:bg-dark-900 sticky top-0 min-w-full">
|
|
<x-bladewind::input
|
|
name="search-dropdown"
|
|
add_clearing="false"
|
|
class="w-full bg-transparent border-0 focus:border-0"
|
|
onkeyup="searchDropdown(this.value, '{{ $name }}')"
|
|
placeholder="Type here..." />
|
|
</div>
|
|
@endif
|
|
<div
|
|
data-value=""
|
|
data-label=""
|
|
data-user-function=""
|
|
data-parent="{{ $name }}"
|
|
class="dd-item p-4 cursor-pointer default hidden">{{ $placeholder }}
|
|
@if($required) <span class="text-red-300">*</span>@endif</div>
|
|
@for ($x=0; $x < count($data); $x++)
|
|
@php
|
|
$url_target = 'self';
|
|
$url = (isset($data[$x][$url_key]) && $data[$x][$url_key] !== '') ?
|
|
($data[$x][$url_key] . (($append_value_to_url) ?
|
|
"?{$append_value_to_url_as}=" . $data[$x][$value_key] : '')) : '';
|
|
|
|
if($url !== '' && ( Str::contains($url, 'http://') || Str::contains($url, 'https://')) && !Str::contains($url, request()->getHost()) ){
|
|
$url_target = 'blank';
|
|
}
|
|
$value = $data[$x][$value_key];
|
|
@endphp
|
|
<div
|
|
{{ $attributes->merge(['class' => "dd-item p-3 cursor-pointer hover:bg-gray-100 flex items-center dark:text-dark-300 dark:border-dark-700 dark:bg-dark-800 dark:hover:bg-dark-900 dark:hover:text-dark-300"]) }}
|
|
data-href="{{$url}}"
|
|
data-href-target="{{$url_target}}"
|
|
data-value="{{ $value }}"
|
|
@if($selected_value == $value)
|
|
data-selected="true"
|
|
@else
|
|
data-user-function="{{ $onselect }}"
|
|
@endif
|
|
data-label="{{ $data[$x][$label_key] }}"
|
|
data-parent="{{ $name }}">
|
|
@if (!empty($flag_key) && empty($image_key))<i class="{{ $data[$x][$flag_key] }} flag"></i>@endif
|
|
@if (!empty($image_key))<x-bladewind::avatar size="tiny" css="!mr-3" image="{{ $data[$x][$image_key] }}" />@endif
|
|
<div>{!! $data[$x][$label_key] !!}</div>
|
|
</div>
|
|
@endfor
|
|
<input
|
|
type="hidden"
|
|
class="bw-{{ $name }} {{ ($required) ? ' required' : '' }}"
|
|
name="{{ ($data_serialize_as != '') ? $data_serialize_as : $input_name }}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>el_name = '{{ $name }}';</script>
|
|
<script src="{{ asset('vendor/bladewind/js/dropdown.js') }}"></script>
|