@dataloop-ai/components 0.13.0

package/src/demo/DlTextInputDemo.vue

@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <dl-text-input
+            v-model="textInputValue"
+            style="width: 220px"
+            placeholder="Select option"
+            size="l"
+            title="Input 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."
+            info-message="Ipsum amet quis velit amet. Anim consectetur nostrud sunt eu non non consequat sint eu amet."
+            :auto-suggest-items="[
+                'foo',
+                'bar',
+                'foobar',
+                'barfoo',
+                'foo bar foobarv'
+            ]"
+            show-counter
+            :max-length="20"
+        />
+        <dl-text-input
+            v-model="passFieldValue"
+            title="Password"
+            style="width: 220px"
+            placeholder="Select option"
+            size="m"
+            type="password"
+            error
+            error-message="The password entered is incorrect."
+            info-message="This won't show, error is true"
+        />
+        <dl-text-input
+            v-model="warningFieldValue"
+            title="Warning Example"
+            style="width: 220px"
+            placeholder="Select option"
+            size="m"
+            warning
+            warning-message="Something isn't right."
+            info-message="This won't show, error is true"
+            optional
+        />
+        <dl-text-input
+            v-model="errorFieldValue"
+            title="Error Example"
+            style="width: 220px"
+            placeholder="Select option"
+            size="m"
+            error
+            error-message="Error message is the strongest."
+            warning
+            warning-message="This won't show, error is true"
+            info-message="This won't show, error is true"
+        />
+        <dl-text-input
+            style="width: 220px"
+            placeholder="Select option"
+            title="Min"
+            required
+            size="s"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlTextInput } from '../components'
+export default defineComponent({
+    name: 'DlTextInputDemo',
+    components: {
+        DlTextInput
+    },
+    setup() {
+        const textInputValue = ref<string>('')
+        const passFieldValue = ref<string>('')
+        const warningFieldValue = ref<string>('')
+        const errorFieldValue = ref<string>('')
+
+        return {
+            textInputValue,
+            passFieldValue,
+            warningFieldValue,
+            errorFieldValue
+        }
+    }
+})
+</script>

package/src/demo/DlThDemo.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <DlTh> Table Th component </DlTh>
+        <DlTh :auto-width="true">
+            Table Th component auto width
+        </DlTh>
+        <DlTh
+            :props="{
+                sort: (el) => log(el),
+                col: { sortable: true, align: 'left' }
+            }"
+        >
+            Table Th component
+        </DlTh>
+    </div>
+</template>
+
+<script lang="ts">
+import { DlTh } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    components: {
+        DlTh
+    },
+    methods: {
+        log(e: Event) {
+            console.log(e)
+        }
+    }
+})
+</script>

package/src/demo/DlTooltipDemo.vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam,
+            nemo! Enim alias odit, doloribus est nisi nihil? Nisi quibusdam
+            animi quia omnis itaque, maxime labore aliquam. Obcaecati et placeat
+            nemo.
+        </p>
+        <p>
+            <dl-link
+                href="https://console.dataloop.ai"
+                :size="30"
+                open-in-new-tab
+            >
+                Link With Tooltip
+                <dl-tooltip>
+                    lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                    Assumenda corporis alias cupiditate natus? Ipsum quos quia
+                    temporibus ipsam magnam, alias rerum aut, a quaerat dicta,
+                    quasi aperiam facere asperiores saepe.
+                </dl-tooltip>
+            </dl-link>
+            <span>
+                Span With Tooltip
+                <dl-tooltip
+                    color="rgb(0, 255, 0)"
+                    background-color="dl-color-side-panel"
+                >
+                    lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                    Assumenda corporis alias cupiditate natus? Ipsum quos quia
+                    temporibus ipsam magnam, alias rerum aut, a quaerat dicta,
+                    quasi aperiam facere asperiores saepe.
+                </dl-tooltip>
+            </span>
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
+            debitis, dolor tempora tenetur perspiciatis laborum illum, dolorem,
+            voluptate commodi molestiae animi fuga natus assumenda aliquam ad?
+            Dicta harum recusandae rem!
+        </p>
+    </div>
+</template>
+
+<script lang="ts">
+import { DlTooltip, DlLink } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlTooltipDemo',
+    components: {
+        DlTooltip,
+        DlLink
+    },
+    data() {
+        return {}
+    },
+    template: 'dl-tooltip-demo'
+})
+</script>

