@everchron/ec-shards 0.6.78 → 0.6.79
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 +34 -28
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +34 -28
- package/dist/ec-shards.umd.js.map +1 -1
- package/dist/ec-shards.umd.min.js +1 -1
- package/dist/ec-shards.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/tree-list-item/tree-list-item.vue +27 -2
- package/src/stories/tree-list-item/tree-list-item.stories.js +19 -0
- package/src/stories/tree-list-item/tree-list-item.stories.mdx +22 -1
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
selectable ? 'selectable' : '',
|
|
6
6
|
draggable ? 'draggable' : '',
|
|
7
7
|
large ? 'ecs-tree-view-entry-lg' : '',
|
|
8
|
+
actionsOnHover ? 'actions-hover' : '',
|
|
8
9
|
stateClass
|
|
9
10
|
]">
|
|
10
11
|
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
@click="toggleCollapse" />
|
|
16
17
|
|
|
17
18
|
<ecs-icon v-if="icon" :type="icon" :color="iconColor" :width="iconSize" :height="iconSize" />
|
|
18
|
-
<span class="title">
|
|
19
|
+
<span @click="$emit('click', $event)" class="title">
|
|
19
20
|
<slot></slot>
|
|
20
21
|
</span>
|
|
21
22
|
<span v-if="count" class="after small subtle">{{count}}</span>
|
|
@@ -75,7 +76,11 @@
|
|
|
75
76
|
draggable: {
|
|
76
77
|
type: Boolean,
|
|
77
78
|
default: false
|
|
78
|
-
}
|
|
79
|
+
},
|
|
80
|
+
actionsOnHover: {
|
|
81
|
+
type: Boolean,
|
|
82
|
+
default: false
|
|
83
|
+
},
|
|
79
84
|
},
|
|
80
85
|
|
|
81
86
|
data () {
|
|
@@ -154,6 +159,21 @@
|
|
|
154
159
|
}
|
|
155
160
|
}
|
|
156
161
|
|
|
162
|
+
&.ecs-state-hover{
|
|
163
|
+
cursor: pointer;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
&.actions-hover{
|
|
167
|
+
.ecs-tree-view-entry-actions{
|
|
168
|
+
opacity: 0;
|
|
169
|
+
transition: .2s;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&:hover .ecs-tree-view-entry-actions{
|
|
173
|
+
opacity: 1;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
157
177
|
&.active{
|
|
158
178
|
background: rgba(#0661EB, .06);
|
|
159
179
|
}
|
|
@@ -199,6 +219,11 @@
|
|
|
199
219
|
overflow: hidden;
|
|
200
220
|
white-space: nowrap;
|
|
201
221
|
margin-left: 6px;
|
|
222
|
+
flex: 1;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
&-actions{
|
|
226
|
+
margin-left: auto;
|
|
202
227
|
}
|
|
203
228
|
|
|
204
229
|
.after{
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import EcsTreeListItem from '@components/tree-list-item/tree-list-item'
|
|
2
2
|
import EcsTreeList from '@components/tree-list/tree-list'
|
|
3
|
+
import EcsButton from '@components/button/button'
|
|
3
4
|
|
|
4
5
|
export default {
|
|
5
6
|
title: 'Content Structures/Tree List Item',
|
|
@@ -92,3 +93,21 @@ export const treeListItemDraggable = () => ({
|
|
|
92
93
|
</ecs-tree-list-item>
|
|
93
94
|
</ecs-tree-list>`,
|
|
94
95
|
});
|
|
96
|
+
|
|
97
|
+
export const treeListItemActions = () => ({
|
|
98
|
+
components: { EcsTreeListItem, EcsTreeList, EcsButton },
|
|
99
|
+
template: `<ecs-tree-list>
|
|
100
|
+
<ecs-tree-list-item state="hover">
|
|
101
|
+
Actions (always visible)
|
|
102
|
+
<template slot="actions">
|
|
103
|
+
<ecs-button size="xsml" icon="link-remove" icon-only />
|
|
104
|
+
</template>
|
|
105
|
+
</ecs-tree-list-item>
|
|
106
|
+
<ecs-tree-list-item state="hover" actions-on-hover>
|
|
107
|
+
Actions (on hover)
|
|
108
|
+
<template slot="actions">
|
|
109
|
+
<ecs-button size="xsml" icon="link-remove" icon-only />
|
|
110
|
+
</template>
|
|
111
|
+
</ecs-tree-list-item>
|
|
112
|
+
</ecs-tree-list>`,
|
|
113
|
+
});
|
|
@@ -143,6 +143,27 @@ If a tree view item can be dragged, set the `draggable` attribute. This will add
|
|
|
143
143
|
</ecs-tree-list>
|
|
144
144
|
```
|
|
145
145
|
|
|
146
|
+
## Actions
|
|
147
|
+
|
|
148
|
+
If a tree view item has any additional controls or action buttons, use the `actions` slot.
|
|
149
|
+
|
|
150
|
+
<Canvas withSource="none" withToolbar={true}>
|
|
151
|
+
<Story name="Tree List Item Actions" height="80px">
|
|
152
|
+
{stories.treeListItemActions()}
|
|
153
|
+
</Story>
|
|
154
|
+
</Canvas>
|
|
155
|
+
|
|
156
|
+
```js
|
|
157
|
+
<ecs-tree-list>
|
|
158
|
+
<ecs-tree-list-item>
|
|
159
|
+
Draggable List Item
|
|
160
|
+
<template slot="actions">
|
|
161
|
+
<ecs-button size="xsml" icon="link-break" icon-only />
|
|
162
|
+
</template>
|
|
163
|
+
</ecs-tree-list-item>
|
|
164
|
+
</ecs-tree-list>
|
|
165
|
+
```
|
|
166
|
+
|
|
146
167
|
## Props, Slots and Events
|
|
147
168
|
|
|
148
|
-
<ArgsTable of={EcsTreeListItem} />
|
|
169
|
+
<ArgsTable of={EcsTreeListItem} />
|