Refactor #3832 Refactor #3833 - For PickList

api-generator/components/picklist.js

@@ -174,39 +174,71 @@ const PickListEvents = [
 const PickListSlots = [
     {
         name: 'sourceheader',
-        description: "Custom content for the component's source header"
+        description: "Custom content for the component's source header."
     },
     {
         name: 'item',
-        description: 'Custom content for the item'
+        description: 'Custom content for the item.'
     },
     {
         name: 'targetheader',
-        description: "Custom content for the component's target header"
+        description: "Custom content for the component's target header."
     },
     {
         name: 'sourcecontrolsstart',
-        description: 'Custom content before source control buttons'
+        description: 'Custom content before source control buttons.'
     },
     {
         name: 'sourcecontrolsend',
-        description: 'Custom content after source control buttons'
+        description: 'Custom content after source control buttons.'
     },
     {
         name: 'movecontrolsstart',
-        description: 'Custom content before move buttons'
+        description: 'Custom content before move buttons.'
     },
     {
         name: 'movecontrolsend',
-        description: 'Custom content after move buttons'
+        description: 'Custom content after move buttons.'
     },
     {
         name: 'targetcontrolsstart',
-        description: 'Custom content before target control buttons'
+        description: 'Custom content before target control buttons.'
     },
     {
         name: 'targetcontrolsend',
-        description: 'Custom content after target control buttons'
+        description: 'Custom content after target control buttons.'
+    },
+    {
+        name: 'moveupicon',
+        description: 'Custom move up icon template.'
+    },
+    {
+        name: 'movetopicon',
+        description: 'Custom move top icon template.'
+    },
+    {
+        name: 'movedownicon',
+        description: 'Custom move down icon template.'
+    },
+    {
+        name: 'movebottomicon',
+        description: 'Custom move bottom icon template.'
+    },
+    {
+        name: 'movetotargeticon',
+        description: 'Custom move to target icon template.'
+    },
+    {
+        name: 'movealltotargeticon',
+        description: 'Custom move all to target icon template.'
+    },
+    {
+        name: 'movetosourceicon',
+        description: 'Custom move to source icon template.'
+    },
+    {
+        name: 'movealltosourceicon',
+        description: 'Custom move all to source icon template.'
     }
 ];
 

components/lib/picklist/PickList.d.ts

@@ -236,6 +236,38 @@ export interface PickListSlots {
      * Custom target controls end template.
      */
     targetcontrolsend(): VNode[];
+    /**
+     * Custom move up icon template.
+     */
+    moveupicon(): VNode[];
+    /**
+     * Custom move top icon template.
+     */
+    movetopicon(): VNode[];
+    /**
+     * Custom move down icon template.
+     */
+    movedownicon(): VNode[];
+    /**
+     * Custom move bottom icon template.
+     */
+    movebottomicon(): VNode[];
+    /**
+     * Custom move to target icon template.
+     */
+    movetotargeticon(): VNode[];
+    /**
+     * Custom move all to target icon template.
+     */
+    movealltotargeticon(): VNode[];
+    /**
+     * Custom move to source icon template.
+     */
+    movetosourceicon(): VNode[];
+    /**
+     * Custom move all to source icon template.
+     */
+    movealltosourceicon(): VNode[];
 }
 
 /**

components/lib/picklist/PickList.vue

@@ -2,10 +2,26 @@
     <div :class="containerClass">
         <div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls">
             <slot name="sourcecontrolsstart"></slot>
-            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" v-bind="moveUpButtonProps" type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
+            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps">
-            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" v-bind="moveTopButtonProps" type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
+                <slot name="moveupicon">
-            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" v-bind="moveDownButtonProps" type="button" icon="pi pi-angle-down" @click="moveDown($event, 0)"></PLButton>
+                    <AngleUpIcon />
-            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" v-bind="moveBottomButtonProps" type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 0)"></PLButton>
+                </slot>
+            </PLButton>
+            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps">
+                <slot name="movetopicon">
+                    <AngleDoubleUpIcon />
+                </slot>
+            </PLButton>
+            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps">
+                <slot name="movedownicon">
+                    <AngleDownIcon />
+                </slot>
+            </PLButton>
+            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps">
+                <slot name="movebottomicon">
+                    <AngleDoubleDownIcon />
+                </slot>
+            </PLButton>
             <slot name="sourcecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
@@ -47,10 +63,26 @@
         </div>
         <div class="p-picklist-buttons p-picklist-transfer-buttons">
             <slot name="movecontrolsstart"></slot>
-            <PLButton :aria-label="moveToTargetAriaLabel" type="button" icon="pi pi-angle-right" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps"></PLButton>
+            <PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps">
-            <PLButton :aria-label="moveAllToTargetAriaLabel" type="button" icon="pi pi-angle-double-right" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps"></PLButton>
+                <slot name="movetotargeticon">
-            <PLButton :aria-label="moveToSourceAriaLabel" type="button" icon="pi pi-angle-left" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps"></PLButton>
+                    <AngleRightIcon />
-            <PLButton :aria-label="moveAllToSourceAriaLabel" type="button" icon="pi pi-angle-double-left" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps"></PLButton>
+                </slot>
+            </PLButton>
+            <PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps">
+                <slot name="movealltotargeticon">
+                    <AngleDoubleRightIcon />
+                </slot>
+            </PLButton>
+            <PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps">
+                <slot name="movetosourceicon">
+                    <AngleLeftIcon />
+                </slot>
+            </PLButton>
+            <PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps">
+                <slot name="movealltosourceicon">
+                    <AngleDoubleLeftIcon />
+                </slot>
+            </PLButton>
             <slot name="movecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
@@ -93,10 +125,26 @@
         </div>
         <div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls">
             <slot name="targetcontrolsstart"></slot>
-            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" v-bind="moveUpButtonProps" type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
+            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps">
-            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" v-bind="moveTopButtonProps" type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
+                <slot name="moveupicon">
-            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" v-bind="moveDownButtonProps" type="button" icon="pi pi-angle-down" @click="moveDown($event, 1)"></PLButton>
+                    <AngleUpIcon />
-            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" v-bind="moveBottomButtonProps" type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 1)"></PLButton>
+                </slot>
+            </PLButton>
+            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps">
+                <slot name="movetopicon">
+                    <AngleDoubleUpIcon />
+                </slot>
+            </PLButton>
+            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps">
+                <slot name="movedownicon">
+                    <AngleDownIcon />
+                </slot>
+            </PLButton>
+            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps">
+                <slot name="movebottomicon">
+                    <AngleDoubleDownIcon />
+                </slot>
+            </PLButton>
             <slot name="targetcontrolsend"></slot>
         </div>
     </div>
@@ -104,6 +152,14 @@
 
 <script>
 import Button from 'primevue/button';
+import AngleDoubleDownIcon from 'primevue/icon/angledoubledown';
+import AngleDoubleLeftIcon from 'primevue/icon/angledoubleleft';
+import AngleDoubleRightIcon from 'primevue/icon/angledoubleright';
+import AngleDoubleUpIcon from 'primevue/icon/angledoubleup';
+import AngleDownIcon from 'primevue/icon/angledown';
+import AngleLeftIcon from 'primevue/icon/angleleft';
+import AngleRightIcon from 'primevue/icon/angleright';
+import AngleUpIcon from 'primevue/icon/angleup';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
@@ -854,7 +910,15 @@ export default {
         }
     },
     components: {
-        PLButton: Button
+        PLButton: Button,
+        AngleRightIcon: AngleRightIcon,
+        AngleLeftIcon: AngleLeftIcon,
+        AngleDownIcon: AngleDownIcon,
+        AngleUpIcon: AngleUpIcon,
+        AngleDoubleRightIcon: AngleDoubleRightIcon,
+        AngleDoubleLeftIcon: AngleDoubleLeftIcon,
+        AngleDoubleDownIcon: AngleDoubleDownIcon,
+        AngleDoubleUpIcon: AngleDoubleUpIcon
     },
     directives: {
         ripple: Ripple