From 6295928c7ace2a725c051a3f996c6846c7e752fe Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 9 May 2024 13:02:54 +0300
Subject: [PATCH] Listbox: checkmark, highlightOnSelect properties added

---
 components/lib/listbox/BaseListbox.vue        |  8 ++
 components/lib/listbox/Listbox.d.ts           | 18 +++++
 components/lib/listbox/Listbox.vue            | 10 ++-
 .../lib/listbox/style/ListboxStyle.d.ts       |  2 +
 components/lib/listbox/style/ListboxStyle.js  | 15 +++-
 components/lib/themes/aura/listbox/index.js   |  3 +
 components/lib/themes/lara/listbox/index.js   |  3 +
 doc/listbox/CheckmarkDoc.vue                  | 75 +++++++++++++++++++
 pages/listbox/index.vue                       |  6 ++
 9 files changed, 137 insertions(+), 3 deletions(-)
 create mode 100644 doc/listbox/CheckmarkDoc.vue

diff --git a/components/lib/listbox/BaseListbox.vue b/components/lib/listbox/BaseListbox.vue
index 7192140d1..7968418ec 100644
--- a/components/lib/listbox/BaseListbox.vue
+++ b/components/lib/listbox/BaseListbox.vue
@@ -62,6 +62,14 @@ export default {
             type: Boolean,
             default: true
         },
