@everchron/ec-shards 6.0.5 → 6.1.0

package/package.json

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

package/src/assets/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 11.0042L14.9775 18.5L7.5 11" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 18.7458L14.9775 11.25L7.49999 18.75" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -34,7 +34,6 @@
 
     methods: {
       tableScroll(){
-        console.log('ts', this.$refs.dataGridScroller.scrollHeight, this.$refs.dataGridScroller.clientHeight, this.$refs.dataGridScroller.scrollTop)
         const percentScrolled = 100 * ((this.$refs.dataGridScroller.scrollTop + this.$refs.dataGridScroller.clientHeight) / this.$refs.dataGridScroller.scrollHeight)
         this.$emit('tableScroll', percentScrolled)
       }

package/src/components/entry-link/entry-link.vue

@@ -70,9 +70,14 @@
     },
 
     methods: {
-      handleClick(e){
-        /** Emitted when the link itself is clicked. */
-        this.$emit('linkClick', e)
+      handleClick(e) {
+        if (e.metaKey) {
+          /** Emitted when the link is clicked with Command (Mac)/Controls (Windows) key. */
+          this.$emit('linkClickExternal', e)
+        } else {
+          /** Emitted when the link itself is clicked. */
+          this.$emit('linkClick', e)
+        }
       },
 
       handleMoreButtonClick(e){

package/src/components/index.js

@@ -103,6 +103,7 @@ import EcsScrollContainer from "./scroll-container/scroll-container.vue"
 import EcsSection from "./section/section.vue"
 import EcsSegment from "./segment/segment.vue"
 import EcsSelect from "./select/select.vue"
+import EcsSelectText from "./select-text/select-text.vue"
 import EcsSelectTile from "./select-tile/select-tile.vue"
 import EcsSeparator from "./separator/separator.vue"
 import EcsSequenceMap from "./sequence-map/sequence-map.vue"
@@ -236,6 +237,7 @@ const Components = {
   EcsSection,
   EcsSegment,
   EcsSelect,
+  EcsSelectText,
   EcsSelectTile,
   EcsSeparator,
   EcsSequenceMap,

package/src/components/multiselect-search-token/multiselect-search-token.vue

@@ -2,7 +2,10 @@
   <div class="ecs-multiselect-search-token" :class="typeClass">
     <div v-if="icon || operator" class="symbol">
       <ecs-icon :type="icon" size="20" color="#FFF" />
-      <div v-if="operator" class="operator">{{ operator }}</div>
+      <div v-if="operator && !operatorSelect" class="operator">{{ operator }}</div>
+      <ecs-select-text v-if="operatorSelect" @change="handleOperatorChange" size="xsml" :value="operator" class="operator-select">
+        <option v-for="option in operatorSelectOptions" :value="option" :key="option">{{ option }}</option>
+      </ecs-select-text>
     </div>
     <div class="query">
       <div v-if="descriptor" class="descriptor">{{ descriptor }}</div>
@@ -16,10 +19,12 @@
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsSelectText from '../select-text/select-text'
 
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      EcsSelectText
     },
     props: {
       /** Sets the type of the search token: default should be used for any search query that is not a NOT query. */
@@ -32,6 +37,17 @@
       operator: {
         type: String
       },
+      /** Shows the operator select dropdown. When the dropdown is shown, the `operator` won't be shown. This is also the default value of the operator select dropdown.*/
+      operatorSelect: {
+        type: Boolean
+      },
+      /** The available options for an operator select, which allows the user to switch between search operators, such as and, or, not... */
+      operatorSelectOptions: {
+        type: Array,
+        default() {
+          return ['and','or','not']
+        }
+      },
       /** Allows to add a descriptor label to the token. This can be used for e.g. different date like "Document Date", "Sent Date", "Added Date", etc. */
       descriptor: {
         type: String
@@ -49,6 +65,14 @@
           return `ecs-multiselect-search-token-${this.type}`
         return this.type
       }
+    },
+
+    methods: {
+      handleOperatorChange(event) {
+        const newValue = event.target.value.toLowerCase();
+        /** Emitted when the operator type is changed via the `operatorSelect` dropdown. Returns the selected value. */
+        this.$emit('operatorChange', newValue);
+      }
     }
   }
 </script>
@@ -119,6 +143,14 @@
     font-weight: 700;
     margin: 0 3px;
     line-height: 20px;
+    text-transform: uppercase;
+  }
+
+  .operator-select{
+    color: #FFF;
+    font-weight: 700;
+    margin: 0 3px;
+    text-transform: uppercase;
   }
 
   .symbol,

package/src/components/select-text/select-text.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="ecs-form-select-text" :class="[sizeClass, typeClass, disabled ? `disabled` : null]">
+    <span>
+      {{ selectedText }}
+    </span>
+    <ecs-icon type="chevron-down" :size="chevronSize" />
+    <select ref="select"
+            @change="onChange"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+            v-bind="{ id, name, disabled }"
+            :class="alignment=='right' ? 'right' : ''"
+            >
+      <slot></slot>
+    </select>
+  </div>
+</template>
+
+<script>
+import EcsIcon from '../icon/icon'
+
+export default {
+  components: { EcsIcon },
+
+  props: {
+    /** Determines the size of the select control. */
+    size: {
+      type: String,
+      validator: v => ['xsml', 'sml', 'md', 'lg', 'null', null].includes(v),
+      default: 'md'
+    },
+    /** Disables the input. */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** Sets the `id` attribute. */
+    id: String,
+    /** Sets the `name` attribute. */
+    name: String,
+    /** Allows to programmatically select a specific option item via it's value. */
+    value: String,
+    /** Allows to programmatically set the content alignment of the dropdown content. */
+    alignment: {
+      type: String,
+      default: "left"
+    },
+    /** Adds a preselected, disabled <option> to the select which can serve as a placeholder. */
+    placeholder: {
+      type: String
+    },
+    /** Allows to programmatically select a specific option item via it's value. */
+    value: {
+      type: String
+    }
+  },
+
+  data() {
+    return {
+      hasPlaceholder: false,
+      currentValue: this.value || '',
+      setValue: this.value || '',
+      selectedText: this.placeholder || 'Select'
+    }
+  },
+
+  computed: {
+    sizeClass() {
+      if (this.size && this.size !== '')
+        return `ecs-form-select-text-${this.size}`
+      return this.size
+    },
+
+    chevronSize(){
+      switch (this.size) {
+        case "xsml":
+          return "10px";
+        case "sml":
+          return "12px";
+        case "md":
+          return "14px";
+        case "lg":
+          return "16px";
+        default:
+          return "14px";
+      }
+    },
+
+    typeClass() {
+      if (this.type && this.type !== '')
+        return `ecs-form-select-text-${this.type}`
+      return this.type
+    }
+  },
+
+  mounted: function () {
+    if (this.placeholder && this.placeholder !== '') {
+      this.hasPlaceholder = true
+    }
+
+    this.$nextTick(() => {
+      const select = this.$refs.select;
+      const option = Array.from(select.options).find((option) => {
+        if (option.value && this.value) {
+          return option.value.toLowerCase() === this.value.toLowerCase();
+        }
+        return false;
+      });
+
+      if (option) {
+        option.selected = true
+        if (this.value !== this.currentValue) {
+          this.currentValue = this.value
+        }
+        else {
+          this.selectedText = option.text
+        }
+      }
+    })
+  },
+
+  methods: {
+    onChange(event) {
+      this.currentValue = event.target.value;
+      this.hasPlaceholder = false
+      this.$emit('change', event)
+    }
+  },
+
+  watch: {
+    value: function(newValue) {
+      const select = this.$refs.select;
+      const option = Array.from(select.options).find((option) => option.value === newValue);
+
+      if (option) {
+        option.selected = true
+        if (newValue !== this.currentValue) {
+          this.currentValue = newValue
+          this.$emit('change', { target: { value: newValue } });
+        }
+      }
+    },
+
+    currentValue: function(newValue) {
+      const select = this.$refs.select;
+      const option = Array.from(select.options).find((option) => option.value === this.currentValue);
+      this.selectedText = option.text
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-form-select-text{
+  overflow: hidden;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &.disabled{
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  .icon{
+    opacity: .5;
+  }
+
+  select{
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    background-image: none;
+    -webkit-appearance: none;
+    appearance: none;
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    z-index: 1;
+
+    &:focus{
+      outline: none;
+    }
+
+    option[value=""][disabled] {
+      display: none;
+    }
+
+    &.right{
+      direction: rtl;
+    }
+  }
+
+  &-xsml{
+    column-gap: 2px;
+    padding: 3px 0;
+
+    > span{
+      font-size: 8px;
+      line-height: $type-scale-1-line-height;
+    }
+    select{
+      font-size: $type-scale-2-font-size;
+    }
+  }
+
+  &-sml{
+    column-gap: 2px;
+    padding: 2px 0;
+
+    > span,
+    select{
+      font-size: $type-scale-2-font-size;
+      line-height: $type-scale-2-line-height;
+    }
+  }
+
+  &-md{
+    column-gap: $spacing-5;
+    padding: 2px 0;
+
+    > span,
+    select{
+      font-size: $type-scale-3-font-size;
+      line-height: $type-scale-3-line-height;
+    }
+  }
+
+  &-lg{
+    column-gap: $spacing-10;
+    padding: $spacing-5 0;
+
+    > span,
+    select{
+      font-size: $type-scale-4-font-size;
+      line-height: $type-scale-4-line-height;
+    }
+  }
+}
+</style>

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,14 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 6.1.0 (4 May 2023)
+
+### Features
+
+- New Component: Select Text
+- Added operator select dropdown to SearchToken component
+- Added ClickExternal event emit to EntryLink component
+
 ## Version 6.0.1 (21 April 2023)
 
 ### Fixes

package/src/stories/multiselect-search-token/multiselect-search-token.stories.js

@@ -13,6 +13,22 @@ export const searchToken = () => ({
             </main>`,
 });
 
+export const searchTokenReadOnlyOperator = () => ({
+  components: { EcsMultiselectSearchToken },
+  template: `<main>
+              <ecs-multiselect-search-token icon="person" operator="and">Amanda Clark</ecs-multiselect-search-token>
+              <ecs-multiselect-search-token type="not" operator="not" icon="person">Profiles</ecs-multiselect-search-token>
+            </main>`,
+});
+
+export const searchTokenOperatorDropdown = () => ({
+  components: { EcsMultiselectSearchToken },
+  template: `<main>
+              <ecs-multiselect-search-token icon="person" operator="and" operator-select>Amanda Clark</ecs-multiselect-search-token>
+              <ecs-multiselect-search-token type="not" operator="not" operator-select icon="person">Profiles</ecs-multiselect-search-token>
+            </main>`,
+});
+
 export const searchTokenAddons = () => ({
   components: { EcsMultiselectSearchToken },
   template: `<main>

package/src/stories/select-text/select-text.stories.js

@@ -0,0 +1,95 @@
+import EcsSelectText from '@components/select-text/select-text';
+
+export default {
+  title: 'Input/Select Text',
+  component: EcsSelectText
+};
+
+export const selectText = () => ({
+  components: { EcsSelectText },
+  data() {
+    return {
+      value: 'guest'
+    }
+  },
+  methods: {
+    update(value) {
+      this.value = value;
+    }
+  },
+  template: `<div>
+                <div>
+                Set to: <button @click="value = 'admin'">admin</button>
+                        <button @click="value = 'basic'">basic</button>
+                        <button @click="value = 'guest'">guest</button>
+                </div>
+                <div>
+                <ecs-select-text class="mb-4" :value="value" @change="update($event.target.value)">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select-text>
+                </div>
+                <div>
+                <ecs-select-text disabled>
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select-text>
+                </div>
+              </div>`,
+});
+
+export const selectSizes = () => ({
+  components: { EcsSelectText },
+  template: `<div>
+                <div>
+                <ecs-select-text size="xsml" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select-text>
+                </div>
+                <div>
+                <ecs-select-text size="sml" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select-text>
+                </div>
+                <div>
+                <ecs-select-text size="md" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select-text>
+                </div>
+                <div>
+                <ecs-select-text size="lg">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select-text>
+                </div>
+              </div>`,
+});
+
+export const selectAlignment = () => ({
+  components: { EcsSelectText },
+  template: `<div>
+                <div>
+                <ecs-select-text alignment="left" placeholder="Left Aligned" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select-text>
+                </div>
+                <div>
+                <ecs-select-text alignment="right" placeholder="Right Aligned" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select-text>
+                </div>
+            </div>`,
+});