@everchron/ec-shards 0.6.71 → 0.6.75
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/ec-shards.common.js +206 -86
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +206 -86
- package/dist/ec-shards.umd.js.map +1 -1
- package/dist/ec-shards.umd.min.js +2 -2
- package/dist/ec-shards.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/calendar-comment.svg +1 -0
- package/src/assets/icons/calendar-document.svg +1 -0
- package/src/assets/icons/document-comment.svg +1 -0
- package/src/assets/icons/marker-false.svg +1 -0
- package/src/assets/icons/video-false.svg +1 -0
- package/src/assets/icons/video.svg +1 -1
- package/src/components/quicklink/quicklink.vue +1 -1
- package/src/components/rating-favorability/rating-favorability.vue +7 -8
- package/src/components/section/section.vue +25 -7
- package/src/stories/section/section.stories.js +5 -0
- package/src/stories/section/section.stories.mdx +13 -1
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g vector-effect="non-scaling-stroke" stroke="currentColor" opacity=".5" transform="translate(5.25 5.25)"><path vector-effect="non-scaling-stroke" d="M5.11463928,19.5 L3,19.5 C1.34314575,19.5 0,18.1568542 0,16.5 L0,3 C0,1.34314575 1.34314575,0 3,0 L16.5,0 C18.1568542,0 19.5,1.34314575 19.5,3 L19.5,7.19850922 L19.5,7.19850922"/><line vector-effect="non-scaling-stroke" x1="19.5" y1="5.417" y2="5.417"/><path vector-effect="non-scaling-stroke" d="M4.11558333 12.6845833C4.11558333 12.7144988 4.09133209 12.73875 4.06141667 12.73875 4.03150124 12.73875 4.00725 12.7144988 4.00725 12.6845833 4.00725 12.6546679 4.03150124 12.6304167 4.06141667 12.6304167M4.06141667 9.40416667C4.09133209 9.40416667 4.11558333 9.42841791 4.11558333 9.45833333M7.31475 9.40416667C7.34466542 9.40416667 7.36891667 9.42841791 7.36891667 9.45833333M4.11558333 15.9379167C4.11558333 15.9678321 4.09133209 15.9920833 4.06141667 15.9920833 4.03150124 15.9920833 4.00725 15.9678321 4.00725 15.9379167 4.00725 15.9080012 4.03150124 15.88375 4.06141667 15.88375"/></g><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M15.2637691,23.3586399 C14.6773944,22.4875937 14.3264211,21.4450146 14.3264211,20.3154526 C14.3264211,17.2917299 16.7771511,14.841 19.8008737,14.841 C22.8245963,14.841 25.2753263,17.2917299 25.2753263,20.3154526 C25.2753263,23.3391752 22.8245963,25.7899051 19.8008737,25.7899051 C18.8726499,25.7899051 18.0003871,25.5545036 17.2339637,25.1469611 C16.4152289,25.5837007 15.4863968,25.841 14.4943044,25.841 C14.2303141,25.841 13.9730148,25.8172774 13.7181486,25.7838224 C14.4316523,25.1347956 14.9681486,24.3014623 15.2637691,23.3586399 Z"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g vector-effect="non-scaling-stroke" stroke="currentColor" opacity=".5" transform="translate(5.25 5.25)"><path vector-effect="non-scaling-stroke" d="M5.11463928,19.5 L3,19.5 C1.34314575,19.5 0,18.1568542 0,16.5 L0,3 C0,1.34314575 1.34314575,0 3,0 L16.5,0 C18.1568542,0 19.5,1.34314575 19.5,3 L19.5,7.19850922 L19.5,7.19850922"/><line vector-effect="non-scaling-stroke" x1="19.5" y1="5.417" y2="5.417"/><path vector-effect="non-scaling-stroke" d="M4.11558333 12.6845833C4.11558333 12.7144988 4.09133209 12.73875 4.06141667 12.73875 4.03150124 12.73875 4.00725 12.7144988 4.00725 12.6845833 4.00725 12.6546679 4.03150124 12.6304167 4.06141667 12.6304167M4.06141667 9.40416667C4.09133209 9.40416667 4.11558333 9.42841791 4.11558333 9.45833333M4.11558333 15.9379167C4.11558333 15.9678321 4.09133209 15.9920833 4.06141667 15.9920833 4.03150124 15.9920833 4.00725 15.9678321 4.00725 15.9379167 4.00725 15.9080012 4.03150124 15.88375 4.06141667 15.88375"/></g><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M15.375,14 L21.68075,14 C22.045125,14 22.3950625,14.1406667 22.652875,14.3906667 L24.597125,16.276 C24.8549375,16.526 25,16.8653333 25,17.2186667 L25,24.6666667 C25,25.4033333 24.3846875,26 23.625,26 L15.375,26 C14.6153125,26 14,25.4033333 14,24.6666667 L14,15.3333333 C14,14.5966667 14.6153125,14 15.375,14 Z"/><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M25,18 L21.8,18 C21.3584,18 21,17.6416 21,17.2 L21,14"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M22.5833333,13.0781174 C22.5833333,12.500832 22.5833333,11.634904 22.5833333,10.4803333 C22.5833333,9.90616667 22.35475,9.35475 21.9485,8.9485 L18.8848333,5.88483333 C18.4785833,5.47858333 17.9271667,5.25 17.353,5.25 L9.58333333,5.25 C8.38625,5.25 7.41666667,6.21958333 7.41666667,7.41666667 L7.41666667,22.5833333 C7.41666667,23.7804167 8.38625,24.75 9.58333333,24.75 C10.3698437,24.75 10.9597264,24.75 11.3529816,24.75" opacity=".5"/><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M15.2637691,23.3586399 C14.6773944,22.4875937 14.3264211,21.4450146 14.3264211,20.3154526 C14.3264211,17.2917299 16.7771511,14.841 19.8008737,14.841 C22.8245963,14.841 25.2753263,17.2917299 25.2753263,20.3154526 C25.2753263,23.3391752 22.8245963,25.7899051 19.8008737,25.7899051 C18.8726499,25.7899051 18.0003871,25.5545036 17.2339637,25.1469611 C16.4152289,25.5837007 15.4863968,25.841 14.4943044,25.841 C14.2303141,25.841 13.9730148,25.8172774 13.7181486,25.7838224 C14.4316523,25.1347956 14.9681486,24.3014623 15.2637691,23.3586399 Z"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g vector-effect="non-scaling-stroke" stroke="currentColor" opacity=".5" transform="translate(5.494 5.261)"><polyline vector-effect="non-scaling-stroke" points="2.51 14.31 0 16.821 1.47 18.566 4.338 18.566 5.573 17.377"/><path vector-effect="non-scaling-stroke" d="M8.42616667 16.0548391 7.66025 16.8207558C6.81416667 17.6668391 5.44266667 17.6668391 4.59658333 16.8207558L3.06475 15.2889224C2.21866667 14.4428391 2.21866667 13.0713391 3.06475 12.2252558L3.83066667 11.4593391M5.30296785 7.29670239C5.04042315 7.52643297 4.61971164 7.89456187 4.04083333 8.40108911 3.09725 9.22658911 3.04958333 10.6771724 3.93575 11.5633391L8.32108333 15.9486724C9.20725 16.8348391 10.6589167 16.7860891 11.4833333 15.8435891 11.9959642 15.2577354 12.3804373 14.818345 12.6367528 14.5254182M15.2533886 11.5350287C16.0252804 10.6528819 17.390262 9.09292978 19.3483333 6.85517245 20.0990833 5.99717245 20.05575 4.70367245 19.24975 3.89658911L15.9878333.634672448C15.18075-.172410885 13.88725-.214660885 13.02925.536089115 10.8967813 2.40203135 9.29742979 3.80148802 8.23119545 4.73445913"/></g><line vector-effect="non-scaling-stroke" x1="9" x2="22.5" y1="8" y2="21.5" stroke="currentColor"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g vector-effect="non-scaling-stroke" stroke="currentColor" opacity=".5" transform="translate(5.333 5.333)"><path vector-effect="non-scaling-stroke" d="M9.84967295,19.333333 L5,19.333333 C2.23857625,19.333333 0,17.0947567 0,14.333333 L0,5 C0,2.23857625 2.23857625,0 5,0 L14.333333,0 C17.0947567,0 19.333333,2.23857625 19.333333,5 L19.333333,10.2751109 L19.333333,10.2751109"/><path vector-effect="non-scaling-stroke" d="M6.74809447,7.25183654 C6.74809447,6.81652264 6.98227676,6.41486596 7.36108777,6.2003889 C7.73989879,5.98591183 8.2047937,5.99177103 8.57807902,6.21572698 L12.6027714,8.63055693 C12.9667018,8.8489372 13.1893762,9.24224309 13.1893762,9.6666665 C13.1893762,10.0910899 12.9667018,10.4843958 12.6027714,10.7027761 L8.57807902,13.1176664 C8.2047937,13.3416224 7.73989879,13.3474816 7.36108777,13.1330045 C6.98227676,12.9185275 6.74809447,12.5168708 6.74809447,12.0815569 L6.74809447,7.25183654 Z"/></g><g vector-effect="non-scaling-stroke" stroke="currentColor" transform="translate(19 19)"><line vector-effect="non-scaling-stroke" x2="6" y2="6"/><line vector-effect="non-scaling-stroke" x1="6" y2="6"/></g></g></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><rect vector-effect="non-scaling-stroke" width="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><rect vector-effect="non-scaling-stroke" width="19.333" height="19.333" x="5.333" y="5.333" stroke="currentColor" rx="5"/><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M12.0814278,12.5851699 C12.0814278,12.149856 12.3156101,11.7481993 12.6944211,11.5337222 C13.0732321,11.3192452 13.538127,11.3251044 13.9114124,11.5490603 L17.9361048,13.9638903 C18.3000351,14.1822705 18.5227096,14.5755764 18.5227096,14.9999998 C18.5227096,15.4244232 18.3000351,15.8177291 17.9361048,16.0361094 L13.9114124,18.4509998 C13.538127,18.6749557 13.0732321,18.6808149 12.6944211,18.4663379 C12.3156101,18.2518608 12.0814278,17.8502041 12.0814278,17.4148902 L12.0814278,12.5851699 Z"/></g></svg>
|
|
@@ -88,14 +88,13 @@
|
|
|
88
88
|
height: 20px;
|
|
89
89
|
border-radius: 3px;
|
|
90
90
|
border: 1px solid;
|
|
91
|
+
position: relative;
|
|
91
92
|
}
|
|
92
93
|
|
|
93
94
|
.icon{
|
|
94
95
|
position: absolute;
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
top: -5px;
|
|
98
|
-
left: -5px;
|
|
96
|
+
left: -6px;
|
|
97
|
+
top: -6px;
|
|
99
98
|
}
|
|
100
99
|
|
|
101
100
|
.label{
|
|
@@ -159,22 +158,22 @@
|
|
|
159
158
|
}
|
|
160
159
|
|
|
161
160
|
.good{
|
|
162
|
-
border:
|
|
161
|
+
border: 1px solid transparent;
|
|
163
162
|
background: $green-8;
|
|
164
163
|
}
|
|
165
164
|
|
|
166
165
|
.mixed{
|
|
167
|
-
border:
|
|
166
|
+
border: 1px solid transparent;
|
|
168
167
|
background: $yellow-8;
|
|
169
168
|
}
|
|
170
169
|
|
|
171
170
|
.bad{
|
|
172
|
-
border:
|
|
171
|
+
border: 1px solid transparent;
|
|
173
172
|
background: $red-8;
|
|
174
173
|
}
|
|
175
174
|
|
|
176
175
|
.unrated{
|
|
177
|
-
border:
|
|
176
|
+
border: 1px solid transparent;
|
|
178
177
|
background: $gray-4;
|
|
179
178
|
}
|
|
180
179
|
}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="ecs-section"
|
|
3
|
-
:class="[borderTop ?
|
|
4
|
-
borderBottom ?
|
|
3
|
+
:class="[borderTop ? 'ecs-section-border-top' : '',
|
|
4
|
+
borderBottom ? 'ecs-section-border-bottom' : '',
|
|
5
5
|
indentation,
|
|
6
6
|
headlineIndentation]">
|
|
7
7
|
|
|
8
|
-
<h3 class="ecs-section-headline" :class="[headlineBold ?
|
|
9
|
-
|
|
8
|
+
<h3 v-if="title" class="ecs-section-headline" :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', hasControls]">
|
|
9
|
+
{{title}}
|
|
10
|
+
<div v-if="$slots.controls" class="ecs-section-controls">
|
|
11
|
+
<slot name="controls"></slot>
|
|
12
|
+
</div>
|
|
13
|
+
</h3>
|
|
14
|
+
|
|
15
|
+
<div class="ecs-section-content" :class="title ? '' : 'ecs-section-content-equal'">
|
|
10
16
|
<slot></slot>
|
|
11
17
|
</div>
|
|
12
18
|
</div>
|
|
@@ -16,8 +22,7 @@
|
|
|
16
22
|
export default {
|
|
17
23
|
props: {
|
|
18
24
|
title: {
|
|
19
|
-
type: String
|
|
20
|
-
required: true
|
|
25
|
+
type: String
|
|
21
26
|
},
|
|
22
27
|
indent: {
|
|
23
28
|
type: String,
|
|
@@ -103,9 +108,18 @@
|
|
|
103
108
|
}
|
|
104
109
|
}
|
|
105
110
|
|
|
111
|
+
&-controls{
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
}
|
|
115
|
+
|
|
106
116
|
&-content{
|
|
107
117
|
padding-top: 15px;
|
|
108
118
|
padding-bottom: 25px;
|
|
119
|
+
|
|
120
|
+
&-equal{
|
|
121
|
+
padding-top: 25px;
|
|
122
|
+
}
|
|
109
123
|
}
|
|
110
124
|
|
|
111
125
|
&-indent-md,
|
|
@@ -148,7 +162,11 @@
|
|
|
148
162
|
padding-left: 15px;
|
|
149
163
|
padding-right: 15px;
|
|
150
164
|
padding-top: 10px;
|
|
151
|
-
padding-bottom: 20px
|
|
165
|
+
padding-bottom: 20px;
|
|
166
|
+
|
|
167
|
+
&-equal{
|
|
168
|
+
padding-top: 20px;
|
|
169
|
+
}
|
|
152
170
|
}
|
|
153
171
|
}
|
|
154
172
|
|
|
@@ -16,6 +16,11 @@ export const borderless = () => ({
|
|
|
16
16
|
template: `<ecs-section title="Headline">Content</ecs-section>`,
|
|
17
17
|
});
|
|
18
18
|
|
|
19
|
+
export const noHeadline = () => ({
|
|
20
|
+
components: { EcsSection },
|
|
21
|
+
template: `<ecs-section>Content</ecs-section>`,
|
|
22
|
+
});
|
|
23
|
+
|
|
19
24
|
export const indentation = () => ({
|
|
20
25
|
components: { EcsSection },
|
|
21
26
|
template: `<div>
|
|
@@ -24,6 +24,18 @@ Sections are simple content blocks used for grouping related content or forms.
|
|
|
24
24
|
|
|
25
25
|
A headline can be set (only text) with the `title` attribute. By setting the `headline-bold` attribute, the headline will appear as a bolder, more emphasized version.
|
|
26
26
|
|
|
27
|
+
By not passing any headline, the section component will render without a headline.
|
|
28
|
+
|
|
29
|
+
<Canvas withSource="none" withToolbar={true}>
|
|
30
|
+
<Story name="noHeadline" height="200px">
|
|
31
|
+
{stories.noHeadline()}
|
|
32
|
+
</Story>
|
|
33
|
+
</Canvas>
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
<ecs-section>Content</ecs-collapse>
|
|
37
|
+
```
|
|
38
|
+
|
|
27
39
|
## Borders
|
|
28
40
|
|
|
29
41
|
The top and bottom borders can be turned on by adding the `border-top` and `border-bottom` attributes. When these attributes are missing, the section is rendered without any borders.
|
|
@@ -82,4 +94,4 @@ To show additional controls on the right side of the headline, you can use the `
|
|
|
82
94
|
|
|
83
95
|
## Props and Slots
|
|
84
96
|
|
|
85
|
-
<ArgsTable of={EcsSection} />
|
|
97
|
+
<ArgsTable of={EcsSection} />
|