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

Fixed #753 - Implement Badge as a directive alternative

pull/800/head
Cagatay Civici 2020-12-10 12:27:33 +03:00
parent 80b1be89f5
commit 8b6442360a
12 changed files with 164 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
exports/badge.d.ts vendored
View File

@ -1 +1,2 @@
export * from './components/badge/Badge';
export * from './components/badge/Badge';
export * from './components/badge/BadgeDirective';

3
exports/badge.js
View File

@ -1,2 +1,3 @@
'use strict';
module.exports = require('./components/badge/Badge.vue');
module.exports.Badge = require('./components/badge/Badge.vue');
module.exports.BadgeDirective = require('./components/badge/BadgeDirective.js');

1
src/assets/styles/primevue.css
View File

@ -1,4 +1,5 @@
@import '../../components/common/Common.css';
@import '../../components/badge/Badge.css';
@import '../../components/button/Button.css';
@import '../../components/checkbox/Checkbox.css';
@import '../../components/colorpicker/ColorPicker.css';

33
src/components/badge/Badge.css Normal file
View File

@ -0,0 +1,33 @@
.p-badge {
display: inline-block;
border-radius: 10px;
text-align: center;
padding: 0 .5rem;
}
.p-overlay-badge {
position: relative;
display: inline-block;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%,-50%);
transform-origin: 100% 0;
margin: 0;
}
.p-badge-dot {
width: .5rem;
min-width: .5rem;
height: .5rem;
border-radius: 50%;
padding: 0;
}
.p-badge-no-gutter {
padding: 0;
border-radius: 50%;
}

25
src/components/badge/Badge.vue
View File

