@dataloop-ai/components 0.17.20 → 0.17.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.20",
+  "version": "0.17.22",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlInput/DlInput.vue

@@ -2,6 +2,7 @@
     <div
         :id="uuid"
         :class="rootContainerClasses"
+        :style="cssVars"
     >
         <div :class="wrapperClasses">
             <div
@@ -333,7 +334,11 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        fitContent: Boolean
+        fitContent: Boolean,
+        margin: {
+            type: String,
+            default: null
+        }
     },
     emits: ['input', 'focus', 'blur', 'clear', 'enter', 'update:model-value'],
     setup(props, { emit }) {
@@ -396,6 +401,16 @@ export default defineComponent({
             }
             return classes
         },
+        cssVars(): Record<string, any> {
+            let inputMargin = this.margin
+
+            if (!this.margin && this.isSmall) {
+                inputMargin = '0px 20px 0px 0px'
+            }
+            return {
+                '--dl-input-margin': inputMargin
+            }
+        },
         inputClasses(): string[] {
             const classes = [
                 'dl-text-input__input',
@@ -623,7 +638,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-text-input {
-    padding: 20px 20px 20px 0px;
+    margin: var(--dl-input-margin);
 
     /* Chrome, Safari, Edge, Opera */
     input::-webkit-outer-spin-button,

package/src/components/compound/DlSearches/DlSearch/DlSearch.vue

@@ -33,11 +33,8 @@
         </dl-input>
         <dl-button
             v-show="withSearchButton"
-            padding="9px 16px"
-            style="width: 20%; min-width: fit-content"
-            :size="size"
+            :size="buttonSize"
             :class="buttonClasses"
-            fluid
             @click="onSearchButtonPress"
         >
             Search
@@ -58,6 +55,11 @@ const SearchSizes = {
 } as const
 type TSearchSizes = (typeof SearchSizes)[keyof typeof SearchSizes]
 
+const BUTTON_SIZES = {
+    l: 'l',
+    m: 's'
+}
+
 export default defineComponent({
     name: 'DlSearch',
     components: {
@@ -100,6 +102,9 @@ export default defineComponent({
         }
     },
     computed: {
+        buttonSize(): string {
+            return BUTTON_SIZES[this.size]
+        },
         identifierClass(): string {
             return `dl-search-${this.placeholder}`.replaceAll(' ', '-')
         },

package/src/demos/DlInputDemo.vue

@@ -5,6 +5,7 @@
             style="width: 920px"
             placeholder="Select option"
             size="l"
+            margin="20px"
             title="Input Title"
             required
             tooltip="Quis fugiat et non eu proident sit et amet."

package/src/demos/DlSearchDemo.vue

@@ -8,6 +8,15 @@
             placeholder="Search here"
             :auto-suggest-items="suggestItems"
         />
+
+        <dl-search
+            v-model="searchValue"
+            size="m"
+            with-search-button
+            highlight-matches
+            placeholder="Search here"
+            :auto-suggest-items="suggestItems"
+        />
     </div>
 </template>