vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3832 Refactor #3833 - Update Picklist responsive

pull/3976/head
mertsincan 2023-04-18 16:55:04 +03:00
parent 002afebdc5
commit 9f54c0403e
1 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/lib/picklist/PickList.vue
View File

@ -73,29 +73,29 @@
<slot name="movecontrolsstart"></slot> <slot name="movecontrolsstart"></slot>
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps"> <PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps">
<template #icon> <template #icon>
<slot name="movetotargeticon"> <slot name="movetotargeticon" :viewChanged="viewChanged">
<AngleRightIcon /> <component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps"> <PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps">
<template #icon> <template #icon>
<slot name="movealltotargeticon"> <slot name="movealltotargeticon" :viewChanged="viewChanged">
<AngleDoubleRightIcon /> <component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps"> <PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps">
<template #icon> <template #icon>
<slot name="movetosourceicon"> <slot name="movetosourceicon" :viewChanged="viewChanged">
<AngleLeftIcon /> <component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps"> <PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps">
<template #icon> <template #icon>
<slot name="movealltosourceicon"> <slot name="movealltosourceicon" :viewChanged="viewChanged">
<AngleDoubleLeftIcon /> <component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
@ -279,6 +279,8 @@ export default {
itemTouched: false, itemTouched: false,
reorderDirection: null, reorderDirection: null,
styleElement: null, styleElement: null,
media: null,
mediaChangeListener: null,
data() { data() {
return { return {
id: this.$attrs.id, id: this.$attrs.id,
@ -287,7 +289,8 @@ export default {
sourceList: false, sourceList: false,
targetList: false targetList: false
}, },
focusedOptionIndex: -1 focusedOptionIndex: -1,
viewChanged: false
}; };
}, },
watch: { watch: {
@ -296,6 +299,10 @@ export default {
}, },
selection(newValue) { selection(newValue) {
this.d_selection = newValue; this.d_selection = newValue;
},
breakpoint(newValue) {
this.destroyMedia();
this.initMedia();
} }
}, },
updated() { updated() {
@ -307,12 +314,14 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
this.destroyStyle(); this.destroyStyle();
this.destroyMedia();
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId(); this.id = this.id || UniqueComponentId();
if (this.responsive) { if (this.responsive) {
this.createStyle(); this.createStyle();
this.initMedia();
} }
}, },
methods: { methods: {
@ -812,6 +821,29 @@ export default {
} }
} }
}, },
initMedia() {
this.media = window.matchMedia(`(max-width: ${this.breakpoint})`);
this.viewChanged = this.media.matches;
this.bindMediaChangeListener();
},
destroyMedia() {
this.unbindMediaChangeListener();
},
bindMediaChangeListener() {
if (this.media && !this.mediaChangeListener) {
this.mediaChangeListener = (event) => {
this.viewChanged = event.matches;
};
this.media.addEventListener('change', this.mediaChangeListener);
}
},
unbindMediaChangeListener() {
if (this.media && this.mediaChangeListener) {
this.media.removeEventListener('change', this.mediaChangeListener);
this.mediaChangeListener = null;
}
},
createStyle() { createStyle() {
if (!this.styleElement) { if (!this.styleElement) {
this.$el.setAttribute(this.attributeSelector, ''); this.$el.setAttribute(this.attributeSelector, '');
@ -838,22 +870,6 @@ export default {
.p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button:last-child { .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button:last-child {
margin-right: 0; margin-right: 0;
} }
.p-picklist[${this.attributeSelector}] .pi-angle-right:before {
content: "\\e930"
}
.p-picklist[${this.attributeSelector}] .pi-angle-double-right:before {
content: "\\e92c"
}
.p-picklist[${this.attributeSelector}] .pi-angle-left:before {
content: "\\e933"
}
.p-picklist[${this.attributeSelector}] .pi-angle-double-left:before {
content: "\\e92f"
}
} }
`; `;