@dataloop-ai/components 0.13.0

package/src/demo/DlPanelContainerDemo.vue

@@ -0,0 +1,221 @@
+<template>
+    <div style="width: 700px">
+        <div class="dl-panel-container-demo">
+            <dl-panel-container
+                v-model="collapseP1"
+                :direction="direction"
+                :resizable="resizable"
+                :collapsable="collapsable"
+                width="500px"
+            >
+                <dl-panel
+                    resizable
+                    collapsable
+                >
+                    <div>
+                        <h3>RESIZABLE & COLLAPSABLE</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing
+                            elit. Excepturi, rerum harum aut sunt recusandae
+                            obcaecati necessitatibus. Alias nulla aliquid,
+                            dolorem qui, nesciunt hic iste ratione voluptates
+                            magni optio quae. Vero!
+                        </p>
+                    </div>
+                </dl-panel>
+                <dl-panel resizable>
+                    <h3>RESIZABLE</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing
+                        elit. Nam ut odit quae minus in enim, recusandae
+                        repellendus a. Tenetur voluptas autem nostrum ullam
+                        nesciunt exercitationem perferendis quibusdam aliquam
+                        expedita quos!
+                    </p>
+                </dl-panel>
+                <dl-panel>
+                    <h3>SIMPLE PANEL</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Natus excepturi aliquam asperiores dignissimos quo
+                        molestiae repellat officiis perferendis eius nihil
+                        possimus cumque similique, ea tempora earum sint
+                        reprehenderit in deleniti.
+                    </p>
+                </dl-panel>
+                <dl-panel collapsable>
+                    <h3>COLLAPSABLE</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Necessitatibus veniam ex nisi, ab temporibus sint
+                        provident quibusdam suscipit vitae? Eligendi recusandae
+                        aperiam asperiores numquam inventore! Possimus
+                        temporibus aliquid explicabo ab?
+                    </p>
+                </dl-panel>
+                <dl-panel>
+                    <h3>LAST PANEL</h3>
+                    <p>
+                        Lorem ipsum dolor, sit amet consectetur adipisicing
+                        elit. Itaque sint commodi aut. Quam asperiores molestias
+                        quas dicta suscipit fuga? Sapiente voluptates optio
+                        aperiam sint quam commodi dolor deleniti ea itaque?
+                    </p>
+                </dl-panel>
+            </dl-panel-container>
+            <dl-panel-container
+                v-model="collapseP2"
+                :direction="direction"
+                :resizable="resizable"
+                :collapsable="collapsable"
+                width="200px"
+            >
+                <template #header>
+                    <h2>Header</h2>
+                </template>
+                <dl-panel
+                    resizable
+                    collapsable
+                    :height="100"
+                >
+                    <div>
+                        <h3>RESIZABLE & COLLAPSABLE</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing
+                            elit. Excepturi, rerum harum aut sunt recusandae
+                            obcaecati necessitatibus. Alias nulla aliquid,
+                            dolorem qui, nesciunt hic iste ratione voluptates
+                            magni optio quae. Vero!
+                        </p>
+                    </div>
+                </dl-panel>
+                <dl-panel
+                    resizable
+                    :collapsable="true"
+                    :height="200"
+                >
+                    <h3>SIMPLE PANEL</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Natus excepturi aliquam asperiores dignissimos quo
+                        molestiae repellat officiis perferendis eius nihil
+                        possimus cumque similique, ea tempora earum sint
+                        reprehenderit in deleniti.
+                    </p>
+                </dl-panel>
+                <dl-panel
+                    resizable
+                    collapsable
+                    :height="100"
+                >
+                    <h3>LAST PANEL</h3>
+                    <p>
+                        Lorem ipsum dolor, sit amet consectetur adipisicing
+                        elit. Itaque sint commodi aut. Quam asperiores molestias
+                        quas dicta suscipit fuga? Sapiente voluptates optio
+                        aperiam sint quam commodi dolor deleniti ea itaque?
+                    </p>
+                </dl-panel>
+                <dl-panel
+                    resizable
+                    collapsable
+                    :height="100"
+                >
+                    <h3>LAST PANEL 2</h3>
+                    <p>
+                        Lorem ipsum dolor, sit amet consectetur adipisicing
+                        elit. Itaque sint commodi aut. Quam asperiores molestias
+                        quas dicta suscipit fuga? Sapiente voluptates optio
+                        aperiam sint quam commodi dolor deleniti ea itaque?
+                    </p>
+                </dl-panel>
+                <dl-panel
+                    resizable
+                    collapsable
+                    :height="100"
+                >
+                    <h3>LAST PANEL 3</h3>
+                    <p>
+                        Lorem ipsum dolor, sit amet consectetur adipisicing
+                        elit. Itaque sint commodi aut. Quam asperiores molestias
+                        quas dicta suscipit fuga? Sapiente voluptates optio
+                        aperiam sint quam commodi dolor deleniti ea itaque?
+                    </p>
+                </dl-panel>
+                <template #footer>
+                    <div>
+                        <h2>Footer</h2>
+                    </div>
+                </template>
+            </dl-panel-container>
+        </div>
+        <div class="controls">
+            <select v-model="direction">
+                <option>left</option>
+                <option>right</option>
+            </select>
+            <button @click="handleCollapseP1">
+                Collapse Panel 1: {{ collapseP1 }}
+            </button>
+            <button @click="handleCollapseP2">
+                Collapse Panel 2: {{ collapseP2 }}
+            </button>
+            <button @click="collapsable = !collapsable">
+                collapsable: {{ collapsable }}
+            </button>
+            <button @click="resizable = !resizable">
+                resizable: {{ resizable }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlPanel, DlPanelContainer } from '../components'
+
+export default defineComponent({
+    name: 'DlPanelContainerDemo',
+    components: {
+        DlPanelContainer,
+        DlPanel
+    },
+    data() {
+        return {
+            direction: 'right',
+            collapseP1: false,
+            collapseP2: false,
+            collapsable: true,
+            resizable: true
+        }
+    },
+    methods: {
+        handleCollapseP1() {
+            this.collapseP1 = !this.collapseP1
+        },
+        handleCollapseP2() {
+            this.collapseP2 = !this.collapseP2
+        }
+    },
+    template: 'dl-panel-container'
+})
+</script>
+
+<style scoped lang="scss">
+.dl-panel-container-demo {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.controls {
+    display: flex;
+    padding: 10px;
+    justify-content: center;
+    padding: 10px;
+
+    > * {
+        margin: 5px;
+    }
+}
+</style>

package/src/demo/DlPopupDemo.vue

@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <dl-button label="Open Popup">
+            <dl-popup
+                title="Edit Item Description"
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
+                with-close-button
+                @hide-button-click="handleClear"
+            >
+                <dl-text-area
+                    v-model="text"
+                    :max-length="100"
+                    show-counter
+                    placeholder="Type your text"
+                    width="203px"
+                />
+                <template #hide-button>
+                    <dl-button
+                        flat
+                        style="padding-bottom: 0; padding-top: 0"
+                        label="clear"
+                        size="m"
+                    />
+                </template>
+                <template #footer>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
+        <div />
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlButton } from '../components/DlButton'
+import DlPopup from '../components/DlPopup'
+import DlTextArea from '../components/DlTextArea.vue'
+export default defineComponent({
+    components: {
+        DlButton,
+        DlPopup,
+        DlTextArea
+    },
+    data() {
+        return {
+            text: ''
+        }
+    },
+    methods: {
+        handleClear() {
+            this.text = ''
+        }
+    }
+})
+</script>

