Refactor #3965 - For Fieldset

components/lib/fieldset/BaseFieldset.vue

@@ -0,0 +1,67 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-fieldset-legend > a,
+.p-fieldset-legend > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-fieldset-toggleable .p-fieldset-legend a {
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+    position: relative;
+    text-decoration: none;
+}
+
+.p-fieldset-legend-text {
+    line-height: 1;
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-fieldset p-component',
+        {
+            'p-fieldset-toggleable': props.toggleable
+        }
+    ],
+    legend: 'p-fieldset-legend',
+    legendtitle: 'p-fieldset-legend-text',
+    togglericon: 'p-fieldset-toggler',
+    legendtitle: 'p-fieldset-legend-text',
+    toggleablecontent: 'p-toggleable-content',
+    content: 'p-fieldset-content'
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
+
+export default {
+    name: 'BaseFieldset',
+    extends: BaseComponent,
+    props: {
+        legend: String,
+        toggleable: Boolean,
+        collapsed: Boolean,
+        toggleButtonProps: {
+            type: null,
+            default: null
+        }
+    },
+    style: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/fieldset/Fieldset.vue

@@ -1,8 +1,8 @@
 <template>
-    <fieldset :class="classes.root" v-bind="ptm('root')">
-        <legend :class="classes.legend" v-bind="ptm('legend')">
+    <fieldset :class="css('root')" data-pc-name="fieldset" v-bind="ptm('root')">
+        <legend :class="css('legend')" v-bind="ptm('legend')">
             <slot v-if="!toggleable" name="legend">
-                <span :id="ariaId + '_header'" :class="classes.legendtitle" v-bind="ptm('legendtitle')">{{ legend }}</span>
+                <span :id="ariaId + '_header'" :class="css('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
             </slot>
             <a
                 v-if="toggleable"
@@ -18,16 +18,16 @@
                 v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
             >
                 <slot name="togglericon" :collapsed="d_collapsed">
-                    <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="classes.togglericon" v-bind="ptm('togglericon')" />
+                    <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="css('togglericon')" v-bind="ptm('togglericon')" />
                 </slot>
                 <slot name="legend">
-                    <span :class="classes.legendtitle" v-bind="ptm('legendtitle')">{{ legend }}</span>
+                    <span :class="css('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
                 </slot>
             </a>
         </legend>
         <transition name="p-toggleable-content">
-            <div v-show="!d_collapsed" :id="ariaId + '_content'" :class="classes.toggleablecontent" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
-                <div :class="classes.content" v-bind="ptm('content')">
+            <div v-show="!d_collapsed" :id="ariaId + '_content'" :class="css('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
+                <div :class="css('content')" v-bind="ptm('content')">
                     <slot></slot>
                 </div>
             </div>
@@ -36,29 +36,16 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import MinusIcon from 'primevue/icons/minus';
 import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
-import { useStyle } from 'primevue/usestyle';
 import { UniqueComponentId } from 'primevue/utils';
-import { getComputedClasses, styles } from './FieldsetStyle';
-
-const styleInstance = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
+import BaseFieldset from './BaseFieldset';
 
 export default {
     name: 'Fieldset',
-    extends: BaseComponent,
+    extends: BaseFieldset,
     emits: ['update:collapsed', 'toggle'],
-    props: {
-        legend: String,
-        toggleable: Boolean,
-        collapsed: Boolean,
-        toggleButtonProps: {
-            type: null,
-            default: null
-        }
-    },
     data() {
         return {
             d_collapsed: this.collapsed
@@ -67,12 +54,6 @@ export default {
     watch: {
         collapsed(newValue) {
             this.d_collapsed = newValue;
-        },
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && styleInstance.load();
-            }
         }
     },
     methods: {
@@ -97,9 +78,6 @@ export default {
         },
         buttonAriaLabel() {
             return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.legend;
-        },
-        classes() {
-            return this.isUnstyled ? {} : getComputedClasses(this.$props, this.$data);
         }
     },
     directives: {

components/lib/fieldset/FieldsetStyle.js

@@ -1,30 +0,0 @@
-export const styles = `
-.p-fieldset-legend > a,
-.p-fieldset-legend > span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-fieldset-toggleable .p-fieldset-legend a {
-    cursor: pointer;
-    user-select: none;
-    overflow: hidden;
-    position: relative;
-    text-decoration: none;
-}
-
-.p-fieldset-legend-text {
-    line-height: 1;
-}
-`;
-
-export const getComputedClasses = (props, states) => ({
-    root: ['p-fieldset p-component', { 'p-fieldset-toggleable': props.toggleable }],
-    legend: 'p-fieldset-legend',
-    legendtitle: 'p-fieldset-legend-text',
-    togglericon: 'p-fieldset-toggler',
-    legendtitle: 'p-fieldset-legend-text',
-    toggleablecontent: 'p-toggleable-content',
-    content: 'p-fieldset-content'
-});