From 3d5eec7d80b9304da191f1905edf35a0e7b6b9d9 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 24 Apr 2020 18:13:48 +0300
Subject: [PATCH] Finished data components

---
 src/components/carousel/Carousel.vue          |  38 +----
 src/components/datatable/DataTable.vue        |  77 +---------
 .../organizationchart/OrganizationChart.vue   |  23 +--
 src/components/paginator/Paginator.vue        | 106 ++-----------
 src/components/treetable/TreeTable.vue        | 141 +-----------------
 5 files changed, 42 insertions(+), 343 deletions(-)

diff --git a/src/components/carousel/Carousel.vue b/src/components/carousel/Carousel.vue
index ceb9bb366..73e0cc228 100644
--- a/src/components/carousel/Carousel.vue
+++ b/src/components/carousel/Carousel.vue
@@ -501,76 +501,48 @@ export default {
 .p-carousel {
 	display: flex;
 	flex-direction: column;
-	width: 100%;
 }
 
 .p-carousel-content {
 	display: flex;
 	flex-direction: column;
-	flex-wrap: nowrap;
 	overflow: auto;
-	padding: 0 .5em;
 }
 
 .p-carousel-prev,
 .p-carousel-next {
 	align-self: center;
-	text-align: center;
 	flex-grow: 0;
-	flex-shrink: 0;
-	width: 2.5em;
-	height: 2.5em;
-}
-
-.p-carousel-prev span,
-.p-carousel-next span {
-	width: 100%;
-	display: flex;
-	justify-content: center;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
 	align-items: center;
 }
 
 .p-carousel-container {
 	display: flex;
 	flex-direction: row;
-	padding: 0 .1em;
 }
 
 .p-carousel-items-content {
 	overflow: hidden;
-	width: 100%;
-}
-
-.p-carousel-header,
-.p-carousel-footer {
-	padding: 0 .5em;
-	z-index: 1;
 }
 
 .p-carousel-items-container {
 	display: flex;
-	flex-wrap: nowrap;
 	flex-direction: row;
 }
 
-.p-carousel-items-container .p-carousel-item {
-	width: 100%;
-	box-sizing: border-box;
-	overflow: auto;
-}
-
 .p-carousel .p-carousel-dots-container {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	flex-wrap: wrap;
-	margin: .5em;
 }
 
 /* Vertical */
 .p-carousel-vertical .p-carousel-container {
 	flex-direction: column;
-	width: 100%;
 }
 
 .p-carousel-vertical .p-carousel-items-container {
@@ -578,10 +550,6 @@ export default {
 	height: 100%;
 }
 
-.p-carousel-vertical .p-carousel-dots-container {
-	margin: .75em 0;
-}
-
 /* Keyboard Support */
 .p-items-hidden .p-carousel-item {
 	visibility: hidden;
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 3d3fd8213..cde99c6eb 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -2,8 +2,7 @@
     <div :class="containerClass">
         <slot></slot>
         <div class="p-datatable-loading" v-if="loading">
-            <div class="p-datatable-loading-overlay p-component-overlay"></div>
-            <div class="p-datatable-loading-content">
+            <div class="p-datatable-loading-overlay p-component-overlay">
                 <i :class="loadingIconClass"></i>
             </div>
         </div>
@@ -1843,26 +1842,11 @@ export default {
     table-layout: fixed;
 }
 
-.p-datatable .p-datatable-thead > tr > th,
-.p-datatable .p-datatable-tbody > tr > td,
-.p-datatable .p-datatable-tfoot > tr > td {
-    padding: .25em .5em;
-}
-
-.p-datatable .p-column-title {
-    user-select: none;
-    vertical-align: middle;
-}
-
 .p-datatable .p-sortable-column {
     cursor: pointer;
     user-select: none;
 }
 
-.p-datatable .p-sortable-column-icon {
-    vertical-align: middle;
-}
-
 .p-datatable-auto-layout > .p-datatable-wrapper {
     overflow-x: auto;
 }
@@ -1871,43 +1855,18 @@ export default {
     table-layout: auto;
 }
 
-.p-datatable-hoverable-rows .p-datatable-tbody > tr.p-highlight {
+.p-datatable-hoverable-rows .p-datatable-row {
     cursor: pointer;
 }
 
-/* Sections */
-.p-datatable-header,
-.p-datatable-footer {
-    padding: .25em .5em;
-    text-align: center;
-    font-weight: bold;
-}
-
-.p-datatable-header {
-    border-bottom: 0 none;
-}
-
-.p-datatable-footer {
-    border-top: 0 none;
-}
-
-/* Paginator */
-.p-datatable .p-paginator-top {
-    border-bottom: 0 none;
-}
-
-.p-datatable .p-paginator-bottom {
-    border-top: 0 none;
-}
-
 /* Scrollable */
 .p-datatable-scrollable-wrapper {
     position: relative;
 }
+
 .p-datatable-scrollable-header,
 .p-datatable-scrollable-footer {
     overflow: hidden;
-    border: 0 none;
 }
 
 .p-datatable-scrollable-body {
@@ -1934,12 +1893,7 @@ export default {
 
 .p-datatable-unfrozen-view {
     position: absolute;
-    top: 0px;
-}
-
-/* Filter */
-.p-column-filter {
-    width: 100%;
+    top: 0;
 }
 
 /* Resizable */
@@ -1995,25 +1949,10 @@ export default {
 }
 
 /* Loader */
-.p-datatable .p-datatable-loading-overlay {
+.p-datatable-loading-overlay {
     position: absolute;
-    width: 100%;
-    height: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-    opacity: 0.1;
-    z-index: 1;
-}
-
-.p-datatable .p-datatable-loading-content {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 2;
-    margin-top: -1em;
-    margin-left: -1em;
-}
-
-.p-datatable .p-datatable-loading-icon {
-    font-size: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 </style>
diff --git a/src/components/organizationchart/OrganizationChart.vue b/src/components/organizationchart/OrganizationChart.vue
index c5247ddc7..2a40d7586 100644
--- a/src/components/organizationchart/OrganizationChart.vue
+++ b/src/components/organizationchart/OrganizationChart.vue
@@ -88,55 +88,48 @@ export default {
 </script>
 
 <style>
-.p-organizationchart .p-organizationchart-table {
+.p-organizationchart-table {
     border-spacing: 0;
     border-collapse: separate;
     margin: 0 auto;
 }
 
-.p-organizationchart .p-organizationchart-table > tbody > tr > td {
+.p-organizationchart-table > tbody > tr > td {
     text-align: center;
     vertical-align: top;
-    padding: 0;
     padding: 0 .75em;
 }
 
-.p-organizationchart .p-organizationchart-node-content {
-    padding: .5em .75em;
+.p-organizationchart-node-content {
     display: inline-block;
     position: relative;
 }
 
-.p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+.p-organizationchart-node-content .p-node-toggler {
     position: absolute;
     bottom: -9px;
     margin-left: -8px;
     z-index: 2;
     left: 50%;
     user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
     cursor: pointer;
 }
 
-.p-organizationchart .p-organizationchart-line-down {
+.p-organizationchart-line-down {
     margin: 0 auto;
     height: 20px;
     width: 1px;
-    float: none;
 }
 
-.p-organizationchart .p-organizationchart-line-right {
-    float: none;
+.p-organizationchart-line-right {
     border-radius: 0px;
 }
 
-.p-organizationchart .p-organizationchart-line-left {
-    float: none;
+ .p-organizationchart-line-left {
     border-radius: 0;
 }
 
-.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node {
+.p-organizationchart-selectable-node {
     cursor: pointer;
 }
 </style>
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index ccdcc68dc..d4bb00a8f 100644
--- a/src/components/paginator/Paginator.vue
+++ b/src/components/paginator/Paginator.vue
@@ -200,103 +200,27 @@ export default {
 
 <style lang="css">
 .p-paginator {
-	margin: 0;
-	text-align: center;
-	padding: .125em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.p-paginator .p-paginator-top {
-	border-bottom: 0 none;
+.p-paginator-left-content {
+	margin-right: auto;
 }
 
-.p-paginator .p-paginator-bottom {
-	border-top:0 none;
+.p-paginator-right-content {
+	margin-left: auto;
 }
 
-.p-paginator .p-paginator-left-content {
-	float: left;
-}
-
-.p-paginator .p-paginator-right-content {
-	float: right;
-}
-
-.p-paginator .p-paginator-page,
-.p-paginator .p-paginator-pages,
-.p-paginator .p-paginator-next,
-.p-paginator .p-paginator-last,
-.p-paginator .p-paginator-first,
-.p-paginator .p-paginator-prev,
-.p-paginator .p-paginator-current {
-	display: inline-block;
-	width: 1.5em;
-	height: 1.5em;
-	line-height: 1.5em;
-	zoom: 1;
-	margin-left: .063em;
-	margin-right: .063em;
-	text-decoration: none;
-	vertical-align: middle;
-	text-align: center;
-    position: relative;
+.p-paginator-page,
+.p-paginator-next,
+.p-paginator-last,
+.p-paginator-first,
+.p-paginator-prev {
     cursor: pointer;
-}
-
-.p-paginator .p-paginator-pages {
-	width: auto;
-	line-height: 1;
-}
-
-.p-paginator .p-paginator-icon {
-	display: block;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	width: 1em;
-	height: 1em;
-	margin-top: -.5em;
-	margin-left: -.5em;
-}
-
-.p-paginator .p-paginator-page,
-.p-paginator .p-paginator-next,
-.p-paginator .p-paginator-last,
-.p-paginator .p-paginator-first,
-.p-paginator .p-paginator-prev{
-	cursor: pointer;
-}
-
-.p-paginator .p-paginator-current,
-.p-paginator .p-paginator-rpp-options {
-	margin-left: 1em;
-	margin-right: 1em;
-	background-image: none;
-}
-
-.p-paginator .p-paginator-jtp-select option,
-.p-paginator .p-paginator-rpp-options option {
-	background-image: none;
-	border: 0 none;
-	box-shadow: none;
-	-moz-box-shadow: none;
-	-webkit-box-shadow: none;
-}
-
-.p-paginator .p-disabled {
-	outline: 0 none;
-}
-
-.p-paginator .p-dropdown {
-	min-width: 4em;
-	margin-left: .375em;
-}
-
-.p-fluid .p-paginator .p-dropdown {
-	width: auto;
-}
-
-.p-paginator .p-paginator-current {
-	width: auto;
-	height: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index ec32fdca6..f0526c0fe 100644
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -2,8 +2,7 @@
     <div :class="containerClass">
         <slot></slot>
         <div class="p-treetable-loading" v-if="loading">
-            <div class="p-treetable-loading-overlay p-component-overlay"></div>
-            <div class="p-treetable-loading-content">
+            <div class="p-treetable-loading-overlay p-component-overlay">
                 <i :class="loadingIconClass"></i>
             </div>
         </div>
@@ -909,112 +908,25 @@ export default {
     table-layout: fixed;
 }
 
-.p-treetable-toggler {
-    cursor: pointer;
-    display: inline-block;
-}
-
-.p-treetable .p-treetable-thead > tr > th,
-.p-treetable .p-treetable-tbody > tr > td,
-.p-treetable .p-treetable-tfoot > tr > td {
-    padding: .25em .5em;
-}
-
-.p-treetable .p-treetable-thead > tr > th .p-column-title {
-    vertical-align: middle;
-    user-select: none;
-}
-
 .p-treetable .p-sortable-column {
     cursor: pointer;
     user-select: none;
 }
 
-.p-treetable .p-sortable-column-icon {
-    vertical-align: middle;
-}
-
 .p-treetable-auto-layout > .p-treetable-wrapper {
     overflow-x: auto;
 }
 
-.p-treetable-auto-layout table {
+.p-treetable-auto-layout > .p-treetable-wrapper > table {
     table-layout: auto;
 }
 
-.p-treetable-hoverable-rows .p-treetable-tbody > tr.p-highlight {
+.p-treetable-hoverable-rows .p-treetable-row {
     cursor: pointer;
 }
 
-/* Sections */
-.p-treetable-header,
-.p-treetable-footer {
-    padding: .25em .5em;
-    text-align: center;
-    font-weight: bold;
-}
-
-.p-treetable-header {
-    border-bottom: 0 none;
-}
-
-.p-treetable-footer {
-    border-top: 0 none;
-}
-
-/* Paginator */
-.p-treetable .p-paginator-top {
-    border-bottom: 0 none;
-}
-
-.p-treetable .p-paginator-bottom {
-    border-top: 0 none;
-}
-
-/* Scrollable */
-.p-treetable-scrollable-wrapper {
-    position: relative;
-}
-.p-treetable-scrollable-header,
-.p-treetable-scrollable-footer {
-    overflow: hidden;
-    border: 0 none;
-}
-
-.p-treetable-scrollable-body {
-    overflow: auto;
-    position: relative;
-}
-
-.p-treetable-scrollable-body > table > .p-treetable-tbody > tr:first-child > td {
-    border-top: 0 none;
-}
-
-.p-treetable-virtual-table {
-    position: absolute;
-}
-
-/* Frozen Columns */
-.p-treetable-frozen-view .p-treetable-scrollable-body {
-    overflow: hidden;
-}
-
-.p-treetable-frozen-view > .p-treetable-scrollable-body > table > .p-treetable-tbody > tr > td:last-child {
-    border-right: 0 none;
-}
-
-.p-treetable-unfrozen-view {
-    position: absolute;
-    top: 0px;
-}
-
-/* Filter */
-.p-column-filter {
-    width: 100%;
-}
-
 /* Resizable */
-.p-treetable-resizable > .p-treetable-tablewrapper {
+.p-treetable-resizable > .p-treetable-wrapper {
     overflow-x: auto;
 }
 
@@ -1053,49 +965,12 @@ export default {
     display: none;
 }
 
-/* Selection */
-.p-treetable .p-treetable-checkbox {
-    margin: 0 .5em 0 .25em;
-    vertical-align: middle;
-}
-
-/* Edit */
-.p-treetable .p-treetable-tbody > tr > td.p-cell-editing .p-component {
-    width: 100%;
-}
-
-/* Reorder */
-.p-treetable-reorder-indicator-up,
-.p-treetable-reorder-indicator-down {
-    position: absolute;
-    display: none;
-}
-
-/* Responsive */
-.p-treetable-responsive .p-treetable-tbody > tr > td .p-column-title {
-    display: none;
-}
 
 /* Loader */
-.p-treetable .p-treetable-loading-overlay {
+.p-treetable-loading-overlay {
     position: absolute;
-    width: 100%;
-    height: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-    opacity: 0.1;
-    z-index: 1;
-}
-
-.p-treetable .p-treetable-loading-content {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 2;
-    margin-top: -1em;
-    margin-left: -1em;
-}
-
-.p-treetable .p-treetable-loading-icon {
-    font-size: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 </style>