@varlet/ui 2.8.4-alpha.1676992435486 → 2.8.4-alpha.1677149827451

package/es/hover/index.mjs

@@ -0,0 +1,154 @@
+import { isFunction, camelize } from '@varlet/shared';
+
+function shouldDisabled(arg) {
+  if (!arg) {
+    return false;
+  }
+
+  var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+  if (arg === 'desktop' && isMobile) {
+    return true;
+  }
+
+  if (arg === 'mobile' && !isMobile) {
+    return true;
+  }
+
+  return false;
+}
+
+function getStyle(element) {
+  var style = element.getAttribute('style');
+  if (!style) return {};
+  return style.split(';').filter(Boolean).reduce((style, item) => {
+    var [key, value] = item.split(':').map(item => item.trim());
+    style[camelize(key)] = value;
+    return style;
+  }, {});
+}
+
+function updateRawStyle(element) {
+  var {
+    value
+  } = element._hover;
+  var style = getStyle(element);
+  Object.keys(value).forEach(key => {
+    var camelizedKey = camelize(key);
+    var styleValue = value[camelizedKey];
+
+    if (styleValue != null && style[camelizedKey]) {
+      element._hover.rawStyle[camelizedKey] = style[camelizedKey];
+    }
+  });
+}
+
+function updateStyle(element, styleValue) {
+  Object.keys(styleValue).forEach(key => {
+    var value = styleValue[key];
+
+    if (value != null) {
+      element.style[key] = value;
+    }
+  });
+}
+
+function clearStyle(element) {
+  Object.keys(element._hover.value).forEach(key => {
+    element.style[key] = '';
+  });
+}
+
+function restoreStyle(element) {
+  clearStyle(element);
+  updateStyle(element, element._hover.rawStyle);
+  element._hover.rawStyle = {};
+}
+
+function createHover() {
+  var {
+    value
+  } = this._hover;
+  this._hover.hovering = true;
+
+  if (isFunction(value)) {
+    value(this._hover.hovering);
+    return;
+  }
+
+  updateStyle(this, value);
+}
+
+function removeHover() {
+  this._hover.hovering = false;
+
+  if (isFunction(this._hover.value)) {
+    this._hover.value(this._hover.hovering);
+
+    return;
+  }
+
+  restoreStyle(this);
+}
+
+function mounted(element, binding) {
+  var _element$_hover$hover, _element$_hover;
+
+  var {
+    arg,
+    value
+  } = binding;
+
+  if (shouldDisabled(arg)) {
+    return;
+  }
+
+  element._hover = {
+    value,
+    hovering: (_element$_hover$hover = (_element$_hover = element._hover) == null ? void 0 : _element$_hover.hovering) != null ? _element$_hover$hover : false,
+    rawStyle: {}
+  };
+  updateRawStyle(element);
+  element.addEventListener('mouseenter', createHover);
+  element.addEventListener('mouseleave', removeHover);
+}
+
+function unmounted(element, binding) {
+  if (shouldDisabled(binding.arg)) {
+    return;
+  }
+
+  restoreStyle(element);
+  element.removeEventListener('mouseenter', createHover);
+  element.removeEventListener('mouseleave', removeHover);
+}
+
+function beforeUpdate(element, binding) {
+  unmounted(element, binding);
+}
+
+function shouldUpdateStyle(element, binding) {
+  return !isFunction(binding.value) && element._hover.hovering;
+}
+
+function updated(element, binding) {
+  mounted(element, binding);
+
+  if (shouldUpdateStyle(element, binding)) {
+    updateStyle(element, binding.value);
+  }
+}
+
+var Hover = {
+  mounted,
+  unmounted,
+  beforeUpdate,
+  updated,
+
+  install(app) {
+    app.directive('hover', this);
+  }
+
+};
+export var _HoverComponent = Hover;
+export default Hover;

package/es/index.bundle.mjs

@@ -27,6 +27,7 @@ import Divider from './divider/index.mjs'
 import Ellipsis from './ellipsis/index.mjs'
 import Form from './form/index.mjs'
 import FormDetails from './form-details/index.mjs'
+import Hover from './hover/index.mjs'
 import Icon from './icon/index.mjs'
 import Image from './image/index.mjs'
 import ImagePreview from './image-preview/index.mjs'
@@ -105,6 +106,7 @@ export * from './divider/index.mjs'
 export * from './ellipsis/index.mjs'
 export * from './form/index.mjs'
 export * from './form-details/index.mjs'
+export * from './hover/index.mjs'
 export * from './icon/index.mjs'
 export * from './image/index.mjs'
 export * from './image-preview/index.mjs'
@@ -183,6 +185,7 @@ import './divider/style/index.mjs'
 import './ellipsis/style/index.mjs'
 import './form/style/index.mjs'
 import './form-details/style/index.mjs'
+import './hover/style/index.mjs'
 import './icon/style/index.mjs'
 import './image/style/index.mjs'
 import './image-preview/style/index.mjs'
