@eturnity/eturnity_reusable_components 9.19.12 → 9.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.19.12",
+  "version": "9.22.1",
   "files": [
     "dist",
     "src"

package/src/components/inputs/select/index.vue

@@ -231,6 +231,11 @@
                 v-if="!deferDropdownSlotContent || isSelectDropdownShown"
                 name="dropdown"
               ></slot>
+              <slot
+                v-if="isCustomOptionVisible"
+                name="customOption"
+                :custom-option-value="customOptionValue"
+              />
             </SelectDropdown>
           </Component>
         </DropdownWrapper>
@@ -267,6 +272,10 @@
   //     <Option value="3">value three</Option>
   //     <Option value="4">value four</Option>
   //     </template>
+  //     <!-- optional: with is-customizable, render the typed-value row -->
+  //     <template #customOption="{ customOptionValue }">
+  //       <Option data-custom-option :value="customOptionAdapter(customOptionValue)">{{ customOptionValue }} (custom)</Option>
+  //     </template>
   // </Select>
 
   import { Teleport, inject } from 'vue'
@@ -729,6 +738,16 @@
         required: false,
         default: true,
       },
+      isCustomizable: {
+        required: false,
+        type: Boolean,
+        default: false,
+      },
+      customOptionAdapter: {
+        type: Function,
+        required: false,
+        default: null,
+      },
       hasError: {
         type: Boolean,
         required: false,
@@ -891,11 +910,27 @@
       optionLength() {
         return this.optionLengthCount
       },
+      customOptionValue() {
+        return this.textSearch.trim()
+      },
+      resolvedCustomOption() {
+        if (this.customOptionAdapter) {
+          return this.customOptionAdapter(this.customOptionValue)
+        }
+        return this.customOptionValue
+      },
+      isCustomOptionVisible() {
+        return this.isCustomizable && this.customOptionValue.length > 0
+      },
       isSearchBarVisible() {
         return (
-          this.searchPlacement !== 'dropdown' &&
-          this.isSearchable &&
-          this.optionLength >= this.minOptionLength &&
+          (this.isCustomizable ||
+            (
+              this.searchPlacement !== 'dropdown' &&
+              this.isSearchable &&
+              this.optionLength >= this.minOptionLength
+            )
+          ) &&
           this.isDropdownOpen
         )
       },
@@ -934,8 +969,7 @@
       isSelectDropdownShown() {
         return (
           this.isDropdownOpen &&
-          this.dropdownPosition.left !== null &&
-          (!this.isSearchable || this.isSearchable)
+          this.dropdownPosition.left !== null
         )
       },
       isMobileDevice() {
@@ -1022,7 +1056,7 @@
             this.isClickOutsideActive = false
           }, 10)
         }
