@ticatec/uniface-element 0.1.13 → 0.1.15

package/dist/ticatec-uniface-web.css

@@ -189,10 +189,13 @@
   --uniface-data-table-alter-row-bg: #f7f7f7;
   --uniface-data-table-header-bg: #F8FAFC;
   --uniface-data-table-shadow-gap: 2px;
+  --uniface-data-table-header-divid-color: #B3BCCA;
+  --uniface-data-table-cell-padding: 3px 4px;
   --uniface-data-table-inline-row-panel-border: 1px solid #F8FAFC;
   --uniface-data-table-inline-row-panel-bg: #F1F5F9;
   --uniface-scroll-color: #e1e1e180;
-  --uniface-data-table-inline-border-color: #e1e1e180;
+  --uniface-data-table-inline-border-color: #CBD5E1;
+  --uniface-data-table-bg: #ffffff;
   --uniface-treeview-icon-color: #8AA7FF;
   --uniface-treeview-icon-hover-color: #0057FE;
   --uniface-treeview-item-bg: #EEF4FF;
@@ -2534,6 +2537,8 @@
   flex-direction: row;
   gap: 8px;
   align-items: center;
+  height: 100%;
+  box-sizing: border-box;
 }
 .uniface-range-wrapper .uniface-range-editor .divider {
   position: relative;
@@ -3071,7 +3076,6 @@
   box-sizing: border-box;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--uniface-navigator-vertical-padding, 16px) 0;
   position: relative;
   user-select: none;
 }
@@ -3081,6 +3085,16 @@
   position: relative;
   background: linear-gradient(to right, transparent 12px, lightgray 12px, lightgray 13px, transparent 13px);
 }
