@dataloop-ai/components 0.17.48 → 0.17.50

package/package.json

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

package/src/components/compound/DlOptionGroup/DlOptionGroup.vue

@@ -123,15 +123,7 @@ export default defineComponent({
                         : 'flex-end',
                 '--option-group-width':
                     this.leftLabel && !this.inline ? '100%' : 'auto',
-                '--option-group-max-width': this.maxWidth,
-                '--control-element-padding-left': this.leftLabel
-                    ? '10px'
-                    : this.inline
-                    ? '12px'
-                    : '0px',
-                '--control-element-padding-right': this.leftLabel
-                    ? '0px'
-                    : '10px'
+                '--option-group-max-width': this.maxWidth
             }
         }
     },
@@ -160,6 +152,11 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.control-element {
+    display: flex;
+    align-items: center;
+}
+
 .tooltip-icon {
     color: var(--dl-color-medium);
     display: flex !important;
@@ -181,8 +178,9 @@ export default defineComponent({
     justify-content: var(--option-justify-content);
     font-size: var(--dl-font-size-body);
     user-select: none;
-    height: 24px;
     color: var(--dl-color-darker);
+    margin: 10px 5px;
+    gap: 5px;
 }
 
 .disabled {
@@ -192,9 +190,4 @@ export default defineComponent({
     }
     color: var(--dl-color-disabled);
 }
-
-.control-element {
-    padding-left: var(--control-element-padding-left);
-    padding-right: var(--control-element-padding-right);
-}
 </style>

package/src/components/essential/DlCheckbox/DlCheckbox.vue

@@ -103,7 +103,7 @@ export default defineComponent({
         indeterminateValue: { type: ValueTypes, default: null },
         value: { type: ValueTypes, default: null },
         falseValue: { type: ValueTypes, default: false },
-        padding: { type: String, default: '5px' },
+        padding: { type: String, default: '0' },
         trueValue: { type: ValueTypes, default: true },
         tabindex: { type: String, default: '0' },
         subLabelSize: { type: String, default: '10px' }
@@ -242,7 +242,7 @@ export default defineComponent({
     display: inline-flex;
     max-width: max-content;
     align-items: center;
-    gap: 10px;
+    gap: 6px;
     padding: var(--dl-checkbox-padding);
     user-select: none;
 }

package/src/components/essential/DlRadio/DlRadio.vue

@@ -76,7 +76,7 @@ export default defineComponent({
         disabled: { type: Boolean, default: false },
         id: { type: [String, Number], default: null },
         label: { type: String, default: null },
-        padding: { type: String, default: '5px' },
+        padding: { type: String, default: '0' },
         modelValue: { type: [String, Number, Boolean], required: true },
         value: { type: [String, Number, Boolean], required: true },
         tabindex: { type: String, default: '0' },

package/src/components/essential/DlTextArea/DlTextArea.vue

@@ -216,6 +216,10 @@ export default defineComponent({
         counterReverse: {
             type: Boolean,
             default: false
+        },
+        maxHeight: {
+            type: String,
+            default: '120px'
         }
     },
     emits: ['input', 'focus', 'blur', 'clear', 'update:model-value', 'keydown'],
@@ -228,6 +232,7 @@ export default defineComponent({
         const cssVars = computed(() => {
             return {
                 '--dl-textarea-max-width': props.width || 'auto',
+                '--dl-textarea-max-height': props.maxHeight,
                 '--dl-textarea-width':
                     borderBoxSize.value?.[0].inlineSize + 'px' || '100%'
             }
@@ -359,7 +364,7 @@ export default defineComponent({
     min-width: 100px;
     max-width: 100%;
     min-height: 80px;
-    max-height: 120px;
+    max-height: var(--dl-textarea-max-height);
     outline: none;
     color: var(--dl-color-darker);
     box-sizing: border-box;

package/src/demos/DlTextAreaDemo.vue

@@ -1,27 +1,23 @@
 <template>
     <div style="width: 800px">
+        <div style="font-size: 14px">
+            <span>Max length: </span>
+            <input v-model="maxLength">
+        </div>
         <div style="max-width: 500px; width: 100%">
             <dl-text-area
                 v-model="textAreaValue"
                 placeholder="Type your text..."
                 show-counter
-                :max-length="20"
+                :max-length="maxLength"
+                max-height="500px"
                 title="Text area title"
                 required
                 tooltip="Quis fugiat et non eu proident sit et amet."
                 top-message="Pariatur consequat non sit aliqua labore ad reprehenderit deserunt ullamco incididunt non irure laborum deserunt."
                 enable-resize
-                error
                 clear-button-tooltip
-                error-message="Something went wrong!"
-                @keydown="log"
-                @focus="textAreaFocused = true"
-                @blur="textAreaFocused = false"
             />
-            <div style="margin-left: 20px">
-                <p>Value: {{ textAreaValue }}</p>
-                <p>Status: {{ textAreaFocused ? 'focused' : 'unfocused' }}</p>
-            </div>
         </div>
     </div>
 </template>
@@ -36,14 +32,10 @@ export default defineComponent({
     },
     setup() {
         const textAreaValue = ref('')
-        const textAreaFocused = ref(false)
-
-        const log = (e: KeyboardEvent) => console.log(e)
-
+        const maxLength = ref(20)
         return {
-            log,
-            textAreaValue,
-            textAreaFocused
+            maxLength,
+            textAreaValue
         }
     }
 })