vuestic-ui
Version:
Vue 3 UI Framework
9 lines (8 loc) • 9.19 kB
JavaScript
import { _ as _sfc_main } from "./VaDataTable.vue_vue_type_script_setup_true_lang.js";
import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js";
const _style_0 = '.va-data-table {\n --va-data-table-cell-padding: 0.625rem;\n --va-data-table-thead-line-height: 1.6;\n --va-data-table-thead-font-size: 0.625rem;\n --va-data-table-thead-font-weight: 700;\n --va-data-table-thead-text-transform: uppercase;\n --va-data-table-thead-letter-spacing: 0.6px;\n --va-data-table-thead-border: 1px solid var(--va-background-border);\n --va-data-table-tfoot-border: unset;\n --va-data-table-height: unset;\n --va-data-table-max-height: unset;\n --va-data-table-thead-color: currentColor;\n --va-data-table-tfoot-color: currentColor;\n --va-data-table-header-background: var(--va-background-primary);\n /* Hover */\n --va-data-table-hover-th-opacity: 0.3;\n /* Striped */\n --va-data-table-striped-tr-background-color: var(--va-background-element);\n --va-data-table-striped-tr-opacity: 1;\n /* Selectable */\n --va-data-table-selectable-tr-cursor: pointer;\n --va-data-table-selectable-cell-width: 55px;\n --va-data-table-selectable-cell-vertical-align: middle;\n --va-data-table-selectable-cell-text-align: center;\n /* No-data */\n --va-data-table-no-data-text-align: center;\n --va-data-table-no-data-vertical-align: middle;\n /* Animated */\n --va-data-table-transition: var(--va-transition);\n /* Grid */\n --va-data-table-grid-tbody-gap: 0.5rem;\n --va-data-table-grid-tbody-margin-top: 1rem;\n --va-data-table-grid-tr-padding: 1rem;\n --va-data-table-grid-tr-border-radius: 0.5rem;\n --va-data-table-grid-tr-border: 1px solid var(--va-background-border);\n --va-data-table-grid-tr-header-font-weight: 600;\n --va-data-table-grid-tr-header-color: var(--va-text-primary);\n}\n.va-data-table {\n --va-data-table-selected-color: var(--30b650ee);\n --va-data-table-hover-color: var(--40063db4);\n --va-data-table-height--computed: var(--586bd4d6);\n --va-data-table-thead-background--computed: var(--e5b4a30c);\n --va-data-table-tfoot-background--computed: var(--eb60fcf0);\n --va-data-table-grid-tbody-columns: 4;\n min-width: unset;\n font-family: var(--va-font-family);\n}\n@media (max-width: 1199.98px) {\n.va-data-table {\n --va-data-table-grid-tbody-columns: 3;\n}\n}\n@media (max-width: 991.98px) {\n.va-data-table {\n --va-data-table-grid-tbody-columns: 2;\n}\n}\n@media (max-width: 767.98px) {\n.va-data-table {\n --va-data-table-grid-tbody-columns: 1;\n}\n}\n.va-data-table:not(.va-data-table--virtual-scroller) {\n overflow-x: auto;\n overflow-y: hidden;\n}\n.va-data-table--sticky:not(.va-data-table--virtual-scroller), .va-data-table--scroll {\n overflow-y: auto;\n height: var(--va-data-table-height--computed);\n max-height: var(--va-data-table-max-height);\n}\n.va-data-table .va-data-table__table {\n width: 100%;\n cursor: default;\n white-space: nowrap;\n}\n.va-data-table .va-data-table__table .va-data-table__table-thead {\n color: var(--va-data-table-thead-color);\n border-bottom: var(--va-data-table-thead-border);\n}\n.va-data-table .va-data-table__table .va-data-table__table-thead th {\n border-bottom: none;\n}\n.va-data-table .va-data-table__table .va-data-table__table-thead--sticky {\n position: sticky;\n top: 0;\n z-index: 1;\n background: var(--va-data-table-thead-background--computed);\n}\n.va-data-table .va-data-table__table .va-data-table__table-tbody .no-data {\n text-align: var(--va-data-table-no-data-text-align);\n vertical-align: var(--va-data-table-no-data-vertical-align);\n width: 100%;\n}\n.va-data-table .va-data-table__table .va-data-table__table-tfoot {\n color: var(--va-data-table-tfoot-color);\n border-top: var(--va-data-table-tfoot-border, var(--va-data-table-thead-border));\n}\n.va-data-table .va-data-table__table .va-data-table__table-tfoot th {\n border-bottom: none;\n}\n.va-data-table .va-data-table__table .va-data-table__table-tfoot--sticky {\n position: sticky;\n bottom: 0;\n z-index: 1;\n background: var(--va-data-table-tfoot-background--computed);\n}\n.va-data-table .va-data-table__table .va-data-table__table-td {\n padding: var(--va-data-table-cell-padding);\n text-align: var(--va-data-table-align);\n vertical-align: var(--va-data-table-vertical-align);\n}\n.va-data-table .va-data-table__table .va-data-table__table-th.va-data-table__table-cell-select,\n.va-data-table .va-data-table__table .va-data-table__table-td.va-data-table__table-cell-select {\n width: var(--va-data-table-selectable-cell-width);\n min-width: var(--va-data-table-selectable-cell-width);\n text-align: var(--va-data-table-selectable-cell-text-align);\n vertical-align: var(--va-data-table-selectable-cell-vertical-align);\n cursor: var(--va-data-table-selectable-tr-cursor);\n}\n.va-data-table .va-data-table__table .va-data-table__table-th .va-data-table__table-cell-checkbox,\n.va-data-table .va-data-table__table .va-data-table__table-td .va-data-table__table-cell-checkbox {\n display: block;\n}\n.va-data-table .va-data-table__table .va-data-table__table-tr.selected {\n background-color: var(--va-data-table-selected-color);\n}\n.va-data-table .va-data-table__table.clickable .va-data-table__table-tr {\n cursor: pointer;\n}\n.va-data-table .va-data-table__table.striped .va-data-table__table-tbody .va-data-table__table-tr:nth-of-type(2n):not(.selected) td {\n position: relative;\n background: var(--va-data-table-striped-tr-background-color);\n opacity: var(--va-data-table-striped-tr-opacity);\n}\n.va-data-table .va-data-table__table.selectable .va-data-table__table-tbody .va-data-table__table-tr td, .va-data-table .va-data-table__table.hoverable .va-data-table__table-tbody .va-data-table__table-tr td {\n position: relative;\n}\n.va-data-table .va-data-table__table.selectable .va-data-table__table-tbody .va-data-table__table-tr:hover td, .va-data-table .va-data-table__table.hoverable .va-data-table__table-tbody .va-data-table__table-tr:hover td {\n z-index: 0;\n}\n.va-data-table .va-data-table__table.selectable .va-data-table__table-tbody .va-data-table__table-tr:hover td::after, .va-data-table .va-data-table__table.hoverable .va-data-table__table-tbody .va-data-table__table-tr:hover td::after {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: "";\n background: var(--va-data-table-hover-color);\n opacity: 1;\n z-index: -1;\n transition: all 0.3s ease-in-out;\n}\n.va-data-table .va-data-table__table .table-transition-fade-leave-active {\n transition: opacity var(--va-data-table-transition);\n display: none;\n}\n.va-data-table .va-data-table__table .table-transition-fade-enter-active {\n transition: opacity var(--va-data-table-transition) 0.2s;\n}\n.va-data-table .va-data-table__table .table-transition-fade-enter-from,\n.va-data-table .va-data-table__table .table-transition-shuffle-enter-from,\n.va-data-table .va-data-table__table .table-transition-fade-leave-to,\n.va-data-table .va-data-table__table .table-transition-shuffle-leave-to {\n opacity: 0;\n}\n.va-data-table .va-data-table__table .table-transition-shuffle-move {\n transition: transform var(--va-data-table-transition);\n}\n.va-data-table .va-data-table__table .table-transition-shuffle-leave-active {\n transition: none;\n display: none;\n}\n.va-data-table .va-data-table__table .table-transition-shuffle-enter-active {\n transition: opacity var(--va-data-table-transition);\n}\n.va-data-table__scroll-trigger {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.va-data-table--grid .va-data-table__table-thead .va-data-table__table-tr {\n display: flex;\n justify-content: space-between;\n}\n.va-data-table--grid .va-data-table__table-thead .va-data-table__table-tr .va-data-table__table-th {\n box-shadow: none;\n}\n@media (max-width: 767.98px) {\n.va-data-table--grid .va-data-table__table-thead .va-data-table__table-tr {\n flex-direction: column;\n}\n}\n.va-data-table--grid .va-data-table__table-tbody {\n margin-top: var(--va-data-table-grid-tbody-margin-top);\n display: grid;\n grid-template-columns: repeat(var(--05bdeaf3), minmax(0, 1fr));\n gap: var(--va-data-table-grid-tbody-gap);\n}\n.va-data-table--grid .va-data-table__table-tbody .va-data-table__table-tr {\n grid-column: span 1/span 1;\n padding: var(--va-data-table-grid-tr-padding);\n display: flex;\n flex-direction: column;\n border: var(--va-data-table-grid-tr-border);\n border-radius: var(--va-data-table-grid-tr-border-radius);\n}\n.va-data-table--grid .va-data-table__table-tbody .va-data-table__table-td {\n overflow: hidden;\n}\n.va-data-table--grid .selectable .va-data-table__table-tr {\n cursor: pointer;\n}\n.va-data-table--grid .va-data-table__table-td {\n display: flex;\n flex-direction: column;\n}\n.va-data-table--grid .va-data-table__grid-column-header {\n font-weight: var(--va-data-table-grid-tr-header-font-weight);\n color: var(--va-data-table-grid-tr-header-color);\n}';
const _VaDataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
export {
_VaDataTable as _
};
//# sourceMappingURL=VaDataTable.js.map