@varlet/ui 2.10.1 → 2.10.2-alpha.1683284670321

package/es/action-sheet/ActionSheet.mjs

@@ -26,13 +26,14 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createBlock(_component_var_popup, _mergeProps({
     class: _ctx.n('popup-radius'),
     position: "bottom",
+    show: _ctx.popupShow,
     overlay: _ctx.overlay,
     "overlay-class": _ctx.overlayClass,
     "overlay-style": _ctx.overlayStyle,
     "lock-scroll": _ctx.lockScroll,
     "close-on-click-overlay": _ctx.closeOnClickOverlay,
     teleport: _ctx.teleport,
-    show: _ctx.popupShow
+    "safe-area": _ctx.safeArea
   }, {
     'onUpdate:show': _ctx.handlePopupUpdateShow
   }, {
@@ -83,7 +84,7 @@ function __render__(_ctx, _cache) {
 
   }, 16
   /* FULL_PROPS */
-  , ["class", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  , ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "safe-area", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
 }
 
 var __sfc__ = defineComponent({

package/es/action-sheet/props.mjs

@@ -20,5 +20,5 @@ export var props = _extends({
   },
   onSelect: defineListenerProp(),
   'onUpdate:show': defineListenerProp()
-}, pickProps(popupProps, ['overlay', 'overlayClass', 'overlayStyle', 'lockScroll', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', // internal for function call closes the dialog
+}, pickProps(popupProps, ['overlay', 'overlayClass', 'overlayStyle', 'lockScroll', 'closeOnClickOverlay', 'safeArea', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', // internal for function call closes the dialog
 'onRouteChange']));

package/es/image-preview/imagePreview.css

@@ -1 +1 @@
-:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 14px; --image-preview-close-icon-right: 14px; --image-preview-extra-top: 14px; --image-preview-extra-left: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { background: transparent;}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100vh;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color); font-size: var(--image-preview-close-icon-size);}.var-image-preview__extra { position: absolute; top: var(--image-preview-extra-top); left: var(--image-preview-extra-left);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; transition: transform 0.2s; background: var(--image-preview-zoom-container-background);}
+:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 14px; --image-preview-close-icon-right: 14px; --image-preview-extra-top: 14px; --image-preview-extra-left: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { height: 100%; background: transparent;}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100%;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color); font-size: var(--image-preview-close-icon-size);}.var-image-preview__extra { position: absolute; top: var(--image-preview-extra-top); left: var(--image-preview-extra-left);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100%; transition: transform 0.2s; background: var(--image-preview-zoom-container-background);}

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.10.1'
+const version = '2.10.2-alpha.1683284670321'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.10.1'
+const version = '2.10.2-alpha.1683284670321'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/input/Input.mjs

@@ -14,9 +14,9 @@ import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalize
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = ["placeholder"];
-var _hoisted_2 = ["id", "disabled", "type", "value", "placeholder", "maxlength", "rows"];
-var _hoisted_3 = ["id", "disabled", "type", "value", "placeholder", "maxlength"];
+var _hoisted_1 = ["placeholder", "enterkeyhint"];
+var _hoisted_2 = ["id", "disabled", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
+var _hoisted_3 = ["id", "disabled", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
 
 function __render__(_ctx, _cache) {
   var _component_var_field_decorator = _resolveComponent("var-field-decorator");
@@ -52,13 +52,14 @@ function __render__(_ctx, _cache) {
   })), {
     "prepend-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "prepend-icon")]),
     "append-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "append-icon")]),
-    default: _withCtx(() => [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", {
+    default: _withCtx(() => [_ctx.normalizedType === 'password' ? (_openBlock(), _createElementBlock("input", {
       key: 0,
       class: _normalizeClass(_ctx.n('autocomplete')),
       placeholder: !_ctx.hint ? _ctx.placeholder : undefined,
       style: _normalizeStyle({
         '--input-placeholder-color': _ctx.placeholderColor
-      })
+      }),
+      enterkeyhint: _ctx.enterkeyhint
     }, null, 14
     /* CLASS, STYLE, PROPS */
     , _hoisted_1)) : _createCommentVNode("v-if", true), _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
@@ -68,11 +69,13 @@ function __render__(_ctx, _cache) {
       autocomplete: "new-password",
       id: _ctx.id,
       disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
-      type: _ctx.type,
+      type: _ctx.normalizedType,
       value: _ctx.modelValue,
       placeholder: !_ctx.hint ? _ctx.placeholder : undefined,
       maxlength: _ctx.maxlength,
       rows: _ctx.rows,
+      enterkeyhint: _ctx.enterkeyhint,
+      inputmode: _ctx.type === 'number' ? 'numeric' : undefined,
       style: _normalizeStyle({
         color: !_ctx.errorMessage ? _ctx.textColor : undefined,
         caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined,
@@ -109,10 +112,12 @@ function __render__(_ctx, _cache) {
       autocomplete: "new-password",
       id: _ctx.id,
       disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
-      type: _ctx.type,
+      type: _ctx.normalizedType,
       value: _ctx.modelValue,
       placeholder: !_ctx.hint ? _ctx.placeholder : undefined,
       maxlength: _ctx.maxlength,
+      enterkeyhint: _ctx.enterkeyhint,
+      inputmode: _ctx.type === 'number' ? 'numeric' : undefined,
       style: _normalizeStyle({
         color: !_ctx.errorMessage ? _ctx.textColor : undefined,
         caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined,
@@ -171,7 +176,7 @@ var __sfc__ = defineComponent({
     var el = ref(null);
     var isFocus = ref(false);
     var isComposing = ref(false);
-    var type = computed(() => {
+    var normalizedType = computed(() => {
       if (props.type === 'number') {
         return 'text';
       }
@@ -411,7 +416,7 @@ var __sfc__ = defineComponent({
       isComposing,
       errorMessage,
       placeholderColor,
-      type,
+      normalizedType,
       cursor,
       maxlengthText,
       formDisabled: form == null ? void 0 : form.disabled,

package/es/input/props.mjs

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import { defineListenerProp, pickProps } from '../utils/components.mjs';
 import { props as fieldDecoratorProps } from '../field-decorator/props.mjs';
 export function typeValidator(type) {
-  return ['text', 'password', 'number'].includes(type);
+  return ['text', 'password', 'number', 'tel', 'email'].includes(type);
 }
 export var props = _extends({
   modelValue: {
@@ -48,6 +48,9 @@ export var props = _extends({
   rules: {
     type: Array
   },
+  enterkeyhint: {
+    type: String
+  },
   onFocus: defineListenerProp(),
   onBlur: defineListenerProp(),
   onInput: defineListenerProp(),

package/es/picker/Picker.mjs

@@ -34,6 +34,7 @@ function __render__(_ctx, _cache) {
     closeOnClickOverlay: _ctx.closeOnClickOverlay,
     teleport: _ctx.teleport,
     show: _ctx.show,
+    safeArea: _ctx.safeArea,
     'onUpdate:show': _ctx.handlePopupUpdateShow,
     position: 'bottom',
     class: _ctx.n('popup')

package/es/picker/props.mjs

@@ -58,4 +58,4 @@ export var props = _extends({
   onChange: defineListenerProp(),
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp()
-}, pickProps(popupProps, ['show', 'onUpdate:show', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', 'onRouteChange']));
+}, pickProps(popupProps, ['show', 'onUpdate:show', 'closeOnClickOverlay', 'teleport', 'safeArea', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', 'onRouteChange']));

package/es/popup/Popup.mjs

@@ -72,7 +72,7 @@ export default defineComponent({
 
     var renderContent = () => {
       return _createVNode("div", _mergeProps({
-        "class": classes(n('content'), n("--" + props.position), [props.defaultStyle, n('--content-background-color')], [props.defaultStyle, n('$-elevation--3')]),
+        "class": classes(n('content'), n("--" + props.position), [props.defaultStyle, n('--content-background-color')], [props.defaultStyle, n('$-elevation--3')], [props.safeArea, n('--safe-area')], [props.safeAreaTop, n('--safe-area-top')]),
         "style": {
           zIndex: zIndex.value
         }

package/es/popup/popup.css

@@ -1 +1 @@
-:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}
+:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}.var-popup--safe-area { padding-bottom: constant(safe-area-inset-top); padding-bottom: env(safe-area-inset-top);}.var-popup--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}

package/es/popup/props.mjs

@@ -39,6 +39,14 @@ export var props = {
     type: Boolean,
     default: true
   },
+  safeArea: {
+    type: Boolean,
+    default: false
+  },
+  safeAreaTop: {
+    type: Boolean,
+    default: false
+  },
   teleport: {
     type: String
   },