@@ -232,7 +235,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.8.4-alpha.1676992435486'
+const version = '2.8.4-alpha.1677149827451'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -264,6 +267,7 @@ function install(app) {
   Ellipsis.install && app.use(Ellipsis)
   Form.install && app.use(Form)
   FormDetails.install && app.use(FormDetails)
+  Hover.install && app.use(Hover)
   Icon.install && app.use(Icon)
   Image.install && app.use(Image)
   ImagePreview.install && app.use(ImagePreview)
@@ -346,6 +350,7 @@ export {
   Ellipsis,
   Form,
   FormDetails,
+  Hover,
   Icon,
   Image,
   ImagePreview,
@@ -428,6 +433,7 @@ export default {
   Ellipsis,
   Form,
   FormDetails,
+  Hover,
   Icon,
   Image,
   ImagePreview,

package/es/index.mjs

@@ -27,6 +27,7 @@ import Divider from './divider/index.mjs'
 import Ellipsis from './ellipsis/index.mjs'
 import Form from './form/index.mjs'
 import FormDetails from './form-details/index.mjs'
+import Hover from './hover/index.mjs'
 import Icon from './icon/index.mjs'
 import Image from './image/index.mjs'
 import ImagePreview from './image-preview/index.mjs'
@@ -105,6 +106,7 @@ export * from './divider/index.mjs'
 export * from './ellipsis/index.mjs'
 export * from './form/index.mjs'
 export * from './form-details/index.mjs'
+export * from './hover/index.mjs'
 export * from './icon/index.mjs'
 export * from './image/index.mjs'
 export * from './image-preview/index.mjs'
@@ -154,7 +156,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.8.4-alpha.1676992435486'
+const version = '2.8.4-alpha.1677149827451'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -186,6 +188,7 @@ function install(app) {
   Ellipsis.install && app.use(Ellipsis)
   Form.install && app.use(Form)
   FormDetails.install && app.use(FormDetails)
+  Hover.install && app.use(Hover)
   Icon.install && app.use(Icon)
   Image.install && app.use(Image)
   ImagePreview.install && app.use(ImagePreview)
@@ -268,6 +271,7 @@ export {
   Ellipsis,
   Form,
   FormDetails,
+  Hover,
   Icon,
   Image,
   ImagePreview,
@@ -350,6 +354,7 @@ export default {
   Ellipsis,
   Form,
   FormDetails,
+  Hover,
   Icon,
   Image,
   ImagePreview,

package/es/input/Input.mjs

@@ -124,7 +124,6 @@ function __render__(_ctx, _cache) {
     class: _normalizeClass(_ctx.n('clear-icon')),
     "var-input-cover": "",
     name: "close-circle",
-    size: "14px",
     onClick: _ctx.handleClear
   }, null, 8
   /* PROPS */
@@ -169,6 +168,13 @@ var __sfc__ = defineComponent({
     var id = ref("var-input-" + getCurrentInstance().uid);
     var el = ref(null);
     var isFocus = ref(false);
+    var type = computed(() => {
+      if (props.type === 'number') {
+        return 'text';
+      }
+
+      return props.type;
+    });
     var maxlengthText = computed(() => {
       var {
         maxlength,
@@ -240,6 +246,11 @@ var __sfc__ = defineComponent({
       var {
         value
       } = target;
+
+      if (props.type === 'number') {
+        value = formatNumber(value);
+      }
+
       value = withMaxlength(withTrim(value));
       target.value = value;
       call(props['onUpdate:modelValue'], value);
@@ -252,6 +263,12 @@ var __sfc__ = defineComponent({
       var {
         value
       } = target;
+
+      if (props.type === 'number') {
+        value = toNumber(value).toString();
+        call(props['onUpdate:modelValue'], value);
+      }
+
       value = withMaxlength(withTrim(value));
       target.value = value;
       call(props.onChange, value, e);
@@ -289,6 +306,21 @@ var __sfc__ = defineComponent({
       validateWithTrigger('onClick');
     };
 
+    var formatNumber = value => {
+      var minusIndex = value.indexOf('-');
+      var dotIndex = value.indexOf('.');
+
+      if (minusIndex > -1) {
+        value = minusIndex === 0 ? '-' + value.replace(/-/g, '') : value.replace(/-/g, '');
+      }
+
+      if (dotIndex > -1) {
+        value = value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, '');
+      }
+
+      return value.replace(/[^-0-9.]/g, '');
+    };
+
     var withTrim = value => props.modelModifiers.trim ? value.trim() : value;
 
     var withMaxlength = value => props.maxlength ? value.slice(0, toNumber(props.maxlength)) : value;
@@ -345,6 +377,7 @@ var __sfc__ = defineComponent({
       id,
       isFocus,
       errorMessage,
+      type,
       maxlengthText,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,

package/es/input/input.css

@@ -1 +1 @@
-:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-text-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color); overflow: hidden;}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition: top 0.3s, transform 0.3s, width 0.3s, color 0.25s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color); cursor: inherit;}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; width: 100%; transform-origin: left; transition: transform 0.3s, width 0.3s, color 0.25s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color); cursor: inherit;}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color); transition: color 0.25s; font: inherit;}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color); transition: background-color 0.25s;}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { color: var(--input-disabled-color); cursor: not-allowed;}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}
+:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-text-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color); overflow: hidden;}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition: top 0.3s, transform 0.3s, width 0.3s, color 0.25s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color); cursor: inherit;}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; width: 100%; transform-origin: left; transition: transform 0.3s, width 0.3s, color 0.25s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color); cursor: inherit;}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color); transition: color 0.25s; font: inherit;}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color); transition: background-color 0.25s;}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-input__clear-icon[var-input-cover] { display: flex; font-size: 15px; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { color: var(--input-disabled-color); cursor: not-allowed;}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}

package/es/space/space.css

@@ -1 +1 @@
-:root { --space-size-mini-y: 4px; --space-size-mini-x: 4px; --space-size-small-y: 6px; --space-size-small-x: 6px; --space-size-normal-y: 8px; --space-size-normal-x: 12px; --space-size-large-y: 12px; --space-size-large-x: 20px;}.var-space { display: flex;}.var-space--line { display: inline-flex;}
+:root { --space-size-mini-y: 4px; --space-size-mini-x: 4px; --space-size-small-y: 6px; --space-size-small-x: 6px; --space-size-normal-y: 8px; --space-size-normal-x: 12px; --space-size-large-y: 12px; --space-size-large-x: 20px;}.var-space { display: flex;}.var-space--inline { display: inline-flex;}