@varlet/ui 1.27.7 → 1.27.8-alpha.1651665460392

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/es/col/Col.js +6 -6
  2. package/es/col/col.css +1 -1
  3. package/es/col/col.less +27 -2
  4. package/es/picker/Picker.js +8 -6
  5. package/es/picker/props.js +4 -0
  6. package/es/style.css +1 -1
  7. package/es/varlet.esm.js +18 -12
  8. package/highlight/attributes.json +4 -0
  9. package/highlight/tags.json +1 -0
  10. package/highlight/web-types.json +10 -1
  11. package/lib/col/Col.js +6 -6
  12. package/lib/col/col.css +1 -1
  13. package/lib/col/col.less +27 -2
  14. package/lib/picker/Picker.js +8 -6
  15. package/lib/picker/props.js +4 -0
  16. package/lib/style.css +1 -1
  17. package/package.json +4 -4
  18. package/types/picker.d.ts +2 -0
  19. package/umd/varlet.js +4 -4
package/es/col/Col.js CHANGED
@@ -11,7 +11,7 @@ var {
11
11
  import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
12
12
  export function render(_ctx, _cache) {
13
13
  return _openBlock(), _createElementBlock("div", {
14
- 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))),
14
+ 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))),
15
15
  style: _normalizeStyle({
16
16
  paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
17
17
  paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
@@ -49,19 +49,19 @@ export default defineComponent({
49
49
  var getSize = (mode, size) => {
50
50
  var classes = [];
51
51
 
52
- if (!size) {
52
+ if (size == null) {
53
53
  return classes;
54
54
  }
55
55
 
56
56
  if (isPlainObject(size)) {
57
57
  var {
58
- span: _span,
59
- offset: _offset
58
+ offset: _offset,
59
+ span: _span
60
60
  } = size;
61
- _span && classes.push(n("--span-" + mode + "-" + _span));
61
+ Number(_span) >= 0 && classes.push(n("--span-" + mode + "-" + _span));
62
62
  _offset && classes.push(n("--offset-" + mode + "-" + _offset));
63
63
  } else {
64
- classes.push(n("--span-" + mode + "-" + size));
64
+ Number(size) >= 0 && classes.push(n("--span-" + mode + "-" + size));
65
65
  }
66
66
 
67
67
  return classes;
package/es/col/col.css CHANGED
@@ -1 +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%; }}
1
+ .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/es/col/col.less CHANGED
@@ -1,5 +1,10 @@
1
1
  .var-col {
2
2
  transition: all 0.25s;
3
+ display: flex !important;
4
+
5
+ &--span-0 {
6
+ display: none !important;
7
+ }
3
8
  }
4
9
 
5
10
  .create-col(@i) when (@i =< 24) {
@@ -23,27 +28,47 @@
23
28
  margin-left: @i * (100% / 24);
24
29
  }
25
30
 
26
- .create-responsive-col(@i + 1,@mode);
31
+ .create-responsive-col(@i + 1, @mode);
27
32
  }
28
33
 
29
34
  .create-col(1);
30
35
 
31
36
  @media only screen and (max-width: 767px) {
32
37
  .create-responsive-col(1, xs);
38
+
39
+ .var-col--span-xs-0 {
40
+ display: none !important;
41
+ }
33
42
  }
34
43
 
35
44
  @media only screen and (min-width: 768px) and (max-width: 991px) {
36
45
  .create-responsive-col(1, sm);
46
+
47
+ .var-col--span-sm-0 {
48
+ display: none !important;
49
+ }
37
50
  }
38
51
 
39
52
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
40
53
  .create-responsive-col(1, md);
54
+
55
+ .var-col--span-md-0 {
56
+ display: none !important;
57
+ }
41
58
  }
42
59
 
43
60
  @media only screen and (min-width: 1200px) and (max-width: 1919px) {
44
61
  .create-responsive-col(1, lg);
62
+
63
+ .var-col--span-lg-0 {
64
+ display: none !important;
65
+ }
45
66
  }
46
67
 
47
68
  @media only screen and (min-width: 1920px) {
48
- .create-responsive-col(1, xl);
69
+ .create-responsive-col(0, xl);
70
+
71
+ .var-col--span-xl-0 {
72
+ display: none !important;
73
+ }
49
74
  }
package/es/picker/Picker.js CHANGED
@@ -109,7 +109,7 @@ export function render(_ctx, _cache) {
109
109
  key: t
110
110
  }, [_createElementVNode("div", {
111
111
  class: _normalizeClass(_ctx.n('text'))
112
- }, _toDisplayString(t), 3
112
+ }, _toDisplayString(_ctx.textFormatter(t, c.columnIndex)), 3
113
113
  /* TEXT, CLASS */
114
114
  )], 6
115
115
  /* CLASS, STYLE */
@@ -277,7 +277,7 @@ export default defineComponent({
277
277
  };
278
278
 
279
279
  var normalizeNormalColumns = normalColumns => {
280
- return normalColumns.map(column => {
280
+ return normalColumns.map((column, columnIndex) => {
281
281
  var _normalColumn$initial;
282
282
 
283
283
  var normalColumn = isArray(column) ? {
@@ -290,6 +290,7 @@ export default defineComponent({
290
290
  touching: false,
291
291
  translate: center.value,
292
292
  index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
293
+ columnIndex,
293
294
  duration: 0,
294
295
  momentumTime: 0,
295
296
  column: normalColumn,
@@ -303,11 +304,11 @@ export default defineComponent({
303
304
 
304
305
  var normalizeCascadeColumns = cascadeColumns => {
305
306
  var scrollColumns = [];
306
- createChildren(scrollColumns, cascadeColumns, true);
307
+ createChildren(scrollColumns, cascadeColumns, 0, true);
307
308
  return scrollColumns;
308
309
  };
309
310
 
310
- var createChildren = function (scrollColumns, children, initial) {
311
+ var createChildren = function (scrollColumns, children, columnIndex, initial) {
311
312
  if (initial === void 0) {
312
313
  initial = false;
313
314
  }
@@ -323,6 +324,7 @@ export default defineComponent({
323
324
  touching: false,
324
325
  translate: center.value,
325
326
  index,
327
+ columnIndex,
326
328
  duration: 0,
327
329
  momentumTime: 0,
328
330
  column: {
@@ -334,13 +336,13 @@ export default defineComponent({
334
336
  };
335
337
  scrollColumns.push(scrollColumn);
336
338
  scrollTo(scrollColumn, scrollColumn.index, 0, true);
337
- createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, initial);
339
+ createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, columnIndex + 1, initial);
338
340
  }
339
341
  };
340
342
 
341
343
  var rebuildChildren = scrollColumn => {
342
344
  scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
343
- createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children);
345
+ createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children, scrollColumn.columnIndex + 1);
344
346
  };
345
347
 
346
348
  var change = scrollColumn => {
package/es/picker/props.js CHANGED
@@ -59,5 +59,9 @@ export var props = _extends({
59
59
  },
60
60
  onCancel: {
61
61
  type: Function
62
+ },
63
+ textFormatter: {
64
+ type: Function,
65
+ default: text => text
62
66
  }
63
67
  }, pickProps(popupProps, ['show', 'onUpdate:show', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', 'onRouteChange']));