snail.vue 1.0.51 → 1.0.53

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 +17 -2
  3. package/dist/snail.vue.js +40 -33
  4. package/dist/snail.vue.umd.js +38 -31
  5. package/dist/styles/snail.vue.vue.css +12 -12
  6. package/package.json +2 -2
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
@@ -832,7 +832,22 @@ type SelectItem<T> = TreeNode<T, TreeNodeExtend & {
832
832
  * 选项菜单组件 配置选项
833
833
  * - value 已选的【选择项】;单选时，为【选择项】路径（父->子）；其他情况为已选的【选择项】
834
834
  */
835
- type SelectOptions<T> = ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<T> & ValueOptions<SelectItem<T>[]> & {};
835
+ type SelectOptions<T> = ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<T> & ValueOptions<SelectItem<T>[]> & {
836
+ /** 父类<see cref="SelectBaseOptions"/>已有属性：
837
+ * items 【选择项】集合
838
+ * search 启用 【搜索】功能
839
+ * searchPlaceholder 搜索框提示语
840
+ * multiple 是否【多选模式】
841
+ * showPath 显示选项路径
842
+ * popupStyle 弹出的选项选择窗体样式
843
+ */
844
+ /**
845
+ * 选项分隔符
846
+ * - 单选有多级时的分割路径；默认为 /
847
+ * - 多选时分割多个选项；默认为 、
848
+ */
849
+ separator?: string;
850
+ };
836
851
  /**
837
852
  * 选项菜单 组件 事件
838
853
  */
@@ -1094,7 +1109,7 @@ type ChooseEvents<T> = {
1094
1109
  /**
1095
1110
  * 按钮配置选项
1096
1111
  */
1097
- type ButtonOptions = {
1112
+ type ButtonOptions = TitleOptions & {
1098
1113
  /**
1099
1114
  * 按钮尺寸
1100
1115
  * - max ： 120 X 40
package/dist/snail.vue.js CHANGED
@@ -1,8 +1,9 @@
1
1
  //@ sourceURL=/snail.vue.js
2
2
  import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, normalizeStyle, createElementVNode, toDisplayString, Fragment, renderList, unref, mergeModels, useModel, computed, createCommentVNode, createBlock, nextTick, withDirectives, vModelText, createVNode, createApp, Transition, withCtx, normalizeProps, guardReactiveProps, watch, ref, onErrorCaptured, resolveDynamicComponent, mergeProps, createSlots, onMounted, withModifiers, isRef, getCurrentInstance, useTemplateRef, resolveComponent, onBeforeUnmount, getCurrentScope, onScopeDispose } from 'vue';
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
- import { link, css, useObserver, useAnimation } from 'snail.view';
3
+ import { throwError, isArrayNotEmpty, isStringNotEmpty, useKey, isArray, mustFunction, useScope, removeFromArray, mustObject, throwIfFalse, isObject, isNumberNotNaN, mountScope, useScopes, isPromise, wait, script, delay, useTimer, defer, useAsyncScope, useHook, newId, hasAny, throwIfTrue, isFunction, onMountScope } from 'snail.core';
4
+ import { css, link, 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,22 +11,20 @@ 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
  });
24
27
 
25
- var addLink = href => setTimeout(link.register, 0, href);
26
-
27
- addLink("/styles/snail.vue.vue.css");
28
-
29
28
  function getSvgDraw(iconType, draw) {
30
29
  switch (iconType) {
31
30
  case "success":
@@ -140,65 +139,71 @@ var _sfc_main$r = defineComponent({
140
139
  const {
141
140
  mode = "native"
142
141
  } = props;
142
+ const {
143
+ getKey
144
+ } = useKey();
143
145
  const valuesModel = useModel(__props, "modelValue");
144
146
  props.multi && isArray(valuesModel.value) == false && (valuesModel.value = []);
145
147
  const chooseItemsRef = computed(() => props.items.map(item => {
146
148
  return {
147
- ...item,
148
- checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value,
149
- key: newId()
149
+ item,
150
+ checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
150
151
  };
151
152
  }));
152
- function onItemClick(item, index) {
153
+ function onItemClick(node, index) {
153
154
  if (props.readonly == true) {
154
155
  return;
155
156
  }
156
157
  if (props.multi == true) {
157
- item.checked = !item.checked;
158
- valuesModel.value = chooseItemsRef.value.filter(item2 => item2.checked).map(item2 => item2.value);
158
+ node.checked = !node.checked;
159
+ valuesModel.value = chooseItemsRef.value.filter(item => item.checked).map(item => item.item.value);
159
160
  } else {
160
- const newChecked = props.type == "checkbox" && props.items.length == 1 ? !item.checked : true;
161
- chooseItemsRef.value.forEach(item2 => item2.checked = false);
162
- item.checked = newChecked;
163
- valuesModel.value = newChecked ? item.value : void 0;
161
+ const newChecked = props.type == "checkbox" && props.items.length == 1 ? !node.checked : true;
162
+ chooseItemsRef.value.forEach(item => item.checked = false);
163
+ node.checked = newChecked;
164
+ valuesModel.value = newChecked ? node.item.value : void 0;
164
165
  }
165
166
  nextTick(() => emits("change", valuesModel.value));
166
167
  }
167
168
  return (_ctx, _cache) => {
168
169
  return openBlock(), createElementBlock("div", {
169
170
  class: normalizeClass(["snail-choose", _ctx.readonly ? "readonly" : ""])
170
- }, [(openBlock(true), createElementBlock(Fragment, null, renderList(chooseItemsRef.value, (item, index) => {
171
+ }, [(openBlock(true), createElementBlock(Fragment, null, renderList(chooseItemsRef.value, (node, index) => {
171
172
  return openBlock(), createElementBlock("div", {
172
- key: item.key,
173
- class: normalizeClass(["choose-item", item.checked ? "checked" : ""]),
173
+ key: unref(getKey)(node.item),
174
+ class: normalizeClass(["choose-item", node.checked ? "checked" : ""]),
174
175
  style: normalizeStyle(unref(css).buildStyle(_ctx.itemStyle)),
175
- onClick: $event => onItemClick(item)
176
+ onClick: $event => onItemClick(node)
176
177
  }, [unref(mode) == "native" ? (openBlock(), createElementBlock("input", {
177
178
  key: 0,
178
179
  type: _ctx.type,
179
- checked: item.checked
180
+ checked: node.checked
180
181
  }, null, 8, _hoisted_2$9)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
181
182
  key: 1,
182
- class: normalizeClass(["item-beautiful", [_ctx.type, item.checked ? "item-checked" : "item-unchecked"]])
183
- }, [item.checked ? (openBlock(), createBlock(_sfc_main$s, {
183
+ class: normalizeClass(["item-beautiful", [_ctx.type, node.checked ? "item-checked" : "item-unchecked"]])
184
+ }, [node.checked ? (openBlock(), createBlock(_sfc_main$s, {
184
185
  key: 0,
185
186
  type: "success",
186
187
  size: 12,
187
188
  color: _ctx.readonly ? "#8a9099" : "white"
188
- }, null, 8, ["color"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), item.text ? (openBlock(), createElementBlock("span", {
189
+ }, null, 8, ["color"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), node.item.text ? (openBlock(), createElementBlock("span", {
189
190
  key: 2,
190
191
  class: "item-text",
191
- textContent: toDisplayString(item.text)
192
- }, null, 8, _hoisted_3$6)) : createCommentVNode("", true), item.description ? (openBlock(), createElementBlock("span", {
192
+ textContent: toDisplayString(node.item.text)
193
+ }, null, 8, _hoisted_3$6)) : createCommentVNode("", true), node.item.description ? (openBlock(), createElementBlock("span", {
193
194
  key: 3,
194
195
  class: "item-des",
195
- textContent: toDisplayString(item.description)
196
+ textContent: toDisplayString(node.item.description)
196
197
  }, null, 8, _hoisted_4$4)) : createCommentVNode("", true)], 14, _hoisted_1$e);
197
198
  }), 128))], 2);
198
199
  };
199
200
  }
200
201
  });
201
202
 
203
+ var addLink = href => setTimeout(link.register, 0, href);
204
+
205
+ addLink("/styles/snail.vue.vue.css");
206
+
202
207
  var _sfc_main$q = defineComponent({
203
208
  ...{
204
209
  name: "Footer",
@@ -1273,7 +1278,7 @@ function searchPath(nodes, target) {
1273
1278
  return [];
1274
1279
  }
1275
1280
 
1276
- function useSelectContext(items, selectsRef) {
1281
+ function useSelectContext(items, selectsRef, separator) {
1277
1282
  function selected(multiple, item) {
1278
1283
  if (selectsRef.value) {
1279
1284
  return multiple == true ? selectsRef.value.includes(item) : selectsRef.value[selectsRef.value.length - 1] == item;
@@ -1281,8 +1286,9 @@ function useSelectContext(items, selectsRef) {
1281
1286
  return false;
1282
1287
  }
1283
1288
  function selectedText(multiple, showPath) {
1289
+ const tmpSeparator = separator || (multiple ? "、" : " / ");
1284
1290
  if (selectsRef.value && selectsRef.value.length) {
1285
- return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(multiple ? "、" : " / ") : selectsRef.value[selectsRef.value.length - 1].text;
1291
+ return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(tmpSeparator) : selectsRef.value[selectsRef.value.length - 1].text;
1286
1292
  }
1287
1293
  return "";
1288
1294
  }
@@ -1647,7 +1653,8 @@ var _sfc_main$d = defineComponent({
1647
1653
  type: Boolean
1648
1654
  },
1649
1655
  popupStyle: {},
1650
- value: {}
1656
+ value: {},
1657
+ separator: {}
1651
1658
  },
1652
1659
  emits: ["change"],
1653
1660
  setup(__props, _ref) {
@@ -1664,7 +1671,7 @@ var _sfc_main$d = defineComponent({
1664
1671
  } = useTimer();
1665
1672
  const rootDom = useTemplateRef("select");
1666
1673
  const selectedItemsRef = shallowRef(Array.isArray(props.value) ? [...props.value] : []);
1667
- const context = useSelectContext(props.items, selectedItemsRef);
1674
+ const context = useSelectContext(props.items, selectedItemsRef, props.separator);
1668
1675
  const selectedTextRef = computed(() => context.selectedText(props.multiple, props.showPath));
1669
1676
  const slotOptions = Object.freeze({
1670
1677
  clear
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,22 +13,20 @@
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
  });
26
29
 
27
- var addLink = href => setTimeout(snail_view.link.register, 0, href);
28
-
29
- addLink("/styles/snail.vue.vue.css");
30
-
31
30
  function getSvgDraw(iconType, draw) {
32
31
  switch (iconType) {
33
32
  case "success":
@@ -142,65 +141,71 @@
142
141
  const {
143
142
  mode = "native"
144
143
  } = props;
144
+ const {
145
+ getKey
146
+ } = snail_core.useKey();
145
147
  const valuesModel = vue.useModel(__props, "modelValue");
146
148
  props.multi && snail_core.isArray(valuesModel.value) == false && (valuesModel.value = []);
147
149
  const chooseItemsRef = vue.computed(() => props.items.map(item => {
148
150
  return {
149
- ...item,
150
- checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value,
151
- key: snail_core.newId()
151
+ item,
152
+ checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
152
153
  };
153
154
  }));
154
- function onItemClick(item, index) {
155
+ function onItemClick(node, index) {
155
156
  if (props.readonly == true) {
156
157
  return;
157
158
  }
158
159
  if (props.multi == true) {
159
- item.checked = !item.checked;
160
- valuesModel.value = chooseItemsRef.value.filter(item2 => item2.checked).map(item2 => item2.value);
160
+ node.checked = !node.checked;
161
+ valuesModel.value = chooseItemsRef.value.filter(item => item.checked).map(item => item.item.value);
161
162
  } else {
162
- const newChecked = props.type == "checkbox" && props.items.length == 1 ? !item.checked : true;
163
- chooseItemsRef.value.forEach(item2 => item2.checked = false);
164
- item.checked = newChecked;
165
- valuesModel.value = newChecked ? item.value : void 0;
163
+ const newChecked = props.type == "checkbox" && props.items.length == 1 ? !node.checked : true;
164
+ chooseItemsRef.value.forEach(item => item.checked = false);
165
+ node.checked = newChecked;
166
+ valuesModel.value = newChecked ? node.item.value : void 0;
166
167
  }
167
168
  vue.nextTick(() => emits("change", valuesModel.value));
168
169
  }
169
170
  return (_ctx, _cache) => {
170
171
  return vue.openBlock(), vue.createElementBlock("div", {
171
172
  class: vue.normalizeClass(["snail-choose", _ctx.readonly ? "readonly" : ""])
172
- }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(chooseItemsRef.value, (item, index) => {
173
+ }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(chooseItemsRef.value, (node, index) => {
173
174
  return vue.openBlock(), vue.createElementBlock("div", {
174
- key: item.key,
175
- class: vue.normalizeClass(["choose-item", item.checked ? "checked" : ""]),
175
+ key: vue.unref(getKey)(node.item),
176
+ class: vue.normalizeClass(["choose-item", node.checked ? "checked" : ""]),
176
177
  style: vue.normalizeStyle(vue.unref(snail_view.css).buildStyle(_ctx.itemStyle)),
177
- onClick: $event => onItemClick(item)
178
+ onClick: $event => onItemClick(node)
178
179
  }, [vue.unref(mode) == "native" ? (vue.openBlock(), vue.createElementBlock("input", {
179
180
  key: 0,
180
181
  type: _ctx.type,
181
- checked: item.checked
182
+ checked: node.checked
182
183
  }, null, 8, _hoisted_2$9)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
183
184
  key: 1,
184
- class: vue.normalizeClass(["item-beautiful", [_ctx.type, item.checked ? "item-checked" : "item-unchecked"]])
185
- }, [item.checked ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
185
+ class: vue.normalizeClass(["item-beautiful", [_ctx.type, node.checked ? "item-checked" : "item-unchecked"]])
186
+ }, [node.checked ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
186
187
  key: 0,
187
188
  type: "success",
188
189
  size: 12,
189
190
  color: _ctx.readonly ? "#8a9099" : "white"
190
- }, null, 8, ["color"])) : vue.createCommentVNode("", true)], 2)) : vue.createCommentVNode("", true), item.text ? (vue.openBlock(), vue.createElementBlock("span", {
191
+ }, null, 8, ["color"])) : vue.createCommentVNode("", true)], 2)) : vue.createCommentVNode("", true), node.item.text ? (vue.openBlock(), vue.createElementBlock("span", {
191
192
  key: 2,
192
193
  class: "item-text",
193
- textContent: vue.toDisplayString(item.text)
194
- }, null, 8, _hoisted_3$6)) : vue.createCommentVNode("", true), item.description ? (vue.openBlock(), vue.createElementBlock("span", {
194
+ textContent: vue.toDisplayString(node.item.text)
195
+ }, null, 8, _hoisted_3$6)) : vue.createCommentVNode("", true), node.item.description ? (vue.openBlock(), vue.createElementBlock("span", {
195
196
  key: 3,
196
197
  class: "item-des",
197
- textContent: vue.toDisplayString(item.description)
198
+ textContent: vue.toDisplayString(node.item.description)
198
199
  }, null, 8, _hoisted_4$4)) : vue.createCommentVNode("", true)], 14, _hoisted_1$e);
199
200
  }), 128))], 2);
200
201
  };
201
202
  }
202
203
  });
203
204
 
205
+ var addLink = href => setTimeout(snail_view.link.register, 0, href);
206
+
207
+ addLink("/styles/snail.vue.vue.css");
208
+
204
209
  var _sfc_main$q = vue.defineComponent({
205
210
  ...{
206
211
  name: "Footer",
@@ -1275,7 +1280,7 @@
1275
1280
  return [];
1276
1281
  }
1277
1282
 
1278
- function useSelectContext(items, selectsRef) {
1283
+ function useSelectContext(items, selectsRef, separator) {
1279
1284
  function selected(multiple, item) {
1280
1285
  if (selectsRef.value) {
1281
1286
  return multiple == true ? selectsRef.value.includes(item) : selectsRef.value[selectsRef.value.length - 1] == item;
@@ -1283,8 +1288,9 @@
1283
1288
  return false;
1284
1289
  }
1285
1290
  function selectedText(multiple, showPath) {
1291
+ const tmpSeparator = separator || (multiple ? "、" : " / ");
1286
1292
  if (selectsRef.value && selectsRef.value.length) {
1287
- return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(multiple ? "、" : " / ") : selectsRef.value[selectsRef.value.length - 1].text;
1293
+ return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(tmpSeparator) : selectsRef.value[selectsRef.value.length - 1].text;
1288
1294
  }
1289
1295
  return "";
1290
1296
  }
@@ -1649,7 +1655,8 @@
1649
1655
  type: Boolean
1650
1656
  },
1651
1657
  popupStyle: {},
1652
- value: {}
1658
+ value: {},
1659
+ separator: {}
1653
1660
  },
1654
1661
  emits: ["change"],
1655
1662
  setup(__props, _ref) {
@@ -1666,7 +1673,7 @@
1666
1673
  } = snail_core.useTimer();
1667
1674
  const rootDom = vue.useTemplateRef("select");
1668
1675
  const selectedItemsRef = vue.shallowRef(Array.isArray(props.value) ? [...props.value] : []);
1669
- const context = useSelectContext(props.items, selectedItemsRef);
1676
+ const context = useSelectContext(props.items, selectedItemsRef, props.separator);
1670
1677
  const selectedTextRef = vue.computed(() => context.selectedText(props.multiple, props.showPath));
1671
1678
  const slotOptions = Object.freeze({
1672
1679
  clear
package/dist/styles/snail.vue.vue.css CHANGED
@@ -1,13 +1,13 @@
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}
3
1
  /* src:base\choose.vue index:0 */
4
2
  .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
- /* src:base\header.vue index:0 */
6
- .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;width:100%}.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}
3
+ /* src:base\button.vue index:0 */
4
+ .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}
7
5
  /* src:base\footer.vue index:0 */
8
6
  .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}