+        highlightOnSelect: {
+            type: Boolean,
+            default: true
+        },
+        checkmark: {
+            type: Boolean,
+            default: false
+        },
         filterMessage: {
             type: String,
             default: null
diff --git a/components/lib/listbox/Listbox.d.ts b/components/lib/listbox/Listbox.d.ts
index 9f4a3c268..c554f4aeb 100755
--- a/components/lib/listbox/Listbox.d.ts
+++ b/components/lib/listbox/Listbox.d.ts
@@ -164,6 +164,14 @@ export interface ListboxPassThroughOptions<T = any> {
      * Used to pass attributes to the option's DOM element.
      */
     option?: ListboxPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the option check icon's DOM element.
+     */
+    optionCheckIcon?: ListboxPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the option blank icon's DOM element.
+     */
+    optionBlankIcon?: ListboxPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the emptyMessage's DOM element.
      */
@@ -351,6 +359,16 @@ export interface ListboxProps {
      * @defaultValue true
      */
     focusOnHover?: boolean | undefined;
+    /**
+     *  Whether the selected option will be add highlight class.
+     *  @defaultValue true
+     */
+    highlightOnSelect?: boolean | undefined;
+    /**
+     *  Whether the selected option will be shown with a check mark.
+     *  @defaultValue false
+     */
+    checkmark?: boolean | undefined;
     /**
      * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
      * @defaultValue '{0} results are available'
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 7210c6a08..126284ecf 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -91,6 +91,10 @@
                                 :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                 :data-p-disabled="isOptionDisabled(option)"
                             >
+                                <template v-if="checkmark">
+                                    <CheckIcon v-if="isSelected(option)" :class="cx('optionCheckIcon')" v-bind="ptm('optionCheckIcon')" />
+                                    <BlankIcon v-else :class="cx('optionBlankIcon')" v-bind="ptm('optionBlankIcon')" />
+                                </template>
                                 <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                             </li>
                         </template>
@@ -131,6 +135,8 @@
 <script>
 import { FilterService } from 'primevue/api';
 import IconField from 'primevue/iconfield';
+import BlankIcon from 'primevue/icons/blank';
+import CheckIcon from 'primevue/icons/check';
 import SearchIcon from 'primevue/icons/search';
 import InputIcon from 'primevue/inputicon';
 import InputText from 'primevue/inputtext';
@@ -754,7 +760,9 @@ export default {
         VirtualScroller,
         InputIcon,
         IconField,
-        SearchIcon
+        SearchIcon,
+        CheckIcon,
+        BlankIcon
     }
 };
 </script>
diff --git a/components/lib/listbox/style/ListboxStyle.d.ts b/components/lib/listbox/style/ListboxStyle.d.ts
index 805385332..4441e903f 100644
--- a/components/lib/listbox/style/ListboxStyle.d.ts
+++ b/components/lib/listbox/style/ListboxStyle.d.ts
@@ -17,6 +17,8 @@ export enum ListboxClasses {
     list = 'p-listbox-list',
     optionGroup = 'p-listbox-option-group',
     option = 'p-listbox-option',
+    optionCheckIcon = 'p-listbox-option-check-icon',
+    optionBlankIcon = 'p-listbox-option-blank-icon',
     emptyMessage = 'p-listbox-empty-message'
 }
 
diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js
index 600a7e285..dca6683f2 100644
--- a/components/lib/listbox/style/ListboxStyle.js
+++ b/components/lib/listbox/style/ListboxStyle.js
@@ -55,6 +55,8 @@ const theme = ({ dt }) => `
 }
 
 .p-listbox-option {
+    display: flex;
+    align-items: center;
     cursor: pointer;
     position: relative;
     overflow: hidden;
@@ -85,6 +87,13 @@ const theme = ({ dt }) => `
     color: ${dt('listbox.option.focus.color')};
 }
 
+.p-listbox-option-check-icon {
+    position: relative;
+    margin-left: -0.375rem;
+    margin-right: 0.375rem;
+    color: ${dt('listbox.checkmark.color')};
+}
+
 .p-listbox-option-group {
     margin: 0;
     padding: ${dt('listbox.option.group.padding')};
@@ -112,14 +121,16 @@ const classes = {
     listContainer: 'p-listbox-list-container',
     list: 'p-listbox-list',
     optionGroup: 'p-listbox-option-group',
-    option: ({ instance, option, index, getItemOptions }) => [
+    option: ({ instance, props, option, index, getItemOptions }) => [
         'p-listbox-option',
         {
-            'p-listbox-option-selected': instance.isSelected(option),
+            'p-listbox-option-selected': instance.isSelected(option) && props.highlightOnSelect,
             'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
+    optionCheckIcon: 'p-listbox-option-check-icon',
+    optionBlankIcon: 'p-listbox-option-blank-icon',
     emptyMessage: 'p-listbox-empty-message'
 };
 
diff --git a/components/lib/themes/aura/listbox/index.js b/components/lib/themes/aura/listbox/index.js
index a3d2512f8..f3241d947 100644
--- a/components/lib/themes/aura/listbox/index.js
+++ b/components/lib/themes/aura/listbox/index.js
@@ -42,6 +42,9 @@ export default {
         fontWeight: '{list.option.group.font.weight}',
         padding: '{list.option.group.padding}'
     },
+    checkmark: {
+        color: '{list.option.color}'
+    },
     emptyMessage: {
         padding: '{list.option.padding}'
     }
diff --git a/components/lib/themes/lara/listbox/index.js b/components/lib/themes/lara/listbox/index.js
index a3d2512f8..f3241d947 100644
--- a/components/lib/themes/lara/listbox/index.js
+++ b/components/lib/themes/lara/listbox/index.js
@@ -42,6 +42,9 @@ export default {
         fontWeight: '{list.option.group.font.weight}',
         padding: '{list.option.group.padding}'
     },
+    checkmark: {
+        color: '{list.option.color}'
+    },
     emptyMessage: {
         padding: '{list.option.padding}'
     }
diff --git a/doc/listbox/CheckmarkDoc.vue b/doc/listbox/CheckmarkDoc.vue
new file mode 100644
index 000000000..073f31513
--- /dev/null
+++ b/doc/listbox/CheckmarkDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/listbox/index.vue b/pages/listbox/index.vue
index fa64c6151..4a344c3f2 100755
--- a/pages/listbox/index.vue
+++ b/pages/listbox/index.vue
@@ -5,6 +5,7 @@
 <script>
 import AccessibilityDoc from '@/doc/listbox/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/listbox/BasicDoc.vue';
+import CheckmarkDoc from '@/doc/listbox/CheckmarkDoc.vue';
 import DisabledDoc from '@/doc/listbox/DisabledDoc.vue';
 import FilterDoc from '@/doc/listbox/FilterDoc.vue';
 import GroupDoc from '@/doc/listbox/GroupDoc.vue';
@@ -30,6 +31,11 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'checkmark',
+                    label: 'Checkmark',
+                    component: CheckmarkDoc
+                },
                 {
                     id: 'multiple',
                     label: 'Multiple',