@regcheq/ui-vue-2 1.6.0 → 1.8.0

package/dist/index.css

@@ -686,6 +686,7 @@
   justify-content: center;
   flex-shrink: 0;
   vertical-align: middle;
+  margin-bottom: 4px;
   width: 16px;
   height: 16px;
   border-radius: 4px;
@@ -839,8 +840,8 @@
   align-items: center;
   justify-content: center;
   gap: 4px;
-  height: 32px;
-  padding: 4px 12px;
+  height: 20px;
+  padding: 0 12px;
   font-family: "Inter", sans-serif;
   font-weight: 400;
   font-size: 12px;
@@ -1536,9 +1537,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 56px;
   padding: 12px 16px;
   background: #e6f0fc;
-  border-radius: 8px;
+  border-radius: 0px;
 }
 .rq-selection-bar__info {
   display: flex;
@@ -1552,7 +1554,7 @@
   width: 6px;
   height: 6px;
   border-radius: 999px;
-  background: #0064e0;
+  background: #00479f;
 }
 .rq-selection-bar__clear {
   background: none;
@@ -1562,8 +1564,23 @@
   font-size: 14px;
   color: #0064e0;
   cursor: pointer;
-  text-decoration: underline;
+  text-decoration: none;
+}
+.rq-table__expanded-content::-webkit-scrollbar, .rq-table__scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.rq-table__expanded-content::-webkit-scrollbar-track, .rq-table__scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.rq-table__expanded-content::-webkit-scrollbar-thumb, .rq-table__scroll::-webkit-scrollbar-thumb {
+  background: #e4e4e7;
+  border-radius: 999px;
+}
+.rq-table__expanded-content::-webkit-scrollbar-corner, .rq-table__scroll::-webkit-scrollbar-corner {
+  background: transparent;
 }
+
 .rq-table {
   position: relative;
   display: flex;
@@ -1579,20 +1596,6 @@
   overflow: auto;
   flex: 1;
 }
-.rq-table__scroll::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.rq-table__scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-.rq-table__scroll::-webkit-scrollbar-thumb {
-  background: #e4e4e7;
-  border-radius: 999px;
-}
-.rq-table__scroll::-webkit-scrollbar-corner {
-  background: transparent;
-}
 .rq-table__table {
   width: 100%;
   border-collapse: separate;
@@ -1606,6 +1609,7 @@
   background: #040045;
 }
 .rq-table__tr--body {
+  height: 38px;
   cursor: pointer;
   background: #ffffff;
   transition: background 100ms ease;
@@ -1627,8 +1631,6 @@
   font-weight: 500;
   color: #ffffff;
   text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
   background: #040045;
   cursor: grab;
   user-select: none;
@@ -1664,6 +1666,12 @@
 .rq-table__th--drag-over {
   border-left: 2px solid #5497ea;
 }
+.rq-table__th--expand {
+  width: 40px;
+  min-width: 40px;
+  cursor: default;
+  background: #040045;
+}
 .rq-table__th-content {
   display: flex;
   align-items: center;
@@ -1672,8 +1680,8 @@
 }
 .rq-table__th-label {
   flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: break-word;
 }
 .rq-table__chevron-btn {
   display: flex;
@@ -1697,10 +1705,38 @@
   color: #ffffff;
   transform: rotate(180deg);
 }
+.rq-table__expand-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.rq-table__expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 2px;
+  color: #71717a;
+  padding: 0;
+  transition: color 200ms ease, background 200ms ease, transform 100ms ease;
+}
+.rq-table__expand-btn:hover {
+  color: #18181b;
+  background: #f4f4f5;
+}
+.rq-table__expand-btn--active {
+  color: #18181b;
+  transform: rotate(90deg);
+}
 .rq-table__chevron-popover {
-  position: absolute;
+  position: fixed;
   transform: translateX(-50%);
-  z-index: 10;
+  z-index: 1000;
   background: #ffffff;
   border: 1px solid #e4e4e7;
   border-radius: 8px;
@@ -1727,10 +1763,64 @@
   text-align: center;
   text-overflow: clip;
 }
+.rq-table__td--expand {
+  width: 40px;
+  min-width: 40px;
+  text-overflow: clip;
+}
 .rq-table__td--empty {
   padding: 48px 16px;
   text-align: center;
-  color: #a1a1aa;
+}
+.rq-table__td--expanded {
+  padding: 0;
+  cursor: default;
+  border-bottom: 1px solid #f4f4f5;
+}
+.rq-table__tr--expanded {
+  background: #e6e6ec;
+  cursor: default;
+}
+.rq-table__tr--expanded .rq-table__td:first-child {
+  border-left: 2px solid #040045;
+}
+.rq-table__expanded-content {
+  display: flex;
+  justify-content: center;
+  overflow-y: auto;
+  padding: 16px;
+}
+.rq-table__empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.rq-table__empty-title {
+  font-family: "Inter", sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  color: #18181b;
+  margin: 0;
+}
+.rq-table__empty-subtitle {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: #71717a;
+  max-width: 480px;
+  margin: 0;
+}
+.rq-table__cell-tooltip {
+  display: block;
+  width: 100%;
+}
+.rq-table__cell-text {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .rq-table__context-menu {
   position: absolute;
@@ -1769,9 +1859,23 @@
   border-radius: 12px;
   padding: 16px;
 }
+.rq-data-table__search-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 .rq-data-table__search-bar {
   display: flex;
 }
+.rq-data-table__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+.rq-data-table__selection-slot {
+  min-height: 56px;
+}
 .rq-data-table__pagination {
   display: flex;
   align-items: center;