@everchron/ec-shards 0.6.82 → 0.6.86

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 (17) hide show
  1. package/dist/ec-shards.common.js +195 -111
  2. package/dist/ec-shards.common.js.map +1 -1
  3. package/dist/ec-shards.css +1 -1
  4. package/dist/ec-shards.umd.js +195 -111
  5. package/dist/ec-shards.umd.js.map +1 -1
  6. package/dist/ec-shards.umd.min.js +2 -2
  7. package/dist/ec-shards.umd.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/assets/icons/comment-favorability.svg +1 -0
  10. package/src/assets/icons/comment-profile.svg +1 -0
  11. package/src/assets/icons/comment-tag.svg +1 -0
  12. package/src/components/button-table/button-table.vue +0 -5
  13. package/src/components/card/card.vue +11 -0
  14. package/src/components/layout-index/layout-index.vue +1 -1
  15. package/src/components/multiselect-search-token/multiselect-search-token.vue +26 -2
  16. package/src/stories/multiselect-search-token/multiselect-search-token.stories.js +7 -0
  17. package/src/stories/multiselect-search-token/multiselect-search-token.stories.mdx +14 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everchron/ec-shards",
3
- "version": "0.6.82",
3
+ "version": "0.6.86",
4
4
  "private": false,
5
5
  "description": "Everchron Shards UI Library",
6
6
  "repository": "https://github.com/everchron/ec-shards.git",
package/src/assets/icons/comment-favorability.svg ADDED
@@ -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="M15,24.75 C13.3468333,24.75 11.7933333,24.33075 10.4283333,23.6049167 C8.97016667,24.38275 7.31591667,24.841 5.549,24.841 C5.07883333,24.841 4.62058333,24.79875 4.16666667,24.7391667 C5.43741667,23.58325 6.39291667,22.0990833 6.91941667,20.4199167 C5.87508333,18.8685833 5.25,17.01175 5.25,15 C5.25,9.61475 9.61475,5.25 15,5.25 C20.38525,5.25 24.75,9.61475 24.75,15" opacity=".5"/><polyline vector-effect="non-scaling-stroke" stroke="currentColor" points="12.5 17.782 16.282 14 20.063 17.782"/><polyline vector-effect="non-scaling-stroke" stroke="currentColor" points="17.979 23.946 21.761 20.164 25.543 23.946" transform="matrix(1 0 0 -1 0 44.11)"/></g></svg>
package/src/assets/icons/comment-profile.svg ADDED
@@ -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="M13.4682035,24.6284013 C12.3855733,24.4550171 11.3627833,24.1018067 10.4283333,23.6049167 C8.97016667,24.38275 7.31591667,24.841 5.549,24.841 C5.07883333,24.841 4.62058333,24.79875 4.16666667,24.7391667 C5.43741667,23.58325 6.39291667,22.0990833 6.91941667,20.4199167 C5.87508333,18.8685833 5.25,17.01175 5.25,15 C5.25,9.61475 9.61475,5.25 15,5.25 C18.7215631,5.25 21.9557637,7.3344832 23.5988861,10.3997338" opacity=".5"/><circle vector-effect="non-scaling-stroke" cx="22" cy="16.765" r="2.327" stroke="currentColor"/><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M18,24.4249997 L18,23.7469997 C18,22.280333 19.1886667,21.0916663 20.6553333,21.0916663 L23.3446667,21.0916663 C24.8113333,21.0916663 26,22.280333 26,23.7469997 L26,24.4249997"/></g></svg>
package/src/assets/icons/comment-tag.svg ADDED
@@ -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="M15,24.75 C13.3468333,24.75 11.7933333,24.33075 10.4283333,23.6049167 C8.97016667,24.38275 7.31591667,24.841 5.549,24.841 C5.07883333,24.841 4.62058333,24.79875 4.16666667,24.7391667 C5.43741667,23.58325 6.39291667,22.0990833 6.91941667,20.4199167 C5.87508333,18.8685833 5.25,17.01175 5.25,15 C5.25,9.61475 9.61475,5.25 15,5.25 C20.38525,5.25 24.75,9.61475 24.75,15" opacity=".5"/><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M16.9615229,14.2659339 L18.78177,14.2499054 C19.1210299,14.2467667 19.4475115,14.3809372 19.6877407,14.6205275 L25.376572,20.3119144 C25.8755587,20.8109011 25.8755587,21.6203967 25.376572,22.1193834 L22.1219778,25.3758943 C21.6229912,25.8755199 20.8128566,25.8755199 20.3138699,25.3758943 L14.6205663,19.6806739 C14.3835316,19.4436393 14.25,19.12163 14.25,18.7855647 L14.25,16.9889571 C14.25,16.6528919 14.3835316,16.3308825 14.6205663,16.0938479 L16.0772751,14.6365002 C16.312393,14.4013823 16.62993,14.2684895 16.9615229,14.2659339 Z"/><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M18.005815,17.4055183 C18.1703885,17.5700918 18.1703885,17.8369179 18.005815,18.0014914 C17.8412415,18.1660649 17.5744154,18.1660649 17.4098419,18.0014914 C17.2452684,17.8369179 17.2452684,17.5700918 17.4098419,17.4055183 C17.5744154,17.2409448 17.8412415,17.2409448 18.005815,17.4055183"/></g></svg>
package/src/components/button-table/button-table.vue CHANGED
@@ -58,11 +58,6 @@
58
58
  }
59
59
  },
60
60
 
