@varlet/ui 3.0.3 → 3.0.4

package/README.md

@@ -94,6 +94,7 @@ The following projects are maintained by the official team for a long time.
 | [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |
 | [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |
 | [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |
+| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver)  | `A resolver for` [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) ` used to implement Varlet and import it on demand`   |
 | [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |
 | [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet)  | `Varlet VSCode Theme`   |
 | [varlet-app-example](https://github.com/varletjs/varlet-app-template)  | `Varlet component library app template`   |

package/README.zh-CN.md

@@ -94,6 +94,7 @@ createApp(App).use(Varlet).mount('#app')
 | [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli)                       | `Vue3 组件库快速成型工具`         |
 | [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `桌面端适配器，让移动端组件库可以在桌面端运行` |
 | [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground)  | `Varlet 组件库在线编辑工具`       |
+| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver)  | [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) `的一个解析器，用于实现 Varlet 按需引入`   |
 | [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension)  | `Varlet 组件库 VSCode 插件`   |
 | [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet)  | `Varlet VSCode 主题`   |
 | [varlet-app-example](https://github.com/varletjs/varlet-app-template)  | `Varlet 组件库移动端模板`   |

package/es/app-bar/AppBar.mjs

@@ -14,6 +14,7 @@ function __render__(_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)
         )
       ),
@@ -121,18 +122,20 @@ const __sfc__ = defineComponent({
     const paddingLeft = ref();
     const paddingRight = ref();
     const rootStyles = 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);

package/es/app-bar/appBar.css

@@ -1 +1 @@
-:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg);}.var-app-bar { position: relative; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}.var-app-bar--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); box-sizing: content-box !important;}
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg);}.var-app-bar { position: relative; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}.var-app-bar--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); box-sizing: content-box !important;}.var-app-bar--fixed { position: fixed; top: 0; left: 0;}

package/es/app-bar/props.mjs

@@ -13,7 +13,12 @@ const props = {
   round: Boolean,
   image: String,
   imageLinearGradient: String,
-  safeAreaTop: Boolean
+  safeAreaTop: Boolean,
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  fixed: Boolean
 };
 export {
   props

package/es/button/Button.mjs

@@ -6,7 +6,7 @@ import { computed, defineComponent, ref } from "vue";
 import { props } from "./props.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { useButtonGroup } from "./provide.mjs";
-import { isArray, call } from "@varlet/shared";
+import { isArray, call, inMobile } from "@varlet/shared";
 const { name, n, classes } = createNamespace("button");
 import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
@@ -41,7 +41,9 @@ function __render__(_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 ? (_openBlock(), _createBlock(_component_var_loading, {
       key: 0,
@@ -64,8 +66,9 @@ function __render__(_ctx, _cache) {
       /* CLASS */
     ),
     _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)), [
     [_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple || _ctx.loading || _ctx.pending }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
@@ -80,6 +83,7 @@ const __sfc__ = defineComponent({
   directives: { Ripple, Hover },
   props,
   setup(props2) {
+    const isEffectFocusing = inMobile() ? computed(() => false) : ref(false);
     const pending = ref(false);
     const { buttonGroup } = useButtonGroup();
     const { hovering, handleHovering } = useHoverOverlay();
@@ -141,7 +145,8 @@ const __sfc__ = defineComponent({
       classes,
       handleHovering,
       handleClick,
-      handleTouchstart
+      handleTouchstart,
+      isEffectFocusing
     };
   }
 });

package/es/hover/index.mjs

@@ -1,13 +1,12 @@
-import { isFunction, camelize } from "@varlet/shared";
+import { isFunction, camelize, inMobile } from "@varlet/shared";
 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;

package/es/hover-overlay/HoverOverlay.mjs

@@ -7,7 +7,7 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")]))
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing, _ctx.n("--focusing")]))
     },
     null,
     2

package/es/hover-overlay/hoverOverlay.css

@@ -1 +1 @@
-:root { --hover-overlay-opacity: 0.15;}.var-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background-color: currentColor; opacity: 0; transition: opacity 0.15s; will-change: opacity; pointer-events: none;}.var-hover-overlay--hovering { opacity: var(--hover-overlay-opacity);}
+:root { --hover-overlay-opacity: var(--opacity-hover); --hover-overlay-focusing-opacity: var(--opacity-focus);}.var-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background-color: currentColor; opacity: 0; transition: opacity 0.15s; will-change: opacity; pointer-events: none;}.var-hover-overlay--hovering { opacity: var(--hover-overlay-opacity);}.var-hover-overlay--focusing { opacity: var(--hover-overlay-focusing-opacity);}