package/src/demo/DlTrDemo.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <DlTr :no-hover="true">
+            Table Tr component
+        </DlTr>
+    </div>
+</template>
+
+<script lang="ts">
+import { DlTr } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    components: {
+        DlTr
+    }
+})
+</script>

package/src/demo/DlTrendDemo.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <dl-trend :value="75" />
+        <dl-trend :value="0" />
+        <dl-trend
+            :value="25"
+            direction="down"
+        />
+        <dl-trend
+            value="with some text"
+            direction="down"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlTrend } from '../components'
+export default defineComponent({
+    name: 'DlTrendDemo',
+    components: {
+        DlTrend
+    }
+})
+</script>

package/src/demo/DlTypographyDemo.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div
+            v-for="(item, index) in typographyTypes"
+            :key="index"
+        >
+            <DlTypography
+                :color="item.color"
+                :size="item.size || item.variant"
+                :variant="item.variant"
+            >
+                Typography {{ item ? item.variant : item }}
+            </DlTypography>
+        </div>
+
+        <DlButton>
+            <dl-typography
+                color="dl-color-tooltip-text"
+                variant="p"
+                size="small"
+                bold
+            >
+                Typography Bold
+            </dl-typography>
+        </DlButton>
+        <br>
+        <br>
+        <DlButton>
+            <dl-typography
+                color="dl-color-tooltip-text"
+                variant="p"
+                size="small"
+                uppercase
+            >
+                Typography Uppercase
+            </dl-typography>
+        </DlButton>
+    </div>
+</template>
+
+<script lang="ts">
+import DlTypography from '../components/DlTypography.vue'
+import { DlButton } from '../components/DlButton'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlTypographyDemo',
+    components: {
+        DlTypography,
+        DlButton
+    },
+    data() {
+        return {
+            typographyTypes: [
+                {
+                    variant: 'h1'
+                },
+                {
+                    variant: 'h2'
+                },
+                {
+                    variant: 'h3'
+                },
+                {
+                    variant: 'h4'
+                },
+                {
+                    variant: 'h5'
+                },
+                {
+                    variant: 'h6'
+                },
+                {
+                    variant: 'p'
+                },
+                {
+                    variant: 'h1',
+                    color: 'dl-color-secondary'
+                },
+                {
+                    variant: 'body',
+                    size: '30px',
+                    color: 'dl-color-positive'
+                },
+                {
+                    variant: 'p',
+                    color: 'dl-color-warning'
+                }
+            ]
+        }
+    }
+})
+</script>

package/src/demo/DlWidgetDemo.vue

