@dataloop-ai/components 0.13.0

package/src/App.vue

@@ -0,0 +1,201 @@
+<template>
+    <DlThemeProvider :is-dark="isDarkMode">
+        <div style="display: flex">
+            <dl-typography
+                color="dl-color-medium"
+                size="h1"
+                variant="h1"
+            >
+                Dataloop AI UI Library
+            </dl-typography>
+            <dl-button
+                v-if="!hasProps"
+                style="margin: 0 20px"
+                @click="toggleColorMode"
+            >
+                {{ (isDarkMode ? 'Light' : 'Dark') + ' theme' }}
+            </dl-button>
+        </div>
+        <div class="layout-wrapper">
+            <div class="sidebar">
+                <dl-search
+                    v-model="activeDemo"
+                    style="margin-bottom: 5px"
+                />
+                <dl-list
+                    bordered
+                    clickable
+                    style="
+                        min-width: 200px;
+                        height: 100%;
+                        height: calc(100vh - 60px);
+                        overflow: auto;
+                    "
+                >
+                    <template #default="{ clickable }">
+                        <dl-list-item
+                            v-for="(componentName, index) in Object.keys(
+                                demoState
+                            )"
+                            :key="componentName"
+                            :bordered="index !== 0"
+                            :clickable="clickable"
+                            :class="
+                                componentName === activeDemo ? 'selected' : ''
+                            "
+                            style="text-transform: capitalize"
+                            @click="setActiveDemo(componentName)"
+                        >
+                            {{ parseName(componentName) }}
+                        </dl-list-item>
+                    </template>
+                </dl-list>
+            </div>
+            <div
+                v-if="activeDemo !== 'stepper'"
+                class="content"
+            >
+                <div style="display: flex; justify-content: center">
+                    <dl-typography
+                        size="h2"
+                        variant="h2"
+                        style="text-transform: capitalize"
+                    >
+                        {{ parseName(activeDemo) }} component
+                    </dl-typography>
+                </div>
+                <component
+                    :is="demoState[activeDemo]"
+                    class="data-container"
+                />
+            </div>
+            <div
+                v-else
+                class="content"
+            >
+                <SimpleStepper />
+                <div style="height: 10px" />
+                <StepperInDialogBox />
+                <div style="height: 10px" />
+                <CenteredStepperInDialogBox />
+            </div>
+        </div>
+    </DlThemeProvider>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue-demi'
+import {
+    DlThemeProvider,
+    DlButton,
+    DlListItem,
+    DlList,
+    DlTypography,
+    DlSearch
+} from './components'
+import {
+    demoState,
+    SimpleStepper,
+    StepperInDialogBox,
+    CenteredStepperInDialogBox
+} from './demo'
+import { parseName } from './utils'
+
+export default defineComponent({
+    name: 'DlComponentsDemo',
+    components: {
+        DlThemeProvider,
+        DlButton,
+        DlListItem,
+        DlList,
+        DlTypography,
+        DlSearch,
+        SimpleStepper,
+        StepperInDialogBox,
+        CenteredStepperInDialogBox
+    },
+    props: {
+        isDark: { required: false, default: null, type: Boolean }
+    },
+    setup(props) {
+        const hasProps = computed(() => props.isDark !== null)
+        const darkMode = ref(false)
+        const demos = Object.keys(demoState)
+        const activeDemo = ref(
+            window.localStorage.getItem('dl-active-demo') ?? demos[0] ?? ''
+        )
+        const setActiveDemo = (demo: string) => {
+            activeDemo.value = demo
+
+            if (demos.includes(demo)) {
+                window.localStorage.setItem('dl-active-demo', demo)
+            }
+        }
+        const toggleColorMode = () => {
+            darkMode.value = !darkMode.value
+        }
+
+        const isDarkMode = computed(() => {
+            if (hasProps.value) {
+                return props.isDark
+            }
+            return darkMode.value
+        })
+
+        return {
+            hasProps,
+            isDarkMode,
+            activeDemo,
+            setActiveDemo,
+            toggleColorMode,
+            demoState,
+            parseName
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+#app {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+}
+
+.layout-wrapper {
+    display: flex;
+}
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+}
+
+.content {
+    padding: 20px 30px;
+    flex-grow: 1;
+}
+
+.data-container {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    max-width: 100%;
+    overflow: auto;
+    padding: 20px;
+    margin: 0 auto;
+    flex-direction: column;
+    justify-content: center;
+    width: 950px;
+    resize: both;
+    box-shadow: var(--dl-menu-shadow);
+}
+
+.selected {
+    ::v-deep .row {
+        color: var(--dl-color-secondary) !important;
+        background-color: var(--dl-color-fill);
+    }
+}
+</style>

package/src/assets/globals.scss

@@ -0,0 +1,253 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+body {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+
+    &>* {
+        font-weight: 400;
+        font-family: 'Roboto', sans-serif;
+    }
+
+    background-color: var(--dl-color-bg);
+}
+
+// tranform
+.rotate-180 {
+    transform: rotate(180deg);
+}
+
+.text {
+    &-center {
+        text-align: center;
+    }
+
+    &-left {
+        text-align: left;
+    }
+
+    &-right {
+        text-align: right;
+    }
+}
+
+.scroll {
+    overflow: auto;
+}
+
+.scroll,
+.scroll-x,
+.scroll-y {
+    -webkit-overflow-scrolling: touch;
+    will-change: scroll-position;
+}
+
+.row.inline,
+.column.inline,
+.flex.inline {
+    display: inline-flex;
+}
+
+.no-wrap {
+    flex-wrap: nowrap !important;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.column {
+    flex-direction: column;
+}
+
+.row,
+.column,
+.flex {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.relative-position {
+    position: relative;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.non-selectable {
+    user-select: none;
+}
+
+.no-outline {
+    outline: 0;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.col {
+    flex: 10000 1 0%;
+}
+
+.full-width {
+    width: 100%;
+}
+
+:root {
+    // common
+    --dl-color-white: #fff;
+    --dl-color-black: #000;
+    --dl-color-bg: #fff;
+    --dl-color-transparent: transparent;
+
+    // fontSizes
+    --dl-font-size-h1: 30px;
+    --dl-font-size-h2: 20px;
+    --dl-font-size-h3: 16px;
+    --dl-font-size-h4: 14px;
+    --dl-font-size-body: 12px;
+    --dl-font-size-small: 10px;
+
+    // shadows
+    --dl-menu-shadow: 0px 3px 6px rgba(16, 30, 115, 0.15);
+
+    // colors
+    --dl-color-tooltip-text: #FEFEFE;
+    --dl-color-tooltip-background: #171723d9;
+    --dl-color-text-darker-buttons: #171723;
+    --dl-color-secondary: #3452FF;
+    --dl-color-text-buttons: #FFFFFF;
+    --dl-color-darker: #171723;
+    --dl-color-medium: #767676;
+    --dl-color-lighter: #999999;
+    --dl-color-hover: #7B8CFF;
+    --dl-color-disabled: #B3B3B3;
+    --dl-color-fill: #F5F5F5;
+    --dl-color-fill-hover: #F8F8F8;
+    --dl-color-separator: #E4E4E4;
+    --dl-color-scrollbar: #E4E4E4;
+    --dl-color-body-background: #EEF1FF;
+    --dl-color-panel-background: #FFFFFF;
+    --dl-color-side-panel: #18195C;
+    --dl-color-shadow: #FFFFFF;
+    --dl-color-negative: #FF3434;
+    --dl-color-negative-background: #FFEAEA;
+    --dl-color-warning: #FFDA3A;
+    --dl-color-warning-background: #EEF1FF;
+    --dl-color-positive: #039E49;
+    --dl-color-positive-background: #E1FFF0;
+    --dl-color-info-background: #F3F9FF;
+    --dl-color-icon-default: #171723;
+    --dl-color-fill-secondary: #FBF8F8;
+    --dl-color-fill-third: #FBFBFB;
+    --dl-color-link: #20ABFA;
+    --dl-color-info: #4E81B3;
+    --dl-color-cell-background: #FFFAE2;
+    --q-color-positive: #38D079;
+    --q-color-warning: #E1B75B;
+
+    --dl-date-picker-shadow: 0px 3px 6px #101e7326;
+
+    // z-index
+    --dl-z-index-panel: 3000; // panel & panel contaiener content
+    --dl-z-index-panel-elements: 3010; // separator + glutter
+    --dl-z-index-panel-header-footer: 3020;
+    --dl-z-index-panel-container-overlay: 3025;
+    --dl-z-index-panel-container-elements: 3030; // collapse icon + separator
+
+    --dl-z-index-overlay: 5000;
+
+    --dl-z-index-menu: 6000;
+    --dl-z-index-tooltip: 9000;
+}
+
+/* Define styles for the root window with dark - mode preference */
+[data-theme='dark-mode'] {
+
+    // shadows
+    --dl-menu-shadow: 0px 3px 6px rgba(41, 46, 53, 0.5);
+
+    // colors
+    --dl-color-bg: #30363D;
+    --dl-color-tooltip-text: #161616;
+    --dl-color-tooltip-background: #ffffffd9;
+    --dl-color-text-darker-buttons: #171723;
+    --dl-color-secondary: #7C8CFF;
+    --dl-color-text-buttons: #FFFFFF;
+    --dl-color-darker: #ffffffcc;
+    --dl-color-medium: #ffffff99;
+    --dl-color-lighter: #ffffff66;
+    --dl-color-hover: #AEB9FF;
+    --dl-color-disabled: #ffffff40;
+    --dl-color-fill: #ffffff40;
+    --dl-color-fill-secondary: #F8F8F8;
+    
+    --dl-color-fill-hover: #ffffff26;
+    --dl-color-separator: #ffffff26;
+    --dl-color-body-background: #24282D;
+    --dl-color-panel-background: #30363D;
+    --dl-color-side-panel: #2A343E;
+    --dl-color-shadow: #30363D;
+    --dl-color-negative: #FF3434;
+    --dl-color-negative-background: #734145;
+    --dl-color-warning: #FFDA3A;
+    --dl-color-warning-background: #7B7241;
+    --dl-color-positive: #00DE93;
+    --dl-color-positive-background: #3A644E;
+    --dl-color-info-background: #2F3C4B;
+    --dl-color-icon-default: #ffffffbf;
+    --dl-color-fill-secondary: #FFFFFF %10;
+    --dl-color-fill-third: #9E9E9E %10;
+    --dl-color-link: #53B2E8;
+    --dl-color-info: #92CDF2;
+    --dl-color-cell-background: #FFFAE2;
+    --q-color-positive: #A1E5B6;
+    --q-color-warning: #F8D29A;
+
+
+    --dl-date-picker-shadow: 0px 3px 6px #292e3580;
+}
+
+// scrollbar
+
+html {
+    // Mozilla Firefox
+    scrollbar-width: thin;
+    scrollbar-color: var(--dl-color-scrollbar);
+
+    // IE
+    scrollbar-face-color: #E4E4E4;
+    scrollbar-face-color: var(--dl-color-scrollbar);
+}
+
+// Google Chrome & Safari
+::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--dl-color-scrollbar);
+    border-radius: 3px;
+}
+
+.no-user-select {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}

package/src/assets/globalsKeys.ts

@@ -0,0 +1,28 @@
+export const colors = [
+    'dl-color-white',
+    'dl-color-black',
+    'dl-color-tooltip-text',
+    'dl-color-tooltip-background',
+    'dl-color-text-darker-buttons',
+    'dl-color-secondary',
+    'dl-color-text-buttons',
+    'dl-color-darker',
+    'dl-color-medium',
+    'dl-color-lighter',
+    'dl-color-hover',
+    'dl-color-disabled',
+    'dl-color-fill',
+    'dl-color-fill-hover',
+    'dl-color-separator',
+    'dl-color-body-background',
+    'dl-color-panel-background',
+    'dl-color-side-panel',
+    'dl-color-shadow',
+    'dl-color-negative',
+    'dl-color-negative-background',
+    'dl-color-warning',
+    'dl-color-warning-background',
+    'dl-color-positive',
+    'dl-color-positive-background',
+    'dl-color-info-background'
+]

package/src/components/DlAccordion/AccordionHeader.vue

@@ -0,0 +1,148 @@
+<template>
+    <div
+        class="accordion-header"
+        tabindex="0"
+        :style="accordionHeadStyles"
+        @click="handleClick"
+    >
+        <dl-icon
+            class="expand-icon"
+            :size="$props.fontSize"
+            :class="{ expanded: isOpen }"
+            icon="icon-dl-right-chevron"
+            :color="titleColor"
+        />
+        <div class="header-content">
+            <slot
+                v-if="hasSlot"
+                name="header"
+            />
+            <span
+                v-else
+                ref="dlAccordionTitleRef"
+                class="accordion-title"
+            >
+                <dl-tooltip v-if="isOverflowing">
+                    {{ title }}
+                </dl-tooltip>
+                {{ title }}
+            </span>
+            <span class="flex">
+                <dl-icon
+                    v-if="hasAdditionalInfo"
+                    :size="$props.fontSize"
+                    icon="icon-dl-info"
+                    class="info-icon"
+                />
+                <dl-tooltip>
+                    {{ additionalInfo }}
+                </dl-tooltip>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import DlIcon from '../DlIcon.vue'
+import DlTooltip from '../DlTooltip.vue'
+import { defineComponent, ref } from 'vue-demi'
+import { getColor } from '../../utils'
+import { useSizeObserver } from '../../hooks/use-size-observer'
+export default defineComponent({
+    name: 'AccordionHeader',
+    components: {
+        DlIcon,
+        DlTooltip
+    },
+    props: {
+        additionalInfo: { type: String!, default: '' },
+        defaultOpened: { type: Boolean, default: false },
+        fontSize: { type: String, default: '12px' },
+        title: { type: String, default: null },
+        titleColor: { type: String, default: 'dl-color-medium' },
+        isOpen: { type: Boolean, default: false },
+        rightSide: { type: Boolean, default: false }
+    },
+    emits: ['click'],
+    setup() {
+        const dlAccordionTitleRef = ref(null)
+        const { hasEllipsis } = useSizeObserver(dlAccordionTitleRef)
+
+        return {
+            dlAccordionTitleRef,
+            isOverflowing: hasEllipsis
+        }
+    },
+    computed: {
+        accordionHeadStyles(): Record<string, string> {
+            return {
+                '--dl-title-color': getColor(
+                    this.titleColor,
+                    'dl-color-medium'
+                ),
+                '--dl-expand-icon-color': `var(--${
+                    this.isOpen ? 'dl-color-darker' : this.titleColor
+                })`,
+                '--dl-accordion-header-flex-direction': this.rightSide
+                    ? 'row-reverse'
+                    : 'row',
+                '--dl-accordion-header-fontsize': this.fontSize
+            }
+        },
+        hasSlot(): boolean {
+            return this.$slots.header !== undefined
+        },
+        hasAdditionalInfo(): boolean {
+            return this.additionalInfo !== ''
+        }
+    },
+    methods: {
+        handleClick(e: Event) {
+            this.$emit('click', e)
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.accordion-header {
+    padding: 13px 16px;
+    cursor: pointer;
+    font-size: var(--dl-accordion-header-fontsize);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-direction: var(--dl-accordion-header-flex-direction);
+    color: var(--dl-title-color);
+}
+
+.accordion-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.header-content {
+    max-width: calc(100% - 0px);
+    flex-grow: 1;
+    color: var(--dl-title-color);
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    text-align: left;
+}
+
+.info-icon {
+    color: var(--dl-title-color);
+    display: flex !important;
+}
+
+.expand-icon {
+    display: flex !important;
+    color: var(--dl-expand-icon-color);
+    transition: all 300ms;
+    &.expanded {
+        transform: rotate(90deg);
+    }
+}
+</style>