@ -22,6 +22,8 @@ export default {
},
badgeClass() {
return ['p-badge p-component', {
'p-badge-no-gutter': this.value && String(this.value).length === 1,
'p-badge-dot': !this.value,
'p-badge-lg': this.size === 'large',
'p-badge-xl': this.size === 'xlarge',
'p-badge-info': this.severity === 'info',
@ -32,25 +34,4 @@ export default {
}
}
}
</script>
<style>
.p-badge {
display: inline-block;
border-radius: 50%;
text-align: center;
}
.p-overlay-badge {
position: relative;
display: inline-block;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(1em, -1em);
margin: 0;
}
</style>
</script>

0
src/components/badge/BadgeDirective.d.ts vendored Normal file
View File

55
src/components/badge/BadgeDirective.js Normal file
View File

@ -0,0 +1,55 @@
import DomHandler from '../utils/DomHandler';
import UniqueComponentId from '../utils/UniqueComponentId';
const BadgeDirective = {
beforeMount(el, options) {
const id = UniqueComponentId() + '_badge';
el.$_pbadgeId = id;
let badge = document.createElement('span');
badge.id = id;
badge.className = 'p-badge p-component';
for (let modifier in options.modifiers) {
DomHandler.addClass(badge, 'p-badge-' + modifier);
}
if (options.value != null) {
badge.appendChild(document.createTextNode(options.value));
if (String(options.value).length === 1) {
DomHandler.addClass(badge, 'p-badge-no-gutter');
}
}
else {
DomHandler.addClass(badge, 'p-badge-dot');
}
DomHandler.addClass(el, 'p-overlay-badge');
el.appendChild(badge);
},
updated(el, options) {
DomHandler.addClass(el, 'p-overlay-badge');
if (options.oldValue !== options.value) {
let badge = document.getElementById(el.$_pbadgeId);
if (options.value && DomHandler.hasClass('p-badge-dot')) {
DomHandler.removeClass(badge, 'p-badge-dot');
if (String(options.value).length === 1)
DomHandler.addClass(badge, 'p-badge-no-gutter');
else
DomHandler.removeClass(badge, 'p-badge-no-gutter');
}
else if (!options.value && !DomHandler.hasClass('p-badge-dot')) {
DomHandler.addClass(badge, 'p-badge-dot');
}
badge.innerHTML = '';
badge.appendChild(document.createTextNode(options.value));
}
}
};
export default BadgeDirective;

8
src/components/button/Button.vue
View File

@ -3,7 +3,7 @@
<slot>
<span v-if="icon" :class="iconClass"></span>
<span class="p-button-label">{{label||'&nbsp;'}}</span>
<span class="p-badge" v-if="badge" :class="badgeClass">{{badge}}</span>
<span v-if="badge" :class="badgeStyleClass">{{badge}}</span>
</slot>
</button>
</template>
@ -51,6 +51,12 @@ export default {
'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
}
]
},
badgeStyleClass() {
return [
'p-badge p-component', this.badgeClass, {
'p-badge-no-gutter': this.badge && String(this.badge).length === 1
}]
}
},
directives: {

2
src/main.js
View File

@ -9,6 +9,7 @@ import AccordionTab from './components/accordiontab/AccordionTab';
import Avatar from './components/avatar/Avatar';
import AvatarGroup from './components/avatargroup/AvatarGroup';
import Badge from './components/badge/Badge';
import BadgeDirective from './components/badge/BadgeDirective';
import BlockUI from './components/blockui/BlockUI';
import Breadcrumb from './components/breadcrumb/Breadcrumb';
import Button from './components/button/Button';
@ -116,6 +117,7 @@ app.use(ToastService);
app.use(ConfirmationService);
app.use(router);
app.directive('badge', BadgeDirective);
app.directive('tooltip', Tooltip);
app.directive('ripple', Ripple);

23
src/views/badge/BadgeDemo.vue
View File

@ -16,10 +16,10 @@
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
<Badge value="3" severity="danger"></Badge>
<h5>Positioned Badge</h5>
<Badge value="2">
<i class="pi pi-bell" style="font-size: 2rem"></i>
</Badge>
<h5 class="p-mb-4">Positioned Badge</h5>
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Button Badge</h5>
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
@ -40,21 +40,8 @@
import BadgeDoc from './BadgeDoc';
export default {
data() {
return {
}
},
components: {
'BadgeDoc': BadgeDoc
}
}
</script>
<style lang="scss" scoped>
.badges {
.p-badge, .p-tag {
margin-right: .5rem;
}
}
</style>
</script>

66
src/views/badge/BadgeDoc.vue
View File

@ -5,11 +5,14 @@
<h5>Import</h5>
<pre v-code.script>
<code>
import Badge from 'primevue/badge';
import {Badge,BadgeDirective} from 'primevue/badge';
</code></pre>
<h5>Getting Started</h5>
<p>Badge can either be used as a standalone component or as a directive.</p>
<h6>Component</h6>
<p>Content of the badge is specified using the <i>value</i> property.</p>
<pre v-code>
<code>
@ -17,17 +20,26 @@ import Badge from 'primevue/badge';
</code></pre>
<h5>Positioning</h5>
<p>A badge can easily be positioned relative to another element by wrapping it.</p>
<pre v-code>
<h6>Directive</h6>
<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
<pre v-code.script>
<code>
&lt;Badge value="2"&gt;
&lt;i class="pi pi-bell" style="font-size: 2rem"&gt;&lt;/i&gt;
&lt;/Badge&gt;
import {BadgeDirective} from 'primevue/badge';
Vue.directive('badge', BadgeDirective);
</code></pre>
<p>Next step is attaching it to an element.</p>
<pre v-code>
<code>
&lt;i class="pi pi-bell" v-badge="2"&gt;&lt;/i&gt;
</code></pre>
<h5>Severities</h5>
<p>Different color options are available as severity levels.</p>
<p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property
to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
<ul>
<li>success</li>
@ -36,6 +48,13 @@ import Badge from 'primevue/badge';
<li>danger</li>
</ul>
<pre v-code>
<code>
&lt;Badge value="2" severity="success"&gt;&lt;/Badge&gt;
&lt;i class="pi pi-bell" v-badge.success="2"&gt;&lt;/i&gt;
</code></pre>
<h5>Button Badges</h5>
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
@ -48,7 +67,8 @@ import Badge from 'primevue/badge';
</code></pre>
<h5>Sizes</h5>
<p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size.</p>
<p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently
sizes only apply to component mode.</p>
<pre v-code>
<code>
&lt;Badge value="2"&gt;&lt;/Badge&gt;
@ -119,6 +139,26 @@ import Badge from 'primevue/badge';
<td>p-overlay-badge</td>
<td>Wrapper of a badge and its target.</td>
</tr>
<tr>
<td>p-badge-dot</td>
<td>Badge element with no value.</td>
</tr>
<tr>
<td>p-badge-success</td>
<td>Badge element with success severity.</td>
</tr>
<tr>
<td>p-badge-info</td>
<td>Badge element with info severity.</td>
</tr>
<tr>
<td>p-badge-warning</td>
<td>Badge element with warning severity.</td>
</tr>
<tr>
<td>p-badge-danger</td>
<td>Badge element with danger severity.</td>
</tr>
<tr>
<td>p-badge-lg</td>
<td>Large badge element</td>
@ -148,10 +188,10 @@ import Badge from 'primevue/badge';
&lt;Badge value="12" severity="warning" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="3" severity="danger"&gt;&lt;/Badge&gt;
&lt;h5&gt;Positioned Badge&lt;/h5&gt;
&lt;Badge value="2"&gt;
&lt;i class="pi pi-bell" style="font-size: 2rem"&gt;&lt;/i&gt;
&lt;/Badge&gt;
&lt;h5 class="p-mb-4"&gt;Positioned Badge&lt;/h5&gt;
&lt;i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"&gt;&lt;/i&gt;
&lt;i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"&gt;&lt;/i&gt;
&lt;i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger&gt;&lt;/i&gt;
&lt;h5&gt;Button Badge&lt;/h5&gt;
&lt;Button type="button" label="Emails" badge="8" class="p-mr-2" /&gt;

1
src/views/sidebar/SidebarDemo.vue
View File

@ -17,6 +17,7 @@
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
<h3>Left Sidebar</h3>
<Calendar id="basic" />
</Sidebar>
<Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">