snail.vue 1.0.52 → 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.
- package/dist/snail.vue.d.ts +16 -1
- package/dist/snail.vue.js +35 -31
- package/dist/snail.vue.umd.js +33 -29
- package/dist/styles/snail.vue.vue.css +16 -16
- package/package.json +2 -2
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
|
*/
|
package/dist/snail.vue.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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,
|
|
4
|
-
import {
|
|
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
6
|
const _hoisted_1$g = ["title"];
|
|
7
7
|
var _sfc_main$t = defineComponent({
|
|
@@ -25,10 +25,6 @@ var _sfc_main$t = defineComponent({
|
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
27
|
|
|
28
|
-
var addLink = href => setTimeout(link.register, 0, href);
|
|
29
|
-
|
|
30
|
-
addLink("/styles/snail.vue.vue.css");
|
|
31
|
-
|
|
32
28
|
function getSvgDraw(iconType, draw) {
|
|
33
29
|
switch (iconType) {
|
|
34
30
|
case "success":
|
|
@@ -143,65 +139,71 @@ var _sfc_main$r = defineComponent({
|
|
|
143
139
|
const {
|
|
144
140
|
mode = "native"
|
|
145
141
|
} = props;
|
|
142
|
+
const {
|
|
143
|
+
getKey
|
|
144
|
+
} = useKey();
|
|
146
145
|
const valuesModel = useModel(__props, "modelValue");
|
|
147
146
|
props.multi && isArray(valuesModel.value) == false && (valuesModel.value = []);
|
|
148
147
|
const chooseItemsRef = computed(() => props.items.map(item => {
|
|
149
148
|
return {
|
|
150
|
-
|
|
151
|
-
checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
|
|
152
|
-
key: newId()
|
|
149
|
+
item,
|
|
150
|
+
checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
|
|
153
151
|
};
|
|
154
152
|
}));
|
|
155
|
-
function onItemClick(
|
|
153
|
+
function onItemClick(node, index) {
|
|
156
154
|
if (props.readonly == true) {
|
|
157
155
|
return;
|
|
158
156
|
}
|
|
159
157
|
if (props.multi == true) {
|
|
160
|
-
|
|
161
|
-
valuesModel.value = chooseItemsRef.value.filter(
|
|
158
|
+
node.checked = !node.checked;
|
|
159
|
+
valuesModel.value = chooseItemsRef.value.filter(item => item.checked).map(item => item.item.value);
|
|
162
160
|
} else {
|
|
163
|
-
const newChecked = props.type == "checkbox" && props.items.length == 1 ? !
|
|
164
|
-
chooseItemsRef.value.forEach(
|
|
165
|
-
|
|
166
|
-
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;
|
|
167
165
|
}
|
|
168
166
|
nextTick(() => emits("change", valuesModel.value));
|
|
169
167
|
}
|
|
170
168
|
return (_ctx, _cache) => {
|
|
171
169
|
return openBlock(), createElementBlock("div", {
|
|
172
170
|
class: normalizeClass(["snail-choose", _ctx.readonly ? "readonly" : ""])
|
|
173
|
-
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(chooseItemsRef.value, (
|
|
171
|
+
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(chooseItemsRef.value, (node, index) => {
|
|
174
172
|
return openBlock(), createElementBlock("div", {
|
|
175
|
-
key: item
|
|
176
|
-
class: normalizeClass(["choose-item",
|
|
173
|
+
key: unref(getKey)(node.item),
|
|
174
|
+
class: normalizeClass(["choose-item", node.checked ? "checked" : ""]),
|
|
177
175
|
style: normalizeStyle(unref(css).buildStyle(_ctx.itemStyle)),
|
|
178
|
-
onClick: $event => onItemClick(
|
|
176
|
+
onClick: $event => onItemClick(node)
|
|
179
177
|
}, [unref(mode) == "native" ? (openBlock(), createElementBlock("input", {
|
|
180
178
|
key: 0,
|
|
181
179
|
type: _ctx.type,
|
|
182
|
-
checked:
|
|
180
|
+
checked: node.checked
|
|
183
181
|
}, null, 8, _hoisted_2$9)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
|
|
184
182
|
key: 1,
|
|
185
|
-
class: normalizeClass(["item-beautiful", [_ctx.type,
|
|
186
|
-
}, [
|
|
183
|
+
class: normalizeClass(["item-beautiful", [_ctx.type, node.checked ? "item-checked" : "item-unchecked"]])
|
|
184
|
+
}, [node.checked ? (openBlock(), createBlock(_sfc_main$s, {
|
|
187
185
|
key: 0,
|
|
188
186
|
type: "success",
|
|
189
187
|
size: 12,
|
|
190
188
|
color: _ctx.readonly ? "#8a9099" : "white"
|
|
191
|
-
}, 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", {
|
|
192
190
|
key: 2,
|
|
193
191
|
class: "item-text",
|
|
194
|
-
textContent: toDisplayString(item.text)
|
|
195
|
-
}, 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", {
|
|
196
194
|
key: 3,
|
|
197
195
|
class: "item-des",
|
|
198
|
-
textContent: toDisplayString(item.description)
|
|
196
|
+
textContent: toDisplayString(node.item.description)
|
|
199
197
|
}, null, 8, _hoisted_4$4)) : createCommentVNode("", true)], 14, _hoisted_1$e);
|
|
200
198
|
}), 128))], 2);
|
|
201
199
|
};
|
|
202
200
|
}
|
|
203
201
|
});
|
|
204
202
|
|
|
203
|
+
var addLink = href => setTimeout(link.register, 0, href);
|
|
204
|
+
|
|
205
|
+
addLink("/styles/snail.vue.vue.css");
|
|
206
|
+
|
|
205
207
|
var _sfc_main$q = defineComponent({
|
|
206
208
|
...{
|
|
207
209
|
name: "Footer",
|
|
@@ -1276,7 +1278,7 @@ function searchPath(nodes, target) {
|
|
|
1276
1278
|
return [];
|
|
1277
1279
|
}
|
|
1278
1280
|
|
|
1279
|
-
function useSelectContext(items, selectsRef) {
|
|
1281
|
+
function useSelectContext(items, selectsRef, separator) {
|
|
1280
1282
|
function selected(multiple, item) {
|
|
1281
1283
|
if (selectsRef.value) {
|
|
1282
1284
|
return multiple == true ? selectsRef.value.includes(item) : selectsRef.value[selectsRef.value.length - 1] == item;
|
|
@@ -1284,8 +1286,9 @@ function useSelectContext(items, selectsRef) {
|
|
|
1284
1286
|
return false;
|
|
1285
1287
|
}
|
|
1286
1288
|
function selectedText(multiple, showPath) {
|
|
1289
|
+
const tmpSeparator = separator || (multiple ? "、" : " / ");
|
|
1287
1290
|
if (selectsRef.value && selectsRef.value.length) {
|
|
1288
|
-
return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(
|
|
1291
|
+
return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(tmpSeparator) : selectsRef.value[selectsRef.value.length - 1].text;
|
|
1289
1292
|
}
|
|
1290
1293
|
return "";
|
|
1291
1294
|
}
|
|
@@ -1650,7 +1653,8 @@ var _sfc_main$d = defineComponent({
|
|
|
1650
1653
|
type: Boolean
|
|
1651
1654
|
},
|
|
1652
1655
|
popupStyle: {},
|
|
1653
|
-
value: {}
|
|
1656
|
+
value: {},
|
|
1657
|
+
separator: {}
|
|
1654
1658
|
},
|
|
1655
1659
|
emits: ["change"],
|
|
1656
1660
|
setup(__props, _ref) {
|
|
@@ -1667,7 +1671,7 @@ var _sfc_main$d = defineComponent({
|
|
|
1667
1671
|
} = useTimer();
|
|
1668
1672
|
const rootDom = useTemplateRef("select");
|
|
1669
1673
|
const selectedItemsRef = shallowRef(Array.isArray(props.value) ? [...props.value] : []);
|
|
1670
|
-
const context = useSelectContext(props.items, selectedItemsRef);
|
|
1674
|
+
const context = useSelectContext(props.items, selectedItemsRef, props.separator);
|
|
1671
1675
|
const selectedTextRef = computed(() => context.selectedText(props.multiple, props.showPath));
|
|
1672
1676
|
const slotOptions = Object.freeze({
|
|
1673
1677
|
clear
|
package/dist/snail.vue.umd.js
CHANGED
|
@@ -27,10 +27,6 @@
|
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
29
|
|
|
30
|
-
var addLink = href => setTimeout(snail_view.link.register, 0, href);
|
|
31
|
-
|
|
32
|
-
addLink("/styles/snail.vue.vue.css");
|
|
33
|
-
|
|
34
30
|
function getSvgDraw(iconType, draw) {
|
|
35
31
|
switch (iconType) {
|
|
36
32
|
case "success":
|
|
@@ -145,65 +141,71 @@
|
|
|
145
141
|
const {
|
|
146
142
|
mode = "native"
|
|
147
143
|
} = props;
|
|
144
|
+
const {
|
|
145
|
+
getKey
|
|
146
|
+
} = snail_core.useKey();
|
|
148
147
|
const valuesModel = vue.useModel(__props, "modelValue");
|
|
149
148
|
props.multi && snail_core.isArray(valuesModel.value) == false && (valuesModel.value = []);
|
|
150
149
|
const chooseItemsRef = vue.computed(() => props.items.map(item => {
|
|
151
150
|
return {
|
|
152
|
-
|
|
153
|
-
checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
|
|
154
|
-
key: snail_core.newId()
|
|
151
|
+
item,
|
|
152
|
+
checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
|
|
155
153
|
};
|
|
156
154
|
}));
|
|
157
|
-
function onItemClick(
|
|
155
|
+
function onItemClick(node, index) {
|
|
158
156
|
if (props.readonly == true) {
|
|
159
157
|
return;
|
|
160
158
|
}
|
|
161
159
|
if (props.multi == true) {
|
|
162
|
-
|
|
163
|
-
valuesModel.value = chooseItemsRef.value.filter(
|
|
160
|
+
node.checked = !node.checked;
|
|
161
|
+
valuesModel.value = chooseItemsRef.value.filter(item => item.checked).map(item => item.item.value);
|
|
164
162
|
} else {
|
|
165
|
-
const newChecked = props.type == "checkbox" && props.items.length == 1 ? !
|
|
166
|
-
chooseItemsRef.value.forEach(
|
|
167
|
-
|
|
168
|
-
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;
|
|
169
167
|
}
|
|
170
168
|
vue.nextTick(() => emits("change", valuesModel.value));
|
|
171
169
|
}
|
|
172
170
|
return (_ctx, _cache) => {
|
|
173
171
|
return vue.openBlock(), vue.createElementBlock("div", {
|
|
174
172
|
class: vue.normalizeClass(["snail-choose", _ctx.readonly ? "readonly" : ""])
|
|
175
|
-
}, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(chooseItemsRef.value, (
|
|
173
|
+
}, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(chooseItemsRef.value, (node, index) => {
|
|
176
174
|
return vue.openBlock(), vue.createElementBlock("div", {
|
|
177
|
-
key: item
|
|
178
|
-
class: vue.normalizeClass(["choose-item",
|
|
175
|
+
key: vue.unref(getKey)(node.item),
|
|
176
|
+
class: vue.normalizeClass(["choose-item", node.checked ? "checked" : ""]),
|
|
179
177
|
style: vue.normalizeStyle(vue.unref(snail_view.css).buildStyle(_ctx.itemStyle)),
|
|
180
|
-
onClick: $event => onItemClick(
|
|
178
|
+
onClick: $event => onItemClick(node)
|
|
181
179
|
}, [vue.unref(mode) == "native" ? (vue.openBlock(), vue.createElementBlock("input", {
|
|
182
180
|
key: 0,
|
|
183
181
|
type: _ctx.type,
|
|
184
|
-
checked:
|
|
182
|
+
checked: node.checked
|
|
185
183
|
}, null, 8, _hoisted_2$9)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
186
184
|
key: 1,
|
|
187
|
-
class: vue.normalizeClass(["item-beautiful", [_ctx.type,
|
|
188
|
-
}, [
|
|
185
|
+
class: vue.normalizeClass(["item-beautiful", [_ctx.type, node.checked ? "item-checked" : "item-unchecked"]])
|
|
186
|
+
}, [node.checked ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
|
|
189
187
|
key: 0,
|
|
190
188
|
type: "success",
|
|
191
189
|
size: 12,
|
|
192
190
|
color: _ctx.readonly ? "#8a9099" : "white"
|
|
193
|
-
}, 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", {
|
|
194
192
|
key: 2,
|
|
195
193
|
class: "item-text",
|
|
196
|
-
textContent: vue.toDisplayString(item.text)
|
|
197
|
-
}, 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", {
|
|
198
196
|
key: 3,
|
|
199
197
|
class: "item-des",
|
|
200
|
-
textContent: vue.toDisplayString(item.description)
|
|
198
|
+
textContent: vue.toDisplayString(node.item.description)
|
|
201
199
|
}, null, 8, _hoisted_4$4)) : vue.createCommentVNode("", true)], 14, _hoisted_1$e);
|
|
202
200
|
}), 128))], 2);
|
|
203
201
|
};
|
|
204
202
|
}
|
|
205
203
|
});
|
|
206
204
|
|
|
205
|
+
var addLink = href => setTimeout(snail_view.link.register, 0, href);
|
|
206
|
+
|
|
207
|
+
addLink("/styles/snail.vue.vue.css");
|
|
208
|
+
|
|
207
209
|
var _sfc_main$q = vue.defineComponent({
|
|
208
210
|
...{
|
|
209
211
|
name: "Footer",
|
|
@@ -1278,7 +1280,7 @@
|
|
|
1278
1280
|
return [];
|
|
1279
1281
|
}
|
|
1280
1282
|
|
|
1281
|
-
function useSelectContext(items, selectsRef) {
|
|
1283
|
+
function useSelectContext(items, selectsRef, separator) {
|
|
1282
1284
|
function selected(multiple, item) {
|
|
1283
1285
|
if (selectsRef.value) {
|
|
1284
1286
|
return multiple == true ? selectsRef.value.includes(item) : selectsRef.value[selectsRef.value.length - 1] == item;
|
|
@@ -1286,8 +1288,9 @@
|
|
|
1286
1288
|
return false;
|
|
1287
1289
|
}
|
|
1288
1290
|
function selectedText(multiple, showPath) {
|
|
1291
|
+
const tmpSeparator = separator || (multiple ? "、" : " / ");
|
|
1289
1292
|
if (selectsRef.value && selectsRef.value.length) {
|
|
1290
|
-
return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(
|
|
1293
|
+
return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(tmpSeparator) : selectsRef.value[selectsRef.value.length - 1].text;
|
|
1291
1294
|
}
|
|
1292
1295
|
return "";
|
|
1293
1296
|
}
|
|
@@ -1652,7 +1655,8 @@
|
|
|
1652
1655
|
type: Boolean
|
|
1653
1656
|
},
|
|
1654
1657
|
popupStyle: {},
|
|
1655
|
-
value: {}
|
|
1658
|
+
value: {},
|
|
1659
|
+
separator: {}
|
|
1656
1660
|
},
|
|
1657
1661
|
emits: ["change"],
|
|
1658
1662
|
setup(__props, _ref) {
|
|
@@ -1669,7 +1673,7 @@
|
|
|
1669
1673
|
} = snail_core.useTimer();
|
|
1670
1674
|
const rootDom = vue.useTemplateRef("select");
|
|
1671
1675
|
const selectedItemsRef = vue.shallowRef(Array.isArray(props.value) ? [...props.value] : []);
|
|
1672
|
-
const context = useSelectContext(props.items, selectedItemsRef);
|
|
1676
|
+
const context = useSelectContext(props.items, selectedItemsRef, props.separator);
|
|
1673
1677
|
const selectedTextRef = vue.computed(() => context.selectedText(props.multiple, props.showPath));
|
|
1674
1678
|
const slotOptions = Object.freeze({
|
|
1675
1679
|
clear
|
|
@@ -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;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
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\
|
|
6
|
-
.snail-
|
|
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,24 +20,24 @@
|
|
|
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\table.vue index:0 */
|
|
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}
|
|
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}
|
|
27
|
-
/* src:container\components\table-col.vue index:0 */
|
|
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
25
|
/* src:container\sort.vue index:0 */
|
|
30
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
|
+
/* src:container\table.vue index:0 */
|
|
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}
|
|
31
29
|
/* src:container\components\table-row.vue index:0 */
|
|
32
30
|
.table-row{align-items:center;display:flex}
|
|
33
|
-
/* src:container\
|
|
34
|
-
.
|
|
31
|
+
/* src:container\components\table-col.vue index:0 */
|
|
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%}
|
|
37
|
-
/* src:form\input.vue index:0 */
|
|
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
35
|
/* src:prompt\drag-verify.vue index:0 */
|
|
40
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}
|
|
39
|
+
/* src:form\input.vue index:0 */
|
|
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}
|
|
41
41
|
/* src:prompt\empty.vue index:0 */
|
|
42
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 */
|
|
@@ -46,12 +46,12 @@
|
|
|
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
|
-
/* src:popup\components\popup-container.vue index:0 */
|
|
52
|
-
.snail-popup{left:0;position:fixed;top:0}
|
|
53
49
|
/* src:popup\components\toast-container.vue index:0 */
|
|
54
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}
|
|
51
|
+
/* src:popup\components\popup-container.vue index:0 */
|
|
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.
|
|
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.
|
|
17
|
+
"snail.core": ">=2.0.15",
|
|
18
18
|
"snail.view": ">=1.0.24",
|
|
19
19
|
"sortablejs": ">=1.15.6"
|
|
20
20
|
},
|