@varlet/ui 1.27.9-alpha.1653036733481 → 1.27.9

package/es/varlet.esm.js

@@ -2502,7 +2502,8 @@ var BottomNavigationItem = defineComponent({
       return active.value === name.value || active.value === index.value ? activeColor.value : inactiveColor.value;
     };
     var handleClick = () => {
-      var active2 = name.value || index.value;
+      var _name$value;
+      var active2 = (_name$value = name.value) != null ? _name$value : index.value;
       call(props2.onClick, active2);
       call(bottomNavigation2.onToggle, active2);
     };
@@ -2542,7 +2543,10 @@ var props$K = {
   height: {
     type: [String, Number]
   },
-  width: {
+  imageHeight: {
+    type: [String, Number]
+  },
+  imageWidth: {
     type: [String, Number]
   },
   layout: {
@@ -2622,15 +2626,18 @@ function render$Q(_ctx, _cache) {
   var _component_var_icon = resolveComponent("var-icon");
   var _component_var_button = resolveComponent("var-button");
   var _directive_ripple = resolveDirective("ripple");
-  return openBlock(), createElementBlock("div", {
+  return withDirectives((openBlock(), createElementBlock("div", {
     ref: "card",
-    class: normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n("--layout-row")])),
+    class: normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n("--layout-row")], [_ctx.elevation, "var-elevation--" + _ctx.elevation, "var-elevation--1"])),
+    style: normalizeStyle({
+      zIndex: _ctx.floated ? _ctx.zIndex : void 0
+    }),
     onClick: _cache[0] || (_cache[0] = function() {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, [withDirectives((openBlock(), createElementBlock("div", {
+  }, [createElementVNode("div", {
     ref: "cardFloater",
-    class: normalizeClass(_ctx.classes(_ctx.n("floater"), [_ctx.elevation, "var-elevation--" + _ctx.elevation, "var-elevation--1"])),
+    class: normalizeClass(_ctx.classes(_ctx.n("floater"))),
     style: normalizeStyle({
       width: _ctx.floaterWidth,
       height: _ctx.floaterHeight,
@@ -2638,21 +2645,22 @@ function render$Q(_ctx, _cache) {
       left: _ctx.floaterLeft,
       overflow: _ctx.floaterOverflow,
       position: _ctx.floaterPosition,
-      borderRadius: _ctx.floating ? "0px" : void 0,
-      zIndex: _ctx.floated ? _ctx.zIndex : void 0,
-      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, border-radius " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : void 0
+      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : void 0
     })
-  }, [renderSlot(_ctx.$slots, "image", {}, () => [_ctx.src ? (openBlock(), createElementBlock("img", {
-    key: 0,
-    class: normalizeClass(_ctx.n("image")),
-    style: normalizeStyle({
-      objectFit: _ctx.fit,
-      height: _ctx.toSizeUnit(_ctx.height),
-      width: _ctx.toSizeUnit(_ctx.width)
-    }),
-    src: _ctx.src,
-    alt: _ctx.alt
-  }, null, 14, _hoisted_1$g)) : createCommentVNode("v-if", true)]), createElementVNode("div", {
+  }, [renderSlot(_ctx.$slots, "image", {}, () => {
+    var _ctx$imageHeight;
+    return [_ctx.src ? (openBlock(), createElementBlock("img", {
+      key: 0,
+      class: normalizeClass(_ctx.n("image")),
+      style: normalizeStyle({
+        objectFit: _ctx.fit,
+        height: _ctx.toSizeUnit((_ctx$imageHeight = _ctx.imageHeight) != null ? _ctx$imageHeight : _ctx.height),
+        width: _ctx.toSizeUnit(_ctx.imageWidth)
+      }),
+      src: _ctx.src,
+      alt: _ctx.alt
+    }, null, 14, _hoisted_1$g)) : createCommentVNode("v-if", true)];
+  }), createElementVNode("div", {
     class: normalizeClass(_ctx.n("container"))
   }, [renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -2674,34 +2682,35 @@ function render$Q(_ctx, _cache) {
       opacity: _ctx.opacity,
       transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
     })
-  }, [renderSlot(_ctx.$slots, "content")], 6)) : createCommentVNode("v-if", true)], 2), _ctx.showToolBar ? (openBlock(), createElementBlock("div", {
+  }, [renderSlot(_ctx.$slots, "content")], 6)) : createCommentVNode("v-if", true)], 2), _ctx.showFloatingButtons ? (openBlock(), createElementBlock("div", {
     key: 0,
-    class: normalizeClass(_ctx.classes(_ctx.n("toolbar"), "var--box")),
+    class: normalizeClass(_ctx.classes(_ctx.n("floating-buttons"), "var--box")),
     style: normalizeStyle({
       zIndex: _ctx.zIndex,
       opacity: _ctx.opacity,
       transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
     })
-  }, [renderSlot(_ctx.$slots, "toolbar-close", {}, () => [createVNode(_component_var_button, {
-    size: "large",
+  }, [renderSlot(_ctx.$slots, "close-button", {}, () => [createVNode(_component_var_button, {
+    "var-card-cover": "",
     round: "",
-    class: normalizeClass(_ctx.classes(_ctx.n("toolbar-close"), "var-elevation--6")),
+    class: normalizeClass(_ctx.classes(_ctx.n("close-button"), "var-elevation--6")),
     onClick: withModifiers(_ctx.close, ["stop"])
   }, {
     default: withCtx(() => [createVNode(_component_var_icon, {
+      "var-card-cover": "",
       name: "window-close",
-      size: "24px"
-    })]),
+      class: normalizeClass(_ctx.n("close-button-icon"))
+    }, null, 8, ["class"])]),
     _: 1
-  }, 8, ["class", "onClick"])]), renderSlot(_ctx.$slots, "toolbar-extra")], 6)) : createCommentVNode("v-if", true)], 6)), [[_directive_ripple, {
-    disabled: !_ctx.ripple || _ctx.floater
-  }]]), createElementVNode("div", {
+  }, 8, ["class", "onClick"])])], 6)) : createCommentVNode("v-if", true)], 6), createElementVNode("div", {
     class: normalizeClass(_ctx.n("holder")),
     style: normalizeStyle({
       width: _ctx.holderWidth,
       height: _ctx.holderHeight
     })
-  }, null, 6)], 2);
+  }, null, 6)], 6)), [[_directive_ripple, {
+    disabled: !_ctx.ripple || _ctx.floater
+  }]]);
 }
 var Card = defineComponent({
   render: render$Q,
@@ -2723,7 +2732,7 @@ var Card = defineComponent({
     var floaterHeight = ref("100%");
     var floaterTop = ref("auto");
     var floaterLeft = ref("auto");
-    var floaterPosition = ref("static");
+    var floaterPosition = ref(void 0);
     var floaterOverflow = ref("hidden");
     var contentHeight = ref("0px");
     var opacity = ref("0");
@@ -2731,7 +2740,7 @@ var Card = defineComponent({
       zIndex
     } = useZIndex(() => props2.floating, 1);
     var isRow = computed(() => props2.layout === "row");
-    var showToolBar = ref(false);
+    var showFloatingButtons = ref(false);
     var floated = ref(false);
     useLock(() => props2.floating, () => isRow);
     var dropdownFloaterTop = "auto";
@@ -2759,7 +2768,7 @@ var Card = defineComponent({
           floaterPosition.value = "fixed";
           dropdownFloaterTop = floaterTop.value;
           dropdownFloaterLeft = floaterLeft.value;
-          showToolBar.value = true;
+          showFloatingButtons.value = true;
           yield doubleRaf();
           floaterTop.value = "0";
           floaterLeft.value = "0";
@@ -2785,7 +2794,7 @@ var Card = defineComponent({
       floaterLeft.value = dropdownFloaterLeft;
       contentHeight.value = "0px";
       opacity.value = "0";
-      showToolBar.value = false;
+      showFloatingButtons.value = false;
       dropper = setTimeout(() => {
         holderWidth.value = "auto";
         holderHeight.value = "auto";
@@ -2796,7 +2805,7 @@ var Card = defineComponent({
         dropdownFloaterTop = "auto";
         dropdownFloaterLeft = "auto";
         floaterOverflow.value = "hidden";
-        floaterPosition.value = "static";
+        floaterPosition.value = void 0;
         floated.value = false;
       }, props2.floatingDuration);
     };
@@ -2832,7 +2841,7 @@ var Card = defineComponent({
       zIndex,
       isRow,
       close,
-      showToolBar,
+      showFloatingButtons,
       floated
     };
   }

package/highlight/attributes.json

@@ -251,11 +251,11 @@
     "type": "string",
     "description": "替代文本 默认值：-"
   },
-  "var-card/height": {
+  "var-card/image-height": {
     "type": "string | number",
     "description": "图片高度 默认值：-"
   },
-  "var-card/width": {
+  "var-card/image-width": {
     "type": "string | number",
     "description": "图片宽度 默认值：-"
   },
@@ -267,7 +267,7 @@
     "type": "boolean",
     "description": "是否开启全屏 默认值：false"
   },
-  "var-card/floatingDuration": {
+  "var-card/floating-duration": {
     "type": "number",
     "description": "开关全屏所需时间（ms） 默认值：250"
   },

package/highlight/tags.json

@@ -92,11 +92,11 @@
       "layout",
       "fit",
       "alt",
-      "height",
-      "width",
+      "image-height",
+      "image-width",
       "ripple",
       "floating",
-      "floatingDuration"
+      "floating-duration"
     ]
   },
   "var-cell": {

package/highlight/web-types.json

@@ -734,7 +734,7 @@
               }
             },
             {
-              "name": "height",
+              "name": "image-height",
               "description": "图片高度",
               "default": "-",
               "value": {
@@ -743,7 +743,7 @@
               }
             },
             {
-              "name": "width",
+              "name": "image-width",
               "description": "图片宽度",
               "default": "-",
               "value": {
@@ -770,7 +770,7 @@
               }
             },
             {
-              "name": "floatingDuration",
+              "name": "floating-duration",
               "description": "开关全屏所需时间（ms）",
               "default": "250",
               "value": {
@@ -811,8 +811,8 @@
               "description": "自定义底部内容"
             },
             {
-              "name": "toolbar-close",
-              "description": "工具栏自定义关闭"
+              "name": "close-button",
+              "description": "自定义关闭"
             }
           ]
         },

package/lib/bottom-navigation-item/BottomNavigationItem.js

@@ -112,7 +112,9 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var handleClick = () => {
-      var active = name.value || index.value;
+      var _name$value;
+
+      var active = (_name$value = name.value) != null ? _name$value : index.value;
       (0, _components.call)(props.onClick, active);
       (0, _components.call)(bottomNavigation.onToggle, active);
     };

package/lib/card/Card.js

@@ -45,15 +45,18 @@ function render(_ctx, _cache) {
 
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     ref: "card",
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
+    style: (0, _vue.normalizeStyle)({
+      zIndex: _ctx.floated ? _ctx.zIndex : undefined
+    }),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, [(0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  }, [(0, _vue.createElementVNode)("div", {
     ref: "cardFloater",
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('floater'), [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('floater'))),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.floaterWidth,
       height: _ctx.floaterHeight,
@@ -61,23 +64,25 @@ function render(_ctx, _cache) {
       left: _ctx.floaterLeft,
       overflow: _ctx.floaterOverflow,
       position: _ctx.floaterPosition,
-      borderRadius: _ctx.floating ? '0px' : undefined,
-      zIndex: _ctx.floated ? _ctx.zIndex : undefined,
-      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, border-radius " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : undefined
+      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : undefined
     })
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, () => [_ctx.src ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
-    key: 0,
-    class: (0, _vue.normalizeClass)(_ctx.n('image')),
-    style: (0, _vue.normalizeStyle)({
-      objectFit: _ctx.fit,
-      height: _ctx.toSizeUnit(_ctx.height),
-      width: _ctx.toSizeUnit(_ctx.width)
-    }),
-    src: _ctx.src,
-    alt: _ctx.alt
-  }, null, 14
-  /* CLASS, STYLE, PROPS */
-  , _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.createElementVNode)("div", {
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, () => {
+    var _ctx$imageHeight;
+
+    return [_ctx.src ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
+      key: 0,
+      class: (0, _vue.normalizeClass)(_ctx.n('image')),
+      style: (0, _vue.normalizeStyle)({
+        objectFit: _ctx.fit,
+        height: _ctx.toSizeUnit((_ctx$imageHeight = _ctx.imageHeight) != null ? _ctx$imageHeight : _ctx.height),
+        width: _ctx.toSizeUnit(_ctx.imageWidth)
+      }),
+      src: _ctx.src,
+      alt: _ctx.alt
+    }, null, 14
+    /* CLASS, STYLE, PROPS */
+    , _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true)];
+  }), (0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.n('container'))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
@@ -111,36 +116,37 @@ function render(_ctx, _cache) {
   /* CLASS, STYLE */
   )) : (0, _vue.createCommentVNode)("v-if", true)], 2
   /* CLASS */
-  ), _ctx.showToolBar ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  ), _ctx.showFloatingButtons ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('toolbar'), 'var--box')),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('floating-buttons'), 'var--box')),
     style: (0, _vue.normalizeStyle)({
       zIndex: _ctx.zIndex,
       opacity: _ctx.opacity,
       transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
     })
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "toolbar-close", {}, () => [(0, _vue.createVNode)(_component_var_button, {
-    size: "large",
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "close-button", {}, () => [(0, _vue.createVNode)(_component_var_button, {
+    "var-card-cover": "",
     round: "",
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('toolbar-close'), 'var-elevation--6')),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('close-button'), 'var-elevation--6')),
     onClick: (0, _vue.withModifiers)(_ctx.close, ["stop"])
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_var_icon, {
+      "var-card-cover": "",
       name: "window-close",
-      size: "24px"
-    })]),
+      class: (0, _vue.normalizeClass)(_ctx.n('close-button-icon'))
+    }, null, 8
+    /* PROPS */
+    , ["class"])]),
     _: 1
     /* STABLE */
 
   }, 8
   /* PROPS */
