From d7c12e952851f4613be8c1f64ff549d97d67e344 Mon Sep 17 00:00:00 2001
From: dingyongliang <dingyongliang@easycorp.ltd>
Date: Mon, 19 Jun 2023 16:04:52 +0800
Subject: [PATCH] * zin: add collapse btn wg.

---
 lib/zin/func.php              | 11 ++++++++++
 lib/zin/wg/collapsebtn/v1.php | 38 +++++++++++++++++++++++++++++++++++
 lib/zin/wg/tabs/css/v1.css    |  2 +-
 lib/zin/wg/tabs/v1.php        | 18 +++--------------
 4 files changed, 53 insertions(+), 16 deletions(-)
 create mode 100644 lib/zin/wg/collapsebtn/v1.php

diff --git a/lib/zin/func.php b/lib/zin/func.php
index e3e163abab..37030de902 100644
--- a/lib/zin/func.php
+++ b/lib/zin/func.php
@@ -1354,6 +1354,17 @@ function backBtn(): backBtn
     return createWg('backBtn', func_get_args());
 }
 
+/**
+ * Collapse btn widget.
+ *
+ * string target
+ * string parent
+ */
+function collapseBtn(): collapseBtn
+{
+    return createWg('collapseBtn', func_get_args());
+}
+
 /**
  * Main navbar widget.
  *
diff --git a/lib/zin/wg/collapsebtn/v1.php b/lib/zin/wg/collapsebtn/v1.php
new file mode 100644
index 0000000000..98b0bea19c
--- /dev/null
+++ b/lib/zin/wg/collapsebtn/v1.php
@@ -0,0 +1,38 @@
+<?php
+declare(strict_types=1);
+namespace zin;
+
+require_once dirname(__DIR__) . DS . 'btn' . DS . 'v1.php';
+
+class collapseBtn extends wg
+{
+    protected static $defineProps = array(
+        'target: string', // 展开折叠的目标元素选择器。
+        'parent: string' // 目标元素与按钮共同的父级元素选择器，使用 closest 辅助目标元素的确定。
+    );
+
+    protected function build()
+    {
+        $target = $this->prop('target');
+        $parent = $this->prop('parent');
+
+        return btn
+        (
+            setClass('btn-link', 'collapse-btn'),
+            set::icon('angle-down'),
+            on::click
+            (
+                <<<FUNC
+                    const btn = event.target.closest('.collapse-btn');
+                    const icon = btn.querySelector('.icon');
+                    icon.classList.toggle('icon-angle-down');
+                    icon.classList.toggle('icon-angle-top');
+
+                    const parent = btn.closest('$parent');
+                    const target = parent.querySelector('$target');
+                    if(target) target.classList.toggle('hidden');
+                FUNC
+            )
+        );
+    }
+}
diff --git a/lib/zin/wg/tabs/css/v1.css b/lib/zin/wg/tabs/css/v1.css
index 08cfd7be36..93e527d1eb 100644
--- a/lib/zin/wg/tabs/css/v1.css
+++ b/lib/zin/wg/tabs/css/v1.css
@@ -3,4 +3,4 @@
 .nav-tabs>.nav-item>a:before {background: none;}
 .nav-tabs>.nav-item>a.active {color: var(--color-primary-500);}
 .nav-tabs>.nav-item>a.active:after {border-bottom-color: var(--color-primary-500) !important; border-bottom-width: 2px;}
-.tabs .btn-collapse {position: absolute; top: 16px; right: 24px; width: 24px; height: 24px;}
+.tabs .collapse-btn {position: absolute; top: 16px; right: 24px; width: 24px; height: 24px;}
diff --git a/lib/zin/wg/tabs/v1.php b/lib/zin/wg/tabs/v1.php
index 7e893254e4..37abe85b4e 100644
--- a/lib/zin/wg/tabs/v1.php
+++ b/lib/zin/wg/tabs/v1.php
@@ -94,22 +94,10 @@ class tabs extends wg
         $collapse = $this->prop('collapse');
         if(!$collapse) return null;
 
-        return btn
+        return collapseBtn
         (
-            setClass('btn-link', 'btn-collapse'),
-            set::icon('angle-down'),
-            on::click
-            (
-                <<<FUNC
-                    const btn = event.target;
-                    const icon = btn.querySelector('.icon');
-                    const tabs = btn.closest('.tabs');
-                    const tabContent = tabs.querySelector('.tab-content');
-                    if(tabContent) tabContent.classList.toggle('hidden');
-                    icon.classList.toggle('icon-angle-down');
-                    icon.classList.toggle('icon-angle-top');
-                FUNC
-            )
+            set::target('.tab-content'),
+            set::parent('.tabs')
         );
     }