@varlet/ui 3.20.3 → 3.20.5

package/es/cell/cell.css

@@ -1 +1 @@
-:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-description-font-size: var(--font-size-sm); --cell-description-color: rgba(0, 0, 0, 0.6); --cell-description-margin-top: 4px; --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: var(--color-outline); --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; width: 100%; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color); -webkit-tap-highlight-color: transparent;}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; bottom: 0; right: var(--cell-border-right); left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5); transition: border 0.25s;}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; min-width: 0;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__description { font-size: var(--cell-description-font-size); color: var(--cell-description-color); margin-top: var(--cell-description-margin-top);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}.var-cell--cursor { cursor: pointer;}
+:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-title-line-height: 1.5; --cell-description-font-size: var(--font-size-sm); --cell-description-line-height: 1.5; --cell-description-color: rgba(0, 0, 0, 0.6); --cell-description-margin-top: 4px; --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: var(--color-outline); --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; width: 100%; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color); -webkit-tap-highlight-color: transparent;}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; bottom: 0; right: var(--cell-border-right); left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5); transition: border 0.25s;}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; min-width: 0;}.var-cell__title { line-height: var(--cell-title-line-height); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__description { font-size: var(--cell-description-font-size); line-height: var(--cell-description-line-height); color: var(--cell-description-color); margin-top: var(--cell-description-margin-top);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}.var-cell--cursor { cursor: pointer;}

package/es/image-preview/ImagePreview.mjs

@@ -1,6 +1,7 @@
 import { call, clamp, preventDefault, toNumber } from "@varlet/shared";
 import { useEventListener, useTouch, useVModel } from "@varlet/use";
 import { computed, defineComponent, ref } from "vue";
+import VarButton from "../button/index.mjs";
 import VarIcon from "../icon/index.mjs";
 import VarPopup from "../popup/index.mjs";
 import VarSwipe from "../swipe/index.mjs";
@@ -21,6 +22,7 @@ function __render__(_ctx, _cache) {
   const _component_var_swipe_item = _resolveComponent("var-swipe-item");
   const _component_var_swipe = _resolveComponent("var-swipe");
   const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_button = _resolveComponent("var-button");
   const _component_var_popup = _resolveComponent("var-popup");
   return _openBlock(), _createBlock(_component_var_popup, {
     show: _ctx.show,
@@ -110,13 +112,23 @@ function __render__(_ctx, _cache) {
         /* FORWARDED */
       }, 16, ["class", "touchable", "indicator", "initial-index", "loop", "onChange"]),
       _renderSlot(_ctx.$slots, "close-icon", {}, () => [
-        _ctx.closeable ? (_openBlock(), _createBlock(_component_var_icon, {
+        _ctx.closeable ? (_openBlock(), _createBlock(_component_var_button, {
           key: 0,
           class: _normalizeClass(_ctx.n("close-icon")),
-          name: "close-circle",
+          text: "",
+          round: "",
           "var-image-preview-cover": "",
           onClick: _ctx.close
-        }, null, 8, ["class", "onClick"])) : _createCommentVNode("v-if", true)
+        }, {
+          default: _withCtx(() => [
+            _createVNode(_component_var_icon, {
+              class: _normalizeClass(_ctx.n("close-icon-image")),
+              name: "window-close"
+            }, null, 8, ["class"])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["class", "onClick"])) : _createCommentVNode("v-if", true)
       ]),
       _ctx.$slots.extra ? (_openBlock(), _createElementBlock(
         "div",
@@ -138,6 +150,7 @@ function __render__(_ctx, _cache) {
 const __sfc__ = defineComponent({
   name,
   components: {
+    VarButton,
     VarSwipe,
     VarSwipeItem,
     VarPopup,

package/es/image-preview/imagePreview.css

@@ -1 +1 @@
-:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 14px; --image-preview-close-icon-right: 14px; --image-preview-extra-top: 14px; --image-preview-extra-left: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { height: 100%; background: var(--image-preview-zoom-container-background);}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100%;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color); font-size: var(--image-preview-close-icon-size);}.var-image-preview__extra { position: absolute; top: var(--image-preview-extra-top); left: var(--image-preview-extra-left);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview--prevent { -webkit-touch-callout: none; pointer-events: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100%; transition: transform 0.2s;}
+:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 8px; --image-preview-close-icon-right: 14px; --image-preview-extra-top: 14px; --image-preview-extra-left: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { height: 100%; background: var(--image-preview-zoom-container-background);}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100%;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color);}.var-image-preview__close-icon-image { font-size: var(--image-preview-close-icon-size);}.var-image-preview__extra { position: absolute; top: var(--image-preview-extra-top); left: var(--image-preview-extra-left);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview--prevent { -webkit-touch-callout: none; pointer-events: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100%; transition: transform 0.2s;}

package/es/image-preview/style/index.mjs

@@ -1,4 +1,9 @@
 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'
 import '../../icon/icon.css'
 import '../../swipe/swipe.css'
 import '../../swipe-item/swipeItem.css'

package/es/index.bundle.mjs

@@ -310,7 +310,7 @@ import './tree-menu/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.20.3'
+const version = '3.20.5'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -206,7 +206,7 @@ export * from './tree-menu/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.20.3'
+const version = '3.20.5'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/themes/dark/cell.mjs

@@ -2,7 +2,9 @@ var stdin_default = {
   "--cell-description-color": "#aaa",
   "--cell-color": "var(--color-text)",
   "--cell-font-size": "var(--font-size-md)",
+  "--cell-title-line-height": "1.5",
   "--cell-description-font-size": "var(--font-size-sm)",
+  "--cell-description-line-height": "1.5",
   "--cell-description-margin-top": "4px",
   "--cell-padding": "10px 12px",
   "--cell-min-height": "40px",

package/es/themes/dark/imagePreview.mjs

@@ -2,7 +2,7 @@ var stdin_default = {
   "--image-preview-swipe-indicators-text-color": "#ddd",
   "--image-preview-swipe-indicators-padding": "16px 0",
   "--image-preview-zoom-container-background": "#000",
-  "--image-preview-close-icon-top": "14px",
+  "--image-preview-close-icon-top": "8px",
   "--image-preview-close-icon-right": "14px",
   "--image-preview-extra-top": "14px",
   "--image-preview-extra-left": "14px",

package/es/themes/md3-dark/cell.mjs

@@ -2,7 +2,9 @@ var stdin_default = {
   "--cell-description-color": "var(--color-on-surface-variant)",
   "--cell-color": "var(--color-text)",
   "--cell-font-size": "var(--font-size-md)",
+  "--cell-title-line-height": "1.5",
   "--cell-description-font-size": "var(--font-size-sm)",
+  "--cell-description-line-height": "1.5",
   "--cell-description-margin-top": "4px",
   "--cell-padding": "10px 12px",
   "--cell-min-height": "40px",

package/es/themes/md3-dark/imagePreview.mjs

@@ -2,7 +2,7 @@ var stdin_default = {
   "--image-preview-swipe-indicators-text-color": "#ddd",
   "--image-preview-swipe-indicators-padding": "16px 0",
   "--image-preview-zoom-container-background": "#000",
-  "--image-preview-close-icon-top": "14px",
+  "--image-preview-close-icon-top": "8px",
   "--image-preview-close-icon-right": "14px",
   "--image-preview-extra-top": "14px",
   "--image-preview-extra-left": "14px",

package/es/themes/md3-light/cell.mjs

@@ -2,7 +2,9 @@ var stdin_default = {
   "--cell-description-color": "var(--color-on-surface-variant)",
   "--cell-color": "var(--color-text)",
   "--cell-font-size": "var(--font-size-md)",
+  "--cell-title-line-height": "1.5",
   "--cell-description-font-size": "var(--font-size-sm)",
+  "--cell-description-line-height": "1.5",
   "--cell-description-margin-top": "4px",
   "--cell-padding": "10px 12px",
   "--cell-min-height": "40px",

package/es/themes/md3-light/imagePreview.mjs

@@ -2,7 +2,7 @@ var stdin_default = {
   "--image-preview-swipe-indicators-text-color": "#ddd",
   "--image-preview-swipe-indicators-padding": "16px 0",
   "--image-preview-zoom-container-background": "#000",
-  "--image-preview-close-icon-top": "14px",
+  "--image-preview-close-icon-top": "8px",
   "--image-preview-close-icon-right": "14px",
   "--image-preview-extra-top": "14px",
   "--image-preview-extra-left": "14px",