@ibiz-template/vue3-components 0.7.26-alpha.1 → 0.7.26-alpha.2

package/lib/control/calendar/components/interface/calendar-week.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+require('../util/index.cjs');
+var util = require('../util/util.cjs');
+var lodashEs = require('lodash-es');
+
+"use strict";
+const calendarWeekProps = util.handleProps({
+  controller: {
+    type: Object
+  },
+  selectedDay: {
+    type: util.definePropType(Object)
+  },
+  events: {
+    type: Array,
+    default: []
+  },
+  legends: {
+    type: Array,
+    default: []
+  },
+  multiple: {
+    type: Boolean
+  },
+  selectedData: {
+    type: Object
+  }
+});
+const calendarWeekEmits = {
+  pick: (value) => lodashEs.isObject(value),
+  eventClick: (value) => value,
+  eventDblClick: (value) => value
+};
+
+exports.calendarWeekEmits = calendarWeekEmits;
+exports.calendarWeekProps = calendarWeekProps;

package/lib/control/calendar/components/interface/common.cjs

@@ -0,0 +1,3 @@
+'use strict';
+
+"use strict";

package/lib/control/calendar/components/interface/custom-calendar.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+require('../util/index.cjs');
+require('../constant/index.cjs');
+var lodashEs = require('lodash-es');
+var util = require('../util/util.cjs');
+var event = require('../constant/event.cjs');
+
+"use strict";
+const isValidRange = (range) => lodashEs.isArray(range) && range.length === 2 && range.every((item) => lodashEs.isDate(item));
+const customCalendarProps = util.handleProps({
+  controller: {
+    type: Object,
+    required: true
+  },
+  /**
+   * @description 绑定值
+   */
+  modelValue: {
+    type: Date
+  },
+  /**
+   * @description 时间范围，包括开始时间和结束时间。
+   *   开始时间必须是星期的开始日，结束时间必须是一周的结束日，时间跨度不能超过两个月。
+   */
+  range: {
+    type: util.definePropType(Array),
+    validator: isValidRange
+  },
+  /**
+   * @description 视图类型
+   */
+  viewType: {
+    type: String,
+    default: "DAY"
+  },
+  /**
+   * @description 事件集合
+   */
+  events: {
+    type: Array,
+    default: []
+  },
+  legends: {
+    type: Array,
+    default: []
+  },
+  /**
+   * @description 是否多选
+   */
+  multiple: {
+    type: Boolean
+  },
+  /**
+   * @description 选中事件数据集合
+   */
+  selectedData: {
+    type: Object
+  }
+});
+const customCalendarEmits = {
+  [event.UPDATE_MODEL_EVENT]: (value) => lodashEs.isDate(value),
+  [event.INPUT_EVENT]: (value) => lodashEs.isDate(value),
+  [event.CHANGE_EVENT]: (value) => lodashEs.isDate(value),
+  [event.EVENT_CLICK_EVENT]: (value) => value,
+  [event.EVENT_DBL_CLICK_EVENT]: (value) => value
+};
+
+exports.customCalendarEmits = customCalendarEmits;
+exports.customCalendarProps = customCalendarProps;

package/lib/control/calendar/components/interface/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+require('./common.cjs');
+var customCalendar = require('./custom-calendar.cjs');
+var calendarDaily = require('./calendar-daily.cjs');
+var calendarMonth = require('./calendar-month.cjs');
+var calendarWeek = require('./calendar-week.cjs');
+
+"use strict";
+
+exports.customCalendarEmits = customCalendar.customCalendarEmits;
+exports.customCalendarProps = customCalendar.customCalendarProps;
+exports.calendarDailyEmits = calendarDaily.calendarDailyEmits;
+exports.calendarDailyProps = calendarDaily.calendarDailyProps;
+exports.calendarMonthEmits = calendarMonth.calendarMonthEmits;
+exports.calendarMonthProps = calendarMonth.calendarMonthProps;
+exports.calendarWeekEmits = calendarWeek.calendarWeekEmits;
+exports.calendarWeekProps = calendarWeek.calendarWeekProps;

