@dataloop-ai/components 0.17.47 → 0.17.49

package/package.json

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

package/src/components/compound/DlPagination/DlPagination.vue

@@ -146,7 +146,7 @@ export default defineComponent({
             return to > this.totalItems ? this.totalItems : to
         },
         max(): number {
-            return this.rowsPerPageState === 0
+            return this.rowsPerPageState === 0 || this.totalItems === 0
                 ? 1
                 : Math.ceil(this.totalItems / this.rowsPerPageState)
         }

package/src/components/compound/DlPagination/components/PaginationLegend.vue

@@ -36,7 +36,5 @@ export default defineComponent({
     justify-content: flex-end;
     display: flex;
     color: var(--dl-color-lighter);
-    padding-left: 16px;
-    margin-left: auto;
 }
 </style>

package/src/components/compound/DlPagination/components/RowsSelector.vue

@@ -69,11 +69,9 @@ export default defineComponent({
 <style scoped lang="scss">
 .dl-pagination {
     &--rows_selector {
-        width: 15%;
         display: flex;
         align-items: center;
         color: var(--dl-color-darker);
-        padding-right: 2px;
     }
 
     &--rows_per_page_label {

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
         }
     }
 })