-  , ["class", "onClick"])]), (0, _vue.renderSlot)(_ctx.$slots, "toolbar-extra")], 6
+  , ["class", "onClick"])])], 6
   /* CLASS, STYLE */
   )) : (0, _vue.createCommentVNode)("v-if", true)], 6
   /* CLASS, STYLE */
-  )), [[_directive_ripple, {
-    disabled: !_ctx.ripple || _ctx.floater
-  }]]), (0, _vue.createElementVNode)("div", {
+  ), (0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.n('holder')),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.holderWidth,
@@ -148,9 +154,11 @@ function render(_ctx, _cache) {
     })
   }, null, 6
   /* CLASS, STYLE */
-  )], 2
-  /* CLASS */
-  );
+  )], 6
+  /* CLASS, STYLE */
+  )), [[_directive_ripple, {
+    disabled: !_ctx.ripple || _ctx.floater
+  }]]);
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -174,7 +182,7 @@ var _default = (0, _vue.defineComponent)({
     var floaterHeight = (0, _vue.ref)('100%');
     var floaterTop = (0, _vue.ref)('auto');
     var floaterLeft = (0, _vue.ref)('auto');
-    var floaterPosition = (0, _vue.ref)('static');
+    var floaterPosition = (0, _vue.ref)(undefined);
     var floaterOverflow = (0, _vue.ref)('hidden');
     var contentHeight = (0, _vue.ref)('0px');
     var opacity = (0, _vue.ref)('0');
@@ -182,7 +190,7 @@ var _default = (0, _vue.defineComponent)({
       zIndex
     } = (0, _zIndex.useZIndex)(() => props.floating, 1);
     var isRow = (0, _vue.computed)(() => props.layout === 'row');
-    var showToolBar = (0, _vue.ref)(false);
+    var showFloatingButtons = (0, _vue.ref)(false);
     var floated = (0, _vue.ref)(false);
     (0, _lock.useLock)(() => props.floating, () => isRow);
     var dropdownFloaterTop = 'auto';
@@ -211,7 +219,7 @@ var _default = (0, _vue.defineComponent)({
           floaterPosition.value = 'fixed';
           dropdownFloaterTop = floaterTop.value;
           dropdownFloaterLeft = floaterLeft.value;
-          showToolBar.value = true;
+          showFloatingButtons.value = true;
           yield (0, _elements.doubleRaf)();
           floaterTop.value = '0';
           floaterLeft.value = '0';
@@ -239,7 +247,7 @@ var _default = (0, _vue.defineComponent)({
       floaterLeft.value = dropdownFloaterLeft;
       contentHeight.value = '0px';
       opacity.value = '0';
-      showToolBar.value = false;
+      showFloatingButtons.value = false;
       dropper = setTimeout(() => {
         holderWidth.value = 'auto';
         holderHeight.value = 'auto';
@@ -250,7 +258,7 @@ var _default = (0, _vue.defineComponent)({
         dropdownFloaterTop = 'auto';
         dropdownFloaterLeft = 'auto';
         floaterOverflow.value = 'hidden';
-        floaterPosition.value = 'static';
+        floaterPosition.value = undefined;
         floated.value = false;
       }, props.floatingDuration);
     };
@@ -287,7 +295,7 @@ var _default = (0, _vue.defineComponent)({
       zIndex,
       isRow,
       close,
-      showToolBar,
+      showFloatingButtons,
       floated
     };
   }

package/lib/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 150px; --card-image-height: 200px; --card-row-height: 150px; --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-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 0px 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floater-toolbar-bottom: 16px; --card-floater-toolbar-right: 16px; --card-floater-toolbar-color: #fff; --card-floater-toolbar-close-size: 24px; --card-floater-toolbar-close-padding: 16px; --card-floater-toolbar-close-primary-color: #212121;}.var-card--layout-row { height: var(--card-row-height); position: relative;}.var-card__floater { border-radius: var(--card-border-radius); display: flex; flex-direction: column; line-height: var(--card-line-height); background: var(--card-background); 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 { flex-direction: row; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: 100%; 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;}.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;}.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;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__toolbar { position: fixed; bottom: var(--card-floater-toolbar-bottom); right: var(--card-floater-toolbar-right);}.var-card__toolbar-close { padding: var(--card-floater-toolbar-close-padding); background-color: var(--card-floater-toolbar-close-primary-color); color: var(--card-floater-toolbar-color);}.var-card__toolbar-close .var-icon { width: var(--card-floater-toolbar-close-size); height: var(--card-floater-toolbar-close-size); font-size: var(--card-floater-toolbar-close-size);}
+:root { --card-padding: 0 0 15px 0; --card-background: #fff; --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-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 0px 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;}.var-card { border-radius: var(--card-border-radius); overflow: hidden;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); 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__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.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;}.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;}.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;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__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] { padding: var(--card-close-button-padding); width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}

package/lib/card/card.less

@@ -2,8 +2,8 @@
 @card-background: #fff;
 @card-border-radius: 4px;
 @card-image-width: 100%;
-@card-row-image-width: 150px;
-@card-row-height: 150px;
+@card-row-image-width: 140px;
+@card-row-height: 140px;
 @card-image-height: 200px;
 @card-title-color: #333;
 @card-title-font-size: 20px;
@@ -25,12 +25,12 @@
 @card-footer-margin: 30px 0 0px 0;
 @card-line-height: 22px;
 @card-row-line-height: 1.5;
-@card-floater-toolbar-bottom: 16px;
-@card-floater-toolbar-right: 16px;
-@card-floater-toolbar-color: #fff;
-@card-floater-toolbar-close-size: 24px;
-@card-floater-toolbar-close-padding: 16px;
-@card-floater-toolbar-close-primary-color: #212121;
+@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;
 
 :root {
   --card-padding: @card-padding;
@@ -60,24 +60,22 @@
   --card-footer-margin: @card-footer-margin;
   --card-line-height: @card-line-height;
   --card-row-line-height: @card-row-line-height;
-  --card-floater-toolbar-bottom: @card-floater-toolbar-bottom;
-  --card-floater-toolbar-right: @card-floater-toolbar-right;
-  --card-floater-toolbar-color: @card-floater-toolbar-color;
-  --card-floater-toolbar-close-size: @card-floater-toolbar-close-size;
-  --card-floater-toolbar-close-padding: @card-floater-toolbar-close-padding;
-  --card-floater-toolbar-close-primary-color: @card-floater-toolbar-close-primary-color;
+  --card-floating-buttons-bottom: @card-floating-buttons-bottom;
+  --card-floating-buttons-right: @card-floating-buttons-right;
+  --card-floating-buttons-color: @card-floating-buttons-color;
+  --card-close-button-icon-size: @card-close-button-icon-size;
+  --card-close-button-size: @card-close-button-size;
+  --card-close-button-primary-color: @card-close-button-primary-color;
 }
 
 .var-card {
-  &--layout-row {
-    height: var(--card-row-height);
-    position: relative;
-  }
+  border-radius: var(--card-border-radius);
+  overflow: hidden;
 
   &__floater {
-    border-radius: var(--card-border-radius);
     display: flex;
     flex-direction: column;
+    position: static;
     line-height: var(--card-line-height);
     background: var(--card-background);
     transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
@@ -90,7 +88,10 @@
   }
 
   &--layout-row &__floater {
+    min-height: var(--card-row-height);
+    height: 100%;
     flex-direction: row;
+    position: relative;
     line-height: var(--card-row-line-height);
   }
 
@@ -102,7 +103,7 @@
 
   &--layout-row &__image {
     width: var(--card-row-image-width);
-    height: 100%;
+    height: auto;
     display: block;
     flex-shrink: 0;
   }
@@ -167,21 +168,21 @@
     transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
   }
 
-  &__toolbar {
+  &__floating-buttons {
     position: fixed;
-    bottom: var(--card-floater-toolbar-bottom);
-    right: var(--card-floater-toolbar-right);
+    bottom: var(--card-floating-buttons-bottom);
+    right: var(--card-floating-buttons-right);
+    color: var(--card-floating-buttons-color);
   }
 
-  &__toolbar-close {
-    padding: var(--card-floater-toolbar-close-padding);
-    background-color: var(--card-floater-toolbar-close-primary-color);
-    color: var(--card-floater-toolbar-color);
+  &__close-button[var-card-cover] {
+    padding: var(--card-close-button-padding);
+    width: var(--card-close-button-size);
+    height: var(--card-close-button-size);
+    background-color: var(--card-close-button-primary-color);
+  }
 
-    .var-icon {
-      width: var(--card-floater-toolbar-close-size);
-      height: var(--card-floater-toolbar-close-size);
-      font-size: var(--card-floater-toolbar-close-size);
-    }
+  &__close-button-icon[var-card-cover] {
+    font-size: var(--card-close-button-icon-size);
   }
 }

package/lib/card/props.js

@@ -16,10 +16,17 @@ var props = {
     validator: fitValidator,
     default: 'cover'
   },
+
+  /**
+   * @deprecated use imageHeight instead
+   */
   height: {
     type: [String, Number]
   },
-  width: {
+  imageHeight: {
+    type: [String, Number]
+  },
+  imageWidth: {
     type: [String, Number]
   },
   layout: {

package/lib/snackbar/style/index.js

@@ -1,8 +1,8 @@
 require('../../styles/common.css')
-require('../SnackbarSfc.css')
 require('../../styles/elevation.css')
 require('../../loading/loading.css')
 require('../../button/button.css')
 require('../../icon/icon.css')
 require('../snackbar.css')
 require('../coreSfc.css')
+require('../SnackbarSfc.css')

package/lib/snackbar/style/less.js

@@ -1,8 +1,8 @@
 require('../../styles/common.less')
-require('../SnackbarSfc.less')
 require('../../styles/elevation.less')
 require('../../loading/loading.less')
 require('../../button/button.less')
 require('../../icon/icon.less')
 require('../snackbar.less')
 require('../coreSfc.less')
+require('../SnackbarSfc.less')