-        if (val && this.isSearchable) {
+        if (val && this.isSearchBarVisible) {
           this.$nextTick(() => {
             if (this.searchPlacement === 'dropdown') {
               const ref = this.$refs.dropdownSearchInput
@@ -1196,7 +1230,7 @@
         }
 
         nodes.forEach((el) => {
-          let show = el.textContent.toLowerCase().includes(q)
+          let show = el.textContent.toLowerCase().includes(q) || el.hasAttribute('data-custom-option')
           if (
             show &&
             hideUnassignedWhenOthers &&
@@ -1278,6 +1312,10 @@
         } else if (e.key == 'Enter') {
           const root = this.$refs.dropdown?.$el
           if (!root) return
+          if (this.isCustomOptionVisible) {
+            this.optionSelected(this.resolvedCustomOption)
+            return
+          }
           const opts = [...root.querySelectorAll('[data-value]')].filter(
             (el) => getComputedStyle(el).display !== 'none'
           )

package/src/components/inputs/select/select.stories.js

@@ -1,26 +1,38 @@
+import { computed, ref } from 'vue'
 import Select from './index.vue'
 import Option from './option/index.vue'
 
+const SELECT_SAMPLE_OPTIONS = [
+  { key: '1', label: 'value one' },
+  { key: '2', label: 'value two' },
+  { key: '3', label: 'value three' },
+  { key: '4', label: 'value four' },
+]
+
 export default {
   title: 'select',
   component: Select,
-  // argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   // Components used in your story `template` are defined in the `components` object
   components: { Select, Option },
   // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: `<Select v-bind="$props">
-                <template #selector="{selectedValue}">
-                    value selected: {{selectedValue}}
+  setup() {
+    return { args, selectSampleOptions: SELECT_SAMPLE_OPTIONS }
+  },
+  template: `<Select v-bind="args">
+                <template #selector="{ selectedValue }">
+                    value selected: {{ selectedValue.label }}
                 </template>
                 <template #dropdown>
-                    <Option value="1">value one</Option>
-                    <Option value="2">value two</Option>
-                    <Option value="3">value three</Option>
-                    <Option value="4">value four</Option>
+                    <Option
+                      v-for="item in selectSampleOptions"
+                      :key="item.key"
+                      :value="item"
+                    >
+                      {{ item.label }}
+                    </Option>
                 </template>
             </Select>`,
 
@@ -49,10 +61,82 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({})
 Default.args = {
-  hoverDropdown: 'true',
+  hoverDropdown: false,
   selectWidth: '100%',
   optionWidth: '50%',
   label: 'that is a label',
   alignItems: 'vertical',
-  value: '2',
+  value: SELECT_SAMPLE_OPTIONS[1],
+}
+
+/**
+ * Customizable Select
+ */
+const CustomizableTemplate = (args) => ({
+  components: { Select, Option },
+  setup() {
+    const CUSTOM_OPTION_KEY = 'custom-option'
+    const customOption = ref(null)
+    const createCustomOption = (customOptionValue) => ({
+      key: CUSTOM_OPTION_KEY,
+      label: customOptionValue,
+    })
+    const customizableOptions = computed(() => {
+      const options = [...SELECT_SAMPLE_OPTIONS]
+      if (customOption.value) {
+        options.push(customOption.value)
+      }
+      return options.filter(
+        (item, index, self) =>
+          self.findIndex((candidate) => candidate.label === item.label) === index
+      )
+    })
+    const onInputChange = (value) => {
+      args.value = value
+      if (value?.key === CUSTOM_OPTION_KEY) {
+        customOption.value = value
+      }
+    }
+    return {
+      args,
+      customizableOptions,
+      createCustomOption,
+      onInputChange,
+    }
+  },
+  template: `<Select
+    v-bind="args"
+    :custom-option-adapter="createCustomOption"
+    @input-change="onInputChange"
+  >
+    <template #selector="{ selectedValue }">
+      value selected: {{ selectedValue.label }}
+    </template>
+    <template #dropdown>
+      <Option
+        v-for="(item) in customizableOptions"
+        :key="item.key"
+        :value="item"
+      >
+        {{ item.label }}
+      </Option>
+    </template>
+    <template #customOption="{ customOptionValue }">
+      <Option
+        data-custom-option
+        :value="createCustomOption(customOptionValue)"
+      >
+        {{ customOptionValue }}
+        <div>(custom)</div>
+      </Option>
+    </template>
+  </Select>`,
+})
+
+export const Customizable = CustomizableTemplate.bind({})
+Customizable.args = {
+  label: 'Customizable select',
+  alignItems: 'vertical',
+  isCustomizable: true,
+  value: SELECT_SAMPLE_OPTIONS[1],
 }

package/src/components/progressStep/index.vue

@@ -31,6 +31,8 @@
             :font-color="
               stepIndex === currentStepIndex
                 ? theme.semanticColors.grey[900]
+                : step.isDisabled
+                ? theme.semanticColors.grey[600]
                 : theme.semanticColors.grey[800]
             "
             :type="labelTextType"

package/src/components/tag/conversionTag/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <TagContainer :data-id="dataId" :data-qa-id="dataQaId">
+  <TagContainer :data-id="dataId" :data-qa-id="dataQaId" :height="height">
     <RcIcon
+      v-if="!noIcon"
       :color="getIconColor"
       :hovered-color="getIconColor"
       name="star"
@@ -23,6 +24,7 @@
     padding: 2px 4px;
     background-color: ${(props) => props.theme.semanticColors.yellow[200]};
     cursor: pointer;
+    height: ${(props) => props.height};
   `
 
   const TextContainer = styled.div`
@@ -56,6 +58,15 @@
         default: '',
         type: String,
       },
+      noIcon: {
+        type: Boolean,
+        default: false,
+      },
+      height: {
+        required: false,
+        type: String,
+        default: 'auto',
+      },
     },
     computed: {
       getIconColor() {