snail.vue 1.0.51 → 1.0.52

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.
Files changed (6) hide show
  1. package/README.md +91 -0
  2. package/dist/snail.vue.d.ts +1 -1
  3. package/dist/snail.vue.js +5 -2
  4. package/dist/snail.vue.umd.js +5 -2
  5. package/dist/styles/snail.vue.vue.css +13 -13
  6. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,91 @@
1
+ # 1. **概述**
2
+
3
+ **snail.vue 基于 vue 3.x，实现一些常用功能模块，通过 MIT 协议开放使用：**
4
+
5
+ 1. **基于 vue 封装常用组件（如表单、列表、树、弹窗、容器、提示等组件），并不断补充**
6
+ 2. **提供基于 vue 的通用数据结构和事件模型**
7
+ 3. **对 vue 的部分功能做了再次封装，简化使用和生命周期管理**
8
+
9
+ # 2. **环境搭建**
10
+
11
+ ## 2.1. **依赖安装**
12
+
13
+ 1. **安装 npm 包**
14
+ 2. **注册依赖组件**
15
+ 3. **打包输出**
16
+
17
+ ## 2.2. **动态注册**
18
+
19
+ # 3. **使用说明**
20
+
21
+ ## 3.1. **base 基础组件**
22
+
23
+ **封装基础 vue 组件，如 Button、Select、Header、Icon、Search、Switch 等等**
24
+
25
+ **详细说明：**[https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8)
26
+
27
+ | **组件** | **简介** |
28
+ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
29
+ | [Button](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#s1zYq) | **按钮组件；集成 type、size 属性，封装大小和类型，简化使用** |
30
+ | [Choose](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#gCenb) | **选择组件；集成 radio、checkbook 常用功能，支持选项组；支持美化和原生两种渲染模式** |
31
+ | [Icon](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#xf4og) | **图标组件；使用 svg 进行图标绘，内置常用图标类型；并支持自定义图标绘制路径** |
32
+ | [Search](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#VoyjZ) | **搜索组件；封装搜索输入框、搜索按钮；支持自动完成等功能** |
33
+ | [Select](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#NPAQL) | **选项菜单组件；对原生 select 的扩充，支持多级选项，支持单选和多选等** |
34
+ | [Switch](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#sOSDT) | **开关组件；支持只读、v-model 绑定操纵** |
35
+ | [Reactive](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#LzpHK) | **响应式模块，非 vue 组件；对 vue 响应时做了封装，集成常用生命周期管理** |
36
+ | [Footer](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#Mk0Pf) | **尾部组件；和 Header 配套，封装确定、取消按钮；不常用** |
37
+ | [Header](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#jQkjV) | **头部组件；封装标题、关闭按钮，用于 page 和 dialog 模式；支持插槽** |
38
+
39
+ ## 3.2. **container 容器组件**
40
+
41
+ **实现对子组件的动态加载，如列表、树、滚动容器，折叠面板，动态组件等等；**
42
+
43
+ **详细说明：**[https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc)
44
+
45
+ | **组件** | **简介** |
46
+ | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
47
+ | [dynamic](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#NNGJt) | **动态组件；vue 的 Component 组件扩展，支持 url、name、object 方式加载异步组件，并支持 event、props、model、slot 等绑定** |
48
+ | [fold](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#sJOfO) | **折叠面板组件；通过 slot 加载实际内容，封装折叠 title 实现面板展开、收起功能** |
49
+ | [layout](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#lGmps) | **布局组件；实现上中下、左中右布局，通过 slot 指定每块内容** |
50
+ | [scroll](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#IcwVh) | **滚动组件；实现滚动条状态、事件封装，并通过 class、event 等方式对外，通过 slot 加载实际内容** |
51
+ | [sort](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#dKA7E) | **排序组件；集成 sortable.js 库，实现再次封装，暴露常见属性** |
52
+ | [table](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#UViu6) | **表格组件；封装表头、内容区域，基于 TableCol、TableRow 子组件对外做自定义渲染** |
53
+ | [tree](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#tKdSd) | **树组件；基于 nodes 渲染树，支持节点自定义，集成节点事件和本地搜索** |
54
+ | [wrapper](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#gita6) | **包裹层组件；作为常用组件的包裹层，自动实现组件在 page 和 popup 中展现，让内容组件关注核心逻辑即可** |
55
+
56
+ ## 3.3. **form 表单组件**
57
+
58
+ **封装表单专属组件，如 input、文件上传等**
59
+
60
+ **详细说明：**[https://www.yuque.com/snail-devx/js/wl1q8db0qms764eg](https://www.yuque.com/snail-devx/js/wl1q8db0qms764eg)
61
+
62
+ | **组件** | **简介** |
63
+ | ------------------------------------------------------------------- | ----------------------------------------------- |
64
+ | [input](https://www.yuque.com/snail-devx/js/wl1q8db0qms764eg#lw7O6) | **输入框组件，对原生 input 做美化，支持标题等** |
65
+
66
+ ## 3.4. **popup 弹窗组件**
67
+
68
+ **基于 IPopupManager 实现弹窗管理，自动管理弹窗层级、弹窗生命周期；提供基础 popup 弹窗方法；并扩展 dialog、follow、toast、confirm 弹窗方法**
69
+
70
+ **详细说明：**[https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2)
71
+
72
+ | **弹窗方法** | **简介** |
73
+ | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
74
+ | [usePopup](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#MF7uV) | **弹窗管理器接口实现接口，后续 popup、dialog 等弹窗的具体实现** |
75
+ | [popup](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#gppwu) | **通用弹窗方法；管理弹窗生成周期，自动分配弹层，实现属性、事件绑定** |
76
+ | [dialog](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#YZ42j) | **模态弹窗；利用 popup 实现弹窗遮罩，支持关闭前拦截** |
77
+ | [follow](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#lMTk5) | **跟随弹窗；弹窗自动跟随指定 target 元素，实现高度、宽度跟随、位置跟随、位置智能感知** |
78
+ | [toast](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#FWNH1) | **消息提示弹窗；模拟 Android 的 Toast 弹窗提示消息** |
79
+ | [confirm](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#wohc0) | **确认弹窗；模拟实现原生 confirm 弹窗** |
80
+
81
+ ## 3.5. **prompt 提示组件**
82
+
83
+ **封装一些提示性质的通用组件，如数据加载状态、无数据提醒等等**
84
+
85
+ **详细说明：**[https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw)
86
+
87
+ | **组件** | **简介** |
88
+ | ------------------------------------------------------------------------- | ------------------------------------------------------ |
89
+ | [drag-verify](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#YN3YF) | **拖拽验证组件；拖动滑块验证，给出验证提示和结果信息** |
90
+ | [empty](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#qZsqi) | **空组件；用于提示无数据、无搜索结果等空状态** |
91
+ | [loading](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#IuBmQ) | **加载组件；用于在数据加载过程中进行加载提示** |
package/dist/snail.vue.d.ts CHANGED
@@ -1094,7 +1094,7 @@ type ChooseEvents<T> = {
1094
1094
  /**
1095
1095
  * 按钮配置选项
1096
1096
  */
1097
- type ButtonOptions = {
1097
+ type ButtonOptions = TitleOptions & {
1098
1098
  /**
1099
1099
  * 按钮尺寸
1100
1100
  * - max ： 120 X 40
package/dist/snail.vue.js CHANGED
@@ -3,6 +3,7 @@ import { defineComponent, createElementBlock, openBlock, normalizeClass, renderS
3
3
  import { throwError, isArrayNotEmpty, isStringNotEmpty, isArray, newId, mustFunction, useScope, removeFromArray, mustObject, throwIfFalse, isObject, isNumberNotNaN, mountScope, useScopes, isPromise, wait, script, delay, useTimer, defer, useAsyncScope, useHook, hasAny, throwIfTrue, isFunction, onMountScope } from 'snail.core';
4
4
  import { link, css, useObserver, useAnimation } from 'snail.view';
5
5
 
6
+ const _hoisted_1$g = ["title"];
6
7
  var _sfc_main$t = defineComponent({
7
8
  ...{
8
9
  name: "Button",
@@ -10,14 +11,16 @@ var _sfc_main$t = defineComponent({
10
11
  },
11
12
  __name: "button",
12
13
  props: {
14
+ title: {},
13
15
  size: {},
14
16
  type: {}
15
17
  },
16
18
  setup(__props) {
17
19
  return (_ctx, _cache) => {
18
20
  return openBlock(), createElementBlock("div", {
19
- class: normalizeClass(["snail-button", [_ctx.size, _ctx.type]])
20
- }, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("按钮"))])], 2);
21
+ class: normalizeClass(["snail-button", [_ctx.size, _ctx.type]]),
22
+ title: _ctx.title
23
+ }, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("按钮"))])], 10, _hoisted_1$g);
21
24
  };
22
25
  }
23
26
  });
package/dist/snail.vue.umd.js CHANGED
@@ -5,6 +5,7 @@
5
5
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SnailVue = global.SnailVue || {}, global.Vue, global.Snail, global.SnailView));
6
6
  })(this, (function (exports, vue, snail_core, snail_view) { 'use strict';
7
7
 
8
+ const _hoisted_1$g = ["title"];
8
9
  var _sfc_main$t = vue.defineComponent({
9
10
  ...{
10
11
  name: "Button",
@@ -12,14 +13,16 @@
12
13
  },
13
14
  __name: "button",
14
15
  props: {
16
+ title: {},
15
17
  size: {},
16
18
  type: {}
17
19
  },
18
20
  setup(__props) {
19
21
  return (_ctx, _cache) => {
20
22
  return vue.openBlock(), vue.createElementBlock("div", {
21
- class: vue.normalizeClass(["snail-button", [_ctx.size, _ctx.type]])
22
- }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = vue.createTextVNode("按钮"))])], 2);
23
+ class: vue.normalizeClass(["snail-button", [_ctx.size, _ctx.type]]),
24
+ title: _ctx.title
25
+ }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = vue.createTextVNode("按钮"))])], 10, _hoisted_1$g);
23
26
  };
24
27
  }
25
28
  });
package/dist/styles/snail.vue.vue.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* src:base\button.vue index:0 */
2
- .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:flex;display:inline-flex;justify-content:center;-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}
2
+ .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}
3
3
  /* src:base\choose.vue index:0 */
4
4
  .snail-choose{align-items:center;display:flex;flex-wrap:wrap;overflow-x:hidden}.snail-choose>div.choose-item{align-items:center;cursor:pointer;display:flex;flex-shrink:0;margin:0 8px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-choose>div.choose-item:first-child{margin-left:0}.snail-choose>div.choose-item:after{content:"";height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.snail-choose>div.choose-item>input::checkmark{background-color:#2196f3;border-color:#2196f3}.snail-choose>div.choose-item>div.item-beautiful{align-items:center;display:flex;flex-shrink:0;justify-content:center;overflow:hidden}.snail-choose>div.choose-item>div.item-beautiful.radio{border-radius:50%;height:16px;width:16px}.snail-choose>div.choose-item>div.item-beautiful.checkbox{height:14px;width:14px}.snail-choose>div.choose-item>div.item-beautiful.item-unchecked{border:1px solid #8a9099}.snail-choose>div.choose-item>div.item-beautiful.item-checked{background-color:#4c9aff;border:1px solid #4c9aff}.snail-choose>div.choose-item>span{margin-left:4px}.snail-choose>div.choose-item>span.item-des{color:#8a9099}.snail-choose.readonly>div.choose-item{cursor:auto}.snail-choose.readonly>div.choose-item>div.item-beautiful.item-unchecked{opacity:.5}.snail-choose.readonly>div.choose-item>div.item-beautiful.item-checked{background-color:#d5d7db;border-color:#d5d7db}
5
5
  /* src:base\header.vue index:0 */
@@ -20,26 +20,26 @@
20
20
  .snail-fold{flex-shrink:0}.snail-fold>div.fold-header{align-items:center;display:flex;height:32px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-fold>div.fold-header:before{background-color:#2c97fb;content:"";height:18px;left:0;position:absolute;top:7px;width:4px}.snail-fold>div.fold-header>.subtitle,.snail-fold>div.fold-header>.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-fold>div.fold-header>.title{color:#2e3033;font-weight:bold;padding-left:20px}.snail-fold>div.fold-header>.subtitle{color:#8a9099;font-size:13px}.snail-fold>div.fold-header>div.status{align-items:flex-end;display:flex;flex:1;justify-content:flex-end}.snail-fold>div.fold-header>div.status>svg.snail-icon{transition:transform .2s ease}.snail-fold>div.fold-body{padding-left:20px}.snail-fold.expand>div.fold-header>div.status>svg.snail-icon{transform:rotate(-90deg)}.snail-fold.fold>div.fold-header>div.status>svg.snail-icon{transform:rotate(90deg)}
21
21
  /* src:container\layout.vue index:0 */
22
22
  .snail-layout{display:flex;height:100%;overflow:hidden;width:100%}.snail-layout>.layout-end,.snail-layout>.layout-start{flex-shrink:0}.snail-layout>.layout-body{flex:1}.snail-layout.horizontal{flex-direction:row}.snail-layout.horizontal>div{height:100%}.snail-layout.horizontal>.layout-end,.snail-layout.horizontal>.layout-start{width:-moz-fit-content;width:fit-content}.snail-layout.vertical{flex-direction:column}.snail-layout.vertical>div{width:100%}.snail-layout.vertical>.layout-end,.snail-layout.vertical>.layout-start{height:-moz-fit-content;height:fit-content}
23
- /* src:container\sort.vue index:0 */
24
- .snail-sort-drag{background:#fff;border:1px solid #4c9aff;border-radius:4px;cursor:move}.snail-sort-ghost{border:1px dashed #4c9aff;border-radius:4px}
25
- /* src:container\scroll.vue index:0 */
26
- .snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
27
23
  /* src:container\table.vue index:0 */
28
24
  .snail-table{display:flex;flex-direction:column}.snail-table>div.table-footer,.snail-table>div.table-header{align-items:center;display:flex;flex-shrink:0;width:100%}.snail-table>div.table-header{background-color:#fff;position:sticky!important;top:0;z-index:1}.snail-table>div.table-body{flex:1;width:100%}.snail-table.start-border>div.table-body>.table-row>.table-col:nth-child(n+2),.snail-table.start-border>div.table-footer>.table-col:nth-child(n+2),.snail-table.start-border>div.table-header>.table-col:nth-child(n+2){border-left:none!important}.snail-table.start-border>div.table-body>.table-row>.table-col,.snail-table.start-border>div.table-footer>.table-col{border-top:none!important}
29
- /* src:container\tree.vue index:0 */
30
- .snail-tree{background-color:#fff;display:flex;flex-direction:column}.snail-tree .snail-search{flex-shrink:0;margin:12px}.snail-tree .snail-scroll{flex:1}
31
- /* src:container\components\table-row.vue index:0 */
32
- .table-row{align-items:center;display:flex}
25
+ /* src:container\scroll.vue index:0 */
26
+ .snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
33
27
  /* src:container\components\table-col.vue index:0 */
34
28
  .table-col{align-items:center;display:flex;height:100%;white-space:nowrap}.table-col.left{justify-content:flex-start}.table-col.center{justify-content:center}.table-col.right{justify-content:flex-end}
29
+ /* src:container\sort.vue index:0 */
30
+ .snail-sort-drag{background:#fff;border:1px solid #4c9aff;border-radius:4px;cursor:move}.snail-sort-ghost{border:1px dashed #4c9aff;border-radius:4px}
31
+ /* src:container\components\table-row.vue index:0 */
32
+ .table-row{align-items:center;display:flex}
33
+ /* src:container\tree.vue index:0 */
34
+ .snail-tree{background-color:#fff;display:flex;flex-direction:column}.snail-tree .snail-search{flex-shrink:0;margin:12px}.snail-tree .snail-scroll{flex:1}
35
35
  /* src:container\wrapper.vue index:0 */
36
36
  .snail-wrapper{background-color:#fff;display:flex;flex-direction:column}.snail-wrapper>.snail-scroll{flex:1}.snail-wrapper.in-normal{flex:1;height:100%;overflow:hidden;width:100%}.snail-wrapper.in-popup{height:80%;min-width:800px;overflow:hidden;width:60%}
37
37
  /* src:form\input.vue index:0 */
38
38
  .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}
39
- /* src:prompt\empty.vue index:0 */
40
- .snail-empty{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:150px;width:100%}.snail-empty>img{height:60px;width:60px}.snail-empty>div.message{color:#babdc2;font-weight:400;padding:0 10px 10px}
41
39
  /* src:prompt\drag-verify.vue index:0 */
42
40
  .snail-drag-verify{background:#f8f9fa;border:1px solid #dddfed;border-radius:8px;height:40px;overflow:hidden;position:relative;width:100%}.snail-drag-verify>div{height:100%;width:100%}.snail-drag-verify>.drag-progress{background-color:#0c6;transition:width .5s ease-in-out}.snail-drag-verify>.drag-handle,.snail-drag-verify>.verify-message{left:0;position:absolute;top:0;transition:left .5s ease-in-out}.snail-drag-verify>.verify-message{background-image:-webkit-linear-gradient(left,#666,#666 45%,#fff 50%,#666 55%,#666);-webkit-text-fill-color:transparent;align-items:center;animation:snail-drag-verify 2s linear infinite;-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#7e848c;display:flex;font-size:12px;font-weight:400;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-drag-verify>.drag-handle{align-items:center;background-color:#fff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAnUExURQAAAGBQUGBaWmJZWWJYWGNYWGNZWWJYWGJZWWBYWGNYWGNZWWRYWIqwlb0AAAANdFJOUwAQMMDQoFBgcCCw4ECQ8pPMAAAAP0lEQVQI12NgwATTGBgawAwRBYZwMIPRiYErAcxSFmA0AjN4HBikBcCsUgYmQxQGE0wKphhIQrSzwAyEW4EOACHhB32zIad6AAAAAElFTkSuQmCC);background-position:50%;background-repeat:no-repeat;border-right:1px solid #dddfed;cursor:move;display:flex;justify-content:center;width:40px}.snail-drag-verify.dragging>.drag-handle,.snail-drag-verify.dragging>.drag-progress{transition:none!important}.snail-drag-verify.success>.verify-message{-webkit-text-fill-color:#fff;color:#fff}.snail-drag-verify.success>.drag-handle>svg{background:#76c61d;border-radius:50%;padding:4px}@keyframes snail-drag-verify{0%{background-position:0 0}to{background-position:-200% 0}}
41
+ /* src:prompt\empty.vue index:0 */
42
+ .snail-empty{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:150px;width:100%}.snail-empty>img{height:60px;width:60px}.snail-empty>div.message{color:#babdc2;font-weight:400;padding:0 10px 10px}
43
43
  /* src:prompt\loading.vue index:0 */
44
44
  .snail-loading{height:100%;left:0;position:absolute;top:0;width:100%;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 .3s ease-in-out}.snail-loading-enter-from,.snail-loading-leave-to{opacity:0}
45
45
  /* src:popup\components\confirm-container.vue index:0 */
@@ -48,10 +48,10 @@
48
48
  .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)}
49
49
  /* src:popup\components\follow-container.vue index:0 */
50
50
  .snail-follow{background-color:#fff;display:inline-block;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}
51
- /* src:popup\components\toast-container.vue index:0 */
52
- .snail-toast{background:rgba(0,0,0,.7);border-radius:10px;color:#fff;display:flex;left:50%;max-height:200px;max-width:400px;min-width:200px;overflow:hidden;padding:20px 35px 20px 15px;position:fixed;top:50%;transform:translate(-50%,-50%)}.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;padding:2px}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
53
51
  /* src:popup\components\popup-container.vue index:0 */
54
52
  .snail-popup{left:0;position:fixed;top:0}
53
+ /* src:popup\components\toast-container.vue index:0 */
54
+ .snail-toast{background:rgba(0,0,0,.7);border-radius:10px;color:#fff;display:flex;left:50%;max-height:200px;max-width:400px;min-width:200px;overflow:hidden;padding:20px 35px 20px 15px;position:fixed;top:50%;transform:translate(-50%,-50%)}.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;padding:2px}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
55
55
  /* src:container\components\tree-node.vue index:0 */
56
56
  .snail-tree-node{align-items:center;display:flex;flex-wrap:nowrap;height:40px;width:100%}.snail-tree-node:hover{background-color:#f8f9fa}.snail-tree-node>.indent,.snail-tree-node>.node-slot,.snail-tree-node>.snail-icon{flex-shrink:0}.snail-tree-node>.node-fold{align-items:center;display:flex;height:100%;justify-content:center;width:24px}.snail-tree-node>.node-fold>.snail-icon{transition:transform .1s ease-in}.snail-tree-node>.node-fold>.snail-icon.fold{transform:rotate(-90deg)}.snail-tree-node>.node-slot,.snail-tree-node>.node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snail-tree-node>.node-text{color:#2e3033;flex:1;min-width:30px}.snail-tree-node.clickable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-tree-children{width:100%}.snail-tree-children.hidden{display:none;height:0;overflow:hidden}.snail-tree-node.level-1>.indent{padding-left:4px}.snail-tree-node.level-2>.indent{padding-left:24px}.snail-tree-node.level-3>.indent{padding-left:48px}.snail-tree-node.level-4>.indent{padding-left:72px}.snail-tree-node.level-5>.indent{padding-left:96px}.snail-tree-node.level-6>.indent{padding-left:120px}.snail-tree-node.level-7>.indent{padding-left:144px}.snail-tree-node.level-8>.indent{padding-left:168px}.snail-tree-node.level-9>.indent{padding-left:192px}.snail-tree-node.level-10>.indent{padding-left:216px}
57
57
  /* src:base\components\select-popup.vue index:0 */
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.51",
6
+ "version": "1.0.52",
7
7
  "type": "module",
8
8
  "main": "dist/snail.vue.js",
9
9
  "module": "dist/snail.vue.js",