package/es/hover-overlay/props.mjs

@@ -1,8 +1,6 @@
 const props = {
-  hovering: {
-    type: Boolean,
-    default: true
-  }
+  hovering: Boolean,
+  focusing: Boolean
 };
 export {
   props

package/es/hover-overlay/style/index.mjs

@@ -1,2 +1,3 @@
+import '../../styles/common.css'
 import '../hoverOverlay.css'
 import '../HoverOverlaySfc.css'

package/es/image/Image.mjs

@@ -8,8 +8,8 @@ import { call } from "@varlet/shared";
 const { name, n, classes } = createNamespace("image");
 import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["alt", "title", "lazy-loading", "lazy-error"];
-const _hoisted_2 = ["alt", "title", "src"];
+const _hoisted_1 = ["alt", "title", "referrerpolicy", "lazy-loading", "lazy-error"];
+const _hoisted_2 = ["alt", "title", "referrerpolicy", "src"];
 function __render__(_ctx, _cache) {
   var _a;
   const _directive_lazy = _resolveDirective("lazy");
@@ -31,6 +31,7 @@ function __render__(_ctx, _cache) {
         class: _normalizeClass(_ctx.n("image")),
         alt: _ctx.alt,
         title: _ctx.title,
+        referrerpolicy: _ctx.referrerpolicy,
         "lazy-loading": _ctx.loading,
         "lazy-error": _ctx.error,
         style: _normalizeStyle({ objectFit: _ctx.fit }),
@@ -45,6 +46,7 @@ function __render__(_ctx, _cache) {
         class: _normalizeClass(_ctx.n("image")),
         alt: _ctx.alt,
         title: _ctx.title,
+        referrerpolicy: _ctx.referrerpolicy,
         style: _normalizeStyle({ objectFit: _ctx.fit }),
         src: _ctx.src,
         onLoad: _cache[2] || (_cache[2] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),

package/es/image/props.mjs

@@ -7,6 +7,7 @@ const props = {
   },
   alt: String,
   title: String,
+  referrerpolicy: String,
   width: [String, Number],
   height: [String, Number],
   radius: {

package/es/index.bundle.mjs

@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.0.3'
+const version = '3.0.4'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.0.3'
+const version = '3.0.4'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/menu/usePopover.mjs

@@ -40,7 +40,7 @@ var __async = (__this, __arguments, generator) => {
 import flip from "@popperjs/core/lib/modifiers/flip.js";
 import offset from "@popperjs/core/lib/modifiers/offset.js";
 import computeStyles from "@popperjs/core/lib/modifiers/computeStyles.js";
-import { useClickOutside, useVModel } from "@varlet/use";
+import { onWindowResize, useClickOutside, useVModel } from "@varlet/use";
 import { doubleRaf, getStyle, call } from "@varlet/shared";
 import { toPxNum } from "../utils/elements.mjs";
 import { onMounted, onUnmounted, ref, watch } from "vue";
@@ -304,6 +304,7 @@ function usePopover(options) {
     call(options["onUpdate:show"], false);
   };
   useClickOutside(getReference, "click", handleClickOutside);
+  onWindowResize(resize);
   watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
   watch(() => options.disabled, close);
   onMounted(() => {

package/es/ripple/index.mjs

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import context from "../context/index.mjs";
-import { supportTouch, getStyle, getRect } from "@varlet/shared";
+import { supportTouch, getStyle, getRect, hasOwn } from "@varlet/shared";
 import { createNamespace } from "../utils/components.mjs";
 
 
@@ -32,13 +32,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, left } = 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 - left;
-  const localY = event.touches[0].clientY - top;
+  const localX = isTouchEvent(event) ? event.touches[0].clientX - left : clientWidth / 2;
+  const localY = isTouchEvent(event) ? event.touches[0].clientY - top : clientHeight / 2;
   const centerX = (clientWidth - radius * 2) / 2;
   const centerY = (clientHeight - radius * 2) / 2;
   const x = localX - radius;
@@ -98,6 +101,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(el, binding) {
   var _a;
   el._ripple = __spreadProps(__spreadValues({
@@ -108,6 +126,9 @@ function mounted(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 });

package/es/snackbar/style/index.mjs

@@ -1,7 +1,7 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'