From b37dd8d4d61005c1e846e81a637444659f4ccc73 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 10 May 2024 14:33:27 +0300
Subject: [PATCH] Refactor #5681 - CascadeSelect

---
 .../lib/cascadeselect/CascadeSelect.d.ts      | 22 ++++++-------
 .../lib/cascadeselect/CascadeSelectSub.vue    | 20 ++++++------
 .../cascadeselect/style/CascadeSelectStyle.js | 32 +++++++++----------
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/components/lib/cascadeselect/CascadeSelect.d.ts b/components/lib/cascadeselect/CascadeSelect.d.ts
index bcb55c58b..577f7865c 100644
--- a/components/lib/cascadeselect/CascadeSelect.d.ts
+++ b/components/lib/cascadeselect/CascadeSelect.d.ts
@@ -113,21 +113,21 @@ export interface CascadeSelectPassThroughOptions {
      */
     list?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the item's DOM element.
+     * Used to pass attributes to the option's DOM element.
      */
-    item?: CascadeSelectPassThroughOptionType;
+    option?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the item content's DOM element.
+     * Used to pass attributes to the option content's DOM element.
      */
-    itemContent?: CascadeSelectPassThroughOptionType;
+    optionContent?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the item text's DOM element.
+     * Used to pass attributes to the option text's DOM element.
      */
-    itemText?: CascadeSelectPassThroughOptionType;
+    optionText?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the item list's DOM element.
+     * Used to pass attributes to the option list's DOM element.
      */
-    itemList?: CascadeSelectPassThroughOptionType;
+    optionList?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the group icon's DOM element.
      */
@@ -217,7 +217,7 @@ export interface CascadeSelectContext {
     /**
      * Current option.
      */
-    item: any;
+    option: any;
     /**
      * Index of the option.
      */
@@ -227,9 +227,9 @@ export interface CascadeSelectContext {
      */
     level: number;
     /**
-     * Current item group state of option as a boolean.
+     * Current option group state of option as a boolean.
      */
-    itemGroup: boolean;
+    optionGroup: boolean;
     /**
      * Current active state of option as a boolean.
      * @defaultValue false
diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
index 63368f1b6..b48679ad9 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.vue
+++ b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -1,9 +1,9 @@
 <template>
-    <ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('itemList')">
+    <ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('optionList')">
         <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
             <li
                 :id="getOptionId(processedOption)"
-                :class="cx('item', { processedOption })"
+                :class="cx('option', { processedOption })"
                 role="treeitem"
                 :aria-label="getOptionLabelToRender(processedOption)"
                 :aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
@@ -11,15 +11,15 @@
                 :aria-level="level + 1"
                 :aria-setsize="options.length"
                 :aria-posinset="index + 1"
-                v-bind="getPTOptions(processedOption, index, 'item')"
-                :data-p-item-group="isOptionGroup(processedOption)"
+                v-bind="getPTOptions(processedOption, index, 'option')"
+                :data-p-option-group="isOptionGroup(processedOption)"
                 :data-p-highlight="isOptionActive(processedOption)"
                 :data-p-focus="isOptionFocused(processedOption)"
                 :data-p-disabled="isOptionDisabled(processedOption)"
             >
-                <div v-ripple :class="cx('itemContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'itemContent')">
+                <div v-ripple :class="cx('optionContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'optionContent')">
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
-                    <span v-else :class="cx('itemText')" v-bind="getPTOptions(processedOption, index, 'itemText')">{{ getOptionLabelToRender(processedOption) }}</span>
+                    <span v-else :class="cx('optionText')" v-bind="getPTOptions(processedOption, index, 'optionText')">{{ getOptionLabelToRender(processedOption) }}</span>
                     <template v-if="isOptionGroup(processedOption)">
                         <component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" aria-hidden="true" />
                         <span v-else-if="optionGroupIcon" :class="[cx('groupIcon'), optionGroupIcon]" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
@@ -29,7 +29,7 @@
                 <CascadeSelectSub
                     v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
                     role="group"
-                    :class="cx('itemList')"
+                    :class="cx('optionList')"
                     :selectId="selectId"
                     :focusedOptionId="focusedOptionId"
                     :options="getOptionGroupChildren(processedOption)"
@@ -96,7 +96,7 @@ export default {
         }
     },
     mounted() {
-        // entering order correction when an item is selected
+        // entering order correction when an option is selected
         (this.isParentMount || this.level === 0) && DomHandler.nestedPosition(this.container, this.level);
         this.mounted = true;
     },
@@ -113,10 +113,10 @@ export default {
         getPTOptions(processedOption, index, key) {
             return this.ptm(key, {
                 context: {
-                    item: processedOption,
+                    option: processedOption,
                     index,
                     level: this.level,
-                    itemGroup: this.isOptionGroup(processedOption),
+                    optionGroup: this.isOptionGroup(processedOption),
                     active: this.isOptionActive(processedOption),
                     focused: this.isOptionFocused(processedOption),
                     disabled: this.isOptionDisabled(processedOption)
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index f74c6b573..7929bc457 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -105,7 +105,7 @@ const theme = ({ dt }) => `
     min-width: 100%;
 }
 
-.p-cascadeselect-item-list {
+.p-cascadeselect-option-list {
     display: none;
     min-width: 100%;
     position: absolute;
@@ -123,7 +123,7 @@ const theme = ({ dt }) => `
     gap: ${dt('cascadeselect.list.gap')}
 }
 
-.p-cascadeselect-item {
+.p-cascadeselect-option {
     cursor: pointer;
     font-weight: normal;
     white-space: nowrap;
@@ -134,38 +134,38 @@ const theme = ({ dt }) => `
     border-radius: ${dt('cascadeselect.option.border.radius')};
 }
 
-.p-cascadeselect-item-active {
+.p-cascadeselect-option-active {
     overflow: visible;
     background: ${dt('cascadeselect.option.focus.background')};
     color: ${dt('cascadeselect.option.focus.color')};
 }
 
-.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus {
+.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus {
     background: ${dt('cascadeselect.option.focus.background')};
     color: ${dt('cascadeselect.option.focus.color')};
 }
 
-.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
+.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
     color: ${dt('cascadeselect.option.icon.focus.color')};
 }
 
-.p-cascadeselect-item-selected {
+.p-cascadeselect-option-selected {
     background: ${dt('cascadeselect.option.selected.background')};
     color: ${dt('cascadeselect.option.selected.color')};
 }
 
-.p-cascadeselect-item-selected.p-focus {
+.p-cascadeselect-option-selected.p-focus {
     background: ${dt('cascadeselect.option.selected.focus.background')};
     color: ${dt('cascadeselect.option.selected.focus.color')};
 }
 
-.p-cascadeselect-item-active > .p-cascadeselect-item-list {
+.p-cascadeselect-option-active > .p-cascadeselect-option-list {
     display: block;
     left: 100%;
     top: 0;
 }
 
-.p-cascadeselect-item-content {
+.p-cascadeselect-option-content {
     display: flex;
     align-items: center;
     overflow: hidden;
@@ -212,19 +212,19 @@ const classes = {
     overlay: 'p-cascadeselect-overlay p-component',
     listContainer: 'p-cascadeselect-list-container',
     list: 'p-cascadeselect-list',
-    item: ({ instance, processedOption }) => [
-        'p-cascadeselect-item',
+    option: ({ instance, processedOption }) => [
+        'p-cascadeselect-option',
         {
-            'p-cascadeselect-item-active': instance.isOptionActive(processedOption),
-            'p-cascadeselect-item-selected': instance.isOptionSelected(processedOption),
+            'p-cascadeselect-option-active': instance.isOptionActive(processedOption),
+            'p-cascadeselect-option-selected': instance.isOptionSelected(processedOption),
             'p-focus': instance.isOptionFocused(processedOption),
             'p-disabled': instance.isOptionDisabled(processedOption)
         }
     ],
-    itemContent: 'p-cascadeselect-item-content',
-    itemText: 'p-cascadeselect-item-text',
+    optionContent: 'p-cascadeselect-option-content',
+    optionText: 'p-cascadeselect-option-text',
     groupIcon: 'p-cascadeselect-group-icon',
-    itemList: 'p-cascadeselect-overlay p-cascadeselect-item-list'
+    optionList: 'p-cascadeselect-overlay p-cascadeselect-option-list'
 };
 
 export default BaseStyle.extend({