@dataloop-ai/components 0.17.19 → 0.17.21

package/package.json

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

package/src/assets/globals.scss

@@ -32,6 +32,19 @@ body {
     }
 }
 
+/* Inserting a collapsed row between two flex items will make 
+ * the flex item that comes after it break to a new row */
+.break {
+    flex-basis: 100%;
+    height: 0;
+}
+
+/* Use a collapsed column to break to a new column */
+.break-column {
+    flex-basis: 100%;
+    width: 0;
+}
+
 .scroll {
     overflow: auto;
 }

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

@@ -2,6 +2,7 @@
     <div
         :id="uuid"
         :class="rootContainerClasses"
+        :style="cssVars"
     >
         <div :class="wrapperClasses">
             <div
@@ -33,9 +34,16 @@
                     </dl-tooltip>
                 </span>
             </div>
+            <div
+                v-if="!!topMessage.length && !isSmall"
+                class="break"
+            />
             <div
                 v-show="!!topMessage.length"
-                class="dl-text-input__top-message-container"
+                :class="{
+                    'dl-text-input__top-message-container': true,
+                    'dl-text-input__top-message-container--s': isSmall
+                }"
             >
                 <dl-info-error-message
                     v-show="!!topMessage.length"
@@ -326,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 }) {
@@ -389,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',
@@ -616,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,
@@ -670,6 +692,10 @@ export default defineComponent({
         display: flex;
         margin-bottom: 10px;
         text-align: start;
+
+        &--s {
+            padding: 0px 10px;
+        }
     }
 
     &__input-wrapper {

package/src/demos/DlInputDemo.vue

@@ -2,9 +2,10 @@
     <div>
         <dl-input
             v-model="textInputValue"
-            style="width: 220px"
+            style="width: 920px"
             placeholder="Select option"
             size="l"
+            margin="20px"
             title="Input Title"
             required
             tooltip="Quis fugiat et non eu proident sit et amet."