@dataloop-ai/components 0.18.145 → 0.19.0

package/src/demos/DlAccordionDemo.vue

@@ -90,6 +90,38 @@
                 is-empty
             />
         </div>
+        <div style="width: 100%">
+            <dl-accordion default-opened>
+                <template #header>
+                    Custom header content
+                    <dl-switch
+                        v-model="switchModel"
+                        :value="2"
+                    />
+                </template>
+
+                <dl-accordion default-opened>
+                    <template #header>
+                        Custom header content
+                        <dl-switch
+                            v-model="switchModel"
+                            :value="2"
+                        />
+                    </template>
+                    <template #default>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore
+                        magna aliqua. Ut enim ad minim veniam, quis nostrud
+                        exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in
+                        reprehenderit in voluptate velit esse cillum dolore eu
+                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+                        non proident, sunt in culpa qui officia deserunt mollit
+                        anim id est laborum.
+                    </template>
+                </dl-accordion>
+            </dl-accordion>
+        </div>
     </div>
 </template>
 

package/src/demos/DlButtonDemo.vue

@@ -332,6 +332,13 @@
                 filled
             />
         </div>
+        <div style="display: flex; flex-direction: column">
+            <h3>button with tooltip</h3>
+            <dl-button
+                label="test me"
+                tooltip="test me please"
+            />
+        </div>
     </div>
 </template>
 

package/src/demos/DlDemoPage.vue

@@ -41,6 +41,7 @@
             <div class="sidebar">
                 <dl-search
                     v-model="filterTerm"
+                    placeholder="Search by component name"
                     style="margin-bottom: 5px"
                 />
 

package/src/demos/DlInputDemo.vue

@@ -1,45 +1,78 @@
 <template>
     <div>
+        <dl-input
+            placeholder="placeholder input readonly"
+            readonly
+        />
+
         <dl-input
             v-model="textInputValue"
+            max-width="100%"
             style="width: 920px"
-            placeholder="Select option"
+            title="Input with full width"
+            placeholder="and suggestions"
             size="l"
             margin="20px"
-            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'
+                {
+                    suggestion: 'clickable',
+                    image: 'https://picsum.photos/100/100',
+                    click: true
+                },
+                {
+                    suggestion: '@suggestion',
+                    image: 'https://picsum.photos/100/100',
+                    click: true
+                },
+                {
+                    suggestion: '@john-doe',
+                    image: 'https://picsum.photos/100/100',
+                    click: true
+                },
+                {
+                    suggestion: 'unclickable',
+                    image: 'https://picsum.photos/100/100'
+                }
             ]"
             show-counter
             :max-length="20"
+            @suggestion-click="log"
         />
         <dl-input
             v-model="saveInputValue"
             style="width: 220px"
-            placeholder="Input with icon"
+            title="Expandable input"
+            placeholder="with file upload"
             size="l"
-            has-append
+            :files="files"
+            expandable
+            @file-update="updateFiles"
         >
             <template #append>
-                <dl-icon
-                    icon="icon-dl-save"
-                    size="12px"
-                />
+                <label for="file-upload">
+                    <dl-icon
+                        :inline="false"
+                        class="attach-icon"
+                        icon="icon-dl-attach"
+                    />
+                </label>
+                <input
+                    id="file-upload"
+                    style="display: none"
+                    type="file"
+                    @change="addFile"
+                >
             </template>
         </dl-input>
         <dl-input
             v-model="passFieldValue"
             title="Password"
             style="width: 220px"
-            placeholder="Select option"
+            placeholder="Input type password"
             size="m"
             type="password"
             error
@@ -48,66 +81,35 @@
         />
         <dl-input
             v-model="warningFieldValue"
-            title="Warning Example"
+            title="Fixed Height Example"
             style="width: 220px"
-            placeholder="Select option"
+            placeholder="Fixed height"
+            height="100px"
             size="m"
-            warning
-            warning-message="Something isn't right."
-            info-message="This won't show, error is true"
+            info-message="This input has fixed height"
             optional
+            expandable
         />
 
