vue-slider-component/es/vue-slider-dot.jsx

A highly customized slider component

import { __decorate } from "tslib";
import { Component, Prop, Vue } from 'vue-property-decorator';
import './styles/dot.scss';
let VueSliderDot = /** @class */ (() => {
    let VueSliderDot = class VueSliderDot extends Vue {
        get dotClasses() {
            return [
                'vue-slider-dot',
                {
                    'vue-slider-dot-hover': this.tooltip === 'hover' || this.tooltip === 'active',
                    'vue-slider-dot-disabled': this.disabled,
                    'vue-slider-dot-focus': this.focus,
                },
            ];
        }
        get handleClasses() {
            return [
                'vue-slider-dot-handle',
                {
                    'vue-slider-dot-handle-disabled': this.disabled,
                    'vue-slider-dot-handle-focus': this.focus,
                },
            ];
        }
        get tooltipClasses() {
            return [
                'vue-slider-dot-tooltip',
                [`vue-slider-dot-tooltip-${this.tooltipPlacement}`],
                {
                    'vue-slider-dot-tooltip-show': this.showTooltip,
                },
            ];
        }
        get tooltipInnerClasses() {
            return [
                'vue-slider-dot-tooltip-inner',
                [`vue-slider-dot-tooltip-inner-${this.tooltipPlacement}`],
                {
                    'vue-slider-dot-tooltip-inner-disabled': this.disabled,
                    'vue-slider-dot-tooltip-inner-focus': this.focus,
                },
            ];
        }
        get showTooltip() {
            switch (this.tooltip) {
                case 'always':
                    return true;
                case 'none':
                    return false;
                case 'focus':
                case 'active':
                    return !!this.focus;
                default:
                    return false;
            }
        }
        get tooltipValue() {
            if (this.tooltipFormatter) {
                return typeof this.tooltipFormatter === 'string'
                    ? this.tooltipFormatter.replace(/\{value\}/, String(this.value))
                    : this.tooltipFormatter(this.value);
            }
            else {
                return this.value;
            }
        }
        dragStart(e) {
            if (this.disabled) {
                return false;
            }
            this.$emit('drag-start');
        }
        render() {
            return (<div ref="dot" class={this.dotClasses} aria-valuetext={typeof this.tooltipValue === 'number' ? this.tooltipValue.toString() : this.tooltipValue} onMousedown={this.dragStart} onTouchstart={this.dragStart}>
        {this.$slots.dot || <div class={this.handleClasses} style={this.dotStyle}/>}
        {this.tooltip !== 'none' ? (<div class={this.tooltipClasses}>
            {this.$slots.tooltip || (<div class={this.tooltipInnerClasses} style={this.tooltipStyle}>
                <span class={'vue-slider-dot-tooltip-text'}>{this.tooltipValue}</span>
              </div>)}
          </div>) : null}
      </div>);
        }
    };
    __decorate([
        Prop({ default: 0 })
    ], VueSliderDot.prototype, "value", void 0);
    __decorate([
        Prop()
    ], VueSliderDot.prototype, "tooltip", void 0);
    __decorate([
        Prop()
    ], VueSliderDot.prototype, "dotStyle", void 0);
    __decorate([
        Prop()
    ], VueSliderDot.prototype, "tooltipStyle", void 0);
    __decorate([
        Prop({
            type: String,
            validator: (val) => ['top', 'right', 'bottom', 'left'].indexOf(val) > -1,
            required: true,
        })
    ], VueSliderDot.prototype, "tooltipPlacement", void 0);
    __decorate([
        Prop({ type: [String, Function] })
    ], VueSliderDot.prototype, "tooltipFormatter", void 0);
    __decorate([
        Prop({ type: Boolean, default: false })
    ], VueSliderDot.prototype, "focus", void 0);
    __decorate([
        Prop({ default: false })
    ], VueSliderDot.prototype, "disabled", void 0);
    VueSliderDot = __decorate([
        Component({ name: 'VueSliderDot' })
    ], VueSliderDot);
    return VueSliderDot;
})();
export default VueSliderDot;
//# sourceMappingURL=vue-slider-dot.jsx.map