@varlet/ui 2.8.3 → 2.8.4-alpha.1677149602351

package/es/avatar-group/avatarGroup.css

@@ -1 +1 @@
-:root { --avatar-group-offset: -10px;}.var-avatar-group { display: inline-flex; flex-wrap: wrap;}.var-avatar-group--row { margin-left: calc(var(--avatar-group-offset) * -1);}.var-avatar-group--row > * { margin-left: var(--avatar-group-offset);}.var-avatar-group--column { flex-direction: column; margin-top: calc(var(--avatar-group-offset) * -1);}.var-avatar-group--column > * { margin-top: var(--avatar-group-offset);}
+:root { --avatar-group-offset: -10px;}.var-avatar-group { display: inline-flex; flex-wrap: wrap;}.var-avatar-group--row { margin-left: calc(var(--avatar-group-offset) * -1);}.var-avatar-group--row .var-avatar { margin-left: var(--avatar-group-offset);}.var-avatar-group--column { flex-direction: column; margin-top: calc(var(--avatar-group-offset) * -1);}.var-avatar-group--column .var-avatar { margin-top: var(--avatar-group-offset);}

package/es/button-group/buttonGroup.css

@@ -1 +1 @@
-.var-button-group { display: inline-flex; border-radius: var(--button-border-radius); max-width: 100%; overflow: auto;}.var-button-group > .var-button:active { box-shadow: none;}.var-button-group--horizontal > .var-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0;}.var-button-group--horizontal > .var-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0;}.var-button-group--horizontal > .var-button:not(:first-child):not(:last-child) { border-radius: 0;}.var-button-group--horizontal.var-button-group--mode-text > .var-button { border-right: thin solid currentColor;}.var-button-group--horizontal.var-button-group--mode-text > .var-button:last-child { border: none;}.var-button-group--horizontal.var-button-group--mode-outline > .var-button:not(:first-child) { border-left: none;}.var-button-group--vertical { flex-direction: column;}.var-button-group--vertical > .var-button:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}.var-button-group--vertical > .var-button:last-child { border-top-left-radius: 0; border-top-right-radius: 0;}.var-button-group--vertical > .var-button:not(:first-child):not(:last-child) { border-radius: 0;}.var-button-group--vertical.var-button-group--mode-text > .var-button { border-bottom: thin solid currentColor;}.var-button-group--vertical.var-button-group--mode-text > .var-button:last-child { border: none;}.var-button-group--vertical.var-button-group--mode-outline > .var-button:not(:first-child) { border-top: none;}
+.var-button-group { display: inline-flex; border-radius: var(--button-border-radius); max-width: 100%; overflow: auto;}.var-button-group .var-button:active { box-shadow: none;}.var-button-group--horizontal .var-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0;}.var-button-group--horizontal .var-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0;}.var-button-group--horizontal .var-button:not(:first-child):not(:last-child) { border-radius: 0;}.var-button-group--horizontal.var-button-group--mode-text .var-button { border-right: thin solid currentColor;}.var-button-group--horizontal.var-button-group--mode-text .var-button:last-child { border: none;}.var-button-group--horizontal.var-button-group--mode-outline .var-button:not(:first-child) { border-left: none;}.var-button-group--vertical { flex-direction: column;}.var-button-group--vertical .var-button:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}.var-button-group--vertical .var-button:last-child { border-top-left-radius: 0; border-top-right-radius: 0;}.var-button-group--vertical .var-button:not(:first-child):not(:last-child) { border-radius: 0;}.var-button-group--vertical.var-button-group--mode-text .var-button { border-bottom: thin solid currentColor;}.var-button-group--vertical.var-button-group--mode-text .var-button:last-child { border: none;}.var-button-group--vertical.var-button-group--mode-outline .var-button:not(:first-child) { border-top: none;}

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.3'
+const version = '2.8.4-alpha.1677149602351'
 
 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.3'
+const version = '2.8.4-alpha.1677149602351'
 
 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

@@ -169,6 +169,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 +247,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 +264,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 +307,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 +378,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/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;}