@dataloop-ai/components 0.18.0 → 0.18.2

package/src/demos/DlDialogBoxDemo.vue

@@ -60,56 +60,6 @@
                     Erat ac duis sed ullamcorper sagittis, sed. Tempus ac
                     pellentesque dignissim lobortis.
                 </p>
-
-                <dl-dialog-box ref="modalTwo">
-                    <template #header>
-                        <dl-dialog-box-header
-                            has-back-button
-                            title="Dialog Box Title"
-                            subtitle="updated by rotemshaham@dataloop.ai"
-                            @on-close="closeSecondModal"
-                        />
-                    </template>
-                    <template #body>
-                        <p
-                            style="
-                                margin: 0;
-                                color: var(--dl-color-medium);
-                                font-size: 10px;
-                            "
-                        >
-                            Updated by rotemshaham@dataloop.ai
-                        </p>
-                        <p
-                            style="
-                                margin: 0;
-                                color: var(--dl-color-medium);
-                                font-size: 10px;
-                                margin-bottom: 20px;
-                            "
-                        >
-                            Dec 1, 2020, 12:21pm
-                        </p>
-                        <p
-                            style="
-                                margin: 0;
-                                color: var(--dl-color-darker);
-                                font-size: 12px;
-                            "
-                        >
-                            Lorem ipsum dolor sit amet, consectetur adipiscing
-                            elit. Erat ac duis sed ullamcorper sagittis, sed.
-                            Tempus ac pellentesque dignissim lobortis.
-                        </p>
-                    </template>
-                    <template #footer>
-                        <dl-dialog-box-footer>
-                            <dl-button @click="closeSecondModal">
-                                Close
-                            </dl-button>
-                        </dl-dialog-box-footer>
-                    </template>
-                </dl-dialog-box>
             </template>
             <template #footer>
                 <dl-dialog-box-footer>
@@ -117,7 +67,7 @@
                         outlined
                         @click="openSecondModal"
                     >
-                        Open second modal
+                        Open empty modal
                     </dl-button>
                     <dl-button @click="closeModal">
                         Close
@@ -125,6 +75,61 @@
                 </dl-dialog-box-footer>
             </template>
         </dl-dialog-box>
+
+        <dl-dialog-box
+            ref="modalTwo"
+            is-empty
+            :empty-state-props="{
+                responsive: true,
+                bgSize: '100px',
+                bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                title: 'Lorem ipsum',
+                subtitle:
+                    'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                info: 'To learn more about this analytics, read our documentation.'
+            }"
+        >
+            <template #header>
+                <dl-dialog-box-header
+                    has-back-button
+                    title="Dialog Box Title"
+                    subtitle="updated by rotemshaham@dataloop.ai"
+                    @on-close="closeSecondModal"
+                />
+            </template>
+
+            <template #links="">
+                <div style="display: flex; gap: 15px; flex-wrap: wrap">
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
+                    />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
+                    />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
+                    />
+                </div>
+            </template>
+
+            <template #footer>
+                <dl-dialog-box-footer>
+                    <dl-button @click="closeSecondModal">
+                        Close
+                    </dl-button>
+                </dl-dialog-box-footer>
+            </template>
+        </dl-dialog-box>
     </div>
 </template>
 

package/src/demos/DlDropdownButtonDemo.vue

@@ -6,19 +6,17 @@
                 auto-close
                 outlined
                 split
-                label="Dropdown Button Outlined"
+                :label="outlinedLabel"
+                @handleSelectedItem="handleOutlinedSelect"
             >
                 <dl-list>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
+                    <dl-list-item
+                        v-for="val in ['Photos', 'Videos', 'Articles']"
+                        :key="val"
+                        clickable
+                        @click="handleOutlinedSelect(val)"
+                    >
+                        <dl-item-section> {{ val }} </dl-item-section>
                     </dl-list-item>
                 </dl-list>
             </dl-dropdown-button>
@@ -47,19 +45,17 @@
 
             <dl-dropdown-button
                 split
-                label="Dropdown Button Contained"
+                :label="containedLabel"
+                auto-close
             >
                 <dl-list>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