+.uniface-navigator-panel .navigator-content .uniface-navigator-item:first-child {
+  background-size: 100% 60%; /* 只占元素高度的一半 */
+  background-position: bottom; /* 从底部开始 */
+  background-repeat: no-repeat; /* 防止背景重复 */
+}
+.uniface-navigator-panel .navigator-content .uniface-navigator-item:last-child {
+  background-size: 100% 60%; /* 只占元素高度的一半 */
+  background-position: top; /* 从底部开始 */
+  background-repeat: no-repeat; /* 防止背景重复 */
+}
 .uniface-navigator-panel .navigator-content .uniface-navigator-item.nav-completed {
   color: var(--uniface-navigator-completed-text-color, #374151);
 }
@@ -3114,11 +3128,11 @@
 .uniface-navigator-panel .navigator-content .uniface-navigator-item.active::before {
   content: "";
   position: absolute;
-  left: 6px;
+  left: 5px;
   top: 50%;
   transform: translateY(-50%);
-  width: 5px;
-  height: 5px;
+  width: 15px;
+  height: 15px;
   border: 4px solid var(--uniface-active-label-text-color, #0061FF);
   border-radius: 50%; /* 圆形 */
   background-color: white;
@@ -3619,13 +3633,13 @@
 }
 
 .uniface-data-table {
-  width: 100%;
-  height: 100%;
   position: relative;
   box-sizing: border-box;
-  background: transparent;
   overflow: hidden;
+  background-color: var(--uniface-data-table-bg, #ffffff);
   color: var(--uniface-default-text-color, #374151);
+  display: flex;
+  flex-direction: row;
 }
 .uniface-data-table ::-webkit-scrollbar {
   -webkit-appearance: none;
@@ -3644,97 +3658,25 @@
   background-color: var(--uniface-scroll-color, rgba(225, 225, 225, 0.5019607843));
   -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
 }
-.uniface-data-table > div {
-  width: 100%;
-  height: 100%;
+.uniface-data-table .vertical-center {
   position: relative;
-  display: flex;
-  flex-direction: column;
+  top: 50%;
+  transform: translateY(-50%);
 }
-.uniface-data-table .table-row {
-  position: relative;
-  display: flex;
+.uniface-data-table .header-row {
+  flex: 0 0 auto;
   width: 100%;
-  flex-wrap: nowrap;
-  flex-direction: row;
-  align-items: center;
-  background-color: var(--uniface-data-table-background-color, #ffffff);
-  height: 36px;
-}
-.uniface-data-table .table-row.alternative {
-  background-color: var(--uniface-data-table-background-color, #f7f7f7);
-}
-.uniface-data-table.row-border .table-row {
-  border-bottom: 1px solid var(--uniface-data-table-row-border-color, #f0f0f0);
-}
-.uniface-data-table .table-header-panel {
   position: relative;
-  width: 100%;
-  background-color: var(--uniface-data-table-header-bg, #F8FAFC);
-  flex: 0 0 auto;
-  overflow: hidden;
+  height: var(--uniface-data-table-header-hight, 48px);
   font-weight: 600;
   user-select: none;
+  background-color: var(--uniface-data-table-header-bg, #F8FAFC);
+  border-bottom: 1px solid transparent;
+  color: var(--uniface-data-table-header-color, #374151);
   display: flex;
   flex-direction: row;
-  height: 48px;
-  align-items: center;
-  text-align: center;
 }
-.uniface-data-table .table-header-panel .header-indicator {
-  flex: 0 0 auto;
-  width: 50px;
-  height: 100%;
-  border-right: 1px solid var(--uniface-data-table-header-separator-color, #6B7280);
-  box-sizing: border-box;
-  z-index: 1;
-  box-shadow: var(--uniface-data-table-separator-shadow, rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px);
-}
-.uniface-data-table .table-header-panel .header-indicator > div {
-  padding: 4px;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.uniface-data-table .table-header-panel .header-actions {
-  flex: 0 0 auto;
-  border-left: 1px solid var(--uniface-data-table-header-separator-color, #6B7280);
-  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
-  display: block;
-  width: 100%;
-  font-weight: 600;
-  height: 100%;
-  position: relative;
-  box-sizing: border-box;
-}
-.uniface-data-table .table-header-panel .header-actions > div {
-  top: 50%;
-  position: relative;
-  transform: translateY(-50%);
-}
-.uniface-data-table .table-header-panel .header-row-panel {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  box-sizing: border-box;
-}
-.uniface-data-table .table-header-panel .table-cell {
-  text-align: center;
-  color: var(--uniface-data-table-header-color, #374151);
-  overflow: hidden;
-  position: relative;
-  flex: 0 0 auto;
-  line-height: 28px;
-}
-.uniface-data-table .table-header-panel .table-cell > div {
-  text-align: center;
-}
-.uniface-data-table .table-header-panel .table-cell .sortable {
-  cursor: pointer;
-}
-.uniface-data-table .table-header-panel .table-cell .header-cell-divider {
+.uniface-data-table .header-row .header-cell-divider {
   position: absolute;
   top: 0;
   right: 0;
@@ -3742,190 +3684,163 @@
   width: 3px;
   z-index: 2;
 }
-.uniface-data-table .table-header-panel .table-cell .header-cell-divider::before {
+.uniface-data-table .header-row .header-cell-divider::before {
   content: ""; /* 必须指定伪元素的内容 */
   position: absolute;
   left: 50%; /* 将伪元素水平居中 */
-  top: 0;
-  bottom: 0;
+  top: 25%;
+  bottom: 25%;
   width: 1px; /* 竖线宽度 */
   background-color: var(--uniface-data-table-header-separator-color, #6B7280); /* 竖线颜色 */
   transform: translateX(-50%); /* 精确居中 */
 }
-.uniface-data-table .table-header-panel .table-cell .header-cell-divider.resizer {
-  cursor: ew-resize;
+.uniface-data-table .header-row .header-cell-divider.resizer {
+  cursor: col-resize;
 }
-.uniface-data-table .table-header-panel .table-cell span {
-  display: inline-block;
-  vertical-align: center;
-  align-self: center;
+.uniface-data-table.cell-border .header-cell-divider:not(.resizer)::before {
+  display: none;
 }
-.uniface-data-table .data-content-panel {
+.uniface-data-table .data-cell {
+  height: 100%;
+  border-right: 1px solid transparent;
+  padding: var(--uniface-data-table-cell-padding, 3px 4px);
   position: relative;
-  width: 100%;
-  flex: 1 1 auto;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
 }
-.uniface-data-table .data-content-panel .table-row {
-  background-color: var(--uniface-data-table-background-color, #ffffff);
-  height: 36px;
+.uniface-data-table .data-cell .sortable {
+  cursor: pointer;
 }
-.uniface-data-table .data-content-panel .table-row.alternative {
-  background-color: var(--uniface-data-table-background-color, #f7f7f7);
+.uniface-data-table .data-cell:last-child {
+  border-right: none;
 }
-.uniface-data-table .data-content-panel .table-row .table-data-cell {
-  flex: 0 0 auto;
-  height: 100%;
-  position: relative;
-  box-sizing: border-box;
-  padding: 4px;
+.uniface-data-table .data-cell > div:first-child {
+  overflow: hidden;
 }
-.uniface-data-table .data-content-panel .table-row .table-data-cell > div {
+.uniface-data-table .data-row {
   position: relative;
-  top: 50%;
-  transform: translateY(-50%);
+  display: flex;
+  width: 100%;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--uniface-data-table-background-color, #ffffff);
 }
-.uniface-data-table .data-content-panel .table-row .table-data-cell .cell-text {
-  overflow: hidden;
+.uniface-data-table .data-row.alternative {
+  background-color: var(--uniface-data-table-alter-row-bg, #f7f7f7);
 }
-.uniface-data-table .data-content-panel .table-row .table-data-cell:first-child {
-  padding-left: 8px;
+.uniface-data-table.row-border .header-row, .uniface-data-table.row-border .data-row {
+  border-bottom: 1px solid var(--uniface-data-table-inline-border-color, #CBD5E1);
 }
-.uniface-data-table .data-content-panel .table-row .table-data-cell:last-child {
-  padding: 0;
+.uniface-data-table.cell-border .data-cell {
+  border-right-color: var(--uniface-data-table-inline-border-color, #CBD5E1);
 }
-.uniface-data-table .data-content-panel .expand-data-row {
-  background-color: var(--uniface-data-table-expand-row-bg, #f7f7f7);
-  min-height: 32px;
-  box-sizing: border-box;
-}
-.uniface-data-table .data-content-panel .fixed-panel, .uniface-data-table .data-content-panel .action-panel {
-  flex: 0 0 auto;
+.uniface-data-table .rows-container {
+  flex: 1 1 auto;
   height: 100%;
-  position: relative;
+  width: 100%;
   box-sizing: border-box;
   overflow: hidden;
-  display: flex;
-  flex-direction: column;
 }
-.uniface-data-table .data-content-panel .fixed-panel .scroll-panel, .uniface-data-table .data-content-panel .action-panel .scroll-panel {
-  flex: 1 1 auto;
-  height: 100%;
+.uniface-data-table .rows-container > div {
   width: 100%;
   position: relative;
-  overflow: hidden;
 }
-.uniface-data-table .data-content-panel .fixed-panel .scroll-panel > div, .uniface-data-table .data-content-panel .action-panel .scroll-panel > div {
-  height: 100%;
-  width: 100%;
+.uniface-data-table .left-fixed-panel, .uniface-data-table .action-panel {
+  flex: 0 0 auto;
   position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
-.uniface-data-table .data-content-panel .fixed-panel .bottom-mask-overlay, .uniface-data-table .data-content-panel .action-panel .bottom-mask-overlay {
+.uniface-data-table .left-fixed-panel .bottom-mask-overlay, .uniface-data-table .action-panel .bottom-mask-overlay {
   flex: 0 0 auto;
   width: 100%;
   height: 8px;
   box-sizing: border-box;
-  background-color: #ffffff;
-  border-top: 1px solid var(--uniface-inner-border-color, #d9d9d9);
+  background-color: var(--uniface-data-table-bg, #ffffff);
+  border-top: 1px solid var(--uniface-data-table-inline-border-color, rgba(225, 225, 225, 0.5019607843));
 }
-.uniface-data-table .data-content-panel .action-panel {
-  border-left: 1px solid var(--uniface-inner-border-color, #d9d9d9);
-  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+.uniface-data-table .left-fixed-panel {
+  z-index: 1;
+  border-right: 1px solid var(--uniface-data-table-inline-border-color, rgba(225, 225, 225, 0.5019607843));
+  box-shadow: var(--uniface-data-table-separator-shadow, rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px);
 }
-.uniface-data-table .data-content-panel .action-panel .scroll-panel {
-  overflow-y: auto;
+.uniface-data-table .left-fixed-panel .data-cell {
+  flex: 0 0 auto;
 }
-.uniface-data-table .data-content-panel .action-panel > div .operation-row {
-  position: relative;
-  width: 100%;
+.uniface-data-table .left-fixed-panel .data-cell:last-child {
+  border-right: none;
+}
+.uniface-data-table .left-fixed-panel .indicator-cell {
   display: flex;
-  box-sizing: border-box;
-  border-bottom: 1px solid #f0f0f0;
   flex-direction: row;
+  justify-content: center;
   align-items: center;
 }
-.uniface-data-table .data-content-panel .action-panel > div .operation-row.alternative {
-  background-color: var(--uniface-data-table-background-color, #f7f7f7);
+.uniface-data-table .left-fixed-panel .indicator-cell .expand-icon {
+  display: none;
+  color: var(--uniface-hover-item-color, #42A5F5);
+  font-size: 14px;
+  width: 16px;
+  position: absolute;
+  right: 4px;
+  cursor: pointer;
 }
-.uniface-data-table .data-content-panel .action-panel > div .operation-row > div:first-child {
-  width: 100%;
-  padding: 2px 4px;
-  box-sizing: border-box;
-  overflow: hidden;
-  white-space: nowrap;
+.uniface-data-table .left-fixed-panel .indicator-cell:hover .expand-icon {
+  display: block;
 }
-.uniface-data-table .data-content-panel .fixed-panel {
-  width: 50px;
-  border-right: 1px solid var(--uniface-inner-border-color, #d9d9d9);
+.uniface-data-table .action-panel {
   z-index: 1;
-  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
-  overflow: hidden;
+  border-left: 1px solid var(--uniface-data-table-inline-border-color, rgba(225, 225, 225, 0.5019607843));
+  box-shadow: var(--uniface-data-table-separator-shadow, rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px);
 }
-.uniface-data-table .data-content-panel .fixed-panel .indicator-cell {
-  position: relative;
-  width: 100%;
+.uniface-data-table .action-panel .header-row {
+  display: block;
+  text-align: center;
+}
+.uniface-data-table .action-panel .data-row .action-cell {
   display: flex;
-  padding: 0 6px 0 3px;
-  box-sizing: border-box;
   flex-direction: row;
   align-items: center;
+  width: max-content;
+  height: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+  position: relative;
 }
-.uniface-data-table .data-content-panel .fixed-panel .indicator-cell.alternative {
-  background-color: var(--uniface-data-table-background-color, #f7f7f7);
-}
-.uniface-data-table .data-content-panel .fixed-panel .indicator-cell input {
-  flex: 0 0 auto;
+.uniface-data-table.row-border .table-row {
+  border-bottom: 1px solid var(--uniface-data-table-row-border-color, #f0f0f0);
 }
-.uniface-data-table .data-content-panel .fixed-panel .indicator-cell span {
+.uniface-data-table .data-content-panel {
+  position: relative;
+  width: 100%;
   flex: 1 1 auto;
-  display: inline-block;
-  text-align: center;
-}
-.uniface-data-table .data-content-panel .action-button {
-  display: inline-block;
-  cursor: pointer;
-  color: var(--uniface-button-primary-background-color, #42A5F5);
-  box-sizing: border-box;
-  padding: 2px 4px;
-  text-decoration: none;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
-.uniface-data-table .data-content-panel .action-button:hover {
-  font-weight: 600;
+.uniface-data-table .data-content-panel .data-cell {
+  flex: 0 0 auto;
 }
-.uniface-data-table .data-content-panel .action-button:active {
+.uniface-data-table .data-content-panel .data-cell > div:first-child {
   position: relative;
-  top: 1px;
+  top: 50%;
+  transform: translateY(-50%);
 }
-.uniface-data-table .data-content-panel .data-table-popover {
+.uniface-data-table .data-content-panel .header-row > div {
   position: relative;
-  z-index: 50;
-}
-.uniface-data-table .data-content-panel .data-table-popover .contents-wrapper {
-  position: absolute;
-  transition: none;
-  display: block;
-}
-.uniface-data-table .data-content-panel .data-table-popover .contents-wrapper .contents {
-  background: var(--uniface-app-background-color, #ffffff);
-  box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
-  padding-top: 0;
-  opacity: 1;
-  transform: scale(1);
-  display: block;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
-.uniface-data-table .data-content-panel .data-table-popover .contents-wrapper .contents .contents-inner {
-  overflow: auto;
+.uniface-data-table .data-content-panel .header-row .data-cell {
+  text-align: center !important;
 }
-.uniface-data-table .data-content-panel .data-table-popover .contents-wrapper .contents .action-popover {
-  padding: 0 4px;
+.uniface-data-table .data-content-panel .expand-data-row {
+  background-color: var(--uniface-data-table-expand-row-bg, #f7f7f7);
+  min-height: 32px;
   box-sizing: border-box;
-  line-height: 1.5em;
-  cursor: pointer;
-}
-.uniface-data-table .data-content-panel .data-table-popover .contents-wrapper .contents .action-popover:hover {
-  background-color: #f7f7f7;
 }
 .uniface-data-table .data-content-panel .data-view-panel {
   flex: 1 1 auto;
@@ -4064,6 +3979,88 @@
   width: fit-content;
 }
 
+:root {
+  --uniface-concise-table-primary-color: #333;
+  --uniface-concise-table-primary-background-color: #ffffff;
+  --uniface-concise-table-out-border: #333;
+  --uniface-concise-table-header-background: #E1F5FE;
+  --uniface-concise-table-header-color: #333;
+  --uniface-concise-table-header-line-color: #fff;
+  --uniface-concise-table-data-line-color: #7f7f7f;
+  --uniface-concise-table-fixed-columns-background: #E0E0E0;
+  --uniface-concise-table-bg: unset;
+}
+
+.uniface-concise-datatable {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  color: var(--uniface-concise-table-bg, unset);
+}
+.uniface-concise-datatable .table-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+.uniface-concise-datatable .table-row {
+  display: flex;
+  width: 100%;
+  position: relative;
+  align-items: center;
+}
+.uniface-concise-datatable .table-row .data-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 2px 4px;
+}
+.uniface-concise-datatable .table-header {
+  background-color: #f5f5f5;
+  padding: 0;
+  flex-shrink: 0;
+  z-index: 10;
+  user-select: none;
+}
+.uniface-concise-datatable .table-header .table-row {
+  font-weight: 600;
+}
+.uniface-concise-datatable .table-header .table-row .data-cell {
+  text-align: center !important;
+}
+.uniface-concise-datatable .table-body-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.uniface-concise-datatable .table-body-container .table-body {
+  width: 100%;
+}
+.uniface-concise-datatable .table-body-container .table-row {
+  cursor: pointer;
+}
+.uniface-concise-datatable .table-body-container .table-row.alternative {
+  background-color: var(--uniface-concise-table-row-alter-bg, #F8FAFC);
+  color: var(--uniface-concise-table-row-alter-color, #374151);
+}
+.uniface-concise-datatable .table-body-container .table-row:hover {
+  background-color: #f9f9f9;
+}
+.uniface-concise-datatable .table-body-container.auto-scroll {
+  overflow-y: hidden;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
 .uniface-mask, .uniface-mask-overlay {
   position: absolute;
   top: 0;

package/dist/tree-view/TreeNodeView.svelte

@@ -72,16 +72,14 @@
         <div class="node-item" class:selected={activeNode===node} on:click={handleNodeClick} aria-hidden="true"
              on:contextmenu={handleContextMenu}>
             <div class="item-icon">
-                {#if loading}
-                    <img alt="" style="cursor: default" src={iconLoading}/>
-                {:else }
-                    <span aria-hidden="true" on:click={handleNodeIconClick}>{expanded ? '▼' : '▶'}</span>
+                {#if isBranch()}
+                    {#if loading}
+                        <img alt="" style="cursor: default" src={iconLoading}/>
+                    {:else }
+                        <span aria-hidden="true" on:click={handleNodeIconClick}>{expanded ? '▼' : '▶'}</span>
+                    {/if}
                 {/if}
             </div>
-            <div class="item-icon" style="margin-left: 4px;">
-                <i class={isBranch() ? "uniface-icon-folder" : "uniface-icon-file"}
-                   aria-hidden="true"></i>
-            </div>
             <span class="item-text">{node.text}</span>
         </div>
         {#if expanded && node.children}

package/dist/tree-view/TreeUtils.js

@@ -24,7 +24,7 @@ const buildTreeNode = (list, idKey, joinKey, textField, valueField, isRoot, sort
             else {
                 let parent = map.get(item[joinKey]);
                 if (parent != null) {
-                    parent.children = [...parent.children, node];
+                    parent.children = [...(parent.children ?? []), node];
                     node.parent = parent;
                     map.set(item[idKey], node);
                 }
@@ -36,7 +36,7 @@ const buildTreeNode = (list, idKey, joinKey, textField, valueField, isRoot, sort
         else {
             let parent = map.get(item[joinKey]);
             if (parent != null) {
-                parent.children = [...parent.children, item];
+                parent.children = [...(parent.children ?? []), item];
                 node.parent = parent;
                 map.set(item[idKey], node);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",
@@ -100,6 +100,10 @@
       "types": "./dist/common/FullscreenOverlay.svelte.d.ts",
       "import": "./dist/common/FullscreenOverlay.svelte"
     },
+    "./ConciseDataTable": {
+      "types": "./dist/concise-data-table/index.d.ts",
+      "import": "./dist/concise-data-table/index.js"
+    },
     "./PromptsTextEditor": {
       "types": "./dist/prompts-text-editor/index.d.ts",
       "import": "./dist/prompts-text-editor/index.js"

package/dist/data-table/parts/LinkButton.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-    export let text;
-    export let action;
-    export let style: string = '';
-
-    let silent: boolean = false;
-
-    const handleButtonClick = (e) => {
-        if (!silent) {
-            silent = true;
-            setTimeout(()=>{silent=false}, 500);
-            action();
-        }
-    }
-
-</script>
-<a {style} class="action-button" href="javascript:void(0)" on:click={handleButtonClick}>
-    <span>{text}</span>
-</a>