@varlet/ui 2.8.3 → 2.8.4-alpha.1677149602351

package/lib/varlet.cjs.js

@@ -13,6 +13,7 @@ const isBoolean = (val) => typeof val === "boolean";
 const isNumber = (val) => typeof val === "number";
 const isPlainObject = (val) => Object.prototype.toString.call(val) === "[object Object]";
 const isObject = (val) => typeof val === "object" && val !== null;
+const isFunction = (val) => typeof val === "function";
 const isArray = (val) => Array.isArray(val);
 const isURL = (val) => {
   if (!val) {
@@ -65,6 +66,7 @@ const throttle = (method, mustRunDelay = 200) => {
 };
 const inBrowser = () => typeof window !== "undefined";
 const uniq = (arr) => [...new Set(arr)];
+const camelize = (s) => s.replace(/-(\w)/g, (_, p) => p.toUpperCase());
 const kebabCase = (s) => {
   const ret = s.replace(/([A-Z])/g, " $1").trim();
   return ret.split(" ").join("-").toLowerCase();
@@ -801,7 +803,7 @@ function forbidRippleTask() {
   _ripple.tasker && window.clearTimeout(_ripple.tasker);
   _ripple.tasker = null;
 }
-function mounted$1(el, binding) {
+function mounted$2(el, binding) {
   var _binding$value, _binding$value$touchm, _binding$value2;
   el._ripple = _extends$l({
     tasker: null
@@ -825,14 +827,14 @@ function mounted$1(el, binding) {
     passive: true
   });
 }
-function unmounted(el) {
+function unmounted$1(el) {
   el.removeEventListener("touchstart", createRipple);
   el.removeEventListener("touchmove", forbidRippleTask);
   el.removeEventListener("dragstart", removeRipple);
   document.removeEventListener("touchend", el._ripple.removeRipple);
   document.removeEventListener("touchcancel", el._ripple.removeRipple);
 }
-function updated$1(el, binding) {
+function updated$2(el, binding) {
   var _binding$value$touchm2, _binding$value3, _binding$value4, _binding$value5, _el$_ripple, _el$_ripple2, _el$_ripple3;
   var newBinding = {
     touchmoveForbid: (_binding$value$touchm2 = (_binding$value3 = binding.value) == null ? void 0 : _binding$value3.touchmoveForbid) != null ? _binding$value$touchm2 : Context.touchmoveForbid,
@@ -849,9 +851,9 @@ function updated$1(el, binding) {
   }
 }
 var Ripple = {
-  mounted: mounted$1,
-  unmounted,
-  updated: updated$1,
+  mounted: mounted$2,
+  unmounted: unmounted$1,
+  updated: updated$2,
   install(app) {
     app.directive("ripple", this);
   }
@@ -2135,7 +2137,7 @@ function diff(el, binding) {
   } = el._lazy;
   return src !== binding.value || arg !== binding.arg;
 }
-function mounted(_x3, _x4) {
+function mounted$1(_x3, _x4) {
   return _mounted.apply(this, arguments);
 }
 function _mounted() {
@@ -2145,7 +2147,7 @@ function _mounted() {
   });
   return _mounted.apply(this, arguments);
 }
-function updated(_x5, _x6) {
+function updated$1(_x5, _x6) {
   return _updated.apply(this, arguments);
 }
 function _updated() {
@@ -2154,7 +2156,7 @@ function _updated() {
       lazyElements.includes(el) && (yield check(el));
       return;
     }
-    yield mounted(el, binding);
+    yield mounted$1(el, binding);
   });
   return _updated.apply(this, arguments);
 }
@@ -2178,9 +2180,9 @@ function mergeLazyOptions(lazyOptions) {
   defaultLazyOptions.filter = filter;
 }
 var Lazy = {
-  mounted,
+  mounted: mounted$1,
   unmounted: clear,
-  updated,
+  updated: updated$1,
   install(app, lazyOptions) {
     mergeLazyOptions(lazyOptions);
     checkAllWithThrottle = throttle(checkAll, defaultLazyOptions.throttleWait);
@@ -13208,6 +13210,128 @@ Form.install = function(app) {
 Form.useValidation = useValidation;
 Form.useForm = useForm;
 var _FormComponent = Form;
+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((style2, item) => {
+    var [key, value] = item.split(":").map((item2) => item2.trim());
+    style2[camelize(key)] = value;
+    return style2;
+  }, {});
+}
+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);
+  }
+};
+var _HoverComponent = Hover;
+const Hover$1 = Hover;
 function fitValidator(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
@@ -15260,6 +15384,12 @@ var __sfc__$B = vue.defineComponent({
     var id = vue.ref("var-input-" + vue.getCurrentInstance().uid);
     var el = vue.ref(null);
     var isFocus = vue.ref(false);
+    var type = vue.computed(() => {
+      if (props2.type === "number") {
+        return "text";
+      }
+      return props2.type;
+    });
     var maxlengthText = vue.computed(() => {
       var {
         maxlength,
@@ -15321,6 +15451,9 @@ var __sfc__$B = vue.defineComponent({
       var {
         value
       } = target;
+      if (props2.type === "number") {
+        value = formatNumber(value);
+      }
       value = withMaxlength(withTrim(value));
       target.value = value;
       call(props2["onUpdate:modelValue"], value);
@@ -15332,6 +15465,10 @@ var __sfc__$B = vue.defineComponent({
       var {
         value
       } = target;
+      if (props2.type === "number") {
+        value = toNumber(value).toString();
+        call(props2["onUpdate:modelValue"], value);
+      }
       value = withMaxlength(withTrim(value));
       target.value = value;
       call(props2.onChange, value, e);
@@ -15362,6 +15499,17 @@ var __sfc__$B = vue.defineComponent({
       call(onClick, e);
       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) => props2.modelModifiers.trim ? value.trim() : value;
     var withMaxlength = (value) => props2.maxlength ? value.slice(0, toNumber(props2.maxlength)) : value;
     var handleTouchstart = (e) => {
@@ -15402,6 +15550,7 @@ var __sfc__$B = vue.defineComponent({
       id,
       isFocus,
       errorMessage,
+      type,
       maxlengthText,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
@@ -18522,7 +18671,7 @@ var __sfc__$p = vue.defineComponent({
       validate: v,
       resetValidation
     } = useValidation();
-    var getStyle = (val) => {
+    var getStyle2 = (val) => {
       var {
         count,
         gap
@@ -18615,7 +18764,7 @@ var __sfc__$p = vue.defineComponent({
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
-      getStyle,
+      getStyle: getStyle2,
       getClass,
       getCurrentState,
       handleClick,
@@ -22929,7 +23078,7 @@ var __sfc__$2 = vue.defineComponent({
       }
       return isDisableMinSec(time, true);
     };
-    var getStyle = (index, hour, inner2) => {
+    var getStyle2 = (index, hour, inner2) => {
       var rad = 2 * Math.PI / 12 * index - Math.PI / 2;
       var left2 = 50 * (1 + Math.cos(rad));
       var top2 = 50 * (1 + Math.sin(rad));
@@ -23067,7 +23216,7 @@ var __sfc__$2 = vue.defineComponent({
       isActive,
       isDisable,
       getSize,
-      getStyle,
+      getStyle: getStyle2,
       activeItemIndex
     };
   }
@@ -24209,7 +24358,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.8.3";
+const version = "2.8.4-alpha.1677149602351";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);
@@ -24240,6 +24389,7 @@ function install(app) {
   Ellipsis.install && app.use(Ellipsis);
   Form.install && app.use(Form);
   FormDetails.install && app.use(FormDetails);
+  Hover$1.install && app.use(Hover$1);
   Icon.install && app.use(Icon);
   Image$1.install && app.use(Image$1);
   ImagePreview.install && app.use(ImagePreview);
@@ -24321,6 +24471,7 @@ const index_bundle = {
   Ellipsis,
   Form,
   FormDetails,
+  Hover: Hover$1,
   Icon,
   Image: Image$1,
   ImagePreview,
@@ -24399,6 +24550,7 @@ exports.Divider = Divider;
 exports.Ellipsis = Ellipsis;
 exports.Form = Form;
 exports.FormDetails = FormDetails;
+exports.Hover = Hover$1;
 exports.Icon = Icon;
 exports.Image = Image$1;
 exports.ImagePreview = ImagePreview;
@@ -24478,6 +24630,7 @@ exports._DividerComponent = _DividerComponent;
 exports._EllipsisComponent = _EllipsisComponent;
 exports._FormComponent = _FormComponent;
 exports._FormDetailsComponent = _FormDetailsComponent;
+exports._HoverComponent = _HoverComponent;
 exports._IconComponent = _IconComponent;
 exports._ImageComponent = _ImageComponent;
 exports._ImagePreviewComponent = _ImagePreviewComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.8.3",
+  "version": "2.8.4-alpha.1677149602351",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -46,8 +46,8 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/shared": "2.8.3",
-    "@varlet/icons": "2.8.3"
+    "@varlet/icons": "2.8.4-alpha.1677149602351",
+    "@varlet/shared": "2.8.4-alpha.1677149602351"
   },
   "devDependencies": {
     "@types/jest": "^26.0.15",
@@ -62,8 +62,8 @@
     "typescript": "^4.4.4",
     "vue": "3.2.25",
     "vue-router": "4.0.12",
-    "@varlet/cli": "2.8.3",
-    "@varlet/touch-emulator": "2.8.3"
+    "@varlet/cli": "2.8.4-alpha.1677149602351",
+    "@varlet/touch-emulator": "2.8.4-alpha.1677149602351"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/hover.d.ts

@@ -0,0 +1,8 @@
+import { VarDirective } from './varDirective'
+import { StyleValue } from 'vue'
+
+export type HoverValue = StyleValue | ((hovering: boolean) => void)
+
+export class Hover extends VarDirective<HoverValue> {}
+
+export class _HoverComponent extends Hover {}

package/types/index.d.ts

@@ -31,6 +31,7 @@ export * from './divider'
 export * from './ellipsis'
 export * from './form'
 export * from './formDetails'
+export * from './hover'
 export * from './icon'
 export * from './image'
 export * from './imagePreview'
@@ -112,6 +113,7 @@ declare module 'vue' {
     VarEllipsis: typeof import('@varlet/ui')['_EllipsisComponent']
     VarForm: typeof import('@varlet/ui')['_FormComponent']
     VarFormDetails: typeof import('@varlet/ui')['_FormDetailsComponent']
+    VarHover: typeof import('@varlet/ui')['_HoverComponent']
     VarIcon: typeof import('@varlet/ui')['_IconComponent']
     VarImage: typeof import('@varlet/ui')['_ImageComponent']
     VarImagePreview: typeof import('@varlet/ui')['_ImagePreviewComponent']

package/types/lazy.d.ts

@@ -1,5 +1,5 @@
 import { VarDirective } from './varDirective'
 
-export class Lazy extends VarDirective {}
+export class Lazy extends VarDirective<string> {}
 
 export class _LazyComponent extends Lazy {}

package/types/ripple.d.ts

@@ -1,5 +1,10 @@
 import { VarDirective } from './varDirective'
 
-export class Ripple extends VarDirective {}
+export interface RippleValue {
+  color?: string
+  disabled?: boolean
+}
+
+export class Ripple extends VarDirective<RippleValue> {}
 
 export class _RippleComponent extends Ripple {}

package/types/varDirective.d.ts

@@ -1,12 +1,12 @@
 import type { App } from 'vue'
 import { DirectiveBinding } from 'vue'
 
-export class VarDirective {
+export class VarDirective<V> {
   static install(app: App): void
 
-  static mounted(el: HTMLElement, binding: DirectiveBinding): void
+  static mounted(el: HTMLElement, binding: DirectiveBinding<V>): void
 
-  static updated(el: HTMLElement, binding: DirectiveBinding): void
+  static updated(el: HTMLElement, binding: DirectiveBinding<V>): void
 
-  static unmounted(el: HTMLElement, binding: DirectiveBinding): void
+  static unmounted(el: HTMLElement, binding: DirectiveBinding<V>): void
 }