@@ -0,0 +1,157 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import DlWidgetGrid from '../components/DlWidget/DlWidgetGrid.vue'
+import { DlButton } from '../components'
+import BadgeDemo from './DlBadgeDemo.vue'
+import { Widget } from '../components/DlWidget/types'
+import DlDialogBox from '../components/DlDialogBox/DlDialogBox.vue'
+import DlDialogBoxHeader from '../components/DlDialogBox/DlDialogBoxHeader.vue'
+import DlDialogBoxFooter from '../components/DlDialogBox/DlDialogBoxFooter.vue'
+import DlChip from '../components/DlChip/DlChip.vue'
+
+export default defineComponent({
+    components: {
+        DlWidgetGrid,
+        DlButton,
+        DlDialogBox,
+        DlDialogBoxHeader,
+        DlDialogBoxFooter,
+        DlChip
+    },
+    setup() {
+        const isEditable = ref(false)
+        const addDialog = ref(false)
+        const handleEditMode = () => (isEditable.value = !isEditable.value)
+
+        const widgetLibrary = ref([
+            {
+                title: 'Widget 1',
+                subTitle: 'first widget',
+                content: BadgeDemo,
+                description:
+                    'Lorem ipsum dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
+            }
+        ] as Widget[])
+
+        const widgets = ref([
+            [
+                {
+                    title: 'Widget 8',
+                    subTitle: 'eighth widget',
+                    content: `Do I contradict myself?
+                              Very well then I contradict myself,
+                              (I am large, I contain multitudes.)
+                              I concentrate toward them that are nigh, I wait on the door-slab.
+                              Who has done his day's work? who will soonest be through with his supper?
+                              Who wishes to walk with me?`,
+                    description:
+                        'Lorem dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
+                }
+            ],
+            [
+                {
+                    title: 'Widget 2',
+                    subTitle: 'second widget',
+                    content: `“Later she remembered all the hours of the afternoon as happy -- one of those uneventful times that seem at the moment only a link between past and future pleasure, but turn out to have been the pleasure itself.”`,
+                    description:
+                        'Lorem ipsum dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
+                },
+                {
+                    title: 'Widget 3',
+                    subTitle: 'third widget',
+                    content: `The Bat that flits at close of Eve
+                          Has left the Brain that wont Believe
+                          The Owl that calls upon the Night
+                          Speaks the Unbelievers fright`,
+                    description:
+                        'Lorem ipsum dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
+                }
+            ],
+            [
+                {
+                    title: 'Widget 4',
+                    subTitle: 'fourth widget',
+                    content: `That motley drama—oh, be sure   
+                             It shall not be forgot!
+                          With its Phantom chased for evermore   
+                             By a crowd that seize it not,`,
+                    description:
+                        'Lorem ipsum dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
+                }
+            ]
+        ] as Widget[][])
+
+        const addWidget = (widget: Widget) => {
+            widgets.value[widgets.value.length - 1].push(widget)
+            addDialog.value = false
+        }
+
+        const handleRemove = (widget: Widget) => {
+            widgetLibrary.value.push(widget)
+        }
+
+        return {
+            widgets,
+            widgetLibrary,
+            isEditable,
+            addDialog,
+            handleEditMode,
+            addWidget,
+            handleRemove
+        }
+    }
+})
+</script>
+
+<template>
+    <div style="width: 900px">
+        <div
+            style="width: 200px; display: flex; justify-content: space-between"
+        >
+            <dl-button
+                :label="isEditable ? 'Done' : 'Edit'"
+                @click="handleEditMode"
+            />
+            <dl-button
+                label="Add"
+                @click="addDialog = true"
+            />
+        </div>
+        <dl-widget-grid
+            v-model="widgets"
+            :is-editable="isEditable"
+            @remove="handleRemove"
+        />
+
+        <dl-dialog-box v-model="addDialog">
+            <template #header>
+                <dl-dialog-box-header
+                    title="Add new widget"
+                    @on-close="addDialog = false"
+                />
+            </template>
+            <template #body>
+                <div
+                    class="flex"
+                    style="gap: 10px"
+                >
+                    <dl-chip
+                        v-for="(widget, index) in widgetLibrary"
+                        :key="index"
+                        style="cursor: pointer"
+                        @click="addWidget(widget)"
+                    >
+                        {{ widget.title }}
+                    </dl-chip>
+                </div>
+            </template>
+            <template #footer>
+                <dl-dialog-box-footer>
+                    <dl-button @click="addDialog = false">
+                        Close
+                    </dl-button>
+                </dl-dialog-box-footer>
+            </template>
+        </dl-dialog-box>
+    </div>
+</template>

