@everchron/ec-shards 0.7.23 → 0.7.26

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 (23) hide show
  1. package/dist/ec-shards.common.js +685 -354
  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 +685 -354
  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/dist/img/dialog-field.03b81d06.svg +1 -0
  9. package/dist/img/dialog-table.bb54ffb5.svg +1 -0
  10. package/package.json +1 -1
  11. package/src/.DS_Store +0 -0
  12. package/src/assets/.DS_Store +0 -0
  13. package/src/assets/icons/.DS_Store +0 -0
  14. package/src/assets/images/.DS_Store +0 -0
  15. package/src/assets/images/dialog-icons/dialog-field.svg +1 -0
  16. package/src/assets/images/dialog-icons/dialog-table.svg +1 -0
  17. package/src/assets/images/spinner/.DS_Store +0 -0
  18. package/src/components/.DS_Store +0 -0
  19. package/src/components/checkbox/checkbox.vue +14 -8
  20. package/src/components/dialog-header/dialog-header.vue +8 -0
  21. package/src/stories/.DS_Store +0 -0
  22. package/src/stories/checkbox/checkbox.stories.js +7 -0
  23. package/src/stories/checkbox/checkbox.stories.mdx +15 -1
package/dist/img/dialog-field.03b81d06.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><g fill="none" fill-rule="evenodd" transform="translate(7 8)"><polygon points="44 44 0 44 0 0 44 0"/><rect width="34" height="18" x="6" y="13" fill="#FFF" opacity=".5" rx="4"/><line x1="12.833" x2="22" y1="22" y2="22" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><line x1="29.333" x2="29.333" y1="36.667" y2="7.333" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><line x1="24.75" x2="33.917" y1="36.667" y2="36.667" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><line x1="24.75" x2="33.917" y1="7.333" y2="7.333" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/></g></svg>
package/dist/img/dialog-table.bb54ffb5.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M47,17 C47.5522847,17 48,17.4477153 48,18 L48,22 C48,22.5522847 47.5522847,23 47,23 L34,23 L34,17 L47,17 Z M33,17 L33,23 L20,23 L20,17 L33,17 Z M19,23 L13,23 C12.4477153,23 12,22.5522847 12,22 L12,18 C12,17.4477153 12.4477153,17 13,17 L19,17 L19,23 Z"/><path fill="#FFF" d="M47,39 C47.5522847,39 48,39.4477153 48,40 L48,43 C48,43.5522847 47.5522847,44 47,44 L34,44 L34,39 L47,39 Z M47,32 C47.5522847,32 48,32.4477153 48,33 L48,36 C48,36.5522847 47.5522847,37 47,37 L34,37 L34,32 L47,32 Z M47,25 C47.5522847,25 48,25.4477153 48,26 L48,29 C48,29.5522847 47.5522847,30 47,30 L34,30 L34,25 L47,25 Z M33,39 L33,44 L20,44 L20,39 L33,39 Z M19,44 L13,44 C12.4477153,44 12,43.5522847 12,43 L12,40 C12,39.4477153 12.4477153,39 13,39 L19,39 L19,44 Z M33,32 L33,37 L20,37 L20,32 L33,32 Z M19,37 L13,37 C12.4477153,37 12,36.5522847 12,36 L12,33 C12,32.4477153 12.4477153,32 13,32 L19,32 L19,37 Z M33,25 L33,30 L20,30 L20,25 L33,25 Z M19,30 L13,30 C12.4477153,30 12,29.5522847 12,29 L12,26 C12,25.4477153 12.4477153,25 13,25 L19,25 L19,30 Z" opacity=".5"/></g></svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everchron/ec-shards",
3
- "version": "0.7.23",
3
+ "version": "0.7.26",
4
4
  "private": false,
5
5
  "description": "Everchron Shards UI Library",
6
6
  "repository": "https://github.com/everchron/ec-shards.git",
package/src/.DS_Store ADDED
Binary file
package/src/assets/.DS_Store ADDED
Binary file
package/src/assets/icons/.DS_Store ADDED
Binary file
package/src/assets/images/.DS_Store ADDED
Binary file
package/src/assets/images/dialog-icons/dialog-field.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><g fill="none" fill-rule="evenodd" transform="translate(7 8)"><polygon points="44 44 0 44 0 0 44 0"/><rect width="34" height="18" x="6" y="13" fill="#FFF" opacity=".5" rx="4"/><line x1="12.833" x2="22" y1="22" y2="22" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><line x1="29.333" x2="29.333" y1="36.667" y2="7.333" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><line x1="24.75" x2="33.917" y1="36.667" y2="36.667" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><line x1="24.75" x2="33.917" y1="7.333" y2="7.333" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/></g></svg>
package/src/assets/images/dialog-icons/dialog-table.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M47,17 C47.5522847,17 48,17.4477153 48,18 L48,22 C48,22.5522847 47.5522847,23 47,23 L34,23 L34,17 L47,17 Z M33,17 L33,23 L20,23 L20,17 L33,17 Z M19,23 L13,23 C12.4477153,23 12,22.5522847 12,22 L12,18 C12,17.4477153 12.4477153,17 13,17 L19,17 L19,23 Z"/><path fill="#FFF" d="M47,39 C47.5522847,39 48,39.4477153 48,40 L48,43 C48,43.5522847 47.5522847,44 47,44 L34,44 L34,39 L47,39 Z M47,32 C47.5522847,32 48,32.4477153 48,33 L48,36 C48,36.5522847 47.5522847,37 47,37 L34,37 L34,32 L47,32 Z M47,25 C47.5522847,25 48,25.4477153 48,26 L48,29 C48,29.5522847 47.5522847,30 47,30 L34,30 L34,25 L47,25 Z M33,39 L33,44 L20,44 L20,39 L33,39 Z M19,44 L13,44 C12.4477153,44 12,43.5522847 12,43 L12,40 C12,39.4477153 12.4477153,39 13,39 L19,39 L19,44 Z M33,32 L33,37 L20,37 L20,32 L33,32 Z M19,37 L13,37 C12.4477153,37 12,36.5522847 12,36 L12,33 C12,32.4477153 12.4477153,32 13,32 L19,32 L19,37 Z M33,25 L33,30 L20,30 L20,25 L33,25 Z M19,30 L13,30 C12.4477153,30 12,29.5522847 12,29 L12,26 C12,25.4477153 12.4477153,25 13,25 L19,25 L19,30 Z" opacity=".5"/></g></svg>
package/src/components/.DS_Store ADDED
Binary file
package/src/components/checkbox/checkbox.vue CHANGED
@@ -6,6 +6,7 @@
6
6
 
