`子组件。",
+ "support": [
+ {
+ "name": "u-capsules-item",
+ "title": "胶囊选项",
+ "snippet": "选项"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ },
{
"symbol": "van-pickerson",
"name": "选择器",
diff --git a/src-vusion/components/index.js b/src-vusion/components/index.js
index 489e2e193..fbbceb569 100644
--- a/src-vusion/components/index.js
+++ b/src-vusion/components/index.js
@@ -113,6 +113,10 @@ export { default as VanCardu } from '../../src/cardu';
export { default as VanFieldsonforsearch } from '../../src/fieldsonforsearch';
export { default as VanLinearLayout } from '../../src/linear-layout';
+export { default as VanCapsules } from '../../src/capsules';
+export { default as VanCapsulesItem } from '../../src/capsules-item';
+export { default as VanCapsulesGroup } from '../../src/capsules-group';
+
export * from './list-view';
export * from './grid-view';
export * from './iframe';
diff --git a/src-vusion/styles/theme.css b/src-vusion/styles/theme.css
index 51ddea9be..ea85c2393 100644
--- a/src-vusion/styles/theme.css
+++ b/src-vusion/styles/theme.css
@@ -830,4 +830,31 @@
--van-toast-text-color: #fff; /* @type color */ /* @desc 弹出消息的字体颜色 */
--van-toast-background-color: rgba(0, 0, 0, 0.7); /* @type color */ /* @desc 弹出消息的背景色 */
--van-toast-custom-icon-color: white; /* @type color */ /* @desc 弹出消息的自定义图标颜色 */
+
+ /* @component van-capsules */
+ --van-capsules-item-font-size: 12px; /* @desc 胶囊字体大小 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-item-padding: 4px 20px; /* @desc 胶囊内边距 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-item-border-color: #e5e5e5; /* @type color */ /* @desc 胶囊边框颜色 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-item-background: #fff; /* @type color */ /* @desc 胶囊背景色 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-item-color: #333; /* @type color */ /* @desc 胶囊字体颜色 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-border-radius: 4px; /* @desc 胶囊圆角 */ /* @group 通用 */
+
+ --van-capsules-item-active-border-color: #337eff; /* @type color */ /* @desc 胶囊选中时边框颜色 */ /* @prefix van-capsules-item */ /* @group 选中 */
+ --van-capsules-item-active-background: #337eff; /* @type color */ /* @desc 胶囊选中时背景色 */ /* @prefix van-capsules-item */ /* @group 选中 */
+ --van-capsules-item-active-color: #fff; /* @type color */ /* @desc 胶囊选中时字体颜色 */ /* @prefix van-capsules-item */ /* @group 选中 */
+
+ --van-capsules-item-disabled-border-color: #337eff; /* @type color */ /* @desc 胶囊禁用时边框颜色 */ /* @prefix van-capsules-item */ /* @group 禁用 */
+ --van-capsules-item-disabled-background: #f5f5f5; /* @type color */ /* @desc 胶囊禁用时背景色 */ /* @prefix van-capsules-item */ /* @group 禁用 */
+ --van-capsules-item-disabled-color: #aaa; /* @type color */ /* @desc 胶囊禁用时字体颜色 */ /* @prefix van-capsules-item */ /* @group 禁用 */
+
+ --van-capsules-item-active-disabled-border-color: #bbd4ff; /* @type color */ /* @desc 胶囊选中时的禁用边框颜色 */ /* @prefix van-capsules-item */ /* @group 选中时禁用 */
+ --van-capsules-item-active-disabled-background: #bbd4ff; /* @type color */ /* @desc 胶囊选中时的禁用背景色 */ /* @prefix van-capsules-item */ /* @group 选中时禁用 */
+ --van-capsules-item-active-disabled-color: #fff; /* @type color */ /* @desc 胶囊选中时的禁用字体颜色 */ /* @prefix van-capsules-item */ /* @group 选中时禁用 */
+
+ --van-capsules-item-label-font-size: 10px; /* @desc 胶囊标签字体大小 */ /* @prefix van-capsules-item */ /* @group 标签 */
+ --van-capsules-item-label-background: #f24957; /* @type color */ /* @desc 胶囊标签背景色 */ /* @prefix van-capsules-item */ /* @group 标签 */
+ --van-capsules-item-label-color: #fff; /* @type color */ /* @desc 胶囊标签字体颜色 */ /* @prefix van-capsules-item */ /* @group 标签 */
+ --van-capsules-item-label-max-width: 100%; /* @desc 胶囊标签最大宽度 */ /* @prefix van-capsules-item */ /* @group 标签 */
+
+ --van-capsules-item-flag-color: #f24957; /* @type color */ /* @desc 胶囊flag颜色 */ /* @prefix van-capsules-item */
}
diff --git a/src/capsules-group/README.zh-CN.md b/src/capsules-group/README.zh-CN.md
new file mode 100644
index 000000000..89a8ab511
--- /dev/null
+++ b/src/capsules-group/README.zh-CN.md
@@ -0,0 +1 @@
+# Capsules 胶囊组
diff --git a/src/capsules-group/index.js b/src/capsules-group/index.js
new file mode 100644
index 000000000..792d714b5
--- /dev/null
+++ b/src/capsules-group/index.js
@@ -0,0 +1,21 @@
+import { createNamespace } from '../utils';
+
+const [createComponent, bem] = createNamespace('capsules-group');
+
+export default createComponent({
+ methods: {
+ renderSlots() {
+ if (this.inDesigner() && !this.slots()) {
+ return (
+
+ 选中组件，点击“+”添加组件
+
+ );
+ }
+ return this.slots();
+ }
+ },
+ render() {
+ return {this.renderSlots()}
;
+ }
+});
diff --git a/src/capsules-group/index.less b/src/capsules-group/index.less
new file mode 100644
index 000000000..0e6105fb9
--- /dev/null
+++ b/src/capsules-group/index.less
@@ -0,0 +1,9 @@
+.van-capsules-group {
+ display: inline-block;
+
+ margin-left: 10px;
+
+ &:first-child {
+ margin-left: 0;
+ }
+}
diff --git a/src/capsules-item/README.zh-CN.md b/src/capsules-item/README.zh-CN.md
new file mode 100644
index 000000000..c7d2e1d1b
--- /dev/null
+++ b/src/capsules-item/README.zh-CN.md
@@ -0,0 +1 @@
+# Capsules 胶囊项
diff --git a/src/capsules-item/index.js b/src/capsules-item/index.js
new file mode 100644
index 000000000..b60f4483e
--- /dev/null
+++ b/src/capsules-item/index.js
@@ -0,0 +1,84 @@
+import { createNamespace } from '../utils';
+import { ChildrenMixin } from '../mixins/relation';
+import Empty from '../emptycol';
+
+const [createComponent, bem] = createNamespace('capsules-item');
+
+export default createComponent({
+ mixins: [ChildrenMixin('VanCapsules')],
+ components: {
+ Empty,
+ },
+ props: {
+ value: String,
+ label: String,
+ flag: {
+ type: Boolean,
+ default: false,
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ },
+
+ computed: {
+ active() {
+ if ([undefined].includes(this.value)) {
+ return false;
+ }
+
+ if (this.parent.multiple) {
+ return (this.parent.currentValue || []).indexOf(this.value) !== -1;
+ }
+
+ return this.parent.currentValue === this.value;
+ },
+ isDisabled() {
+ return this.parent.disabled || this.disabled;
+ },
+ },
+
+ methods: {
+ onSelect() {
+ if (this.parent.disabled || this.parent.readonly) {
+ return;
+ }
+
+ if (this.disabled) {
+ return;
+ }
+
+ this.parent.onSelect(this.value);
+ this.$emit('select', this.value);
+ },
+ renderSlots() {
+ if (this.inDesigner() && !this.slots()) {
+ return ;
+ }
+
+ return this.slots();
+ },
+
+ renderLabel() {
+ if (!this.label) return null;
+
+ return {this.label}
;
+ },
+ },
+
+ render() {
+ return (
+
+ {this.renderSlots()}
+ {this.renderLabel()}
+
+ );
+ },
+});
diff --git a/src/capsules-item/index.less b/src/capsules-item/index.less
new file mode 100644
index 000000000..f9476837b
--- /dev/null
+++ b/src/capsules-item/index.less
@@ -0,0 +1,72 @@
+.van-capsules-item {
+ display: table-cell;
+ vertical-align: middle;
+ position: relative;
+ font-size: var(--van-capsules-item-font-size);
+ text-align: center;
+ padding: var(--van-capsules-item-padding);
+ border: 1px solid var(--van-capsules-item-border-color);
+ border-left-color: transparent;
+ background: var(--van-capsules-item-background);
+ color: var(--van-capsules-item-color);
+
+ &:first-child {
+ border-top-left-radius: var(--van-capsules-border-radius);
+ border-bottom-left-radius: var(--van-capsules-border-radius);
+ border-left-color: var(--van-capsules-item-border-color);
+ }
+
+ &:last-child {
+ border-top-right-radius: var(--van-capsules-border-radius);
+ border-bottom-right-radius: var(--van-capsules-border-radius);
+ }
+
+ &[active] {
+ z-index: 1;
+ border-color: var(--van-capsules-item-active-border-color);
+ background: var(--van-capsules-item-active-background);
+ color: var(--van-capsules-item-active-color);
+ }
+
+ &[disabled] {
+ color: var(--van-capsules-item-disabled-color);
+ background: var(--van-capsules-item-disabled-background);
+ }
+
+ &[active][disabled] {
+ color: var(--van-capsules-item-active-disabled-color);
+ background: var(--van-capsules-item-active-disabled-background);
+ border-color: var(--van-capsules-item-active-disabled-border-color);
+ }
+
+ &__label {
+ box-sizing: border-box;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: var(--van-capsules-item-label-font-size);
+ padding: 0 4px;
+ border-radius: 2px;
+ white-space: nowrap;
+ background: var(--van-capsules-item-label-background);
+ color: var(--van-capsules-item-label-color);
+
+ max-width: var(--van-capsules-item-label-max-width);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &[flag]::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ border: 5px solid;
+ border-color: var(--van-capsules-item-flag-color) var(--van-capsules-item-flag-color) transparent transparent;
+ }
+
+ &:last-child[flag]::after {
+ border-top-right-radius: var(--van-capsules-border-radius);
+ }
+}
diff --git a/src/capsules/README.zh-CN.md b/src/capsules/README.zh-CN.md
new file mode 100644
index 000000000..ac2f84dd2
--- /dev/null
+++ b/src/capsules/README.zh-CN.md
@@ -0,0 +1 @@
+# Capsules 胶囊
diff --git a/src/capsules/api.yaml b/src/capsules/api.yaml
new file mode 100644
index 000000000..de0a1d7c3
--- /dev/null
+++ b/src/capsules/api.yaml
@@ -0,0 +1,146 @@
+- name: van-capsules
+ title: 胶囊
+ icon: capsules
+ description: 多项中选择一项
+ labels:
+ - Form
+ attrs:
+ - name: value
+ title: 选中值
+ type: any
+ sync: true
+ model: true
+ description: 当前选中的值
+ group: 数据属性
+ brifeDoc: ""
+ docDescription: 当前选择的值
+ tooltipLink: ""
+ - name: cancelable
+ title: 可取消
+ type: boolean
+ default: false
+ description: 是否可以取消选择
+ group: 交互属性
+ brifeDoc: ""
+ docDescription: 是否可以取消选择
+ tooltipLink: ""
+ - name: multiple
+ title: 可多选
+ type: boolean
+ default: false
+ description: 是否可以多选
+ group: 交互属性
+ brifeDoc: ""
+ docDescription: 是否可以多选
+ tooltipLink: ""
+ - name: readonly
+ title: 只读
+ type: boolean
+ default: false
+ description: 正常显示，但禁止选择/输入
+ group: 状态属性
+ brifeDoc: ""
+ docDescription: 正常显示，但禁止选择或输入。
+ tooltipLink: ""
+ - name: disabled
+ title: 禁用
+ type: boolean
+ default: false
+ description: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
+ group: 状态属性
+ brifeDoc: ""
+ docDescription: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
+ tooltipLink: ""
+ slots:
+ - concept: Slot
+ name: default
+ description: 插入``或``子组件。
+ support:
+ - name: van-capsules-item
+ title: 胶囊选项
+ snippet: 选项
+ - name: van-capsules-group
+ title: 胶囊选项组
+ snippet: 选项选项
+
+ events:
+ - name: select
+ title: 选择后
+ description: 选择某一项时触发
+ params:
+ - name: $event
+ type: object
+ description: 自定义事件对象
+ schema:
+ $ref: "#/systemTypes/ChangeItemEvent"
+ - name: $event.value
+ type: any
+ description: 改变后的值
+ - name: change
+ title: 改变后
+ description: 选择值改变时触发
+ params:
+ - name: $event
+ type: object
+ description: 自定义事件对象
+ schema:
+ $ref: "#/systemTypes/ChangeItemEvent"
+ - name: $event.value
+ type: any
+ description: 选择项的值
+
+- name: van-capsules-item
+ title: 胶囊选项
+ description: 胶囊选项
+ attrs:
+ - name: value
+ title: 值
+ type: any
+ description: 此项的值
+ group: 数据属性
+ brifeDoc: ""
+ docDescription: 此项的值
+ tooltipLink: ""
+ - name: label
+ title: 标签
+ type: string
+ default: ""
+ description: 顶部自定义提示文本
+ group: 主要属性
+ brifeDoc: ""
+ docDescription: 顶部自定义提示文本
+ tooltipLink: ""
+ - name: flag
+ title: flag标志
+ type: boolean
+ default: false
+ description: 是否右上角有flag标志
+ group: 主要属性
+ brifeDoc: ""
+ docDescription: 是否右上角有flag标志
+ tooltipLink: ""
+ - name: disabled
+ title: 禁用
+ type: boolean
+ default: false
+ description: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
+ group: 状态属性
+ brifeDoc: ""
+ docDescription: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
+ tooltipLink: ""
+ slots:
+ - concept: Slot
+ name: default
+ description: 插入文本或 HTML。
+
+- name: van-capsules-group
+ title: 胶囊选项组
+ description: 胶囊选项组
+ slots:
+ - concept: Slot
+ name: default
+ description: 插入``子组件。
+ support:
+ - name: u-capsules-item
+ title: 胶囊选项
+ snippet: 选项
diff --git a/src/capsules/demo/index.vue b/src/capsules/demo/index.vue
new file mode 100644
index 000000000..8a6ac81f0
--- /dev/null
+++ b/src/capsules/demo/index.vue
@@ -0,0 +1,74 @@
+
+
+
+ value: {{active}}
+
+ 标签
+ 标签
+ 标签
+
+
+
+
+
+
+ 标签
+ 标签
+
+
+
+ 标签
+ 标签
+
+
+
+
+
+
+
+
+
+
+ 标签
+
+ 标签
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/capsules/docs/blocks.md b/src/capsules/docs/blocks.md
new file mode 100644
index 000000000..94d8fdb7e
--- /dev/null
+++ b/src/capsules/docs/blocks.md
@@ -0,0 +1,36 @@
+### 基础用法
+
+``` html
+
+ Option-A
+ Option-B
+ Option-C
+
+```
+
+### 胶囊组
+
+``` html
+
+
+ Option-A
+ Option-B
+
+
+ Option-A
+ Option-B
+
+
+```
+### 标签
+
+``` html
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+```
diff --git a/src/capsules/drawings/0.svg b/src/capsules/drawings/0.svg
new file mode 100644
index 000000000..b5ccfe4d3
--- /dev/null
+++ b/src/capsules/drawings/0.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/capsules/drawings/1.svg b/src/capsules/drawings/1.svg
new file mode 100644
index 000000000..3843eb04c
--- /dev/null
+++ b/src/capsules/drawings/1.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/capsules/drawings/2.svg b/src/capsules/drawings/2.svg
new file mode 100644
index 000000000..889ba1e15
--- /dev/null
+++ b/src/capsules/drawings/2.svg
@@ -0,0 +1,20 @@
+
diff --git a/src/capsules/index.js b/src/capsules/index.js
new file mode 100644
index 000000000..8f9b2436e
--- /dev/null
+++ b/src/capsules/index.js
@@ -0,0 +1,91 @@
+import { createNamespace } from '../utils'
+import { ParentMixin } from '../mixins/relation'
+
+const [createComponent, bem] = createNamespace('capsules')
+
+export default createComponent({
+ mixins: [ParentMixin('VanCapsules')],
+ props: {
+ value: {
+ type: [String, Array],
+ },
+ autoSelect: {
+ type: Boolean,
+ default: false,
+ },
+ cancelable: {
+ type: Boolean,
+ default: false,
+ },
+ multiple: {
+ type: Boolean,
+ default: false,
+ },
+ readonly: {
+ type: Boolean,
+ default: false,
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ },
+
+ data() {
+ return {
+ currentValue: this.value,
+ };
+ },
+
+ watch: {
+ value(val) {
+ this.currentValue = val;
+ },
+
+ currentValue(val) {
+ this.$emit('update:value', val);
+ this.$emit('change', { value: val });
+ }
+ },
+
+ methods: {
+ onSelect(val) {
+ let value;
+
+ if (this.multiple) {
+ const data = this.currentValue || [];
+
+ const optionIndex = data.indexOf(val);
+ if (optionIndex === -1) {
+ data.push(val);
+ } else if (this.cancelable) {
+ data.splice(optionIndex, 1);
+ }
+
+ value = data;
+ } else if (this.cancelable) {
+ value = this.currentValue === val ? null : val;
+ } else {
+ value = val;
+ }
+
+ this.currentValue = value;
+ this.$emit('select', { value });
+ },
+
+ renderSlots() {
+ if (this.inDesigner() && !this.slots()) {
+ return (
+
+ 选中组件，点击“+”添加组件
+
+ );
+ }
+
+ return this.slots();
+ }
+ },
+ render() {
+ return {this.renderSlots()}
;
+ },
+});
diff --git a/src/capsules/index.less b/src/capsules/index.less
new file mode 100644
index 000000000..1446f2fdb
--- /dev/null
+++ b/src/capsules/index.less
@@ -0,0 +1,3 @@
+.van-capsules {
+ display: inline-table;
+}
diff --git a/src/capsules/screenshots/0.png b/src/capsules/screenshots/0.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f9abaa05259b21486ca2d39c129901746ffc1e6
GIT binary patch
literal 2955
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
Jsj_L{zW~<$1a1HT
literal 0
HcmV?d00001
diff --git a/src/capsules/screenshots/1.png b/src/capsules/screenshots/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..dce30286241ec5fd43b1fef9464c4420a9354164
GIT binary patch
literal 4016
zcmbVPc`)03w^zC-kJ?kUwG?fsdT3Egx}m75+LBm`SgO`oQ+rF3+9_(Oy|okk5)!o)
zvBpvq5meRMB9`(*qOn}}eV#k-JNKVEbHDSM^EqecoHJ+6Idf*d(T^YLa&ZWAu&}Uj
z>Fa5mu&}TJN4g_B+mVctx@vYr$DQvQ-eqCICUWkguA=Xk}$(2L}hv&dv{_e?EQsG(0@q#l>ZBZ;wi)=H=yugoL=eyEB>0
z!NI}6z(59r;o;#?Uthn!zu(!}xx2d?5D>7ju`xbAUQkf*;>C;A)m3kA?`O}RO-@d_
zy1K5ctW;H1kw~P8iHV(^o#o}_y1F_90^#N5_51hln3$OM_V(oDgwvXwYATm
zKTl6jM@B{>k;w1gzq`4)5sAczhzK7apQ))SUtiz(`T3TX7Jq;L(9qC|ii*t4%$k}S
zG#b6Nwbj$pL!nS|a&ls0W0R7SDl02dDAb!bZ#+Fc6A}_yTU%>uYlDM>i;IiH!op^$
z%&%X+Zf|e*_xGoyq~z!4fBW_=K0dywscB(hp|7tmDk^GpbTmCZolGVV4-bF%@Zsgl
zm%asS-QC@@v$IP}OQofyMMXteEOv8qGc7GGJ3IUB+qb>Fy>W4I(b3TZ0|RtA9fQF%
zG&Fqt`0>}TU(L!quh-Ytv$C?v%gbNAdNngM6BHEW=jZqQ`SYQnp|-ZR)YMe7
z#O2;;#{2j0|N85%jEsyq>K^3HvQNR9Y2vbP;hIUpa`z-7F)^`kn$b7C+xwNF_*ygO
zXoC#(weOk*Oj5I!q5KxYk#cup&cpRD@J>i(QDa#nqTD0$-FqcDByW6(nB#cG{Gw8T
zoLYI-xI>xmFL|fte9&8OV9tKRxl}!r(_xUwWGNHq9bk_7u70yRYgq93vH%DA-uwSA
zeN1`rWKTY6%W$DC_BQX>A)+dChktC%XJ~*R5P;NgXXAZf5$hRBMOwY$;3wsKZ2FA6DdX0j>|@
zOG8QjCvoT!lL4u#rw#s1W;g%06RL=q^gmA8ssAMScO;)VpUP{ijENw};)T$2rg9V4%T;a?5BwqYhK2SPd`LYnNk5u-llcyA-vICj#-pdlJxT8Wjr
zbRX@{TOmS(K(U0hsRKmH_XHs7!SG0icGgy=>62&nwlrQHytg5Yj-BLF5q3j*Kjc`I
zfvBRu5sxn+yI%r*MVh|eEk8HGv3G0H55wiq7MT!;@rh=MF0}vo3PX6cce$>D-zdwu
zZ$biObBrguM*OG-BV&(-9=LA%oaMQL5vAXoF&8&JWBy+47UA!pL&v7SKC$j}=K|~Y
z{&y+%7wW|H5+&djoPY8J6UnR^1?#o};v+;)Hb^AVwf>F{_4MjB$XQgSRtnUr)n$8q
z>B{IMu$ro7fZSybu|(b2nZOS%8+RLvXz9*r#jBs4>n~u^;-NUx+`g%i>zb+8*7=<^
zy)7peQZv_wSGy9O#){9hhzB$piS`F2xYF=t%BEt+YFelb!<55v6&pj&8ug?kQLvV#
zjEyzjZ#)~kcEtvoHAUAHv?pQfRH_d<95
zRfQT9dS|2RYv@G>b0%zUwATr$3r@rFWd|ZH*xz1uLJ;QYv;kenf#WEdIweNKE^41jBplw&+!V
z$}@OXU_D9dly-~P;MwMfPe)}w@#@quV!M54!|9*ah?am7bZ3W@mdjaATrs1l7;#uz^1gsqNYJqz{M)QskL%AgQo@Tfv-2jpuP%vP79i$+
z9^8l#aaw!0c-SZKxF%SsN+bhfQo(C{*#PEGgenYt^0@DN!6fS&2<5Xo!FI=}liJ6P
z9Fhf*Bb3pmq8qa3oI0&~Oi*L*0VjE(FN7}FD`n?HgBVVv(@T2UrWmB_q7sBg4C~T3
zsGPBG>$CIc4;`-#qb7ND!xhDaSUzi84hHqQ9PRerc@N`bY!K{+
zAV+WOxG>#twVgHjThnL7ki44rV6{h@X
zUi!e#d&!#PXm@=Gt~|XULjuz~0-j52&;>!SiduuxJ5e`7I0{Qk$53xV?N~%%i+^m9>$hUdor9Kec$WP~m2&
zT8C>1(+~~UMaYsUW6KtoA2U4}+qSk7&TTb75)ui=U%3T~-wi&^g;!mr>
zlfmTEjM#zoz{yf$?gT^yAOa}y515lr+i7z_B7G?v4bn&V^nUs%;ueSOG1fEK$+FZw
zm^r7FaI>%beU8R<&H7W|Y|M;i7`LW!&#kzF=kYPU3uA<~CZc34NT?J0}tsh@Aj!b#g7#L~mLwI?Z22Z&P%xT4cWIbEp=4j(S
zb&-1VXpr}H_sgd6#@$VDXLf^
zX=Q2QK=ZNdo95%z+Zk&4))b#jTiguyVSHmtSYBX&Dej_sEzQXhkwCz`1Afg9F}Vk?
zJx!J6OM4Q;U2rCt=V|(dMi*2glF;SGiwh+w#8)K_kbX-lZym2QrEtMa`=vQlQg|v1
zWdU`;v<+ju8IGgDf#72Bf0ZK(Qu!1(kSynezrtp)q+ytG)}dqzAM``Wksb?w+gs(3
z1Kjtyy
zV2NwC+SSdmG3{tRaJPZsQlaM3))m;%4J)byEDcl&J>ZX5$_l8;
z8{~3&^eGnaEthkHim0ZO7QSw5ZZD<_{1%CXEl-3buHdHsbzDkPPT9Gv(;_OWyB$~f
zAQiFS+Ev)U&JBWOrKxZ6i`o$VCkeSW1%r&`oWymH5*024ewIV%lx)T?~
z`YEAax@T$^g4|~I3PW2TjAV9(
zwTp?pw^uA}XWLo!HIbm>MI0+ehWhUteFK@L9j{&ZBFuR1Q2=DwEfPUsZr5)+fOYaw
z6N>=_Y4TrgsrF?-oEUPlCCVQ)W@GrIvm8RH7+M`qFzFy($Z97XJD0~;GIZd!Vjaph
zJH8M*@oMJ#>ZB%bn>(YN^2!+77jd^7r!yBRImikQ#?aY*%;Ambz%8C|#XkrZY76e)nx
zdKm`S_;FORlP$#mC!B1vpIgjcF@M{R9&Nkdg8gUlvXuS#D@@=u2UDNxo1}Qq-hO(1
zC!=FPe9t0|3-XR;49jQ-Nf^V-KoTF5fKz6%AY(fZ6U(SI4#^<-l@|B)3_F=c3SJoO
ztlE$v1=;#E?;IqI7Au
zX#9tw)IN2HeI>qxD-Qol0e&52{x+O+@WmCEgb65(vk4KGP}?t?p6xQ1ROc6`#WK~k
z%TRuVv3L(S19x$+c$OG}gG%X3hc|reyG_yl%
zio-N>Hb{3|5QT39&OD(TBnrY0UjYM?AITtsvab#d^)JY3|D*hE{w;+g0ruGcfWbTu
z2)<^lWfMPgv(Zclx{WjtggY&{zJb)xZ+sRP?5c5{^emIa^jmZJ$Wo%9CLRxLT*o!&
r4DA+bTl=!^oRaGpIwrwa30fvu+`N3-@f`fkF=}q*+u*pyUGq4
literal 0
HcmV?d00001
diff --git a/src/capsules/screenshots/2.png b/src/capsules/screenshots/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..11984af3ff1ffb784cd2759b22ed86e181bcc2fa
GIT binary patch
literal 3253
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