@everchron/ec-shards 5.0.0 → 5.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/data-grid/data-grid-head-cell.vue

@@ -4,7 +4,7 @@
     <div ref="resizer" class="ecs-data-grid-head-cell-inner" :style="[widthStyles, paddingStyles, resizeStyles]" :class="resizable ? 'resizable' : ''" :data-column="computedId" :data-test="computedId">
       <ecs-icon v-if="icon" :type="icon" size="20" color="#202127" :title="name" />
       <ecs-select v-else-if="select" @change="$emit('selection', $event.target.value)" type="invisible">
-        <option v-for="(option, index) in select" :key="index" :value="option.value">{{ option.name }}</option>
+        <option v-for="(option, index) in select" :key="index" :selected="option.selected" :value="option.value">{{ option.name }}</option>
       </ecs-select>
       <div v-else class="ecs-data-grid-head-cell-text">
         {{ name }}
@@ -74,7 +74,7 @@
         type: Boolean,
         default: false
       },
-      /** If passed, the head cell won't render the slot in the text, but a select menu with the passed options instead. This is useful when one column should be able to switch the data that is shown in it. For example, you could have a column with a selector in the head cell which allows you to switch between ECID, Bates Range, and Trial Exhibit No. The array needs to contain objects with `value` and `name`. */
+      /** If passed, the head cell won't render the slot in the text, but a select menu with the passed options instead. This is useful when one column should be able to switch the data that is shown in it. For example, you could have a column with a selector in the head cell which allows you to switch between ECID, Bates Range, and Trial Exhibit No. The array needs to contain objects with `value`, `name` and `selected`. */
       select: {
         type: Array
       },
@@ -182,7 +182,7 @@
         const currentColumnWidth = resizedEl.offsetWidth
 
         /** Emitted when the column has been resized. Returns the new width of the column in pixels. */
-        this.$emit('resizedWidth', currentColumnWidth)
+        this.$emit('resizedWidth', { id: this.computedId, currentColumnWidth })
 
         let columnCells = document.querySelectorAll('[data-column="' + this.name.toLowerCase() + '-column-cell"]')
         columnCells.forEach(cell => {

package/src/components/index.js

@@ -129,7 +129,8 @@ import EcsToasts from "./toasts/toasts.vue"
 import EcsToolbar from "./toolbar/toolbar.vue"
 import EcsTranscriptState from "./transcript-state/transcript-state.vue"
 import EcsTreeList from "./tree-list/tree-list.vue"
-import EcsTreeListItem from "./tree-list-item/tree-list-item.vue"
+import EcsTreeListItem from "./tree-list/tree-list-item.vue"
+import EcsTreeListHeadline from "./tree-list/tree-list-headline.vue"
 import EcsVideo from "./video/video.vue"
 
 const Components = {
@@ -262,6 +263,7 @@ const Components = {
   EcsTranscriptState,
   EcsTreeList,
   EcsTreeListItem,
+  EcsTreeListHeadline,
   EcsVideo
 }
 

package/src/components/tree-list/tree-list-headline.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="ecs-tree-view-headline">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-tree-view-headline{
+  color: $color-gray-10;
+  font-size: $type-scale-2-font-size;
+  line-height: $type-scale-2-line-height;
+  padding: $spacing-5 10px;
+}
+</style>

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,12 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 3.4.0 (1 February 2023)
+
+### Features
+
+- Added new EcsTreeListHeadline component
+
 ## Version 3.3.0 (12 January 2023)
 
 ### Features

package/src/stories/data-grid/data-grid-head-cell.stories.js

@@ -29,7 +29,7 @@ export const headCellSelect = () => ({
     return {
       selectOptions: [
         { value: 'ecid', name: 'ECID' },
-        { value: 'bates', name: 'Bates Range' },
+        { value: 'bates', name: 'Bates Range', selected: true },
         { value: 'trialex', name: 'Trial Exhibit'}
       ]
     }
@@ -41,6 +41,30 @@ export const headCellSelect = () => ({
               </ecs-data-grid>`,
 });
 
+export const headCellDefault = () => ({
+  components: { EcsDataGridHeadCell, EcsDataGrid },
+  props: {
+    selected: {
+      type: String,
+      default: 'Bates Range'
+    }
+  },
+  data() {
+    return {
+      selectOptions: [
+        { value: 'ecid', name: 'ECID' },
+        { value: 'bates', name: 'Bates Range' },
+        { value: 'trialex', name: 'Trial Exhibit'}
+      ]
+    }
+  },
+  template: `<ecs-data-grid striped>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="Identifiers" :width="200" :select="selectOptions" :value="selected" />
+                </template>
+              </ecs-data-grid>`,
+});
+
 export const headCellSorting = () => ({
   components: { EcsDataGridHeadCell, EcsDataGrid },
   data() {

package/src/stories/tree-list/tree-list.stories.js

@@ -1,4 +1,4 @@
-import EcsTreeListItem from '@components/tree-list-item/tree-list-item'
+import EcsTreeListItem from '@components/tree-list/tree-list-item'
 import EcsTreeList from '@components/tree-list/tree-list'
 
 export default {

package/src/stories/tree-list-headline/tree-list-headline.stories.js

@@ -0,0 +1,21 @@
+import EcsTreeListItem from '@components/tree-list/tree-list-item'
+import EcsTreeListHeadline from '@components/tree-list/tree-list-headline'
+import EcsTreeList from '@components/tree-list/tree-list'
+
+export default {
+  title: 'Data/Tree List/Tree List Headline',
+  component: EcsTreeListHeadline
+};
+
+export const treeListHeadline = () => ({
+  components: { EcsTreeListItem, EcsTreeList, EcsTreeListHeadline },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-headline>Headline</ecs-tree-list-headline>
+                <ecs-tree-list-item :after-label="13">
+                  List Item
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13">
+                  List Item
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});

package/src/stories/tree-list-item/tree-list-item.stories.js

@@ -1,4 +1,4 @@
-import EcsTreeListItem from '@components/tree-list-item/tree-list-item'
+import EcsTreeListItem from '@components/tree-list/tree-list-item'
 import EcsTreeList from '@components/tree-list/tree-list'
 import EcsButton from '@components/button/button'
 import EcsCheckbox from '@components/checkbox/checkbox'