bkui-vue 1.0.3-beta.9 → 2.0.1-beta.10

package/lib/sideslider/sideslider.less

@@ -1,149 +1,73 @@
 @import '../styles/themes/themes.less';
 
 .@{bk-prefix}-sideslider {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-/* fade-center */
-
-/* slide过渡动画 */
-.slide-enter-active,
-.slide-leave-active,
-.@{bk-prefix}-modal-body {
-  transform: translateX(0);
-  transition: transform .25s;
-}
-
-.slide-enter-active {
-  animation: slider-fade-in .25s;
-}
-
-.slide-leave-active {
-  animation: slider-fade-in .25s reverse;
-}
-
-.slide-enter-from,
-.slide-leave-to {
-  &.left {
-    transform: translateX(-100%);
-    transition: transform .25s;
+  &.is-position-right {
+    .@{bk-prefix}-modal-wrapper {
+      right: 0;
+    }
   }
 
-  &.right {
-    transform: translateX(100%);
-    transition: transform .25s;
-  }
-}
+  &.is-position-left {
+    .@{bk-prefix}-modal-wrapper {
+      left: 0;
+    }
 
-@keyframes slider-fade-in {
-  0% {
-    opacity: 0;
+    .@{bk-prefix}-sideslider-header {
+      flex-direction: row-reverse;
+    }
   }
 
-  100% {
-    opacity: 1;
+  .@{bk-prefix}-modal-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
   }
-}
-
-.@{bk-prefix}-modal-ctx {
-  &.@{bk-prefix}-sideslider-wrapper {
-    .@{bk-prefix}-modal-wrapper {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: auto;
-      transform: initial;
-
-      &.scroll-able {
-        .@{bk-prefix}-modal-content {
-          overflow: auto;
-          height: 100%;
-        }
-      }
-
-      .@{bk-prefix}-sideslider-header {
-        width: 100%;
-        height: 52px;
-        background: #fff;
-        border-bottom: 1px solid #dcdee5;
-
-        .@{bk-prefix}-sideslider-close {
-          position: absolute;
-          top: 0;
-          width: 30px;
-          height: 52px;
-          font-size: 24px;
-          line-height: 52px;
-          color: #fff;
-          text-align: center;
-          cursor: pointer;
-          background-color: @primary-color;
-
-          &.right {
-            left: 0;
-
-            &::before {
-              top: 50%;
-              left: 50%;
-              display: inline-block;
-              width: 8px;
-              height: 8px;
-              border-top: solid 2px #fff;
-              border-right: solid 2px #fff;
-              content: '';
-              transform: translate(-50%, -50%) rotate(45deg);
-            }
-          }
-
-          &.left {
-            right: 0;
-
-            &::before {
-              top: 50%;
-              left: 50%;
-              display: inline-block;
-              width: 8px;
-              height: 8px;
-              border-top: solid 2px #fff;
-              border-left: solid 2px #fff;
-              content: '';
-              transform: translate(50%, -50%) rotate(-45deg);
-            }
-          }
-
-
-        }
-
-        .@{bk-prefix}-sideslider-title {
-          display: flex;
-          height: 52px;
-          padding-left: 30px;
-          font-size: 16px;
-          color: #313238;
-          align-items: center;
-
-          &.right {
-            width: 100%;
-            padding: 0 0 0 30+16px;
-          }
-        }
-      }
 
+  .@{bk-prefix}-modal-footer {
+    &.is-fixed {
       .@{bk-prefix}-sideslider-footer {
-        display: flex;
-        width: 100%;
-        height: 54px;
-        background: #fff;
-        border-top: 1px solid transparent;
-        align-items: center;
+        margin: 0;
+        background: #fafbfd;
+        box-shadow: 0 -1px 0 0 #dcdee5;
         box-shadow: rgb(0 0 0 / 6%) 0 -2px 4px 0;
       }
     }
-
   }
 }
 
+.@{bk-prefix}-sideslider-header {
+  display: flex;
+  height: 52px;
+  background: #fff;
+  border-bottom: 1px solid #dcdee5;
+}
+
+.@{bk-prefix}-sideslider-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  font-size: 26px;
+  color: #fff;
+  cursor: pointer;
+  background-color: @primary-color;
+}
+
+.@{bk-prefix}-sideslider-title {
+  display: flex;
+  padding-left: 16px;
+  font-size: 16px;
+  color: #313238;
+  align-items: center;
+  flex: 1;
+}
+
+.@{bk-prefix}-sideslider-footer {
+  display: flex;
+  width: 100%;
+  height: 48px;
+  padding: 0 24px;
+  margin-top: 24px;
+  background: #fff;
+  align-items: center;
+}

package/lib/sideslider/sideslider.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,121 +124,59 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
-.bk-sideslider {
-  position: fixed;
-  top: 0;
+.bk-sideslider.is-position-right .bk-modal-wrapper {
   right: 0;
-  bottom: 0;
-  left: 0;
-}
-/* fade-center */
-/* slide过渡动画 */
-.slide-enter-active,
-.slide-leave-active,
-.bk-modal-body {
-  transform: translateX(0);
-  transition: transform 0.25s;
-}
-.slide-enter-active {
-  animation: slider-fade-in 0.25s;
-}
-.slide-leave-active {
-  animation: slider-fade-in 0.25s reverse;
 }
-.slide-enter-from.left,
-.slide-leave-to.left {
-  transform: translateX(-100%);
-  transition: transform 0.25s;
-}
-.slide-enter-from.right,
-.slide-leave-to.right {
-  transform: translateX(100%);
-  transition: transform 0.25s;
+.bk-sideslider.is-position-left .bk-modal-wrapper {
+  left: 0;
 }
-@keyframes slider-fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+.bk-sideslider.is-position-left .bk-sideslider-header {
+  flex-direction: row-reverse;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper {
-  position: absolute;
+.bk-sideslider .bk-modal-wrapper {
+  position: fixed;
   top: 0;
   bottom: 0;
-  left: auto;
-  transform: initial;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
-  overflow: auto;
-  height: 100%;
+.bk-sideslider .bk-modal-footer.is-fixed .bk-sideslider-footer {
+  margin: 0;
+  background: #fafbfd;
+  box-shadow: 0 -1px 0 0 #dcdee5;
+  box-shadow: rgba(0, 0, 0, 0.06) 0 -2px 4px 0;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
-  width: 100%;
+.bk-sideslider-header {
+  display: flex;
   height: 52px;
   background: #fff;
   border-bottom: 1px solid #dcdee5;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
-  position: absolute;
-  top: 0;
+.bk-sideslider-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 30px;
-  height: 52px;
-  font-size: 24px;
-  line-height: 52px;
+  font-size: 26px;
   color: #fff;
-  text-align: center;
   cursor: pointer;
   background-color: var(--primary-color);
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
-  left: 0;
-}
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
-  top: 50%;
-  left: 50%;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-top: solid 2px #fff;
-  border-right: solid 2px #fff;
-  content: '';
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
-  right: 0;
-}
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
-  top: 50%;
-  left: 50%;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-top: solid 2px #fff;
-  border-left: solid 2px #fff;
-  content: '';
-  transform: translate(50%, -50%) rotate(-45deg);
-}
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
+.bk-sideslider-title {
   display: flex;
-  height: 52px;
-  padding-left: 30px;
+  padding-left: 16px;
   font-size: 16px;
   color: #313238;
   align-items: center;
+  flex: 1;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
-  width: 100%;
-  padding: 0 0 0 46px;
-}
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
+.bk-sideslider-footer {
   display: flex;
   width: 100%;
-  height: 54px;
+  height: 48px;
+  padding: 0 24px;
+  margin-top: 24px;
   background: #fff;
-  border-top: 1px solid transparent;
   align-items: center;
-  box-shadow: rgba(0, 0, 0, 0.06) 0 -2px 4px 0;
 }

package/lib/slider/index.d.ts

@@ -98,6 +98,10 @@ declare const Slider: {
             type: FunctionConstructor;
             default: (value: number) => number;
         };
+        labelClick: {
+            type: (BooleanConstructor | FunctionConstructor)[];
+            default: boolean;
+        };
     }>> & {
         onChange?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -177,6 +181,10 @@ declare const Slider: {
             type: FunctionConstructor;
             default: (value: number) => number;
         };
+        labelClick: {
+            type: (BooleanConstructor | FunctionConstructor)[];
+            default: boolean;
+        };
     }>> & {
         onChange?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -199,6 +207,7 @@ declare const Slider: {
         formatterLabel: Function;
         formatterButtonLabel: Function;
         formatterTipLabel: Function;
+        labelClick: boolean | Function;
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -280,6 +289,10 @@ declare const Slider: {
             type: FunctionConstructor;
             default: (value: number) => number;
         };
+        labelClick: {
+            type: (BooleanConstructor | FunctionConstructor)[];
+            default: boolean;
+        };
     }>> & {
         onChange?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -304,6 +317,7 @@ declare const Slider: {
         formatterLabel: Function;
         formatterButtonLabel: Function;
         formatterTipLabel: Function;
+        labelClick: boolean | Function;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -382,6 +396,10 @@ declare const Slider: {
         type: FunctionConstructor;
         default: (value: number) => number;
     };
+    labelClick: {
+        type: (BooleanConstructor | FunctionConstructor)[];
+        default: boolean;
+    };
 }>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -406,5 +424,6 @@ declare const Slider: {
     formatterLabel: Function;
     formatterButtonLabel: Function;
     formatterTipLabel: Function;
+    labelClick: boolean | Function;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;
 export default Slider;

package/lib/slider/index.js

@@ -650,21 +650,21 @@ const popover_less_namespaceObject = popover_less_x({  });
       resolveClassName = _usePrefix.resolveClassName;
     var renderDom = function renderDom() {
       return (0,external_vue_namespaceObject.createVNode)("div", {
+        "ref": button,
+        "style": wrapperStyle.value,
         "class": ["".concat(resolveClassName('slider-button')), props.params.vertical ? 'vertical' : 'horizontal', {
           grabbing: dragging.value
         }],
-        "ref": button,
         "tabindex": "0",
-        "style": wrapperStyle.value,
         "onClick": function onClick(event) {
           return event.stopPropagation();
         },
         "onMousedown": onButtonDown
       }, [Boolean(tip.value.content) ? (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(popover_namespaceObject["default"], {
+        "boundary": document.body,
         "content": tip.value.content,
-        "theme": 'dark',
         "placement": tip.value.placement,
-        "boundary": document.body
+        "theme": 'dark'
       }, {
         "default": function _default() {
           return [(0,external_vue_namespaceObject.createVNode)("div", {
@@ -817,7 +817,11 @@ var off = function off(element, event, handler) {
       "default": function _default(value) {
         return value;
       }
-    } // 自定义tip格式
+    },
+    labelClick: {
+      type: [Boolean, Function],
+      "default": false
+    }
   },
   emits: ['update:modelValue', 'change'],
   setup: function setup(props, _ref) {
@@ -882,12 +886,10 @@ var off = function off(element, event, handler) {
         result.push(i * stepWidth);
       }
       if (props.range) {
-        // eslint-disable-next-line max-len
         return result.filter(function (step) {
           return step < 100 * (rangeMinValue.value - props.minValue) / (props.maxValue - props.minValue) || step > 100 * (rangeMaxValue.value - props.minValue) / (props.maxValue - props.minValue);
         });
       }
-      // eslint-disable-next-line max-len
       return result.filter(function (step) {
         return step > 100 * (firstValue.value - props.minValue) / (props.maxValue - props.minValue);
       });
@@ -1155,30 +1157,57 @@ var off = function off(element, event, handler) {
     };
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
+    var handleStepLabelClick = function handleStepLabelClick(e, step) {
+      var _ref3, _step$stepWidth;
+      var percent = (_ref3 = (_step$stepWidth = step.stepWidth) !== null && _step$stepWidth !== void 0 ? _step$stepWidth : step.percent) !== null && _ref3 !== void 0 ? _ref3 : step;
+      if (props.labelClick) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        e.preventDefault();
+        var fnResult;
+        if (typeof props.labelClick === 'function') {
+          var args = {
+            percent: percent,
+            step: step
+          };
+          fnResult = props.labelClick(e, args);
+          if (fnResult === false) {
+            return;
+          }
+        }
+        percent = typeof fnResult === 'number' ? fnResult : percent;
+        console.log('handleStepLabelClick', percent);
+        setPosition(percent);
+        return;
+      }
+    };
     var renderDom = function renderDom() {
       var _slots$start, _slots$end;
       return (0,external_vue_namespaceObject.createVNode)("div", {
         "class": ["".concat(resolveClassName('slider')), props.extCls]
       }, [(_slots$start = slots.start) === null || _slots$start === void 0 ? void 0 : _slots$start.call(slots), (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": "".concat(resolveClassName('slider-runway')),
         "ref": slider,
         "style": runwayStyle.value,
+        "class": "".concat(resolveClassName('slider-runway')),
         "onClick": setButtonPos
       }, [(0,external_vue_namespaceObject.createVNode)("div", {
+        "style": barStyle.value,
         "class": ["".concat(resolveClassName('slider-bar')), props.vertical ? 'vertical' : 'horizontal', {
           disable: props.disable
-        }],
-        "style": barStyle.value
+        }]
       }, null), props.showInterval ? intervals.value.map(function (interval, index) {
         if (index === 0 || index === intervals.value.length - 1) {
           return null;
         }
         return (0,external_vue_namespaceObject.createVNode)("div", {
           "key": index,
+          "style": getIntervalStyle(interval),
           "class": ["".concat(resolveClassName('slider-interval')), {
             vertical: props.vertical
           }],
-          "style": getIntervalStyle(interval)
+          "onClick": function onClick(e) {
+            return handleStepLabelClick(e, interval);
+          }
         }, null);
       }) : null, props.customContent ? customList.value.map(function (custom, index) {
         if (index === 0 || index === customList.value.length - 1) {
@@ -1186,61 +1215,70 @@ var off = function off(element, event, handler) {
         }
         return (0,external_vue_namespaceObject.createVNode)("div", {
           "key": index,
+          "style": getIntervalStyle(custom.percent),
           "class": ["".concat(resolveClassName('slider-interval')), {
             vertical: props.vertical
           }],
-          "style": getIntervalStyle(custom.percent)
+          "onClick": function onClick(e) {
+            return handleStepLabelClick(e, custom);
+          }
         }, null);
       }) : undefined, props.showBetweenLabel || props.showIntervalLabel || props.customContent ? (0,external_vue_namespaceObject.createVNode)("div", {
         "class": ["".concat(resolveClassName('slider-labels')), props.vertical ? 'vertical' : 'horizontal']
       }, [function () {
         if (props.showBetweenLabel) {
           return [(0,external_vue_namespaceObject.createVNode)("div", {
-            "class": "label-start",
             "style": [{
               opacity: betweenLabelStyle('start')
-            }]
+            }],
+            "class": "label-start"
           }, [props.formatterLabel(props.minValue)]), (0,external_vue_namespaceObject.createVNode)("div", {
-            "class": "label-end",
             "style": [{
               opacity: betweenLabelStyle('end')
-            }]
+            }],
+            "class": "label-end"
           }, [props.formatterLabel(props.maxValue)])];
         }
         if (props.showIntervalLabel) {
           return intervalLabels.value.map(function (intervalLabel, index) {
             return (0,external_vue_namespaceObject.createVNode)("div", {
-              "class": ["".concat(resolveClassName('slider-label')), props.vertical ? 'vertical' : 'horizontal'],
               "key": index,
-              "style": getIntervalStyle(intervalLabel.stepWidth)
+              "style": getIntervalStyle(intervalLabel.stepWidth),
+              "class": ["".concat(resolveClassName('slider-label')), props.vertical ? 'vertical' : 'horizontal'],
+              "onClick": function onClick(e) {
+                return handleStepLabelClick(e, intervalLabel);
+              }
             }, [intervalLabel.stepLabel]);
           });
         }
         if (props.customContent) {
           return customList.value.map(function (item, index) {
             return (0,external_vue_namespaceObject.createVNode)("div", {
-              "class": ["".concat(resolveClassName('slider-label')), props.vertical ? 'vertical' : 'horizontal'],
               "key": index,
-              "style": getIntervalStyle(item.percent)
+              "style": getIntervalStyle(item.percent),
+              "class": ["".concat(resolveClassName('slider-label')), props.vertical ? 'vertical' : 'horizontal'],
+              "onClick": function onClick(e) {
+                return handleStepLabelClick(e, item);
+              }
             }, [item.label]);
           });
         }
         return undefined;
       }()]) : undefined, (0,external_vue_namespaceObject.createVNode)(slider_button, {
+        "ref": firstbutton,
         "modelValue": firstValue.value,
         "onUpdate:modelValue": function onUpdateModelValue($event) {
           return firstValue.value = $event;
         },
-        "ref": firstbutton,
         "params": buttonParms.value,
         "onEmitChange": emitChange,
         "onResetSize": resetSize
       }, null), props.range ? (0,external_vue_namespaceObject.createVNode)(slider_button, {
+        "ref": secondbutton,
         "modelValue": secondValue.value,
         "onUpdate:modelValue": function onUpdateModelValue($event) {
           return secondValue.value = $event;
         },
-        "ref": secondbutton,
         "params": buttonParms.value,
         "onEmitChange": emitChange,
         "onResetSize": resetSize
@@ -1249,20 +1287,20 @@ var off = function off(element, event, handler) {
       }, [(0,external_vue_namespaceObject.createVNode)("div", {
         "class": "input-item"
       }, [(0,external_vue_namespaceObject.createVNode)(input_namespaceObject["default"], {
-        "type": "number",
-        "modelValue": firstInput.value,
         "max": props.maxValue,
         "min": props.minValue,
+        "modelValue": firstInput.value,
+        "type": "number",
         "onChange": firstInputChange
       }, null)]), showSecondInput.value && secondValue.value ? [(0,external_vue_namespaceObject.createVNode)("div", {
         "class": "input-center"
       }, [(0,external_vue_namespaceObject.createTextVNode)("\uFF5E")]), (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "input-item"
       }, [(0,external_vue_namespaceObject.createVNode)(input_namespaceObject["default"], {
-        "type": "number",
-        "modelValue": secondInput.value,
         "max": props.maxValue,
         "min": props.minValue,
+        "modelValue": secondInput.value,
+        "type": "number",
         "onChange": secondInputChange
       }, null)])] : undefined]) : undefined, (_slots$end = slots.end) === null || _slots$end === void 0 ? void 0 : _slots$end.call(slots)]);
     };

package/lib/slider/slider.css

@@ -76,6 +76,20 @@
   border-radius: 100%;
   transform: translateX(-50%);
 }
+.bk-slider .bk-slider-interval:hover {
+  cursor: pointer;
+}
+.bk-slider .bk-slider-interval:hover::after {
+  content: '';
+  position: absolute;
+  left: -5px;
+  top: -4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: solid 1px #3a84ff;
+}
 .bk-slider .bk-slider-interval.vertical {
   left: 2px;
 }