@everchron/ec-shards 7.5.16 → 7.5.17

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.16",
3
+ "version": "7.5.17",
4
4
  "private": false,
5
5
  "description": "Everchron Shards UI Library",
6
6
  "repository": "https://github.com/everchron/ec-shards.git",
@@ -1,6 +1,7 @@
1
1
  <template>
2
2
  <div class="ecs-data-grid-row" :class="[state, type == 'header' ? 'header-row' : '']" ref="grid_row" role="row">
3
3
  <div v-if="state == 'droppable'" @click="handleDropzoneClick" class="ecs-data-grid-row-drop-zone" />
4
+ <div v-if="state == 'disabled'" class="ecs-data-grid-row-block" />
4
5
 
5
6
  <!-- @slot All of the row's cells go here. There should **never** be any other child component other than EcsDataGridCell be used. -->
6
7
  <slot></slot>
@@ -14,7 +15,7 @@
14
15
  /** Determines the state of the table row. */
15
16
  state: {
16
17
  type: String,
17
- validator: v => ['default', 'selected', 'opened', 'added', 'droppable'].includes(v),
18
+ validator: v => ['default', 'selected', 'opened', 'added', 'droppable', 'disabled'].includes(v),
18
19
  default: 'default'
19
20
  },
20
21
 
@@ -129,10 +130,26 @@
129
130
  animation: border-added 8s ease forwards;
130
131
  }
131
132
 
132
- &-drop-zone{
133
+ &.disabled{
134
+ filter: grayscale(1);
135
+ }
136
+
137
+ &-drop-zone,
138
+ &-block{
133
139
  position: absolute;
134
140
  inset: 0;
135
141
  z-index: 2;
136
142
  }
143
+
144
+ &-block{
145
+ cursor: not-allowed;
146
+ }
147
+ }
148
+ </style>
149
+
150
+
151
+ <style lang="scss">
152
+ .ecs-data-grid-row.disabled > .ecs-data-grid-cell > .ecs-data-grid-cell-inner {
153
+ opacity: .5;
137
154
  }
138
155
  </style>
@@ -32,6 +32,12 @@ export const states = () => ({
32
32
  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
33
33
  </ecs-data-grid-row>
34
34
 
35
+ <ecs-data-grid-row state="disabled">
36
+ <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last><span style="color:green;">Grayscale in Disabled State</span></ecs-data-grid-cell>
37
+ <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
38
+ <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
39
+ </ecs-data-grid-row>
40
+
35
41
  <ecs-data-grid-row state="opened">
36
42
  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Opened in Viewer State</ecs-data-grid-cell>
37
43
  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>