-        <p>size S with long text</p>
+        <span>size S with long text (no max width)</span>
         <dl-input
-            v-model="warningFieldValue"
+            v-model="sizeSFieldValue"
             title="Warning Example"
-            style="width: 220px"
-            placeholder="Select option"
             size="s"
             warning
             warning-message="Something isn't right."
             info-message="This won't show, error is true"
             optional
         />
-        <dl-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-input
-            style="width: 220px"
-            placeholder="Select option"
-            title="Min"
-            required
-            size="s"
-            error
-            error-message="Error message is the strongest."
-        />
-        <dl-input
-            style="width: 440px"
-            placeholder="Select option"
-            title="Min"
-            size="s"
-            error
-            error-message="Error message is the strongest."
-        />
         <p>input in a row with button</p>
         <div
             class="row"
             style="align-items: center"
         >
             <dl-input
+                max-width="220px"
                 class="input-parts"
                 style="width: 440px"
-                placeholder="Select option"
                 title="Min"
                 dense
                 size="s"
@@ -119,20 +121,37 @@
                 size="m"
             />
         </div>
+        <div
+            class="row"
+            style="align-items: center"
+        >
+            <dl-input
+                max-width="220px"
+                class="input-parts"
+                style="width: 440px"
+                title="Min expandable"
+                dense
+                expandable
+                size="s"
+            />
+            <dl-button
+                dense
+                flat
+                icon="icon-dl-add"
+                size="m"
+            />
+        </div>
         <dl-input
+            :model-value="'Readonly text'"
             title="Readonly"
             style="width: 220px"
-            placeholder="Readonly state"
             size="m"
             readonly
         />
 
         <p>input in a limited size and action slot size m</p>
-        <div style="align-items: center; width: 250px; overflow: hidden">
-            <dl-input
-                class="input-parts"
-                placeholder="Select option"
-            >
+        <div style="align-items: center; width: 250px; overflow: scroll">
+            <dl-input class="input-parts">
                 <template #action>
                     <dl-button
                         dense
@@ -183,30 +202,69 @@
     </div>
 </template>
 <script lang="ts">
+import { v4 } from 'uuid'
 import { defineComponent, ref } from 'vue-demi'
-import { DlInput, DlIcon, DlButton } from '../components'
+import { DlInput, DlButton, DlIcon } from '../components'
+import { DlInputFile } from '../components/compound/DlInput/types'
 export default defineComponent({
     name: 'DlInputDemo',
     components: {
         DlInput,
-        DlIcon,
-        DlButton
+        DlButton,
+        DlIcon
     },
     setup() {
         const textInputValue = ref<string>('')
         const passFieldValue = ref<string>('')
         const warningFieldValue = ref<string>('')
+        const sizeSFieldValue = ref<string>('')
         const errorFieldValue = ref<string>('')
         const saveInputValue = ref<string>('')
 
+        const files = ref<DlInputFile[]>([])
+        const addFile = (e: Event) => {
+            const input = e.target as HTMLInputElement
+            const file = input.files[0]
+            if (file) {
+                const reader = new FileReader()
+
+                reader.onload = (e) => {
+                    const arrayBuffer = e.target.result
+                    files.value.push({
+                        id: v4(),
+                        name: file.name,
+                        image: null,
+                        data: arrayBuffer as ArrayBuffer
+                    })
+                }
+
+                reader.readAsArrayBuffer(file)
+            }
+            input.value = ''
+        }
+        const updateFiles = (val: DlInputFile[]) => {
+            console.log(val)
+            files.value = val
+        }
+
         return {
+            log: console.log,
             textInputValue,
             passFieldValue,
             warningFieldValue,
             errorFieldValue,
-            saveInputValue
+            saveInputValue,
+            sizeSFieldValue,
+            files,
+            updateFiles,
+            addFile
         }
     }
 })
 </script>
-<style></style>
+<style>
+.attach-icon {
+    margin-top: 7px;
+    cursor: pointer;
+}
+</style>