9
7
  /* src:base\icon.vue index:0 */
10
8
  .snail-icon{cursor:pointer;opacity:1}
9
+ /* src:base\header.vue index:0 */
10
+ .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;width:100%}.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}
11
11
  /* src:base\search.vue index:0 */
12
12
  .snail-search{align-items:center;background:#fff;display:flex;flex-shrink:0;height:34px}.snail-search>input{border-radius:0!important;flex:1;height:100%}.snail-search>div{align-items:center;border:1px solid #dddfed;border-left:none;display:flex;flex-shrink:0;height:100%;justify-content:center;width:34px}
13
13
  /* src:base\select.vue index:0 */
@@ -20,38 +20,38 @@
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
23
  /* src:container\scroll.vue index:0 */
26
24
  .snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
25
+ /* src:container\sort.vue index:0 */
26
+ .snail-sort-drag{background:#fff;border:1px solid #4c9aff;border-radius:4px;cursor:move}.snail-sort-ghost{border:1px dashed #4c9aff;border-radius:4px}
27
27
  /* src:container\table.vue index:0 */
28
28
  .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
29
  /* src:container\components\table-row.vue index:0 */
32
30
  .table-row{align-items:center;display:flex}
33
31
  /* src:container\components\table-col.vue index:0 */
34
32
  .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}
35
33
  /* src:container\wrapper.vue index:0 */
36
34
  .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%}
35
+ /* src:prompt\drag-verify.vue index:0 */
36
+ .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}}
37
+ /* src:container\tree.vue index:0 */
38
+ .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}
37
39
  /* src:form\input.vue index:0 */
38
40
  .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
41
  /* src:prompt\empty.vue index:0 */
40
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}
41
- /* src:prompt\drag-verify.vue index:0 */
42
- .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}}
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 */
46
46
  .snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;display:flex;flex-direction:column;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}
47
47
  /* src:popup\components\dialog-container.vue index:0 */
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
- /* src:popup\components\follow-container.vue index:0 */
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
49
  /* src:popup\components\toast-container.vue index:0 */
52
50
  .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\follow-container.vue index:0 */
54
+ .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}
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.53",
7
7
  "type": "module",
8
8
  "main": "dist/snail.vue.js",
9
9
  "module": "dist/snail.vue.js",
@@ -14,7 +14,7 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "vue": "^3.5.14",
17
- "snail.core": ">=2.0.14",
17
+ "snail.core": ">=2.0.15",
18
18
  "snail.view": ">=1.0.24",
19
19
  "sortablejs": ">=1.15.6"
20
20
  },