@varlet/ui 1.27.7 → 1.27.8-alpha.1651665460392

package/es/varlet.esm.js

@@ -3368,7 +3368,7 @@ var {
 } = createNamespace("col");
 function render$K(_ctx, _cache) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.classes(_ctx.n(), "var--box", [_ctx.span, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._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))),
+    class: normalizeClass(_ctx.classes(_ctx.n(), "var--box", [_ctx.span >= 0, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._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)
@@ -3400,18 +3400,18 @@ var Col = defineComponent({
     };
     var getSize = (mode, size) => {
       var classes2 = [];
-      if (!size) {
+      if (size == null) {
         return classes2;
       }
       if (isPlainObject(size)) {
         var {
-          span: _span,
-          offset: _offset
+          offset: _offset,
+          span: _span
         } = size;
-        _span && classes2.push(n$N("--span-" + mode + "-" + _span));
+        Number(_span) >= 0 && classes2.push(n$N("--span-" + mode + "-" + _span));
         _offset && classes2.push(n$N("--offset-" + mode + "-" + _offset));
       } else {
-        classes2.push(n$N("--span-" + mode + "-" + size));
+        Number(size) >= 0 && classes2.push(n$N("--span-" + mode + "-" + size));
       }
       return classes2;
     };
@@ -11778,6 +11778,10 @@ var props$k = _extends$2({
   },
   onCancel: {
     type: Function
+  },
+  textFormatter: {
+    type: Function,
+    default: (text) => text
   }
 }, pickProps(props$U, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
 var {
@@ -11862,7 +11866,7 @@ function render$m(_ctx, _cache) {
           key: t
         }, [createElementVNode("div", {
           class: normalizeClass(_ctx.n("text"))
-        }, toDisplayString(t), 3)], 6);
+        }, toDisplayString(_ctx.textFormatter(t, c.columnIndex)), 3)], 6);
       }), 128))], 46, _hoisted_2$4)], 42, _hoisted_1$7);
     }), 128)), createElementVNode("div", {
       class: normalizeClass(_ctx.n("picked")),
@@ -11985,7 +11989,7 @@ var VarPicker = defineComponent({
       change(scrollColumn);
     };
     var normalizeNormalColumns = (normalColumns) => {
-      return normalColumns.map((column) => {
+      return normalColumns.map((column, columnIndex) => {
         var _normalColumn$initial;
         var normalColumn = isArray(column) ? {
           texts: column
@@ -11997,6 +12001,7 @@ var VarPicker = defineComponent({
           touching: false,
           translate: center.value,
           index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: normalColumn,
@@ -12009,10 +12014,10 @@ var VarPicker = defineComponent({
     };
     var normalizeCascadeColumns = (cascadeColumns) => {
       var scrollColumns2 = [];
-      createChildren(scrollColumns2, cascadeColumns, true);
+      createChildren(scrollColumns2, cascadeColumns, 0, true);
       return scrollColumns2;
     };
-    var createChildren = function(scrollColumns2, children, initial) {
+    var createChildren = function(scrollColumns2, children, columnIndex, initial) {
       if (initial === void 0) {
         initial = false;
       }
@@ -12026,6 +12031,7 @@ var VarPicker = defineComponent({
           touching: false,
           translate: center.value,
           index,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: {
@@ -12037,12 +12043,12 @@ var VarPicker = defineComponent({
         };
         scrollColumns2.push(scrollColumn);
         scrollTo2(scrollColumn, scrollColumn.index, 0, true);
-        createChildren(scrollColumns2, scrollColumn.columns[scrollColumn.index].children, initial);
+        createChildren(scrollColumns2, scrollColumn.columns[scrollColumn.index].children, columnIndex + 1, initial);
       }
     };
     var rebuildChildren = (scrollColumn) => {
       scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
-      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children);
+      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children, scrollColumn.columnIndex + 1);
     };
     var change = (scrollColumn) => {
       var {

package/highlight/attributes.json

@@ -1039,6 +1039,10 @@
     "type": "number[]",
     "description": "级联模式的初始化索引列表 默认值：-"
   },
+  "var-picker/text-formatter": {
+    "type": "(text: any, columnIndex: number) => any",
+    "description": "文本格式化 默认值：text => text"
+  },
   "var-picker/option-height": {
     "type": "string | number",
     "description": "选项的高度(px rem) 默认值：44"

package/highlight/tags.json

@@ -398,6 +398,7 @@
       "toolbar",
       "cascade",
       "cascade-initial-indexes",
+      "text-formatter",
       "option-height",
       "option-count",
       "confirm-button-text",

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.27.6",
+  "version": "1.27.7",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -3123,6 +3123,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "text-formatter",
+              "description": "文本格式化",
+              "default": "text => text",
+              "value": {
+                "type": "(text: any, columnIndex: number) => any",
+                "kind": "expression"
+              }
+            },
             {
               "name": "option-height",
               "description": "选项的高度(px rem)",

package/lib/col/Col.js

@@ -23,7 +23,7 @@ var {
 
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [_ctx.span, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._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))),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [_ctx.span >= 0, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._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)
@@ -62,19 +62,19 @@ var _default = (0, _vue.defineComponent)({
     var getSize = (mode, size) => {
       var classes = [];
 
-      if (!size) {
+      if (size == null) {
         return classes;
       }
 
       if ((0, _shared.isPlainObject)(size)) {
         var {
-          span: _span,
-          offset: _offset
+          offset: _offset,
+          span: _span
         } = size;
-        _span && classes.push(n("--span-" + mode + "-" + _span));
+        Number(_span) >= 0 && classes.push(n("--span-" + mode + "-" + _span));
         _offset && classes.push(n("--offset-" + mode + "-" + _offset));
       } else {
-        classes.push(n("--span-" + mode + "-" + size));
+        Number(size) >= 0 && classes.push(n("--span-" + mode + "-" + size));
       }
 
       return classes;

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%;}@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%; }}
+.var-col { transition: all 0.25s; display: flex !important;}.var-col--span-0 { display: none !important;}.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%; } .var-col--span-xs-0 { display: none !important; }}@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%; } .var-col--span-sm-0 { display: none !important; }}@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%; } .var-col--span-md-0 { display: none !important; }}@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%; } .var-col--span-lg-0 { display: none !important; }}@media only screen and (min-width: 1920px) { .var-col--span-xl-0 { flex: 0 0 0%; } .var-col--offset-xl-0 { margin-left: 0%; } .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%; } .var-col--span-xl-0 { display: none !important; }}

package/lib/col/col.less

@@ -1,5 +1,10 @@
 .var-col {
   transition: all 0.25s;
+  display: flex !important;
+
+  &--span-0 {
+    display: none !important;
+  }
 }
 
 .create-col(@i) when (@i =< 24) {
@@ -23,27 +28,47 @@
     margin-left: @i * (100% / 24);
   }
 
-  .create-responsive-col(@i + 1,@mode);
+  .create-responsive-col(@i + 1, @mode);
 }
 
 .create-col(1);
 
 @media only screen and (max-width: 767px) {
   .create-responsive-col(1, xs);
+
+  .var-col--span-xs-0 {
+    display: none !important;
+  }
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .create-responsive-col(1, sm);
+
+  .var-col--span-sm-0 {
+    display: none !important;
+  }
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1199px) {
   .create-responsive-col(1, md);
+
+  .var-col--span-md-0 {
+    display: none !important;
+  }
 }
 
 @media only screen and (min-width: 1200px) and (max-width: 1919px) {
   .create-responsive-col(1, lg);
+
+  .var-col--span-lg-0 {
+    display: none !important;
+  }
 }
 
 @media only screen and (min-width: 1920px) {
-  .create-responsive-col(1, xl);
+  .create-responsive-col(0, xl);
+
+  .var-col--span-xl-0 {
+    display: none !important;
+  }
 }

package/lib/picker/Picker.js

@@ -125,7 +125,7 @@ function render(_ctx, _cache) {
           key: t
         }, [(0, _vue.createElementVNode)("div", {
           class: (0, _vue.normalizeClass)(_ctx.n('text'))
-        }, (0, _vue.toDisplayString)(t), 3
+        }, (0, _vue.toDisplayString)(_ctx.textFormatter(t, c.columnIndex)), 3
         /* TEXT, CLASS */
         )], 6
         /* CLASS, STYLE */
@@ -294,7 +294,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var normalizeNormalColumns = normalColumns => {
-      return normalColumns.map(column => {
+      return normalColumns.map((column, columnIndex) => {
         var _normalColumn$initial;
 
         var normalColumn = (0, _shared.isArray)(column) ? {
@@ -307,6 +307,7 @@ var _default = (0, _vue.defineComponent)({
           touching: false,
           translate: center.value,
           index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: normalColumn,
@@ -320,11 +321,11 @@ var _default = (0, _vue.defineComponent)({
 
     var normalizeCascadeColumns = cascadeColumns => {
       var scrollColumns = [];
-      createChildren(scrollColumns, cascadeColumns, true);
+      createChildren(scrollColumns, cascadeColumns, 0, true);
       return scrollColumns;
     };
 
-    var createChildren = function (scrollColumns, children, initial) {
+    var createChildren = function (scrollColumns, children, columnIndex, initial) {
       if (initial === void 0) {
         initial = false;
       }
@@ -340,6 +341,7 @@ var _default = (0, _vue.defineComponent)({
           touching: false,
           translate: center.value,
           index,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: {
@@ -351,13 +353,13 @@ var _default = (0, _vue.defineComponent)({
         };
         scrollColumns.push(scrollColumn);
         scrollTo(scrollColumn, scrollColumn.index, 0, true);
-        createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, initial);
+        createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, columnIndex + 1, initial);
       }
     };
 
     var rebuildChildren = scrollColumn => {
       scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
-      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children);
+      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children, scrollColumn.columnIndex + 1);
     };
 
     var change = scrollColumn => {

package/lib/picker/props.js

@@ -66,6 +66,10 @@ var props = _extends({
   },
   onCancel: {
     type: Function
+  },
+  textFormatter: {
+    type: Function,
+    default: text => text
   }
 }, (0, _components.pickProps)(_props.props, ['show', 'onUpdate:show', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', 'onRouteChange']));