From fbce467721ff8ad63c1cdc03481c0fbc00328292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Fri, 12 Nov 2021 10:33:58 +0300 Subject: [PATCH 1/6] Fixed #1719 - ColorPicker: events --- api-generator/components/colorpicker.js | 30 ++++++++++++++++++- src/components/colorpicker/ColorPicker.d.ts | 3 ++ src/components/colorpicker/ColorPicker.vue | 7 ++++- src/views/colorpicker/ColorPickerDoc.vue | 32 +++++++++++++++++++++ 4 files changed, 70 insertions(+), 2 deletions(-) diff --git a/api-generator/components/colorpicker.js b/api-generator/components/colorpicker.js index d28d87a9b..31a4a5f40 100644 --- a/api-generator/components/colorpicker.js +++ b/api-generator/components/colorpicker.js @@ -67,10 +67,38 @@ const ColorPickerProps = [ } ]; +const ColorPickerEvents = [ + { + name: "change", + description: "Callback to invoke when a color is selected.", + arguments: [ + { + name: "event.originalEvent", + type: "object", + description: "Original event" + }, + { + name: "event.value", + type: "any", + description: "Selected color" + } + ] + }, + { + name: "show", + description: "Callback to invoke when popup is shown." + }, + { + name: "hide", + description: "Callback to invoke when popup is hidden." + } +]; + module.exports = { colorpicker: { name: "ColorPicker", description: "ColorPicker is an input component to select a color.", - props: ColorPickerProps + props: ColorPickerProps, + events: ColorPickerEvents } }; diff --git a/src/components/colorpicker/ColorPicker.d.ts b/src/components/colorpicker/ColorPicker.d.ts index 4d0017202..7845290bf 100755 --- a/src/components/colorpicker/ColorPicker.d.ts +++ b/src/components/colorpicker/ColorPicker.d.ts @@ -15,6 +15,9 @@ interface ColorPickerProps { declare class ColorPicker { $props: ColorPickerProps; $emit(eventName: 'update:modelValue', value: any): this; + $emit(eventName: 'change', event: {originalEvent: Event, value: any}): this; + $emit(eventName: 'show'): this; + $emit(eventName: 'hide'): this; } export default ColorPicker; diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue index 8516b47c6..9f0cea5df 100755 --- a/src/components/colorpicker/ColorPicker.vue +++ b/src/components/colorpicker/ColorPicker.vue @@ -29,7 +29,7 @@ import OverlayEventBus from 'primevue/overlayeventbus'; export default { name: 'ColorPicker', - emits: ['update:modelValue'], + emits: ['update:modelValue', 'change', 'show', 'hide'], props: { modelValue: { type: null, @@ -141,6 +141,7 @@ export default { this.updateColorHandle(); this.updateInput(); this.updateModel(); + this.$emit('change', {event: event, value: this.modelValue}); }, pickHue(event) { let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0); @@ -155,6 +156,7 @@ export default { this.updateHue(); this.updateModel(); this.updateInput(); + this.$emit('change', {event: event, value: this.modelValue}); }, updateModel() { switch(this.format) { @@ -354,12 +356,15 @@ export default { if (this.autoZIndex) { ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay); } + + this.$emit('show'); }, onOverlayLeave() { this.unbindOutsideClickListener(); this.unbindScrollListener(); this.unbindResizeListener(); this.clearRefs(); + this.$emit('hide'); }, onOverlayAfterLeave(el) { if (this.autoZIndex) { diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue index fe265ad57..24e6d5918 100755 --- a/src/views/colorpicker/ColorPickerDoc.vue +++ b/src/views/colorpicker/ColorPickerDoc.vue @@ -122,6 +122,38 @@ export default { +
Events
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
changeevent.originalEvent: Browser event
+ event.value: Selected color + 		Callback to invoke when a color is selected.
show-Callback to invoke when popup is shown.
hide-Callback to invoke when popup is hidden.
+
+
Styling

Following is the list style classed of the component.

From f2b9b8dd38bb7765fd3662ebbff160ab9cc3f689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Fri, 12 Nov 2021 10:47:58 +0300 Subject: [PATCH 2/6] demo icon update --- src/views/confirmdialog/ConfirmDialogDemo.vue | 8 +++--- src/views/confirmdialog/ConfirmDialogDoc.vue | 24 ++++++++-------- src/views/dialog/DialogDemo.vue | 8 +++--- src/views/dialog/DialogDoc.vue | 28 +++++++++---------- 4 files changed, 34 insertions(+), 34 deletions(-) diff --git a/src/views/confirmdialog/ConfirmDialogDemo.vue b/src/views/confirmdialog/ConfirmDialogDemo.vue index 68f021b02..d6464615e 100644 --- a/src/views/confirmdialog/ConfirmDialogDemo.vue +++ b/src/views/confirmdialog/ConfirmDialogDemo.vue @@ -24,14 +24,14 @@
- + - +
- + - +
diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue index b17e807df..8338644a4 100644 --- a/src/views/confirmdialog/ConfirmDialogDoc.vue +++ b/src/views/confirmdialog/ConfirmDialogDoc.vue @@ -281,14 +281,14 @@ export default {
- + - +
- + - +
@@ -366,14 +366,14 @@ export default {
- + - +
- + - +
@@ -464,14 +464,14 @@ export default defineComponent({
- + - +
- + - +
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue index 37dc1ec19..536e25ef1 100755 --- a/src/views/dialog/DialogDemo.vue +++ b/src/views/dialog/DialogDemo.vue @@ -103,13 +103,13 @@
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue index 8c0ecdbe7..6541e4a37 100755 --- a/src/views/dialog/DialogDoc.vue +++ b/src/views/dialog/DialogDoc.vue @@ -447,18 +447,18 @@ export default {
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.