package/lib/control/calendar/components/util/index.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var util = require('./util.cjs');
+var lodashEs = require('lodash-es');
+
+"use strict";
+
+exports.closeIcon = util.closeIcon;
+exports.definePropType = util.definePropType;
+exports.epPropKey = util.epPropKey;
+exports.fade = util.fade;
+exports.getCurWeekDates = util.getCurWeekDates;
+exports.handleBkColor = util.handleBkColor;
+exports.handleEVentClick = util.handleEVentClick;
+exports.handlePopClose = util.handlePopClose;
+exports.handleProps = util.handleProps;
+exports.handleTimeRange = util.handleTimeRange;
+exports.isDateInCurWeek = util.isDateInCurWeek;
+exports.isTimeGreaterThan = util.isTimeGreaterThan;
+exports.isToday = util.isToday;
+exports.isValidRange = util.isValidRange;
+exports.rangeArr = util.rangeArr;
+Object.defineProperty(exports, "get", {
+	enumerable: true,
+	get: function () { return lodashEs.get; }
+});
+Object.defineProperty(exports, "isArray", {
+	enumerable: true,
+	get: function () { return lodashEs.isArray; }
+});
+Object.defineProperty(exports, "isDate", {
+	enumerable: true,
+	get: function () { return lodashEs.isDate; }
+});
+Object.defineProperty(exports, "isObject", {
+	enumerable: true,
+	get: function () { return lodashEs.isObject; }
+});
+Object.defineProperty(exports, "set", {
+	enumerable: true,
+	get: function () { return lodashEs.set; }
+});

package/lib/control/calendar/components/util/util.cjs

