vs-datatable 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +734 -2
  2. package/dist/index.css +1 -1
  3. package/dist/vs-datatable.es.js +334 -340
  4. package/dist/vs-datatable.umd.js +2 -21
  5. package/package.json +2 -5
  6. package/src/styles/base.scss +416 -0
  7. package/src/styles/bootstrap.scss +6 -6
  8. package/src/styles/index.scss +2 -2
  9. package/src/styles/themes.scss +215 -0
  10. package/src/styles/vs-datatable.scss +0 -40
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @media only screen and (min-width: 1199px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:12px!important;line-height:1!important}}@media only screen and (max-width: 768px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:10px!important;line-height:1!important}}.loader[data-v-6ad4d2c7]{position:relative;width:85px;height:50px;background-repeat:no-repeat;background-image:linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0);background-position:0px center,15px center,30px center,45px center,60px center,75px center,90px center;animation:rikSpikeRoll-6ad4d2c7 .65s linear infinite alternate}@keyframes rikSpikeRoll-6ad4d2c7{0%{background-size:10px 3px}16%{background-size:10px 50px,10px 3px,10px 3px,10px 3px,10px 3px,10px 3px}33%{background-size:10px 30px,10px 50px,10px 3px,10px 3px,10px 3px,10px 3px}50%{background-size:10px 10px,10px 30px,10px 50px,10px 3px,10px 3px,10px 3px}66%{background-size:10px 3px,10px 10px,10px 30px,10px 50px,10px 3px,10px 3px}83%{background-size:10px 3px,10px 3px,10px 10px,10px 30px,10px 50px,10px 3px}to{background-size:10px 3px,10px 3px,10px 3px,10px 10px,10px 30px,10px 50px}}.sort-container[data-v-48b15b64]{display:inline-flex;flex-direction:column;align-items:center;line-height:1}.sort-icon[data-v-48b15b64]{font-size:.62rem;color:#aaa;margin:-5px 0}.sort-icon.active-asc[data-v-48b15b64],.sort-icon.active-desc[data-v-48b15b64]{color:#daa520}.sort-badge[data-v-48b15b64]{font-size:.65rem;line-height:1;padding:.15rem .3rem;display:inline-flex;align-items:center;justify-content:center}.vs-table{border-collapse:separate;border-spacing:0}.vs-table thead{background-color:#f8f9fa}.vs-table thead th{font-weight:600;vertical-align:middle;padding:.75rem}.vs-table tbody tr{transition:background-color .2s ease}.vs-table tbody tr:hover{background-color:#e9ecef}.vs-table tbody tr td{padding:.65rem .75rem;vertical-align:middle}.vs-table .sort-icon{font-size:.75rem;vertical-align:middle}
1
+ .vs-pagination[data-v-a6d89ca2]{display:flex;align-items:center;justify-content:center;gap:var(--vs-spacing-sm);flex-wrap:wrap}.vs-pagination-button[data-v-a6d89ca2]{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--vs-spacing-sm);border:1px solid var(--vs-table-border);background-color:var(--vs-table-bg);color:var(--vs-dark);text-decoration:none;border-radius:var(--vs-border-radius);font-size:var(--vs-font-size-sm);transition:var(--vs-transition-fast);cursor:pointer}.vs-pagination-button[data-v-a6d89ca2]:hover:not(:disabled){background-color:var(--vs-table-hover-bg);border-color:var(--vs-primary)}.vs-pagination-button.vs-active[data-v-a6d89ca2]{background-color:var(--vs-primary);border-color:var(--vs-primary);color:#fff}.vs-pagination-button[data-v-a6d89ca2]:disabled{opacity:.5;cursor:not-allowed}.vs-pagination-nav[data-v-a6d89ca2]{font-weight:var(--vs-font-weight-bold)}.vs-pagination-ellipsis[data-v-a6d89ca2]{color:var(--vs-secondary);padding:0 var(--vs-spacing-sm);font-size:var(--vs-font-size-sm)}@media (max-width: 768px){.vs-pagination-button[data-v-a6d89ca2]{min-width:28px;height:28px;font-size:12px}}.vs-datatable[data-v-73862aa1]{--vs-table-wrapper-overflow: auto}.vs-table-wrapper[data-v-73862aa1]{overflow:var(--vs-table-wrapper-overflow)}.vs-header-content[data-v-73862aa1]{display:flex;align-items:center;gap:var(--vs-spacing-sm)}.vs-header-label[data-v-73862aa1]{flex:1}.vs-checkbox-column[data-v-73862aa1]{width:50px;text-align:center}.vs-row-clickable[data-v-73862aa1]{cursor:pointer}.vs-row-selected[data-v-73862aa1]{background-color:rgba(var(--vs-primary),.1)}.vs-table-footer[data-v-73862aa1]{display:flex;align-items:center;justify-content:space-between;padding:var(--vs-spacing-sm) 0}.vs-table-info[data-v-73862aa1]{color:var(--vs-secondary);font-size:var(--vs-font-size-md)}.vs-search-container[data-v-73862aa1]{margin-bottom:var(--vs-spacing-md)}:root{--vs-primary: #007bff;--vs-secondary: #6c757d;--vs-success: #28a745;--vs-danger: #dc3545;--vs-warning: #ffc107;--vs-info: #17a2b8;--vs-light: #f8f9fa;--vs-dark: #343a40;--vs-table-bg: #ffffff;--vs-table-border: #dee2e6;--vs-table-header-bg: #f8f9fa;--vs-table-header-color: #495057;--vs-table-hover-bg: #f5f5f5;--vs-table-stripe-bg: #fafafa;--vs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--vs-font-size: 14px;--vs-font-size-sm: 12px;--vs-font-size-lg: 16px;--vs-font-weight-normal: 400;--vs-font-weight-bold: 600;--vs-spacing-xs: 4px;--vs-spacing-sm: 8px;--vs-spacing-md: 16px;--vs-spacing-lg: 24px;--vs-spacing-xl: 32px;--vs-border-radius: 4px;--vs-border-radius-sm: 2px;--vs-border-radius-lg: 8px;--vs-shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--vs-shadow: 0 2px 4px rgba(0, 0, 0, .1);--vs-shadow-lg: 0 4px 8px rgba(0, 0, 0, .15);--vs-transition: all .2s ease-in-out;--vs-transition-fast: all .15s ease-in-out;--vs-z-dropdown: 1000;--vs-z-sticky: 1020;--vs-z-fixed: 1030;--vs-z-modal: 1040;--vs-z-popover: 1050;--vs-z-tooltip: 1060}.vs-datatable{font-family:var(--vs-font-family);font-size:var(--vs-font-size);line-height:1.5;color:var(--vs-dark);background-color:var(--vs-table-bg);box-sizing:border-box}.vs-datatable *,.vs-datatable *:before,.vs-datatable *:after{box-sizing:border-box}.vs-table-container{position:relative;background-color:var(--vs-table-bg);border:1px solid var(--vs-table-border);border-radius:var(--vs-border-radius);overflow:hidden;box-shadow:var(--vs-shadow-sm)}.vs-table{width:100%;margin:0;border-collapse:separate;border-spacing:0;background-color:var(--vs-table-bg)}.vs-table thead{background-color:var(--vs-table-header-bg)}.vs-table thead th{padding:var(--vs-spacing-sm);font-weight:var(--vs-font-weight-bold);color:var(--vs-table-header-color);text-align:left;vertical-align:middle;border-bottom:2px solid var(--vs-table-border);position:relative;-webkit-user-select:none;user-select:none}.vs-table thead th:first-child{border-top-left-radius:var(--vs-border-radius)}.vs-table thead th:last-child{border-top-right-radius:var(--vs-border-radius)}.vs-table tbody tr{transition:var(--vs-transition-fast);border-bottom:1px solid var(--vs-table-border)}.vs-table tbody tr:hover{background-color:var(--vs-table-hover-bg)}.vs-table tbody tr:nth-child(2n){background-color:var(--vs-table-stripe-bg)}.vs-table tbody tr:last-child{border-bottom:none}.vs-table tbody tr td{padding:var(--vs-spacing-md);vertical-align:middle;border-right:1px solid var(--vs-table-border)}.vs-table tbody tr td:last-child{border-right:none}.vs-sortable{cursor:pointer;position:relative}.vs-sortable:hover{background-color:rgba(var(--vs-primary),.1)}.vs-sortable .vs-sort-icons{display:inline-flex;flex-direction:column;margin-left:var(--vs-spacing-sm);vertical-align:middle}.vs-sortable .vs-sort-icons .vs-sort-icon{font-size:10px;line-height:1;color:var(--vs-secondary);transition:var(--vs-transition-fast);margin:-8px 0}.vs-sortable .vs-sort-icons .vs-sort-icon.vs-sort-asc,.vs-sortable .vs-sort-icons .vs-sort-icon.vs-sort-desc{color:var(--vs-primary)}.vs-sortable .vs-sort-icons .vs-sort-icon svg{fill:#e3e3e3}.vs-sortable .vs-sort-icons .vs-sort-icon.vs-active svg{fill:currentColor}.vs-sortable .vs-sort-priority{display:inline-block;background-color:var(--vs-primary);color:#fff;font-size:10px;padding:2px 6px;border-radius:var(--vs-border-radius-sm);margin-left:var(--vs-spacing-sm);font-weight:var(--vs-font-weight-bold)}.vs-loading{display:flex;align-items:center;justify-content:center;padding:var(--vs-spacing-xl);color:var(--vs-secondary)}.vs-loading .vs-spinner{width:20px;height:20px;border:2px solid var(--vs-table-border);border-top:2px solid var(--vs-primary);border-radius:50%;animation:vs-spin 1s linear infinite;margin-right:var(--vs-spacing-sm)}@keyframes vs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vs-no-data{text-align:center;padding:var(--vs-spacing-xl);color:var(--vs-secondary)}.vs-no-data .vs-no-data-icon{width:60px;height:60px;margin:0 auto var(--vs-spacing-md);opacity:.5}.vs-no-data .vs-no-data-message{font-size:var(--vs-font-size-lg);font-weight:var(--vs-font-weight-bold);margin-bottom:var(--vs-spacing-sm)}.vs-no-data .vs-no-data-description{font-size:var(--vs-font-size-sm);color:var(--vs-secondary)}.vs-search{position:relative;margin-bottom:var(--vs-spacing-md)}.vs-search .vs-search-input{width:100%;padding:var(--vs-spacing-sm) var(--vs-spacing-md);padding-left:40px;border:1px solid var(--vs-table-border);border-radius:var(--vs-border-radius);font-size:var(--vs-font-size);transition:var(--vs-transition-fast)}.vs-search .vs-search-input:focus{outline:none;border-color:var(--vs-primary);box-shadow:0 0 0 2px rgba(var(--vs-primary),.25)}.vs-search .vs-search-icon{position:absolute;left:var(--vs-spacing-md);top:50%;transform:translateY(-50%);color:var(--vs-secondary);pointer-events:none}.vs-pagination{display:flex;align-items:center;justify-content:center;gap:var(--vs-spacing-sm);margin-top:var(--vs-spacing-md)}.vs-pagination .vs-pagination-button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--vs-spacing-sm);border:1px solid var(--vs-table-border);background-color:var(--vs-table-bg);color:var(--vs-dark);text-decoration:none;border-radius:var(--vs-border-radius);font-size:var(--vs-font-size-sm);transition:var(--vs-transition-fast);cursor:pointer}.vs-pagination .vs-pagination-button:hover:not(:disabled){background-color:var(--vs-table-hover-bg);border-color:var(--vs-primary)}.vs-pagination .vs-pagination-button.vs-active{background-color:var(--vs-primary);border-color:var(--vs-primary);color:#fff}.vs-pagination .vs-pagination-button:disabled{opacity:.5;cursor:not-allowed}.vs-pagination .vs-pagination-ellipsis{color:var(--vs-secondary);padding:0 var(--vs-spacing-sm)}.vs-checkbox{display:inline-flex;align-items:center;cursor:pointer}.vs-checkbox input[type=checkbox]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--vs-primary)}.vs-checkbox label{margin:0;cursor:pointer;font-size:var(--vs-font-size-sm)}@media (max-width: 768px){.vs-table-container{overflow-x:auto}.vs-table{min-width:600px}.vs-pagination{flex-wrap:wrap;gap:var(--vs-spacing-xs)}.vs-pagination .vs-pagination-button{min-width:28px;height:28px;font-size:12px}}.vs-text-center{text-align:center}.vs-text-left{text-align:left}.vs-text-right{text-align:right}.vs-text-muted{color:var(--vs-secondary)}.vs-text-primary{color:var(--vs-primary)}.vs-text-success{color:var(--vs-success)}.vs-text-danger{color:var(--vs-danger)}.vs-text-warning{color:var(--vs-warning)}.vs-bg-primary{background-color:var(--vs-primary)}.vs-bg-success{background-color:var(--vs-success)}.vs-bg-danger{background-color:var(--vs-danger)}.vs-bg-warning{background-color:var(--vs-warning)}.vs-bg-light{background-color:var(--vs-light)}.vs-border{border:1px solid var(--vs-table-border)}.vs-border-top{border-top:1px solid var(--vs-table-border)}.vs-border-bottom{border-bottom:1px solid var(--vs-table-border)}.vs-border-left{border-left:1px solid var(--vs-table-border)}.vs-border-right{border-right:1px solid var(--vs-table-border)}.vs-rounded{border-radius:var(--vs-border-radius)}.vs-rounded-sm{border-radius:var(--vs-border-radius-sm)}.vs-rounded-lg{border-radius:var(--vs-border-radius-lg)}.vs-shadow{box-shadow:var(--vs-shadow)}.vs-shadow-sm{box-shadow:var(--vs-shadow-sm)}.vs-shadow-lg{box-shadow:var(--vs-shadow-lg)}.vs-fade-in{animation:vs-fade-in .3s ease-in-out}@keyframes vs-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.vs-slide-in{animation:vs-slide-in .3s ease-in-out}@keyframes vs-slide-in{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.vs-datatable.vs-theme-dark{--vs-primary: #0d6efd;--vs-secondary: #6c757d;--vs-success: #198754;--vs-danger: #dc3545;--vs-warning: #ffc107;--vs-info: #0dcaf0;--vs-light: #f8f9fa;--vs-dark: #212529;--vs-table-bg: #1a1a1a;--vs-table-border: #333333;--vs-table-header-bg: #2d2d2d;--vs-table-header-color: #ffffff;--vs-table-hover-bg: #333333;--vs-table-stripe-bg: #222222;color:#fff;background-color:var(--vs-table-bg)}.vs-datatable.vs-theme-minimal{--vs-primary: #000000;--vs-secondary: #666666;--vs-success: #000000;--vs-danger: #000000;--vs-warning: #000000;--vs-info: #000000;--vs-light: #f9f9f9;--vs-dark: #000000;--vs-table-bg: #ffffff;--vs-table-border: #e0e0e0;--vs-table-header-bg: #ffffff;--vs-table-header-color: #000000;--vs-table-hover-bg: #f5f5f5;--vs-table-stripe-bg: #ffffff}.vs-datatable.vs-theme-minimal .vs-table{border:none;box-shadow:none}.vs-datatable.vs-theme-minimal .vs-table thead th{border-bottom:2px solid var(--vs-table-border);font-weight:500}.vs-datatable.vs-theme-minimal .vs-table tbody tr{border-bottom:1px solid var(--vs-table-border)}.vs-datatable.vs-theme-colorful{--vs-primary: #e91e63;--vs-secondary: #9c27b0;--vs-success: #4caf50;--vs-danger: #f44336;--vs-warning: #ff9800;--vs-info: #2196f3;--vs-light: #f3e5f5;--vs-dark: #2e2e2e;--vs-table-bg: #ffffff;--vs-table-border: #e1bee7;--vs-table-header-bg: linear-gradient(135deg, #e91e63, #9c27b0);--vs-table-header-color: #ffffff;--vs-table-hover-bg: #f3e5f5;--vs-table-stripe-bg: #fafafa}.vs-datatable.vs-theme-colorful .vs-table thead th{background:var(--vs-table-header-bg);color:var(--vs-table-header-color);font-weight:600}.vs-datatable.vs-theme-colorful .vs-pagination-button.vs-active{background:linear-gradient(135deg,var(--vs-primary),var(--vs-secondary))}.vs-datatable.vs-theme-corporate{--vs-primary: #1e3a8a;--vs-secondary: #64748b;--vs-success: #059669;--vs-danger: #dc2626;--vs-warning: #d97706;--vs-info: #0891b2;--vs-light: #f8fafc;--vs-dark: #1e293b;--vs-table-bg: #ffffff;--vs-table-border: #e2e8f0;--vs-table-header-bg: #f1f5f9;--vs-table-header-color: #334155;--vs-table-hover-bg: #f8fafc;--vs-table-stripe-bg: #ffffff;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.vs-datatable.vs-theme-corporate .vs-table{border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.vs-datatable.vs-theme-corporate .vs-table thead th{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:16px 20px}.vs-datatable.vs-theme-corporate .vs-table tbody td{padding:16px 20px;font-size:14px}.vs-datatable.vs-theme-compact{--vs-spacing-xs: 2px;--vs-spacing-sm: 4px;--vs-spacing-md: 8px;--vs-spacing-lg: 12px;--vs-spacing-xl: 16px;--vs-font-size: 12px;--vs-font-size-sm: 10px;--vs-font-size-lg: 14px}.vs-datatable.vs-theme-compact .vs-table thead th{padding:var(--vs-spacing-sm) var(--vs-spacing-md);font-size:var(--vs-font-size-sm)}.vs-datatable.vs-theme-compact .vs-table tbody td{padding:var(--vs-spacing-sm) var(--vs-spacing-md);font-size:var(--vs-font-size)}.vs-datatable.vs-theme-compact .vs-pagination-button{min-width:24px;height:24px;font-size:var(--vs-font-size-sm)}.vs-datatable.vs-theme-rounded{--vs-border-radius: 12px;--vs-border-radius-sm: 6px;--vs-border-radius-lg: 16px}.vs-datatable.vs-theme-rounded .vs-table-container{border-radius:var(--vs-border-radius);overflow:hidden}.vs-datatable.vs-theme-rounded .vs-table thead th:first-child{border-top-left-radius:var(--vs-border-radius)}.vs-datatable.vs-theme-rounded .vs-table thead th:last-child{border-top-right-radius:var(--vs-border-radius)}.vs-datatable.vs-theme-rounded .vs-pagination-button{border-radius:var(--vs-border-radius-sm)}.vs-datatable.vs-theme-brand{--vs-primary: #ff6b35;--vs-secondary: #004e89;--vs-success: #00a896;--vs-danger: #e63946;--vs-warning: #f77f00;--vs-info: #06a77d}.vs-datatable.vs-theme-brand .vs-table-container{border:2px solid var(--vs-primary);border-radius:16px;box-shadow:0 8px 32px #ff6b3533}.vs-datatable.vs-theme-brand .vs-table thead th{background:linear-gradient(135deg,var(--vs-primary),var(--vs-secondary));color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.1)}.vs-datatable.vs-theme-brand .vs-pagination-button.vs-active{background:var(--vs-primary);transform:scale(1.05)}.vs-datatable.vs-theme-brand .vs-pagination-button:hover:not(:disabled){border-color:var(--vs-primary);transform:translateY(-1px)}