kb-ui-vue 0.2.0 → 0.3.0

package/dist/styles/index.css

@@ -420,6 +420,16 @@
   cursor: pointer;
 }
 
+.kb-calendar__day--in-range {
+  border-radius: 0;
+  background: color-mix(in srgb, var(--kb-color-primary) 14%, transparent);
+}
+
+.kb-calendar__day--range-end {
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+}
+
 .kb-calendar__day:hover:not(.kb-calendar__day--active) {
   background: var(--kb-color-bg-elevated);
 }
@@ -638,6 +648,52 @@
 .kb-cascader__more {
   color: var(--kb-color-text-3);
 }
+
+.kb-cascader__suffix {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kb-space-1);
+}
+
+.kb-cascader__clear {
+  color: var(--kb-color-text-3);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.kb-cascader__clear:hover {
+  color: var(--kb-color-text-1);
+}
+
+.kb-cascader__option--disabled {
+  color: var(--kb-color-text-3);
+  cursor: not-allowed;
+}
+
+.kb-cascader__leaf-tag {
+  padding: 0 var(--kb-space-1);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-cascader__loading {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-md);
+  white-space: nowrap;
+}
+
+.kb-cascader--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.kb-cascader--disabled .kb-cascader__trigger {
+  cursor: not-allowed;
+  background: var(--kb-color-bg-elevated);
+}
 
 .kb-checkbox {
   display: inline-flex;
@@ -698,6 +754,21 @@
   transform: rotate(45deg) scale(1);
 }
 
+.kb-checkbox--indeterminate .kb-checkbox__inner {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary);
+}
+
+.kb-checkbox--indeterminate .kb-checkbox__inner::after {
+  top: 6px;
+  left: 3px;
+  width: 8px;
+  height: 0;
+  border-width: 2px 0 0;
+  border-color: var(--kb-color-bg);
+  transform: none;
+}
+
 .kb-checkbox__label {
   line-height: 1;
 }
@@ -813,10 +884,40 @@
   transition: border-color var(--kb-transition-duration) var(--kb-transition-timing);
 }
 
+.kb-datepicker__input--wide {
+  width: 280px;
+}
+
+.kb-datepicker__input--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.kb-datepicker__clear {
+  position: absolute;
+  top: 50%;
+  right: var(--kb-space-2);
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: var(--kb-radius-round);
+  transform: translateY(-50%);
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-3);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+
 .kb-datepicker__input:focus {
   border-color: var(--kb-color-primary);
 }
 
+.kb-datepicker__clear:hover {
+  color: var(--kb-color-text-1);
+}
+
 .kb-datepicker__panel {
   position: absolute;
   top: calc(100% + 4px);
@@ -2442,6 +2543,59 @@
   font-size: var(--kb-font-size-md);
 }
 
+.kb-table__wrapper {
+  width: 100%;
+}
+
+.kb-table__wrapper--scroll {
+  overflow-x: auto;
+}
+
+.kb-table--fixed-cols {
+  table-layout: fixed;
+}
+
+.kb-table__th--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.kb-table__cell--selection {
+  width: 44px;
+  text-align: center;
+}
+
+.kb-table__empty {
+  padding: var(--kb-space-6);
+  color: var(--kb-color-text-3);
+  text-align: center;
+}
+
+.kb-table__cell--fixed-left,
+.kb-table__cell--fixed-right {
+  position: sticky;
+  z-index: 1;
+  background: var(--kb-color-bg);
+}
+
+.kb-table__cell--fixed-left-last {
+  box-shadow: 6px 0 8px -6px rgb(0 0 0 / 12%);
+}
+
+.kb-table__cell--fixed-right-first {
+  box-shadow: -6px 0 8px -6px rgb(0 0 0 / 12%);
+}
+
+.kb-table__pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--kb-space-3) 0;
+}
+
+.kb-table--border {
+  border: 1px solid var(--kb-color-border);
+}
+
 .kb-table th {
   padding: var(--kb-space-2) var(--kb-space-3);
   border-bottom: 1px solid var(--kb-color-border);
@@ -2457,6 +2611,41 @@
   color: var(--kb-color-text-1);
 }
 
+.kb-table--border th,
+.kb-table--border td {
+  border-right: 1px solid var(--kb-color-border);
+}
+
+.kb-table--small th,
+.kb-table--small td {
+  padding: var(--kb-space-1) var(--kb-space-2);
+}
+
+.kb-table--large th,
+.kb-table--large td {
+  padding: var(--kb-space-3) var(--kb-space-4);
+}
+
+.kb-table__cell--selection .kb-checkbox {
+  display: flex;
+  justify-content: center;
+}
+
+.kb-table th.kb-table__cell--fixed-left,
+.kb-table th.kb-table__cell--fixed-right {
+  z-index: 2;
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-table__row--selected td {
+  background: color-mix(in srgb, var(--kb-color-primary) 8%, transparent);
+}
+
+.kb-table--border th:last-child,
+.kb-table--border td:last-child {
+  border-right: none;
+}
+
 .kb-table tbody tr:hover {
   background: color-mix(in srgb, var(--kb-color-primary) 4%, transparent);
 }
@@ -2465,18 +2654,19 @@
   background: var(--kb-color-bg-elevated);
 }
 
