UNPKG

vue-slider-component

Version:
80 lines 2.63 kB
import { __decorate } from "tslib"; import { Component, Prop, Vue } from 'vue-property-decorator'; import './styles/mark.scss'; let VueSlideMark = /** @class */ (() => { let VueSlideMark = class VueSlideMark extends Vue { get marksClasses() { return [ 'vue-slider-mark', { 'vue-slider-mark-active': this.mark.active, }, ]; } get stepClasses() { return [ 'vue-slider-mark-step', { 'vue-slider-mark-step-active': this.mark.active, }, ]; } get labelClasses() { return [ 'vue-slider-mark-label', { 'vue-slider-mark-label-active': this.mark.active, }, ]; } labelClickHandle(e) { e.stopPropagation(); this.$emit('pressLabel', this.mark.pos); } render() { const mark = this.mark; return (<div class={this.marksClasses}> {this.$slots.step || (<div class={this.stepClasses} style={[ this.stepStyle || {}, mark.style || {}, mark.active ? this.stepActiveStyle || {} : {}, mark.active ? mark.activeStyle || {} : {}, ]}/>)} {!this.hideLabel ? this.$slots.label || (<div class={this.labelClasses} style={[ this.labelStyle || {}, mark.labelStyle || {}, mark.active ? this.labelActiveStyle || {} : {}, mark.active ? mark.labelActiveStyle || {} : {}, ]} onClick={this.labelClickHandle}> {mark.label} </div>) : null} </div>); } }; __decorate([ Prop({ required: true }) ], VueSlideMark.prototype, "mark", void 0); __decorate([ Prop(Boolean) ], VueSlideMark.prototype, "hideLabel", void 0); __decorate([ Prop() ], VueSlideMark.prototype, "stepStyle", void 0); __decorate([ Prop() ], VueSlideMark.prototype, "stepActiveStyle", void 0); __decorate([ Prop() ], VueSlideMark.prototype, "labelStyle", void 0); __decorate([ Prop() ], VueSlideMark.prototype, "labelActiveStyle", void 0); VueSlideMark = __decorate([ Component({ name: 'VueSlideMark' }) ], VueSlideMark); return VueSlideMark; })(); export default VueSlideMark; //# sourceMappingURL=vue-slider-mark.jsx.map