@everchron/ec-shards 7.5.15 → 7.5.16

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everchron/ec-shards",
3
- "version": "7.5.15",
3
+ "version": "7.5.16",
4
4
  "private": false,
5
5
  "description": "Everchron Shards UI Library",
6
6
  "repository": "https://github.com/everchron/ec-shards.git",
@@ -25,6 +25,8 @@
25
25
  "*.svg"
26
26
  ],
27
27
  "dependencies": {
28
+ "emoji.json": "^14.0.0",
29
+ "js-search-array": "^1.0.1",
28
30
  "v-click-outside": "^2.1.3"
29
31
  },
30
32
  "peerDependencies": {
@@ -17,7 +17,10 @@
17
17
  :aria-expanded="isVisible ? 'true' : 'false'"
18
18
  :aria-controls="`collapse-${this.id}`"
19
19
  :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', isVisible ? '' : 'collapsed']">
20
- {{title}}
20
+ <ecs-flex-row :gap="4">
21
+ {{title}}
22
+ <span v-if="count" class="ecs-collapsable-headline-count">({{count}})</span>
23
+ </ecs-flex-row>
21
24
  <ecs-focus-ring :inset="0" :radius="0" />
22
25
  <div v-if="$slots.controls" class="ecs-collapsable-headline-controls">
23
26
  <slot name="controls"></slot>
@@ -40,9 +43,10 @@
40
43
  <script>
41
44
  import EcsButton from '../button/button'
42
45
  import EcsFocusRing from '../mixins/focus-ring'
46
+ import EcsFlexRow from '../flex/flex-row'
43
47
 
44
48
  export default {
45
- components: { EcsButton, EcsFocusRing },
49
+ components: { EcsButton, EcsFocusRing, EcsFlexRow },
46
50
 
47
51
  props: {
48
52
  /** Unique ID, is required to handle persist states. */
@@ -101,6 +105,10 @@ export default {
101
105
  type: String,
102
106
  validator: v => ['none', 'sml', 'md'].includes(v),
103
107
  default: 'md'
108
+ },
109
+ /** Sets the count of the collapse control in parenthese next to the headline. */
110
+ count: {
111
+ type: Number
104
112
  }
105
113
  },
106
114
 
@@ -247,6 +255,11 @@ export default {
247
255
  align-items: center;
248
256
  column-gap: $spacing-10;
249
257
  }
258
+
259
+ &-count{
260
+ font-weight: normal;
261
+ color: $color-gray-10;
262
+ }
250
263
  }
251
264
 
252
265
  .remove-button{
@@ -22,8 +22,8 @@
22
22
 
23
23
  <script>
24
24
  import EcsEmoji from './emoji.vue';
25
- //import emoji from 'emoji.json';
26
- //import searchArray from 'js-search-array';
25
+ import emoji from 'emoji.json';
26
+ import searchArray from 'js-search-array';
27
27
  //import data from 'emojibase-data/en/data.json';
28
28
 
29
29
  // Needs to be added to dependencies in package.json
@@ -8,7 +8,7 @@ export default {
8
8
 
9
9
  export const collapse = () => ({
10
10
  components: { EcsCollapse },
11
- template: `<ecs-collapse headline-bold visible id="test" title="Headline" border-bottom border-top>Content</ecs-collapse>`,
11
+ template: `<ecs-collapse headline-bold visible id="test" title="Headline" border-bottom border-top :count="3">Content</ecs-collapse>`,
12
12
  });
13
13
 
14
14
  export const borderless = () => ({