vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3965 - For Divider

pull/3997/head
Bahadır Sofuoğlu 2023-05-23 01:05:19 +03:00
parent e7007dc65a
commit 71f57f5918
3 changed files with 147 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
components/lib/divider/BaseDivider.vue Normal file
View File

@ -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>

5
components/lib/divider/Divider.d.ts vendored
View File

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

124
components/lib/divider/Divider.vue
View File

@ -1,132 +1,16 @@
<template> <template>
<div :class="containerClass" role="separator" :aria-orientation="layout" v-bind="ptm('root')"> <div :class="cx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')">
<div v-if="$slots.default" class="p-divider-content" v-bind="ptm('content')"> <div v-if="$slots.default" :class="cx('content')" v-bind="ptm('content')">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent'; import BaseDivider from './BaseDivider.vue';
export default { export default {
name: 'Divider', name: 'Divider',
extends: BaseComponent, extends: BaseDivider
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> </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>