snail.vue 1.0.16 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,15 +1,15 @@
1
1
  /* src:base\button.vue index:0 */
2
2
  .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:inline-flex;font-size:14px;justify-content:center;white-space:nowrap}.snail-button.max{height:40px;width:120px}.snail-button.middle{height:32px;width:80px}.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}
3
- /* src:base\icon.vue index:0 */
4
- .snail-icon{cursor:pointer;opacity:1}
5
3
  /* src:base\footer.vue index:0 */
6
4
  .snail-footer{align-items:center;background-color:#fff;display:flex;height:72px;padding:0 40px;width:100%}.snail-footer.start-divider{border-top:1px solid #dddfed}.snail-footer.left{justify-content:left}.snail-footer.left>.snail-button{margin-left:20px}.snail-footer.center{justify-content:center}.snail-footer.center>.snail-button:nth-child(n+2){margin-left:20px}.snail-footer.right{justify-content:right}.snail-footer.right>.snail-button{margin-right:20px}
5
+ /* src:base\header.vue index:0 */
6
+ .snail-header{align-items:center;background-color:#fff;display:flex;flex-direction:row;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding-left:24px;text-overflow:ellipsis;white-space:nowrap}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header>.header-slot{flex:1}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:700}.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}
7
+ /* src:base\icon.vue index:0 */
8
+ .snail-icon{cursor:pointer;opacity:1}
7
9
  /* src:container\dynamic.vue index:0 */
8
10
  .snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
9
11
  /* src:container\scroll.vue index:0 */
10
12
  .snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
11
- /* src:base\header.vue index:0 */
12
- .snail-header{align-items:center;background-color:#fff;display:flex;flex-direction:row;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding-left:24px;text-overflow:ellipsis;white-space:nowrap}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header>.header-slot{flex:1}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:700}.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}
13
13
  /* src:container\table.vue index:0 */
14
14
  .snail-table{display:flex;flex-direction:column}.snail-table>header.table-footer,.snail-table>header.table-header{align-items:center;display:flex;flex-shrink:0;width:100%}.snail-table>header.table-header{position:sticky!important;top:0}.snail-table>main.table-body{flex:1;width:100%}.snail-table>main.table-body>.table-row{align-items:center;display:flex}.snail-table>header.table-header>.table-col,.snail-table>main.table-body>.table-row>.table-col{align-items:center;display:inline-flex;height:100%;white-space:nowrap}.snail-table.start-border>header.table-header>.table-col:nth-child(n+2),.snail-table.start-border>main.table-body>.table-row>.table-col:nth-child(n+2),.snail-table.start-border>main.table-footer>.table-col:nth-child(n+2){border-left:none!important}.snail-table.start-border>main.table-body>.table-row>.table-col{border-top:none!important}
15
15
  /* src:prompt\drag-verify.vue index:0 */
@@ -18,9 +18,9 @@
18
18
  .snail-loading{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10000}.snail-loading.show-mask{background-color:rgba(0,0,0,.15)}.snail-loading:after,.snail-loading:before{animation:snail-loading-stretch 1s ease-in-out infinite;border-radius:50%;content:"";display:block;display:inline-block;height:10px;left:50%;margin-left:-18px;margin-top:-6px;position:absolute;top:50%;width:10px}.snail-loading:before{background-color:#279bf1}.snail-loading:after{animation-delay:-.5s;background:#64d214;margin-left:0;margin-right:-18px}@keyframes snail-loading-stretch{0%,to{transform:scale(1)}50%{transform:scale(2)}}.snail-loading-enter-active,.snail-loading-leave-active{transition:opacity .5s ease-in-out}.snail-loading-enter-from,.snail-loading-leave-to{opacity:0}
19
19
  /* src:prompt\no-data.vue index:0 */
20
20
  .snail-no-data{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.snail-no-data>img{height:60px;width:60px}.snail-no-data>div.hint-message{color:#babdc2;font-size:14px;font-weight:400;padding:0 10px 10px}
21
- /* src:prompt\components\toast.vue index:0 */
22
- .snail-toast{background:rgba(0,0,0,.7);border-radius:5px;color:#fff;display:flex;max-height:200px;max-width:500px;min-width:200px;opacity:.2;overflow:hidden;padding:20px 30px 20px 20px;position:fixed;transition:opacity .2s ease;z-index:99999}.snail-toast.show-toast{opacity:1}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
21
+ /* src:container\components\dialog-wrapper.vue index:0 */
22
+ .snail-dialog{align-items:center;bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0}.snail-dialog:before{background-color:rgba(24,27,33,.45);content:"";height:100%;position:absolute;width:100%}.snail-dialog>.dialog-body{background-color:#fff;border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.3);box-sizing:border-box;position:relative}.snail-dialog.unactive:before{display:none!important}.snail-dialog.unactive>.dialog-body{box-shadow:0 0 4px rgba(0,0,0,.3)}.snail-dialog-enter-active,.snail-dialog-leave-active{transition:scale .1s ease-in-out,opacity .1s ease}.snail-dialog-enter-from{opacity:0;scale:.4}.snail-dialog-leave-to{opacity:0;scale:0}
23
23
  /* src:prompt\components\confirm.vue index:0 */
24
24
  .snail-confirm{background-color:#fff;border-radius:4px;box-sizing:border-box;color:#2e2f33;display:flex;flex-direction:column;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>main{flex:1;font-size:14px;margin:30px 44px;overflow:auto;word-wrap:break-word;box-sizing:border-box}
25
- /* src:container\components\dialog-wrapper.vue index:0 */
26
- .snail-dialog{align-items:center;bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0}.snail-dialog:before{background-color:rgba(24,27,33,.45);content:"";height:100%;position:absolute;width:100%}.snail-dialog>.dialog-body{background-color:#fff;border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.3);box-sizing:border-box;position:relative}.snail-dialog.unactive:before{display:none!important}.snail-dialog.unactive>.dialog-body{box-shadow:0 0 4px rgba(0,0,0,.3)}.snail-dialog-enter-active,.snail-dialog-leave-active{transition:scale .1s ease-in-out,opacity .1s ease}.snail-dialog-enter-from{opacity:0;scale:.4}.snail-dialog-leave-to{opacity:0;scale:0}
25
+ /* src:prompt\components\toast.vue index:0 */
26
+ .snail-toast{background:rgba(0,0,0,.7);border-radius:5px;color:#fff;display:flex;max-height:200px;max-width:500px;min-width:200px;opacity:.2;overflow:hidden;padding:20px 30px 20px 20px;position:fixed;transition:opacity .2s ease;z-index:99999}.snail-toast.show-toast{opacity:1}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
@@ -1,5 +1,5 @@
1
1
  import * as vue from 'vue';
2
- import { Component, App } from 'vue';
2
+ import { Component, App, Ref, ShallowRef } from 'vue';
3
3
  import { IScope } from 'snail.core';
4
4
 
5
5
  /**
@@ -497,6 +497,21 @@ declare function onResize(el: Element, fn: (size: Readonly<{
497
497
  */
498
498
  declare function onRerect(el: Element, fn: (rect: DOMRectReadOnly) => void): IScope;
499
499
 
500
+ /**
501
+ * 响应式助手类,封装一些响应式相关的工具方法
502
+ */
503
+
504
+ /**
505
+ * 作用域ref
506
+ * - 在scope创建时,为响应式变量赋start值,destroy销毁时赋destroy值
507
+ * - 可和 snail.core 中的awaitInScope方法联动实现:api请求开始时显示loading,api请求结束后隐藏loading
508
+ * @param rv 响应式变量
509
+ * @param start 起始值,scope创建时执行 rv.value = start
510
+ * @param destroy 销毁值,scope销毁时执行 rv.value = destroy
511
+ * @returns 新创建的作用域对象
512
+ */
513
+ declare function scopeRef<T>(rv: Ref<T> | ShallowRef<T>, start: T, destroy: T): IScope;
514
+
500
515
  /**
501
516
  * 模态弹窗显示的组件配置选项
502
517
  */
@@ -894,5 +909,5 @@ declare const components: {
894
909
  */
895
910
  declare function mount(options: ComponentMountOptions, onDestroyed?: (fn: () => void) => void): IScope;
896
911
 
897
- export { components, confirm, getSvgIcon, mount, onAppCreated, onEvent, onInterval, onRerect, onResize, onTimeout, openDialog, toast, triggerAppCreated, useScopes };
912
+ export { components, confirm, getSvgIcon, mount, onAppCreated, onEvent, onInterval, onRerect, onResize, onTimeout, openDialog, scopeRef, toast, triggerAppCreated, useScopes };
898
913
  export type { ButtonOptions, ComponentMountOptions, ComponentOptions, ConfirmHandle, ConfirmOptions, Dialog, DialogHandle, DialogOpenResult, DialogOptions, DragVerifyInfo, DragVerifyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IconOptions, IconPathOptions, IconType, LoadingOptions, NoDataOptions, ScrollEvents, ScrollOptions, ScrollTouchType, TableColOptions, TableOptions, TableRowOptions, TableStyleOptions, ToastHandle, ToastOptions };
package/dist/snail.vue.js CHANGED
@@ -1,6 +1,6 @@
1
1
  //@ sourceURL=/snail.vue.js
2
2
  import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, createBlock, createCommentVNode, toDisplayString, createElementVNode, normalizeProps, guardReactiveProps, unref, computed, mergeProps, getCurrentScope, onScopeDispose, Transition, withCtx, ref, shallowRef, watch, onErrorCaptured, onActivated, onDeactivated, Fragment, resolveDynamicComponent, createSlots, renderList, normalizeStyle, TransitionGroup, withModifiers, createVNode, createApp, useTemplateRef, onMounted, onUnmounted } from 'vue';
3
- import { style, tidyString, throwError, mustString, mustFunction, throwIfFalse, isStringNotEmpty, isObject, script, delay, getMessage, hook, mustObject, defer, newId, isFunction } from 'snail.core';
3
+ import { tidyString, throwError, mustString, style, mustFunction, throwIfFalse, isStringNotEmpty, isObject, script, delay, getMessage, hook, mustObject, defer, newId, isFunction } from 'snail.core';
4
4
 
5
5
  var _sfc_main$e = defineComponent({
6
6
  ...{
@@ -22,10 +22,6 @@ var _sfc_main$e = defineComponent({
22
22
  }
23
23
  });
24
24
 
25
- var addLink = href => setTimeout(style.register, 0, href);
26
-
27
- addLink("/css/snail.vue.vue.css");
28
-
29
25
  var _sfc_main$d = defineComponent({
30
26
  ...{
31
27
  name: "Footer",
@@ -138,6 +134,10 @@ var _sfc_main$c = defineComponent({
138
134
  }
139
135
  });
140
136
 
137
+ var addLink = href => setTimeout(style.register, 0, href);
138
+
139
+ addLink("/css/snail.vue.vue.css");
140
+
141
141
  const _hoisted_1$6 = ["textContent"];
142
142
  var _sfc_main$b = defineComponent({
143
143
  ...{
@@ -306,6 +306,13 @@ function onRerect(el, fn) {
306
306
  };
307
307
  }
308
308
 
309
+ function scopeRef(rv, start, destroy) {
310
+ rv.value = start;
311
+ return {
312
+ destroy: () => rv.value = destroy
313
+ };
314
+ }
315
+
309
316
  var _sfc_main$a = defineComponent({
310
317
  ...{
311
318
  name: "Loading",
@@ -1029,4 +1036,4 @@ function mount(options, onDestroyed) {
1029
1036
  };
1030
1037
  }
1031
1038
 
1032
- export { components, confirm, getSvgIcon, mount, onAppCreated, onEvent, onInterval, onRerect, onResize, onTimeout, openDialog, toast, triggerAppCreated, useScopes };
1039
+ export { components, confirm, getSvgIcon, mount, onAppCreated, onEvent, onInterval, onRerect, onResize, onTimeout, openDialog, scopeRef, toast, triggerAppCreated, useScopes };
@@ -305,6 +305,13 @@
305
305
  };
306
306
  }
307
307
 
308
+ function scopeRef(rv, start, destroy) {
309
+ rv.value = start;
310
+ return {
311
+ destroy: () => rv.value = destroy
312
+ };
313
+ }
314
+
308
315
  var _sfc_main$a = vue.defineComponent({
309
316
  ...{
310
317
  name: "Loading",
@@ -1039,6 +1046,7 @@
1039
1046
  exports.onResize = onResize;
1040
1047
  exports.onTimeout = onTimeout;
1041
1048
  exports.openDialog = openDialog;
1049
+ exports.scopeRef = scopeRef;
1042
1050
  exports.toast = toast;
1043
1051
  exports.triggerAppCreated = triggerAppCreated;
1044
1052
  exports.useScopes = useScopes;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "依赖【snail】,基于vue封装常用UI组件",
4
4
  "author": "snail_dev@163.com",
5
5
  "license": "MIT",
6
- "version": "1.0.16",
6
+ "version": "1.0.17",
7
7
  "type": "module",
8
8
  "main": "dist/snail.vue.js",
9
9
  "module": "dist/snail.vue.js",
@@ -15,7 +15,7 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "vue": "^3.5.14",
18
- "snail.core": ">=1.2.11"
18
+ "snail.core": ">=1.2.12"
19
19
  },
20
20
  "devDependencies": {
21
21
  "vue-tsc": "^2.2.10",