61
- mounted(){
62
- if (this.label == 0)
63
- console.log('label == 0 disabled', this.disabled)
64
- },
65
-
66
61
  computed: {
67
62
  hasLabel() {
68
63
  if (this.label && this.label !== '' || this.label != null)
package/src/components/card/card.vue CHANGED
@@ -1,5 +1,6 @@
1
1
  <template>
2
2
  <div class="ecs-card"
3
+ :id="itemId"
3
4
  :class="[ selected ? 'ecs-card-selected' : '', expanded ? 'ecs-card-expanded' : '', hover ? 'ecs-card-hover' : '']"
4
5
  @click="$emit('click', $event)">
5
6
  <div class="ecs-card-inner">
@@ -16,6 +17,10 @@
16
17
 
17
18
  export default {
18
19
  props: {
20
+ id: {
21
+ type: [String, Number],
22
+ default: null
23
+ },
19
24
  selected: {
20
25
  type: Boolean,
21
26
  default: false
@@ -32,6 +37,12 @@
32
37
  type: Number,
33
38
  default: null
34
39
  }
40
+ },
41
+
42
+ computed: {
43
+ itemId(){
44
+ return `item-${ this.id }`
45
+ }
35
46
  }
36
47
  }
37
48
  </script>
package/src/components/layout-index/layout-index.vue CHANGED
@@ -89,7 +89,7 @@
89
89
  &-sidebar{
90
90
  &.overlay{
91
91
  position: absolute;
92
- z-index: 2;
92
+ z-index: 5;
93
93
  right: 0;
94
94
  top: 0;
95
95
  bottom: 0;
package/src/components/multiselect-search-token/multiselect-search-token.vue CHANGED
@@ -1,11 +1,13 @@
1
1
  <template>
2
2
  <div class="ecs-multiselect-search-token" :class="typeClass">
3
- <div v-if="icon" class="symbol">
3
+ <div v-if="icon || operator" class="symbol">
4
4
  <ecs-icon :type="icon" width="20" height="20" color="#FFF" />
5
+ <div v-if="operator" class="operator">{{ operator }}</div>
5
6
  </div>
6
7
  <div class="query">
8
+ <div v-if="descriptor" class="descriptor">{{ descriptor }}</div>
7
9
  <slot></slot>
8
- <button @click="$emit('remove', $event)" class="remove">
10
+ <button @click="$emit('remove', $event)" class="remove" title="Remove">
9
11
  <ecs-icon type="close" width="14" height="14" color="#FFF" />
10
12
  </button>
11
13
  </div>
@@ -25,6 +27,12 @@
25
27
  validator: v => ['default', 'not'].includes(v),
26
28
  default: 'default'
27
29
  },
30
+ operator: {
31
+ type: String
32
+ },
33
+ descriptor: {
34
+ type: String
35
+ },
28
36
  icon: String
29
37
  },
30
38
 
@@ -44,6 +52,9 @@
44
52
  .ecs-multiselect-search-token{
45
53
  border-radius: 2px;
46
54
  display: flex;
55
+ height: 24px;
56
+ z-index: 1;
57
+ position: relative;
47
58
 
48
59
  > div:first-child{
49
60
  border-radius: 3px 0 0 3px;
@@ -95,12 +106,25 @@
95
106
  padding: 2px;
96
107
  }
97
108
 
109
+ .operator{
110
+ color: #FFF;
111
+ font-size: 8px;
112
+ font-weight: 700;
113
+ margin: 0 3px;
114
+ line-height: 20px;
115
+ }
116
+
98
117
  .symbol,
99
118
  .query{
100
119
  display: flex;
101
120
  align-items: center;
102
121
  }
103
122
 
123
+ .descriptor{
124
+ opacity: .6;
125
+ margin-right: 4px;
126
+ }
127
+
104
128
  .query{
105
129
  overflow: hidden;
106
130
  cursor: default;
package/src/stories/multiselect-search-token/multiselect-search-token.stories.js CHANGED
@@ -13,3 +13,10 @@ export const searchToken = () => ({
13
13
  </main>`,
14
14
  });
15
15
 
16
+ export const searchTokenAddons = () => ({
17
+ components: { EcsMultiselectSearchToken },
18
+ template: `<main>
19
+ <ecs-multiselect-search-token icon="person" operator="OR" descriptor="Name">Amanda Clark</ecs-multiselect-search-token>
20
+ <ecs-multiselect-search-token type="not" icon="calendar" operator="OR" descriptor="Date added">04/05/2021</ecs-multiselect-search-token>
21
+ </main>`,
22
+ });
package/src/stories/multiselect-search-token/multiselect-search-token.stories.mdx CHANGED
@@ -23,6 +23,19 @@ There are two variants available: `default` and `not`, which can be controlled v
23
23
  <ecs-multiselect-search-token type="not" icon="person">Profiles</ecs-multiselect-search-token>
24
24
  ```
25
25
 
26
+ The props `descriptor` and `oparator` can be added to display optional field and operator labels.
27
+
28
+ <Canvas withSource="none" withToolbar={true}>
29
+ <Story name="Search Token Addons" height="80px">
30
+ {stories.searchTokenAddons()}
31
+ </Story>
32
+ </Canvas>
33
+
34
+ ```js
35
+ <ecs-multiselect-search-token icon="person" operator="OR" descriptor="Name">Amanda Clark</ecs-multiselect-search-token>
36
+ <ecs-multiselect-search-token type="not" icon="calendar" operator="OR" descriptor="Date added">04/05/2021</ecs-multiselect-search-token>
37
+ ```
38
+
26
39
  ## Props and Events
27
40
 
28
- <ArgsTable of={EcsMultiselectSearchToken} />
41
+ <ArgsTable of={EcsMultiselectSearchToken} />