@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -76,8 +76,12 @@ export default defineComponent({
         disabled: { type: Boolean, default: false },
         id: { type: [String, Number], default: null },
         label: { type: String, default: null },
-        padding: { type: String, default: '5px' },
-        modelValue: { type: [String, Number, Boolean], required: true },
+        padding: { type: String, default: '0' },
+        modelValue: {
+            type: [String, Number, Boolean],
+            required: false,
+            default: null
+        },
         value: { type: [String, Number, Boolean], required: true },
         tabindex: { type: String, default: '0' },
         subLabel: { type: String, default: '' },
@@ -158,7 +162,7 @@ export default defineComponent({
     cursor: pointer;
     display: inline-flex;
     max-width: max-content;
-    gap: 10px;
+    gap: 6px;
     align-items: center;
     padding: var(--dl-radio-padding);
     user-select: none;
@@ -184,7 +188,8 @@ export default defineComponent({
 }
 input {
     position: absolute;
-    opacity: 0;
+    // to deal with quasar conflicts.
+    opacity: 0 !important;
     margin: 0;
     width: 100%;
     height: 100%;
@@ -209,7 +214,7 @@ input {
     flex-direction: column;
 }
 .sub-text {
-    margin-left: 6%;
+    margin-left: 5%;
     width: 80%;
     color: var(--dl-color-medium);
     word-break: break-all;

package/src/components/essential/DlSeparator/DlSeparator.vue

@@ -40,7 +40,7 @@ export default defineComponent({
                 case 'horizontal':
                     styles = {
                         backgroundColor: color,
-                        width: width ?? '300px',
+                        width: width ?? 'auto',
                         height: height ?? '1px',
                         marginTop: indent,
                         marginBottom: indent
@@ -50,7 +50,7 @@ export default defineComponent({
                     styles = {
                         backgroundColor: color,
                         width: width ?? '1px',
-                        height: height ?? '300px',
+                        height: height ?? 'auto',
                         marginLeft: indent,
                         marginRight: indent
                     }

package/src/components/essential/DlSpinner/index.ts

@@ -1,15 +1,3 @@
-import DlSpinnerGrid from './components/DlSpinnerGrid.vue'
-import DlSpinnerCircle from './components/DlSpinnerCircle.vue'
-import DlSpinnerClock from './components/DlSpinnerClock.vue'
-import DlSpinnerDots from './components/DlSpinnerDots.vue'
-import DlSpinnerLogo from './components/DlSpinnerLogo.vue'
 import DlSpinner from './DlSpinner.vue'
 
-export {
-    DlSpinner,
-    DlSpinnerLogo,
-    DlSpinnerCircle,
-    DlSpinnerGrid,
-    DlSpinnerDots,
-    DlSpinnerClock
-}
+export { DlSpinner }

package/src/components/essential/DlSpinner/styles/spinnerStyles.scss

@@ -109,3 +109,10 @@
         opacity: 1;
     }
 }
+
+.spinner-text {
+    font-size: 1em;
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+}

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -2,7 +2,9 @@
     <div
         :id="uuid"
         class="dl-switch-wrapper"
-        :style="`height: ${size}px; margin: ${margin}`"
+        :style="`height: ${size}px; margin: ${margin}; ${
+            fluid ? 'justify-content: space-between;' : ''
+        }`"
     >
         <label
             v-if="!!leftLabel"
@@ -79,7 +81,7 @@ export default defineComponent({
             type: String,
             default: '0'
         },
-        modelValue: { type: Any, required: true },
+        modelValue: { type: Any, required: false, default: null },
         labelProps: {
             type: Object as PropType<{ fontSize: number; color: string }>,
             default: () => ({
@@ -102,7 +104,8 @@ export default defineComponent({
         value: { type: Any, default: null },
         falseValue: { type: Any, default: false },
         trueValue: { type: Any, default: true },
-        tabindex: { type: String, default: '0' }
+        tabindex: { type: String, default: '0' },
+        fluid: { type: Boolean, default: false }
     },
     emits: ['update:model-value', 'toggle', 'click', 'change'],
     data() {

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

@@ -2,8 +2,62 @@
     <div
         :id="uuid"
         class="container"
+        :class="rootContainerClasses"
         :style="cssVars"
     >
+        <div class="dl-textarea__header">
+            <div
+                v-show="!!title.length || !!tooltip.length"
+                class="dl-textarea__title-container"
+            >
+                <label
+                    v-show="!!title.length"
+                    class="dl-textarea__title"
+                >
+                    {{ title }}
+                    <span
+                        v-show="required"
+                        :class="asteriskClasses"
+                    > *</span>
+                    {{ !required && optional ? ' (Optional)' : null }}
+                </label>
+                <span v-show="!!tooltip.length">
+                    <dl-icon
+                        class="dl-textarea__tooltip-icon"
+                        icon="icon-dl-info"
+                        size="12px"
+                    />
+                    <dl-tooltip>
+                        {{ tooltip }}
+                    </dl-tooltip>
+                </span>
+            </div>
+            <div
+                v-show="!!topMessage.length"
+                class="dl-textarea__top-message-container"
+            >
+                <dl-info-error-message
+                    v-show="!!topMessage.length"
+                    position="above"
+                    :value="topMessage"
+                />
+            </div>
+            <span
+                v-show="showClearButton"
+                class="dl-textarea__clear-button"
+            >
+                <dl-button
+                    ref="input-clear-button"
+                    icon="icon-dl-close"
+                    size="s"
+                    text-color="dl-color-darker"
+                    flat
+                    fluid
+                    @click="onClear"
+                />
+                <dl-tooltip v-if="clearButtonTooltip"> Remove text </dl-tooltip>
+            </span>
+        </div>
         <textarea
             ref="textarea"
             :value="modelValue"
@@ -11,6 +65,7 @@
             :placeholder="placeholder"
             :maxlength="maxLength"
             :disabled="disabled"
+            :readonly="readonly"
             @input="onChange"
             @keydown="onKeydown"
             @focus="onFocus"
@@ -42,9 +97,11 @@
                 warning
                 :value="warningMessage"
             />
-            <span v-show="showCounter">
-                {{ modelValue.length
-                }}{{ maxLength && maxLength > 0 ? `/${maxLength}` : null }}
+            <span
+                v-if="showCounter && maxLength && maxLength > 0"
+                class="dl-text-input__counter"
+            >
+                {{ characterCounter }}
             </span>
         </div>
     </div>
@@ -55,10 +112,17 @@ import { v4 } from 'uuid'
 import { DlInfoErrorMessage } from '../../shared'
 import { defineComponent, computed, ref } from 'vue-demi'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
+//todo: this can cause issues
+import { DlIcon } from '../'
+import { DlTooltip } from '../../shared'
+import DlButton from '../../basic/DlButton/DlButton.vue'
 
 export default defineComponent({
     name: 'DlTextArea',
     components: {
+        DlButton,
+        DlTooltip,
+        DlIcon,
         DlInfoErrorMessage
     },
     model: {
@@ -113,9 +177,54 @@ export default defineComponent({
         warning: {
             type: Boolean,
             default: false
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        tooltip: {
+            type: String,
+            default: ''
+        },
+        optional: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        topMessage: {
+            type: String,
+            default: ''
+        },
+        hideClearButton: {
+            type: Boolean,
+            default: false
+        },
+        clearButtonTooltip: {
+            type: Boolean,
+            default: false
+        },
+        dense: Boolean,
+        redAsterisk: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        counterReverse: {
+            type: Boolean,
+            default: false
+        },
+        maxHeight: {
+            type: String,
+            default: '120px'
         }
     },
-    emits: ['input', 'focus', 'blur', 'update:model-value', 'keydown'],
+    emits: ['input', 'focus', 'blur', 'clear', 'update:model-value', 'keydown'],
     setup(props) {
         const uuid = ref(`dl-text-area-${v4()}`)
         const textarea = ref(null)
@@ -125,6 +234,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%'
             }
@@ -161,7 +271,56 @@ export default defineComponent({
             textarea
         }
     },
+    computed: {
+        showClearButton(): boolean {
+            return (
+                !this.hideClearButton &&
+                !this.disabled &&
+                !this.readonly &&
+                !!this.modelValue
+            )
+        },
+        asteriskClasses(): string[] {
+            const classes = ['dl-textarea__asterisk']
+
+            if (this.redAsterisk) {
+                classes.push('dl-textarea__asterisk--red')
+            }
+
+            return classes
+        },
+        rootContainerClasses(): string[] {
+            const classes = []
+            if (this.dense) {
+                classes.push('dl-textarea--dense')
+            }
+            return classes
+        },
+        textareaLength(): number {
+            return `${this.modelValue}`.length
+        },
+        characterCounter(): string {
+            if (!this.maxLength) {
+                return ''
+            }
+
+            const chars = this.counterReverse
+                ? this.maxLength - this.textareaLength
+                : this.textareaLength
+
+            return `${chars}/${this.maxLength}`
+        }
+    },
     methods: {
+        onClear(e: any): void {
+            this.$emit('clear', this.modelValue)
+            this.$emit('input', '', e)
+            this.$emit('update:model-value', '')
+
+            const inputRef = this.$refs.textarea as HTMLInputElement
+            inputRef.value = ''
+            inputRef.focus()
+        },
         onChange(e: any) {
             this.$emit('input', e.target.value, e)
             this.$emit('update:model-value', e.target.value)
@@ -207,11 +366,51 @@ 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;
-
+    &--dense {
+        padding: 0;
+    }
+    &__asterisk {
+        color: var(--dl-color-medium);
+        font-size: var(--dl-font-size-body);
+        user-select: none;
+        &--red {
+            color: var(--dl-color-negative);
+        }
+    }
+    &__clear-button {
+        position: absolute;
+        bottom: -25px;
+        right: 0;
+    }
+    &__header {
+        position: relative;
+        width: var(--dl-textarea-width);
+    }
+    &__title-container {
+        margin-bottom: 6px;
+        display: flex;
+        align-items: center;
+        text-align: start;
+    }
+    &__title {
+        color: var(--dl-color-medium);
+        font-size: var(--dl-font-size-body);
+        text-align: left;
+        margin-right: 5px;
+        white-space: nowrap;
+    }
+    &__tooltip-icon {
+        color: var(--dl-color-medium);
+    }
+    &__top-message-container {
+        display: flex;
+        margin-bottom: 10px;
+        text-align: start;
+    }
     &:hover {
         border-color: var(--dl-color-hover);
     }
@@ -226,7 +425,13 @@ export default defineComponent({
         cursor: not-allowed;
         user-select: none;
     }
-
+    &:readonly {
+        border-color: var(--dl-color-separator);
+        cursor: text;
+        &:hover {
+            border-color: var(--dl-color-separator) !important;
+        }
+    }
     &::placeholder {
         color: var(--dl-color-lighter);
         opacity: 1;

package/src/components/essential/DlThemeProvider/DlThemeProvider.vue

@@ -26,6 +26,9 @@ export default defineComponent({
 
         const isDarkTheme = ref(props.isDark)
 
+        // @ts-ignore
+        window.DlComponents?.setTheme(props.isDark ? 'dark' : 'light')
+
         provide('theme', isDarkTheme)
 
         watch(
@@ -36,6 +39,9 @@ export default defineComponent({
                     'data-theme',
                     getThemeModeAttr(isDark)
                 ) // sets the dl data-theme attr
+
+                // @ts-ignore
+                window.DlComponents?.setTheme(props.isDark ? 'dark' : 'light')
             }
         )
     },

package/src/components/essential/DlTypography/DlTypography.vue

@@ -16,7 +16,7 @@ import { transformOptions } from '../../shared/types'
 
 type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
 
-const sizes = ['h1', 'h2', 'h3', 'h4', 'body', 'small']
+const sizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'small']
 
 export default defineComponent({
     name: 'DlTypography',
@@ -108,6 +108,12 @@ export default defineComponent({
     &--h4 {
         font-size: var(--dl-font-size-h4);
     }
+    &--h5 {
+        font-size: var(--dl-font-size-h5);
+    }
+    &--h6 {
+        font-size: var(--dl-font-size-h6);
+    }
     &--body {
         font-size: var(--dl-font-size-body);
     }

package/src/components/essential/index.ts

@@ -7,9 +7,9 @@ export * from './DlProgressBar'
 export * from './DlRadio'
 export * from './DlSkeleton'
 export * from './DlSwitch'
-export * from './DlTextHolder'
+export * from './DlEllipsis'
+export * from './DlLabel'
 export * from './DlThemeProvider'
-export * from './DlTooltip'
 export * from './DlTrend'
 export * from './DlTypography'
 export * from './DlPanel'
@@ -18,3 +18,4 @@ export * from './DlLink'
 export * from './DlColorPicker'
 export * from './DlSpinner'
 export * from './DlSeparator'
+export * from './DlPageLayout'

package/src/components/shared/DlInfoErrorMessage/DlInfoErrorMessage.vue

@@ -65,7 +65,7 @@ export default defineComponent({
     text-overflow: ellipsis;
     line-height: 11px;
     max-height: 22px;
-    white-space: pre-wrap;
+    white-space: nowrap;
     overflow: hidden;
     display: inline-block;
 }

package/src/components/{essential → shared}/DlTooltip/DlTooltip.vue

@@ -116,7 +116,7 @@ export default defineComponent({
         },
         scrollTarget: {
             type: String as PropType<Element | string>,
-            default: void 0
+            default: null
         },
         delay: {
             type: Number,
@@ -131,6 +131,13 @@ export default defineComponent({
             default: 'left',
             validator: (v: string) =>
                 ['left', 'right', 'justify', 'center'].includes(v)
+        },
+        /**
+         * the % of the parent element that triggers the tooltips visibility
+         */
+        triggerPercentage: {
+            type: Number,
+            default: 1
         }
     },
     setup(props, { emit, attrs }) {
@@ -173,7 +180,12 @@ export default defineComponent({
 
         const { showPortal, hidePortal, portalIsActive, portalEl } = usePortal(
             vm,
-            innerRef
+            innerRef,
+            false,
+            {
+                parentId: attrs.id as string,
+                parentClass: attrs.class as string
+            }
         )
 
         const isMobile = computed(() => isMobileOrTablet())
@@ -212,7 +224,7 @@ export default defineComponent({
                 configureScrollTarget()
             })
 
-            if (unwatchPosition === void 0) {
+            if (!unwatchPosition) {
                 unwatchPosition = watch(
                     () =>
                         width +
@@ -246,14 +258,14 @@ export default defineComponent({
         }
 
         function anchorCleanup() {
-            if (observer !== void 0) {
+            if (observer) {
                 observer.disconnect()
-                observer = void 0
+                observer = null
             }
 
-            if (unwatchPosition !== void 0) {
+            if (unwatchPosition) {
                 unwatchPosition()
-                unwatchPosition = void 0
+                unwatchPosition = null
             }
 
             unconfigureScrollTarget()
@@ -261,9 +273,10 @@ export default defineComponent({
         }
 
         function CheckAnchorElVisiblity(domElement: any) {
+            const intersectionRatio = props.triggerPercentage ?? 1
             return new Promise((resolve) => {
                 const o = new IntersectionObserver(([entry]) => {
-                    resolve(entry.intersectionRatio === 1)
+                    resolve(entry.intersectionRatio >= intersectionRatio)
                     o.disconnect()
                 })
                 o.observe(domElement)
@@ -356,7 +369,7 @@ export default defineComponent({
         }
 
         function configureScrollTarget() {
-            if (anchorEl.value !== null || props.scrollTarget !== void 0) {
+            if (anchorEl.value !== null || props.scrollTarget) {
                 (localScrollTarget as Ref<any>).value = getScrollTarget(
                     anchorEl.value as HTMLElement,
                     props.scrollTarget as Element
@@ -386,7 +399,9 @@ export default defineComponent({
         Object.assign(vm!.proxy, { updatePosition })
 
         return {
-            uuid: `dl-tooltip-${v4()}`,
+            uuid: (attrs.id as string)?.length
+                ? (attrs.id as string)
+                : `dl-tooltip-${v4()}`,
             portalIsActive,
             classes: ['dl-tooltip dl-position-engine', attrs.class],
             showing,
@@ -425,7 +440,7 @@ export default defineComponent({
     overflow-y: auto;
     overflow-x: hidden;
     min-height: 16px;
-    padding: 2px 5px;
+    padding: var(--dl-tooltip-padding, 2px 5px);
     font-size: var(--dl-font-size-small);
     line-height: 16px;
     color: var(--dl-tooltip-color);
@@ -440,14 +455,6 @@ export default defineComponent({
     pointer-events: none;
 }
 
-.dl-tooltip {
-    z-index: 9000;
-    position: fixed !important;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 2px 5px;
-}
-
 .capitalize::first-letter {
     text-transform: var(--dl-tooltip-text-transform);
 }