@varlet/ui 2.8.5-alpha.1677482594728 → 2.8.5-alpha.1677567613819

package/es/col/Col.mjs

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, watch } from 'vue';
 import { isPlainObject, toNumber } from '@varlet/shared';
 import { props } from './props.mjs';
 import { useRow } from './provide.mjs';
-import { toSizeUnit } from '../utils/elements.mjs';
+import { padStartFlex, toSizeUnit } from '../utils/elements.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 var {
   n,
@@ -15,6 +15,8 @@ function __render__(_ctx, _cache) {
     class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--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({
       flexDirection: _ctx.direction,
+      justifyContent: _ctx.padStartFlex(_ctx.justify),
+      alignItems: _ctx.padStartFlex(_ctx.align),
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
     }),
@@ -86,7 +88,8 @@ var __sfc__ = defineComponent({
       getSize,
       span,
       offset,
-      handleClick
+      handleClick,
+      padStartFlex
     };
   }
 

package/es/col/props.mjs

@@ -4,6 +4,14 @@ function directionValidator(direction) {
   return ['row', 'column'].includes(direction);
 }
 
+function justifyValidator(justify) {
+  return ['start', 'end', 'center', 'space-around', 'space-between', 'flex-start', 'flex-end'].includes(justify);
+}
+
+function alignValidator(align) {
+  return ['stretch', 'center', 'start', 'end', 'baseline', 'initial', 'inherit', 'flex-start', 'flex-end'].includes(align);
+}
+
 export var props = {
   span: {
     type: [String, Number],
@@ -18,6 +26,14 @@ export var props = {
     default: 'row',
     validator: directionValidator
   },
+  justify: {
+    type: String,
+    validator: justifyValidator
+  },
+  align: {
+    type: String,
+    validator: alignValidator
+  },
   xs: {
     type: [Object, Number, String]
   },

package/es/index.bundle.mjs

@@ -235,7 +235,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.8.5-alpha.1677482594728'
+const version = '2.8.5-alpha.1677567613819'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -156,7 +156,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.8.5-alpha.1677482594728'
+const version = '2.8.5-alpha.1677567613819'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/row/Row.mjs

@@ -1,7 +1,7 @@
 import { defineComponent, computed, watch } from 'vue';
 import { props } from './props.mjs';
 import { useCols } from './provide.mjs';
-import { toPxNum } from '../utils/elements.mjs';
+import { toPxNum, padStartFlex } from '../utils/elements.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
 var {
   n,
@@ -13,8 +13,8 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'))),
     style: _normalizeStyle({
-      justifyContent: _ctx.justify,
-      alignItems: _ctx.align,
+      justifyContent: _ctx.padStartFlex(_ctx.justify),
+      alignItems: _ctx.padStartFlex(_ctx.align),
       margin: _ctx.average ? "0 -" + _ctx.average + "px" : undefined
     }),
     onClick: _cache[0] || (_cache[0] = function () {
@@ -63,7 +63,8 @@ var __sfc__ = defineComponent({
       n,
       classes,
       average,
-      handleClick
+      handleClick,
+      padStartFlex
     };
   }
 

package/es/row/props.mjs

@@ -1,11 +1,11 @@
 import { defineListenerProp } from '../utils/components.mjs';
 
 function justifyValidator(justify) {
-  return ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'].includes(justify);
+  return ['flex-start', 'flex-end', 'start', 'end', 'center', 'space-between', 'space-around'].includes(justify);
 }
 
 function alignValidator(align) {
-  return ['flex-start', 'center', 'flex-end'].includes(align);
+  return ['flex-start', 'center', 'flex-end', 'start', 'end'].includes(align);
 }
 
 export var props = {

package/es/space/Space.mjs

@@ -3,7 +3,7 @@ import { defineComponent, Fragment, Comment } from 'vue';
 import { internalSizeValidator, props } from './props.mjs';
 import { isArray } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
-import { toSizeUnit } from '../utils/elements.mjs';
+import { padStartFlex, toSizeUnit } from '../utils/elements.mjs';
 import { computeMargin } from './margin.mjs';
 
 
@@ -24,10 +24,6 @@ export default defineComponent({
       return isInternalSize ? ["var(--space-size-" + size + "-y)", "var(--space-size-" + size + "-x)"] : isArray(size) ? size.map(toSizeUnit) : [toSizeUnit(size), toSizeUnit(size)];
     };
 
-    var padStartFlex = style => {
-      return style === 'start' || style === 'end' ? "flex-" + style : style;
-    };
-
     return () => {
       var _call;
 

package/es/space/margin.mjs

@@ -11,7 +11,7 @@ export function computeMargin(y, x, options) {
   var margin = '0';
 
   if (direction === 'row') {
-    if (justify === 'start' || justify === 'center' || justify === 'end') {
+    if (['flex-start', 'center', 'flex-end', 'start', 'end'].includes(justify)) {
       if (index !== lastIndex) {
         margin = half(y) + " " + x + " " + half(y) + " 0";
       } else {

package/es/space/props.mjs

@@ -5,13 +5,14 @@ export var sizeValidator = size => {
 };
 
 var justifyValidator = justify => {
-  return ['start', 'end', 'center', 'space-around', 'space-between'].includes(justify);
+  return ['start', 'end', 'center', 'space-around', 'space-between', 'flex-start', 'flex-end'].includes(justify);
+};
+
+var alignValidator = align => {
+  return ['stretch', 'center', 'start', 'end', 'baseline', 'flex-start', 'flex-end'].includes(align);
 };
 
 export var props = {
-  align: {
-    type: String
-  },
   size: {
     type: [String, Number, Array],
     default: 'normal',
@@ -27,9 +28,13 @@ export var props = {
   },
   justify: {
     type: String,
-    default: 'start',
+    default: 'flex-start',
     validator: justifyValidator
   },
+  align: {
+    type: String,
+    validator: alignValidator
+  },
   inline: {
     type: Boolean,
     default: false

package/es/step/step.css

@@ -1 +1 @@
-:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-vertical-min-height: 30px; --step-vertical-tag-margin: 0 4px; --step-vertical-line-height: calc(100% - 30px); --step-vertical-line-min-height: 20px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { display: flex; position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step__horizontal { display: flex; width: 100%;}.var-step__horizontal-main { display: flex; flex-direction: column; align-items: center; flex-basis: 100%;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: relative; top: 14px; flex: 1; height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { width: 100%;}.var-step__vertical-main { display: flex; align-items: flex-start; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: relative; height: var(--step-vertical-line-height); left: 14px; top: calc(-100% + 45px); min-height: var(--step-vertical-line-min-height); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}
+:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-vertical-min-height: 30px; --step-vertical-tag-margin: 0 4px; --step-vertical-line-height: calc(100% - 30px); --step-vertical-line-min-height: 20px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { display: flex; position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step__horizontal { display: flex; width: 100%;}.var-step__horizontal-main { display: flex; flex-direction: column; align-items: center; flex-basis: 100%;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: relative; top: 14px; flex: 1; height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { width: 100%;}.var-step__vertical-main { display: flex; align-items: flex-start; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { flex-shrink: 0; margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: relative; height: var(--step-vertical-line-height); left: 14px; top: calc(-100% + 45px); min-height: var(--step-vertical-line-min-height); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}