+                    <dl-list-item
+                        v-for="val in ['Photos', 'Videos', 'Articles']"
+                        :key="val"
+                        clickable
+                        @click="handleContainedSelect(val)"
+                    >
+                        <dl-item-section> {{ val }} </dl-item-section>
                     </dl-list-item>
                 </dl-list>
             </dl-dropdown-button>
@@ -109,7 +105,7 @@
                 <dl-dropdown-button
                     auto-close
                     outlined
-                    label="Dropdown Button Outlined"
+                    :label="outlinedLabel"
                 >
                     <dl-list>
                         <dl-list-item clickable>
@@ -149,7 +145,7 @@
 
                 <dl-dropdown-button
                     auto-close
-                    label="Dropdown Button Contained"
+                    :label="containedLabel"
                     max-height="210px"
                 >
                     <dl-list>
@@ -260,7 +256,7 @@
                             <dl-item-section :no-wrap="true">
                                 <dl-ellipsis
                                     text="Very very very very long long long long text text text"
-                                    :middle-ellipsis="true"
+                                    split
                                 />
                             </dl-item-section>
                         </dl-list-item>
@@ -302,7 +298,7 @@
                             v-for="(item, index) in listItems"
                             :key="index"
                             clickable
-                            :is-highlighted="index === highlightedIndex"
+                            :highlighted="index === highlightedIndex"
                         >
                             <dl-item-section>
                                 {{ item }}
