Refactor #3965 - For Chart

components/lib/chart/BaseChart.vue

@@ -0,0 +1,48 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-chart {
+    position: relative;
+}
+`;
+
+const classes = {
+    root: 'p-chart'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_chart_style', manual: true });
+
+export default {
+    name: 'BaseChart',
+    extends: BaseComponent,
+    props: {
+        type: String,
+        data: null,
+        options: null,
+        plugins: null,
+        width: {
+            type: Number,
+            default: 300
+        },
+        height: {
+            type: Number,
+            default: 150
+        },
+        canvasProps: {
+            type: null,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/chart/Chart.d.ts

@@ -99,6 +99,11 @@ export interface ChartProps {
      * @type {ChartPassThroughOptions}
      */
     pt?: ChartPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 export interface ChartSlots {}

components/lib/chart/Chart.vue

@@ -1,34 +1,16 @@
 <template>
-    <div class="p-chart" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="chart">
         <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="{ ...canvasProps, ...ptm('canvas') }"></canvas>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseChart from './BaseChart.vue';
 
 export default {
     name: 'Chart',
-    extends: BaseComponent,
+    extends: BaseChart,
     emits: ['select', 'loaded'],
-    props: {
-        type: String,
-        data: null,
-        options: null,
-        plugins: null,
-        width: {
-            type: Number,
-            default: 300
-        },
-        height: {
-            type: Number,
-            default: 150
-        },
-        canvasProps: {
-            type: null,
-            default: null
-        }
-    },
     chart: null,
     watch: {
         /*
@@ -112,9 +94,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-chart {
-    position: relative;
-}
-</style>