-.kb-table--border {
-  border: 1px solid var(--kb-color-border);
+.kb-table--stripe tbody tr:nth-child(even) .kb-table__cell--fixed-left,
+.kb-table--stripe tbody tr:nth-child(even) .kb-table__cell--fixed-right {
+  background: var(--kb-color-bg-elevated);
 }
 
-.kb-table--border th,
-.kb-table--border td {
-  border-right: 1px solid var(--kb-color-border);
+.kb-table tbody tr:hover td.kb-table__cell--fixed-left,
+.kb-table tbody tr:hover td.kb-table__cell--fixed-right {
+  background: color-mix(in srgb, var(--kb-color-primary) 4%, var(--kb-color-bg));
 }
 
-.kb-table--border th:last-child,
-.kb-table--border td:last-child {
-  border-right: none;
+.kb-table tbody tr.kb-table__row--selected td.kb-table__cell--fixed-left,
+.kb-table tbody tr.kb-table__row--selected td.kb-table__cell--fixed-right {
+  background: color-mix(in srgb, var(--kb-color-primary) 8%, var(--kb-color-bg));
 }
 
 .kb-tabs {
@@ -2753,26 +2943,55 @@
 
 .kb-transfer {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   gap: var(--kb-space-2);
 }
 
-.kb-transfer__box {
+.kb-transfer__side {
+  display: flex;
+  flex-direction: column;
   width: 180px;
-  height: 220px;
-  overflow-y: auto;
-  border: 1px solid var(--kb-color-border);
-  border-radius: var(--kb-radius-md);
-  background: var(--kb-color-bg);
+}
+
+.kb-transfer__header {
+  display: flex;
+  align-items: center;
+  padding: var(--kb-space-1) var(--kb-space-2);
 }
 
 .kb-transfer__title {
-  padding: var(--kb-space-2) var(--kb-space-3);
-  border-bottom: 1px solid var(--kb-color-border);
   color: var(--kb-color-text-3);
   font-size: var(--kb-font-size-sm);
 }
 
+.kb-transfer__filter {
+  padding: 0 var(--kb-space-2) var(--kb-space-1);
+}
+
+.kb-transfer__input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kb-space-1) var(--kb-space-2);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-transfer__input:disabled {
+  background: var(--kb-color-bg-elevated);
+  cursor: not-allowed;
+}
+
+.kb-transfer__box {
+  height: 180px;
+  overflow-y: auto;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+}
+
 .kb-transfer__item {
   padding: var(--kb-space-2) var(--kb-space-3);
   color: var(--kb-color-text-1);
@@ -2789,9 +3008,50 @@
   color: var(--kb-color-primary);
 }
 
+.kb-transfer__item--disabled {
+  color: var(--kb-color-text-3);
+  cursor: not-allowed;
+}
+
+.kb-transfer__empty {
+  padding: var(--kb-space-4) 0;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+  text-align: center;
+}
+
+.kb-transfer__pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kb-space-2);
+  padding-top: var(--kb-space-1);
+}
+
+.kb-transfer__page {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-2);
+  cursor: pointer;
+}
+
+.kb-transfer__page:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.kb-transfer__page-info {
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
 .kb-transfer__actions {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   gap: var(--kb-space-2);
 }
 
@@ -2815,21 +3075,40 @@
   border-color: var(--kb-color-primary);
   color: var(--kb-color-primary);
 }
+
+.kb-transfer--disabled {
+  cursor: not-allowed;
+}
+
+.kb-transfer--disabled .kb-transfer__item {
+  cursor: not-allowed;
+}
 
 .kb-tree {
   font-size: var(--kb-font-size-md);
   color: var(--kb-color-text-1);
 }
 
+.kb-tree__scroll {
+  overflow: auto;
+}
+
+.kb-tree__inner {
+  position: relative;
+}
+
 .kb-tree__row {
   display: flex;
   align-items: center;
   padding: 4px 0;
   border-radius: var(--kb-radius-sm);
+  cursor: default;
+  box-sizing: border-box;
 }
 
-.kb-tree__row:hover {
-  background: var(--kb-color-bg-elevated);
+.kb-tree__indent {
+  flex-shrink: 0;
+  height: 100%;
 }
 
 .kb-tree__toggle {
@@ -2863,8 +3142,36 @@
   color: var(--kb-color-primary);
 }
 
-.kb-tree__children {
-  margin-left: var(--kb-space-4);
+.kb-tree__row--selected {
+  background: color-mix(in srgb, var(--kb-color-primary) 8%, transparent);
+}
+
+.kb-tree__row--disabled,
+.kb-tree__row--disabled .kb-tree__label {
+  color: var(--kb-color-text-3);
+  cursor: not-allowed;
+}
+
+.kb-tree__row--dragover {
+  outline: 1px dashed color-mix(in srgb, var(--kb-color-primary) 50%, transparent);
+  outline-offset: -1px;
+}
+
+.kb-tree__row:hover {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-tree__row--dragover.kb-tree__row--drop-before {
+  box-shadow: inset 0 2px 0 0 var(--kb-color-primary);
+}
+
+.kb-tree__row--dragover.kb-tree__row--drop-after {
+  box-shadow: inset 0 -2px 0 0 var(--kb-color-primary);
+}
+
+.kb-tree__row--dragover.kb-tree__row--drop-inner {
+  background: color-mix(in srgb, var(--kb-color-primary) 16%, transparent);
+  box-shadow: none;
 }
 
 .kb-upload {

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "kb-ui-vue",
-  "version": "0.2.0",
+  "version": "0.3.0",
+  "license": "MIT",
   "type": "module",
   "files": [
     "dist"