Fix #786 - Divider Component

primefaces · Dec 15, 2020 · 6048466 · 6048466
1 parent e0eb899
commit 6048466
Show file tree

Hide file tree

Showing 9 changed files with 608 additions and 1 deletion.
diff --git a/exports/divider.d.ts b/exports/divider.d.ts
@@ -0,0 +1 @@
+export * from './components/divider/Divider';
diff --git a/exports/divider.js b/exports/divider.js
@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/divider/Divider.vue');
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
@@ -169,6 +169,7 @@
                 <router-link to="/accordion">Accordion</router-link>
                 <router-link to="/card">Card</router-link>
                 <router-link to="/deferredcontent">Deferred</router-link>
+                <router-link to="/divider">Divider <Tag value="New"></Tag></router-link>
                 <router-link to="/fieldset">Fieldset</router-link>
                 <router-link to="/panel">Panel</router-link>
                 <router-link to="/scrollpanel">ScrollPanel</router-link>

diff --git a/src/components/divider/Divider.d.ts b/src/components/divider/Divider.d.ts
@@ -0,0 +1,9 @@
+import Vue from 'vue';
+
+declare class Divider extends Vue {
+    align?: string;
+    layout?: string;
+    type?: string;
+}
+
+export default Divider;
diff --git a/src/components/divider/Divider.vue b/src/components/divider/Divider.vue
@@ -0,0 +1,109 @@
+<template>
+    <div :class="containerClass" role="separator">
+        <div class="p-divider-content" v-if="$slots.default">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    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'}
+            ];
+        }
+    }
+}
+</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-horizontal:before {
+    border-left-style: dotted;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -28,6 +28,7 @@ import DataView from './components/dataview/DataView';
 import DataViewLayoutOptions from './components/dataviewlayoutoptions/DataViewLayoutOptions';
 import DeferredContent from './components/deferredcontent/DeferredContent';
 import Dialog from './components/dialog/Dialog';
+import Divider from './components/divider/Divider';
 import Dropdown from './components/dropdown/Dropdown';
 import Editor from './components/editor/Editor';
 import Fieldset from './components/fieldset/Fieldset';
@@ -132,6 +133,7 @@ Vue.component('DataView', DataView);
 Vue.component('DataViewLayoutOptions', DataViewLayoutOptions);
 Vue.component('DeferredContent', DeferredContent);
 Vue.component('Dialog', Dialog);
+Vue.component('Divider', Divider);
 Vue.component('Dropdown', Dropdown);
 Vue.component('Editor', Editor);
 Vue.component('Fieldset', Fieldset);

diff --git a/src/router.js b/src/router.js
@@ -310,7 +310,12 @@ export default new Router({
 			path: '/display',
 			name: 'display',
 			component: () => import('./views/display/DisplayDemo.vue')
-        },
+		},
+		{
+			path: '/divider',
+			name: 'divider',
+			component: () => import('./views/divider/DividerDemo.vue')
+		},
 		{
 			path: '/dropdown',
 			name: 'dropdown',

diff --git a/src/views/divider/DividerDemo.vue b/src/views/divider/DividerDemo.vue
@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Divider</h1>
+                <p>Divider is used to separate contents.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Basic</h5>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                <Divider />
+
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+
+                <Divider />
+
+                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+
+                <Divider />
+
+                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
+                            a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                            Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.</p>
+            </div>
+
+            <div class="card">
+                <h5>Text with Dashed Style</h5>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                <Divider align="left" type="dashed">
+                    <b>Left</b>
+                </Divider>
+
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+
+                <Divider align="center" type="dashed">
+                    <b>Center</b>
+                </Divider>
+
+                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+
+                <Divider align="right" type="dashed">
+                    <b>Right</b>
+                </Divider>
+
+                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
+                            a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                            Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.</p>
+            </div>
+
+            <div class="card">
+                <h5>Content</h5>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                <Divider align="left">
+                    <div class="p-d-inline-flex p-ai-center">
+                        <i class="pi pi-user p-mr-2"></i>
+                        <b>Icon</b>
+                    </div>
+                </Divider>
+
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+
+                <Divider align="center">
+                    <span class="p-tag">Badge</span>
+                </Divider>
+
+                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+
+                <Divider align="right">
+                    <Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
+                </Divider>
+
+                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
+                            a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                            Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.</p>
+            </div>
+
+            <div class="card">
+                <h5>Vertical</h5>
+                <div class="p-d-flex">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                    <Divider layout="vertical" />
+
+                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+
+                    <Divider layout="vertical" />
+
+                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Vertical with Content</h5>
+                <div class="p-grid">
+                    <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                        <div class="p-fluid">
+                            <div class="p-field">
+                                <label for="username">Username</label>
+                                <InputText id="username" type="text" />
+                            </div>
+                            <div class="p-field">
+                                <label for="password">Password</label>
+                                <InputText id="password" type="password" />
+                            </div>
+                            <Button label="Login"></Button>
+                         </div>
+                    </div>
+                    <div class="p-col-2">
+                        <Divider layout="vertical">
+                            <b>OR</b>
+                        </Divider>
+                    </div>
+                    <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                        <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <DividerDoc />
+    </div>
+</template>
+
+<script>
+import DividerDoc from './DividerDoc';
+export default {
+    components: {
+        'DividerDoc': DividerDoc
+    }
+}
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		'use strict';
		module.exports = require('./components/divider/Divider.vue');