Refactor #3965 - For Divider

primefaces · May 22, 2023 · 71f57f5 · 71f57f5
1 parent e7007dc
commit 71f57f5
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 120 deletions.
diff --git a/components/lib/divider/BaseDivider.vue b/components/lib/divider/BaseDivider.vue
@@ -0,0 +1,138 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-divider-horizontal {
+    display: flex;
+    width: 100%;
+    position: relative;
+    align-items: center;
+}
+
+.p-divider-horizontal:before {
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    content: '';
+}
+
+.p-divider-horizontal.p-divider-left {
+    justify-content: flex-start;
+}
+
+.p-divider-horizontal.p-divider-right {
+    justify-content: flex-end;
+}
+
+.p-divider-horizontal.p-divider-center {
+    justify-content: center;
+}
+
+.p-divider-content {
+    z-index: 1;
+}
+
+.p-divider-vertical {
+    min-height: 100%;
+    margin: 0 1rem;
+    display: flex;
+    position: relative;
+    justify-content: center;
+}
+
+.p-divider-vertical:before {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    content: '';
+}
+
+.p-divider-vertical.p-divider-top {
+    align-items: flex-start;
+}
+
+.p-divider-vertical.p-divider-center {
+    align-items: center;
+}
+
+.p-divider-vertical.p-divider-bottom {
+    align-items: flex-end;
+}
+
+.p-divider-solid.p-divider-horizontal:before {
+    border-top-style: solid;
+}
+
+.p-divider-solid.p-divider-vertical:before {
+    border-left-style: solid;
+}
+
+.p-divider-dashed.p-divider-horizontal:before {
+    border-top-style: dashed;
+}
+
+.p-divider-dashed.p-divider-vertical:before {
+    border-left-style: dashed;
+}
+
+.p-divider-dotted.p-divider-horizontal:before {
+    border-top-style: dotted;
+}
+
+.p-divider-dotted.p-divider-vertical:before {
+    border-left-style: dotted;
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-divider p-component',
+        'p-divider-' + props.layout,
+        'p-divider-' + props.type,
+        { 'p-divider-left': props.layout === 'horizontal' && (!props.align || props.align === 'left') },
+        { 'p-divider-center': props.layout === 'horizontal' && props.align === 'center' },
+        { 'p-divider-right': props.layout === 'horizontal' && props.align === 'right' },
+        { 'p-divider-top': props.layout === 'vertical' && props.align === 'top' },
+        { 'p-divider-center': props.layout === 'vertical' && (!props.align || props.align === 'center') },
+        { 'p-divider-bottom': props.layout === 'vertical' && props.align === 'bottom' }
+    ],
+    content: 'p-divider-content'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_divider_style', manual: true });
+
+export default {
+    name: 'BaseDivider',
+    extends: BaseComponent,
+    props: {
+        align: {
+            type: String,
+            default: null
+        },
+        layout: {
+            type: String,
+            default: 'horizontal'
+        },
+        type: {
+            type: String,
+            default: 'solid'
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>
diff --git a/components/lib/divider/Divider.d.ts b/components/lib/divider/Divider.d.ts
@@ -64,6 +64,11 @@ export interface DividerProps {
      * @type {DividerPassThroughOptions}
      */
     pt?: DividerPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/components/lib/divider/Divider.vue b/components/lib/divider/Divider.vue
@@ -1,132 +1,16 @@
 <template>
-    <div :class="containerClass" role="separator" :aria-orientation="layout" v-bind="ptm('root')">
-        <div v-if="$slots.default" class="p-divider-content" v-bind="ptm('content')">
+    <div :class="cx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')">
+        <div v-if="$slots.default" :class="cx('content')" v-bind="ptm('content')">
             <slot></slot>
         </div>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseDivider from './BaseDivider.vue';
 
 export default {
     name: 'Divider',
-    extends: BaseComponent,
-    props: {
-        align: {
-            type: String,
-            default: null
-        },
-        layout: {
-            type: String,
-            default: 'horizontal'
-        },
-        type: {
-            type: String,
-            default: 'solid'
-        }
-    },
-    computed: {
-        containerClass() {
-            return [
-                'p-divider p-component',
-                'p-divider-' + this.layout,
-                'p-divider-' + this.type,
-                { 'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left') },
-                { 'p-divider-center': this.layout === 'horizontal' && this.align === 'center' },
-                { 'p-divider-right': this.layout === 'horizontal' && this.align === 'right' },
-                { 'p-divider-top': this.layout === 'vertical' && this.align === 'top' },
-                { 'p-divider-center': this.layout === 'vertical' && (!this.align || this.align === 'center') },
-                { 'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom' }
-            ];
-        }
-    }
+    extends: BaseDivider
 };
 </script>
-
-<style>
-.p-divider-horizontal {
-    display: flex;
-    width: 100%;
-    position: relative;
-    align-items: center;
-}
-
-.p-divider-horizontal:before {
-    position: absolute;
-    display: block;
-    top: 50%;
-    left: 0;
-    width: 100%;
-    content: '';
-}
-
-.p-divider-horizontal.p-divider-left {
-    justify-content: flex-start;
-}
-
-.p-divider-horizontal.p-divider-right {
-    justify-content: flex-end;
-}
-
-.p-divider-horizontal.p-divider-center {
-    justify-content: center;
-}
-
-.p-divider-content {
-    z-index: 1;
-}
-
-.p-divider-vertical {
-    min-height: 100%;
-    margin: 0 1rem;
-    display: flex;
-    position: relative;
-    justify-content: center;
-}
-
-.p-divider-vertical:before {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 50%;
-    height: 100%;
-    content: '';
-}
-
-.p-divider-vertical.p-divider-top {
-    align-items: flex-start;
-}
-
-.p-divider-vertical.p-divider-center {
-    align-items: center;
-}
-
-.p-divider-vertical.p-divider-bottom {
-    align-items: flex-end;
-}
-
-.p-divider-solid.p-divider-horizontal:before {
-    border-top-style: solid;
-}
-
-.p-divider-solid.p-divider-vertical:before {
-    border-left-style: solid;
-}
-
-.p-divider-dashed.p-divider-horizontal:before {
-    border-top-style: dashed;
-}
-
-.p-divider-dashed.p-divider-vertical:before {
-    border-left-style: dashed;
-}
-
-.p-divider-dotted.p-divider-horizontal:before {
-    border-top-style: dotted;
-}
-
-.p-divider-dotted.p-divider-vertical:before {
-    border-left-style: dotted;
-}
-</style>