130 lines
6.1 KiB
PHP

@props([
// name of the input field for use in forms
'name' => 'textarea-'.uniqid(),
'rows' => config('bladewind.textarea.rows', 3),
'label' => '',
'required' => false,
'add_clearing' => config('bladewind.textarea.add_clearing', true),
'addClearing' => config('bladewind.textarea.add_clearing', true),
'placeholder' => '', // placeholder text
'selected_value' => '', // selected value
'selectedValue' => '',
// message to display when validation fails for this field
// this is just attached to the input field as a data attribute
'error_message' => '',
'errorMessage' => '',
// this is an easy way to pass a translatable heading to the notification component
// since it is triggered from Javascript, it is hard to translate any text from within js
'error_heading' => config('bladewind.textarea.error_heading', 'Error'),
'errorHeading' => config('bladewind.textarea.error_heading', 'Error'),
// how should error messages be displayed for this input
// by default error messages are displayed in the Bladewind notification component
// the component should exist on the page
'show_error_inline' => config('bladewind.textarea.show_error_inline', false),
'showErrorInline' => config('bladewind.textarea.show_error_inline', false),
'toolbar' => config('bladewind.textarea.toolbar', false),
'except' => '',
])
@php
// reset variables for Laravel 8 support
$add_clearing = parseBladewindVariable($add_clearing);
$addClearing = parseBladewindVariable($addClearing);
$show_error_inline = parseBladewindVariable($show_error_inline);
$showErrorInline = parseBladewindVariable($showErrorInline);
$required = parseBladewindVariable($required);
if (!$addClearing) $add_clearing = $addClearing;
if($showErrorInline) $show_error_inline = $showErrorInline;
if ($selectedValue !== $selected_value) $selected_value = $selectedValue;
if ($errorMessage !== $error_message) $error_message = $errorMessage;
if ($errorHeading !== $error_heading) $error_heading = $errorHeading;
//----------------------------------------------------
$name = preg_replace('/[\s-]/', '_', $name);
$required_symbol = ($label == '' && $required) ? ' *' : '';
$is_required = ($required) ? 'required' : '';
$placeholder_color = ($label !== '') ? 'placeholder-transparent dark:placeholder-transparent' : '';
@endphp
<div class="relative w-full @if($add_clearing) mb-3 @endif">
@if($toolbar)
<div id="{{$name}}"></div>
<textarea hidden name="{{ $name }}" id="{{ $name }}-hidden" class="size-0"></textarea>
@else
<textarea {{ $attributes->merge(['class' => "bw-input peer $is_required $name $placeholder_color"]) }}
id="{{ $name }}"
name="{{ $name }}"
rows="{{ $rows }}"
@if($error_message !== '')
data-error-message="{{$error_message}}"
data-error-inline="{{$show_error_inline}}"
data-error-heading="{{$error_heading}}"
@endif
placeholder="{{ ($label !== '') ? $label : $placeholder }}{{$required_symbol}}">{{$selected_value}}</textarea>
@endif
@if($error_message !== '')
<div class="text-red-500 text-xs pt-2 px-1 {{ $name }}-inline-error hidden">{{$error_message}}</div>
@endif
@if($label !== '')
<label for="{{ $name }}" class="form-label dark:peer-focus:pt-1"
onclick="domEl('.{{$name}}').focus()">{{ $label }}
@if($required == 'true')
<x-bladewind::icon name="star" class="!text-red-400 !w-2 !h-2 mt-[-2px]" type="solid"/>
@endif
</label>
@endif
</div>
@if($toolbar)
@once
{{-- <span class="hidden ql-toolbar ql-snow ql-stroke ql-thin ql-container ql-editor ql-blank"></span>--}}
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet"/>
<script>
const toolbarOptions = ['bold', 'italic', 'underline',
{'align': []},
{'indent': '-1'}, {'indent': '+1'}, 'link',
{'color': []}, {'background': []},
{'list': 'ordered'}, {'list': 'bullet'},
{'list': 'check'}, 'image', 'blockquote', 'code-block', 'clean'
];
const modifyToolbarOptions = (toolbarOptions, except) => {
except = except.replaceAll(' ', '');
const exceptArray = except.split(',').map(item => item.trim());
return toolbarOptions.filter(option => {
if (typeof option === 'string') {
return !exceptArray.includes(option);
} else if (typeof option === 'object') {
const key = Object.keys(option)[0];
return !exceptArray.includes(key);
}
return true;
});
}
const quillOptions = {
theme: 'snow',
placeholder: '{{ ($label !== '') ? $label : $placeholder }}',
modules: {
toolbar: '',
},
};
</script>
@endonce
<script>
if (typeof Quill === 'undefined') {
console.log('Unable to load assets from https://quilljs.com');
} else {
quillOptions.modules.toolbar = modifyToolbarOptions(toolbarOptions, '{{$except}}');
var quill_{{$name}} = new Quill('#{{$name}}', quillOptions);
// Update the hidden input field whenever the textarea content changes
quill_{{ $name }}.on('text-change', function (delta, oldDelta, source) {
var value = quill_{{ $name }}.root.innerHTML;
document.getElementById('{{ $name }}-hidden').value = value;
});
// set the initial content for quill
quill_{{ $name }}.root.innerHTML = @js($selected_value);
}
</script>
@endif