@dataloop-ai/components 0.19.172 → 0.19.174

package/package.json

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

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

@@ -717,7 +717,7 @@ export default defineComponent({
         const onChange = (e: KeyboardEvent | Event) => {
             isInternalChange.value = true
             isMenuOpen.value = true
-            updateSyntax()
+
             const target = e.target as HTMLElement
             let toEmit: string | number = target.innerText.replace(
                 new RegExp(' ', 'g'),
@@ -735,28 +735,26 @@ export default defineComponent({
                     input.value.innerHTML = trimmed
                         .toString()
                         .replace(/ /g, ' ')
-                    updateSyntax()
                     setCaretAtTheEnd(input.value)
-                    return
-                }
-                /**
-                 * if the number ends with a dot followed by multiple zeros
-                 * then we should not replace the inputs value with the parsed number
-                 */
-                if (
+                } else if (
+                    /**
+                     * if the number ends with a dot followed by multiple zeros
+                     * then we should not replace the inputs value with the parsed number
+                     */
                     !toEmit.endsWith('.') &&
                     !new RegExp(/\.\d*0+$/, 'g').test(toEmit)
                 ) {
                     input.value.innerHTML = String(Number(toEmit))
                         .toString()
                         .replace(/ /g, ' ')
-                    updateSyntax()
                     setCaretAtTheEnd(input.value)
                 }
 
                 toEmit = Number(toEmit)
             }
 
+            updateSyntax()
+
             emit('input', toEmit, e)
             emit('update:model-value', toEmit)
             if (autoTrim.value) {
@@ -803,6 +801,9 @@ export default defineComponent({
                     if (isSpecialWord(word)) {
                         return `<span class="clickable" style="color: ${syntaxHighlightColor.value}">${word}</span>`
                     }
+                    if (word.startsWith('<')) {
+                        return `<span>${word.replace('<', '&lt;')}</span>`
+                    }
                     return word
                 })
                 input.value.innerHTML = words.join(' ')

package/src/components/compound/DlTabs/DlTabs.vue

@@ -32,15 +32,13 @@
                     :no-caps="item.noCaps"
                     :is-active="modelValue === item.name"
                     :font-size="fontSize"
+                    :bordered="bordered"
                     @click="handleTabClick"
                 />
             </div>
         </tabs-wrapper>
-        <div class="empty-space" />
-        <slot
-            name="top-right"
-            :styles="topRightSlotStyles"
-        />
+        <div :class="{ 'no-border-bottom': !bordered }" class="empty-space" />
+        <slot name="top-right" :styles="topRightSlotStyles" />
     </div>
 </template>
 
@@ -70,7 +68,8 @@ export default defineComponent({
         disabled: { type: Boolean, default: false },
         modelValue: { type: String, required: true },
         fontSize: { type: String, default: '18px' },
-        gap: { type: String, default: '40px' }
+        gap: { type: String, default: '40px' },
+        bordered: { type: Boolean, default: true }
     },
     emits: ['update:model-value'],
     data() {
@@ -87,11 +86,13 @@ export default defineComponent({
     },
     computed: {
         topRightSlotStyles(): string {
-            return `border-bottom: ${
-                this.vertical
-                    ? 'inherit'
-                    : '1px solid var(--dl-color-separator)'
-            };
+            let borderBottom = this.vertical
+                ? 'inherit'
+                : '1px solid var(--dl-color-separator)'
+            if (!this.bordered) {
+                borderBottom = 'unset'
+            }
+            return `border-bottom: ${borderBottom};
             padding-left: ${this.topRightSlotWidth ? this.gap : '0px'};
             `
         },
@@ -143,7 +144,7 @@ export default defineComponent({
             this.updatePosition()
         },
         unsubscribeListeners() {
-            (this.$refs.dlTabsRef as HTMLElement)?.removeEventListener(
+            ;(this.$refs.dlTabsRef as HTMLElement)?.removeEventListener(
                 'scroll',
                 this.handleScroll
             )
@@ -247,4 +248,7 @@ export default defineComponent({
 .full-width {
     width: 100%;
 }
+.no-border-bottom {
+    border-bottom: unset;
+}
 </style>

package/src/components/compound/DlTabs/components/DlTab.vue

@@ -49,7 +49,8 @@ export default defineComponent({
         showTooltip: { type: Boolean, default: false },
         tooltip: { type: String, default: null },
         tabindex: { type: String, default: '0' },
-        fontSize: { type: String, default: '18px' }
+        fontSize: { type: String, default: '18px' },
+        bordered: { type: Boolean, default: true }
     },
     emits: ['click'],
     data() {
@@ -78,6 +79,8 @@ export default defineComponent({
 
             if (this.isActive) {
                 classes = classes + ' dl-tab--active'
+            } else if (!this.bordered) {
+                classes = classes + ' dl-tab--no-border-bottom'
             }
 
             if (this.disabled) {
@@ -146,6 +149,9 @@ export default defineComponent({
         color: var(--dl-color-hover);
         border-color: var(--dl-color-hover);
     }
+    &--no-border-bottom {
+        border-bottom: unset;
+    }
     cursor: pointer;
     flex-grow: 1;
 }

package/src/demos/DlTabsDemo.vue

@@ -17,6 +17,25 @@
             </dl-tab-panel>
         </dl-tab-panels>
 
+        With no border
+        <dl-tabs
+            v-model="selectedTab"
+            :items="tabItems"
+            :bordered="false"
+            @update:model-value="handleModelValueUpdate"
+        />
+        <div style="height: 4px" />
+        <dl-tab-panels v-model="selectedTab">
+            <dl-tab-panel
+                v-for="item in tabItems"
+                :key="item.name"
+                class="tabpanel"
+                :name="item.name"
+            >
+                <h1>{{ item.label }}</h1>
+            </dl-tab-panel>
+        </dl-tab-panels>
+
         <dl-tabs
             v-model="selectedTab"
             :items="tabItems"
@@ -41,11 +60,7 @@
                         icon="icon-dl-refresh"
                         label="Refresh"
                     />
-                    <dl-button
-                        size="s"
-                        icon="icon-dl-pause"
-                        label="Pause"
-                    />
+                    <dl-button size="s" icon="icon-dl-pause" label="Pause" />
                 </div>
             </template>
         </dl-tabs>
@@ -86,11 +101,7 @@
                         icon="icon-dl-refresh"
                         label="Refresh"
                     />
-                    <dl-button
-                        size="s"
-                        icon="icon-dl-pause"
-                        label="Pause"
-                    />
+                    <dl-button size="s" icon="icon-dl-pause" label="Pause" />
                 </div>
             </template>
         </dl-tabs>