bkui-vue 0.0.1-beta.38 → 0.0.1-beta.40

package/lib/slider/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+import Slider from './slider';
+export default Slider;

package/lib/slider/slider-button.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+import { PropType } from 'vue';
+interface Params {
+    vertical: boolean;
+    showTip: boolean;
+    disable: boolean;
+    maxValue: number;
+    minValue: number;
+    step: number;
+    precision: number;
+    showButtonLabel: boolean;
+    formatterButtonLabel: Function;
+    showIntervalLabel: boolean;
+    customContent: {
+        [propName: string]: {
+            label?: string;
+            tip?: string;
+        };
+    };
+    sliderSize: number;
+    formatterTipLabel: Function;
+}
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    params: {
+        type: PropType<Params>;
+        default: () => {};
+    };
+}, {
+    renderDom: () => JSX.Element;
+    setPosition: (position: number) => void;
+    tip: import("vue").ComputedRef<{
+        content: any;
+        placement: string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "emitChange" | "resetSize")[], "update:modelValue" | "emitChange" | "resetSize", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    params: {
+        type: PropType<Params>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onEmitChange?: (...args: any[]) => any;
+    onResetSize?: (...args: any[]) => any;
+}, {
+    modelValue: number;
+    params: Params;
+}>;
+export default _default;

package/lib/slider/slider.css

@@ -0,0 +1,149 @@
+.bk-slider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bk-slider .bk-slider-runway {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  vertical-align: middle;
+  cursor: pointer;
+  background: #dcdee5;
+  border-radius: 2px;
+  opacity: 1;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar {
+  position: absolute;
+  height: 4px;
+  background: #3a84ff;
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar.vertical {
+  width: 4px;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar.horizontal {
+  height: 4px;
+}
+.bk-slider .bk-slider-runway .disable {
+  background: #979ba5;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels {
+  position: relative;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels.vertical {
+  left: 18px;
+  display: flex;
+  width: 10px;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels.horizontal {
+  top: 10px;
+  display: flex;
+  width: 100%;
+  height: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label {
+  position: absolute;
+  display: flex;
+  width: 10px;
+  height: 10px;
+  text-align: center;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
+  left: 10px;
+  transform: translateY(50%);
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
+  top: 10px;
+  transform: translateX(-50%);
+}
+.bk-slider .bk-slider-interval {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: #fff;
+  border-radius: 100%;
+  transform: translateX(-50%);
+}
+.bk-slider .bk-slider-interval.vertical {
+  left: 2px;
+}
+.bk-slider-input {
+  display: flex;
+  margin: 0 0 0 28px;
+  flex-direction: row;
+  align-items: center;
+}
+.bk-slider-input .input-item {
+  width: 92px;
+}
+.bk-slider-input .input-center {
+  margin: 0 7px;
+}
+.bk-slider-button {
+  position: absolute;
+  z-index: 1001;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  line-height: normal;
+  text-align: center;
+  background-color: transparent;
+  user-select: none;
+  justify-content: center;
+  align-items: center;
+}
+.bk-slider-button:hover {
+  cursor: grab;
+}
+.bk-slider-button.grabbing {
+  cursor: grabbing;
+}
+.bk-slider-button.vertical {
+  left: -10px;
+  transform: translateY(50%);
+}
+.bk-slider-button.horizontal {
+  top: -10px;
+  transform: translateX(-50%);
+}
+.bk-slider-button .slider-button {
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 2px solid #3a84ff;
+  border-radius: 50%;
+  transition: 0.2s;
+  user-select: none;
+}
+.bk-slider-button .slider-button-disable {
+  border: 2px solid #979ba5;
+}
+.bk-slider-button .slider-button:hover {
+  box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);
+}
+.bk-slider-button .slider-button:focus {
+  box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);
+}
+.bk-slider-button .slider-button-label {
+  position: absolute;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+.bk-slider-button .slider-button-label.vertical {
+  left: 28px;
+}
+.bk-slider-button .slider-button-label.horizontal {
+  top: 20px;
+}

package/lib/slider/slider.d.ts

@@ -0,0 +1,201 @@
+/**
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+export declare const on: (element: Element | Window, event: string, handler: any) => void;
+export declare const off: (element: Element | Window, event: string, handler: any) => void;
+declare const _default: import("vue").DefineComponent<{
+    modelValue: import("vue-types").VueTypeDef<number | unknown[]>;
+    extCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    disable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxValue: {
+        type: NumberConstructor[];
+        default: number;
+    };
+    minValue: {
+        type: NumberConstructor[];
+        default: number;
+    };
+    step: {
+        type: NumberConstructor[];
+        default: number;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showInterval: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showIntervalLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showButtonLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showBetweenLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    customContent: {
+        type: ObjectConstructor;
+        default: any;
+    };
+    formatterLabel: {
+        type: FunctionConstructor;
+        default: (value: number) => number;
+    };
+    formatterButtonLabel: {
+        type: FunctionConstructor;
+        default: (value: number) => number;
+    };
+    formatterTipLabel: {
+        type: FunctionConstructor;
+        default: (value: number) => number;
+    };
+}, {
+    renderDom: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: import("vue-types").VueTypeDef<number | unknown[]>;
+    extCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    disable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxValue: {
+        type: NumberConstructor[];
+        default: number;
+    };
+    minValue: {
+        type: NumberConstructor[];
+        default: number;
+    };
+    step: {
+        type: NumberConstructor[];
+        default: number;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showInterval: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showIntervalLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showButtonLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showBetweenLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    customContent: {
+        type: ObjectConstructor;
+        default: any;
+    };
+    formatterLabel: {
+        type: FunctionConstructor;
+        default: (value: number) => number;
+    };
+    formatterButtonLabel: {
+        type: FunctionConstructor;
+        default: (value: number) => number;
+    };
+    formatterTipLabel: {
+        type: FunctionConstructor;
+        default: (value: number) => number;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    height: string;
+    step: number;
+    vertical: boolean;
+    extCls: string;
+    range: boolean;
+    disable: boolean;
+    showTip: boolean;
+    maxValue: number;
+    minValue: number;
+    showInterval: boolean;
+    showIntervalLabel: boolean;
+    showButtonLabel: boolean;
+    showBetweenLabel: boolean;
+    showInput: boolean;
+    customContent: Record<string, any>;
+    formatterLabel: Function;
+    formatterButtonLabel: Function;
+    formatterTipLabel: Function;
+}>;
+export default _default;

package/lib/slider/slider.js

@@ -0,0 +1 @@
+!function(e,a){if("object"==typeof exports&&"object"==typeof module)module.exports=a(require("vue"),require("@babel/runtime/regenerator"),require("../input"),require("../shared"),require("../popover"));else if("function"==typeof define&&define.amd)define(["vue","@babel/runtime/regenerator","../input","../shared","../popover"],a);else{var t="object"==typeof exports?a(require("vue"),require("@babel/runtime/regenerator"),require("../input"),require("../shared"),require("../popover")):a(e.vue,e["@babel/runtime/regenerator"],e["../input"],e["../shared"],e["../popover"]);for(var l in t)("object"==typeof exports?exports:e)[l]=t[l]}}(self,((e,a,t,l,u)=>(()=>{"use strict";var n={8133:e=>{e.exports=t},5537:e=>{e.exports=u},4212:e=>{e.exports=l},8395:e=>{e.exports=a},748:a=>{a.exports=e}},r={};function o(e){var a=r[e];if(void 0!==a)return a.exports;var t=r[e]={exports:{}};return n[e](t,t.exports,o),t.exports}o.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return o.d(a,{a}),a},o.d=(e,a)=>{for(var t in a)o.o(a,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{o.r(i),o.d(i,{default:()=>p});var e=o(748),a=o(8395),t=o.n(a);Object.create,Object.create;var l=o(8133),u=o.n(l),n=o(4212),r=o(5537),m=o.n(r);const c=(0,e.defineComponent)({name:"SliderButton",props:{modelValue:{type:Number,default:0},params:{type:Object,default:function(){return{}}}},emits:["emitChange","resetSize","update:modelValue"],setup:function(a,t){var l=t.emit,u=(this.$createElement,(0,e.ref)(!1)),n=(0,e.ref)(!1),r=(0,e.ref)(0),o=(0,e.ref)(0),i=(0,e.ref)(0),c=(0,e.ref)(null),d=(0,e.ref)(a.modelValue),p=(0,e.ref)(0),f=(0,e.ref)(0),V=(0,e.ref)(!1),b=(0,e.ref)(null),h=(0,e.computed)((function(){var e,t,l="";if(null===(e=a.params.customContent)||void 0===e?void 0:e[a.modelValue]){var u=a.params.customContent[a.modelValue];l=u.tip||u.label||""}var n=a.params.vertical?"right":"top";return(null===(t=a.params)||void 0===t?void 0:t.showTip)?{content:a.params.formatterTipLabel("".concat(l||(null==a?void 0:a.modelValue)||"0")),placement:n}:{content:"",placement:n}})),x=(0,e.computed)((function(){return"".concat((a.modelValue-a.params.minValue)/(a.params.maxValue-a.params.minValue)*100,"%")})),y=(0,e.computed)((function(){return a.params.vertical?{bottom:x.value}:{left:x.value}})),w=(0,e.computed)((function(){return a.params.formatterButtonLabel(a.modelValue)})),N=function(e){a.params.disable||(e.preventDefault(),g(e),v(window,"mousemove",L),v(window,"touchmove",L),v(window,"mouseup",C),v(window,"touchend",C))},g=function(e){u.value=!0,n.value=!0,a.params.vertical?r.value=e.clientY:o.value=e.clientX,i.value=parseFloat(x.value),c.value=i.value},L=function(e){if(u.value){n.value=!1,l("resetSize");var t=0;a.params.vertical?(p.value=e.clientY,t=(r.value-p.value)/a.params.sliderSize*100):(f.value=e.clientX,t=(f.value-o.value)/a.params.sliderSize*100),c.value=i.value+t,B(c.value)}},C=function e(){V.value=!1,u.value&&(setTimeout((function(){u.value=!1,n.value||(B(c.value),l("emitChange"))}),0),s(window,"mousemove",L),s(window,"touchmove",L),s(window,"mouseup",e),s(window,"touchend",e))},B=function(e){if(null!==e&&!isNaN(e)){e<0?c.value=0:e>100&&(c.value=100);var t=100/((a.params.maxValue-a.params.minValue)/a.params.step),n=Math.round(e/t)*t*(a.params.maxValue-a.params.minValue)*.01+a.params.minValue;n=parseFloat(n.toFixed(a.params.precision)),l("update:modelValue",n),u.value||a.modelValue===d.value||(d.value=a.modelValue)}};return{renderDom:function(){return(0,e.createVNode)("div",{class:["bk-slider-button",a.params.vertical?"vertical":"horizontal",{grabbing:u.value}],ref:b,tabindex:"0",style:y.value,onClick:function(e){return e.stopPropagation()},onMousedown:N},[Boolean(h.value.content)?(0,e.createVNode)(m(),{content:h.value.content,theme:"dark",placement:h.value.placement,boundary:document.body},{default:function(){return[(0,e.createVNode)("div",{class:["slider-button",{"slider-button-disable":a.params.disable}]},null)]}}):(0,e.createVNode)("div",{class:["slider-button",{"slider-button-disable":a.params.disable}]},null),a.params.showButtonLabel&&!a.params.showIntervalLabel?(0,e.createVNode)("div",{class:["slider-button-label",a.params.vertical?"vertical":"horizontal"]},[w.value]):void 0])},setPosition:B,tip:h}},render:function(){return this.renderDom()}});var v=function(e,a,t){e&&a&&t&&e.addEventListener(a,t,!1)},s=function(e,a,t){e&&a&&t&&e.removeEventListener(a,t,!1)};const d=(0,e.defineComponent)({name:"Slider",props:{modelValue:n.PropTypes.oneOfType([n.PropTypes.array,n.PropTypes.number]),extCls:{type:String,default:""},vertical:{type:Boolean,default:!1},height:{type:String,default:"200px"},disable:{type:Boolean,default:!1},showTip:{type:Boolean,default:!1},maxValue:{type:[Number],default:100},minValue:{type:[Number],default:0},step:{type:[Number],default:1},range:{type:Boolean,default:!1},showInterval:{type:Boolean,default:!1},showIntervalLabel:{type:Boolean,default:!1},showButtonLabel:{type:Boolean,default:!1},showBetweenLabel:{type:Boolean,default:!1},showInput:{type:Boolean,default:!1},customContent:{type:Object,default:null},formatterLabel:{type:Function,default:function(e){return e}},formatterButtonLabel:{type:Function,default:function(e){return e}},formatterTipLabel:{type:Function,default:function(e){return e}}},emits:["update:modelValue","change"],setup:function(a,l){var n=this,r=l.slots,o=l.emit,i=(this.$createElement,(0,e.ref)(1)),m=(0,e.ref)(null),s=(0,e.ref)(null),d=(0,e.ref)(null),p=(0,e.ref)(0),f=(0,e.ref)(0),V=(0,e.ref)(null),b=(0,e.ref)(null),h=(0,e.ref)(null),x=(0,e.ref)(null),y=(0,e.computed)((function(){var e=[a.minValue,a.maxValue,a.step].map((function(e){var a="".concat(e).split(".")[1];return a?a.length:0}));return Math.max.apply(null,e)})),w=(0,e.computed)((function(){return Math.min(m.value,s.value)})),N=(0,e.computed)((function(){return Math.max(m.value,s.value)})),g=(0,e.computed)((function(){return a.range?"".concat(100*(N.value-w.value)/(a.maxValue-a.minValue),"%"):"".concat(100*(m.value-a.minValue)/(a.maxValue-a.minValue),"%")})),L=(0,e.computed)((function(){return a.range?"".concat(100*(w.value-a.minValue)/(a.maxValue-a.minValue),"%"):"0%"})),C=(0,e.computed)((function(){return a.vertical?{height:g.value,bottom:L.value}:{width:g.value,left:L.value}})),B=(0,e.computed)((function(){if(!a.showInterval||a.minValue>a.maxValue)return[];if(0===a.step)return console.warn("WARNNING:step should not be 0"),[];for(var e=(a.maxValue-a.minValue)/a.step,t=100*a.step/(a.maxValue-a.minValue),l=[],u=1;u<e;u++)l.push(u*t);return a.range?l.filter((function(e){return e<100*(w.value-a.minValue)/(a.maxValue-a.minValue)||e>100*(N.value-a.minValue)/(a.maxValue-a.minValue)})):l.filter((function(e){return e>100*(m.value-a.minValue)/(a.maxValue-a.minValue)}))})),k=(0,e.computed)((function(){return a.vertical?{height:a.height,width:"4px"}:{}})),T=(0,e.computed)((function(){if(!a.showIntervalLabel)return[];if(0===a.step)return console.warn("WARNNING:step should not be 0"),[];for(var e=(a.maxValue-a.minValue)/a.step,t=100*a.step/(a.maxValue-a.minValue),l=[],u=0;u<=e;u++){var n={stepWidth:u*t,stepLabel:a.formatterLabel(u*a.step)};l.push(n)}return l})),S=(0,e.computed)((function(){return Array.isArray(a.modelValue)})),M=(0,e.computed)((function(){return a.customContent?Object.keys(a.customContent).sort((function(e,a){return Number(e)-Number(a)})).filter((function(e){return Number(e)>=a.minValue&&Number(e)<=a.maxValue})).map((function(e){var t=a.customContent[e].tip,l=a.customContent[e].label;return{tip:t||l||"",label:l||"",percent:(Number(e)-a.minValue)/(a.maxValue-a.minValue)*100}})):[]})),z=(0,e.computed)((function(){return{vertical:a.vertical,showTip:a.showTip,disable:a.disable,maxValue:a.maxValue,minValue:a.minValue,step:a.step,precision:y.value,showButtonLabel:a.showButtonLabel,formatterButtonLabel:a.formatterButtonLabel,showIntervalLabel:a.showIntervalLabel,customContent:a.customContent,sliderSize:i.value,formatterTipLabel:a.formatterTipLabel}}));(0,e.watch)((function(){return a.modelValue}),(function(){O()})),(0,e.watch)((function(){return m.value}),(function(e){a.range?o("update:modelValue",[w.value,N.value]):o("update:modelValue",e),p.value=e})),(0,e.watch)((function(){return s.value}),(function(e){o("update:modelValue",[w.value,N.value]),f.value=e})),(0,e.onMounted)((function(){a.range?(Array.isArray(a.modelValue)?(m.value=Math.max(a.minValue,Number(a.modelValue[0])),s.value=Math.min(a.maxValue,Number(a.modelValue[1]))):(m.value=a.minValue,s.value=a.maxValue),d.value=[m.value,s.value]):("number"!=typeof a.modelValue||isNaN(a.modelValue)?m.value=a.minValue:m.value=Math.min(a.maxValue,Math.max(a.minValue,a.modelValue)),d.value=m.value),I(),v(window,"resize",I())}));var I=function(){V.value&&(i.value=V.value["client".concat(a.vertical?"Height":"Width")])},j=function(e){var t,l;if(e.stopPropagation(),!a.disable){if(I(),a.vertical){var u=null===(t=V.value)||void 0===t?void 0:t.getBoundingClientRect().bottom;A((u-e.clientY)/i.value*100)}else{var n=null===(l=V.value)||void 0===l?void 0:l.getBoundingClientRect().left;A((e.clientX-n)/i.value*100)}q()}},P=function(){return a.range?![w.value,N.value].every((function(e,a){return e===d.value[a]})):a.modelValue!==d.value},O=function(){if(a.minValue>a.maxValue)console.error("min should not be greater than max.");else{var e=a.modelValue;a.range&&Array.isArray(e)?e[1]<a.minValue?o("update:modelValue",[a.minValue,a.minValue]):e[0]>a.maxValue?o("update:modelValue",[a.maxValue,a.maxValue]):e[0]<a.minValue?o("update:modelValue",[a.minValue,e[1]]):e[1]>a.maxValue?o("update:modelValue",[e[0],a.maxValue]):(m.value=Number(e[0]),s.value=Number(e[1]),P()&&(d.value=e.slice())):a.range||"number"!=typeof e||isNaN(e)||(e<a.minValue?o("update:modelValue",a.minValue):e>a.maxValue?o("update:modelValue",a.maxValue):(m.value=e,P()&&(d.value=e)))}},q=function(){return l=n,u=void 0,r=void 0,i=t().mark((function l(){return t().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,(0,e.nextTick)();case 2:o("change",a.range?[w.value,N.value]:a.modelValue);case 3:case"end":return t.stop()}}),l)})),new(r||(r=Promise))((function(e,a){function t(e){try{o(i.next(e))}catch(e){a(e)}}function n(e){try{o(i.throw(e))}catch(e){a(e)}}function o(a){var l;a.done?e(a.value):(l=a.value,l instanceof r?l:new r((function(e){e(l)}))).then(t,n)}o((i=i.apply(l,u||[])).next())}));var l,u,r,i},F=function(e){return a.vertical?{bottom:"".concat(e,"%")}:{left:"".concat(e,"%")}},A=function(e){if(a.range){var t=a.minValue+e*(a.maxValue-a.minValue)/100;Math.abs(w.value-t)<Math.abs(N.value-t)?x.value=m.value<s.value?b.value:h.value:x.value=m.value>s.value?b.value:h.value,x.value.setPosition(e)}else b.value.setPosition(e)},E=function(e){if(""!==e){var t=parseFloat(e);t<a.minValue?(p.value=a.minValue,m.value=a.minValue):t>a.maxValue?(p.value=a.maxValue,m.value=a.maxValue):m.value=t}},R=function(e){if(""!==e){var t=parseFloat(e);t<a.minValue?(f.value=a.minValue,s.value=a.minValue):t>a.maxValue?(f.value=a.maxValue,s.value=a.maxValue):s.value=t}},D=function(e){var t;return t="start"===e?a.vertical?a.maxValue:a.minValue:a.vertical?a.minValue:a.maxValue,a.showButtonLabel&&[m.value,s.value].includes(t)?"0":"1"};return{renderDom:function(){var t,l;return(0,e.createVNode)(e.Fragment,null,[(0,e.createVNode)("div",{class:["bk-slider",a.extCls]},[null===(t=r.start)||void 0===t?void 0:t.call(r),(0,e.createVNode)("div",{class:"bk-slider-runway",ref:V,style:k.value,onClick:j},[(0,e.createVNode)("div",{class:["bk-slider-bar",a.vertical?"vertical":"horizontal",{disable:a.disable}],style:C.value},null),a.showInterval?B.value.map((function(t,l){return(0,e.createVNode)("div",{key:l,class:["bk-slider-interval",{vertical:a.vertical}],style:F(t)},null)})):void 0,a.customContent?M.value.map((function(t,l){return(0,e.createVNode)("div",{key:l,class:["bk-slider-interval",{vertical:a.vertical}],style:F(t.percent)},null)})):void 0,a.showBetweenLabel||a.showIntervalLabel||a.customContent?(0,e.createVNode)("div",{class:["bk-slider-labels",a.vertical?"vertical":"horizontal"]},[a.showBetweenLabel?[(0,e.createVNode)("div",{class:"label-start",style:[{opacity:D("start")}]},[a.formatterLabel(a.minValue)]),(0,e.createVNode)("div",{class:"label-end",style:[{opacity:D("end")}]},[a.formatterLabel(a.maxValue)])]:a.showIntervalLabel?T.value.map((function(t,l){return(0,e.createVNode)("div",{class:["bk-slider-label",a.vertical?"vertical":"horizontal"],key:l,style:F(t.stepWidth)},[t.stepLabel])})):a.customContent?M.value.map((function(t,l){return(0,e.createVNode)("div",{class:["bk-slider-label",a.vertical?"vertical":"horizontal"],key:l,style:F(t.percent)},[t.label])})):void 0]):void 0,(0,e.createVNode)(c,{ref:b,params:z.value,onEmitChange:q,onResetSize:I,model:{value:m.value,callback:function(e){n.$set(m,"value",e)}}},null),a.range?(0,e.createVNode)(c,{ref:h,params:z.value,onEmitChange:q,onResetSize:I,model:{value:s.value,callback:function(e){n.$set(s,"value",e)}}},null):void 0]),a.showInput&&!a.vertical?(0,e.createVNode)("div",{class:"bk-slider-input"},[(0,e.createVNode)("div",{class:"input-item"},[(0,e.createVNode)(u(),{type:"number",modelValue:p.value,max:a.maxValue,min:a.minValue,onChange:E},null)]),S.value&&s.value?(0,e.createVNode)(e.Fragment,null,[(0,e.createVNode)("div",{class:"input-center"},[(0,e.createTextVNode)("～")]),(0,e.createVNode)("div",{class:"input-item"},[(0,e.createVNode)(u(),{type:"number",modelValue:f.value,max:a.maxValue,min:a.minValue,onChange:R},null)])]):void 0]):void 0,null===(l=r.end)||void 0===l?void 0:l.call(r)])])}}},render:function(){return this.renderDom()}});d.install=function(e){e.component(d.name,d)};const p=d})(),i})()));

package/lib/slider/slider.less

@@ -0,0 +1,179 @@
+@import '../styles/themes/themes.less';
+
+.@{bk-prefix}-slider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .bk-slider-runway {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    vertical-align: middle;
+    cursor: pointer;
+    background: @slider-default-bg;
+    border-radius: 2px;
+    opacity: 1;
+
+    .bk-slider-bar {
+      position: absolute;
+      height: 4px;
+      background: @primary-color;
+      border-bottom-left-radius: 3px;
+      border-top-left-radius: 3px;
+
+      &.vertical {
+        width: 4px;
+      }
+
+      &.horizontal {
+        height: 4px;
+      }
+    }
+
+    .disable {
+      background: @slider-disable-bar-bg;
+    }
+
+    .bk-slider-labels {
+      position: relative;
+
+      &.vertical {
+        left: 18px;
+        display: flex;
+        width: 10px;
+        height: 100%;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      &.horizontal {
+        top: 10px;
+        display: flex;
+        width: 100%;
+        height: 10px;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .bk-slider-label {
+        position: absolute;
+        display: flex;
+        width: 10px;
+        height: 10px;
+        text-align: center;
+        white-space: nowrap;
+        align-items: center;
+        justify-content: center;
+
+        &.vertical {
+          left: 10px;
+          transform: translateY(50%);
+        }
+
+        &.horizontal {
+          top: 10px;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+
+  .bk-slider-interval {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background-color: #fff;
+    border-radius: 100%;
+    transform: translateX(-50%);
+
+    &.vertical {
+      left: 2px;
+    }
+  }
+
+  &-input {
+    display: flex;
+    margin: 0 0 0 28px;
+    flex-direction: row;
+    align-items: center;
+
+    .input-item {
+      width: 92px;
+    }
+
+    .input-center {
+      margin: 0 7px;
+    }
+  }
+}
+
+.bk-slider-button {
+  position: absolute;
+  z-index: 1001;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  line-height: normal;
+  text-align: center;
+  background-color: transparent;
+  user-select: none;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    cursor: grab;
+  }
+
+  &.grabbing {
+    cursor: grabbing;
+  }
+
+  &.vertical {
+    left: -10px;
+    transform: translateY(50%);
+  }
+
+  &.horizontal {
+    top: -10px;
+    transform: translateX(-50%);
+  }
+
+  .slider-button {
+    width: 12px;
+    height: 12px;
+    background-color: #fff;
+    border: 2px solid @primary-color;
+    border-radius: 50%;
+    transition: .2s;
+    user-select: none;
+
+    &-disable {
+      border: 2px solid #979ba5;
+    }
+
+    &:hover {
+      box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, .30);
+    }
+
+    &:focus {
+      box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, .9);
+    }
+  }
+
+  .slider-button-label {
+    position: absolute;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+
+    &.vertical {
+      left: 28px;
+    }
+
+    &.horizontal {
+      top: 20px;
+    }
+  }
+}