73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import Vue from 'vue';
|
|
import { Component, Prop, Watch } from "vue-property-decorator";
|
|
import Popper, { Placement } from "popper.js";
|
|
import * as $ from 'jquery';
|
|
|
|
import popper = require("../../components/popper.html");
|
|
import lazy = require("../../components/lazy.html");
|
|
import collapse = require("../../components/fold.html");
|
|
|
|
@Component({ template: popper })
|
|
export class PopperComponent extends Vue {
|
|
@Prop(String)
|
|
public reference: string;
|
|
|
|
@Prop({ type: String, default: "auto" })
|
|
public placement: Placement;
|
|
|
|
@Prop(Boolean)
|
|
public arrow: boolean;
|
|
|
|
@Prop({ type: Boolean, default: false })
|
|
public visible: boolean;
|
|
|
|
private _popper;
|
|
|
|
mounted() {
|
|
const reference = this.$parent.$refs[this.reference] as HTMLElement;
|
|
|
|
this._popper = new Popper(reference, this.$el, {
|
|
placement: this.placement,
|
|
modifiers: {
|
|
arrow: { enabled: this.arrow, element: this.$refs['arrow'] as Element }
|
|
}
|
|
});
|
|
}
|
|
|
|
@Watch('visible')
|
|
private onVisibilityUpdate() {
|
|
this._popper.update();
|
|
}
|
|
}
|
|
|
|
@Component({ template: collapse })
|
|
export class FoldComponent extends Vue {
|
|
@Prop(Boolean)
|
|
public visible: boolean;
|
|
|
|
@Prop(Boolean)
|
|
public lazy: boolean;
|
|
|
|
@Watch('visible')
|
|
private onVisibilityChange(value) {
|
|
const action = () => $(this.$el).collapse(value ? 'show' : 'hide');
|
|
setTimeout(action);
|
|
}
|
|
}
|
|
|
|
@Component({ template: lazy })
|
|
export class LazyComponent extends Vue {
|
|
@Prop(Boolean)
|
|
public activate: boolean;
|
|
protected visible: boolean = false;
|
|
|
|
@Watch('activate')
|
|
private onVisibilityChange(value, old) {
|
|
this.visible = value || old;
|
|
}
|
|
}
|
|
|
|
Vue.component('Popper', PopperComponent);
|
|
Vue.component('Fold', FoldComponent);
|
|
Vue.component('Lazy', LazyComponent);
|