@varlet/ui 3.0.3 → 3.0.4

package/lib/varlet.cjs.js

@@ -45,6 +45,7 @@ var isEmpty = (val) => val === void 0 || val === null || val === "" || Array.isA
 var isWindow = (val) => val === window;
 var supportTouch = () => inBrowser() && "ontouchstart" in window;
 var inBrowser = () => typeof window !== "undefined";
+var inMobile = () => inBrowser() && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 var { hasOwnProperty } = Object.prototype;
 var hasOwn = (val, key) => hasOwnProperty.call(val, key);
 var uniq = (arr) => [...new Set(arr)];
@@ -810,13 +811,16 @@ function setStyles(element) {
   position === "static" && (element.style.position = "relative");
   zIndex === "auto" && (element.style.zIndex = "1");
 }
+function isTouchEvent(event) {
+  return hasOwn(event, "touches");
+}
 function computeRippleStyles(element, event) {
   const { top: top2, left: left2 } = getRect(element);
   const { clientWidth, clientHeight } = element;
   const radius = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2;
   const size = radius * 2;
-  const localX = event.touches[0].clientX - left2;
-  const localY = event.touches[0].clientY - top2;
+  const localX = isTouchEvent(event) ? event.touches[0].clientX - left2 : clientWidth / 2;
+  const localY = isTouchEvent(event) ? event.touches[0].clientY - top2 : clientHeight / 2;
   const centerX = (clientWidth - radius * 2) / 2;
   const centerY = (clientHeight - radius * 2) / 2;
   const x = localX - radius;
@@ -876,6 +880,21 @@ function forbidRippleTask() {
   _ripple.tasker && window.clearTimeout(_ripple.tasker);
   _ripple.tasker = null;
 }
+let hasKeyboardRipple = false;
+function createKeyboardRipple(event) {
+  if (hasKeyboardRipple || !(event.key === " " || event.key === "Enter")) {
+    return;
+  }
+  createRipple.call(this, event);
+  hasKeyboardRipple = true;
+}
+function removeKeyboardRipple() {
+  if (!hasKeyboardRipple) {
+    return;
+  }
+  removeRipple.call(this);
+  hasKeyboardRipple = false;
+}
 function mounted$2(el, binding) {
   var _a;
   el._ripple = __spreadProps$8(__spreadValues$u({
@@ -886,6 +905,9 @@ function mounted$2(el, binding) {
   el.addEventListener("touchstart", createRipple, { passive: true });
   el.addEventListener("touchmove", forbidRippleTask, { passive: true });
   el.addEventListener("dragstart", removeRipple, { passive: true });
+  el.addEventListener("keydown", createKeyboardRipple);
+  el.addEventListener("keyup", removeKeyboardRipple);
+  el.addEventListener("blur", removeKeyboardRipple);
   document.addEventListener("touchend", el._ripple.removeRipple, { passive: true });
   document.addEventListener("touchcancel", el._ripple.removeRipple, { passive: true });
   document.addEventListener("dragend", el._ripple.removeRipple, { passive: true });
@@ -2188,7 +2210,12 @@ const props$1d = {
   round: Boolean,
   image: String,
   imageLinearGradient: String,
-  safeAreaTop: Boolean
+  safeAreaTop: Boolean,
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  fixed: Boolean
 };
 const { name: name$1d, n: n$1k, classes: classes$16 } = createNamespace("app-bar");
 function __render__$1k(_ctx, _cache) {
@@ -2201,6 +2228,7 @@ function __render__$1k(_ctx, _cache) {
           _ctx.n("$--box"),
           [_ctx.safeAreaTop, _ctx.n("--safe-area-top")],
           [_ctx.round, _ctx.n("--round")],
+          [_ctx.fixed, _ctx.n("--fixed")],
           _ctx.formatElevation(_ctx.elevation, 3)
         )
       ),
@@ -2308,18 +2336,20 @@ const __sfc__$1l = vue.defineComponent({
     const paddingLeft = vue.ref();
     const paddingRight = vue.ref();
     const rootStyles = vue.computed(() => {
-      const { image, color, textColor, imageLinearGradient } = props2;
+      const { image, color, textColor, imageLinearGradient, zIndex } = props2;
       if (image != null) {
         const gradient = imageLinearGradient ? `linear-gradient(${imageLinearGradient}), ` : "";
         return {
           "background-image": `${gradient}url(${image})`,
           "background-position": "center center",
-          "background-size": "cover"
+          "background-size": "cover",
+          "z-index": zIndex
         };
       }
       return {
         background: color,
-        color: textColor
+        color: textColor,
+        "z-index": zIndex
       };
     });
     onSmartMounted(computePadding);
@@ -2998,17 +3028,15 @@ withPropsDefaultsSetter(stdin_default$5z, props$1a);
 const _LoadingComponent = stdin_default$5z;
 var stdin_default$5y = stdin_default$5z;
 const props$19 = {
-  hovering: {
-    type: Boolean,
-    default: true
-  }
+  hovering: Boolean,
+  focusing: Boolean
 };
 const { name: name$19, n: n$1g, classes: classes$12 } = createNamespace("hover-overlay");
 function __render__$1g(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")]))
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing, _ctx.n("--focusing")]))
     },
     null,
     2
@@ -3043,11 +3071,10 @@ function shouldDisabled(arg) {
   if (!arg) {
     return false;
   }
-  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-  if (arg === "desktop" && isMobile) {
+  if (arg === "desktop" && inMobile()) {
     return true;
   }
-  if (arg === "mobile" && !isMobile) {
+  if (arg === "mobile" && !inMobile()) {
     return true;
   }
   return false;
@@ -3261,7 +3288,9 @@ function __render__$1f(_ctx, _cache) {
     type: _ctx.nativeType,
     disabled: _ctx.disabled,
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
-    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args))
+    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
+    onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isEffectFocusing = true),
+    onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isEffectFocusing = false)
   }, [
     _ctx.loading || _ctx.pending ? (vue.openBlock(), vue.createBlock(_component_var_loading, {
       key: 0,
@@ -3284,8 +3313,9 @@ function __render__$1f(_ctx, _cache) {
       /* CLASS */
     ),
     vue.createVNode(_component_var_hover_overlay, {
-      hovering: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.hovering
-    }, null, 8, ["hovering"])
+      hovering: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.hovering,
+      focusing: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.isEffectFocusing
+    }, null, 8, ["hovering", "focusing"])
   ], 46, _hoisted_1$q)), [
     [_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple || _ctx.loading || _ctx.pending }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
@@ -3300,6 +3330,7 @@ const __sfc__$1g = vue.defineComponent({
   directives: { Ripple: stdin_default$5T, Hover: stdin_default$5v },
   props: props$18,
   setup(props2) {
+    const isEffectFocusing = inMobile() ? vue.computed(() => false) : vue.ref(false);
     const pending = vue.ref(false);
     const { buttonGroup } = useButtonGroup();
     const { hovering, handleHovering } = useHoverOverlay();
@@ -3361,7 +3392,8 @@ const __sfc__$1g = vue.defineComponent({
       classes: classes$11,
       handleHovering,
       handleClick,
-      handleTouchstart
+      handleTouchstart,
+      isEffectFocusing
     };
   }
 });
@@ -13442,6 +13474,7 @@ function usePopover(options) {
     call(options["onUpdate:show"], false);
   };
   useClickOutside(getReference, "click", handleClickOutside);
+  onWindowResize(resize);
   vue.watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
   vue.watch(() => options.disabled, close);
   vue.onMounted(() => {
@@ -14591,6 +14624,7 @@ const props$F = {
   },
   alt: String,
   title: String,
+  referrerpolicy: String,
   width: [String, Number],
   height: [String, Number],
   radius: {
@@ -14610,8 +14644,8 @@ const props$F = {
   onError: defineListenerProp()
 };
 const { name: name$F, n: n$I, classes: classes$B } = createNamespace("image");
-const _hoisted_1$j = ["alt", "title", "lazy-loading", "lazy-error"];
-const _hoisted_2$c = ["alt", "title", "src"];
+const _hoisted_1$j = ["alt", "title", "referrerpolicy", "lazy-loading", "lazy-error"];
+const _hoisted_2$c = ["alt", "title", "referrerpolicy", "src"];
 function __render__$J(_ctx, _cache) {
   var _a;
   const _directive_lazy = vue.resolveDirective("lazy");
@@ -14633,6 +14667,7 @@ function __render__$J(_ctx, _cache) {
         class: vue.normalizeClass(_ctx.n("image")),
         alt: _ctx.alt,
         title: _ctx.title,
+        referrerpolicy: _ctx.referrerpolicy,
         "lazy-loading": _ctx.loading,
         "lazy-error": _ctx.error,
         style: vue.normalizeStyle({ objectFit: _ctx.fit }),
@@ -14647,6 +14682,7 @@ function __render__$J(_ctx, _cache) {
         class: vue.normalizeClass(_ctx.n("image")),
         alt: _ctx.alt,
         title: _ctx.title,
+        referrerpolicy: _ctx.referrerpolicy,
         style: vue.normalizeStyle({ objectFit: _ctx.fit }),
         src: _ctx.src,
         onLoad: _cache[2] || (_cache[2] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
@@ -23971,7 +24007,8 @@ var stdin_default$2r = {
   "--form-details-message-margin-right": "4px"
 };
 var stdin_default$2q = {
-  "--hover-overlay-opacity": "0.15"
+  "--hover-overlay-opacity": "var(--opacity-hover)",
+  "--hover-overlay-focusing-opacity": "var(--opacity-focus)"
 };
 var stdin_default$2p = {
   "--icon-size": "20px"
@@ -24186,6 +24223,8 @@ var stdin_default$28 = __spreadValues$3(__spreadValues$3(__spreadValues$3(__spre
   "--color-outline": "rgba(255, 255, 255, 0.2)",
   "--color-on-surface-variant": "#fff",
   "--opacity-disabled": "0.6",
+  "--opacity-hover": "0.15",
+  "--opacity-focus": "0.2",
   "--cubic-bezier": "cubic-bezier(0.25, 0.8, 0.5, 1)",
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
@@ -24234,7 +24273,8 @@ var stdin_default$27 = {
   "--button-large-font-size": "var(--font-size-lg)"
 };
 var stdin_default$26 = {
-  "--hover-overlay-opacity": "0.12"
+  "--hover-overlay-opacity": "var(--opacity-hover)",
+  "--hover-overlay-focusing-opacity": "var(--opacity-focus)"
 };
 var stdin_default$25 = {
   "--menu-background-color": "var(--color-surface-container)",
@@ -25088,6 +25128,8 @@ var stdin_default$18 = __spreadValues$2(__spreadValues$2(__spreadValues$2(__spre
   "--color-outline": "#CAC4D0",
   "--color-on-surface-variant": "#49454F",
   "--opacity-disabled": "0.6",
+  "--opacity-hover": "0.12",
+  "--opacity-focus": "0.2",
   "--cubic-bezier": "cubic-bezier(0.25, 0.8, 0.5, 1)",
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
@@ -25136,7 +25178,8 @@ var stdin_default$17 = {
   "--button-large-font-size": "var(--font-size-lg)"
 };
 var stdin_default$16 = {
-  "--hover-overlay-opacity": "0.12"
+  "--hover-overlay-opacity": "var(--opacity-hover)",
+  "--hover-overlay-focusing-opacity": "var(--opacity-focus)"
 };
 var stdin_default$15 = {
   "--menu-background-color": "var(--color-surface-container)",
@@ -26008,6 +26051,8 @@ var stdin_default$8 = __spreadValues$1(__spreadValues$1(__spreadValues$1(__sprea
   "--color-outline": "#49454F",
   "--color-on-surface-variant": "#CAC4D0",
   "--opacity-disabled": "0.6",
+  "--opacity-hover": "0.12",
+  "--opacity-focus": "0.2",
   "--cubic-bezier": "cubic-bezier(0.25, 0.8, 0.5, 1)",
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
@@ -27709,7 +27754,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.0.3";
+const version = "3.0.4";
 function install(app) {
   stdin_default$5H.install && app.use(stdin_default$5H);
   stdin_default$5F.install && app.use(stdin_default$5F);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.0.3",
-    "@varlet/use": "3.0.3",
-    "@varlet/shared": "3.0.3"
+    "@varlet/icons": "3.0.4",
+    "@varlet/use": "3.0.4",
+    "@varlet/shared": "3.0.4"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.4.15",
@@ -66,9 +66,9 @@
     "typescript": "^5.1.5",
     "vue": "3.4.15",
     "vue-router": "4.2.0",
-    "@varlet/ui": "3.0.3",
-    "@varlet/cli": "3.0.3",
-    "@varlet/touch-emulator": "3.0.3"
+    "@varlet/cli": "3.0.4",
+    "@varlet/ui": "3.0.4",
+    "@varlet/touch-emulator": "3.0.4"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/appBar.d.ts

@@ -15,6 +15,8 @@ export interface AppBarProps extends BasicAttributes {
   image?: string
   imageLinearGradient?: string
   safeAreaTop?: boolean
+  fixed?: boolean
+  zIndex?: number | string
 }
 
 export class AppBar extends VarComponent {

package/types/image.d.ts

@@ -1,5 +1,5 @@
 import { VarComponent, BasicAttributes, ListenerProp, SetPropsDefaults } from './varComponent'
-import { VNode } from 'vue'
+import { VNode, ImgHTMLAttributes } from 'vue'
 
 export declare const imageProps: Record<keyof ImageProps, any>
 
@@ -10,6 +10,7 @@ export interface ImageProps extends BasicAttributes {
   fit?: ImageFit
   title?: string
   alt?: string
+  referrerpolicy?: ImgHTMLAttributes['referrerpolicy']
   width?: string | number
   height?: string | number
   radius?: string | number

package/types/input.d.ts

@@ -1,5 +1,5 @@
 import { VarComponent, BasicAttributes, ListenerProp, Variant as InputVariant, SetPropsDefaults } from './varComponent'
-import { VNode } from 'vue'
+import { VNode, InputHTMLAttributes } from 'vue'
 
 export declare const inputProps: Record<keyof InputProps, any>
 
@@ -29,7 +29,7 @@ export interface InputProps extends BasicAttributes {
   autofocus?: boolean
   validateTrigger?: InputValidateTrigger[]
   rules?: Array<(v: string) => any>
-  enterkeyhint?: string
+  enterkeyhint?: InputHTMLAttributes['enterKeyHint']
   onFocus?: ListenerProp<(e: Event) => void>
   onBlur?: ListenerProp<(e: Event) => void>
   onClick?: ListenerProp<(e: Event) => void>

package/types/styleVars.d.ts

@@ -1231,6 +1231,10 @@ export interface StyleVars {
   colorOnSurfaceVariant?: string
   '--opacity-disabled'?: string
   opacityDisabled?: string
+  '--opacity-hover'?: string
+  opacityHover?: string
+  '--opacity-focus'?: string
+  opacityFocus?: string
   '--cubic-bezier'?: string
   cubicBezier?: string
   '--shadow-key-umbra-opacity'?: string

package/types/uploader.d.ts

@@ -1,5 +1,5 @@
 import { VarComponent, BasicAttributes, ListenerProp, SetPropsDefaults } from './varComponent'
-import { VNode } from 'vue'
+import { VNode, InputHTMLAttributes } from 'vue'
 
 export declare const uploaderProps: Record<keyof UploaderProps, any>
 
@@ -33,7 +33,7 @@ export type UploaderCapture = boolean | 'user' | 'environment'
 export interface UploaderProps extends BasicAttributes {
   modelValue?: VarFile[]
   accept?: string
-  capture?: UploaderCapture
+  capture?: InputHTMLAttributes['capture']
   multiple?: boolean
   readonly?: boolean
   disabled?: boolean