@dataloop-ai/components 0.13.0

package/src/components/DlWidget/DlWidget.vue

@@ -0,0 +1,50 @@
+<template>
+    <div
+        :id="uuid"
+        class="dl-widget"
+    >
+        <div class="dl-widget__header">
+            <slot name="header" />
+        </div>
+
+        <div class="dl-widget__content">
+            <slot name="content" />
+        </div>
+
+        <div class="dl-widget__description">
+            <slot name="description" />
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+export default defineComponent({
+    name: 'DlWidget',
+    data() {
+        return {
+            uuid: `dl-widget-${v4()}`
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.dl-widget {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    &__header {
+        padding: 10px;
+        border-bottom: 1px solid var(--dl-color-separator);
+    }
+    &__content {
+        padding: 5px;
+    }
+    &__description {
+        margin-top: auto;
+        padding: 5px;
+        font-size: 10px;
+    }
+}
+</style>

package/src/components/DlWidget/DlWidgetGrid.vue

@@ -0,0 +1,360 @@
+<template>
+    <div
+        :id="uuid"
+        class="dl-widget-grid"
+        :style="gridStyle"
+    >
+        <div
+            v-for="(row, rowIndex) in modelValue"
+            :key="row"
+            class="dl-widget-grid__row"
+            :style="rowStyle"
+            @mouseenter="currentRow = rowIndex"
+        >
+            <div
+                v-for="(widget, widgetIndex) in row"
+                :id="`${rowIndex}-${widgetIndex}`"
+                :key="widget"
+                :class="gridItemClasses"
+                :style="`flex-basis: ${100 / row.length}%`"
+                @mouseenter="
+                    (e) => {
+                        handleMouseEnter(e)
+                        currentItem = widgetIndex
+                    }
+                "
+            >
+                <dl-widget>
+                    <template #header>
+                        <div class="dl-widget-grid__item--header">
+                            <div class="dl-widget-grid__item--titles">
+                                <dl-typography size="h2">
+                                    {{ widget.title }}
+                                </dl-typography>
+                                <dl-typography size="h4">
+                                    {{ widget.subTitle }}
+                                </dl-typography>
+                            </div>
+                            <dl-icon
+                                class="dl-widget-grid__item--drag-icon"
+                                icon="icon-dl-drag"
+                                color="dl-color-medium"
+                                size="15px"
+                                @mousedown="
+                                    startDragging(
+                                        `${rowIndex}-${widgetIndex}`,
+                                        widget
+                                    )
+                                "
+                            />
+                            <div class="dl-widget-grid__item--menu">
+                                <slot name="menu" />
+                                <dl-icon
+                                    v-if="isEditable"
+                                    class="dl-widget-grid__item--delete-icon"
+                                    icon="icon-dl-delete"
+                                    color="dl-color-negative"
+                                    size="20px"
+                                    @mousedown="
+                                        removeWidget(
+                                            `${rowIndex}-${widgetIndex}`
+                                        )
+                                    "
+                                />
+                            </div>
+                        </div>
+                    </template>
+                    <template #content>
+                        <div class="dl-widget-grid__item--content">
+                            <component
+                                :is="widget.content"
+                                v-if="typeof widget.content === 'object'"
+                            />
+                            <div v-else>
+                                {{ widget.content }}
+                            </div>
+                        </div>
+                    </template>
+                    <template #description>
+                        {{ widget.description }}
+                    </template>
+                </dl-widget>
+            </div>
+        </div>
+
+        <div
+            ref="clone"
+            :class="cloneClasses"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { Widget } from './types'
+import cloneDeep from 'lodash/cloneDeep'
+import { equateElements, getTargetWidget, getIndex } from './utils'
+import DlWidget from './DlWidget.vue'
+import DlIcon from '../DlIcon.vue'
+import DlTypography from '../DlTypography.vue'
+import { v4 } from 'uuid'
+
+interface DragSide {
+    previous: boolean
+    current: boolean
+}
+
+export default defineComponent({
+    components: {
+        DlWidget,
+        DlIcon,
+        DlTypography
+    },
+    props: {
+        modelValue: {
+            type: Array as PropType<Widget[][]>,
+            default: () => [] as Widget[]
+        },
+        isEditable: { type: Boolean, default: false },
+        rowGap: { type: String, default: '30px' },
+        columnGap: { type: String, default: '30px' },
+        widgetLibrary: { type: Array, default: () => [] as Widget[] }
+    },
+    emits: ['update:model-value', 'remove'],
+    data(): {
+        uuid: string
+        timer: number
+        isDragging: boolean
+        dragTarget: HTMLElement
+        currentRow: number
+        currentItem: number
+        draggedWidget: Widget
+        draggedWidgetId: string
+        dragSide: DragSide
+    } {
+        return {
+            uuid: `dl-widget-grid-${v4()}`,
+            timer: null,
+            isDragging: false,
+            dragTarget: null,
+            currentRow: -1,
+            currentItem: -1,
+            draggedWidget: null,
+            draggedWidgetId: null,
+            dragSide: { previous: null, current: null }
+        }
+    },
+    computed: {
+        gridStyle(): Record<string, any> {
+            return { gap: this.rowGap }
+        },
+        rowStyle(): Record<string, any> {
+            return { gap: this.columnGap }
+        },
+        cloneClasses(): string {
+            return `dl-widget-grid__clone ${
+                this.isDragging ? 'dl-widget-grid__clone--dragging' : ''
+            }`
+        },
+        gridItemClasses(): string {
+            return `dl-widget-grid__item ${
+                this.isDragging ? 'dl-widget-grid__item--dragging' : ''
+            }`
+        }
+    },
+    mounted() {
+        window.addEventListener('mouseup', (e) => this.stopDragging(e))
+    },
+    methods: {
+        startDragging(widgetIndex: string, widget: Widget) {
+            window.addEventListener('mousemove', (e) => this.moveWidget(e))
+            this.isDragging = true
+            const draggedWidget = document.getElementById(widgetIndex)
+            draggedWidget.style.visibility = 'hidden'
+            this.draggedWidgetId = draggedWidget.id
+            this.draggedWidget = widget
+            equateElements(draggedWidget, this.$refs.clone as HTMLElement)
+        },
+        stopDragging(e: MouseEvent) {
+            if (!this.isDragging) return
+            this.isDragging = false
+            const targetId = getTargetWidget(e.target as HTMLElement)?.id
+            let newWidgets: Widget[][]
+            if (targetId && this.draggedWidgetId) {
+                newWidgets = cloneDeep(this.modelValue) as Widget[][]
+                const targetIndex = getIndex(targetId)
+                const sourceIndex = getIndex(this.draggedWidgetId)
+                const temp = newWidgets[targetIndex.row][targetIndex.column]
+                newWidgets[targetIndex.row][targetIndex.column] =
+                    this.modelValue[sourceIndex.row][sourceIndex.column]
+                newWidgets[sourceIndex.row][sourceIndex.column] = temp
+
+                this.$emit('update:model-value', newWidgets)
+            }
+
+            if (this.$refs.clone) {
+                (this.$refs.clone as HTMLElement).innerHTML = ''
+            }
+
+            const activeWidget = document.getElementById(this.draggedWidgetId)
+            if (activeWidget) {
+                activeWidget.style.visibility = 'visible'
+            }
+            this.draggedWidgetId = null
+            window.removeEventListener('mousemove', this.stopDragging)
+            window.removeEventListener('mousemove', this.handleMouseMove)
+        },
+        moveWidget(e: MouseEvent) {
+            const clone = this.$refs.clone as HTMLElement
+            clone.style.left = `${e.pageX - clone.offsetWidth / 2 - 5}px`
+            clone.style.top = `${e.pageY + 10}px`
+        },
+        removeWidget(widgetId: string) {
+            this.$emit(
+                'update:model-value',
+                this.modelValue.map((row: Widget[], rowIndex: number) =>
+                    row.filter((widget: Widget, widgetIndex: number) => {
+                        if (`${rowIndex}-${widgetIndex}` !== widgetId)
+                            return widget
+                        else this.$emit('remove', widget)
+                    })
+                )
+            )
+        },
+        handleMouseEnter(e: Event) {
+            this.dragTarget = e.target as HTMLElement
+            this.dragSide.previous =
+                (e as MouseEvent).x - this.dragTarget.offsetLeft <
+                this.dragTarget.offsetWidth / 2
+            if (
+                !this.isDragging ||
+                !(this.modelValue[this.currentRow].length < 3)
+            )
+                return
+
+            e.target.addEventListener('mousemove', this.handleMouseMove)
+            e.target.addEventListener('mouseleave', (e: Event) => {
+                clearTimeout(this.timer)
+                e.target.removeEventListener('mousemove', this.handleMouseMove)
+            })
+
+            this.timer = window.setTimeout(() => {
+                this.rearrangeWidgets()
+            }, 700)
+        },
+        handleMouseMove(e: Event) {
+            this.dragSide.current =
+                (e as MouseEvent).x - this.dragTarget.offsetLeft <
+                this.dragTarget.offsetWidth / 2
+            if (this.dragSide.current !== this.dragSide.previous) {
+                clearTimeout(this.timer)
+                this.handleMouseEnter(e)
+            }
+        },
+        rearrangeWidgets() {
+            if (
+                !this.draggedWidgetId ||
+                Number(this.draggedWidgetId[0]) == this.currentRow
+            )
+                return
+            const newTargetRow = this.modelValue[this.currentRow]
+            const newSourceRow =
+                this.modelValue[Number(this.draggedWidgetId[0])]
+            newTargetRow.splice(
+                this.dragSide.previous
+                    ? this.currentItem
+                    : this.currentItem + 1,
+                0,
+                this.draggedWidget
+            )
+            newSourceRow.splice(Number(this.draggedWidgetId[2]), 1)
+            const newWidgets = this.modelValue
+            newWidgets[this.currentRow] = newTargetRow
+            newWidgets[Number(this.draggedWidgetId[0])] = newSourceRow
+            this.isDragging = false
+            ;(this.$refs.clone as HTMLElement).innerHTML = ''
+            this.$emit('update:model-value', newWidgets)
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.dl-widget-grid {
+    display: flex;
+    flex-direction: column;
+
+    &__row {
+        display: flex;
+    }
+
+    &__clone {
+        position: absolute;
+        background-color: var(--dl-color-shadow);
+        outline: 1px solid var(--dl-color-separator);
+        visibility: hidden;
+        padding: 10px;
+        border-radius: 2px;
+
+        &--dragging {
+            visibility: visible;
+        }
+    }
+
+    &__item {
+        transition: 0.05s;
+        user-select: none;
+        outline: 1px solid var(--dl-color-separator);
+        border-radius: 2px;
+
+        &--dragging {
+            &:hover {
+                background-color: var(--dl-color-fill);
+            }
+        }
+
+        &--header {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        &--titles {
+            display: flex;
+            flex-direction: column;
+            width: 45%;
+        }
+
+        &--menu {
+            width: 50%;
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        &--drag-icon {
+            transform: rotate(90deg);
+            margin-top: -30px;
+            cursor: grab;
+        }
+
+        &--delete-icon {
+            cursor: pointer;
+        }
+
+        &--content {
+            width: 100%;
+            margin-bottom: 20px;
+            margin-top: 20px;
+            color: var(--dl-color-darker);
+        }
+
+        &--footer {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            margin-top: auto;
+        }
+    }
+}
+</style>

package/src/components/DlWidget/index.ts

@@ -0,0 +1,4 @@
+import DlWidget from './DlWidget.vue'
+import DlWidgetGrid from './DlWidgetGrid.vue'
+
+export { DlWidget, DlWidgetGrid }

package/src/components/DlWidget/types.ts

@@ -0,0 +1,6 @@
+export interface Widget {
+    title: string
+    subTitle?: string
+    description?: string
+    content: any
+}

package/src/components/DlWidget/utils.ts

@@ -0,0 +1,30 @@
+export function getTargetWidget(el: HTMLElement) {
+    //@ts-ignore
+    for (; el && el !== document; el = el.parentNode) {
+        if (el.classList.contains('dl-widget-grid__item')) {
+            return el
+        }
+    }
+}
+
+export function equateElements(
+    sourceElement: HTMLElement,
+    targetElement: HTMLElement
+) {
+    targetElement.innerHTML = sourceElement.innerHTML
+    targetElement.style.width = `${sourceElement.offsetWidth}px`
+    targetElement.style.height = `${sourceElement.offsetHeight}px`
+    targetElement.style.top = `${
+        sourceElement.getBoundingClientRect().y + 20
+    }px`
+    targetElement.style.left = `${
+        sourceElement.getBoundingClientRect().x - 10
+    }px`
+}
+
+export function getIndex(id: string) {
+    return {
+        row: Number(id[0]),
+        column: Number(id[2])
+    }
+}

package/src/components/index.ts

@@ -0,0 +1,118 @@
+import { DlAccordion } from './DlAccordion'
+import DlAvatar from './DlAvatar.vue'
+import DlCheckbox from './DlCheckbox.vue'
+import DlSkeleton from './DlSkeleton.vue'
+import DlThemeProvider from './DlThemeProvider.vue'
+import { DlLink } from './DlLink'
+import DlSwitch from './DlSwitch.vue'
+import DlIcon from './DlIcon.vue'
+import DlOptionGroup from './DlOptionGroup/DlOptionGroup.vue'
+import DlRadio from './DlRadio.vue'
+import DlProgressBar from './DlProgressBar.vue'
+import { DlButton } from './DlButton'
+import { DlTabPanel, DlTabPanels } from './DlTabPanels'
+import { DlTabs, DlTab } from './DlTabs'
+import DlTooltip from './DlTooltip.vue'
+import { DlSlider } from './DlSlider'
+import { DlColorPicker } from './DlColorPicker'
+import DlChip from './DlChip'
+import { DlListItem } from './DlListItem'
+import DlItemSection from './DlItemSection.vue'
+import DlList from './DlList.vue'
+import { DlMenu } from './DlMenu'
+import DlCounters from './DlCounters.vue'
+import DlRange from './DlRange/DlRange.vue'
+import DlTextArea from './DlTextArea.vue'
+import DlTrend from './DlTrend.vue'
+import DlInfoErrorMessage from './DlInfoErrorMessage.vue'
+import DlTextInput from './DlTextInput.vue'
+import DlProgressChart from './DlProgressChart.vue'
+import DlAlert from './DlAlert.vue'
+import DlPopup from './DlPopup'
+import DlDropdownButton from './DlDropdownButton.vue'
+import DlTypography from './DlTypography.vue'
+import {
+    DlDialogBox,
+    DlDialogBoxHeader,
+    DlDialogBoxFooter
+} from './DlDialogBox'
+import { DlPanelContainer, DlPanel } from './DlPanelContainer'
+import DlSearch from './DlSearch.vue'
+import { DlSelect } from './DlSelect'
+import DlBadge from './DlBadge.vue'
+import DlItem from './DlItem'
+import { DlStepper, Stepper, Step, StepState } from './DlStepper'
+import { DlTr, DlTh, DlTd, DlTable } from './DlTable'
+import { DlPagination } from './DlPagination'
+import { DlDatePicker } from './DlDatePicker'
+import { DlTimePicker } from './DlTimePicker'
+import { DlDateTimeRange } from './DlDateTimeRange'
+import { DateInterval } from './DlDatePicker/types'
+import { DlSmartSearch } from './DlSmartSearch'
+import { DlWidget } from './DlWidget'
+import { DlWidgetGrid } from './DlWidget'
+import DlTextHolder from './DlTextHolder.vue'
+
+export {
+    DlAccordion,
+    DlAvatar,
+    DlInfoErrorMessage,
+    DlCheckbox,
+    DlSkeleton,
+    DlIcon,
+    DlSelect,
+    DlLink,
+    DlRadio,
+    DlOptionGroup,
+    DlSwitch,
+    DlThemeProvider,
+    DlTrend,
+    DlProgressBar,
+    DlItem,
+    DlSlider,
+    DlButton,
+    DlChip,
+    DlTooltip,
+    DlListItem,
+    DlItemSection,
+    DlList,
+    DlMenu,
+    DlCounters,
+    DlTextInput,
+    DlColorPicker,
+    DlTab,
+    DlTabs,
+    DlTabPanel,
+    DlTabPanels,
+    DlRange,
+    DlTextArea,
+    DlPopup,
+    DlAlert,
+    DlDropdownButton,
+    DlProgressChart,
+    DlTypography,
+    DlDialogBox,
+    DlDialogBoxHeader,
+    DlDialogBoxFooter,
+    DlPanelContainer,
+    DlPanel,
+    DlSearch,
+    DlBadge,
+    DlStepper,
+    Stepper,
+    Step,
+    DlTr,
+    DlTh,
+    DlTd,
+    DlTable,
+    DlPagination,
+    DlDatePicker,
+    DlTimePicker,
+    DlDateTimeRange,
+    DlSmartSearch,
+    DlWidget,
+    DlWidgetGrid,
+    DlTextHolder
+}
+
+export type { StepState, DateInterval }

package/src/demo/DlAccordionDemo.vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <dl-accordion
+            v-model="isAccordionOpen"
+            title="Controlled with 'Animal Farm' quote and overflowing title (text to trigger overflowing)"
+        >
+            Some of the animals remembered -- or thought they remembered -- that
+            the Sixth Commandment decreed, 'No animal shall kill any other
+            animal.' And though no one cared to mention it in the hearing of the
+            pigs or the dogs, it was felt that the killings which had taken
+            place did not square with this.
+        </dl-accordion>
+        <dl-accordion
+            additional-info="Some additional info"
+            title="Uncontrolled with Lorem Ipsum"
+        >
+            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.
+        </dl-accordion>
+        <dl-accordion>
+            <template #header>
+                Custom header content
+                <dl-switch
+                    v-model="switchModel"
+                    :value="2"
+                />
+            </template>
+            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.
+        </dl-accordion>
+    </div>
+</template>
+
+<script lang="ts">
+import { DlAccordion, DlSwitch } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    components: {
+        DlAccordion,
+        DlSwitch
+    },
+    data() {
+        return {
+            isAccordionOpen: true,
+            switchModel: []
+        }
+    }
+})
+</script>

package/src/demo/DlAlertDemo.vue

@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <DlAlert
+            :closable="true"
+            fluid
+        >
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas eos
+            amet, nobis unde animi atque itaque? Provident suscipit enim eos
+            sequi dolor minima optio tempora error tenetur, autem ratione
+            cumque!
+        </DlAlert>
+        <DlAlert type="warning">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem
+            ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum
+            dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
+            amet, consectetur adipisicing elit
+            Pneumonoultramicroscopicsilicovolcanoconiosis/Pneumonoultramicroscopicsilicovolcanoconiosis/Pneumonoultramicroscopicsilicovolcanoconiosis.
+        </DlAlert>
+        <div style="display: flex; justify-content: space-between">
+            <DlAlert
+                type="error"
+                :closable="true"
+            >
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            </DlAlert>
+            <DlAlert
+                type="info"
+                text="Alert text"
+                fluid
+            >
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            </DlAlert>
+        </div>
+        <DlAlert
+            type="info"
+            text="Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. "
+        >
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        </DlAlert>
+    </div>
+</template>
+
+<script lang="ts">
+import { DlAlert } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlAlertDemo',
+    components: {
+        DlAlert
+    },
+    template: 'dl-alert-demo'
+})
+</script>