snail.vue 2.0.2 → 2.0.4
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 +13 -3
- package/dist/snail.vue.js +26 -22
- package/dist/snail.vue.umd.js +26 -22
- package/dist/styles/snail.vue.vue.css +10 -10
- package/package.json +2 -2
- package/vue.code-snippets +1 -1
package/dist/snail.vue.d.ts
CHANGED
|
@@ -1185,13 +1185,21 @@ type ChooseOptions<T> = ReadonlyOptions & {
|
|
|
1185
1185
|
* - radio: 单选框样式
|
|
1186
1186
|
* - checkbox: 多选框样式
|
|
1187
1187
|
*/
|
|
1188
|
-
type: "
|
|
1188
|
+
type: "radio" | "checkbox";
|
|
1189
1189
|
/**
|
|
1190
1190
|
* 显示模式
|
|
1191
1191
|
* - native 原生默认，浏览器自己渲染；不同浏览器效果不一致
|
|
1192
1192
|
* - beautiful 美化模式，不同浏览器下效果通义
|
|
1193
1193
|
*/
|
|
1194
1194
|
mode?: "native" | "beautiful";
|
|
1195
|
+
/**
|
|
1196
|
+
* 选项布局
|
|
1197
|
+
* - 默认值：horizontal
|
|
1198
|
+
* - 可选值：
|
|
1199
|
+
* - - horizontal 水平布局；所有选项一行
|
|
1200
|
+
* - - vertical 垂直布局；每个选项一行
|
|
1201
|
+
*/
|
|
1202
|
+
layout?: "horizontal" | "vertical";
|
|
1195
1203
|
/**
|
|
1196
1204
|
* 待选项目
|
|
1197
1205
|
* text 可不传入
|
|
@@ -1958,8 +1966,9 @@ declare const components: {
|
|
|
1958
1966
|
});
|
|
1959
1967
|
Choose: vue.DefineComponent<ReadonlyOptions & {
|
|
1960
1968
|
multi?: boolean;
|
|
1961
|
-
type: "
|
|
1969
|
+
type: "radio" | "checkbox";
|
|
1962
1970
|
mode?: "native" | "beautiful";
|
|
1971
|
+
layout?: "horizontal" | "vertical";
|
|
1963
1972
|
items: ChooseItem<any>[];
|
|
1964
1973
|
itemStyle?: snail_view.WidthStyle & snail_view.HeightStyle & snail_view.MarginStyle;
|
|
1965
1974
|
} & {
|
|
@@ -1969,8 +1978,9 @@ declare const components: {
|
|
|
1969
1978
|
"update:modelValue": (value: any) => any;
|
|
1970
1979
|
}, string, vue.PublicProps, Readonly<ReadonlyOptions & {
|
|
1971
1980
|
multi?: boolean;
|
|
1972
|
-
type: "
|
|
1981
|
+
type: "radio" | "checkbox";
|
|
1973
1982
|
mode?: "native" | "beautiful";
|
|
1983
|
+
layout?: "horizontal" | "vertical";
|
|
1974
1984
|
items: ChooseItem<any>[];
|
|
1975
1985
|
itemStyle?: snail_view.WidthStyle & snail_view.HeightStyle & snail_view.MarginStyle;
|
|
1976
1986
|
} & {
|
package/dist/snail.vue.js
CHANGED
|
@@ -112,7 +112,7 @@ var _sfc_main$t = defineComponent({
|
|
|
112
112
|
}
|
|
113
113
|
});
|
|
114
114
|
|
|
115
|
-
const _hoisted_1$f = ["onClick"];
|
|
115
|
+
const _hoisted_1$f = ["title", "onClick"];
|
|
116
116
|
const _hoisted_2$9 = ["type", "checked"];
|
|
117
117
|
const _hoisted_3$6 = ["textContent"];
|
|
118
118
|
const _hoisted_4$4 = ["textContent"];
|
|
@@ -131,6 +131,7 @@ var _sfc_main$s = defineComponent({
|
|
|
131
131
|
},
|
|
132
132
|
type: {},
|
|
133
133
|
mode: {},
|
|
134
|
+
layout: {},
|
|
134
135
|
items: {},
|
|
135
136
|
itemStyle: {}
|
|
136
137
|
}, {
|
|
@@ -145,51 +146,52 @@ var _sfc_main$s = defineComponent({
|
|
|
145
146
|
const props = __props;
|
|
146
147
|
const emits = __emit;
|
|
147
148
|
const {
|
|
148
|
-
mode = "native"
|
|
149
|
+
mode = "native",
|
|
150
|
+
type = "radio",
|
|
151
|
+
layout = "horizontal"
|
|
149
152
|
} = props;
|
|
150
153
|
const {
|
|
151
154
|
getKey
|
|
152
155
|
} = useKey();
|
|
153
156
|
const valuesModel = useModel(__props, "modelValue");
|
|
154
157
|
props.multi && isArray(valuesModel.value) == false && (valuesModel.value = []);
|
|
155
|
-
const chooseItemsRef = computed(() => props.items.map(item => {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
};
|
|
160
|
-
}));
|
|
158
|
+
const chooseItemsRef = computed(() => props.items.map(item => ({
|
|
159
|
+
item,
|
|
160
|
+
selected: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
|
|
161
|
+
})));
|
|
161
162
|
function onItemClick(node, index) {
|
|
162
163
|
if (props.readonly == true) {
|
|
163
164
|
return;
|
|
164
165
|
}
|
|
165
166
|
if (props.multi == true) {
|
|
166
|
-
node.
|
|
167
|
-
valuesModel.value = chooseItemsRef.value.filter(item => item.
|
|
167
|
+
node.selected = !node.selected;
|
|
168
|
+
valuesModel.value = chooseItemsRef.value.filter(item => item.selected).map(item => item.item.value);
|
|
168
169
|
} else {
|
|
169
|
-
const
|
|
170
|
-
chooseItemsRef.value.forEach(item => item.
|
|
171
|
-
node.
|
|
172
|
-
valuesModel.value =
|
|
170
|
+
const newSelected = type == "checkbox" && props.items.length == 1 ? !node.selected : true;
|
|
171
|
+
chooseItemsRef.value.forEach(item => item.selected = false);
|
|
172
|
+
node.selected = newSelected;
|
|
173
|
+
valuesModel.value = newSelected ? node.item.value : void 0;
|
|
173
174
|
}
|
|
174
175
|
nextTick(() => emits("change", valuesModel.value));
|
|
175
176
|
}
|
|
176
177
|
return (_ctx, _cache) => {
|
|
177
178
|
return openBlock(), createElementBlock("div", {
|
|
178
|
-
class: normalizeClass(["snail-choose", _ctx.readonly ? "readonly" : ""])
|
|
179
|
+
class: normalizeClass(["snail-choose", [unref(type), unref(mode), unref(layout), _ctx.readonly ? "readonly" : ""]])
|
|
179
180
|
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(chooseItemsRef.value, (node, index) => {
|
|
180
181
|
return openBlock(), createElementBlock("div", {
|
|
181
182
|
key: unref(getKey)(node.item),
|
|
182
|
-
class: normalizeClass(["choose-item", node.
|
|
183
|
+
class: normalizeClass(["choose-item", node.selected ? "selected" : ""]),
|
|
183
184
|
style: normalizeStyle(unref(css).buildStyle(_ctx.itemStyle)),
|
|
185
|
+
title: node.item.text,
|
|
184
186
|
onClick: $event => onItemClick(node)
|
|
185
187
|
}, [unref(mode) == "native" ? (openBlock(), createElementBlock("input", {
|
|
186
188
|
key: 0,
|
|
187
|
-
type:
|
|
188
|
-
checked: node.
|
|
189
|
+
type: unref(type),
|
|
190
|
+
checked: node.selected
|
|
189
191
|
}, null, 8, _hoisted_2$9)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
|
|
190
192
|
key: 1,
|
|
191
|
-
class: normalizeClass(["
|
|
192
|
-
}, [node.
|
|
193
|
+
class: normalizeClass(["status", [node.selected ? "selected" : ""]])
|
|
194
|
+
}, [node.selected ? (openBlock(), createBlock(_sfc_main$t, {
|
|
193
195
|
key: 0,
|
|
194
196
|
type: "success",
|
|
195
197
|
size: 12,
|
|
@@ -2534,8 +2536,10 @@ var _sfc_main$4 = defineComponent({
|
|
|
2534
2536
|
newValue && treeNodeDom.value.classList.add("hovered");
|
|
2535
2537
|
});
|
|
2536
2538
|
watcher(() => __props.context.isActived(__props.node), newValue => {
|
|
2537
|
-
treeNodeDom.value
|
|
2538
|
-
|
|
2539
|
+
if (treeNodeDom.value) {
|
|
2540
|
+
treeNodeDom.value.classList.remove("actived");
|
|
2541
|
+
newValue && treeNodeDom.value.classList.add("actived");
|
|
2542
|
+
}
|
|
2539
2543
|
});
|
|
2540
2544
|
onMounted(() => {
|
|
2541
2545
|
if (childrenDom.value) {
|
package/dist/snail.vue.umd.js
CHANGED
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
}
|
|
115
115
|
});
|
|
116
116
|
|
|
117
|
-
const _hoisted_1$f = ["onClick"];
|
|
117
|
+
const _hoisted_1$f = ["title", "onClick"];
|
|
118
118
|
const _hoisted_2$9 = ["type", "checked"];
|
|
119
119
|
const _hoisted_3$6 = ["textContent"];
|
|
120
120
|
const _hoisted_4$4 = ["textContent"];
|
|
@@ -133,6 +133,7 @@
|
|
|
133
133
|
},
|
|
134
134
|
type: {},
|
|
135
135
|
mode: {},
|
|
136
|
+
layout: {},
|
|
136
137
|
items: {},
|
|
137
138
|
itemStyle: {}
|
|
138
139
|
}, {
|
|
@@ -147,51 +148,52 @@
|
|
|
147
148
|
const props = __props;
|
|
148
149
|
const emits = __emit;
|
|
149
150
|
const {
|
|
150
|
-
mode = "native"
|
|
151
|
+
mode = "native",
|
|
152
|
+
type = "radio",
|
|
153
|
+
layout = "horizontal"
|
|
151
154
|
} = props;
|
|
152
155
|
const {
|
|
153
156
|
getKey
|
|
154
157
|
} = snail_core.useKey();
|
|
155
158
|
const valuesModel = vue.useModel(__props, "modelValue");
|
|
156
159
|
props.multi && snail_core.isArray(valuesModel.value) == false && (valuesModel.value = []);
|
|
157
|
-
const chooseItemsRef = vue.computed(() => props.items.map(item => {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
};
|
|
162
|
-
}));
|
|
160
|
+
const chooseItemsRef = vue.computed(() => props.items.map(item => ({
|
|
161
|
+
item,
|
|
162
|
+
selected: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
|
|
163
|
+
})));
|
|
163
164
|
function onItemClick(node, index) {
|
|
164
165
|
if (props.readonly == true) {
|
|
165
166
|
return;
|
|
166
167
|
}
|
|
167
168
|
if (props.multi == true) {
|
|
168
|
-
node.
|
|
169
|
-
valuesModel.value = chooseItemsRef.value.filter(item => item.
|
|
169
|
+
node.selected = !node.selected;
|
|
170
|
+
valuesModel.value = chooseItemsRef.value.filter(item => item.selected).map(item => item.item.value);
|
|
170
171
|
} else {
|
|
171
|
-
const
|
|
172
|
-
chooseItemsRef.value.forEach(item => item.
|
|
173
|
-
node.
|
|
174
|
-
valuesModel.value =
|
|
172
|
+
const newSelected = type == "checkbox" && props.items.length == 1 ? !node.selected : true;
|
|
173
|
+
chooseItemsRef.value.forEach(item => item.selected = false);
|
|
174
|
+
node.selected = newSelected;
|
|
175
|
+
valuesModel.value = newSelected ? node.item.value : void 0;
|
|
175
176
|
}
|
|
176
177
|
vue.nextTick(() => emits("change", valuesModel.value));
|
|
177
178
|
}
|
|
178
179
|
return (_ctx, _cache) => {
|
|
179
180
|
return vue.openBlock(), vue.createElementBlock("div", {
|
|
180
|
-
class: vue.normalizeClass(["snail-choose", _ctx.readonly ? "readonly" : ""])
|
|
181
|
+
class: vue.normalizeClass(["snail-choose", [vue.unref(type), vue.unref(mode), vue.unref(layout), _ctx.readonly ? "readonly" : ""]])
|
|
181
182
|
}, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(chooseItemsRef.value, (node, index) => {
|
|
182
183
|
return vue.openBlock(), vue.createElementBlock("div", {
|
|
183
184
|
key: vue.unref(getKey)(node.item),
|
|
184
|
-
class: vue.normalizeClass(["choose-item", node.
|
|
185
|
+
class: vue.normalizeClass(["choose-item", node.selected ? "selected" : ""]),
|
|
185
186
|
style: vue.normalizeStyle(vue.unref(snail_view.css).buildStyle(_ctx.itemStyle)),
|
|
187
|
+
title: node.item.text,
|
|
186
188
|
onClick: $event => onItemClick(node)
|
|
187
189
|
}, [vue.unref(mode) == "native" ? (vue.openBlock(), vue.createElementBlock("input", {
|
|
188
190
|
key: 0,
|
|
189
|
-
type:
|
|
190
|
-
checked: node.
|
|
191
|
+
type: vue.unref(type),
|
|
192
|
+
checked: node.selected
|
|
191
193
|
}, null, 8, _hoisted_2$9)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
192
194
|
key: 1,
|
|
193
|
-
class: vue.normalizeClass(["
|
|
194
|
-
}, [node.
|
|
195
|
+
class: vue.normalizeClass(["status", [node.selected ? "selected" : ""]])
|
|
196
|
+
}, [node.selected ? (vue.openBlock(), vue.createBlock(_sfc_main$t, {
|
|
195
197
|
key: 0,
|
|
196
198
|
type: "success",
|
|
197
199
|
size: 12,
|
|
@@ -2536,8 +2538,10 @@
|
|
|
2536
2538
|
newValue && treeNodeDom.value.classList.add("hovered");
|
|
2537
2539
|
});
|
|
2538
2540
|
watcher(() => __props.context.isActived(__props.node), newValue => {
|
|
2539
|
-
treeNodeDom.value
|
|
2540
|
-
|
|
2541
|
+
if (treeNodeDom.value) {
|
|
2542
|
+
treeNodeDom.value.classList.remove("actived");
|
|
2543
|
+
newValue && treeNodeDom.value.classList.add("actived");
|
|
2544
|
+
}
|
|
2541
2545
|
});
|
|
2542
2546
|
vue.onMounted(() => {
|
|
2543
2547
|
if (childrenDom.value) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* src:base\button.vue index:0 */
|
|
2
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
|
-
.snail-choose
|
|
4
|
+
.snail-choose>div.choose-item{align-items:center;display:flex;flex-shrink:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-choose>div.choose-item:not(.readonly){cursor:pointer}.snail-choose>div.choose-item>input::checkmark{background-color:#2196f3;border-color:#2196f3}.snail-choose>div.choose-item>span{margin-left:4px}.snail-choose>div.choose-item>span.item-des{color:#8a9099}.snail-choose>div.choose-item:after{content:"";height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.snail-choose.horizontal{align-items:center;display:flex;flex-wrap:wrap;overflow-x:hidden}.snail-choose.horizontal>div.choose-item{margin:0 8px}.snail-choose.horizontal>div.choose-item:first-child{margin-left:0}.snail-choose.vertical{display:flex;flex-direction:column;justify-content:center}.snail-choose.beautiful>.choose-item>.status{align-items:center;display:flex;flex-shrink:0;justify-content:center;overflow:hidden}.snail-choose.beautiful>.choose-item>.status.selected{background-color:#4c9aff;border:1px solid #4c9aff}.snail-choose.beautiful>.choose-item>.status:not(.selected){border:1px solid #8a9099}.snail-choose.beautiful.radio>.choose-item>.status{border-radius:50%;height:16px;width:16px}.snail-choose.beautiful.checkbox>.choose-item>.status{height:14px;width:14px}.snail-choose.beautiful.readonly>.choose-item>.status.selected{background-color:#d5d7db;border-color:#d5d7db}.snail-choose.beautiful.readonly>.choose-item>.status:not(.selected){opacity:.5}
|
|
5
5
|
/* src:base\datepicker.vue index:0 */
|
|
6
6
|
.snail-datepicker{height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;width:100%}
|
|
7
7
|
/* src:base\header.vue index:0 */
|
|
@@ -10,18 +10,18 @@
|
|
|
10
10
|
.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}
|
|
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
|
+
/* src:base\switch.vue index:0 */
|
|
14
|
+
.snail-switch{border-radius:10px 10px 10px 10px;cursor:pointer;height:20px!important;overflow:hidden;position:relative;width:36px!important}.snail-switch>div{height:100%;width:100%}.snail-switch>div.on{background-color:#5ca3ff}.snail-switch>div.off{background-color:#c4c8cc;position:absolute;transition:left .2s ease}.snail-switch>div.status{background:#fff;border-radius:10px 10px 10px 10px;height:16px;position:absolute;top:2px;transition:left .2s ease;width:16px}.snail-switch.on>div.off{left:100%;top:0}.snail-switch.on>div.status{left:calc(100% - 18px)}.snail-switch.off>div.off{left:0;top:0}.snail-switch.off>div.status{left:2px}.snail-switch.readonly{cursor:not-allowed}
|
|
13
15
|
/* src:base\select.vue index:0 */
|
|
14
|
-
.snail-select{align-items:center;
|
|
16
|
+
.snail-select{align-items:center;border:1px solid #dddfed;border-radius:4px;color:#2e3033;display:flex;height:32px;width:100%}.snail-select:not(.readonly){background-color:#fff}.snail-select:not(.readonly,.empty){cursor:pointer}.snail-select>div.select-result{align-items:center;display:flex;flex:1;flex-wrap:nowrap;height:30px;overflow:hidden;padding:0 10px 0 6px}.snail-select>div.placeholder{flex:1;padding:0 10px 0 6px}.snail-select>svg.snail-icon{flex-shrink:0;margin-right:4px}.snail-select>div.no-items{flex:1;padding:0 8px}
|
|
15
17
|
/* src:base\icon.vue index:0 */
|
|
16
18
|
.snail-icon{cursor:pointer;opacity:1}
|
|
17
|
-
/* src:base\switch.vue index:0 */
|
|
18
|
-
.snail-switch{border-radius:10px 10px 10px 10px;cursor:pointer;height:20px!important;overflow:hidden;position:relative;width:36px!important}.snail-switch>div{height:100%;width:100%}.snail-switch>div.on{background-color:#5ca3ff}.snail-switch>div.off{background-color:#c4c8cc;position:absolute;transition:left .2s ease}.snail-switch>div.status{background:#fff;border-radius:10px 10px 10px 10px;height:16px;position:absolute;top:2px;transition:left .2s ease;width:16px}.snail-switch.on>div.off{left:100%;top:0}.snail-switch.on>div.status{left:calc(100% - 18px)}.snail-switch.off>div.off{left:0;top:0}.snail-switch.off>div.status{left:2px}.snail-switch.readonly{cursor:not-allowed}
|
|
19
|
-
/* src:container\fold.vue index:0 */
|
|
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>.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
19
|
/* src:container\dynamic.vue index:0 */
|
|
22
20
|
.snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
|
|
23
21
|
/* src:container\layout.vue index:0 */
|
|
24
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\fold.vue index:0 */
|
|
24
|
+
.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>.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)}
|
|
25
25
|
/* src:container\scroll.vue index:0 */
|
|
26
26
|
.snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
|
|
27
27
|
/* src:container\sort.vue index:0 */
|
|
@@ -48,15 +48,15 @@
|
|
|
48
48
|
.snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>div.confirm-body{flex:1;margin:20px 40px;overflow:auto;word-wrap:break-word}
|
|
49
49
|
/* src:popup\components\dialog-container.vue index:0 */
|
|
50
50
|
.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)}
|
|
51
|
-
/* src:popup\components\popup-container.vue index:0 */
|
|
52
|
-
.snail-popup{left:0;position:fixed;top:0}
|
|
53
51
|
/* src:popup\components\toast-container.vue index:0 */
|
|
54
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}
|
|
55
53
|
/* src:popup\components\follow-container.vue index:0 */
|
|
56
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}
|
|
57
|
-
/* src:
|
|
58
|
-
.snail-
|
|
55
|
+
/* src:popup\components\popup-container.vue index:0 */
|
|
56
|
+
.snail-popup{left:0;position:fixed;top:0}
|
|
59
57
|
/* src:container\components\tree-node.vue index:0 */
|
|
60
58
|
.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-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}
|
|
59
|
+
/* src:base\components\select-popup.vue index:0 */
|
|
60
|
+
.snail-select-popup{background:#fff;border:1px solid #dddfed;border-radius:4px;box-shadow:0 1px 5px 1px #dddfed;display:flex;flex-direction:column;max-height:90%;min-height:32px;overflow:auto}.snail-select-popup>div.snail-search{margin:12px}.snail-select-popup>div.clear-all{align-items:center;background-color:#fff;border-top:1px solid #dddfed;bottom:0;color:#8a9099;cursor:pointer;display:flex;flex-shrink:0;height:32px;padding:0 12px;position:sticky!important;z-index:1}.snail-select-popup>div.clear-all:hover{color:#ff4c4c}.snail-select-popup.child-popup{max-width:250px;min-width:200px;padding-bottom:6px;padding-top:6px}.snail-select-popup.child-popup.placeholder{justify-content:center;padding:0 12px;width:100px!important}
|
|
61
61
|
/* src:base\components\select-node.vue index:0 */
|
|
62
62
|
.snail-select-popup>div.select-node{align-items:center;display:flex;flex-shrink:0;flex-wrap:nowrap;height:32px;padding-left:12px}.snail-select-popup>div.select-node:hover{background:#f8f9fa}.snail-select-popup>div.select-node.clickable{cursor:pointer}.snail-select-popup>div.select-node.group{color:#8a9099}.snail-select-popup>div.select-node.item{color:#2e3033;padding-right:10px}.snail-select-popup>div.select-node.selected{color:#4c9aff!important}.snail-select-popup>div.select-node>div.item-text{flex:1}.snail-select-popup>div.select-node>svg.snail-icon{cursor:default;display:none}.snail-select-popup>div.select-node>div.select-status{background:#fff;border:1px solid #8a9099;flex-shrink:0;height:14px;margin-left:4px;width:14px}.snail-select-popup>div.select-node>div.select-status>svg{display:none}.snail-select-popup>div.select-node.selected>div.select-status{background-color:#5ca3ff;border:1px solid #5ca3ff}.snail-select-popup>div.select-node.selected>div.select-status>svg{display:block}.snail-select-popup>div.select-node.child{color:#2e3033;padding-left:24px}.snail-select-popup>div.select-node.child>svg.snail-icon{display:initial}
|
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": "2.0.
|
|
6
|
+
"version": "2.0.4",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/snail.vue.js",
|
|
9
9
|
"module": "dist/snail.vue.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"vue": "^3.5.14",
|
|
17
17
|
"snail.core": ">=2.0.16",
|
|
18
|
-
"snail.view": ">=2.0.
|
|
18
|
+
"snail.view": ">=2.0.1",
|
|
19
19
|
"sortablejs": ">=1.15.6",
|
|
20
20
|
"zane-calendar": "2.2.8"
|
|
21
21
|
},
|