Finished data components
cagataycivici
parent
c0640d01c1
commit
3d5eec7d80
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue