Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* zin: modify interactions regarding other options.

Browse Source
This commit is contained in:
wangzemei
2024-05-08 15:55:00 +08:00
parent b5345b865a
commit a03c360faf
3 changed files with 75 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/zin/wg/thinkchecklist/css/v1.css
+8 -10
View File
@@ -1,11 +1,9 @@
.think-check-list .checkbox-primary, .think-check-list .radio-primary {width: 100%; min-height: 3rem; border: 1px solid var(--color-gray-300); color: var(--color-gray-800); padding: 0.75rem 1.625rem 0.75rem 1.5rem; border-radius: var(--radius); font-size: 1rem;}
.think-check-list .checkbox-primary>label,.think-check-list .radio-primary>label {width: 100%; padding-left: 0;}
.think-check-list .checkbox-primary>label:after, .think-check-list .checkbox-primary>label:before,
.think-check-list .radio-primary>label:after, .think-check-list .radio-primary>label:before {right: 0; left: unset;}
.think-check-list .checkbox-primary.checked, .think-check-list .checkbox-primary>input.checked .think-check-list .checkbox-primary>input[type=checkbox]:checked,
.think-check-list .radio-primary.checked, .think-check-list .radio-primary>input.checked, .think-check-list .radio-primary>input[type=radio]:checked {color: var(--color-primary-500); border: 1px solid var(--color-primary-500);}
.think-check-list>.item-input>input[type=text] {background-color: #fff;}
.think-check-list .checkbox-primary:hover, .think-check-list .radio-primary:hover {box-shadow: 0px 0.25rem 0.5rem 0px rgba(var(--color-primary-500-rgb), .3); border: 1px solid var(--color-primary-500);}
.think-check-list .radio-primary>label {font-family: ZentaoIcon !important;}
.think-check-list .item-control.is-checked {border: 1px solid var(--color-primary-500); color: var(--color-primary-500);}
.think-check-list .item-control:hover {box-shadow: 0px 0.25rem 0.5rem 0px rgba(var(--color-primary-500-rgb), .3); border: 1px solid var(--color-primary-500);}
.think-check-list .item-control textarea {background-color: #fff;}
.think-check-list .checkbox-primary {--checkbox-size: 16px;}
.think-check-list .checkbox-primary>input[type=checkbox]:checked+label:after {left: 1px; --tw-content: "\e5ca"; color: var(--color-primary-500); font-weight: 600;}
.think-check-list .checkbox-primary.checked>label:before, .think-check-list .checkbox-primary>input[type=checkbox]:checked+label:before {background-color: unset; border-color: var(--color-primary-500); color: var(--color-primary-500);}
.think-check-list .checkbox-primary.checked>label, .think-check-list .radio-primary>label {font-family: ZentaoIcon !important;}
.think-check-list .radio-primary>label:before, .think-check-list .radio-primary.checked>label:before, .think-check-list .radio-primary>input[type=radio]:checked+label:before {display: none;}
.think-check-list .radio-primary>label:after {content: "\e5ca"; color: var(--color-primary-500); background-color: unset; top: 2px; font-weight: 600;}
.think-check-list .radio-primary>label:after {--tw-content: "\e5ca"; color: var(--color-primary-500); font-size: 16px; background-color: unset; top: -2px; left: 2px; font-weight: 600;}
lib/zin/wg/thinkchecklist/js/v1.js
+23 -7
View File
@@ -1,21 +1,37 @@
window.handleInput = function()
window.stopPropagation = function(event)
{
if($(this).closest('.radio-primary').length)
event.stopPropagation();
}
window.toggleChecked = function()
{
if($(this).data('type') == 'radio')
{
$(this).find('input').prop('checked', !$(this).find('input').prop('checked'));
$(this).closest('.think-check-list').find('.item-control').removeClass('is-checked');
$(this).toggleClass('is-checked', $(this).find('input').is(':checked'));
$(this).closest('.think-check-list').find('.radio-primary').removeClass('checked');
$(this).closest('.radio-primary').toggleClass('checked');
$(this).find('.radio-primary').toggleClass('checked');
}
else
{
$(this).closest('.checkbox-primary').toggleClass('checked', $(this).is(':checked'));
$(this).find('input').prop('checked', !$(this).find('input').prop('checked'));
$(this).find('.checkbox-primary').toggleClass('checked', $(this).find('input').is(':checked'));
$(this).toggleClass('is-checked', $(this).find('input').is(':checked'));
}
if($(this).closest('.item-input').length)
if($(this).hasClass('has-input'))
{
$(this).closest('.item-input').find('input[type="text"]').prop('disabled', !$(this).is(':checked'));
$(this).find('textarea').prop('disabled', !$(this).find('input').prop('checked'));
}
else
{
$(this).closest('.think-check-list').find('.item-input input[type="text"]').prop('disabled', true);
if($(this).data('type') == 'radio') $(this).closest('.think-check-list').find('.has-input textarea').prop('disabled', true);
}
}
window.inputOther = function()
{
this.style.height = 'auto';
this.style.height = (this.scrollHeight > 96 ? 96 : this.scrollHeight) + 'px';
}
lib/zin/wg/thinkchecklist/v1.php
+44 -13
View File
@@ -2,7 +2,7 @@
declare(strict_types=1);
namespace zin;
require_once dirname(__DIR__) . DS . 'input' . DS . 'v1.php';
require_once dirname(__DIR__) . DS . 'textarea' . DS . 'v1.php';
require_once dirname(__DIR__) . DS . 'checkbox' . DS . 'v1.php';
class thinkCheckList extends wg
@@ -52,24 +52,55 @@ class thinkCheckList extends wg
$props = $this->props->pick(['primary', 'type', 'name', 'disabled']);
if(!empty($props['name']) && !empty($item['value'])) $props['id'] = $props['name'] . $item['value'];
if(!empty($item['isOther'])) return div
$itemClass = $this->prop('type') === 'checkbox' ? 'gap-4 px-4' : 'gap-3 px-3';
$text = $item['text'];
unset($item['text']);
if(!empty($item['isOther']))
{
return div
(
setClass('item-control has-input w-full py-3 flex items-center justify-between border cursor-pointer ' . $itemClass),
setData('type', $this->prop('type')),
on::click('toggleChecked'),
div
(
setClass('flex items-start text-lg gap-1.5 flex-1'),
div(setStyle(array('min-width' => '60px')), $text),
new textarea
(
set(array(
'rows' => 1,
'disabled' => !isset($item['checked']) || !$item['checked'],
'name' => isset($item['value']) ? $item['value'] : 'other',
'value' => isset($item['showText']) ? $item['showText'] : ''
)),
on::input('inputOther'),
on::click('stopPropagation')
),
),
new checkbox
(
set($props),
set($item),
$this->prop('type') == 'radio' ? on::click('stopPropagation') : null,
isset($item['checked']) && $item['checked'] ? set::rootClass('checked') : null
)
);
}
return div
(
setClass('w-full relative cursor-pointer item-input'),
setData('type', $this->prop('type')),
on::click('toggleChecked'),
setClass('item-control w-full py-3 flex items-center justify-between border cursor-pointer ' . $itemClass),
div(setClass('text-lg flex-1'), $text),
new checkbox
(
set($props),
set($item),
isset($item['checked']) && $item['checked'] ? set::rootClass('checked') : null,
on::change('handleInput')
),
new input(set(array(
'disabled' => !isset($item['checked']) || !$item['checked'],
'name' => $item['value'],
'class' => 'absolute top-2',
'style' => array('width' => '80%', 'height' => '32px', 'right' => '45px')
))),
$this->prop('type') == 'radio' ? on::click('stopPropagation') : null,
isset($item['checked']) && $item['checked'] ? set::rootClass('checked') : null
)
);
return new checkbox(set($props), set($item), isset($item['checked']) && $item['checked'] ? set::rootClass('checked') : null, on::change('handleInput'));
}
protected function build()