Refactor #3965 - Update for unstyled prop

components/lib/autocomplete/AutoComplete.vue

@@ -100,6 +100,7 @@
             :disabled="disabled"
             aria-hidden="true"
             @click="onDropdownClick"
+            :unstyled="unstyled"
             :pt="ptm('dropdownButton')"
             data-pc-section="dropdownbutton"
         >

components/lib/datatable/BodyCell.vue

@@ -30,7 +30,7 @@
         />
         <component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
         <template v-else-if="columnProp('selectionMode')">
-            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :column="column" :pt="pt" />
+            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :column="column" :unstyled="unstyled" :pt="pt" />
             <DTCheckbox
                 v-else-if="columnProp('selectionMode') === 'multiple'"
                 :value="rowData"
@@ -39,6 +39,7 @@
                 :aria-selected="selected ? true : undefined"
                 @change="toggleRowWithCheckbox($event, rowIndex)"
                 :column="column"
+                :unstyled="unstyled"
                 :pt="pt"
             />
         </template>

components/lib/datatable/ColumnFilter.vue

@@ -67,6 +67,7 @@
                                 optionLabel="label"
                                 optionValue="value"
                                 @update:modelValue="onOperatorChange($event)"
+                                :unstyled="unstyled"
                                 :pt="getColumnPTOptions('filterOperatorDropdown')"
                                 data-pc-section="filteroperatordropdown"
                             ></CFDropdown>
@@ -82,6 +83,7 @@
                                     optionValue="value"
                                     :aria-label="filterConstraintAriaLabel"
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
+                                    :unstyled="unstyled"
                                     :pt="getColumnPTOptions('filterMatchModeDropdown')"
                                     data-pc-section="filtermatchmodedropdown"
                                 ></CFDropdown>
@@ -93,6 +95,7 @@
                                         :class="cx('filterRemoveButton')"
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
+                                        :unstyled="unstyled"
                                         :pt="getColumnPTOptions('filterRemoveButton')"
                                         data-pc-section="filterremovebutton"
                                     >
@@ -104,7 +107,16 @@
                             </div>
                         </div>
                         <div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPTOptions('filterAddRule')">
-                            <CFButton type="button" :label="addRuleButtonLabel" iconPos="left" :class="cx('filterAddRuleButton')" @click="addConstraint()" :pt="getColumnPTOptions('filterAddRuleButton')" data-pc-section="filteraddrulebutton">
+                            <CFButton
+                                type="button"
+                                :label="addRuleButtonLabel"
+                                iconPos="left"
+                                :class="cx('filterAddRuleButton')"
+                                @click="addConstraint()"
+                                :unstyled="unstyled"
+                                :pt="getColumnPTOptions('filterAddRuleButton')"
+                                data-pc-section="filteraddrulebutton"
+                            >
                                 <template #icon="iconProps">
                                     <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterAddRuleButton')['icon']" />
                                 </template>
@@ -117,6 +129,7 @@
                                 :class="cx('filterClearButton')"
                                 :label="clearButtonLabel"
                                 @click="clearFilter"
+                                :unstyled="unstyled"
                                 :pt="getColumnPTOptions('filterClearButton')"
                                 data-pc-section="filterclearbutton"
                             ></CFButton>
@@ -128,7 +141,8 @@
                                     :class="cx('filterApplyButton')"
                                     :label="applyButtonLabel"
                                     @click="applyFilter()"
-                                    v-bind="getColumnPTOptions('filterApplyButton')"
+                                    :unstyled="unstyled"
+                                    :pt="getColumnPTOptions('filterApplyButton')"
                                     data-pc-section="filterapplybutton"
                                 ></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />

components/lib/datatable/DataTable.vue

@@ -24,6 +24,7 @@
             :class="cx('paginator')"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :unstyled="unstyled"
             :pt="ptm('paginator')"
             data-pc-section="paginator"
         >
@@ -232,6 +233,7 @@
             :class="cx('paginator')"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :unstyled="unstyled"
             :pt="ptm('paginator')"
             data-pc-section="paginator"
         >

components/lib/fileupload/FileContent.vue

@@ -4,10 +4,10 @@
         <div :class="cx('details')" v-bind="ptm('details')">
             <div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
             <span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
-            <FileUploadBadge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :pt="ptm('badge')" />
+            <FileUploadBadge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('badge')" />
         </div>
         <div :class="cx('actions')" v-bind="ptm('actions')">
-            <FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" :class="cx('removeButton')" :pt="ptm('removeButton')">
+            <FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" :class="cx('removeButton')" :unstyled="unstyled" :pt="ptm('removeButton')">
                 <template #icon="iconProps">
                     <component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
                     <TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('removeButton')['icon']" />

components/lib/fileupload/FileUpload.vue

@@ -9,14 +9,14 @@
                     </slot>
                     <span :class="cx('chooseButtonLabel')" v-bind="ptm('chooseButtonLabel')">{{ chooseButtonLabel }}</span>
                 </span>
