From 5ea506913fa12d8f9da2cd8a84e0767fa8b15ac6 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?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Apr 2023 15:42:13 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For TriStateCheckbox

---
 api-generator/components/tristatecheckbox.js   | 18 +++++++++++++++++-
 .../lib/tristatecheckbox/TriStateCheckbox.d.ts | 17 +++++++++++++++--
 .../lib/tristatecheckbox/TriStateCheckbox.vue  | 15 ++++++++++++++-
 3 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/api-generator/components/tristatecheckbox.js b/api-generator/components/tristatecheckbox.js
index fc059d7aa..ea0e6b0c5 100644
--- a/api-generator/components/tristatecheckbox.js
+++ b/api-generator/components/tristatecheckbox.js
@@ -43,10 +43,26 @@ const TriStateCheckboxProps = [
     }
 ];
 
+const TriStateCheckboxSlots = [
+    {
+        name: 'checkicon',
+        description: 'Custom check icon template.'
+    },
+    {
+        name: 'uncheckicon',
+        description: 'Custom uncheck icon template.'
+    },
+    {
+        name: 'nullableicon',
+        description: 'Custom nullable icon template.'
+    }
+];
+
 module.exports = {
     tristatecheckbox: {
         name: 'TriStateCheckbox',
         description: 'TriStateCheckbox is used to select either "true", "false" or "null" as the value.',
-        props: TriStateCheckboxProps
+        props: TriStateCheckboxProps,
+        slots: TriStateCheckboxSlots
     }
 };
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
index 4a2c1161f..538d8b046 100755
--- a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
@@ -7,7 +7,7 @@
  * @module tristatecheckbox
  *
  */
-import { InputHTMLAttributes } from 'vue';
+import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 
 /**
@@ -49,7 +49,20 @@ export interface TriStateCheckboxProps {
 /**
  * Defines valid slots in TriStateCheckbox component.
  */
-export interface TriStateCheckboxSlots {}
+export interface TriStateCheckboxSlots {
+    /**
+     * Custom check icon template.
+     */
+    checkicon(): VNode[];
+    /**
+     * Custom uncheck icon template.
+     */
+    uncheckicon(): VNode[];
+    /**
+     * Custom nullable icon template.
+     */
+    nullableicon(): VNode[];
+}
 
 /**
  * Defines valid emits in TriStateCheckbox component.
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.vue b/components/lib/tristatecheckbox/TriStateCheckbox.vue
index 2e82f32e4..1fdd6d0b6 100755
--- a/components/lib/tristatecheckbox/TriStateCheckbox.vue
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.vue
@@ -18,12 +18,21 @@
         </div>
         <span class="p-sr-only" aria-live="polite">{{ ariaValueLabel }}</span>
         <div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]">
-            <span :class="['p-checkbox-icon', icon]"></span>
+            <slot v-if="modelValue === true" name="checkicon">
+                <component :is="'CheckIcon'" class="p-checkbox-icon" />
+            </slot>
+            <slot v-else-if="modelValue === false" name="uncheckicon">
+                <component :is="'TimesIcon'" class="p-checkbox-icon" />
+            </slot>
+            <slot v-else name="nullableicon" />
         </div>
     </div>
 </template>
 
 <script>
+import CheckIcon from 'primevue/icon/check';
+import TimesIcon from 'primevue/icon/times';
+
 export default {
     name: 'TriStateCheckbox',
     emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
@@ -136,6 +145,10 @@ export default {
         ariaValueLabel() {
             return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel;
         }
+    },
+    components: {
+        CheckIcon: CheckIcon,
+        TimesIcon: TimesIcon
     }
 };
 </script>