@@ -0,0 +1,316 @@
+'use strict';
+
+var vue = require('vue');
+var dayjs = require('dayjs');
+var ramda = require('ramda');
+var lodashEs = require('lodash-es');
+
+"use strict";
+let clickCount = 0;
+let timer;
+const epPropKey = "__epPropKey";
+const colors = [
+  "#2196F3",
+  "#4CAF50",
+  "#3F51B5",
+  "#FF9800",
+  "#673AB7",
+  "#757575"
+];
+const closeIcon = "<i class='el-icon' data-v-ea893728=''> <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' data-v-ea893728='' > <path d='M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z'></path> </svg></i>";
+const hexReg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+const rgbReg = /^(rgb|rgba|RGB|RGBA)/;
+function findLastParent(element) {
+  var _a;
+  if (!element) {
+    return null;
+  }
+  if (!(element == null ? void 0 : element.parentNode) || ((_a = element == null ? void 0 : element.classList) == null ? void 0 : _a.contains("el-popover"))) {
+    return element;
+  }
+  return findLastParent(element.parentNode);
+}
+const handlePopClose = (el) => {
+  const node = findLastParent(el.target);
+  if (node) {
+    node.style.display = "none";
+  }
+};
+const handleTimeRange = (startTime, endTime, format, partition = "-") => {
+  var _a, _b;
+  let timeRange = "";
+  if (startTime && ((_a = dayjs(startTime)) == null ? void 0 : _a.isValid())) {
+    timeRange = dayjs(startTime).format(format);
+  }
+  if (endTime && ((_b = dayjs(endTime)) == null ? void 0 : _b.isValid())) {
+    timeRange = "".concat(timeRange, " ").concat(partition, " ").concat(dayjs(endTime).format(format));
+  }
+  return timeRange;
+};
+const handleBkColor = (tempColors, type) => {
+  let tempColor = tempColors.get(type);
+  const length = tempColors.size;
+  if (type && !tempColor && length < colors.length) {
+    tempColor = colors[length];
+    tempColors.set(type, tempColor);
+  }
+  return tempColor || colors[0];
+};
+const validatorF = (color) => {
+  const isHex = hexReg.test(color);
+  const isRgb = rgbReg.test(color);
+  const tempColor = color;
+  if (isHex || isRgb)
+    return tempColor;
+  if (!color) {
+    console.error("Color: Invalid color!");
+    return "";
+  }
+  return tempColor;
+};
+const getRgbValueFromHex = (color) => {
+  const tempColor = color.replace("#", "");
+  const red = parseInt(tempColor.substring(0, 2), 16);
+  const green = parseInt(tempColor.substring(2, 4), 16);
+  const blue = parseInt(tempColor.substring(4, 6), 16);
+  return [red, green, blue];
+};
+const getRgbValueFromRgb = (color) => {
+  return color.replace(/rgb\(|rgba\(|\)/g, "").split(",").slice(0, 3).map(function(n) {
+    return parseInt(n, 10);
+  });
+};
+const getRgbValue = (color) => {
+  if (!color) {
+    console.error("getRgbValue: Missing parameters!");
+    return false;
+  }
+  const tempColor = validatorF(color);
+  if (!tempColor)
+    return false;
+  const isHex = hexReg.test(tempColor);
+  const isRgb = rgbReg.test(tempColor);
+  const lowerColor = tempColor.toLowerCase();
+  if (isHex)
+    return getRgbValueFromHex(lowerColor);
+  if (isRgb)
+    return getRgbValueFromRgb(lowerColor);
+};
+const getColorFromRgbValue = (value) => {
+  if (!value) {
+    console.error("getColorFromRgbValue: Missing parameters!");
+    return false;
+  }
+  const valueLength = value.length;
+  if (valueLength !== 3 && valueLength !== 4) {
+    console.error("getColorFromRgbValue: Value is illegal!");
+    return false;
+  }
+  let color = valueLength === 3 ? "rgb(" : "rgba(";
+  color += "".concat(value.join(","), ")");
+  return color;
+};
+const fade = (color, Percent) => {
+  const percent = Percent || 100;
+  if (!color) {
+    console.error("fade: Missing parameters!");
+    return false;
+  }
+  const rgbValue = getRgbValue(color);
+  if (!rgbValue)
+    return false;
+  const rgbaValue = [...rgbValue, percent / 100];
+  return getColorFromRgbValue(rgbaValue);
+};
+const isToday = (date, curDate) => {
+  const dateToCheck = new Date(date);
+  const currentDate = curDate ? new Date(curDate) : /* @__PURE__ */ new Date();
+  const state = dateToCheck.getDate() === currentDate.getDate() && dateToCheck.getMonth() === currentDate.getMonth() && dateToCheck.getFullYear() === currentDate.getFullYear();
+  return state;
+};
+function hasOwn(obj, key) {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+}
+const definePropType = (val) => val;
+const isEpProp = (val) => lodashEs.isObject(val) && !!val[epPropKey];
+const isValidRange = (range) => lodashEs.isArray(range) && range.length === 2 && range.every((item) => lodashEs.isDate(item));
+const isDateInCurWeek = (dateToCheck, firstDayOfWeek, lastDayOfWeek) => {
+  const tempDate = new Date(dateToCheck);
+  const tempFirstDay = new Date(firstDayOfWeek);
+  const tempLastDay = new Date(lastDayOfWeek);
+  tempDate.setHours(0, 0, 0, 0);
+  tempFirstDay.setHours(0, 0, 0, 0);
+  tempLastDay.setHours(0, 0, 0, 0);
+  return tempDate >= tempFirstDay && tempDate <= tempLastDay;
+};
+const isTimeGreaterThan = (timeA, timeB) => {
+  const date1 = new Date(timeA);
+  const date2 = new Date(timeB);
+  return date1.getTime() > date2.getTime();
+};
+const getCurWeekDates = (curDate) => {
+  const currentDate = new Date(curDate);
+  const currentDay = currentDate.getDay();
+  const firstDayOfWeek = new Date(currentDate);
+  firstDayOfWeek.setDate(currentDate.getDate() - currentDay);
+  const lastDayOfWeek = new Date(firstDayOfWeek);
+  lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
+  firstDayOfWeek.setHours(0, 0, 0, 0);
+  lastDayOfWeek.setHours(23, 59, 59, 0);
+  return {
+    firstDay: firstDayOfWeek,
+    lastDay: lastDayOfWeek
+  };
+};
+const handleEmit = (eventName, item, location, events, multiple, selectedData, emit) => {
+  let tempSelectedData = ramda.clone(selectedData);
+  let isSelectedEvent = true;
+  const targetEvent = events.find((event) => {
+    return item.id === event.id;
+  });
+  const index = tempSelectedData.findIndex(
+    (event) => item.id === event.id
+  );
+  if (multiple) {
+    if (index === -1) {
+      tempSelectedData.push(targetEvent);
+    } else {
+      Object.assign(item, { isSelectedEvent: false });
+      isSelectedEvent = false;
+      tempSelectedData.splice(index, 1);
+    }
+  } else if (index === -1) {
+    tempSelectedData = [targetEvent];
+  } else {
+    Object.assign(item, { isSelectedEvent: false });
+    isSelectedEvent = false;
+    tempSelectedData = [];
+  }
+  switch (eventName) {
+    case "eventClick":
+      emit("eventClick", { location, data: tempSelectedData });
+      break;
+    case "eventDblClick":
+      emit("eventDblClick", { location, data: tempSelectedData });
+      break;
+    default:
+      break;
+  }
+  return { eventName, tempSelectedData, isSelectedEvent };
+};
+const handleEVentClick = (item, location, events, multiple, selectedData, emit) => {
+  return new Promise((resolve) => {
+    clickCount += 1;
+    if (clickCount === 1) {
+      timer = setTimeout(() => {
+        if (clickCount === 1) {
+          resolve(
+            handleEmit(
+              "eventClick",
+              item,
+              location,
+              events,
+              multiple,
+              selectedData,
+              emit
+            )
+          );
+        }
+        clickCount = 0;
+      }, 300);
+    } else if (clickCount === 2) {
+      clearTimeout(timer);
+      resolve(
+        handleEmit(
+          "eventDblClick",
+          item,
+          location,
+          events,
+          multiple,
+          selectedData,
+          emit
+        )
+      );
+      clickCount = 0;
+    }
+  });
+};
+const handleProp = (prop, key) => {
+  if (!lodashEs.isObject(prop) || isEpProp(prop))
+    return prop;
+  const { values, required, default: defaultValue, type, validator } = prop;
+  const _validator = values || validator ? (val) => {
+    let valid = false;
+    let allowedValues = [];
+    if (values) {
+      allowedValues = Array.from(values);
+      if (hasOwn(prop, "default")) {
+        allowedValues.push(defaultValue);
+      }
+      valid || (valid = allowedValues.includes(val));
+    }
+    if (validator)
+      valid || (valid = validator(val));
+    if (!valid && allowedValues.length > 0) {
+      const allowValuesText = [...new Set(allowedValues)].map((value) => JSON.stringify(value)).join(", ");
+      vue.warn(
+        "Invalid prop: validation failed".concat(key ? ' for prop "'.concat(key, '"') : "", ". Expected one of [").concat(allowValuesText, "], got value ").concat(JSON.stringify(
+          val
+        ), ".")
+      );
+    }
+    return valid;
+  } : void 0;
+  const epProp = {
+    type,
+    required: !!required,
+    validator: _validator,
+    [epPropKey]: true
+  };
+  if (hasOwn(prop, "default"))
+    epProp.default = defaultValue;
+  return epProp;
+};
+const rangeArr = (n) => Array.from(Array.from({ length: n }).keys());
+const handleProps = (props) => lodashEs.fromPairs(
+  Object.entries(props).map(([key, option]) => [
+    key,
+    handleProp(option, key)
+  ])
+);
+
+Object.defineProperty(exports, "get", {
+  enumerable: true,
+  get: function () { return lodashEs.get; }
+});
+Object.defineProperty(exports, "isArray", {
+  enumerable: true,
+  get: function () { return lodashEs.isArray; }
+});
+Object.defineProperty(exports, "isDate", {
+  enumerable: true,
+  get: function () { return lodashEs.isDate; }
+});
+Object.defineProperty(exports, "isObject", {
+  enumerable: true,
+  get: function () { return lodashEs.isObject; }
+});
+Object.defineProperty(exports, "set", {
+  enumerable: true,
+  get: function () { return lodashEs.set; }
+});
+exports.closeIcon = closeIcon;
+exports.definePropType = definePropType;
+exports.epPropKey = epPropKey;
+exports.fade = fade;
+exports.getCurWeekDates = getCurWeekDates;
+exports.handleBkColor = handleBkColor;
+exports.handleEVentClick = handleEVentClick;
+exports.handlePopClose = handlePopClose;
+exports.handleProps = handleProps;
+exports.handleTimeRange = handleTimeRange;
+exports.isDateInCurWeek = isDateInCurWeek;
+exports.isTimeGreaterThan = isTimeGreaterThan;
+exports.isToday = isToday;
+exports.isValidRange = isValidRange;
+exports.rangeArr = rangeArr;

package/lib/control/calendar/index.cjs

@@ -6,11 +6,13 @@ var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
 var calendar = require('./calendar.cjs');
 var calendar_provider = require('./calendar.provider.cjs');
+var index = require('./components/custom-calendar/index.cjs');
 
 "use strict";
 const IBizCalendarControl = vue3Util.withInstall(
   calendar.CalendarControl,
   function(v) {
+    v.use(index.IBizCustomCalendar);
     v.component(calendar.CalendarControl.name, calendar.CalendarControl);
     runtime.registerControlProvider(runtime.ControlType.CALENDAR, () => new calendar_provider.CalendarProvider());
   }

package/lib/editor/data-picker/ibiz-picker-link/ibiz-picker-link.cjs

@@ -87,8 +87,8 @@ const IBizPickerLink = /* @__PURE__ */ vue.defineComponent({
     };
     const openLinkView = async () => {
       const res = await c.openLinkView(props.data);
-      if (res) {
-        handleOpenViewClose(res[0]);
+      if (res && res.ok && res.data && res.data.length) {
+        handleOpenViewClose(res.data[0]);
       }
     };
     const {

package/lib/editor/date-picker/date-picker-editor.controller.cjs

@@ -43,6 +43,9 @@ class DatePickerEditorController extends runtime.EditorController {
    * @Date: 2022-08-25 14:33:14
    */
   get valueFormat() {
+    if (this.model.dateTimeFormat) {
+      return this.model.dateTimeFormat;
+    }
     if (super.valueFormat) {
       return super.valueFormat;
     }

package/lib/editor/date-range/date-range-editor.controller.cjs

@@ -47,6 +47,9 @@ class DateRangeEditorController extends runtime.EditorController {
    * @Date: 2022-08-25 14:33:14
    */
   get valueFormat() {
+    if (this.model.dateTimeFormat) {
+      return this.model.dateTimeFormat;
+    }
     if (super.valueFormat) {
       return super.valueFormat;
     }

package/lib/editor/slider/ibiz-slider/ibiz-slider.cjs

@@ -16,6 +16,9 @@ const IBizSlider = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("slider");
     const c = props.controller;
     const editorModel = c.model;
+    const {
+      valueFormat
+    } = c.parent;
     const {
       useInFocusAndBlur,
       useInValueChange
@@ -27,7 +30,9 @@ const IBizSlider = /* @__PURE__ */ vue.defineComponent({
     let range = false;
     let showInput = false;
     let showText = false;
-    let format = "0%";
+    let format = valueFormat || "0%";
+    let type = "line";
+    let textItem = "";
     if (editorModel.editorParams) {
       if (editorModel.editorParams.stepvalue) {
         step = lodashEs.toNumber(editorModel.editorParams.stepvalue);
@@ -53,6 +58,12 @@ const IBizSlider = /* @__PURE__ */ vue.defineComponent({
       if (editorModel.editorParams.format) {
         format = editorModel.editorParams.format;
       }
+      if (editorModel.editorParams.type) {
+        type = editorModel.editorParams.type;
+      }
+      if (editorModel.editorParams.textItem) {
+        textItem = editorModel.editorParams.textItem;
+      }
     }
     const showFormDefaultContent = vue.computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
@@ -60,6 +71,25 @@ const IBizSlider = /* @__PURE__ */ vue.defineComponent({
       }
       return false;
     });
+    const handleLineVal = (val) => {
+      if (range) {
+        return JSON.parse(val);
+      }
+      return Number(val);
+    };
+    const handleCircleVal = (val) => {
+      return Number(val) * 100;
+    };
+    const handleCurVal = (val) => {
+      switch (type) {
+        case "line":
+          return handleLineVal(val);
+        case "circle":
+          return handleCircleVal(val);
+        default:
+          return val;
+      }
+    };
     const currentVal = vue.ref();
     vue.watch(() => props.value, (newVal, oldVal) => {
       if (newVal !== oldVal) {
@@ -70,17 +100,17 @@ const IBizSlider = /* @__PURE__ */ vue.defineComponent({
             currentVal.value = 0;
           }
         } else {
-          if (range) {
-            currentVal.value = JSON.parse(newVal);
-          } else {
-            currentVal.value = Number(newVal);
-          }
+          currentVal.value = handleCurVal(newVal);
         }
       }
     }, {
       immediate: true
     });
     const textVal = vue.computed(() => {
+      if (textItem) {
+        const data = props.data || {};
+        return ibiz.util.text.format("".concat(data[textItem]), format);
+      }
       const tempCurVal = Number(currentVal.value);
       const value = Number(tempCurVal / max);
       const formatValue = ibiz.util.text.format("".concat(value), format);
@@ -104,6 +134,8 @@ const IBizSlider = /* @__PURE__ */ vue.defineComponent({
       step,
       max,
       min,
+      type,
+      textItem,
       showStops,
       range,
       showInput,
@@ -114,23 +146,46 @@ const IBizSlider = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
+    let content;
+    if (this.type === "line") {
+      content = [vue.createVNode(vue.resolveComponent("el-slider"), vue.mergeProps({
+        "modelValue": this.currentVal,
+        "onUpdate:modelValue": ($event) => this.currentVal = $event,
+        "disabled": this.disabled || this.readonly,
+        "step": this.step,
+        "max": this.max,
+        "min": this.min,
+        "showStops": this.showStops,
+        "range": this.range,
+        "showInput": this.showInput,
+        "onChange": this.handleChange
+      }, this.$attrs), null), this.showText ? vue.createVNode("span", {
+        "class": [this.ns.em("text", "val")]
+      }, [this.textVal]) : null];
+    }
+    if (this.type === "circle") {
+      content = vue.createVNode(vue.resolveComponent("el-progress"), vue.mergeProps({
+        "type": this.type,
+        "percentage": this.currentVal
+      }, this.$attrs), {
+        default: (item) => {
+          if (!this.showText) {
+            return "";
+          }
+          let text = item.percentage;
+          if (this.textItem) {
+            text = this.textVal;
+          }
+          return vue.createVNode("span", {
+            "class": this.ns.em("circle", "text")
+          }, [text]);
+        }
+      });
+    }
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.readonly ? this.ns.m("readonly") : "", this.showText ? this.ns.e("text") : "", this.ns.is("show-default", this.showFormDefaultContent)],
+      "class": [this.ns.b(), this.readonly ? this.ns.m("readonly") : "", this.showText ? this.ns.e("text") : "", this.ns.is("show-default", this.showFormDefaultContent), this.ns.e(this.type)],
       "ref": "editorRef"
-    }, [vue.createVNode(vue.resolveComponent("el-slider"), vue.mergeProps({
-      "modelValue": this.currentVal,
-      "onUpdate:modelValue": ($event) => this.currentVal = $event,
-      "disabled": this.disabled || this.readonly,
-      "step": this.step,
-      "max": this.max,
-      "min": this.min,
-      "showStops": this.showStops,
-      "range": this.range,
-      "showInput": this.showInput,
-      "onChange": this.handleChange
-    }, this.$attrs), null), this.showText ? vue.createVNode("span", {
-      "class": [this.ns.em("text", "val")]
-    }, [this.textVal]) : null]);
+    }, [content]);
   }
 });
 

package/lib/editor/slider/ibiz-slider/ibiz-slider.css

@@ -1 +1 @@
-.ibiz-slider{display:flex;align-items:center;width:100%}.ibiz-slider__text .el-slider__button,.ibiz-slider__text .el-slider__button-wrapper{width:1px;height:var(--ibiz-height-control-default);border:none}.ibiz-slider__text .el-slider__bar{border-radius:var(--ibiz-border-radius-small)}.ibiz-slider__text .el-slider__runway.is-disabled .el-slider__bar{background-color:var(--ibiz-color-primary)}.ibiz-slider__text--val{margin-left:var(--ibiz-spacing-tight)}.ibiz-form-item .ibiz-slider.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}
+.ibiz-slider{--ibiz-editor-slider-trigger-width:0.375rem;--ibiz-editor-slider-text-width:2.375rem;display:flex;align-items:center;width:100%}.ibiz-slider__text .el-slider__button,.ibiz-slider__text .el-slider__button-wrapper{width:var(--ibiz-editor-slider-trigger-width);height:var(--ibiz-height-control-default);border:none;opacity:0}.ibiz-slider__text .el-slider__bar{border-radius:var(--ibiz-border-radius-small)}.ibiz-slider__text .el-slider__runway.is-disabled .el-slider__bar{background-color:var(--ibiz-color-primary)}.ibiz-slider__text--val{min-width:var(--ibiz-editor-slider-text-width);margin-left:var(--ibiz-spacing-tight)}.ibiz-slider__circle--text{font-size:var(--ibiz-font-size-regular)}.ibiz-slider__circle .el-progress{--el-fill-color-light:var(--ibiz-color-fill-0);width:100%}.ibiz-slider__circle .el-progress .el-progress-circle svg>path:nth-child(2){stroke:var(--ibiz-color-primary)}.ibiz-form-item .ibiz-slider.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}