package/src/demo/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -0,0 +1,202 @@
+<template>
+    <div style="width: 900px">
+        <div style="margin: 40px 0">
+            <dl-checkbox
+                v-model="switchState"
+                without-root-padding
+                label="Disabled"
+            />
+        </div>
+        <div
+            style="width: 100px"
+            class="props"
+        >
+            <select
+                id="status_select"
+                class="prop"
+                placeholder="Status type"
+                @input="updateStatusType"
+            >
+                <option value="info">
+                    Info
+                </option>
+                <option value="warning">
+                    Warning
+                </option>
+                <option value="error">
+                    Error
+                </option>
+                <option value="success">
+                    Success
+                </option>
+            </select>
+            <input
+                class="prop"
+                placeholder="Status Messaee"
+                @input="updateStatusMessage"
+            >
+        </div>
+        <dl-smart-search
+            :status="status"
+            :aliases="aliases"
+            :schema="schema"
+            :color-schema="{
+                fields: 'blue',
+                operators: 'green',
+                keywords: 'bold'
+            }"
+            :filters="filters"
+            :disabled="switchState"
+            :is-loading="isLoading"
+            @remove-query="handleRemoveQuery"
+            @save-query="handleSaveQuery"
+            @search-query="handleSearchQuery"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlSmartSearch, DlCheckbox } from '../../components'
+import { Query } from '../../components/DlSmartSearch/types'
+import { aliases, schema } from './schema'
+
+export default defineComponent({
+    name: 'DlSmartSearchDemo',
+    components: {
+        DlSmartSearch,
+        DlCheckbox
+    },
+    setup() {
+        return { aliases, schema }
+    },
+    data() {
+        return {
+            switchState: false,
+            isLoading: false,
+            status: {
+                type: 'info',
+                message: ''
+            },
+            filters: [
+                {
+                    label: 'Saved DQL Queries',
+                    name: 'saved',
+                    queries: [
+                        {
+                            name: 'Query 1',
+                            query: '{"q": 1}'
+                        },
+                        {
+                            name: 'Query 2',
+                            query: '{"query2": "query2"}'
+                        },
+                        {
+                            name: 'Query 3',
+                            query: ''
+                        },
+                        {
+                            name: 'Query 4',
+                            query: JSON.stringify({
+                                aa: 'bb',
+                                no: [{ as: 'sa' }, { zz: 'ss' }]
+                            })
+                        }
+                    ]
+                },
+                {
+                    label: 'Recent Searches',
+                    name: 'recent',
+                    queries: [
+                        {
+                            name: 'Query 4',
+                            query: ''
+                        },
+                        {
+                            name: 'Query 5',
+                            query: ''
+                        },
+                        {
+                            name: 'Query 6',
+                            query: ''
+                        }
+                    ]
+                },
+                {
+                    label: 'Suggested Searches',
+                    name: 'suggested',
+                    queries: [
+                        {
+                            name: 'Query 7',
+                            query: ''
+                        },
+                        {
+                            name: 'Query 8',
+                            query: ''
+                        },
+                        {
+                            name: 'Query 9',
+                            query: ''
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+
+    mounted() {},
+    methods: {
+        handleSearchQuery({ query }: { query: string }) {
+            this.isLoading = true
+            console.log(`Searching for: ${query}...`)
+            const search = setTimeout(() => {
+                console.log(`Results: ${query}`)
+                this.isLoading = false
+            }, 2000)
+        },
+
+        updateStatusType(e: Event) {
+            const newType = (e.target as HTMLInputElement).value
+            this.status = {
+                type: newType,
+                message: this.status.message
+            }
+        },
+        updateStatusMessage(e: Event) {
+            const newMessage = (e.target as HTMLInputElement).value
+            this.status = {
+                type: this.status.type,
+                message: newMessage
+            }
+        },
+
+        handleSaveQuery(query: Query) {
+            const saveQueryIndex = this.filters[0].queries.findIndex(
+                (q: Query) => q.name === query.name || q.query === query.query
+            )
+            if (saveQueryIndex !== -1) {
+                this.filters[0].queries[saveQueryIndex] = query
+            } else {
+                this.filters[0].queries.push(query)
+            }
+        },
+
+        handleRemoveQuery(query: Query) {
+            this.filters[0].queries = this.filters[0].queries.filter(
+                (q: Query) => q.name !== query.name
+            )
+        }
+    }
+})
+</script>
+
+<style scoped>
+.prop {
+    font-size: 12px;
+    width: 80px;
+    margin: 30px 0px;
+}
+.props {
+    display: flex;
+}
+</style>