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}]">
|
||||
<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'">
|
||||
<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>
|
||||
<AccordionTabSlot :tab="tab" type="header" v-if="tab.$scopedSlots.header" />
|
||||
</a>
|
||||
|
|
@ -95,40 +95,17 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.p-accordion {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-accordion .p-accordion-header {
|
||||
.p-accordion-header a {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-top: 1px;
|
||||
zoom: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-accordion .p-accordion-header 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 {
|
||||
.p-accordion-header.p-disabled a {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-accordion-header-text {
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -451,7 +451,7 @@ export default {
|
|||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-dropdown {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0px;
|
||||
|
|
|
|||
|
|
@ -17,34 +17,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-card-header img {
|
||||
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>
|
||||
|
|
@ -204,48 +204,4 @@ export default {
|
|||
'DVPaginator': Paginator
|
||||
}
|
||||
}
|
||||
</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>
|
||||
</script>
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
</slot>
|
||||
</a>
|
||||
</legend>
|
||||
<transition name="p-fieldset-content-wrapper">
|
||||
<div class="p-fieldset-content-wrapper" v-show="!d_collapsed"
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="!d_collapsed"
|
||||
role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
|
||||
<div class="p-fieldset-content">
|
||||
<slot></slot>
|
||||
|
|
@ -62,49 +62,14 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.p-fieldset,
|
||||
.p-fieldset .p-fieldset-legend {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable .p-fieldset-legend {
|
||||
padding: 0;
|
||||
.p-fieldset-legend > a,
|
||||
.p-fieldset-legend > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable .p-fieldset-legend a {
|
||||
padding: 0.5em 1em;
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -300,82 +300,30 @@ export default {
|
|||
|
||||
<style>
|
||||
.p-orderlist {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
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 {
|
||||
padding: 0 .25em;
|
||||
width: 16.66666%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.p-orderlist-controls .p-button.p-button-icon-only {
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-orderlist-list-container {
|
||||
width: 83.33333%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-orderlist-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow:auto;
|
||||
height: 12.5em;
|
||||
}
|
||||
|
||||
.p-orderlist-caption {
|
||||
text-align: center;
|
||||
padding: .5em .75em;
|
||||
border-bottom: 0 none;
|
||||
overflow: auto;
|
||||
min-height: 12em;
|
||||
max-height: 24em;
|
||||
}
|
||||
|
||||
.p-orderlist-item {
|
||||
margin: 1px;
|
||||
padding: .125em;
|
||||
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,
|
||||
|
|
@ -387,25 +335,13 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-orderlist .p-orderlist-droppoint {
|
||||
height: 6px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.p-orderlist {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-orderlist-controls {
|
||||
width: 100%;
|
||||
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;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,41 +57,16 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.p-panel {
|
||||
padding: 0.2em;
|
||||
.p-panel-titlebar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-panel .p-panel-titlebar {
|
||||
padding: .5em .75em;
|
||||
}
|
||||
|
||||
.p-panel .p-panel-titlebar-icon {
|
||||
float: right;
|
||||
.p-panel-titlebar-icon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<div class="p-picklist p-component p-picklist-responsive">
|
||||
<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-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-double-down" @click="moveBottom($event, 0)"></PLButton>
|
||||
</div>
|
||||
<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-down" @click="moveDown($event, 0)"></PLButton>
|
||||
<PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 0)"></PLButton>
|
||||
</div>
|
||||
<div class="p-picklist-list-wrapper p-picklist-source-wrapper">
|
||||
<div class="p-picklist-caption" v-if="$slots.sourceHeader">
|
||||
|
|
@ -22,12 +20,10 @@
|
|||
</transition-group>
|
||||
</div>
|
||||
<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-double-right" @click="moveAllToTarget"></PLButton>
|
||||
<PLButton type="button" icon="pi pi-angle-left" @click="moveToSource"></PLButton>
|
||||
<PLButton type="button" icon="pi pi-angle-double-left" @click="moveAllToSource"></PLButton>
|
||||
</div>
|
||||
<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-left" @click="moveToSource"></PLButton>
|
||||
<PLButton type="button" icon="pi pi-angle-double-left" @click="moveAllToSource"></PLButton>
|
||||
</div>
|
||||
<div class="p-picklist-list-wrapper p-picklist-target-wrapper">
|
||||
<div class="p-picklist-caption" v-if="$slots.targetHeader">
|
||||
|
|
@ -43,12 +39,10 @@
|
|||
</transition-group>
|
||||
</div>
|
||||
<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-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-double-down" @click="moveBottom($event, 1)"></PLButton>
|
||||
</div>
|
||||
<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-down" @click="moveDown($event, 1)"></PLButton>
|
||||
<PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 1)"></PLButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -484,50 +478,29 @@ export default {
|
|||
<style>
|
||||
.p-picklist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-picklist-buttons,
|
||||
.p-picklist-list-wrapper {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-picklist-buttons {
|
||||
padding: 0 .25em;
|
||||
width: 10%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.p-picklist-buttons .p-button.p-button-icon-only {
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-picklist-list-wrapper {
|
||||
width: 35%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-picklist-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow:auto;
|
||||
height: 12.5em;
|
||||
}
|
||||
|
||||
.p-picklist-caption {
|
||||
text-align: center;
|
||||
padding: .5em .75em;
|
||||
border-bottom: 0 none;
|
||||
overflow: auto;
|
||||
min-height: 12em;
|
||||
max-height: 24em;
|
||||
}
|
||||
|
||||
.p-picklist-item {
|
||||
margin: 1px;
|
||||
padding: .125em;
|
||||
cursor: pointer;
|
||||
border: 0 none;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
|
||||
|
|
@ -536,19 +509,12 @@ export default {
|
|||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.p-picklist {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-picklist-buttons {
|
||||
width: 100%;
|
||||
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;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="p-tabview p-component p-tabview-top">
|
||||
<ul class="p-tabview-nav p-reset" 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}]">
|
||||
<div class="p-tabview p-component">
|
||||
<ul class="p-tabview-nav" role="tablist">
|
||||
<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">
|
||||
<span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
|
||||
<TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
|
||||
|
|
@ -91,151 +91,21 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.p-tabview {
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
.p-tabview .p-tabview-nav {
|
||||
.p-tabview-nav {
|
||||
display: flex;
|
||||
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;
|
||||
white-space: nowrap;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-tabview .p-tabview-nav li 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 {
|
||||
.p-tabview-nav a {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-tabview .p-tabview-panel {
|
||||
border-width: 0;
|
||||
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;
|
||||
.p-tabview-nav li.p-disabled a {
|
||||
cursor: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,20 +17,8 @@ export default {
|
|||
|
||||
<style>
|
||||
.p-toolbar {
|
||||
padding: .25em .5em;
|
||||
}
|
||||
|
||||
.p-toolbar:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.p-toolbar-group-left {
|
||||
float:left
|
||||
}
|
||||
|
||||
.p-toolbar-group-right {
|
||||
float:right
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
<template>
|
||||
<div :class="containerClass">
|
||||
<template v-if="loading">
|
||||
<div class="p-tree-loading-mask p-component-overlay"></div>
|
||||
<div class="p-tree-loading-content">
|
||||
<div class="p-tree-loading-mask p-component-overlay">
|
||||
<i :class="loadingIconClass" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="p-tree-filter-container" v-if="filter">
|
||||
<input type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder"
|
||||
@keydown="onFilterKeydown" v-model="filterValue" />
|
||||
<span class="p-tree-filter-icon pi pi-search"></span>
|
||||
<span class="p-tree-filter-icon pi pi-search"></span>
|
||||
</div>
|
||||
<ul class="p-tree-container" role="tree">
|
||||
<TreeNode v-for="node of valueToRender" :key="node.key" :node="node" :templates="$scopedSlots"
|
||||
|
|
@ -280,136 +279,59 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.p-tree {
|
||||
width: 24em;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode-selectable.p-treenode-content {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-container {
|
||||
height: 100%;
|
||||
.p-tree-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
overflow: auto;
|
||||
padding: .25em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode-children {
|
||||
.p-treenode-children {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode-droppoint-active {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-toggler {
|
||||
.p-treenode-selectable {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.p-tree .p-checkbox-box {
|
||||
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 {
|
||||
.p-tree-filter {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-filter-container {
|
||||
.p-tree-filter-container {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0.4em;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-filter-container .p-tree-filter-icon {
|
||||
.p-tree-filter-icon {
|
||||
position: absolute;
|
||||
top: .8em;
|
||||
right: 1em;
|
||||
top: 50%;
|
||||
margin-top: -.5em;
|
||||
}
|
||||
|
||||
/** Fluid **/
|
||||
.p-fluid .p-tree {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/** Loading **/
|
||||
.p-tree.p-tree-loading {
|
||||
.p-tree-loading {
|
||||
position: relative;
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-loading-mask {
|
||||
.p-tree-loading-mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
|
||||
opacity: 0.1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-loading-content {
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue