@dataloop-ai/components 0.13.0

package/src/demo/DlDateTimeRangeDemo.vue

@@ -0,0 +1,217 @@
+<template>
+    <div class="dl-dtr">
+        <div class="dl-dtr--options">
+            <span class="dl-dtr--options_title">General Configuration</span>
+            <div class="dl-dtr--option">
+                <span class="dl-dtr--option_title">Show time:</span>
+                <dl-switch
+                    v-model="switchState"
+                    value="showTime"
+                    left-label="No"
+                    right-label="Yes"
+                    class="dl-dtr--option_switch"
+                />
+            </div>
+            <div class="dl-dtr--option">
+                <span class="dl-dtr--option_title">Type:</span>
+                <dl-switch
+                    v-model="switchState"
+                    value="type"
+                    left-label="Day"
+                    right-label="Month"
+                    class="dl-dtr--option_switch"
+                />
+            </div>
+            <div class="dl-dtr--option">
+                <span class="dl-dtr--option_title">Mode:</span>
+                <dl-switch
+                    v-model="switchState"
+                    value="mode"
+                    left-label="Single"
+                    right-label="Multi"
+                    class="dl-dtr--option_switch"
+                />
+            </div>
+            <div
+                style="margin-top: 10px"
+                class="dl-dtr--option__range"
+            >
+                <span class="dl-dtr--option_title">Available Range: </span>
+                <dl-switch
+                    v-model="switchState"
+                    value="range"
+                    class="dl-dtr--option_switch"
+                    @input="handleRange"
+                />
+                <span class="dl-dtr--option_title">Auto Close: </span>
+                <dl-switch
+                    v-model="switchState"
+                    value="auto-close"
+                    class="dl-dtr--option_switch"
+                />
+                <br>
+                <span>From</span>
+                <input
+                    type="date"
+                    :disabled="!range"
+                    :value="availableRangeFrom"
+                    class="dl-dtr--range-input"
+                    placeholder="from"
+                    @input="setRangeFrom"
+                >
+                <span style="margin-left: 5px">To</span>
+                <input
+                    :disabled="!range"
+                    type="date"
+                    :value="availableRangeTo"
+                    class="dl-dtr--range-input"
+                    placeholder="to"
+                    @input="setRangeTo"
+                >
+            </div>
+        </div>
+        <div class="dl-dtr--input">
+            <dl-date-time-range
+                :type="type"
+                :available-range="range ? availableRange : null"
+                :mode="mode"
+                :show-time="showTime"
+                :auto-close="autoClose"
+                @set-type="handleSetType"
+                @update:modelValue="handleModelValueUpdate"
+            />
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlSwitch, DlDateTimeRange } from '../components'
+import { DateInterval } from '../components/DlDatePicker/types'
+
+export default defineComponent({
+    components: {
+        DlSwitch,
+        DlDateTimeRange
+    },
+    data(): {
+        switchState: any[]
+        availableRange: Partial<DateInterval>
+    } {
+        const from = new Date()
+        from.setDate(from.getDate() - 35)
+        const to = new Date()
+        to.setDate(to.getDate() + 35)
+
+        return {
+            availableRange: {
+                from,
+                to
+            },
+            switchState: ['range']
+        }
+    },
+    computed: {
+        type(): string {
+            return this.switchState.includes('type') ? 'month' : 'day'
+        },
+        mode(): string {
+            return this.switchState.includes('mode') ? 'multi' : 'single'
+        },
+        showTime(): boolean {
+            return this.switchState.includes('showTime')
+        },
+        range(): boolean {
+            return this.switchState.includes('range')
+        },
+        availableRangeFrom(): string {
+            return this.availableRange?.from?.toISOString().split('T')[0] ?? ''
+        },
+        availableRangeTo(): string {
+            return this.availableRange?.to?.toISOString().split('T')[0] ?? ''
+        },
+        autoClose(): boolean {
+            return this.switchState.includes('auto-close')
+        }
+    },
+    methods: {
+        handleModelValueUpdate(value: DateInterval) {
+            console.log('Date: ', value)
+        },
+        handleSetType(value: string) {
+            if (value === 'day') {
+                const typeIndex = this.switchState.findIndex(
+                    (t) => t === 'type'
+                )
+                if (typeIndex > -1) {
+                    this.switchState.splice(typeIndex, 1)
+                }
+            } else {
+                this.switchState.push('type')
+            }
+        },
+        setRangeFrom({ target }: { target: HTMLInputElement }) {
+            this.availableRange = {
+                from: target.value ? new Date(target.value) : null,
+                to: this.availableRange?.to
+            }
+        },
+        setRangeTo({ target }: { target: HTMLInputElement }) {
+            this.availableRange = {
+                to: target.value ? new Date(target.value) : null,
+                from: this.availableRange?.from
+            }
+        },
+        handleRange({ target }: { target: HTMLInputElement }) {
+            if (!target.checked) this.availableRange = null
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-dtr {
+    display: flex;
+    justify-content: center;
+    padding-top: 30px;
+
+    &--range-input {
+        height: 18px;
+        padding: 5px;
+        color: darkgray;
+        margin-top: 10px;
+        margin-left: 5px;
+    }
+
+    &--options {
+        color: var(--dl-color-darker);
+        display: flex;
+        flex-direction: column;
+        padding: 0 30px 0 0;
+        text-align: left;
+
+        &_title {
+            font-size: 20px;
+        }
+    }
+
+    &--option {
+        padding: 8px;
+
+        &__range {
+            font-size: 12px;
+        }
+    }
+
+    &--option_title {
+        font-size: 14px;
+    }
+
+    &--option_switch {
+        font-size: 12px;
+    }
+
+    &--input {
+        display: flex;
+        justify-content: center;
+    }
+}
+</style>

package/src/demo/DlDialogBoxDemo.vue

@@ -0,0 +1,175 @@
+<template>
+    <div>
+        <button @click="openModal">
+            Open modal
+        </button>
+        <dl-dialog-box
+            ref="modalOne"
+            v-model="isOpenedFirstModal"
+        >
+            <template #header>
+                <dl-dialog-box-header
+                    title="Dialog Box Title"
+                    subtitle="updated by rotemshaham@dataloop.ai"
+                    @on-close="closeModal"
+                />
+            </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>
+
+                <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>
+                    <dl-button @click="openSecondModal">
+                        Open second modal
+                    </dl-button>
+                    <dl-button @click="closeModal">
+                        Close
+                    </dl-button>
+                </dl-dialog-box-footer>
+            </template>
+        </dl-dialog-box>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlDialogBox, DlButton } from '../components'
+import { DlDialogBoxHeader, DlDialogBoxFooter } from '../components/DlDialogBox'
+
+export default defineComponent({
+    name: 'DlDialogBoxDemo',
+    components: {
+        DlButton,
+        DlDialogBox,
+        DlDialogBoxHeader,
+        DlDialogBoxFooter
+    },
+    setup() {
+        const modalOne = ref<any>(null)
+        const modalTwo = ref<any>(null)
+
+        const isOpenedFirstModal = ref(false)
+
+        const openModal = () => {
+            if (!modalOne.value) {
+                return
+            }
+
+            modalOne.value.openModal()
+        }
+
+        const closeModal = () => {
+            if (!modalOne.value) {
+                return
+            }
+
+            modalOne.value.closeModal()
+        }
+
+        const openSecondModal = () => {
+            if (!modalTwo.value) {
+                return
+            }
+
+            modalTwo.value.openModal()
+        }
+
+        const closeSecondModal = () => {
+            if (!modalTwo.value) {
+                return
+            }
+
+            modalTwo.value.closeModal()
+        }
+
+        return {
+            openModal,
+            closeModal,
+            openSecondModal,
+            closeSecondModal,
+            modalOne,
+            modalTwo,
+            isOpenedFirstModal
+        }
+    }
+})
+</script>

package/src/demo/DlDropdownButtonDemo.vue

@@ -0,0 +1,260 @@
+<template>
+    <div>
+        <div style="display: flex; gap: 20px; flex-direction: column">
+            <h2>Splitted</h2>
+            <dl-dropdown-button
+                auto-close
+                outlined
+                split
+                label="Dropdown Button Outlined"
+            >
+                <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>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                disabled
+                auto-close
+                outlined
+                split
+                label="Dropdown Button Outlined"
+            >
+                <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>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                split
+                label="Dropdown Button Contained"
+            >
+                <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>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                v-model="showing"
+                auto-close
+                split
+                :label="name"
+                main-btn-style="width: 120px"
+                @click="onClick"
+            >
+                <dl-list>
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Photos')"
+                    >
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Videos and long text')"
+                    >
+                        <dl-item-section>
+                            Videos and long text
+                        </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Articles')"
+                    >
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+        </div>
+
+        <div style="display: flex; gap: 20px; flex-direction: column">
+            <h2>One Button</h2>
+            <dl-dropdown-button
+                auto-close
+                outlined
+                label="Dropdown Button Outlined"
+            >
+                <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>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                disabled
+                auto-close
+                outlined
+                label="Dropdown Button Outlined"
+            >
+                <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>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                auto-close
+                label="Dropdown Button Contained"
+                max-height="210px"
+            >
+                <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>
+                    <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>
+                    <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>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                auto-close
+                :model-value="showing"
+                :label="name"
+                main-btn-style="width: 150px;"
+                @show="onOpen"
+            >
+                <dl-list>
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Photos')"
+                    >
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Videos and long text')"
+                    >
+                        <dl-item-section>
+                            Videos and long text
+                        </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Articles')"
+                    >
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import {
+    DlListItem,
+    DlItemSection,
+    DlList,
+    DlDropdownButton
+} from '../components'
+
+export default defineComponent({
+    name: 'DlDropdownButtonDemo',
+    components: {
+        DlListItem,
+        DlItemSection,
+        DlList,
+        DlDropdownButton
+    },
+    data() {
+        return {
+            name: 'Dropdown Button Controlled',
+            showing: false
+        }
+    },
+    methods: {
+        onClose(name: string) {
+            this.name = name
+            this.showing = false
+            alert(this.name)
+        },
+        onOpen() {
+            this.showing = true
+        },
+        onClick() {
+            alert(this.name)
+        }
+    }
+})
+</script>

package/src/demo/DlIconDemo.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <DlIcon icon="icon-dl-usage" />
+        <DlIcon
+            color="dl-color-secondary"
+            icon="icon-dl-arrow-up"
+        />
+        <DlIcon
+            size="50px"
+            color="red"
+            icon="icon-dl-search"
+        />
+        SVG ICON:
+
+        <DlIcon
+            size="50px"
+            color="red"
+            icon="mastercard"
+            svg
+        />
+
+        Clickable:
+
+        <DlIcon
+            size="50px"
+            color="red"
+            icon="icon-dl-search"
+            @click.stop="onClick"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlIcon } from '../components'
+export default defineComponent({
+    name: 'DlIconDemo',
+    components: {
+        DlIcon
+    },
+    methods: {
+        onClick() {
+            console.log('clicked')
+        }
+    }
+})
+</script>