@@ -339,6 +335,8 @@ export default defineComponent({
         const name = ref('Dropdown Button Controlled')
         const showing = ref(false)
         const arrowNavigationLabel = ref('Arrow Navigation Label')
+        const outlinedLabel = ref('Outlined Label')
+        const containedLabel = ref('Contained Label')
 
         const listItems = ref([
             'New tab',
@@ -354,6 +352,12 @@ export default defineComponent({
             arrowNavigationLabel.value = value
             showing.value = false
         }
+        const handleOutlinedSelect = (value: string) =>
+            (outlinedLabel.value = value)
+
+        const handleContainedSelect = (value: string) =>
+            (containedLabel.value = value)
+
         const onClose = (newName: string) => {
             name.value = newName
             showing.value = false
@@ -378,8 +382,12 @@ export default defineComponent({
             showing,
             setHighlightedIndex,
             handleSelectedItem,
+            handleOutlinedSelect,
+            handleContainedSelect,
             highlightedIndex,
-            arrowNavigationLabel
+            arrowNavigationLabel,
+            outlinedLabel,
+            containedLabel
         }
     }
 })

package/src/demos/DlEmptyStateDemo.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <dl-empty-state
+            :bg-image="`url('./src/demo/assets/agenda.svg')`"
+            style="min-width: 400px; min-height: 300px"
+            title="This analytics will populate with data when relevant information will be available."
+            subtitle="This analytics will populate with data when relevant information will be available."
+            info="To learn more about this analytics, read our documentation."
+        />
+
+        <dl-empty-state
+            icon-color="dl-color-negative"
+            icon-size="100px"
+            :bg-image="`url('./src/demo/assets/agenda.svg')`"
+            style="min-width: 400px; min-height: 300px; max-width: 400px"
+            subtitle="This analytics will populate with data when relevant information will be available."
+            info="To learn more about this analytics, read our documentation"
+        >
+            <template #cta="">
+                <div style="display: flex; gap: 15px">
+                    <dl-button label="Create Pipeline" />
+                    <dl-button
+                        outlined
+                        label="Create With Template"
+                    />
+                </div>
+            </template>
+
+            <template #links="">
+                <div style="display: flex; gap: 15px">
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
+                    />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
+                    />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
+                    />
+                </div>
+            </template>
+        </dl-empty-state>
+
+        <dl-empty-state
+            :bg-image="`url(./src/demos/assets/agenda.svg)`"
+            style="width: 400px; min-height: 300px; resize: both"
+            title="This analytics will populate with data when relevant information will be available."
+            subtitle="This analytics will populate with data when relevant information will be available."
+            info="To learn more about this analytics, read our documentation."
+            title-class="dl-eta-title"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlEmptyState, DlButton } from '../components/basic'
+export default defineComponent({
+    name: 'DlEmptyStateDemo',
+    components: {
+        DlEmptyState,
+        DlButton
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-eta-title {
+    font-size: 10vw;
+}
+</style>

package/src/demos/DlGridDemo.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="container">
+        <dl-grid>
+            <img
+                v-for="(a, index) in 10"
+                :key="index"
+                class="grid-image"
+                :src="getRandomImg()"
+            >
+        </dl-grid>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlGrid } from '../components/'
+
+const getRandomImg = () => {
+    const random = Math.floor(Math.random() * 3) + 1
+    const link = `https://picsum.photos/${random * 100}/${
+        random * 100
+    }?random=${random}`
+    return link
+}
+export default defineComponent({
+    components: {
+        DlGrid
+    },
+    setup() {
+        return { getRandomImg }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.grid-image {
+    border: 2px solid var(--dl-color-darker);
+    margin: 5px;
+}
+</style>

package/src/demos/DlInputDemo.vue

@@ -2,9 +2,10 @@
     <div>
         <dl-input
             v-model="textInputValue"
-            style="width: 220px"
+            style="width: 920px"
             placeholder="Select option"
             size="l"
+            margin="20px"
             title="Input Title"
             required
             tooltip="Quis fugiat et non eu proident sit et amet."
@@ -59,6 +60,17 @@
             info-message="This won't show, error is true"
             optional
         />
+        <dl-input
+            v-model="warningFieldValue"
+            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"
@@ -109,6 +121,14 @@
                 size="m"
             />
         </div>
+
+        <dl-input
+            title="Readonly"
+            style="width: 220px"
+            placeholder="Readonly state"
+            size="m"
+            readonly
+        />
     </div>
 </template>
 <script lang="ts">

package/src/demos/DlJsonEditorDemo.vue

@@ -0,0 +1,59 @@
+<template>
+    <div
+        style="
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        "
+    >
+        <div style="height: 200px; width: 500px">
+            <dl-json-editor v-model="jsonModel" />
+        </div>
+        <span>JSON: {{ jsonModel }}</span>
+
+        <dl-button @click="dialogState = !dialogState">
+            JsonEditor
+        </dl-button>
+        <dl-dialog-box
+            v-model="dialogState"
+            volatile
+            :width="700"
+        >
+            <template #header>
+                <dl-dialog-box-header
+                    title="JsonEditor"
+                    @onClose="dialogState = false"
+                />
+            </template>
+            <template #body>
+                <div style="height: 350px">
+                    <dl-json-editor v-model="dialogJsonModel" />
+                </div>
+            </template>
+        </dl-dialog-box>
+        <span>Dialog JSON: {{ dialogJsonModel }}</span>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import {
+    DlJsonEditor,
+    DlDialogBox,
+    DlDialogBoxHeader,
+    DlButton
+} from '../components'
+export default defineComponent({
+    components: { DlJsonEditor, DlDialogBox, DlDialogBoxHeader, DlButton },
+    setup() {
+        const jsonModel = ref('')
+        const dialogJsonModel = ref('')
+        const dialogState = ref(false)
+        return {
+            jsonModel,
+            dialogState,
+            dialogJsonModel
+        }
+    }
+})
+</script>

package/src/demos/DlLabelDemo.vue

@@ -0,0 +1,208 @@
+<template>
+    <div>
+        <div class="dl-text-holder-demo">
+            Label with actions
+            <dl-label
+                label-color="dl-color-secondary"
+                text="dl-labelaaaaaaaaaaaaaa"
+            >
+                <template #actions>
+                    <div
+                        style="
+                            display: flex;
+                            gap: 5px;
+                            align-items: center;
+                            height: 100%;
+                            margin-right: 5px;
+                        "
+                    >
+                        <dl-icon icon="icon-dl-add" />
+                        <dl-icon icon="icon-dl-delete" />
+                    </div>
+                </template>
+            </dl-label>
+        </div>
+        <div class="dl-text-holder-demo">
+            Label with hint
+            <dl-label
+                label-color="dl-color-secondary"
+                hint="tooltip"
+                text="dl-labelaaaaaaaaaaaaaa"
+            />
+        </div>
+        <div class="dl-text-holder-demo">
+            Label with and actions
+            <dl-label
+                label-color="dl-color-secondary"
+                hint="tooltip"
+                text="dl-labelaaaaaaaaaaaaaa"
+            >
+                <template #actions>
+                    <div
+                        style="
+                            display: flex;
+                            gap: 5px;
+                            align-items: center;
+                            height: 100%;
+                            margin-right: 5px;
+                        "
+                    >
+                        <dl-icon icon="icon-dl-add" />
+                        <dl-icon icon="icon-dl-delete" />
+                    </div>
+                </template>
+            </dl-label>
+        </div>
+        <div class="dl-text-holder-demo">
+            Label with prefix
+            <dl-label
+                label-color="dl-color-secondary"
+                hint="tooltip"
+                text="dl-labelaaaaaaaaaaaaaa"
+                prefix="%"
+            >
+                <template #actions>
+                    <div
+                        style="
+                            display: flex;
+                            gap: 5px;
+                            align-items: center;
+                            height: 100%;
+                            margin-right: 5px;
+                        "
+                    >
+                        <dl-icon icon="icon-dl-add" />
+                        <dl-icon icon="icon-dl-delete" />
+                    </div>
+                </template>
+            </dl-label>
+        </div>
+        <div class="dl-text-holder-demo">
+            Label with suffix
+            <dl-label
+                label-color="dl-color-secondary"
+                hint="tooltip"
+                text="dl-labelaaaaaaaaaaaaaa"
+                suffix=".mp3"
+            >
+                <template #actions>
+                    <div
+                        style="
+                            display: flex;
+                            gap: 5px;
+                            align-items: center;
+                            height: 100%;
+                            margin-right: 5px;
+                        "
+                    >
+                        <dl-icon icon="icon-dl-add" />
+                        <dl-icon icon="icon-dl-delete" />
+                    </div>
+                </template>
+            </dl-label>
+        </div>
+        <div
+            class="dl-text-holder-demo"
+            style="width: 500px"
+        >
+            Label with suffix in a large container
+            <dl-label
+                label-color="dl-color-secondary"
+                hint="tooltip"
+                text="dl-labelaaaaaaaaaaaaaa"
+                suffix=".mp3"
+            >
+                <template #actions>
+                    <div
+                        style="
+                            display: flex;
+                            gap: 5px;
+                            align-items: center;
+                            height: 100%;
+                            margin-right: 5px;
+                        "
+                    >
+                        <dl-icon icon="icon-dl-add" />
+                        <dl-icon icon="icon-dl-delete" />
+                    </div>
+                </template>
+            </dl-label>
+        </div>
+        <div
+            class="dl-text-holder-demo"
+            style="width: 500px"
+        >
+            Label with suffix in a large container and fluid
+            <dl-label
+                label-color="dl-color-secondary"
+                hint="tooltip"
+                text="dl-labelaaaaaaaaaaaaaa"
+                suffix=".mp3"
+                fluid
+            >
+                <template #actions>
+                    <div
+                        style="
+                            display: flex;
+                            gap: 5px;
+                            align-items: center;
+                            height: 100%;
+                            margin-right: 5px;
+                        "
+                    >
+                        <dl-icon icon="icon-dl-add" />
+                        <dl-icon icon="icon-dl-delete" />
+                    </div>
+                </template>
+            </dl-label>
+        </div>
+        <div class="dl-text-holder-demo">
+            Label with suffix and fluid
+            <dl-label
+                label-color="dl-color-secondary"
+                hint="tooltip"
+                text="dl-labelaaaaaaaaaaaaaa"
+                suffix=".mp3"
+                fluid
+            >
+                <template #actions>
+                    <div
+                        style="
+                            display: flex;
+                            gap: 5px;
+                            align-items: center;
+                            height: 100%;
+                            margin-right: 5px;
+                        "
+                    >
+                        <dl-icon icon="icon-dl-add" />
+                        <dl-icon icon="icon-dl-delete" />
+                    </div>
+                </template>
+            </dl-label>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlLabel, DlIcon } from '../components'
+
+export default defineComponent({
+    components: {
+        DlLabel,
+        DlIcon
+    }
+})
+</script>
+
+<style scoped>
+.dl-text-holder-demo {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    width: 200px;
+    padding: 5px;
+    word-wrap: break-word;
+}
+</style>