package/src/demo/DlProgressBarDemo.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <dl-progress-bar
+            width="50%"
+            color="dl-color-secondary"
+            indeterminate
+            :value="0.2"
+            label="Progress Bar"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlProgressBar } from '../components'
+export default defineComponent({
+    name: 'DlProgressBarDemo',
+    components: {
+        DlProgressBar
+    }
+})
+</script>

package/src/demo/DlProgressChartDemo.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <dl-progress-chart :options="options" />
+        <dl-progress-chart
+            :options="options"
+            width="400px"
+        />
+        <dl-progress-chart
+            :options="options.slice(3)"
+            width="500px"
+        />
+        <dl-progress-chart
+            :options="options.slice(2)"
+            text-color="blue"
+            counter-color="green"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { DlProgressChart } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlProgressChartDemo',
+    components: {
+        DlProgressChart
+    },
+    data() {
+        return {
+            options: [
+                {
+                    name: 'To Do',
+                    value: 17,
+                    color: 'red',
+                    link: 'https://opentech.dev/'
+                },
+                {
+                    name: 'In Progresss',
+                    value: 25,
+                    color: 'blue',
+                    link: 'https://opentech.dev/'
+                },
+                {
+                    name: 'Lorem ipsum dolor sit',
+                    value: 9,
+                    color: 'brown'
+                },
+                {
+                    name: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. ',
+                    value: 11,
+                    color: 'green'
+                },
+                {
+                    name: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum vero totam fuga sed obcaecati in iusto recusandae adipisci labore minus architecto quod cupiditate repellendus, id, quidem quaerat voluptatibus deleniti. Sequi?',
+                    value: 44,
+                    color: 'purple',
+                    link: 'https://opentech.dev/'
+                },
+
+                {
+                    name: 'Done',
+                    value: 13,
+                    color: 'yellow'
+                }
+            ]
+        }
+    },
+    template: 'dl-progress-chart-demo'
+})
+</script>

package/src/demo/DlRadioDemo.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <dl-radio
+            v-model="checkModel"
+            label="Option 1"
+            :value="1"
+            sub-label="this is a lot of text this is a lot of text this is a lot of text this is a lot of text this is a lot of text this is a lot of text "
+        />
+        <dl-radio
+            v-model="checkModel"
+            label="Option 2"
+            :value="2"
+        />
+        <dl-radio
+            v-model="checkModel"
+            label="Option 3"
+            :value="3"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { DlRadio } from '../components'
+
+export default {
+    components: {
+        DlRadio
+    },
+    data() {
+        return {
+            checkModel: 1
+        }
+    }
+}
+</script>

package/src/demo/DlRangeDemo.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <dl-range
+            v-model="value"
+            width="500px"
+            :min="0"
+            :max="100"
+            :step="5"
+            text="Range"
+            :snap="true"
+            :readonly="readonly"
+            :disabled="disabled"
+            name="range"
+        />
+        <div>
+            <button @click="readonly = !readonly">
+                Readonly: {{ readonly }}
+            </button>
+            <button @click="disabled = !disabled">
+                Disable: {{ disabled }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { DlRange } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlRangeDemo',
+    components: {
+        DlRange
+    },
+    data() {
+        return {
+            value: { min: 0, max: 100 },
+            disabled: false,
+            readonly: false
+        }
+    },
+    template: 'dl-range-demo'
+})
+</script>

package/src/demo/DlSearchDemo.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <dl-search
+            v-model="searchValue"
+            size="l"
+            with-search-btn
+            highlight-matches
+            placeholder="Search here"
+            :auto-suggest-items="['foo', 'bar']"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlSearch } from '../components'
+export default defineComponent({
+    name: 'DlSearchDemo',
+    components: {
+        DlSearch
+    },
+    setup() {
+        const searchValue = ref<string>('')
+        return { searchValue }
+    }
+})
+</script>