Merge branch 'master' of https://github.com/primefaces/primevue
Cagatay Civici
commit
240d7f67a4
|
|
@ -50,7 +50,7 @@ interface PrimeVueLocaleOptions {
|
|||
emptyMessage?: string;
|
||||
}
|
||||
|
||||
export declare function usePrimeVue(): PrimeVueConfiguration;
|
||||
export declare function usePrimeVue(): { config: PrimeVueConfiguration };
|
||||
|
||||
declare const plugin: Plugin;
|
||||
export default plugin;
|
||||
|
|
@ -61,4 +61,4 @@ declare module 'vue/types/vue' {
|
|||
config: PrimeVueConfiguration;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="p-password-meter">
|
||||
<div :class="strengthClass" :style="{'width': meter ? meter.width : ''}"></div>
|
||||
</div>
|
||||
<div className="p-password-info">{{infoText}}</div>
|
||||
<div class="p-password-info">{{infoText}}</div>
|
||||
</slot>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
|
|
@ -164,7 +164,7 @@ export default {
|
|||
},
|
||||
onKeyUp(event) {
|
||||
if (this.feedback) {
|
||||
let value = event.target.value;
|
||||
const value = event.target.value;
|
||||
let label = null;
|
||||
let meter = null;
|
||||
|
||||
|
|
@ -330,7 +330,7 @@ export default {
|
|||
|
||||
.p-password-strength {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
width: 0;
|
||||
transition: width 1s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
import { VNode } from 'vue';
|
||||
|
||||
interface SpeedDialProps {
|
||||
model?: any[];
|
||||
visible?: boolean;
|
||||
direction?: string;
|
||||
transitionDelay?: number;
|
||||
type?: string;
|
||||
radius?: number;
|
||||
mask?: boolean;
|
||||
disabled?: boolean;
|
||||
hideOnClickOutside?: boolean;
|
||||
buttonClassName?: string;
|
||||
maskStyle?: string;
|
||||
maskClassName?: string;
|
||||
showIcon?: string;
|
||||
hideIcon?: string;
|
||||
rotateAnimation?: boolean;
|
||||
class?: string;
|
||||
style?: any;
|
||||
}
|
||||
|
||||
declare class SpeedDial {
|
||||
$props: SpeedDialProps;
|
||||
$emit(eventName: 'click', event: Event): this;
|
||||
$emit(eventName: 'show'): this;
|
||||
$emit(eventName: 'hide'): this;
|
||||
$slots: {
|
||||
item: VNode[];
|
||||
button: VNode[];
|
||||
};
|
||||
}
|
||||
|
||||
export default SpeedDial;
|
||||
|
|
@ -0,0 +1,378 @@
|
|||
<template>
|
||||
<div :ref="containerRef" :class="containerClass" :style="style">
|
||||
<slot name="button" :toggle="onClick">
|
||||
<SDButton type="button" :class="buttonClass" :icon="iconClassName" @click="onClick($event)" :disabled="disabled" />
|
||||
</slot>
|
||||
<ul :ref="listRef" class="p-speeddial-list" role="menu">
|
||||
<li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none">
|
||||
<template v-if="!$slots.item">
|
||||
<a :href="item.url || '#'" role="menuitem" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" :target="item.target"
|
||||
:data-pr-tooltip="item.label" @click="onItemClick($event, item)" v-ripple>
|
||||
<span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="$slots.item" :item="item"></component>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<template v-if="mask">
|
||||
<div :class="maskClass" :style="this.maskStyle"></div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from 'primevue/button';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import DomHandler from '../utils/DomHandler';
|
||||
|
||||
export default {
|
||||
name: 'SpeedDial',
|
||||
props: {
|
||||
model: null,
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'up'
|
||||
},
|
||||
transitionDelay: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'linear'
|
||||
},
|
||||
radius: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideOnClickOutside: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
buttonClassName: null,
|
||||
maskStyle: null,
|
||||
maskClassName: null,
|
||||
showIcon: {
|
||||
type: String,
|
||||
default: 'pi pi-plus'
|
||||
},
|
||||
hideIcon: null,
|
||||
rotateAnimation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
style: null,
|
||||
class: null
|
||||
},
|
||||
documentClickListener: null,
|
||||
container: null,
|
||||
list: null,
|
||||
data() {
|
||||
return {
|
||||
d_visible: this.visible,
|
||||
isItemClicked: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(newValue) {
|
||||
this.d_visible = newValue;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.type !== 'linear') {
|
||||
const button = DomHandler.findSingle(this.container, '.p-speeddial-button');
|
||||
const firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item');
|
||||
|
||||
if (button && firstItem) {
|
||||
const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
|
||||
const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
|
||||
this.list.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
|
||||
this.list.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.hideOnClickOutside) {
|
||||
this.bindDocumentClickListener();
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.bindDocumentClickListener();
|
||||
},
|
||||
methods: {
|
||||
onItemClick(e, item) {
|
||||
if (item.command) {
|
||||
item.command({ originalEvent: e, item });
|
||||
}
|
||||
|
||||
this.hide();
|
||||
|
||||
this.isItemClicked = true;
|
||||
e.preventDefault();
|
||||
},
|
||||
onClick(event) {
|
||||
this.d_visible ? this.hide() : this.show();
|
||||
|
||||
this.isItemClicked = true;
|
||||
|
||||
this.$emit('click', event);
|
||||
},
|
||||
show() {
|
||||
this.d_visible = true;
|
||||
this.$emit('show');
|
||||
},
|
||||
hide() {
|
||||
this.d_visible = false;
|
||||
this.$emit('hide');
|
||||
},
|
||||
calculateTransitionDelay(index) {
|
||||
const length = this.model.length;
|
||||
const visible = this.d_visible;
|
||||
|
||||
return (visible ? index : length - index - 1) * this.transitionDelay;
|
||||
},
|
||||
calculatePointStyle(index) {
|
||||
const type = this.type;
|
||||
|
||||
if (type !== 'linear') {
|
||||
const length = this.model.length;
|
||||
const radius = this.radius || (length * 20);
|
||||
|
||||
if (type === 'circle') {
|
||||
const step = 2 * Math.PI / length;
|
||||
|
||||
return {
|
||||
left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`,
|
||||
top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`,
|
||||
}
|
||||
}
|
||||
else if (type === 'semi-circle') {
|
||||
const direction = this.direction;
|
||||
const step = Math.PI / (length - 1);
|
||||
const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
|
||||
const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
|
||||
if (direction === 'up') {
|
||||
return { left: x, bottom: y };
|
||||
}
|
||||
else if (direction === 'down') {
|
||||
return { left: x, top: y };
|
||||
}
|
||||
else if (direction === 'left') {
|
||||
return { right: y, top: x };
|
||||
}
|
||||
else if (direction === 'right') {
|
||||
return { left: y, top: x };
|
||||
}
|
||||
}
|
||||
else if (type === 'quarter-circle') {
|
||||
const direction = this.direction;
|
||||
const step = Math.PI / (2 * (length - 1));
|
||||
const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
|
||||
const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
|
||||
if (direction === 'up-left') {
|
||||
return { right: x, bottom: y };
|
||||
}
|
||||
else if (direction === 'up-right') {
|
||||
return { left: x, bottom: y };
|
||||
}
|
||||
else if (direction === 'down-left') {
|
||||
return { right: y, top: x };
|
||||
}
|
||||
else if (direction === 'down-right') {
|
||||
return { left: y, top: x };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {};
|
||||
},
|
||||
getItemStyle(index) {
|
||||
const transitionDelay = this.calculateTransitionDelay(index);
|
||||
const pointStyle = this.calculatePointStyle(index);
|
||||
|
||||
return {
|
||||
transitionDelay: `${transitionDelay}ms`,
|
||||
...pointStyle
|
||||
};
|
||||
},
|
||||
bindDocumentClickListener() {
|
||||
if (!this.documentClickListener) {
|
||||
this.documentClickListener = (event) => {
|
||||
if (this.d_visible && this.isOutsideClicked(event)) {
|
||||
this.hide();
|
||||
}
|
||||
|
||||
this.isItemClicked = false;
|
||||
};
|
||||
document.addEventListener('click', this.documentClickListener);
|
||||
}
|
||||
},
|
||||
unbindDocumentClickListener() {
|
||||
if (this.documentClickListener) {
|
||||
document.removeEventListener('click', this.documentClickListener);
|
||||
this.documentClickListener = null;
|
||||
}
|
||||
},
|
||||
isOutsideClicked(event) {
|
||||
return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target) || this.isItemClicked);
|
||||
},
|
||||
containerRef(el) {
|
||||
this.container = el;
|
||||
},
|
||||
listRef(el) {
|
||||
this.list = el;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [`p-speeddial p-component p-speeddial-${this.type}`, {
|
||||
[`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
|
||||
'p-speeddial-opened': this.d_visible,
|
||||
'p-disabled': this.disabled
|
||||
}, this.class];
|
||||
},
|
||||
buttonClass() {
|
||||
return ['p-speeddial-button p-button-rounded', {
|
||||
'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon
|
||||
}, this.buttonClassName];
|
||||
},
|
||||
iconClassName() {
|
||||
return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
|
||||
},
|
||||
maskClass() {
|
||||
return ['p-speeddial-mask', {
|
||||
'p-speeddial-mask-visible': this.d_visible
|
||||
}, this.maskClassName];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'SDButton': Button
|
||||
},
|
||||
directives: {
|
||||
'ripple': Ripple
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-speeddial {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-speeddial-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: top 0s linear 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.p-speeddial-item {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.p-speeddial-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-speeddial-circle .p-speeddial-item,
|
||||
.p-speeddial-semi-circle .p-speeddial-item,
|
||||
.p-speeddial-quarter-circle .p-speeddial-item {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-speeddial-rotate {
|
||||
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.p-speeddial-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.p-speeddial-mask-visible {
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.p-speeddial-opened .p-speeddial-list {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.p-speeddial-opened .p-speeddial-item {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.p-speeddial-opened .p-speeddial-rotate {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* Direction */
|
||||
.p-speeddial-direction-up {
|
||||
align-items: center;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.p-speeddial-direction-up .p-speeddial-list {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.p-speeddial-direction-down {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-speeddial-direction-down .p-speeddial-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-speeddial-direction-left {
|
||||
justify-content: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-speeddial-direction-left .p-speeddial-list {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-speeddial-direction-right {
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-speeddial-direction-right .p-speeddial-list {
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"main": "./speeddial.cjs.js",
|
||||
"module": "./speeddial.esm.js",
|
||||
"unpkg": "./speeddial.min.js",
|
||||
"types": "./SpeedDial.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./SpeedDial.vue"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue