snail.vue 2.0.21 → 2.0.22

package/dist/snail.vue.d.ts

@@ -1030,7 +1030,7 @@ type LayoutOptions = {
      * - 对应插槽名：main；主要内容显示区域，处于布局中的【中】区域
      * - 配置主内容区域的滚动条配置
      */
-    main?: Pick<LayoutAraeOptions<void>, "scroll">;
+    main?: Pick<LayoutAraeOptions<void>, "scroll" | "class">;
     /**
      * 【左侧】区域配置
      * - 对应插槽名`left` ；`mode` 为 `horizontal` 时生效
@@ -1062,6 +1062,11 @@ type LayoutOptions = {
  * 布局组件子区域 配置选项
  */
 type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & {
+    /**
+     * 子区域自定义类样式
+     * - 多个类样式，使用“ ”隔开
+     */
+    class?: string;
     /**
      * 滚动视图配置
      * - 视图属性：滚动条大小、显示时机

package/dist/snail.vue.js

@@ -1,7 +1,7 @@
 //@ sourceURL=/snail.vue.js
 import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, computed, mergeProps, unref, createElementVNode, toDisplayString, Fragment, renderList, mergeModels, useModel, normalizeStyle, createCommentVNode, createBlock, nextTick, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, withCtx, createApp, resolveDynamicComponent, TransitionGroup, Transition, normalizeProps, guardReactiveProps, ref, onErrorCaptured, createSlots, onMounted, withModifiers, getCurrentInstance, resolveComponent, vShow, onBeforeUnmount, onActivated, getCurrentScope, onScopeDispose } from 'vue';
 import { throwError, isObject, correctNumber, correctString, useKey, isArray, mountScope, useScopes, throwIfFalse, isPromise, wait, isNumberNotNaN, isStringNotEmpty, hasAny, mustFunction, useScope, removeFromArray, mustObject, isArrayNotEmpty, hasOwnProperty, isString, script, delay, useTimer, defer, useAsyncScope, useHook, newId, throwIfTrue, isFunction, isNullish, getTimeNumber, getDateValue, parseDate, formatDateValue, getDateByValue, parseTimeValue, getTimeValue, padStart, formatTimeValue, parseDateValue, correctDateFormat, isValidTime, getFromArray, onMountScope } from 'snail.core';
-import { css, link, useObserver, useScroll, useAnimation } from 'snail.view';
+import { link, css, useObserver, useScroll, useAnimation } from 'snail.view';
 
 const _hoisted_1$o = ["title"];
 var _sfc_main$F = defineComponent({
@@ -25,6 +25,10 @@ var _sfc_main$F = defineComponent({
   }
 });
 
+var addLink = href => setTimeout(link.register, 0, href);
+
+addLink("/styles/snail.vue.vue.css");
+
 function getBuiltinIcon(iconType) {
   switch (iconType) {
     case "success":
@@ -236,10 +240,6 @@ var _sfc_main$D = defineComponent({
   }
 });
 
-var addLink = href => setTimeout(link.register, 0, href);
-
-addLink("/styles/snail.vue.vue.css");
-
 var _sfc_main$C = defineComponent({
   ...{
     name: "Footer",
@@ -2586,7 +2586,9 @@ const _hoisted_1$a = {
   class: "snail-action flex-cross-center",
   ref: "snail-action"
 };
-const _hoisted_2$5 = ["title"];
+const _hoisted_2$5 = {
+  class: "action-slot flex-cross-center"
+};
 var _sfc_main$i = defineComponent({
   __name: "action",
   props: {
@@ -2662,10 +2664,7 @@ var _sfc_main$i = defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [createElementVNode("div", {
-        class: "action-slot flex-cross-center",
-        title: String(__props.trigger == "hover")
-      }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_2$5), __props.trigger == "hover" ? (openBlock(), createBlock(_sfc_main$E, {
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [createElementVNode("div", _hoisted_2$5, [renderSlot(_ctx.$slots, "default")]), __props.trigger == "hover" ? (openBlock(), createBlock(_sfc_main$E, {
         key: 0,
         class: "hover-tips",
         button: "",
@@ -3203,29 +3202,29 @@ var _sfc_main$d = defineComponent({
       const map = Object.create(null);
       map.main = {
         scrollable: props.main && props.main.scroll != void 0,
-        class: "main-area",
+        class: props.main && isStringNotEmpty(props.main.class) ? `main-area ${props.main.class}` : "main-area",
         style: void 0
       };
       if (props.mode == "vertical") {
         map.top = {
           scrollable: props.top && props.top.scroll != void 0,
-          class: "top-area",
+          class: props.top && isStringNotEmpty(props.top.class) ? `top-area ${props.top.class}` : "top-area",
           style: buildHeightStyle(props.top)
         };
         map.bottom = {
           scrollable: props.bottom && props.bottom.scroll != void 0,
-          class: "bottom-area",
+          class: props.bottom && isStringNotEmpty(props.bottom.class) ? `bottom-area ${props.bottom.class}` : "bottom-area",
           style: buildHeightStyle(props.bottom)
         };
       } else {
         map.left = {
           scrollable: props.left && props.left.scroll != void 0,
-          class: "left-area",
+          class: props.left && isStringNotEmpty(props.left.class) ? `left-area ${props.left.class}` : "left-area",
           style: buildWidthStyle(props.left)
         };
         map.right = {
           scrollable: props.right && props.right.scroll != void 0,
-          class: "right-area",
+          class: props.right && isStringNotEmpty(props.right.class) ? `right-area ${props.right.class}` : "right-area",
           style: buildWidthStyle(props.right)
         };
       }

package/dist/snail.vue.umd.js

@@ -27,6 +27,10 @@
     }
   });
 
+  var addLink = href => setTimeout(snail_view.link.register, 0, href);
+
+  addLink("/styles/snail.vue.vue.css");
+
   function getBuiltinIcon(iconType) {
     switch (iconType) {
       case "success":
@@ -238,10 +242,6 @@
     }
   });
 
-  var addLink = href => setTimeout(snail_view.link.register, 0, href);
-
-  addLink("/styles/snail.vue.vue.css");
-
   var _sfc_main$C = vue.defineComponent({
     ...{
       name: "Footer",
@@ -2588,7 +2588,9 @@
     class: "snail-action flex-cross-center",
     ref: "snail-action"
   };
-  const _hoisted_2$5 = ["title"];
+  const _hoisted_2$5 = {
+    class: "action-slot flex-cross-center"
+  };
   var _sfc_main$i = vue.defineComponent({
     __name: "action",
     props: {
@@ -2664,10 +2666,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createElementVNode("div", {
-          class: "action-slot flex-cross-center",
-          title: String(__props.trigger == "hover")
-        }, [vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_2$5), __props.trigger == "hover" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createElementVNode("div", _hoisted_2$5, [vue.renderSlot(_ctx.$slots, "default")]), __props.trigger == "hover" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
           key: 0,
           class: "hover-tips",
           button: "",
@@ -3205,29 +3204,29 @@
         const map = Object.create(null);
         map.main = {
           scrollable: props.main && props.main.scroll != void 0,
-          class: "main-area",
+          class: props.main && snail_core.isStringNotEmpty(props.main.class) ? `main-area ${props.main.class}` : "main-area",
           style: void 0
         };
         if (props.mode == "vertical") {
           map.top = {
             scrollable: props.top && props.top.scroll != void 0,
-            class: "top-area",
+            class: props.top && snail_core.isStringNotEmpty(props.top.class) ? `top-area ${props.top.class}` : "top-area",
             style: buildHeightStyle(props.top)
           };
           map.bottom = {
             scrollable: props.bottom && props.bottom.scroll != void 0,
-            class: "bottom-area",
+            class: props.bottom && snail_core.isStringNotEmpty(props.bottom.class) ? `bottom-area ${props.bottom.class}` : "bottom-area",
             style: buildHeightStyle(props.bottom)
           };
         } else {
           map.left = {
             scrollable: props.left && props.left.scroll != void 0,
-            class: "left-area",
+            class: props.left && snail_core.isStringNotEmpty(props.left.class) ? `left-area ${props.left.class}` : "left-area",
             style: buildWidthStyle(props.left)
           };
           map.right = {
             scrollable: props.right && props.right.scroll != void 0,
-            class: "right-area",
+            class: props.right && snail_core.isStringNotEmpty(props.right.class) ? `right-area ${props.right.class}` : "right-area",
             style: buildWidthStyle(props.right)
           };
         }

package/dist/styles/snail.vue.vue.css

@@ -2,12 +2,12 @@
 .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:flex;display:inline-flex;justify-content:center;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.snail-button.max{height:40px;width:120px}.snail-button.middle{height:32px;width:90px}.snail-button.normal{height:28px;width:54px}.snail-button.small{height:20px;width:30px}.snail-button.primary{background-color:#5ca3ff;color:#fff}.snail-button.default{background-color:#fff;border:1px solid #dddfed;color:#2e2f33}.snail-button.link{color:#4c9aff}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/choose.vue 	 index:0 */
 .snail-choose>div.choose-item{align-items:center;display:flex;flex-shrink:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-choose>div.choose-item:not(.readonly){cursor:pointer}.snail-choose>div.choose-item>input::checkmark{background-color:#2196f3;border-color:#2196f3}.snail-choose>div.choose-item>span{margin-left:4px}.snail-choose>div.choose-item>span.item-des{color:#8a9099}.snail-choose>div.choose-item>.item-text{color:#2e3033}.snail-choose>div.choose-item:after{content:"";height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.snail-choose.horizontal{align-items:center;display:flex;flex-wrap:wrap;overflow-x:hidden}.snail-choose.horizontal>div.choose-item{margin:0 8px}.snail-choose.horizontal>div.choose-item:first-child{margin-left:0}.snail-choose.vertical{display:flex;flex-direction:column;justify-content:center}.snail-choose.beautiful>.choose-item>.status{align-items:center;display:flex;flex-shrink:0;justify-content:center;overflow:hidden}.snail-choose.beautiful>.choose-item>.status.selected{background-color:#4c9aff;border:1px solid #4c9aff}.snail-choose.beautiful>.choose-item>.status:not(.selected){border:1px solid #dcdfe6}.snail-choose.beautiful.radio>.choose-item>.status{border-radius:50%;height:16px;width:16px}.snail-choose.beautiful.checkbox>.choose-item>.status{height:14px;width:14px}.snail-choose.beautiful.readonly>.choose-item>.status.selected{background-color:#d5d7db;border-color:#d5d7db}.snail-choose.beautiful.readonly>.choose-item>.status:not(.selected){opacity:.5}
+/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/footer.vue 	 index:0 */
+.snail-footer{align-items:center;background-color:#fff;display:flex;flex-shrink:0;height:72px;padding:0 40px;width:100%}.snail-footer>.snail-button:nth-child(n+2){margin-left:20px}.snail-footer.start-divider{border-top:1px solid #dddfed}.snail-footer.left{justify-content:flex-start}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:flex-end}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/header.vue 	 index:0 */
 .snail-header{align-items:center;background-color:#fff;display:flex;flex-shrink:0;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding:0 30px;text-overflow:ellipsis;white-space:nowrap}.snail-header>.header-title.left{text-align:left}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:bold}.snail-header.page>.close-icon{margin-right:18px}.snail-header.dialog{height:64px;padding-top:16px}.snail-header.dialog>.header-title{font-size:20px}.snail-header.dialog>.close-icon{position:absolute;right:8px;top:8px}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/icon.vue 	 index:0 */
 .snail-icon{fill:#8a8099;opacity:1;transition:all .2s linear}.snail-icon.button{cursor:pointer}
-/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/footer.vue 	 index:0 */
-.snail-footer{align-items:center;background-color:#fff;display:flex;flex-shrink:0;height:72px;padding:0 40px;width:100%}.snail-footer>.snail-button:nth-child(n+2){margin-left:20px}.snail-footer.start-divider{border-top:1px solid #dddfed}.snail-footer.left{justify-content:flex-start}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:flex-end}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/input.vue 	 index:0 */
 .snail-input{display:inline-flex;min-height:34px}.snail-input>.input-title{flex-shrink:0;padding-top:6px}.snail-input>.input-title>span.text{color:#2e3033}.snail-input>.input-title>span.required{color:#f74b4b;margin-left:2px}.snail-input>.input-body{align-self:start;display:flex;flex:1;height:32px}.snail-input>.input-body>input{flex:1}.snail-input>.input-body>span{background-color:red;flex-shrink:0}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/number.vue 	 index:0 */
@@ -18,10 +18,10 @@
 .snail-select{align-items:center;border:1px solid #dddfed;border-radius:4px;color:#2e3033;display:flex;height:32px;width:100%}.snail-select:not(.readonly){background-color:#fff}.snail-select:not(.readonly,.empty){cursor:pointer}.snail-select>div.select-result{align-items:center;display:flex;flex:1;flex-wrap:nowrap;height:30px;overflow:hidden;padding:0 10px 0 6px}.snail-select>div.placeholder{flex:1;padding:0 10px 0 6px}.snail-select>svg.snail-icon{flex-shrink:0;margin-right:4px}.snail-select>div.no-items{flex:1;padding:0 8px}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/switch.vue 	 index:0 */
 .snail-switch{border-radius:10px 10px 10px 10px;cursor:pointer;height:20px!important;overflow:hidden;position:relative;width:36px!important}.snail-switch>div{height:100%;width:100%}.snail-switch>div.on{background-color:#5ca3ff}.snail-switch>div.off{background-color:#c4c8cc;position:absolute;transition:left .2s ease}.snail-switch>div.status{background:#fff;border-radius:10px 10px 10px 10px;height:16px;position:absolute;top:2px;transition:left .2s ease;width:16px}.snail-switch.on>div.off{left:100%;top:0}.snail-switch.on>div.status{left:calc(100% - 18px)}.snail-switch.off>div.off{left:0;top:0}.snail-switch.off>div.status{left:2px}.snail-switch.readonly{cursor:not-allowed}
-/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/action.vue 	 index:0 */
-.snail-action,.snail-action *{-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-action>.action-slot{flex:1;overflow:hidden;position:relative}.snail-action>.hover-tips{display:none;flex-shrink:0}.snail-action:hover>.hover-tips{display:block}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/textarea.vue 	 index:0 */
 textarea.snail-textarea{font-size:14px;line-height:1.5em;overflow-x:hidden;overflow-y:auto;resize:none;width:100%}
+/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/action.vue 	 index:0 */
+.snail-action,.snail-action *{-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-action>.action-slot{flex:1;overflow:hidden;position:relative}.snail-action>.hover-tips{display:none;flex-shrink:0}.snail-action:hover>.hover-tips{display:block}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/dynamic.vue 	 index:0 */
 .snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/elastic.vue 	 index:0 */
@@ -66,10 +66,10 @@ textarea.snail-textarea{font-size:14px;line-height:1.5em;overflow-x:hidden;overf
 .snail-layout.date-picker.pc{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.12);height:300px!important;overflow:hidden!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:280px!important}.snail-layout.date-picker.pc.time-now:after{background-color:gray;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:100%}.snail-layout.date-picker.pc>.top-area{align-items:center;border-bottom:1px solid #eee;display:flex;flex-wrap:nowrap;padding:0 4px}.snail-layout.date-picker.pc>.top-area>svg{fill:#8a9099;flex-shrink:0}.snail-layout.date-picker.pc>.top-area>svg:hover{fill:#58a4fd}.snail-layout.date-picker.pc>.top-area>div.header-content{align-items:center;display:flex;flex:1;justify-content:center}.snail-layout.date-picker.pc>.top-area>div.header-content>div{align-items:center;display:flex;font-size:16px;height:100%}.snail-layout.date-picker.pc>.top-area>div.header-content>div:nth-child(2){margin-left:8px}.snail-layout.date-picker.pc>.top-area>div.header-content:not(.year)>div:hover{color:#58a4fd;cursor:pointer}.snail-layout.date-picker.pc>.main-area{display:flex;flex-wrap:wrap;justify-content:space-between}.snail-layout.date-picker.pc>.main-area>div{align-items:center;display:flex;flex-shrink:0;font-size:13px;justify-content:center;position:relative}.snail-layout.date-picker.pc>.main-area>div>span{align-items:center;display:flex;height:28px;justify-content:center}.snail-layout.date-picker.pc>.main-area>div>span:hover{background:#f4f4f4;cursor:pointer}.snail-layout.date-picker.pc>.main-area>div.active>span{background-color:#58a4fd;color:#fff!important}.snail-layout.date-picker.pc>.main-area>div.active.disabled{opacity:.6}.snail-layout.date-picker.pc>.main-area>div.disabled>span{color:#aaa;cursor:not-allowed}.snail-layout.date-picker.pc>.main-area>div.day-item{height:30px;width:36px}.snail-layout.date-picker.pc>.main-area>div.day-item.week{font-weight:bold}.snail-layout.date-picker.pc>.main-area>div.day-item.active>span,.snail-layout.date-picker.pc>.main-area>div.day-item:hover>span{border-radius:100%;width:28px}.snail-layout.date-picker.pc>.main-area>div.day-item:not(.now-month)>span{color:#aaa}.snail-layout.date-picker.pc>.main-area>div.month-item,.snail-layout.date-picker.pc>.main-area>div.year-item{width:30%}.snail-layout.date-picker.pc>.main-area>div.month-item.active>span,.snail-layout.date-picker.pc>.main-area>div.month-item:hover>span,.snail-layout.date-picker.pc>.main-area>div.year-item.active>span,.snail-layout.date-picker.pc>.main-area>div.year-item:hover>span{border-radius:15px;padding:0 8px;width:-moz-fit-content;width:fit-content}.snail-layout.date-picker.pc>.bottom-area{align-items:center;border-top:1px solid #eee;display:flex;height:30px;justify-content:flex-end;padding-right:10px}.snail-layout.date-picker.pc>.bottom-area>.time-area{color:#58a4fd;cursor:pointer;font-size:12px;margin-left:10px;margin-right:auto}.snail-layout.date-picker.pc>.bottom-area>.snail-button{color:#999;font-size:12px;margin-left:4px}.snail-layout.date-picker.pc>.bottom-area>.snail-button:hover,.snail-layout.date-picker.pc>.bottom-area>.snail-button:last-child{color:#58a4fd}.snail-layout.date-picker.pc>.bottom-area>.snail-button.disabled{cursor:not-allowed;opacity:.6}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/confirm-container.vue 	 index:0 */
 .snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>div.confirm-body{flex:1;margin:20px 40px;overflow:auto;word-wrap:break-word}
-/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/dialog-container.vue 	 index:0 */
-.snail-dialog{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.snail-dialog:before{background-color:rgba(24,27,33,.45);content:"";height:100%;opacity:1;position:absolute;transition:opacity .4s ease-in-out;width:100%}.snail-dialog>.dialog-body{background-color:#fff;border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.3);position:relative}.snail-dialog.unactive:before{opacity:0}.snail-dialog.unactive>.dialog-body{box-shadow:0 0 4px rgba(0,0,0,.3)}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/follow-container.vue 	 index:0 */
 .snail-follow{background-color:#fff;max-height:100%;max-width:100%;position:fixed;transition-duration:.1s;transition-property:left,top;transition-timing-function:ease}.snail-follow.initial{top:100%;transition:none}
+/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/dialog-container.vue 	 index:0 */
+.snail-dialog{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.snail-dialog:before{background-color:rgba(24,27,33,.45);content:"";height:100%;opacity:1;position:absolute;transition:opacity .4s ease-in-out;width:100%}.snail-dialog>.dialog-body{background-color:#fff;border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.3);position:relative}.snail-dialog.unactive:before{opacity:0}.snail-dialog.unactive>.dialog-body{box-shadow:0 0 4px rgba(0,0,0,.3)}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/popup-container.vue 	 index:0 */
 .snail-popup{left:0;position:fixed;top:0}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/toast-container.vue 	 index:0 */

package/package.json

@@ -3,7 +3,7 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "2.0.21",
+  "version": "2.0.22",
   "type": "module",
   "main": "dist/snail.vue.js",
   "module": "dist/snail.vue.js",
@@ -15,7 +15,7 @@
   "dependencies": {
     "vue": "^3.5.14",
     "snail.core": ">=2.0.29",
-    "snail.view": ">=2.0.7",
+    "snail.view": ">=2.0.8",
     "sortablejs": ">=1.15.6"
   },
   "devDependencies": {