snail.vue 2.0.2 → 2.0.3

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 (5) hide show
  1. package/dist/snail.vue.d.ts +13 -3
  2. package/dist/snail.vue.js +22 -20
  3. package/dist/snail.vue.umd.js +22 -20
  4. package/dist/styles/snail.vue.vue.css +17 -17
  5. package/package.json +2 -2
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: "checkbox" | "radio";
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: "checkbox" | "radio";
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: "checkbox" | "radio";
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
- return {
157
- item,
158
- checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
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.checked = !node.checked;
167
- valuesModel.value = chooseItemsRef.value.filter(item => item.checked).map(item => item.item.value);
167
+ node.selected = !node.selected;
168
+ valuesModel.value = chooseItemsRef.value.filter(item => item.selected).map(item => item.item.value);
168
169
  } else {
169
- const newChecked = props.type == "checkbox" && props.items.length == 1 ? !node.checked : true;
170
- chooseItemsRef.value.forEach(item => item.checked = false);
171
- node.checked = newChecked;
172
- valuesModel.value = newChecked ? node.item.value : void 0;
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.checked ? "checked" : ""]),
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: _ctx.type,
188
- checked: node.checked
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(["item-beautiful", [_ctx.type, node.checked ? "item-checked" : "item-unchecked"]])
192
- }, [node.checked ? (openBlock(), createBlock(_sfc_main$t, {
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,
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
- return {
159
- item,
160
- checked: props.multi == true ? valuesModel.value.includes(item.value) : valuesModel.value == item.value
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.checked = !node.checked;
169
- valuesModel.value = chooseItemsRef.value.filter(item => item.checked).map(item => item.item.value);
169
+ node.selected = !node.selected;
170
+ valuesModel.value = chooseItemsRef.value.filter(item => item.selected).map(item => item.item.value);
170
171
  } else {
171
- const newChecked = props.type == "checkbox" && props.items.length == 1 ? !node.checked : true;
172
- chooseItemsRef.value.forEach(item => item.checked = false);
173
- node.checked = newChecked;
174
- valuesModel.value = newChecked ? node.item.value : void 0;
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.checked ? "checked" : ""]),
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: _ctx.type,
190
- checked: node.checked
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(["item-beautiful", [_ctx.type, node.checked ? "item-checked" : "item-unchecked"]])
194
- }, [node.checked ? (vue.openBlock(), vue.createBlock(_sfc_main$t, {
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,
package/dist/styles/snail.vue.vue.css CHANGED
@@ -1,27 +1,25 @@
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{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}
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
- /* src:base\header.vue index:0 */
8
- .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}.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}
9
7
  /* src:base\footer.vue index:0 */
10
8
  .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
- /* src:base\search.vue index:0 */
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\select.vue index:0 */
14
- .snail-select{align-items:center;background-color:#fff;border:1px solid #dddfed;border-radius:4px;color:#2e3033;display:flex;height:32px;width:100%}.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}
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}.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}
15
11
  /* src:base\icon.vue index:0 */
16
12
  .snail-icon{cursor:pointer;opacity:1}
13
+ /* src:base\select.vue index:0 */
14
+ .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
+ /* src:base\search.vue index:0 */
16
+ .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}
17
17
  /* src:base\switch.vue index:0 */
18
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
- /* src:container\layout.vue index:0 */
24
- .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}
21
+ /* src:container\fold.vue index:0 */
22
+ .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
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
25
  /* src:container\sort.vue index:0 */
@@ -30,6 +28,8 @@
30
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}
31
+ /* src:container\layout.vue index:0 */
32
+ .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}
33
33
  /* src:container\components\table-col.vue index:0 */
34
34
  .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
35
  /* src:container\tree.vue index:0 */
@@ -44,19 +44,19 @@
44
44
  .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}
45
45
  /* src:prompt\loading.vue index:0 */
46
46
  .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}
47
+ /* src:popup\components\toast-container.vue index:0 */
48
+ .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}
47
49
  /* src:popup\components\confirm-container.vue index:0 */
48
50
  .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}
51
+ /* src:popup\components\follow-container.vue index:0 */
52
+ .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}
49
53
  /* src:popup\components\dialog-container.vue index:0 */
50
54
  .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
55
  /* src:popup\components\popup-container.vue index:0 */
52
56
  .snail-popup{left:0;position:fixed;top:0}
53
- /* src:popup\components\toast-container.vue index:0 */
54
- .snail-toast{background:rgba(0,0,0,.7);border-radius:10px;color:#fff;display:flex;left:50%;max-height:200px;max-width:400px;min-width:200px;overflow:hidden;padding:20px 35px 20px 15px;position:fixed;top:50%;transform:translate(-50%,-50%)}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important;padding:2px}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
55
- /* src:popup\components\follow-container.vue index:0 */
56
- .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:base\components\select-popup.vue index:0 */
58
- .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}
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.2",
6
+ "version": "2.0.3",
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.0",
18
+ "snail.view": ">=2.0.1",
19
19
  "sortablejs": ">=1.15.6",
20
20
  "zane-calendar": "2.2.8"
21
21
  },