Refactor #3832 Refactor #3833 - For TriStateCheckbox

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
     }
 };

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.

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>