@dataloop-ai/components 0.20.20 → 0.20.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.20",
+  "version": "0.20.22",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -17,7 +17,7 @@
     "lint": "eslint ./src --ext .ts,.vue ",
     "lint:fix": "eslint ./src --ext .ts,.vue --fix",
     "format": "prettier --write ./src",
-    "lint-staged": "lint-staged",
+    "lint-staged": "npm run check-only && lint-staged",
     "test": "vitest",
     "test:coverage": "vitest run --coverage --silent",
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -445,10 +445,11 @@ export default defineComponent({
                     queryRightSide = queryRightSide.trimStart()
                 } else {
                     // this|situation: replace whatever is there on both sides with the value
-                    queryLeftSide = queryLeftSide.replace(
-                        /('[^']+'?|[^'\s]+)$/,
-                        ''
-                    )
+                    if (/^[^']+('[^']?'[^']+)?'[^']+'?$/.test(queryLeftSide)) {
+                        queryLeftSide = queryLeftSide.replace(/'[^']+'?$/, '')
+                    } else {
+                        queryLeftSide = queryLeftSide.replace(/[^'\s]+$/, '')
+                    }
                     queryRightSide =
                         removeLeadingExpression(queryRightSide).trimStart()
                 }

package/src/components/compound/DlSelect/DlSelect.vue

@@ -77,16 +77,14 @@
                 </dl-tooltip>
                 <div v-if="hasSelectedSlot" style="width: 100%">
                     <slot
-                        v-if="shouldShowSelectedSlotContent"
+                        v-if="!isActiveSearchInput"
                         :opt="selectedOption"
                         name="selected"
-                    />
-                    <span
-                        v-else-if="!isActiveSearchInput"
-                        class="root-container--placeholder"
                     >
-                        {{ filterSelectLabel }}
-                    </span>
+                        <span class="root-container--placeholder">
+                            {{ filterSelectLabel }}
+                        </span>
+                    </slot>
                 </div>
                 <template v-else>
                     <span
@@ -671,9 +669,6 @@ export default defineComponent({
         isActiveSearchInput(): boolean {
             return this.searchable && this.isExpanded
         },
-        shouldShowSelectedSlotContent(): boolean {
-            return this.hasSelectedSlotContent && !this.isActiveSearchInput
-        },
         computedPlaceholder(): string {
             return this.placeholder || 'Select option'
         },
@@ -690,9 +685,34 @@ export default defineComponent({
             }
         },
         selectedOption(): DlSelectOptionType {
-            return this.selectedIndex === -1
-                ? this.computedPlaceholder
-                : this.options[this.selectedIndex]
+            if (this.multiselect) {
+                if (this.modelValueLength === 1) {
+                    return this.options.find((option: any) => {
+                        return isEqual(
+                            option.value,
+                            Array.isArray(this.modelValue)
+                                ? this.modelValue[0]
+                                : this.modelValue
+                        )
+                    })
+                } else {
+                    return {
+                        label: this.filterSelectLabel,
+                        value: this.modelValue,
+                        readonly: true
+                    }
+                }
+            }
+
+            if (this.selectedIndex === -1) {
+                return {
+                    label: this.computedPlaceholder,
+                    value: null,
+                    readonly: true
+                }
+            }
+
+            return this.options[this.selectedIndex]
         },
         hasBeforeOptions(): boolean {
             return !!this.$slots['before-options']

package/src/demos/DlSelectDemo.vue

@@ -625,6 +625,66 @@
                 <dl-button label="Button" />
             </template>
         </dl-select>
+
+        Select with auto select selected
+        <dl-select
+            v-model="preSelectedValue"
+            width="84px"
+            without-borders
+            with-chips
+            align-right
+            searchable
+            :options="[
+                { label: 'High', value: 'high', bgColor: 'dl-color-negative' },
+                {
+                    label: 'Medium',
+                    value: 'medium',
+                    bgColor: 'dl-color-warning',
+                    textColor: 'dl-color-darker',
+                    icon: 'icon-dl-search'
+                },
+                {
+                    label: 'Low',
+                    value: 'low',
+                    bgColor: 'dl-color-positive',
+                    textColor: 'dl-color-darker'
+                }
+            ]"
+            required
+        >
+            <template #selected="scope">
+                <dl-chip
+                    :text-color="scope.opt.textColor"
+                    :color="scope.opt.bgColor"
+                >
+                    {{ scope.opt.label }}
+                </dl-chip>
+            </template>
+            <template #option="scope">
+                <div class="flex">
+                    <dl-chip
+                        :text-color="scope.opt.textColor"
+                        :color="scope.opt.bgColor"
+                    >
+                        {{ scope.opt.label }}
+                    </dl-chip>
+                </div>
+            </template>
+        </dl-select>
+
+        Select with multiselect auto expanded and fixed width and virtual scroll
+        with selected slot
+        <dl-select
+            v-model="selectedWithChildrenAndReadonly"
+            :options="alotOfOptionsExpanded"
+            multiselect
+            searchable
+            style="margin-bottom: 150px; width: 200px"
+        >
+            <template #selected="scope">
+                <div>{{ scope.opt.label }}</div>
+            </template>
+        </dl-select>
     </div>
 </template>
 
@@ -891,7 +951,8 @@ export default defineComponent({
             selectedWithChildrenCapitalized: [],
             tasksFilter: [],
             showAllOption: true,
-            disabledSelected: 'disabled option'
+            disabledSelected: 'disabled option',
+            preSelectedValue: null
         }
     },
     computed: {
@@ -907,7 +968,7 @@ export default defineComponent({
                     key: i,
                     subLabel: 'not so high',
                     label: 'High ' + i,
-                    value: 'high',
+                    value: 'high' + i,
                     bgColor: 'dl-color-negative'
                 })
             }
@@ -922,7 +983,7 @@ export default defineComponent({
                     key: i,
                     subLabel: 'not so high',
                     label: 'High ' + i,
-                    value: 'high',
+                    value: 'high' + i,
                     bgColor: 'dl-color-negative'
                 })
             }