-                <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :pt="ptm('uploadButton')">
+                <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')">
                     <template #icon="iconProps">
                         <slot name="uploadicon">
                             <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" />
                         </slot>
                     </template>
                 </FileUploadButton>
-                <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :pt="ptm('cancelButton')">
+                <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')">
                     <template #icon="iconProps">
                         <slot name="cancelicon">
                             <component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" />
@@ -27,8 +27,8 @@
         </div>
         <div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false">
             <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
-                <FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" :pt="ptm('progressbar')" />
+                <FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
-                <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :pt="ptm('message')">{{ msg }}</FileUploadMessage>
+                <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</FileUploadMessage>
                 <FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :pt="pt" />
                 <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :pt="pt" />
             </slot>
@@ -38,7 +38,7 @@
         </div>
     </div>
     <div v-else-if="isBasic" :class="cx('root')" v-bind="ptm('root')" data-pc-name="fileupload">
-        <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :pt="ptm('messages')">{{ msg }}</FileUploadMessage>
+        <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</FileUploadMessage>
         <span v-ripple :class="chooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('chooseButton')">
             <slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')">
                 <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[cx('uploadIcon'), uploadIcon]" aria-hidden="true" v-bind="ptm('uploadIcon')" />

components/lib/inplace/Inplace.vue

@@ -5,7 +5,7 @@
         </div>
         <div v-else :class="cx('content')" v-bind="ptm('content')">
             <slot name="content"></slot>
-            <IPButton v-if="closable" :aria-label="closeAriaLabel" @click="close" :pt="ptm('closeButton')" v-bind="closeButtonProps">
+            <IPButton v-if="closable" :aria-label="closeAriaLabel" @click="close" :unstyled="unstyled" :pt="ptm('closeButton')" v-bind="closeButtonProps">
                 <template #icon>
                     <slot name="closeicon">
                         <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="closeIcon" v-bind="ptm('closeButton')['icon']"></component>

components/lib/paginator/JumpToPageDropdown.vue

@@ -7,6 +7,7 @@
         @update:modelValue="onChange($event)"
         :class="cx('JTPDropdown')"
         :disabled="disabled"
+        :unstyled="unstyled"
         :pt="ptm('JTPDropdown')"
         data-pc-section="jtpdropdown"
     ></JTPDropdown>

components/lib/paginator/JumpToPageInput.vue

@@ -1,5 +1,5 @@
 <template>
-    <JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('JTPInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :pt="ptm('JTPInput')" data-pc-section="jtpinput"></JTPInput>
+    <JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('JTPInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :unstyled="unstyled" :pt="ptm('JTPInput')" data-pc-section="jtpinput"></JTPInput>
 </template>
 
 <script>

components/lib/paginator/RowsPerPageDropdown.vue

@@ -7,6 +7,7 @@
         @update:modelValue="onChange($event)"
         :class="cx('RPPDropdown')"
         :disabled="disabled"
+        :unstyled="unstyled"
         :pt="ptm('RPPDropdown')"
         data-pc-section="rppdropdown"
     ></RPPDropdown>

components/lib/splitbutton/SplitButton.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="splitbutton" :data-pc-severity="severity">
         <slot>
-            <PVSButton type="button" :class="cx('button')" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :pt="ptm('button')" v-bind="buttonProps">
+            <PVSButton type="button" :class="cx('button')" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :unstyled="unstyled" :pt="ptm('button')" v-bind="buttonProps">
                 <template #icon="slotProps">
                     <slot name="icon">
                         <span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" />
@@ -19,6 +19,7 @@
             :aria-controls="ariaId + '_overlay'"
             @click="onDropdownButtonClick"
             @keydown="onDropdownKeydown"
+            :unstyled="unstyled"
             :pt="ptm('menuButton')"
             v-bind="menuButtonProps"
         >
@@ -28,7 +29,7 @@
                 </slot>
             </template>
         </PVSButton>
-        <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :pt="ptm('menu')" />
+        <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('menu')" />
     </div>
 </template>
 

components/lib/treeselect/TreeSelect.vue

@@ -62,6 +62,7 @@
                             @node-select="onNodeSelect"
                             @node-unselect="onNodeUnselect"
                             :level="0"
+                            :unstyled="unstyled"
                             :pt="ptm('tree')"
                             data-pc-section="tree"
                         >

components/lib/treetable/TreeTable.vue

@@ -22,6 +22,7 @@
             :class="cx('paginator')"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :unstyled="unstyled"
             :pt="ptm('paginator')"
             data-pc-section="paginator"
         >
@@ -120,6 +121,7 @@
             :class="cx('paginator')"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :unstyled="unstyled"
             :pt="pt"
             data-pc-section="paginator"
         >

doc/autocomplete/DropdownDoc.vue

@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" unstyled />
     </div>
     <DocSectionCode :code="code" />
 </template>