@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/esm/components/Table/Table.css

@@ -0,0 +1,375 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+.table__Dkosn {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.table__wrapper__M-WJs {
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  border: var(--click-table-cell-stroke) solid var(--click-table-global-color-stroke-default);
+  border-radius: var(--click-table-radii-all);
+}
+
+.table__table__9BB0L {
+  width: 100%;
+  overflow: visible;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+[data-mobile-layout='list'] .table__table__9BB0L {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    border: none;
+    table-layout: auto;
+  }
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.table__colgroup__dMZrG {
+}
+
+[data-mobile-layout='list'] .table__colgroup__dMZrG {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
+
+.table__thead__jQQMo tr {
+  overflow: hidden;
+  border-bottom: var(--click-table-cell-stroke) solid var(--click-table-row-color-stroke-default);
+  background-color: var(--click-table-header-color-background-default);
+}
+
+[data-mobile-layout='list'] .table__thead__jQQMo {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
+
+.table__header__gQiaC {
+  color: var(--click-table-header-color-title-default);
+  font: var(--click-table-header-title-default);
+  text-align: left;
+}
+
+.table__header_size_sm__-twnG {
+  padding: var(--click-table-header-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+}
+
+.table__header_size_md__H62Z4 {
+  padding: var(--click-table-header-cell-space-md-y) var(--click-table-body-cell-space-md-x);
+}
+
+.table__header_resizable__2y5fn {
+  position: relative;
+}
+
+.table__header-content__R-kr- {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: inherit;
+}
+
+.table__header-content_interactive__7lV67 {
+  cursor: pointer;
+}
+
+.table__resizer__m6w0b {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 24px;
+  height: 100%;
+  border-radius: 0.5rem;
+  cursor: col-resize;
+  transition: opacity 0.2s;
+  transform: translateX(50%);
+  user-select: none;
+}
+
+.table__resizer__m6w0b:hover {
+  opacity: 0.6;
+}
+
+.table__resizer__m6w0b::before {
+  content: ' ';
+  display: inline-block;
+  position: relative;
+  top: 25%;
+  left: 50%;
+  width: 2px;
+  height: 20px;
+  background: var(--click-table-header-color-checkbox-border-default);
+  transform: translateX(-50%);
+}
+
+.table__resizer__m6w0b:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
+.table__sort-icon__i-kkT {
+  transition: all 200ms;
+}
+
+.table__sort-icon_dir_asc__iYjL2 {
+  transform: rotate(0deg);
+}
+
+.table__sort-icon_dir_desc__e78-c {
+  transform: rotate(180deg);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.table__tbody__SPG5M {
+}
+
+[data-mobile-layout='list'] .table__tbody__SPG5M {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}
+
+.table__row__T3tP6 {
+  --table-row-height: initial;
+  opacity: 1;
+
+  height: var(--table-row-height, auto);
+  overflow: hidden;
+  border-bottom: var(--click-table-cell-stroke) solid var(--click-table-row-color-stroke-default);
+  background-color: var(--click-table-row-color-background-default);
+  cursor: default;
+}
+
+.table__row_active__7CQZj {
+  background-color: var(--click-table-row-color-background-active);
+}
+
+.table__row__T3tP6:active {
+  background-color: var(--click-table-row-color-background-active);
+}
+
+.table__row__T3tP6:hover {
+  background-color: var(--click-table-row-color-background-hover);
+}
+
+.table__row_disabled__YICW5 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.table__row__T3tP6:last-of-type,
+.table__row__T3tP6:last-child {
+  border-bottom: none;
+}
+
+[data-mobile-layout='list'] .table__row__T3tP6 {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    border: var(--click-table-cell-stroke) solid var(--click-table-row-color-stroke-default);
+    border-radius: var(--click-table-radii-all);
+  }
+}
+
+[data-mobile-layout='list'] .table__row_selectable__Or4hH {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    padding-left: calc(
+      var(--click-table-body-cell-space-sm-x) + var(--click-table-body-cell-space-sm-x) +
+        var(--click-checkbox-size-all)
+    );
+  }
+}
+
+[data-mobile-layout='list'] .table__row_show-actions__DfOOZ {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    padding-right: calc(
+      var(--click-table-body-cell-space-sm-x) + var(--click-table-body-cell-space-sm-x) +
+        var(--click-image-sm-size-width) + var(--click-button-iconButton-default-space-x) +
+        var(--click-button-iconButton-default-space-x)
+    );
+  }
+}
+
+.table__data__KkzjS {
+  overflow: hidden;
+  color: var(--click-table-row-color-text-default);
+  font: var(--click-table-cell-text-default);
+}
+
+.table__data_size_sm__rfLCF {
+  padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+}
+
+.table__data_size_md__CNOHs {
+  padding: var(--click-table-body-cell-space-md-y) var(--click-table-body-cell-space-md-x);
+}
+
+[data-mobile-layout='list'] .table__data__KkzjS {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    width: auto;
+    min-width: 40%;
+    padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+  }
+}
+
+.table__spanned-data__t3S-m {
+  text-align: center;
+}
+
+.table__select-data__EpxHa {
+  overflow: hidden;
+  color: var(--click-table-row-color-text-default);
+  font: var(--click-table-cell-text-default);
+}
+
+.table__select-data_size_sm__SPaL9 {
+  padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+}
+
+.table__select-data_size_md__6pKZv {
+  padding: var(--click-table-body-cell-space-md-y) var(--click-table-body-cell-space-md-x);
+}
+
+[data-mobile-layout='list'] .table__select-data__EpxHa {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+    align-self: stretch;
+    border-right: var(--click-table-cell-stroke) solid var(--click-table-row-color-stroke-default);
+  }
+}
+
+.table__actions-cell__Oo0QI {
+  overflow: hidden;
+  color: var(--click-table-row-color-text-default);
+  font: var(--click-table-cell-text-default);
+}
+
+.table__actions-cell_size_sm__zm-mr {
+  padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+}
+
+.table__actions-cell_size_md__JYsyT {
+  padding: var(--click-table-body-cell-space-md-y) var(--click-table-body-cell-space-md-x);
+}
+
+[data-mobile-layout='list'] .table__actions-cell__Oo0QI {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+    align-self: stretch;
+    border-left: 1px solid var(--click-table-row-color-stroke-default);
+  }
+}
+
+.table__actions__kkZYZ {
+  display: flex;
+  overflow: hidden;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[data-mobile-layout='list'] .table__actions__kkZYZ {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    overflow: auto;
+    flex-flow: column nowrap;
+  }
+}
+
+.table__mobile-header__dABkX {
+  display: none;
+  color: var(--click-table-row-color-label-default);
+  font: var(--click-table-cell-label-default);
+}
+
+[data-mobile-layout='list'] .table__mobile-header__dABkX {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: block;
+  }
+}
+
+.table__mobile-actions__-qiPM {
+  display: none;
+}
+
+[data-mobile-layout='list'] .table__mobile-actions__-qiPM {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: flex;
+    padding: 0 var(--click-table-body-cell-space-sm-x);
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.table__custom-message__txWk5 {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.table__edit-button__y1xmf:disabled {
+  background: transparent;
+}
+
+.table__close-button__ja-o3:disabled {
+  background: transparent;
+}
+
+.table__close-button__ja-o3 svg {
+  transition: transform 200ms;
+}
+
+.table__close-button_deleted__6KxWh svg {
+  transform: rotate(45deg);
+}
+
+.table__text-wrapped__YwR9S {
+  display: inline-block;
+  max-width: 100%;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}

package/dist/esm/components/Table/Table.module.css.js

@@ -0,0 +1,63 @@
+const table = "table__Dkosn";
+const table__wrapper = "table__wrapper__M-WJs";
+const table__table = "table__table__9BB0L";
+const table__colgroup = "table__colgroup__dMZrG";
+const table__thead = "table__thead__jQQMo";
+const table__header = "table__header__gQiaC";
+const table__header_size_sm = "table__header_size_sm__-twnG";
+const table__header_size_md = "table__header_size_md__H62Z4";
+const table__header_resizable = "table__header_resizable__2y5fn";
+const table__resizer = "table__resizer__m6w0b";
+const table__tbody = "table__tbody__SPG5M";
+const table__row = "table__row__T3tP6";
+const table__row_active = "table__row_active__7CQZj";
+const table__row_disabled = "table__row_disabled__YICW5";
+const table__row_selectable = "table__row_selectable__Or4hH";
+const table__data = "table__data__KkzjS";
+const table__data_size_sm = "table__data_size_sm__rfLCF";
+const table__data_size_md = "table__data_size_md__CNOHs";
+const table__actions = "table__actions__kkZYZ";
+const styles = {
+	table: table,
+	table__wrapper: table__wrapper,
+	table__table: table__table,
+	table__colgroup: table__colgroup,
+	table__thead: table__thead,
+	table__header: table__header,
+	table__header_size_sm: table__header_size_sm,
+	table__header_size_md: table__header_size_md,
+	table__header_resizable: table__header_resizable,
+	"table__header-content": "table__header-content__R-kr-",
+	"table__header-content_interactive": "table__header-content_interactive__7lV67",
+	table__resizer: table__resizer,
+	"table__sort-icon": "table__sort-icon__i-kkT",
+	"table__sort-icon_dir_asc": "table__sort-icon_dir_asc__iYjL2",
+	"table__sort-icon_dir_desc": "table__sort-icon_dir_desc__e78-c",
+	table__tbody: table__tbody,
+	table__row: table__row,
+	table__row_active: table__row_active,
+	table__row_disabled: table__row_disabled,
+	table__row_selectable: table__row_selectable,
+	"table__row_show-actions": "table__row_show-actions__DfOOZ",
+	table__data: table__data,
+	table__data_size_sm: table__data_size_sm,
+	table__data_size_md: table__data_size_md,
+	"table__spanned-data": "table__spanned-data__t3S-m",
+	"table__select-data": "table__select-data__EpxHa",
+	"table__select-data_size_sm": "table__select-data_size_sm__SPaL9",
+	"table__select-data_size_md": "table__select-data_size_md__6pKZv",
+	"table__actions-cell": "table__actions-cell__Oo0QI",
+	"table__actions-cell_size_sm": "table__actions-cell_size_sm__zm-mr",
+	"table__actions-cell_size_md": "table__actions-cell_size_md__JYsyT",
+	table__actions: table__actions,
+	"table__mobile-header": "table__mobile-header__dABkX",
+	"table__mobile-actions": "table__mobile-actions__-qiPM",
+	"table__custom-message": "table__custom-message__txWk5",
+	"table__edit-button": "table__edit-button__y1xmf",
+	"table__close-button": "table__close-button__ja-o3",
+	"table__close-button_deleted": "table__close-button_deleted__6KxWh",
+	"table__text-wrapped": "table__text-wrapped__YwR9S"
+};
+
+export { styles as default, table, table__actions, table__colgroup, table__data, table__data_size_md, table__data_size_sm, table__header, table__header_resizable, table__header_size_md, table__header_size_sm, table__resizer, table__row, table__row_active, table__row_disabled, table__row_selectable, table__table, table__tbody, table__thead, table__wrapper };
+//# sourceMappingURL=Table.module.css.js.map

package/dist/esm/components/Table/Table.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}