package/src/demos/DlLabelPickerDemo.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div>Label picker component</div>
+        <DlLabelPicker :items="items" />
+    </div>
+</template>
+
+<script lang="ts">
+import { DlLabelPicker } from '../components'
+import { defineComponent, ref } from 'vue-demi'
+const rows = [
+    {
+        identifier: 'a',
+        displayLabel: 'Frozen Yogurt',
+        color: '#ff0000',
+        children: [
+            {
+                identifier: 'b',
+                displayLabel: 'hello',
+                color: '#ffff00'
+            }
+        ]
+    },
+    {
+        identifier: 'c',
+        displayLabel: 'test 2',
+        color: '#00ff00',
+        children: []
+    },
+    {
+        identifier: 'd',
+        displayLabel: 'test 3',
+        color: '#ff00ff',
+        children: []
+    }
+]
+export default defineComponent({
+    components: {
+        DlLabelPicker
+    },
+    setup() {
+        const items = ref(rows)
+        return { items }
+    }
+})
+</script>

package/src/demos/DlPopupDemo.vue

@@ -1,14 +1,39 @@
 <template>
     <div>
-        <dl-button label="Open Popup">
+        <dl-button label="Controlled Popup">
             <dl-popup
+                :model-value="showing"
                 class="TestID"
-                :style="{ '--dl-popup-padding': '0px' }"
                 title="Edit Item Description"
                 additional-info="Some additional information"
                 subtitle="Some text for better explanation."
                 with-close-button
                 draggable
+                @update:model-value="handleClose"
+                @close-button-click="handleClear"
+            >
+                <dl-text-area
+                    v-model="text"
+                    :max-length="100"
+                    show-counter
+                    placeholder="Type your text"
+                    width="203px"
+                />
+                <template #footer>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
+        <dl-button label="Open Popup">
+            <dl-popup
+                class="TestID"
+                :style="{ '--dl-popup-padding': '0px' }"
+                title="Edit Item Description"
+                with-close-button
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
                 @close-button-click="handleClear"
             >
                 <dl-text-area
@@ -34,7 +59,6 @@
                 is-empty
                 :empty-state-props="{
                     responsive: true,
-                    style: 'min-height: 200px; max-width: 300px;',
                     bgSize: '130px',
                     bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
                     title: 'Lorem ipsum',
@@ -138,6 +162,68 @@
                 </template>
             </dl-popup>
         </dl-button>
+        <dl-button label="Open Popup with offset">
+            <dl-popup
+                title="Edit Item Description"
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
+                with-close-button
+                :offset="[-50, 50]"
+            >
+                <dl-text-area
+                    v-model="text"
+                    :max-length="100"
+                    show-counter
+                    placeholder="Type your text"
+                    width="203px"
+                />
+                <template #close-button>
+                    <dl-button
+                        flat
+                        style="padding-bottom: 0; padding-top: 0"
+                        label="clear"
+                        size="m"
+                        @click="handleClear"
+                    />
+                </template>
+                <template #footer>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
+        <dl-button label="Open Popup with no padding">
+            <dl-popup
+                title="Edit Item Description"
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
+                with-close-button
+                :style="{ '--dl-popup-padding': '0px' }"
+            >
+                <dl-text-area
+                    v-model="text"
+                    :max-length="100"
+                    show-counter
+                    placeholder="Type your text"
+                    width="203px"
+                />
+                <template #close-button>
+                    <dl-button
+                        flat
+                        style="padding-bottom: 0; padding-top: 0"
+                        label="clear"
+                        size="m"
+                        @click="handleClear"
+                    />
+                </template>
+                <template #footer>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
     </div>
 </template>
 <script lang="ts">
@@ -152,12 +238,16 @@ export default defineComponent({
     },
     data() {
         return {
-            text: ''
+            text: '',
+            showing: false
         }
     },
     methods: {
         handleClear() {
             this.text = ''
+        },
+        handleClose(val: boolean) {
+            this.showing = val
         }
     }
 })

package/src/demos/DlSearchDemo.vue

@@ -8,7 +8,6 @@
             placeholder="Search here"
             :auto-suggest-items="suggestItems"
         />
-
         <dl-search
             v-model="searchValue"
             size="m"