@varlet/ui 1.25.1 → 1.26.1-alpha.1644652196468

package/es/switch/Switch.js

@@ -6,7 +6,7 @@ import { props } from './props';
 import VarFormDetails from '../form-details';
 import VarLoading from '../loading';
 import Ripple from '../ripple';
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createVNode as _createVNode, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -31,7 +31,7 @@ export function render(_ctx, _cache) {
     class: _normalizeClass(["var-switch__track", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__track-active' : null, _ctx.errorMessage ? 'var-switch__track-error' : null]])
   }, null, 6
   /* CLASS, STYLE */
-  ), _withDirectives(_createElementVNode("div", {
+  ), _withDirectives((_openBlock(), _createElementBlock("div", {
     class: "var-switch__ripple",
     style: _normalizeStyle(_ctx.styleComputed.ripple)
   }, [_createElementVNode("div", {
@@ -46,7 +46,7 @@ export function render(_ctx, _cache) {
   /* CLASS, STYLE */
   )], 4
   /* STYLE */
-  ), [[_directive_ripple, {
+  )), [[_directive_ripple, {
     disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled
   }]])], 6
   /* CLASS, STYLE */

package/es/tab/Tab.js

@@ -2,7 +2,7 @@ import Ripple from '../ripple';
 import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './props';
 import { useTabs } from './provide';
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 

package/es/time-picker/TimePicker.js

@@ -4,7 +4,7 @@ import Clock from './clock.js'
 import { props, hoursAmpm, hours24 } from './props';
 import { toNumber } from '../utils/shared';
 import { getNumberTime, getIsDisableMinute, getIsDisableSecond } from './utils';
-import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createVNode as _createVNode, Transition as _Transition, withCtx as _withCtx, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -80,7 +80,7 @@ export function render(_ctx, _cache) {
   }, [_createVNode(_Transition, {
     name: "var-time-picker-panel-fade"
   }, {
-    default: _withCtx(() => [_createVNode(_component_clock, {
+    default: _withCtx(() => [(_openBlock(), _createBlock(_component_clock, {
       key: _ctx.type,
       ref: "inner",
       type: _ctx.type,
@@ -99,7 +99,7 @@ export function render(_ctx, _cache) {
       onChangePreventUpdate: _ctx.changePreventUpdate
     }, null, 8
     /* PROPS */
-    , ["type", "ampm", "color", "is-inner", "format", "allowed-time", "rad", "time", "prevent-next-update", "use-seconds", "max", "min", "onUpdate", "onChangePreventUpdate"])]),
+    , ["type", "ampm", "color", "is-inner", "format", "allowed-time", "rad", "time", "prevent-next-update", "use-seconds", "max", "min", "onUpdate", "onChangePreventUpdate"]))]),
     _: 1
     /* STABLE */
 

package/es/varlet.esm.js

@@ -2368,7 +2368,7 @@ function render$N(_ctx, _cache) {
     onClick: _cache[0] || (_cache[0] = function() {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
-  }, [createElementVNode("div", _hoisted_1$A, [withDirectives(createElementVNode("div", {
+  }, [createElementVNode("div", _hoisted_1$A, [withDirectives((openBlock(), createElementBlock("div", {
     class: normalizeClass(["var-checkbox__action", [_ctx.checked ? "var-checkbox--checked" : "var-checkbox--unchecked", _ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? "var-checkbox--error" : null, _ctx.formDisabled || _ctx.disabled ? "var-checkbox--disabled" : null]]),
     style: normalizeStyle({
       color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
@@ -2387,7 +2387,7 @@ function render$N(_ctx, _cache) {
     name: "checkbox-blank-outline",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
-  }, null, 8, ["class", "size"])])], 6), [[_directive_ripple, {
+  }, null, 8, ["class", "size"])])], 6)), [[_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
   }]]), createElementVNode("div", {
     class: normalizeClass(["var-checkbox__text", [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? "var-checkbox--error" : null, _ctx.formDisabled || _ctx.disabled ? "var-checkbox--disabled" : null]])
@@ -2820,6 +2820,21 @@ var props$E = {
   },
   onClick: {
     type: Function
+  },
+  xs: {
+    type: [Object, Number, String]
+  },
+  sm: {
+    type: [Object, Number, String]
+  },
+  md: {
+    type: [Object, Number, String]
+  },
+  lg: {
+    type: [Object, Number, String]
+  },
+  xl: {
+    type: [Object, Number, String]
   }
 };
 var ROW_BIND_COL_KEY = Symbol("ROW_BIND_COL_KEY");
@@ -2857,7 +2872,7 @@ function useRow() {
 }
 function render$K(_ctx, _cache) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["var-col var--box", [_ctx.span ? "var-col--span-" + _ctx.toNumber(_ctx.span) : null, _ctx.offset ? "var-col--offset-" + _ctx.toNumber(_ctx.offset) : null]]),
+    class: normalizeClass(["var-col var--box", [_ctx.span ? "var-col--span-" + _ctx.span : null, _ctx.offset ? "var-col--offset-" + _ctx.offset : null, ..._ctx.getSize("xs", _ctx.xs), ..._ctx.getSize("sm", _ctx.sm), ..._ctx.getSize("md", _ctx.md), ..._ctx.getSize("lg", _ctx.lg), ..._ctx.getSize("xl", _ctx.xl)]]),
     style: normalizeStyle({
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
@@ -2883,12 +2898,27 @@ var Col = defineComponent({
       bindRow
     } = useRow();
     var colProvider = {
-      span,
-      offset,
       setPadding(pad) {
         padding.value = pad;
       }
     };
+    var getSize = (mode, size) => {
+      var classes = [];
+      if (!size) {
+        return classes;
+      }
+      if (isPlainObject(size)) {
+        var {
+          span: _span,
+          offset: _offset
+        } = size;
+        _span && classes.push("var-col--span-" + mode + "-" + _span);
+        _offset && classes.push("var-col--offset-" + mode + "-" + _offset);
+      } else {
+        classes.push("var-col--span-" + mode + "-" + size);
+      }
+      return classes;
+    };
     watch([() => props2.span, () => props2.offset], () => {
       row2 == null ? void 0 : row2.computePadding();
     });
@@ -2896,7 +2926,10 @@ var Col = defineComponent({
     return {
       padding,
       toNumber,
-      toSizeUnit
+      toSizeUnit,
+      getSize,
+      span,
+      offset
     };
   }
 });
@@ -6017,7 +6050,7 @@ var padZoneStr = function padZoneStr2(instance) {
   var minutes = Math.abs(negMinutes);
   var hourOffset = Math.floor(minutes / 60);
   var minuteOffset = minutes % 60;
-  return "" + (negMinutes <= 0 ? "+" : "-") + padStart(hourOffset, 2, "0") + ":" + padStart(minuteOffset, 2, "0");
+  return (negMinutes <= 0 ? "+" : "-") + padStart(hourOffset, 2, "0") + ":" + padStart(minuteOffset, 2, "0");
 };
 var monthDiff = function monthDiff2(a, b) {
   if (a.date() < b.date())
@@ -10291,12 +10324,12 @@ function render$p(_ctx, _cache) {
     key: 1
   }, () => [createElementVNode("div", _hoisted_4$6, toDisplayString(_ctx.dt(_ctx.finishedText, _ctx.pack.listFinishedText)), 1)]) : createCommentVNode("v-if", true), _ctx.error ? renderSlot(_ctx.$slots, "error", {
     key: 2
-  }, () => [withDirectives(createElementVNode("div", {
+  }, () => [withDirectives((openBlock(), createElementBlock("div", {
     class: "var-list__error",
     onClick: _cache[0] || (_cache[0] = function() {
       return _ctx.load && _ctx.load(...arguments);
     })
-  }, [createTextVNode(toDisplayString(_ctx.dt(_ctx.errorText, _ctx.pack.listErrorText)), 1)], 512), [[_directive_ripple]])]) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5$6, null, 512)], 512);
+  }, [createTextVNode(toDisplayString(_ctx.dt(_ctx.errorText, _ctx.pack.listErrorText)), 1)])), [[_directive_ripple]])]) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5$6, null, 512)], 512);
 }
 var List = defineComponent({
   render: render$p,
@@ -10739,7 +10772,7 @@ function render$n(_ctx, _cache) {
   var _component_var_cell = resolveComponent("var-cell");
   var _component_var_menu = resolveComponent("var-menu");
   var _directive_ripple = resolveDirective("ripple");
-  return openBlock(), createElementBlock("ul", _hoisted_1$f, [withDirectives(createElementVNode("li", {
+  return openBlock(), createElementBlock("ul", _hoisted_1$f, [withDirectives((openBlock(), createElementBlock("li", {
     class: normalizeClass(["var-pagination__item var-pagination__prev", {
       "var-pagination__item-disabled": _ctx.current <= 1 || _ctx.disabled,
       "var-pagination__item-hover": _ctx.simple,
@@ -10748,7 +10781,7 @@ function render$n(_ctx, _cache) {
     onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickItem("prev"))
   }, [renderSlot(_ctx.$slots, "prev", {}, () => [createVNode(_component_var_icon, {
     name: "chevron-left"
-  })])], 2), [[_directive_ripple, {
+  })])], 2)), [[_directive_ripple, {
     disabled: _ctx.current <= 1 || _ctx.disabled
   }]]), _ctx.simple ? (openBlock(), createElementBlock("li", {
     key: 0,
@@ -10778,7 +10811,7 @@ function render$n(_ctx, _cache) {
     }, [createTextVNode(toDisplayString(item), 1)], 10, _hoisted_2$b)), [[_directive_ripple, {
       disabled: _ctx.disabled
     }]]);
-  }), 128)), withDirectives(createElementVNode("li", {
+  }), 128)), withDirectives((openBlock(), createElementBlock("li", {
     class: normalizeClass(["var-pagination__item var-pagination__next", {
       "var-pagination__item-disabled": _ctx.current >= _ctx.pageCount || _ctx.disabled,
       "var-pagination__item-hover": _ctx.simple,
@@ -10787,7 +10820,7 @@ function render$n(_ctx, _cache) {
     onClick: _cache[4] || (_cache[4] = ($event) => _ctx.clickItem("next"))
   }, [renderSlot(_ctx.$slots, "next", {}, () => [createVNode(_component_var_icon, {
     name: "chevron-right"
-  })])], 2), [[_directive_ripple, {
+  })])], 2)), [[_directive_ripple, {
     disabled: _ctx.current >= _ctx.pageCount || _ctx.disabled
   }]]), _ctx.showSizeChanger ? (openBlock(), createElementBlock("li", {
     key: 2,
@@ -11152,6 +11185,7 @@ function render$m(_ctx, _cache) {
         onTouchend: ($event) => _ctx.handleTouchend($event, c)
       }, [createElementVNode("div", {
         class: "var-picker__scroller",
+        ref_for: true,
         ref: (el) => _ctx.getScrollEl(el, c),
         style: normalizeStyle({
           transform: "translateY(" + c.translate + "px)",
@@ -11916,7 +11950,7 @@ function render$j(_ctx, _cache) {
     onClick: _cache[0] || (_cache[0] = function() {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
-  }, _ctx.$attrs), [withDirectives(createElementVNode("div", {
+  }, _ctx.$attrs), [withDirectives((openBlock(), createElementBlock("div", {
     class: normalizeClass(["var-radio__action", [_ctx.checked ? "var-radio--checked" : "var-radio--unchecked", _ctx.errorMessage || _ctx.radioGroupErrorMessage ? "var-radio--error" : null, _ctx.formDisabled || _ctx.disabled ? "var-radio--disabled" : null]]),
     style: normalizeStyle({
       color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
@@ -11935,7 +11969,7 @@ function render$j(_ctx, _cache) {
     "var-radio-cover": "",
     name: "radio-blank",
     size: _ctx.iconSize
-  }, null, 8, ["class", "size"])])], 6), [[_directive_ripple, {
+  }, null, 8, ["class", "size"])])], 6)), [[_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
   }]]), createElementVNode("div", {
     class: normalizeClass(["var-radio__text", [_ctx.errorMessage || _ctx.radioGroupErrorMessage ? "var-radio--error" : null, _ctx.formDisabled || _ctx.disabled ? "var-radio--disabled" : null]])
@@ -12455,7 +12489,8 @@ function render$g(_ctx, _cache) {
     class: "var-row var--box",
     style: normalizeStyle({
       justifyContent: _ctx.justify,
-      alignItems: _ctx.align
+      alignItems: _ctx.align,
+      margin: _ctx.average ? "0 -" + _ctx.average + "px" : void 0
     }),
     onClick: _cache[0] || (_cache[0] = function() {
       return _ctx.onClick && _ctx.onClick(...arguments);
@@ -12472,49 +12507,15 @@ var Row = defineComponent({
       bindCols,
       length
     } = useCols();
-    var computeGroups = () => {
-      var groups = [[]];
-      var span = 0;
-      cols.forEach((col2) => {
-        var colSpan = col2.span.value + col2.offset.value;
-        var nextSpan = span + colSpan;
-        if (nextSpan > 24) {
-          groups.push([col2]);
-          span = colSpan;
-        } else {
-          groups[groups.length - 1].push(col2);
-          span += colSpan;
-        }
-      });
-      return groups;
-    };
-    var computePadding = () => {
-      var groups = computeGroups();
+    var average = computed(() => {
       var gutter = toPxNum(props2.gutter);
-      var average = gutter / 2;
-      groups.forEach((cols2) => {
-        cols2.forEach((col2, index) => {
-          if (cols2.length <= 1) {
-            return;
-          }
-          if (index === 0) {
-            col2.setPadding({
-              left: 0,
-              right: average
-            });
-          }
-          if (index === cols2.length - 1) {
-            col2.setPadding({
-              left: average,
-              right: 0
-            });
-          }
-          if (index > 0 && index < cols2.length - 1) {
-            col2.setPadding({
-              left: average,
-              right: average
-            });
-          }
+      return gutter / 2;
+    });
+    var computePadding = () => {
+      cols.forEach((col2) => {
+        col2.setPadding({
+          left: average.value,
+          right: average.value
         });
       });
     };
@@ -12524,6 +12525,9 @@ var Row = defineComponent({
     watch(() => length.value, computePadding);
     watch(() => props2.gutter, computePadding);
     bindCols(rowProvider);
+    return {
+      average
+    };
   }
 });
 Row.install = function(app) {
@@ -12679,7 +12683,7 @@ function render$f(_ctx, _cache) {
         key: l,
         onClick: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["stop"])),
-        onClose: (e) => _ctx.handleClose(l)
+        onClose: () => _ctx.handleClose(l)
       }, {
         default: withCtx(() => [createTextVNode(toDisplayString(l), 1)]),
         _: 2
@@ -14376,7 +14380,7 @@ function render$8(_ctx, _cache) {
   }, [createElementVNode("div", {
     style: normalizeStyle(_ctx.styleComputed.track),
     class: normalizeClass(["var-switch__track", [_ctx.modelValue === _ctx.activeValue ? "var-switch__track-active" : null, _ctx.errorMessage ? "var-switch__track-error" : null]])
-  }, null, 6), withDirectives(createElementVNode("div", {
+  }, null, 6), withDirectives((openBlock(), createElementBlock("div", {
     class: "var-switch__ripple",
     style: normalizeStyle(_ctx.styleComputed.ripple)
   }, [createElementVNode("div", {
@@ -14385,7 +14389,7 @@ function render$8(_ctx, _cache) {
   }, [_ctx.loading ? (openBlock(), createBlock(_component_var_loading, {
     key: 0,
     radius: _ctx.toNumber(_ctx.size) / 2 - 2
-  }, null, 8, ["radius"])) : createCommentVNode("v-if", true)], 6)], 4), [[_directive_ripple, {
+  }, null, 8, ["radius"])) : createCommentVNode("v-if", true)], 6)], 4)), [[_directive_ripple, {
     disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled
   }]])], 6), createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage
@@ -15544,7 +15548,7 @@ var Clock = defineComponent({
         } = allowedTime;
         var _disableAmpmHours3 = hoursAmpm.filter((hour) => !hours(toNumber(hour)));
         var _disable24Hours3 = hours24.filter((hour) => !hours(toNumber(hour)));
-        disableHour.value = [...new Set([...disableHour.value, ..._disableAmpmHours3, ..._disable24Hours3])];
+        disableHour.value = [.../* @__PURE__ */ new Set([...disableHour.value, ..._disableAmpmHours3, ..._disable24Hours3])];
       }
       disable24HourIndex.value = disableHour.value.map((hour) => hours24.findIndex((hour24) => hour === hour24)).filter((hour) => hour >= 0);
     }, {
@@ -15620,7 +15624,7 @@ function render$1(_ctx, _cache) {
   }, [createVNode(Transition, {
     name: "var-time-picker-panel-fade"
   }, {
-    default: withCtx(() => [createVNode(_component_clock, {
+    default: withCtx(() => [(openBlock(), createBlock(_component_clock, {
       key: _ctx.type,
       ref: "inner",
       type: _ctx.type,
@@ -15637,7 +15641,7 @@ function render$1(_ctx, _cache) {
       min: _ctx.min,
       onUpdate: _ctx.update,
       onChangePreventUpdate: _ctx.changePreventUpdate
-    }, null, 8, ["type", "ampm", "color", "is-inner", "format", "allowed-time", "rad", "time", "prevent-next-update", "use-seconds", "max", "min", "onUpdate", "onChangePreventUpdate"])]),
+    }, null, 8, ["type", "ampm", "color", "is-inner", "format", "allowed-time", "rad", "time", "prevent-next-update", "use-seconds", "max", "min", "onUpdate", "onChangePreventUpdate"]))]),
     _: 1
   })], 544)])], 2);
 }

package/highlight/attributes.json

@@ -335,6 +335,26 @@
     "type": "number | string",
     "description": "列偏移的栅格数 默认值：0"
   },
+  "var-col/xs": {
+    "type": "string | number | { span?: number | string, offset?: number | string }",
+    "description": "`<768px` 响应式栅格数或者栅格属性对象 默认值：-"
+  },
+  "var-col/sm": {
+    "type": "string | number | { span?: number | string, offset?: number | string }",
+    "description": "`≥768px` 响应式栅格数或者栅格属性对象 默认值：-"
+  },
+  "var-col/md": {
+    "type": "string | number | { span?: number | string, offset?: number | string }",
+    "description": "`≥992px` 响应式栅格数或者栅格属性对象 默认值：-"
+  },
+  "var-col/lg": {
+    "type": "string | number | { span?: number | string, offset?: number | string }",
+    "description": "`≥1200px` 响应式栅格数或者栅格属性对象 默认值：-"
+  },
+  "var-col/xl": {
+    "type": "string | number | { span?: number | string, offset?: number | string }",
+    "description": "`≥1920px` 响应式栅格数或者栅格属性对象 默认值：-"
+  },
   "var-collapse/v-model": {
     "type": "手风琴模式： string | number<br> 非手风琴模式：string[] | number[]",
     "description": "当前展开面板的 name 默认值：-"

package/highlight/tags.json

@@ -124,7 +124,12 @@
   "var-col": {
     "attributes": [
       "span",
-      "offset"
+      "offset",
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
     ]
   },
   "var-collapse": {

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -1003,6 +1003,51 @@
                 "type": "number | string",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "xs",
+              "description": "`<768px` 响应式栅格数或者栅格属性对象",
+              "default": "-",
+              "value": {
+                "type": "string | number | { span?: number | string, offset?: number | string }",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "sm",
+              "description": "`≥768px` 响应式栅格数或者栅格属性对象",
+              "default": "-",
+              "value": {
+                "type": "string | number | { span?: number | string, offset?: number | string }",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "md",
+              "description": "`≥992px` 响应式栅格数或者栅格属性对象",
+              "default": "-",
+              "value": {
+                "type": "string | number | { span?: number | string, offset?: number | string }",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "lg",
+              "description": "`≥1200px` 响应式栅格数或者栅格属性对象",
+              "default": "-",
+              "value": {
+                "type": "string | number | { span?: number | string, offset?: number | string }",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "xl",
+              "description": "`≥1920px` 响应式栅格数或者栅格属性对象",
+              "default": "-",
+              "value": {
+                "type": "string | number | { span?: number | string, offset?: number | string }",
+                "kind": "expression"
+              }
             }
           ],
           "events": [

package/lib/checkbox/Checkbox.js

@@ -40,7 +40,7 @@ function render(_ctx, _cache) {
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
-  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     class: (0, _vue.normalizeClass)(["var-checkbox__action", [_ctx.checked ? 'var-checkbox--checked' : 'var-checkbox--unchecked', _ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]]),
     style: (0, _vue.normalizeStyle)({
       color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
@@ -65,7 +65,7 @@ function render(_ctx, _cache) {
   /* PROPS */
   , ["class", "size"])])], 6
   /* CLASS, STYLE */
-  ), [[_directive_ripple, {
+  )), [[_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
   }]]), (0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(["var-checkbox__text", [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]])

package/lib/col/Col.js

@@ -16,7 +16,7 @@ var _elements = require("../utils/elements");
 
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-col var--box", [_ctx.span ? "var-col--span-" + _ctx.toNumber(_ctx.span) : null, _ctx.offset ? "var-col--offset-" + _ctx.toNumber(_ctx.offset) : null]]),
+    class: (0, _vue.normalizeClass)(["var-col var--box", [_ctx.span ? "var-col--span-" + _ctx.span : null, _ctx.offset ? "var-col--offset-" + _ctx.offset : null, ..._ctx.getSize('xs', _ctx.xs), ..._ctx.getSize('sm', _ctx.sm), ..._ctx.getSize('md', _ctx.md), ..._ctx.getSize('lg', _ctx.lg), ..._ctx.getSize('xl', _ctx.xl)]]),
     style: (0, _vue.normalizeStyle)({
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
@@ -46,14 +46,33 @@ var _default = (0, _vue.defineComponent)({
       bindRow
     } = (0, _provide.useRow)();
     var colProvider = {
-      span,
-      offset,
-
       setPadding(pad) {
         padding.value = pad;
       }
 
     };
+
+    var getSize = (mode, size) => {
+      var classes = [];
+
+      if (!size) {
+        return classes;
+      }
+
+      if ((0, _shared.isPlainObject)(size)) {
+        var {
+          span: _span,
+          offset: _offset
+        } = size;
+        _span && classes.push("var-col--span-" + mode + "-" + _span);
+        _offset && classes.push("var-col--offset-" + mode + "-" + _offset);
+      } else {
+        classes.push("var-col--span-" + mode + "-" + size);
+      }
+
+      return classes;
+    };
+
     (0, _vue.watch)([() => props.span, () => props.offset], () => {
       row == null ? void 0 : row.computePadding();
     });
@@ -61,7 +80,10 @@ var _default = (0, _vue.defineComponent)({
     return {
       padding,
       toNumber: _shared.toNumber,
-      toSizeUnit: _elements.toSizeUnit
+      toSizeUnit: _elements.toSizeUnit,
+      getSize,
+      span,
+      offset
     };
   }
 

package/lib/col/col.css

@@ -1 +1 @@
-.var-col { transition: all 0.25s;}.var-col--span-1 { flex: 0 0 4.16666667%;}.var-col--offset-1 { margin-left: 4.16666667%;}.var-col--span-2 { flex: 0 0 8.33333333%;}.var-col--offset-2 { margin-left: 8.33333333%;}.var-col--span-3 { flex: 0 0 12.5%;}.var-col--offset-3 { margin-left: 12.5%;}.var-col--span-4 { flex: 0 0 16.66666667%;}.var-col--offset-4 { margin-left: 16.66666667%;}.var-col--span-5 { flex: 0 0 20.83333333%;}.var-col--offset-5 { margin-left: 20.83333333%;}.var-col--span-6 { flex: 0 0 25%;}.var-col--offset-6 { margin-left: 25%;}.var-col--span-7 { flex: 0 0 29.16666667%;}.var-col--offset-7 { margin-left: 29.16666667%;}.var-col--span-8 { flex: 0 0 33.33333333%;}.var-col--offset-8 { margin-left: 33.33333333%;}.var-col--span-9 { flex: 0 0 37.5%;}.var-col--offset-9 { margin-left: 37.5%;}.var-col--span-10 { flex: 0 0 41.66666667%;}.var-col--offset-10 { margin-left: 41.66666667%;}.var-col--span-11 { flex: 0 0 45.83333333%;}.var-col--offset-11 { margin-left: 45.83333333%;}.var-col--span-12 { flex: 0 0 50%;}.var-col--offset-12 { margin-left: 50%;}.var-col--span-13 { flex: 0 0 54.16666667%;}.var-col--offset-13 { margin-left: 54.16666667%;}.var-col--span-14 { flex: 0 0 58.33333333%;}.var-col--offset-14 { margin-left: 58.33333333%;}.var-col--span-15 { flex: 0 0 62.5%;}.var-col--offset-15 { margin-left: 62.5%;}.var-col--span-16 { flex: 0 0 66.66666667%;}.var-col--offset-16 { margin-left: 66.66666667%;}.var-col--span-17 { flex: 0 0 70.83333333%;}.var-col--offset-17 { margin-left: 70.83333333%;}.var-col--span-18 { flex: 0 0 75%;}.var-col--offset-18 { margin-left: 75%;}.var-col--span-19 { flex: 0 0 79.16666667%;}.var-col--offset-19 { margin-left: 79.16666667%;}.var-col--span-20 { flex: 0 0 83.33333333%;}.var-col--offset-20 { margin-left: 83.33333333%;}.var-col--span-21 { flex: 0 0 87.5%;}.var-col--offset-21 { margin-left: 87.5%;}.var-col--span-22 { flex: 0 0 91.66666667%;}.var-col--offset-22 { margin-left: 91.66666667%;}.var-col--span-23 { flex: 0 0 95.83333333%;}.var-col--offset-23 { margin-left: 95.83333333%;}.var-col--span-24 { flex: 0 0 100%;}.var-col--offset-24 { margin-left: 100%;}
+.var-col { transition: all 0.25s;}.var-col--span-1 { flex: 0 0 4.16666667%;}.var-col--offset-1 { margin-left: 4.16666667%;}.var-col--span-2 { flex: 0 0 8.33333333%;}.var-col--offset-2 { margin-left: 8.33333333%;}.var-col--span-3 { flex: 0 0 12.5%;}.var-col--offset-3 { margin-left: 12.5%;}.var-col--span-4 { flex: 0 0 16.66666667%;}.var-col--offset-4 { margin-left: 16.66666667%;}.var-col--span-5 { flex: 0 0 20.83333333%;}.var-col--offset-5 { margin-left: 20.83333333%;}.var-col--span-6 { flex: 0 0 25%;}.var-col--offset-6 { margin-left: 25%;}.var-col--span-7 { flex: 0 0 29.16666667%;}.var-col--offset-7 { margin-left: 29.16666667%;}.var-col--span-8 { flex: 0 0 33.33333333%;}.var-col--offset-8 { margin-left: 33.33333333%;}.var-col--span-9 { flex: 0 0 37.5%;}.var-col--offset-9 { margin-left: 37.5%;}.var-col--span-10 { flex: 0 0 41.66666667%;}.var-col--offset-10 { margin-left: 41.66666667%;}.var-col--span-11 { flex: 0 0 45.83333333%;}.var-col--offset-11 { margin-left: 45.83333333%;}.var-col--span-12 { flex: 0 0 50%;}.var-col--offset-12 { margin-left: 50%;}.var-col--span-13 { flex: 0 0 54.16666667%;}.var-col--offset-13 { margin-left: 54.16666667%;}.var-col--span-14 { flex: 0 0 58.33333333%;}.var-col--offset-14 { margin-left: 58.33333333%;}.var-col--span-15 { flex: 0 0 62.5%;}.var-col--offset-15 { margin-left: 62.5%;}.var-col--span-16 { flex: 0 0 66.66666667%;}.var-col--offset-16 { margin-left: 66.66666667%;}.var-col--span-17 { flex: 0 0 70.83333333%;}.var-col--offset-17 { margin-left: 70.83333333%;}.var-col--span-18 { flex: 0 0 75%;}.var-col--offset-18 { margin-left: 75%;}.var-col--span-19 { flex: 0 0 79.16666667%;}.var-col--offset-19 { margin-left: 79.16666667%;}.var-col--span-20 { flex: 0 0 83.33333333%;}.var-col--offset-20 { margin-left: 83.33333333%;}.var-col--span-21 { flex: 0 0 87.5%;}.var-col--offset-21 { margin-left: 87.5%;}.var-col--span-22 { flex: 0 0 91.66666667%;}.var-col--offset-22 { margin-left: 91.66666667%;}.var-col--span-23 { flex: 0 0 95.83333333%;}.var-col--offset-23 { margin-left: 95.83333333%;}.var-col--span-24 { flex: 0 0 100%;}.var-col--offset-24 { margin-left: 100%;}@media only screen and (max-width: 767px) { .var-col--span-xs-1 { flex: 0 0 4.16666667%; } .var-col--offset-xs-1 { margin-left: 4.16666667%; } .var-col--span-xs-2 { flex: 0 0 8.33333333%; } .var-col--offset-xs-2 { margin-left: 8.33333333%; } .var-col--span-xs-3 { flex: 0 0 12.5%; } .var-col--offset-xs-3 { margin-left: 12.5%; } .var-col--span-xs-4 { flex: 0 0 16.66666667%; } .var-col--offset-xs-4 { margin-left: 16.66666667%; } .var-col--span-xs-5 { flex: 0 0 20.83333333%; } .var-col--offset-xs-5 { margin-left: 20.83333333%; } .var-col--span-xs-6 { flex: 0 0 25%; } .var-col--offset-xs-6 { margin-left: 25%; } .var-col--span-xs-7 { flex: 0 0 29.16666667%; } .var-col--offset-xs-7 { margin-left: 29.16666667%; } .var-col--span-xs-8 { flex: 0 0 33.33333333%; } .var-col--offset-xs-8 { margin-left: 33.33333333%; } .var-col--span-xs-9 { flex: 0 0 37.5%; } .var-col--offset-xs-9 { margin-left: 37.5%; } .var-col--span-xs-10 { flex: 0 0 41.66666667%; } .var-col--offset-xs-10 { margin-left: 41.66666667%; } .var-col--span-xs-11 { flex: 0 0 45.83333333%; } .var-col--offset-xs-11 { margin-left: 45.83333333%; } .var-col--span-xs-12 { flex: 0 0 50%; } .var-col--offset-xs-12 { margin-left: 50%; } .var-col--span-xs-13 { flex: 0 0 54.16666667%; } .var-col--offset-xs-13 { margin-left: 54.16666667%; } .var-col--span-xs-14 { flex: 0 0 58.33333333%; } .var-col--offset-xs-14 { margin-left: 58.33333333%; } .var-col--span-xs-15 { flex: 0 0 62.5%; } .var-col--offset-xs-15 { margin-left: 62.5%; } .var-col--span-xs-16 { flex: 0 0 66.66666667%; } .var-col--offset-xs-16 { margin-left: 66.66666667%; } .var-col--span-xs-17 { flex: 0 0 70.83333333%; } .var-col--offset-xs-17 { margin-left: 70.83333333%; } .var-col--span-xs-18 { flex: 0 0 75%; } .var-col--offset-xs-18 { margin-left: 75%; } .var-col--span-xs-19 { flex: 0 0 79.16666667%; } .var-col--offset-xs-19 { margin-left: 79.16666667%; } .var-col--span-xs-20 { flex: 0 0 83.33333333%; } .var-col--offset-xs-20 { margin-left: 83.33333333%; } .var-col--span-xs-21 { flex: 0 0 87.5%; } .var-col--offset-xs-21 { margin-left: 87.5%; } .var-col--span-xs-22 { flex: 0 0 91.66666667%; } .var-col--offset-xs-22 { margin-left: 91.66666667%; } .var-col--span-xs-23 { flex: 0 0 95.83333333%; } .var-col--offset-xs-23 { margin-left: 95.83333333%; } .var-col--span-xs-24 { flex: 0 0 100%; } .var-col--offset-xs-24 { margin-left: 100%; }}@media only screen and (min-width: 768px) and (max-width: 991px) { .var-col--span-sm-1 { flex: 0 0 4.16666667%; } .var-col--offset-sm-1 { margin-left: 4.16666667%; } .var-col--span-sm-2 { flex: 0 0 8.33333333%; } .var-col--offset-sm-2 { margin-left: 8.33333333%; } .var-col--span-sm-3 { flex: 0 0 12.5%; } .var-col--offset-sm-3 { margin-left: 12.5%; } .var-col--span-sm-4 { flex: 0 0 16.66666667%; } .var-col--offset-sm-4 { margin-left: 16.66666667%; } .var-col--span-sm-5 { flex: 0 0 20.83333333%; } .var-col--offset-sm-5 { margin-left: 20.83333333%; } .var-col--span-sm-6 { flex: 0 0 25%; } .var-col--offset-sm-6 { margin-left: 25%; } .var-col--span-sm-7 { flex: 0 0 29.16666667%; } .var-col--offset-sm-7 { margin-left: 29.16666667%; } .var-col--span-sm-8 { flex: 0 0 33.33333333%; } .var-col--offset-sm-8 { margin-left: 33.33333333%; } .var-col--span-sm-9 { flex: 0 0 37.5%; } .var-col--offset-sm-9 { margin-left: 37.5%; } .var-col--span-sm-10 { flex: 0 0 41.66666667%; } .var-col--offset-sm-10 { margin-left: 41.66666667%; } .var-col--span-sm-11 { flex: 0 0 45.83333333%; } .var-col--offset-sm-11 { margin-left: 45.83333333%; } .var-col--span-sm-12 { flex: 0 0 50%; } .var-col--offset-sm-12 { margin-left: 50%; } .var-col--span-sm-13 { flex: 0 0 54.16666667%; } .var-col--offset-sm-13 { margin-left: 54.16666667%; } .var-col--span-sm-14 { flex: 0 0 58.33333333%; } .var-col--offset-sm-14 { margin-left: 58.33333333%; } .var-col--span-sm-15 { flex: 0 0 62.5%; } .var-col--offset-sm-15 { margin-left: 62.5%; } .var-col--span-sm-16 { flex: 0 0 66.66666667%; } .var-col--offset-sm-16 { margin-left: 66.66666667%; } .var-col--span-sm-17 { flex: 0 0 70.83333333%; } .var-col--offset-sm-17 { margin-left: 70.83333333%; } .var-col--span-sm-18 { flex: 0 0 75%; } .var-col--offset-sm-18 { margin-left: 75%; } .var-col--span-sm-19 { flex: 0 0 79.16666667%; } .var-col--offset-sm-19 { margin-left: 79.16666667%; } .var-col--span-sm-20 { flex: 0 0 83.33333333%; } .var-col--offset-sm-20 { margin-left: 83.33333333%; } .var-col--span-sm-21 { flex: 0 0 87.5%; } .var-col--offset-sm-21 { margin-left: 87.5%; } .var-col--span-sm-22 { flex: 0 0 91.66666667%; } .var-col--offset-sm-22 { margin-left: 91.66666667%; } .var-col--span-sm-23 { flex: 0 0 95.83333333%; } .var-col--offset-sm-23 { margin-left: 95.83333333%; } .var-col--span-sm-24 { flex: 0 0 100%; } .var-col--offset-sm-24 { margin-left: 100%; }}@media only screen and (min-width: 992px) and (max-width: 1199px) { .var-col--span-md-1 { flex: 0 0 4.16666667%; } .var-col--offset-md-1 { margin-left: 4.16666667%; } .var-col--span-md-2 { flex: 0 0 8.33333333%; } .var-col--offset-md-2 { margin-left: 8.33333333%; } .var-col--span-md-3 { flex: 0 0 12.5%; } .var-col--offset-md-3 { margin-left: 12.5%; } .var-col--span-md-4 { flex: 0 0 16.66666667%; } .var-col--offset-md-4 { margin-left: 16.66666667%; } .var-col--span-md-5 { flex: 0 0 20.83333333%; } .var-col--offset-md-5 { margin-left: 20.83333333%; } .var-col--span-md-6 { flex: 0 0 25%; } .var-col--offset-md-6 { margin-left: 25%; } .var-col--span-md-7 { flex: 0 0 29.16666667%; } .var-col--offset-md-7 { margin-left: 29.16666667%; } .var-col--span-md-8 { flex: 0 0 33.33333333%; } .var-col--offset-md-8 { margin-left: 33.33333333%; } .var-col--span-md-9 { flex: 0 0 37.5%; } .var-col--offset-md-9 { margin-left: 37.5%; } .var-col--span-md-10 { flex: 0 0 41.66666667%; } .var-col--offset-md-10 { margin-left: 41.66666667%; } .var-col--span-md-11 { flex: 0 0 45.83333333%; } .var-col--offset-md-11 { margin-left: 45.83333333%; } .var-col--span-md-12 { flex: 0 0 50%; } .var-col--offset-md-12 { margin-left: 50%; } .var-col--span-md-13 { flex: 0 0 54.16666667%; } .var-col--offset-md-13 { margin-left: 54.16666667%; } .var-col--span-md-14 { flex: 0 0 58.33333333%; } .var-col--offset-md-14 { margin-left: 58.33333333%; } .var-col--span-md-15 { flex: 0 0 62.5%; } .var-col--offset-md-15 { margin-left: 62.5%; } .var-col--span-md-16 { flex: 0 0 66.66666667%; } .var-col--offset-md-16 { margin-left: 66.66666667%; } .var-col--span-md-17 { flex: 0 0 70.83333333%; } .var-col--offset-md-17 { margin-left: 70.83333333%; } .var-col--span-md-18 { flex: 0 0 75%; } .var-col--offset-md-18 { margin-left: 75%; } .var-col--span-md-19 { flex: 0 0 79.16666667%; } .var-col--offset-md-19 { margin-left: 79.16666667%; } .var-col--span-md-20 { flex: 0 0 83.33333333%; } .var-col--offset-md-20 { margin-left: 83.33333333%; } .var-col--span-md-21 { flex: 0 0 87.5%; } .var-col--offset-md-21 { margin-left: 87.5%; } .var-col--span-md-22 { flex: 0 0 91.66666667%; } .var-col--offset-md-22 { margin-left: 91.66666667%; } .var-col--span-md-23 { flex: 0 0 95.83333333%; } .var-col--offset-md-23 { margin-left: 95.83333333%; } .var-col--span-md-24 { flex: 0 0 100%; } .var-col--offset-md-24 { margin-left: 100%; }}@media only screen and (min-width: 1200px) and (max-width: 1919px) { .var-col--span-lg-1 { flex: 0 0 4.16666667%; } .var-col--offset-lg-1 { margin-left: 4.16666667%; } .var-col--span-lg-2 { flex: 0 0 8.33333333%; } .var-col--offset-lg-2 { margin-left: 8.33333333%; } .var-col--span-lg-3 { flex: 0 0 12.5%; } .var-col--offset-lg-3 { margin-left: 12.5%; } .var-col--span-lg-4 { flex: 0 0 16.66666667%; } .var-col--offset-lg-4 { margin-left: 16.66666667%; } .var-col--span-lg-5 { flex: 0 0 20.83333333%; } .var-col--offset-lg-5 { margin-left: 20.83333333%; } .var-col--span-lg-6 { flex: 0 0 25%; } .var-col--offset-lg-6 { margin-left: 25%; } .var-col--span-lg-7 { flex: 0 0 29.16666667%; } .var-col--offset-lg-7 { margin-left: 29.16666667%; } .var-col--span-lg-8 { flex: 0 0 33.33333333%; } .var-col--offset-lg-8 { margin-left: 33.33333333%; } .var-col--span-lg-9 { flex: 0 0 37.5%; } .var-col--offset-lg-9 { margin-left: 37.5%; } .var-col--span-lg-10 { flex: 0 0 41.66666667%; } .var-col--offset-lg-10 { margin-left: 41.66666667%; } .var-col--span-lg-11 { flex: 0 0 45.83333333%; } .var-col--offset-lg-11 { margin-left: 45.83333333%; } .var-col--span-lg-12 { flex: 0 0 50%; } .var-col--offset-lg-12 { margin-left: 50%; } .var-col--span-lg-13 { flex: 0 0 54.16666667%; } .var-col--offset-lg-13 { margin-left: 54.16666667%; } .var-col--span-lg-14 { flex: 0 0 58.33333333%; } .var-col--offset-lg-14 { margin-left: 58.33333333%; } .var-col--span-lg-15 { flex: 0 0 62.5%; } .var-col--offset-lg-15 { margin-left: 62.5%; } .var-col--span-lg-16 { flex: 0 0 66.66666667%; } .var-col--offset-lg-16 { margin-left: 66.66666667%; } .var-col--span-lg-17 { flex: 0 0 70.83333333%; } .var-col--offset-lg-17 { margin-left: 70.83333333%; } .var-col--span-lg-18 { flex: 0 0 75%; } .var-col--offset-lg-18 { margin-left: 75%; } .var-col--span-lg-19 { flex: 0 0 79.16666667%; } .var-col--offset-lg-19 { margin-left: 79.16666667%; } .var-col--span-lg-20 { flex: 0 0 83.33333333%; } .var-col--offset-lg-20 { margin-left: 83.33333333%; } .var-col--span-lg-21 { flex: 0 0 87.5%; } .var-col--offset-lg-21 { margin-left: 87.5%; } .var-col--span-lg-22 { flex: 0 0 91.66666667%; } .var-col--offset-lg-22 { margin-left: 91.66666667%; } .var-col--span-lg-23 { flex: 0 0 95.83333333%; } .var-col--offset-lg-23 { margin-left: 95.83333333%; } .var-col--span-lg-24 { flex: 0 0 100%; } .var-col--offset-lg-24 { margin-left: 100%; }}@media only screen and (min-width: 1920px) { .var-col--span-xl-1 { flex: 0 0 4.16666667%; } .var-col--offset-xl-1 { margin-left: 4.16666667%; } .var-col--span-xl-2 { flex: 0 0 8.33333333%; } .var-col--offset-xl-2 { margin-left: 8.33333333%; } .var-col--span-xl-3 { flex: 0 0 12.5%; } .var-col--offset-xl-3 { margin-left: 12.5%; } .var-col--span-xl-4 { flex: 0 0 16.66666667%; } .var-col--offset-xl-4 { margin-left: 16.66666667%; } .var-col--span-xl-5 { flex: 0 0 20.83333333%; } .var-col--offset-xl-5 { margin-left: 20.83333333%; } .var-col--span-xl-6 { flex: 0 0 25%; } .var-col--offset-xl-6 { margin-left: 25%; } .var-col--span-xl-7 { flex: 0 0 29.16666667%; } .var-col--offset-xl-7 { margin-left: 29.16666667%; } .var-col--span-xl-8 { flex: 0 0 33.33333333%; } .var-col--offset-xl-8 { margin-left: 33.33333333%; } .var-col--span-xl-9 { flex: 0 0 37.5%; } .var-col--offset-xl-9 { margin-left: 37.5%; } .var-col--span-xl-10 { flex: 0 0 41.66666667%; } .var-col--offset-xl-10 { margin-left: 41.66666667%; } .var-col--span-xl-11 { flex: 0 0 45.83333333%; } .var-col--offset-xl-11 { margin-left: 45.83333333%; } .var-col--span-xl-12 { flex: 0 0 50%; } .var-col--offset-xl-12 { margin-left: 50%; } .var-col--span-xl-13 { flex: 0 0 54.16666667%; } .var-col--offset-xl-13 { margin-left: 54.16666667%; } .var-col--span-xl-14 { flex: 0 0 58.33333333%; } .var-col--offset-xl-14 { margin-left: 58.33333333%; } .var-col--span-xl-15 { flex: 0 0 62.5%; } .var-col--offset-xl-15 { margin-left: 62.5%; } .var-col--span-xl-16 { flex: 0 0 66.66666667%; } .var-col--offset-xl-16 { margin-left: 66.66666667%; } .var-col--span-xl-17 { flex: 0 0 70.83333333%; } .var-col--offset-xl-17 { margin-left: 70.83333333%; } .var-col--span-xl-18 { flex: 0 0 75%; } .var-col--offset-xl-18 { margin-left: 75%; } .var-col--span-xl-19 { flex: 0 0 79.16666667%; } .var-col--offset-xl-19 { margin-left: 79.16666667%; } .var-col--span-xl-20 { flex: 0 0 83.33333333%; } .var-col--offset-xl-20 { margin-left: 83.33333333%; } .var-col--span-xl-21 { flex: 0 0 87.5%; } .var-col--offset-xl-21 { margin-left: 87.5%; } .var-col--span-xl-22 { flex: 0 0 91.66666667%; } .var-col--offset-xl-22 { margin-left: 91.66666667%; } .var-col--span-xl-23 { flex: 0 0 95.83333333%; } .var-col--offset-xl-23 { margin-left: 95.83333333%; } .var-col--span-xl-24 { flex: 0 0 100%; } .var-col--offset-xl-24 { margin-left: 100%; }}

package/lib/col/col.less

@@ -2,7 +2,7 @@
   transition: all 0.25s;
 }
 
-.create-col(@count, @i) when (@i =< @count) {
+.create-col(@i) when (@i =< 24) {
   .var-col--span-@{i} {
     flex: 0 0 @i * (100% / 24);
   }
@@ -11,7 +11,39 @@
     margin-left: @i * (100% / 24);
   }
 
-  .create-col(@count, @i + 1);
+  .create-col(@i + 1);
 }
 
-.create-col(24, 1);
+.create-responsive-col(@i, @mode) when (@i =< 24) {
+  .var-col--span-@{mode}-@{i} {
+    flex: 0 0 @i * (100% / 24);
+  }
+
+  .var-col--offset-@{mode}-@{i} {
+    margin-left: @i * (100% / 24);
+  }
+
+  .create-responsive-col(@i + 1,@mode);
+}
+
+.create-col(1);
+
+@media only screen and (max-width: 767px) {
+  .create-responsive-col(1, xs);
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .create-responsive-col(1, sm);
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .create-responsive-col(1, md);
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+  .create-responsive-col(1, lg);
+}
+
+@media only screen and (min-width: 1920px) {
+  .create-responsive-col(1, xl);
+}