diff --git a/lib/zin/wg/entitylist/v1.php b/lib/zin/wg/entitylist/v1.php index 99e4673b5e..d51277d385 100644 --- a/lib/zin/wg/entitylist/v1.php +++ b/lib/zin/wg/entitylist/v1.php @@ -13,11 +13,17 @@ class entityList extends wg 'items' => 'array', // 对象对象列表。 'type' => '?string', // 对象类型。 'viewUrl' => '?string|bool=true', // 查看链接模版,使用 `{id}` 代替对象 ID,如果设置为 false 不展示链接,如果设置为 true 则使用默认链接。 - 'onRenderItem' => '?callable' // 渲染对象对象的回调函数。 + 'divider' => '?bool', // 是否显示分割线。 + 'border' => '?bool', // 是否显示边框。 + 'hover' => '?bool=true', // 是否有鼠标悬停效果。 + 'compact' => '?bool=true', // 是否显示为紧凑模式。 + 'onRenderItem' => '?callable' // 渲染对象对象的回调函数。 ); protected string $viewUrl = ''; + protected bool $compact = true; + protected function created() { if(!$this->hasProp('name')) @@ -36,7 +42,7 @@ class entityList extends wg 'innerTag' => 'div', 'titleClass' => 'flex gap-2 items-center flex-auto min-w-0', 'textClass' => 'flex-none', - 'actionsClass' => 'absolute top-0 right-0', + 'actionsClass' => $this->compact ? 'absolute top-0.5 right-0' : null, 'hint' => $entity->title, 'title' => span(setClass('text-clip'), $entity->title), 'leading' => idLabel::create($entity->id) @@ -75,6 +81,7 @@ class entityList extends wg if($viewUrl === true) $viewUrl = createLink($type, 'view', 'id={id}'); } $this->viewUrl = $viewUrl; + $this->compact = $this->prop('compact'); } protected function build() @@ -85,6 +92,10 @@ class entityList extends wg ( setClass($this->prop('name')), set::items($this->getItems()), + set::divider($this->prop('divider')), + set::border($this->prop('border')), + set::hover($this->prop('hover')), + set::compact($this->compact), set::onRenderItem($this->prop('onRenderItem')), set($this->getRestProps()), $this->children() diff --git a/lib/zin/wg/simplelist/v1.php b/lib/zin/wg/simplelist/v1.php index 934bafed64..d86a0db699 100644 --- a/lib/zin/wg/simplelist/v1.php +++ b/lib/zin/wg/simplelist/v1.php @@ -14,9 +14,25 @@ class simpleList extends wg ( 'items' => '?array', 'tagName' => '?string="ul"', - 'onRenderItem' => '?callable', // 渲染条目的回调函数。 + 'divider' => '?bool', // 是否显示分割线。 + 'border' => '?bool', // 是否显示边框。 + 'hover' => '?bool=true', // 是否有鼠标悬停效果。 + 'compact' => '?bool=true', // 是否显示为紧凑模式。 + 'onRenderItem' => '?callable', // 渲染条目的回调函数。 ); + public static function getPageCSS(): ?string + { + return <<<'CSS' + .simple-list.has-border {border: 1px solid var(--color-border);} + .simple-list.has-border .list-item {padding-left: 8px; padding-right: 8px;} + .simple-list.has-divider * + .list-item {border-top: 1px solid var(--color-border);} + .simple-list.has-hover .list-item {transition: .2s background-color;} + .simple-list.has-hover .list-item:hover {background-color: var(--state-color);} + .simple-list.is-loose .list-item {padding-top: 2px; padding-bottom: 2px;} + CSS; + } + public bool $isH5List = true; public function onBuildItem($item): node|null @@ -75,13 +91,15 @@ class simpleList extends wg protected function build() { $tagName = $this->prop('tagName'); + $divider = $this->prop('divider'); + $border = $this->prop('border'); $this->isH5List = $tagName === 'ul' || $tagName === 'ol'; $items = $this->buildItems(); return h::$tagName ( - setClass('list', $this->hasIcons ? 'has-icons' : '', $this->hasCheckbox ? 'has-checkbox' : ''), + setClass('list simple-list', array('has-icons' => $this->hasIcons, 'has-checkbox' => $this->hasCheckbox, 'has-divider' => $divider, 'has-border' => $border, 'has-hover' => $this->prop('hover')), $this->prop('compact') ? 'is-compact' : 'is-loose'), set($this->getRestProps()), $items, $this->children()