@zgfe/business-lib 1.0.18 → 1.0.19

package/es/select/index.js

@@ -64,7 +64,7 @@ var BizSelect = function BizSelect(props) {
   useEffect(function () {
     var _boxRef$current;
 
-    setWidth(((_boxRef$current = boxRef.current) === null || _boxRef$current === void 0 ? void 0 : _boxRef$current.width) || 200);
+    setWidth((boxRef === null || boxRef === void 0 ? void 0 : (_boxRef$current = boxRef.current) === null || _boxRef$current === void 0 ? void 0 : _boxRef$current.width) || 200);
 
     if (props.defaultValue) {
       setCurrent(getValue(props.defaultValue));
@@ -137,7 +137,7 @@ var BizSelect = function BizSelect(props) {
     setSearchValue('');
 
     if (!props.multiple) {
-      setVisible(false);
+      onVisibleChange(false);
     }
 
     if (props.onChange) props.onChange(option);
@@ -146,6 +146,7 @@ var BizSelect = function BizSelect(props) {
   var onVisibleChange = function onVisibleChange(flag) {
     setSearchValue('');
     setVisible(flag);
+    props.onVisibleChange && props.onVisibleChange(flag);
   };
 
   return /*#__PURE__*/React.createElement(Dropdown, {
@@ -157,7 +158,7 @@ var BizSelect = function BizSelect(props) {
       onChange: onChange
     })),
     disabled: props.disable,
-    destroyPopupOnHide: true,
+    destroyPopupOnHide: props.destroyPopupOnHide,
     overlayStyle: {
       minWidth: minDropdownWidth || 0,
       width: overlayWidth || width
@@ -172,7 +173,7 @@ var BizSelect = function BizSelect(props) {
     className: "".concat(classPrefix, "-handle ").concat(props.className ? props.className : ''),
     ref: selectRef,
     id: selectId
-  }, /*#__PURE__*/React.createElement(SelectHandle, {
+  }, props.children ? props.children : /*#__PURE__*/React.createElement(SelectHandle, {
     ref: boxRef,
     value: current,
     labelField: labelField,
@@ -194,6 +195,7 @@ var BizSelect = function BizSelect(props) {
 BizSelect.defaultProps = {
   labelField: 'label',
   keyField: 'id',
-  popupContainer: true
+  popupContainer: true,
+  destroyPopupOnHide: true
 };
 export default BizSelect;

package/es/select/option.js

@@ -8,7 +8,8 @@ var SelectOption = function SelectOption(props) {
       group = props.group,
       checked = props.checked,
       disabled = props.disabled,
-      multiple = props.multiple;
+      multiple = props.multiple,
+      customLabel = props.customLabel;
 
   function onClick() {
     if (disabled) return;
@@ -29,6 +30,11 @@ var SelectOption = function SelectOption(props) {
     });
   }
 
+  function renderLabel(option) {
+    var dom = getLabel(option[props.labelField]);
+    return customLabel ? customLabel(dom, option) : dom;
+  }
+
   if (group) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(classPrefix, "-group")
@@ -51,7 +57,7 @@ var SelectOption = function SelectOption(props) {
     className: "".concat(classPrefix, "-option-icon")
   }, option === null || option === void 0 ? void 0 : option.icon), /*#__PURE__*/React.createElement("span", {
     className: "".concat(classPrefix, "-option-label")
-  }, getLabel(option[props.labelField])), !disabled && /*#__PURE__*/React.createElement("span", {
+  }, renderLabel(option)), !disabled && /*#__PURE__*/React.createElement("span", {
     className: "".concat(classPrefix, "-option-btn")
   }, props.extra && props.extra(option)));
 };

package/es/select/overlay.js

@@ -27,7 +27,8 @@ var SelectOverlay = function SelectOverlay(props) {
       multiple = props.multiple,
       disableItemList = props.disableItemList,
       dropdownExtra = props.dropdownExtra,
-      loading = props.loading;
+      loading = props.loading,
+      customLabel = props.customLabel;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -114,7 +115,7 @@ var SelectOverlay = function SelectOverlay(props) {
       if (searchValue && searchValue === option[labelField] && !option.isTemp) useTemp = false;
       var disabled = false;
       disableItemList === null || disableItemList === void 0 ? void 0 : disableItemList.forEach(function (item) {
-        if (item[keyField] === option[keyField] && (!current || current && ids.indexOf(option[keyField]) < 0)) {
+        if (item[keyField] === option[keyField]) {
           disabled = true;
         }
       });
@@ -130,7 +131,8 @@ var SelectOverlay = function SelectOverlay(props) {
         multiple: multiple,
         onClick: onClick,
         disabled: disabled,
-        key: option[keyField] || String(Math.random())
+        key: option[keyField] || String(Math.random()),
+        customLabel: customLabel
       });
 
       if (option.isTemp) {

package/es/select/styles/handle.less

@@ -45,7 +45,7 @@
     height: auto;
     min-height: @height-lg;
     overflow: visible;
-
+    line-height: 1;
     &.sm {
       height: auto;
       min-height: @height-sm;
@@ -93,19 +93,29 @@
     font-size: @font-size-lg;
     transform: translateY(-50%);
   }
+  &-input {
+    #biz-select-handle-tag {
+      display: flex;
+      align-items: center;
+      margin: 2px 4px 2px 0;
+      padding: 0 4px;
+      padding-top: 1px;
+      padding-bottom: 1px;
+      background: none;
+      border-color: #cacdd4;
+      border-radius: @border-radius-small;
+      &-label {
+        min-width: 0;
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &:hover {
+        .__default-hover();
 
-  &-tag {
-    display: flex;
-    align-items: center;
-    margin: 2px 4px 2px 0;
-    background: none;
-    border-color: #cacdd4;
-
-    &:hover {
-      .__default-hover();
-
-      .anticon {
-        color: @primary-color;
+        .anticon {
+          color: @primary-color;
+        }
       }
     }
   }

package/es/select/types.d.ts

@@ -6,7 +6,7 @@ export declare namespace BizSelectTypes {
     }
     interface Option {
         icon?: ReactNode;
-        [otherProp: string]: any;
+        [otherProp: string | symbol | number]: any;
     }
     interface Props {
         disable?: boolean;
@@ -34,6 +34,9 @@ export declare namespace BizSelectTypes {
         notFound?: string | ReactNode;
         loading?: boolean;
         onChange?: (val: Option) => void;
+        onVisibleChange?: (visible: boolean) => void;
+        destroyPopupOnHide?: boolean;
+        customLabel?: (node: ReactNode, option: Option) => ReactNode;
         onSearch?: (val: string) => void;
     }
     interface OverlayProps {
@@ -50,6 +53,7 @@ export declare namespace BizSelectTypes {
         labelField?: string;
         extra?: (option: Option) => ReactNode;
         onClick?: (option: Option) => void;
+        customLabel?: (node: ReactNode, option: Option) => ReactNode;
     }
 }
 export interface HandlerTypes {

package/es/userCondition/conditionTypeList.js

@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import './styles/conditionTypeList.less';
+import { BizUserConditionContext } from '.';
 
 var ConditionTypeList = function ConditionTypeList(props) {
   var onAdd = props.onAdd,
       label = props.label,
       show = props.show;
-  if (!show) return null;
+
+  var _useContext = useContext(BizUserConditionContext),
+      textMode = _useContext.textMode,
+      openTagCondition = _useContext.openTagCondition;
+
+  if (!show || textMode) return null;
   return /*#__PURE__*/React.createElement("div", {
     className: "biz-user-condition-type-list"
   }, label ? /*#__PURE__*/React.createElement("div", {
@@ -16,25 +22,42 @@ var ConditionTypeList = function ConditionTypeList(props) {
     className: "biz-user-condition-type-container"
   }, /*#__PURE__*/React.createElement("li", {
     className: "condition-type",
+    key: "event",
     onClick: function onClick() {
       return onAdd('event');
     }
-  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u505A\u8FC7\uFF08\u6CA1\u505A\u8FC7\uFF09\u2026"))), /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React.createElement(Space, {
+    key: "event"
+  }, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u505A\u8FC7\uFF08\u6CA1\u505A\u8FC7\uFF09\u2026"))), /*#__PURE__*/React.createElement("li", {
     className: "condition-type",
+    key: "add",
     onClick: function onClick() {
       return onAdd('add');
     }
-  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u65B0\u589E\u4E8E"))), /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React.createElement(Space, {
+    key: "add"
+  }, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u65B0\u589E\u4E8E"))), /*#__PURE__*/React.createElement("li", {
     className: "condition-type",
+    key: "active",
     onClick: function onClick() {
       return onAdd('active');
     }
-  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u6D3B\u8DC3\u4E8E"))), /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React.createElement(Space, {
+    key: "active"
+  }, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u6D3B\u8DC3\u4E8E"))), /*#__PURE__*/React.createElement("li", {
     className: "condition-type",
+    key: "prop",
     onClick: function onClick() {
       return onAdd('prop');
     }
-  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u7528\u6237\u5C5E\u6027\u6EE1\u8DB3")))));
+  }, /*#__PURE__*/React.createElement(Space, {
+    key: "prop"
+  }, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u7528\u6237\u5C5E\u6027\u6EE1\u8DB3"))), openTagCondition ? /*#__PURE__*/React.createElement("li", {
+    className: "condition-type",
+    onClick: function onClick() {
+      return onAdd('tag');
+    }
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u7528\u6237\u6807\u7B7E"))) : null));
 };
 
 ConditionTypeList.defaultProps = {

package/es/userCondition/conditionWrap.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseOutlined } from '@ant-design/icons';
+import IconFont from '../icon/iconFont';
 import './styles/conditionWrap.less';
 
 var ConditionWrap = function ConditionWrap(props) {
@@ -12,7 +12,9 @@ var ConditionWrap = function ConditionWrap(props) {
     onClick: function onClick() {
       return props.onDelte();
     }
-  }, /*#__PURE__*/React.createElement(CloseOutlined, null)));
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "qingchu"
+  })));
 };
 
 export default ConditionWrap;

package/es/userCondition/conditions/constants.d.ts

@@ -0,0 +1,24 @@
+export declare const operatorMap: {
+    relative: string;
+    absolute: string;
+    unlimited_time: string;
+    join_time: string;
+    'is not null': string;
+    'is null': string;
+    'not contains': string;
+    contains: string;
+    equal: string;
+    'not equal': string;
+    'begin with': string;
+    'not begin with': string;
+    'end with': string;
+    'not end with': string;
+    '=': string;
+    '<': string;
+    '>': string;
+    '>=': string;
+    '<=': string;
+};
+export declare const durationHandler: {
+    [key: string]: any;
+};

package/es/userCondition/conditions/constants.js

@@ -0,0 +1,41 @@
+export var operatorMap = {
+  relative: '最近',
+  absolute: '固定时段',
+  unlimited_time: '任意时间',
+  join_time: '新增后',
+  'is not null': '不是空值',
+  'is null': '是空值',
+  'not contains': '不包含',
+  contains: '包含',
+  equal: '是',
+  'not equal': '不是',
+  'begin with': '开头是',
+  'not begin with': '开头不是',
+  'end with': '结尾是',
+  'not end with': '结尾不是',
+  '=': '=',
+  '<': '<',
+  '>': '>',
+  '>=': '≥',
+  '<=': '≤'
+};
+export var durationHandler = {
+  1: {
+    unit: '时',
+    format: function format(s) {
+      return Number(s) / 3600;
+    }
+  },
+  2: {
+    unit: '分',
+    format: function format(s) {
+      return Number(s) / 60;
+    }
+  },
+  3: {
+    unit: '秒',
+    format: function format(s) {
+      return s;
+    }
+  }
+};

package/es/userCondition/conditions/eventCondition.js

@@ -4,16 +4,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { RightOutlined } from '@ant-design/icons';
 import BizEventSelector from '../../eventSelector';
 import RunTimesCondition from './runTimesCondition';
 import PeriodCondition from './periodCondition';
 import PropCondition from './propCondition';
 import './styles/eventCondition.less';
-import { classPrefix } from '..';
+import { BizUserConditionContext, classPrefix } from '..';
 
 var EventCondition = function EventCondition(props) {
+  var _useContext = useContext(BizUserConditionContext),
+      isRealTime = _useContext.isRealTime;
+
   var condition = props.condition,
       dataId = props.dataId;
 
@@ -70,7 +73,12 @@ var EventCondition = function EventCondition(props) {
         id: condition.eventId
       }
     },
-    onChange: onEventChange
+    onChange: onEventChange,
+    border: false,
+    theme: "normal",
+    placeholder: "\u9009\u62E9\u4E00\u4E2A\u4E8B\u4EF6",
+    destroyPopupOnHide: true,
+    defaultSelectAble: false
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-event-condition-expand-attr"),
     onClick: onAddAttr
@@ -97,7 +105,8 @@ var EventCondition = function EventCondition(props) {
     dataId: dataId,
     runPeriod: condition.runPeriod,
     onChange: onPeriodChange,
-    isEvent: true
+    isEvent: true,
+    isRealTime: isRealTime
   })))));
 };
 

package/es/userCondition/conditions/periodCondition.js

@@ -4,19 +4,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import BizSelect from '../../select';
 import { Input, DatePicker, Checkbox } from 'antd';
 import moment from 'moment';
 import './styles/periodCondition.less';
 import { classPrefix } from '..';
+import { operatorMap } from './constants';
 var RangePicker = DatePicker.RangePicker;
-var operatorMap = {
-  relative: '最近',
-  absolute: '固定时段',
-  unlimited_time: '任意时间',
-  join_time: '新增后'
-};
 
 var PeriodCondition = function PeriodCondition(props) {
   var dataId = props.dataId,
@@ -36,11 +31,21 @@ var PeriodCondition = function PeriodCondition(props) {
       text: '任意时间',
       value: 'unlimited_time'
     }, {
-      text: '新增后',
+      text: '新增后*',
       value: 'join_time'
     }]);
   }
 
+  var unit = useMemo(function () {
+    if (runPeriod.operator === 'absolute' || runPeriod.operator === 'unlimited_time') {
+      return '';
+    } else if (runPeriod.operator === 'relative') {
+      return '天';
+    } else if (runPeriod.operator === 'join_time') {
+      return '天内';
+    }
+  }, [runPeriod.operator]);
+
   function onChange(data) {
     props.onChange(dataId, data);
   }
@@ -113,6 +118,7 @@ var PeriodCondition = function PeriodCondition(props) {
 
     if (operator === 'absolute') {
       return /*#__PURE__*/React.createElement(RangePicker, {
+        size: "large",
         defaultValue: [moment(values[0]), moment(values[1])],
         onChange: onDateChange,
         allowClear: false
@@ -127,7 +133,12 @@ var PeriodCondition = function PeriodCondition(props) {
   }, label) : null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-period-condition-operator")
   }, /*#__PURE__*/React.createElement(BizSelect, {
-    overlayWidth: 129,
+    dropdownExtra: isEvent ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        lineHeight: '29px'
+      }
+    }, "*\u7528\u6237\u65B0\u589E\u6570\u636E\u4E3A\u6BCF\u65E5\u51CC\u6668\u751F\u6210") : null,
+    overlayWidth: isEvent ? 210 : 114,
     options: options,
     labelField: "text",
     keyField: "value",
@@ -140,7 +151,7 @@ var PeriodCondition = function PeriodCondition(props) {
     className: "".concat(classPrefix, "-period-condition-values")
   }, renderValues()), /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-period-condition-unit")
-  }, "\u5929"), props.isRealTime && runPeriod.operator === 'relative' ? /*#__PURE__*/React.createElement("div", {
+  }, unit), props.isRealTime && runPeriod.operator === 'relative' ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-period-condition-today")
   }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: runPeriod.values[1] === '1',

package/es/userCondition/conditions/propCondition.js

@@ -31,6 +31,7 @@ import './styles/propCondition.less';
 import { useContext } from 'react';
 import { BizUserConditionContext, classPrefix } from '..';
 import { transformNumberOperate } from '../util';
+import { PropType } from '../../attributeSelector/types';
 var numAttrTypeMap = {
   1: 'cont-string',
   2: 'cont-num',
@@ -44,12 +45,17 @@ var attrNumTypeMap = {
 
 var PropCondition = function PropCondition(props) {
   var _useContext = useContext(BizUserConditionContext),
-      eventAttrNum = _useContext.eventAttrNum;
+      envNameList = _useContext.envNameList,
+      userPropsMap = _useContext.userPropsMap;
+
+  var _useContext2 = useContext(BizUserConditionContext),
+      eventAttrNum = _useContext2.eventAttrNum;
 
   var isEvent = props.isEvent,
       label = props.label,
       attrs = props.attrs,
-      dataId = props.dataId;
+      dataId = props.dataId,
+      eventId = props.eventId;
 
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -97,8 +103,8 @@ var PropCondition = function PropCondition(props) {
     var newAttr = {
       attrName: attrName,
       attrId: attrId,
-      category: category,
-      operator: transformNumberOperate(operator),
+      category: category || 'custom',
+      operator: type === PropType.NUMBER ? transformNumberOperate(operator) : operator,
       params: values,
       attrType: numAttrTypeMap[type]
     };
@@ -130,7 +136,9 @@ var PropCondition = function PropCondition(props) {
 
   function getPropCategory(attrName) {
     if (!isEvent) return 'userProp';
-    return attrName === undefined ? 'eventProp' : 'envProp';
+    if (attrName === undefined) return 'eventProp';
+    if (envNameList.includes(attrName)) return 'envProp';
+    return 'eventProp';
   }
 
   function renderAttr(item, i) {
@@ -154,6 +162,14 @@ var PropCondition = function PropCondition(props) {
         type: attrNumTypeMap[attrType]
       };
       attrId && (props.defaultValue.attrId = attrId);
+
+      if (userPropsMap[attrName] && userPropsMap[attrName].subtype) {
+        props.defaultValue.subtype = userPropsMap[attrName].subtype;
+      }
+    }
+
+    if (isEvent) {
+      props.eventIdList = [eventId];
     }
 
     return /*#__PURE__*/React.createElement("div", {
@@ -171,7 +187,10 @@ var PropCondition = function PropCondition(props) {
       onDelete: function onDelete() {
         return onRemoveAttr(i);
       },
-      enableDelete: isEvent
+      enableDelete: isEvent,
+      border: false,
+      destroyPopupOnHide: true,
+      theme: "normal"
     }, props))));
   }
 

package/es/userCondition/conditions/runTimesCondition.js

@@ -21,10 +21,10 @@ var options = [{
   text: '<'
 }, {
   value: '>=',
-  text: '>='
+  text: '≥'
 }, {
   value: '<=',
-  text: '<='
+  text: '≤'
 }, {
   value: 'not equal',
   text: '≠'

package/es/userCondition/conditions/styles/eventCondition.less

@@ -8,10 +8,13 @@
     flex: 1;
   }
   .biz-user-condition-event {
-    width: 355px;
+    width: 200px;
     .biz-event-select-handle {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
+      .biz-select-handle-input {
+        background-color: @background-color-gray;
+      }
     }
   }
   &-times-period-wrap {
@@ -21,14 +24,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 30px;
-    height: 42px;
+    width: 38px;
+    height: 40px;
     margin-right: @margin-xs;
-    border: 1px solid @border-color-base;
-    border-left: none;
+    margin-left: @border-radius-small;
+    background-color: @background-color-gray;
     border-radius: @border-radius-small;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
     cursor: pointer;
   }
   &-attrs {
@@ -40,6 +41,7 @@
   &-label {
     display: flex;
     align-items: center;
+    min-width: 28px;
     height: 42px;
     margin-right: @margin-xs;
   }

package/es/userCondition/conditions/styles/periodCondition.less

@@ -7,8 +7,20 @@
   &-values,
   &-unit {
     margin-right: @margin-xs;
+    > input {
+      border: none !important;
+    }
   }
   &-operator {
     width: 129px;
   }
+  &-values {
+    .ant-picker-range.ant-picker-larg {
+      min-width: 255px;
+    }
+  }
+  &-today {
+    margin-left: @margin-xs;
+    white-space: nowrap;
+  }
 }

package/es/userCondition/conditions/styles/propCondition.less

@@ -26,11 +26,19 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 30px;
-      height: 30px;
-      border: 1px solid @border-color-base;
+      width: 40px;
+      height: 40px;
+      background-color: @background-color-gray;
       border-radius: @border-radius-sx;
       cursor: pointer;
     }
   }
+  .biz-condition-item-panel {
+    .biz-condition-item-input {
+      .ant-input {
+        height: 40px;
+        border: none;
+      }
+    }
+  }
 }

package/es/userCondition/conditions/styles/runTimesCondition.less

@@ -9,6 +9,9 @@
   &-value {
     width: 58px;
     margin-right: @margin-xs;
+    > input {
+      border: none !important;
+    }
   }
   .biz-user-condition-runtimes-tip {
     color: @primary-color;

package/es/userCondition/conditions/styles/tagsCondition.less

@@ -0,0 +1,20 @@
+@import '../../../assets/styles/variable.less';
+.biz-user-condition-tags-condition {
+  display: flex;
+  &-label {
+    margin-right: @margin-xs;
+  }
+  &-value {
+    margin-left: @margin-xs;
+  }
+  &-label {
+    line-height: 40px;
+  }
+  &-value {
+    flex: 1;
+    min-width: 0;
+  }
+  &-operator {
+    width: 96px;
+  }
+}