@varlet/ui 3.16.0 → 3.16.1

package/es/index.bundle.mjs

@@ -286,7 +286,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.16.0'
+const version = '3.16.1'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -190,7 +190,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.16.0'
+const version = '3.16.1'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/otp-input/OtpInput.mjs

@@ -17,7 +17,7 @@ function __render__(_ctx, _cache) {
     "div",
     {
       ref: "rootEl",
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--align-${_ctx.align}`))),
       style: _normalizeStyle({
         "--otp-input-gutter": _ctx.gutterStyle,
         "--otp-input-cell-height": _ctx.cellHeightStyle,
@@ -398,6 +398,7 @@ const __sfc__ = defineComponent({
       cellMaxWidthStyle,
       resolvedInputmode,
       nativeInputType,
+      align: props2.align,
       n,
       classes,
       setInputRef,

package/es/otp-input/otpInput.css

@@ -1 +1 @@
-:root { --otp-input-gutter: 8px; --otp-input-cell-height: 48px; --otp-input-cell-max-width: 48px; --otp-input-input-font-size: 20px;}.var-otp-input { display: inline-flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%;}.var-otp-input__cells { display: flex; align-items: center; justify-content: center; gap: var(--otp-input-gutter); width: 100%; max-width: 100%;}.var-otp-input__cell { flex: 1 1 0; min-width: 0; height: var(--otp-input-cell-height); max-width: var(--otp-input-cell-max-width);}.var-otp-input__separator { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-shrink: 0;}.var-otp-input__details { width: 100%;}.var-otp-input .var-input__input { text-align: center; font-size: var(--otp-input-input-font-size); text-transform: none; height: 100%;}.var-otp-input .var-field-decorator__middle { justify-content: center;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--small.var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--small.var-field-decorator--filled .var-field-decorator__controller { padding-left: 0; padding-right: 0;}.var-otp-input .var-field-decorator--standard .var-field-decorator__controller,.var-otp-input .var-field-decorator--standard .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--standard .var-field-decorator__middle,.var-otp-input .var-field-decorator--standard .var-field-decorator__icon,.var-otp-input .var-field-decorator--standard .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--standard .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle,.var-otp-input .var-field-decorator--outlined .var-field-decorator__icon { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--filled .var-field-decorator__middle,.var-otp-input .var-field-decorator--filled .var-field-decorator__icon,.var-otp-input .var-field-decorator--filled .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--filled .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-input,.var-otp-input .var-field-decorator,.var-otp-input .var-field-decorator__container,.var-otp-input .var-field-decorator__main,.var-otp-input .var-field-decorator__body { height: 100%;}
+:root { --otp-input-gutter: 8px; --otp-input-cell-height: 48px; --otp-input-cell-max-width: 48px; --otp-input-input-font-size: 20px;}.var-otp-input { display: inline-flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%;}.var-otp-input__cells { display: flex; align-items: center; justify-content: center; gap: var(--otp-input-gutter); width: 100%; max-width: 100%;}.var-otp-input__cell { flex: 1 1 0; min-width: 0; height: var(--otp-input-cell-height); max-width: var(--otp-input-cell-max-width);}.var-otp-input__separator { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-shrink: 0;}.var-otp-input__details { width: 100%;}.var-otp-input--align-start .var-otp-input__cells { justify-content: flex-start;}.var-otp-input--align-start .var-otp-input__details,.var-otp-input--align-start .var-otp-input__details .var-form-details__error-message,.var-otp-input--align-start .var-otp-input__details .var-form-details__extra-message { text-align: left;}.var-otp-input--align-center .var-otp-input__cells { justify-content: center;}.var-otp-input--align-center .var-otp-input__details,.var-otp-input--align-center .var-otp-input__details .var-form-details__error-message,.var-otp-input--align-center .var-otp-input__details .var-form-details__extra-message { text-align: center;}.var-otp-input--align-end .var-otp-input__cells { justify-content: flex-end;}.var-otp-input--align-end .var-otp-input__details,.var-otp-input--align-end .var-otp-input__details .var-form-details__error-message,.var-otp-input--align-end .var-otp-input__details .var-form-details__extra-message { text-align: right;}.var-otp-input .var-input__input { text-align: center; font-size: var(--otp-input-input-font-size); text-transform: none; height: 100%;}.var-otp-input .var-field-decorator__middle { justify-content: center;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--small.var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--small.var-field-decorator--filled .var-field-decorator__controller { padding-left: 0; padding-right: 0;}.var-otp-input .var-field-decorator--standard .var-field-decorator__controller,.var-otp-input .var-field-decorator--standard .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--standard .var-field-decorator__middle,.var-otp-input .var-field-decorator--standard .var-field-decorator__icon,.var-otp-input .var-field-decorator--standard .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--standard .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle,.var-otp-input .var-field-decorator--outlined .var-field-decorator__icon { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--filled .var-field-decorator__middle,.var-otp-input .var-field-decorator--filled .var-field-decorator__icon,.var-otp-input .var-field-decorator--filled .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--filled .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-input,.var-otp-input .var-field-decorator,.var-otp-input .var-field-decorator__container,.var-otp-input .var-field-decorator__main,.var-otp-input .var-field-decorator__body { height: 100%;}

package/es/otp-input/props.mjs

@@ -52,6 +52,10 @@ const props = __spreadProps(__spreadValues({
     type: [String, Number],
     default: 8
   },
+  align: {
+    type: String,
+    default: "center"
+  },
   validateTrigger: {
     type: Array,
     default: () => ["onInput", "onComplete"]