@varlet/ui 3.15.2 → 3.16.0-alpha.1778498431663

package/README.md

@@ -14,7 +14,6 @@
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
     <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
 </div>
 

package/README.zh-CN.md

@@ -15,7 +15,6 @@
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
     <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
 </div>
 

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionSheetSfc.css'
 import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/card/Card.mjs

@@ -23,6 +23,8 @@ import { computed, defineComponent, nextTick, ref, watch } from "vue";
 import VarButton from "../button/index.mjs";
 import { useLock } from "../context/lock.mjs";
 import { useZIndex } from "../context/zIndex.mjs";
+import Hover from "../hover/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
 import VarIcon from "../icon/index.mjs";
 import Ripple from "../ripple/index.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
@@ -33,9 +35,11 @@ const RIPPLE_DELAY = 500;
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
 const _hoisted_1 = ["src", "alt"];
 function __render__(_ctx, _cache) {
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_button = _resolveComponent("var-button");
   const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
   return _withDirectives((_openBlock(), _createElementBlock(
     "div",
     {
@@ -46,6 +50,8 @@ function __render__(_ctx, _cache) {
           [_ctx.isRow, _ctx.n("--layout-row")],
           [_ctx.variant === "outlined" || _ctx.outline, _ctx.n("--outline")],
           [_ctx.variant === "filled", _ctx.n("--filled")],
+          [_ctx.surfaceLow, _ctx.n("--surface-low")],
+          [_ctx.hoverable, _ctx.n("--cursor")],
           [_ctx.variant === "standard" || _ctx.outline, _ctx.formatElevation(_ctx.elevation, 1)]
         )
       ),
@@ -179,6 +185,9 @@ function __render__(_ctx, _cache) {
             2
             /* CLASS */
           ),
+          _createVNode(_component_var_hover_overlay, {
+            hovering: _ctx.hoverable && !_ctx.floated ? _ctx.hovering : false
+          }, null, 8, ["hovering"]),
           _ctx.showFloatingButtons ? (_openBlock(), _createElementBlock(
             "div",
             {
@@ -233,15 +242,17 @@ function __render__(_ctx, _cache) {
     6
     /* CLASS, STYLE */
   )), [
-    [_directive_ripple, { disabled: !_ctx.ripple || _ctx.floater }]
+    [_directive_ripple, { disabled: !_ctx.ripple || _ctx.floater }],
+    [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
 }
 const __sfc__ = defineComponent({
   name,
-  directives: { Ripple },
+  directives: { Ripple, Hover },
   components: {
     VarIcon,
-    VarButton
+    VarButton,
+    VarHoverOverlay
   },
   props,
   setup(props2) {
@@ -258,6 +269,8 @@ const __sfc__ = defineComponent({
     const contentHeight = ref("0px");
     const opacity = ref("0");
     const isRow = computed(() => props2.layout === "row");
+    const surfaceLow = computed(() => props2.surface === "low" && props2.variant !== "filled");
+    const { hovering, handleHovering } = useHoverOverlay();
     const showFloatingButtons = ref(false);
     const floated = ref(false);
     const { zIndex } = useZIndex(() => props2.floating, 1);
@@ -265,6 +278,7 @@ const __sfc__ = defineComponent({
     let dropdownFloaterLeft = "auto";
     let dropper = null;
     const floater = ref(null);
+    let hasEnteredFloating = false;
     useLock(
       () => props2.floating,
       () => !isRow.value
@@ -276,7 +290,12 @@ const __sfc__ = defineComponent({
           return;
         }
         nextTick(() => {
-          value ? floating() : dropdown();
+          if (value) {
+            hasEnteredFloating = true;
+            floating();
+          } else if (hasEnteredFloating) {
+            dropdown();
+          }
         });
       },
       { immediate: true }
@@ -358,6 +377,9 @@ const __sfc__ = defineComponent({
       opacity,
       zIndex,
       isRow,
+      surfaceLow,
+      hovering,
+      handleHovering,
       showFloatingButtons,
       floated,
       n,

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-filled-background: hsl(0, 0%, 93%); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__content { padding: var(--card-content-padding); margin: var(--card-content-margin); font-size: var(--card-content-font-size); color: var(--card-content-color); transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__content { max-width: 100%; margin: var(--card-title-row-margin);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card--filled .var-card__floater { background-color: var(--card-filled-background);}
+:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-surface-low-background: var(--color-surface-container-highest); --card-filled-background: hsl(0, 0%, 93%); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: relative; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__content { padding: var(--card-content-padding); margin: var(--card-content-margin); font-size: var(--card-content-font-size); color: var(--card-content-color); transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__content { max-width: 100%; margin: var(--card-title-row-margin);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card--cursor { cursor: pointer;}.var-card--surface-low .var-card__floater { background-color: var(--card-surface-low-background);}.var-card--filled .var-card__floater { background-color: var(--card-filled-background);}

package/es/card/props.mjs

@@ -15,6 +15,8 @@ const props = {
     type: String,
     default: "column"
   },
+  surface: String,
+  hoverable: Boolean,
   floating: Boolean,
   floatingDuration: {
     type: Number,

package/es/card/style/index.mjs

@@ -1,5 +1,6 @@
 import '../../styles/common.css'
 import '../../styles/elevation.css'
+import '../../hover-overlay/hoverOverlay.css'
 import '../../ripple/ripple.css'
 import '../../loading/loading.css'
 import '../../button/button.css'

package/es/index.bundle.mjs

@@ -56,6 +56,7 @@ import Menu from './menu/index.mjs'
 import MenuOption from './menu-option/index.mjs'
 import MenuSelect from './menu-select/index.mjs'
 import Option from './option/index.mjs'
+import OtpInput from './otp-input/index.mjs'
 import Overlay from './overlay/index.mjs'
 import Pagination from './pagination/index.mjs'
 import Paper from './paper/index.mjs'
@@ -151,6 +152,7 @@ export * from './menu/index.mjs'
 export * from './menu-option/index.mjs'
 export * from './menu-select/index.mjs'
 export * from './option/index.mjs'
+export * from './otp-input/index.mjs'
 export * from './overlay/index.mjs'
 export * from './pagination/index.mjs'
 export * from './paper/index.mjs'
@@ -246,6 +248,7 @@ import './menu/style/index.mjs'
 import './menu-option/style/index.mjs'
 import './menu-select/style/index.mjs'
 import './option/style/index.mjs'
+import './otp-input/style/index.mjs'
 import './overlay/style/index.mjs'
 import './pagination/style/index.mjs'
 import './paper/style/index.mjs'
@@ -283,7 +286,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.15.2'
+const version = '3.16.0-alpha.1778498431663'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -344,6 +347,7 @@ function install(app) {
   MenuOption.install && app.use(MenuOption)
   MenuSelect.install && app.use(MenuSelect)
   Option.install && app.use(Option)
+  OtpInput.install && app.use(OtpInput)
   Overlay.install && app.use(Overlay)
   Pagination.install && app.use(Pagination)
   Paper.install && app.use(Paper)
@@ -443,6 +447,7 @@ export {
   MenuOption,
   MenuSelect,
   Option,
+  OtpInput,
   Overlay,
   Pagination,
   Paper,
@@ -542,6 +547,7 @@ export default {
   MenuOption,
   MenuSelect,
   Option,
+  OtpInput,
   Overlay,
   Pagination,
   Paper,

package/es/index.mjs

@@ -56,6 +56,7 @@ import Menu from './menu/index.mjs'
 import MenuOption from './menu-option/index.mjs'
 import MenuSelect from './menu-select/index.mjs'
 import Option from './option/index.mjs'
+import OtpInput from './otp-input/index.mjs'
 import Overlay from './overlay/index.mjs'
 import Pagination from './pagination/index.mjs'
 import Paper from './paper/index.mjs'
@@ -151,6 +152,7 @@ export * from './menu/index.mjs'
 export * from './menu-option/index.mjs'
 export * from './menu-select/index.mjs'
 export * from './option/index.mjs'
+export * from './otp-input/index.mjs'
 export * from './overlay/index.mjs'
 export * from './pagination/index.mjs'
 export * from './paper/index.mjs'
@@ -188,7 +190,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.15.2'
+const version = '3.16.0-alpha.1778498431663'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -249,6 +251,7 @@ function install(app) {
   MenuOption.install && app.use(MenuOption)
   MenuSelect.install && app.use(MenuSelect)
   Option.install && app.use(Option)
+  OtpInput.install && app.use(OtpInput)
   Overlay.install && app.use(Overlay)
   Pagination.install && app.use(Pagination)
   Paper.install && app.use(Paper)
@@ -348,6 +351,7 @@ export {
   MenuOption,
   MenuSelect,
   Option,
+  OtpInput,
   Overlay,
   Pagination,
   Paper,
@@ -447,6 +451,7 @@ export default {
   MenuOption,
   MenuSelect,
   Option,
+  OtpInput,
   Overlay,
   Pagination,
   Paper,