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>