7
7
  <input
8
8
  class="ecs-form-check-input"
9
+ :class="indeterminateState ? 'indeterminate' : ''"
9
10
  type="checkbox"
10
11
  autocomplete="off"
11
12
  :id="id || _uid"
@@ -70,7 +71,8 @@
70
71
  data() {
71
72
  return {
72
73
  checked: !!this.value,
73
- oldValue: this.value
74
+ oldValue: this.value,
75
+ indeterminateState: this.indeterminate
74
76
  }
75
77
  },
76
78
 
@@ -107,15 +109,19 @@
107
109
  }
108
110
  },
109
111
 
110
- value(){
112
+ value() {
111
113
  this.checked = !!this.value
114
+ },
115
+
116
+ indeterminate() {
117
+ this.indeterminateState = this.indeterminate
112
118
  }
113
119
  },
114
120
 
115
121
  methods: {
116
122
  handleClick() {
123
+ this.indeterminateState = false
117
124
  this.checked = !this.checked
118
- console.log('shard:handleClick:emitting', this.checked ? this.valueWhenTrue : this.valueWhenFalse, this.id)
119
125
  this.$emit('input', this.checked ? this.valueWhenTrue : this.valueWhenFalse, this.id)
120
126
  }
121
127
  }
@@ -137,7 +143,7 @@
137
143
  background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><polyline fill="none" stroke="#{$blue-10}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" points="6 9.259 8.347 11.998 12 6"/></svg>');
138
144
  }
139
145
 
140
- &[type="checkbox"]:indeterminate + label:after{
146
+ &[type="checkbox"].indeterminate + label:after{
141
147
  content: "";
142
148
  position: absolute;
143
149
  width: 8px;
@@ -145,12 +151,12 @@
145
151
  height: 2px;
146
152
  border-radius: 1px;
147
153
  left: 5px;
148
- top: 10px;
154
+ top: 8px;
149
155
  }
150
156
 
151
- &[type="checkbox"]:indeterminate + label:before{
152
- background: $blue-2;
153
- border-color: $blue-3;
157
+ &[type="checkbox"].indeterminate + label:before{
158
+ background: rgba($blue-10, .07);
159
+ border-color: rgba($blue-10, .3);
154
160
  }
155
161
  }
156
162
  </style>
package/src/components/dialog-header/dialog-header.vue CHANGED
@@ -179,5 +179,13 @@
179
179
  &-link:before{
180
180
  background: url('../../assets/images/dialog-icons/dialog-link.svg');
181
181
  }
182
+
183
+ &-field:before{
184
+ background: url('../../assets/images/dialog-icons/dialog-field.svg');
185
+ }
186
+
187
+ &-table:before{
188
+ background: url('../../assets/images/dialog-icons/dialog-table.svg');
189
+ }
182
190
  }
183
191
  </style>
package/src/stories/.DS_Store ADDED
Binary file
package/src/stories/checkbox/checkbox.stories.js CHANGED
@@ -40,3 +40,10 @@ export const checkboxInline = () => ({
40
40
  First: {{first}}, Second: {{second}}
41
41
  </div>`,
42
42
  });
43
+
44
+ export const checkboxIndeterminate = () => ({
45
+ components: { EcsCheckbox },
46
+ template: `<div>
47
+ <ecs-checkbox indeterminate inline name="apple">Apples</ecs-checkbox>
48
+ </div>`,
49
+ });
package/src/stories/checkbox/checkbox.stories.mdx CHANGED
@@ -51,6 +51,20 @@ If more than one checkbox should be placed within one row, use the `inline` attr
51
51
  <ecs-checkbox v-model="second" inline name="orange">Orange</ecs-checkbox>
52
52
  ```
53
53
 
54
+ ## Indeterminate State
55
+
56
+ Set the checkbox state to indeterminate by using the `indeterminate` prop. Note that this is only a visual state change.
57
+
58
+ <Canvas withSource="none" withToolbar={true}>
59
+ <Story name="Checkbox Indeterminate" height="50px">
60
+ {stories.checkboxIndeterminate()}
61
+ </Story>
62
+ </Canvas>
63
+
64
+ ```js
65
+ <ecs-checkbox indeterminate inline name="apple">Apples</ecs-checkbox>
66
+ ```
67
+
54
68
  ## Props, Slots and Events
55
69
 
56
- <ArgsTable of={EcsCheckbox} />
70
+ <ArgsTable of={EcsCheckbox} />