@everchron/ec-shards 7.2.5 → 7.2.6

package/package.json

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

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

@@ -4,12 +4,17 @@
     :class="typeClass" tabindex="0"
     @keydown.delete="$emit('remove', $event)">
 
-    <div v-if="icon || operator" class="symbol">
+    <div v-if="icon || operator || operatorSwitch" class="symbol">
       <ecs-icon :type="icon" size="20" color="#FFF" />
-      <div v-if="operator && !operatorSelect" class="operator">{{ operator }}</div>
+      <div v-if="operator && !operatorSelect && !operatorSwitch" 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>
+      <button v-if="operatorSwitch" @click="handleOperatorToggle" title="Toggle operator" aria-label="Toggle operator" :class="type === 'default' ? 'has' : 'not'" class="toggle">
+        <ecs-icon :class="type === 'default' ? 'show' : ''" class="check" type="check" size="8" color="#7896B4" />
+        <ecs-icon :class="type === 'not' ? 'show' : ''" class="cross" type="close" size="8" color="#AC4949" />
+        <ecs-focus-ring :radius="12" />
+      </button>
     </div>
     <div class="query">
       <div v-if="descriptor" class="descriptor">{{ descriptor }}</div>
@@ -56,6 +61,11 @@
           return ['and','or','not']
         }
       },
+      /** Adds an operator toggle to the search token. This should never be used together with `operatorSelect`. */
+      operatorSwitch: {
+        type: Boolean,
+        default: false
+      },
       /** 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
@@ -80,6 +90,11 @@
         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);
+      },
+
+      handleOperatorToggle(event) {
+        /** Emitted when the operator is toggled via the `operatorToggle` button. */
+        this.$emit('operatorToggle', event);
       }
     }
   }
@@ -150,6 +165,67 @@
     padding: 2px;
   }
 
+  .toggle{
+    padding: 0;
+    width: $spacing-25;
+    height: $spacing-20;
+    border-radius: 24px;
+    margin: 0 0 0 2px;
+    position: relative;
+
+    &:focus-visible{
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+
+    &:before{
+      content: '';
+      position: absolute;
+      inset: 2px;
+      width: $spacing-20;
+      height: $spacing-15;
+      border-radius: 24px;
+      border: 1px solid $color-white;
+    }
+
+    &:after{
+      content: '';
+      background: $color-white;
+      border-radius: 100%;
+      width: $spacing-10;
+      height: $spacing-10;
+      position: absolute;
+      left: 4px;
+      top: 4px;
+      transition: transform .2s ease-in-out;
+    }
+
+    &.has:after{
+      transform: translateX(4px);
+    }
+
+    .icon{
+      position: absolute;
+      opacity: 0;
+      top: 4px;
+      transition: opacity .2s ease-in-out;
+      z-index: 1;
+
+      &.show{
+        opacity: 1;
+      }
+    }
+
+    .check{
+      right: 4px;
+    }
+
+    .cross{
+      left: 4px;
+    }
+  }
+
   .operator{
     color: #FFF;
     font-size: 8px;

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,12 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 7.2.6 (6 June 2023)
+
+### Features
+
+- Added operator switch to search token component
+
 ## Version 7.2.3 (5 June 2023)
 
 ### Features

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

@@ -29,6 +29,14 @@ export const searchTokenOperatorDropdown = () => ({
             </main>`,
 });
 
+export const searchTokenOperatorToggle = () => ({
+  components: { EcsMultiselectSearchToken },
+  template: `<main>
+              <ecs-multiselect-search-token icon="person" operator-switch>Amanda Clark</ecs-multiselect-search-token>
+              <ecs-multiselect-search-token type="not" icon="person" operator-switch>Profiles</ecs-multiselect-search-token>
+            </main>`,
+});
+
 export const searchTokenAddons = () => ({
   components: { EcsMultiselectSearchToken },
   template: `<main>