@dataloop-ai/components 0.17.69 → 0.17.71

package/package.json

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

package/src/components/basic/DlContainer/DlContainer.vue

@@ -0,0 +1,70 @@
+<template>
+    <div
+        ref="wrapper"
+        class="container-wrapper"
+    >
+        <div
+            :id="uuid"
+            ref="container"
+            :class="containerStyles"
+        >
+            <div
+                v-if="hasHeaderSlot"
+                class="dl-container__header"
+            >
+                <slot name="header" />
+            </div>
+
+            <div class="dl-container__content">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlContainer',
+    data() {
+        return {
+            uuid: `dl-container-${v4()}`
+        }
+    },
+    computed: {
+        containerStyles() {
+            return 'dl-container'
+        },
+        hasHeaderSlot(): boolean {
+            return this.$slots.header !== undefined
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.dl-container {
+    border: 1px solid var(--dl-color-separator);
+    user-select: none;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    &__header {
+        display: flex;
+        padding: 10px;
+        border-bottom: 1px solid var(--dl-color-separator);
+    }
+    &__content {
+        padding: 10px;
+        height: 100%;
+        overflow-y: auto;
+    }
+}
+
+.container-wrapper {
+    flex-basis: var(--container-flex-basis);
+    margin: var(--row-gap) var(--column-gap);
+    height: 100%;
+}
+</style>

package/src/components/basic/DlContainer/index.ts

@@ -0,0 +1,3 @@
+import DlContainer from './DlContainer.vue'
+
+export { DlContainer }

package/src/components/basic/DlEllipsis/DlEllipsis.vue

@@ -81,11 +81,12 @@ export default defineComponent({
             default: () => [0, 25]
         }
     },
-    setup(props, ctx) {
+    // TODO: fix type issue here
+    setup(props: any, { slots }) {
         const dlEllipsisRef = ref(null)
         const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
 
-        const hasDefaultSlot = computed(() => !!ctx.slots.default)
+        const hasDefaultSlot = computed(() => !!slots.default)
         const splitIndex = computed(() => {
             if (!props.text.length) return null
             return props.split

package/src/components/basic/index.ts

@@ -13,3 +13,4 @@ export * from './DlEllipsis'
 export * from './DlCard'
 export * from './DlGrid'
 export * from './DlMarkupTable'
+export * from './DlContainer'

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

@@ -84,7 +84,11 @@ export default defineComponent({
             validator: optionsValidator
         },
         type: { type: String, default: 'radio', validator: typeValidator },
-        modelValue: { type: [Array, String, Number, Boolean], required: true }
+        modelValue: {
+            type: [Array, String, Number, Boolean],
+            required: false,
+            default: null
+        }
     },
     data() {
         const logger = loggerFactory('DlOptionGroup')

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

@@ -77,7 +77,11 @@ export default defineComponent({
         id: { type: [String, Number], default: null },
         label: { type: String, default: null },
         padding: { type: String, default: '0' },
-        modelValue: { type: [String, Number, Boolean], required: true },
+        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: '' },

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

@@ -79,7 +79,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: () => ({

package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -114,12 +114,6 @@ export default defineComponent({
                 : 0
         })
 
-        onMounted(() => {
-            window.addEventListener('load', setItemSize)
-        })
-
-        onUnmounted(() => window.removeEventListener('load', () => {}))
-
         const setItemSize = () => {
             scrollSizeItem.value = props.virtualScrollItemSize
                 ? props.virtualScrollItemSize
@@ -260,8 +254,11 @@ export default defineComponent({
 
         onMounted(() => {
             configureScrollTarget()
+            window.addEventListener('load', setItemSize)
         })
 
+        onUnmounted(() => window.removeEventListener('load', () => {}))
+
         onActivated(() => {
             configureScrollTarget()
         })

package/src/utils/parse-smart-query.ts

@@ -22,6 +22,12 @@ const GeneratePureValue = (value: any) => {
     return value
 }
 
+/**
+ * Method to convert a DlSmartSearch query string to Mongo based JSON query
+ *
+ * @param { string } query DlSmartSearch query string
+ * @returns Mongo based JSON
+ */
 export const parseSmartQuery = (query: string) => {
     const queryArr = query.split(' OR ')
     const orTerms: { [key: string]: any }[] = []
@@ -93,6 +99,12 @@ export const parseSmartQuery = (query: string) => {
     return builtQuery
 }
 
+/**
+ * Method to convert a Mongo based JSON query to a DlSmartSearch query string
+ *
+ * @param { { [key: string]: any } } query Mongo based JSON that represents a query
+ * @returns DlSmartSearch query string
+ */
 export const stringifySmartQuery = (query: { [key: string]: any }) => {
     let result = ''