Panel components and basic data components
cagataycivici
parent
efffe032a0
commit
da174d8e5b
|
|
@ -5,7 +5,7 @@
|
||||||
<div :class="['p-accordion-header', {'p-highlight': tab.d_active, 'p-disabled': tab.disabled}]">
|
<div :class="['p-accordion-header', {'p-highlight': tab.d_active, 'p-disabled': tab.disabled}]">
|
||||||
<a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'"
|
<a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'"
|
||||||
:aria-expanded="tab.d_active" :id="ariaId + i + '_header'" :aria-controls="ariaId + i + '_content'">
|
:aria-expanded="tab.d_active" :id="ariaId + i + '_header'" :aria-controls="ariaId + i + '_content'">
|
||||||
<span :class="['p-accordion-toggle-icon pi pi-fw', {'pi-caret-right': !tab.d_active, 'pi-caret-down': tab.d_active}]"></span>
|
<span :class="['p-accordion-toggle-icon pi', {'pi-caret-right': !tab.d_active, 'pi-caret-down': tab.d_active}]"></span>
|
||||||
<span class="p-accordion-header-text" v-if="tab.header">{{tab.header}}</span>
|
<span class="p-accordion-header-text" v-if="tab.header">{{tab.header}}</span>
|
||||||
<AccordionTabSlot :tab="tab" type="header" v-if="tab.$scopedSlots.header" />
|
<AccordionTabSlot :tab="tab" type="header" v-if="tab.$scopedSlots.header" />
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -95,40 +95,17 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.p-accordion {
|
.p-accordion-header a {
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-accordion .p-accordion-header {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
display: flex;
|
||||||
margin-top: 1px;
|
align-items: center;
|
||||||
zoom: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-accordion .p-accordion-header a {
|
.p-accordion-header.p-disabled a {
|
||||||
display: block;
|
|
||||||
padding: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-accordion .p-accordion-toggle-icon,
|
|
||||||
.p-accordion .p-accordion-header-text {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-accordion .p-accordion-header a > span {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-accordion .p-accordion-content {
|
|
||||||
padding: 1em;
|
|
||||||
border-top: 0;
|
|
||||||
zoom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-accordion .p-accordion-header.p-disabled,
|
|
||||||
.p-accordion .p-accordion-header.p-disabled a {
|
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-accordion-header-text {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -17,34 +17,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {}
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.p-card-header img {
|
.p-card-header img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-card-body {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-card-title {
|
|
||||||
font-size: 1.5em;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-card-subtitle {
|
|
||||||
opacity: .7;
|
|
||||||
margin-bottom: .5em;
|
|
||||||
margin-top: -.25em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-card-footer {
|
|
||||||
padding-top: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -205,47 +205,3 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.p-dataview .p-paginator {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dataview-column {
|
|
||||||
padding: .25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dataview-content-empty {
|
|
||||||
padding: .25em .625em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dataview .p-dataview-header,
|
|
||||||
.p-dataview .p-dataview-footer {
|
|
||||||
text-align: center;
|
|
||||||
padding: .5em .75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dataview .p-dataview-header {
|
|
||||||
border-bottom: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dataview .p-dataview-footer {
|
|
||||||
border-top: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dataview .p-paginator-top {
|
|
||||||
border-bottom: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dataview .p-paginator-bottom {
|
|
||||||
border-top: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dataview.p-dataview-list > .p-dataview-content > div.p-grid > div {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dataview-loading-icon {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -12,8 +12,8 @@
|
||||||
</slot>
|
</slot>
|
||||||
</a>
|
</a>
|
||||||
</legend>
|
</legend>
|
||||||
<transition name="p-fieldset-content-wrapper">
|
<transition name="p-toggleable-content">
|
||||||
<div class="p-fieldset-content-wrapper" v-show="!d_collapsed"
|
<div class="p-toggleable-content" v-show="!d_collapsed"
|
||||||
role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
|
role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
|
||||||
<div class="p-fieldset-content">
|
<div class="p-fieldset-content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
|
@ -62,49 +62,14 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.p-fieldset,
|
.p-fieldset-legend > a,
|
||||||
.p-fieldset .p-fieldset-legend {
|
.p-fieldset-legend > span {
|
||||||
padding: 0.5em 1em;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
.p-fieldset-toggleable .p-fieldset-legend {
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-fieldset-toggleable .p-fieldset-legend a {
|
.p-fieldset-toggleable .p-fieldset-legend a {
|
||||||
padding: 0.5em 1em;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fieldset .p-fieldset-toggler {
|
|
||||||
margin-right: .1em;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fieldset .p-fieldset-legend-text {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fieldset-content-wrapper-enter,
|
|
||||||
.p-fieldset-content-wrapper-leave-to {
|
|
||||||
max-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fieldset-content-wrapper-enter-to,
|
|
||||||
.p-fieldset-content-wrapper-leave {
|
|
||||||
max-height: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fieldset-content-wrapper-leave-active {
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fieldset-content-wrapper-enter-active {
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 1s ease-in-out;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -300,41 +300,17 @@ export default {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.p-orderlist {
|
.p-orderlist {
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
-ms-flex-wrap: wrap;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-orderlist-controls-left {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-controls-right {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-controls,
|
|
||||||
.p-orderlist-list-container {
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-ms-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
.p-orderlist-controls {
|
.p-orderlist-controls {
|
||||||
padding: 0 .25em;
|
display: flex;
|
||||||
width: 16.66666%;
|
flex-direction: column;
|
||||||
align-self: center;
|
justify-content: center;
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-controls .p-button.p-button-icon-only {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.25em;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-orderlist-list-container {
|
.p-orderlist-list-container {
|
||||||
width: 83.33333%;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-orderlist-list {
|
.p-orderlist-list {
|
||||||
|
|
@ -342,40 +318,12 @@ export default {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 12.5em;
|
min-height: 12em;
|
||||||
}
|
max-height: 24em;
|
||||||
|
|
||||||
.p-orderlist-caption {
|
|
||||||
text-align: center;
|
|
||||||
padding: .5em .75em;
|
|
||||||
border-bottom: 0 none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-orderlist-item {
|
.p-orderlist-item {
|
||||||
margin: 1px;
|
|
||||||
padding: .125em;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 0 none;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-filter-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
padding: .5em .6em;
|
|
||||||
border-bottom: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-filter-container .p-inputtext {
|
|
||||||
text-indent: 1.1em;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-filter-container .p-orderlist-filter-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 1em;
|
|
||||||
margin-top: -.6em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-orderlist.p-state-disabled .p-orderlist-item,
|
.p-orderlist.p-state-disabled .p-orderlist-item,
|
||||||
|
|
@ -387,25 +335,13 @@ export default {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-orderlist .p-orderlist-droppoint {
|
|
||||||
height: 6px;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
|
.p-orderlist {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.p-orderlist-controls {
|
.p-orderlist-controls {
|
||||||
width: 100%;
|
flex-direction: row;
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist .p-orderlist-list-container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist .p-orderlist-controls .p-button.p-button.p-button-icon-only {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20%;
|
|
||||||
margin-right: .25em;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -57,41 +57,16 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.p-panel {
|
.p-panel-titlebar {
|
||||||
padding: 0.2em;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-panel .p-panel-titlebar {
|
.p-panel-titlebar-icon {
|
||||||
padding: .5em .75em;
|
display: inline-flex;
|
||||||
}
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
.p-panel .p-panel-titlebar-icon {
|
|
||||||
float: right;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 1.25em;
|
|
||||||
width: 1.25em;
|
|
||||||
line-height: 1.25em;
|
|
||||||
text-align: center;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-o-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-panel .p-panel-titlebar-icon span {
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-panel .p-panel-content {
|
|
||||||
border: 0;
|
|
||||||
background: none;
|
|
||||||
padding: .5em .75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-panel .p-panel-footer {
|
|
||||||
border-width: 1px 0 0;
|
|
||||||
padding: .25em .5em;
|
|
||||||
text-align:left;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="p-picklist p-component p-picklist-responsive">
|
<div class="p-picklist p-component p-picklist-responsive">
|
||||||
<div class="p-picklist-buttons p-picklist-source-controls">
|
<div class="p-picklist-buttons p-picklist-source-controls">
|
||||||
<div class="p-picklist-buttons-cell">
|
|
||||||
<PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
|
||||||
<PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
|
||||||
<PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 0)"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 0)"></PLButton>
|
||||||
<PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 0)"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 0)"></PLButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="p-picklist-list-wrapper p-picklist-source-wrapper">
|
<div class="p-picklist-list-wrapper p-picklist-source-wrapper">
|
||||||
<div class="p-picklist-caption" v-if="$slots.sourceHeader">
|
<div class="p-picklist-caption" v-if="$slots.sourceHeader">
|
||||||
<slot name="sourceHeader"></slot>
|
<slot name="sourceHeader"></slot>
|
||||||
|
|
@ -22,13 +20,11 @@
|
||||||
</transition-group>
|
</transition-group>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-picklist-buttons">
|
<div class="p-picklist-buttons">
|
||||||
<div class="p-picklist-buttons-cell">
|
|
||||||
<PLButton type="button" icon="pi pi-angle-right" @click="moveToTarget"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-right" @click="moveToTarget"></PLButton>
|
||||||
<PLButton type="button" icon="pi pi-angle-double-right" @click="moveAllToTarget"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-double-right" @click="moveAllToTarget"></PLButton>
|
||||||
<PLButton type="button" icon="pi pi-angle-left" @click="moveToSource"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-left" @click="moveToSource"></PLButton>
|
||||||
<PLButton type="button" icon="pi pi-angle-double-left" @click="moveAllToSource"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-double-left" @click="moveAllToSource"></PLButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="p-picklist-list-wrapper p-picklist-target-wrapper">
|
<div class="p-picklist-list-wrapper p-picklist-target-wrapper">
|
||||||
<div class="p-picklist-caption" v-if="$slots.targetHeader">
|
<div class="p-picklist-caption" v-if="$slots.targetHeader">
|
||||||
<slot name="targetHeader"></slot>
|
<slot name="targetHeader"></slot>
|
||||||
|
|
@ -43,14 +39,12 @@
|
||||||
</transition-group>
|
</transition-group>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-picklist-buttons p-picklist-target-controls">
|
<div class="p-picklist-buttons p-picklist-target-controls">
|
||||||
<div class="p-picklist-buttons-cell">
|
|
||||||
<PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
|
||||||
<PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
|
||||||
<PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 1)"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 1)"></PLButton>
|
||||||
<PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 1)"></PLButton>
|
<PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 1)"></PLButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -484,28 +478,16 @@ export default {
|
||||||
<style>
|
<style>
|
||||||
.p-picklist {
|
.p-picklist {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-picklist-buttons,
|
|
||||||
.p-picklist-list-wrapper {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-picklist-buttons {
|
.p-picklist-buttons {
|
||||||
padding: 0 .25em;
|
display: flex;
|
||||||
width: 10%;
|
flex-direction: column;
|
||||||
align-self: center;
|
justify-content: center;
|
||||||
}
|
|
||||||
|
|
||||||
.p-picklist-buttons .p-button.p-button-icon-only {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.25em;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-picklist-list-wrapper {
|
.p-picklist-list-wrapper {
|
||||||
width: 35%;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-picklist-list {
|
.p-picklist-list {
|
||||||
|
|
@ -513,21 +495,12 @@ export default {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 12.5em;
|
min-height: 12em;
|
||||||
}
|
max-height: 24em;
|
||||||
|
|
||||||
.p-picklist-caption {
|
|
||||||
text-align: center;
|
|
||||||
padding: .5em .75em;
|
|
||||||
border-bottom: 0 none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-picklist-item {
|
.p-picklist-item {
|
||||||
margin: 1px;
|
|
||||||
padding: .125em;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 0 none;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
|
.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
|
||||||
|
|
@ -536,19 +509,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
|
.p-picklist {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.p-picklist-buttons {
|
.p-picklist-buttons {
|
||||||
width: 100%;
|
flex-direction: row;
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-picklist-list-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-picklist-buttons .p-button.p-button-icon-only {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20%;
|
|
||||||
margin-right: .25em;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="p-tabview p-component p-tabview-top">
|
<div class="p-tabview p-component">
|
||||||
<ul class="p-tabview-nav p-reset" role="tablist">
|
<ul class="p-tabview-nav" role="tablist">
|
||||||
<li role="presentation" v-for="(tab, i) of tabs" :key="tab.header || i" :class="['p-unselectable-text', {'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]">
|
<li role="presentation" v-for="(tab, i) of tabs" :key="tab.header || i" :class="[{'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]">
|
||||||
<a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'" :aria-selected="tab.d_active">
|
<a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'" :aria-selected="tab.d_active">
|
||||||
<span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
|
<span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
|
||||||
<TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
|
<TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
|
||||||
|
|
@ -91,151 +91,21 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.p-tabview {
|
.p-tabview-nav {
|
||||||
padding: .25em;
|
display: flex;
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav li {
|
|
||||||
list-style: none;
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
margin: 0 .125em 1px 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
white-space: nowrap;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav li a {
|
.p-tabview-nav a {
|
||||||
float: left;
|
|
||||||
padding: .5em 1em;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav li.p-tabview-selected a,
|
|
||||||
.p-tabview .p-tabview-nav li.p-disabled a,
|
|
||||||
.p-tabview .p-tabview-nav li.p-state-processing a {
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav li a,
|
|
||||||
.p-tabview.p-tabview-collapsible .p-tabview-nav li.p-tabview-selected a {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-tabview .p-tabview-panel {
|
.p-tabview-nav li.p-disabled a {
|
||||||
border-width: 0;
|
cursor: auto;
|
||||||
padding: 1em;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav li {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav li .p-tabview-left-icon,
|
|
||||||
.p-tabview .p-tabview-nav li .p-tabview-right-icon,
|
|
||||||
.p-tabview .p-tabview-nav li .p-tabview-title {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav li .p-tabview-left-icon {
|
|
||||||
margin-right: .25em;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav li .p-tabview-right-icon {
|
|
||||||
margin-left: .25em;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview .p-tabview-nav li .p-tabview-close {
|
|
||||||
margin: 0.5em 0.3em 0 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* per orientation settings */
|
|
||||||
/* top and bottom */
|
|
||||||
.p-tabview.p-tabview-top > .p-tabview-nav li {
|
|
||||||
border-bottom: 0;
|
|
||||||
top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview.p-tabview-top > .p-tabview-nav {
|
|
||||||
padding: .2em .2em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview.p-tabview-bottom > .p-tabview-nav {
|
|
||||||
padding: 0 .2em .2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview.p-tabview-bottom > .p-tabview-nav li {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* left and right*/
|
|
||||||
.p-tabview-left:after,
|
|
||||||
.p-tabview-right:after {
|
|
||||||
clear:both;
|
|
||||||
content: ".";
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-left > .p-tabview-nav {
|
|
||||||
float:left;
|
|
||||||
width: 25%;
|
|
||||||
height: 300px;
|
|
||||||
background-image: none;
|
|
||||||
padding-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-left > .p-tabview-panels {
|
|
||||||
float:right;
|
|
||||||
width: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview.p-tabview-left > .p-tabview-nav li,
|
|
||||||
.p-tabview.p-tabview-right > .p-tabview-nav li{
|
|
||||||
display: block;
|
|
||||||
float: right;
|
|
||||||
white-space: normal;
|
|
||||||
width: 99%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview.p-tabview-left > .p-tabview-nav li {
|
|
||||||
margin: 0 0 1px 0;
|
|
||||||
border-right:0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview.p-tabview-right > .p-tabview-nav {
|
|
||||||
float:right;
|
|
||||||
width: 25%;
|
|
||||||
height: 300px;
|
|
||||||
background-image: none;
|
|
||||||
padding-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview.p-tabview-right > .p-tabview-panels {
|
|
||||||
float:left;
|
|
||||||
width: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview.p-tabview-right > .p-tabview-nav li {
|
|
||||||
margin: 0 0 1px 0;
|
|
||||||
border-left:0 none;
|
|
||||||
}
|
|
||||||
/* RTL */
|
|
||||||
.p-rtl .p-tabview .p-tabview-nav li {
|
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -17,20 +17,8 @@ export default {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.p-toolbar {
|
.p-toolbar {
|
||||||
padding: .25em .5em;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
.p-toolbar:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toolbar-group-left {
|
|
||||||
float:left
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toolbar-group-right {
|
|
||||||
float:right
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="containerClass">
|
<div :class="containerClass">
|
||||||
<template v-if="loading">
|
<template v-if="loading">
|
||||||
<div class="p-tree-loading-mask p-component-overlay"></div>
|
<div class="p-tree-loading-mask p-component-overlay">
|
||||||
<div class="p-tree-loading-content">
|
|
||||||
<i :class="loadingIconClass" />
|
<i :class="loadingIconClass" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -280,136 +279,59 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.p-tree {
|
.p-tree-container {
|
||||||
width: 24em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-treenode-selectable.p-treenode-content {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-tree-container {
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: .25em;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-tree .p-treenode-children {
|
.p-treenode-children {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 0 0 1em;
|
padding: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-treenode {
|
|
||||||
background-attachment: scroll;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
background-position: 0 0;
|
|
||||||
background-repeat: repeat-y;
|
|
||||||
list-style: none outside none;
|
|
||||||
margin: 0;
|
|
||||||
padding: .125em 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-treenode-droppoint {
|
|
||||||
height: 4px;
|
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-tree .p-treenode-droppoint-active {
|
.p-treenode-selectable {
|
||||||
border: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-tree-toggler {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-tree-toggler .p-tree-toggler-icon {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-treenode-icon {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-treenode-label {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 .25em;
|
|
||||||
vertical-align: middle;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-tree .p-treenode.p-treenode-leaf > .p-treenode-content > .p-tree-toggler {
|
.p-tree-toggler {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-tree .p-checkbox-box {
|
.p-tree-filter {
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-checkbox {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-checkbox .p-checkbox-icon {
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-tree-filter {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
|
||||||
padding-right: 1.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-tree .p-tree-filter-container {
|
.p-tree-filter-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
display: block;
|
||||||
padding: 0.4em;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-tree .p-tree-filter-container .p-tree-filter-icon {
|
.p-tree-filter-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: .8em;
|
top: 50%;
|
||||||
right: 1em;
|
margin-top: -.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Fluid **/
|
.p-tree-loading {
|
||||||
.p-fluid .p-tree {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Loading **/
|
|
||||||
.p-tree.p-tree-loading {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 4em;
|
min-height: 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-tree .p-tree-loading-mask {
|
.p-tree-loading-mask {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
|
|
||||||
opacity: 0.1;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
.p-tree .p-tree-loading-content {
|
justify-content: center;
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
z-index: 2;
|
|
||||||
margin-top: -1em;
|
|
||||||
margin-left: -1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-tree-loading-content .p-tree-loading-icon {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue