@dataloop-ai/components 0.13.0

package/src/demo/DlAvatarDemo.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <dl-avatar tooltip="kekokokkokok">
+            <dl-icon
+                icon="icon-dl-creator"
+                size="12px"
+            />
+        </dl-avatar>
+        <dl-avatar
+            color="rgb(70, 200, 100)"
+            size="40px"
+        >
+            SA
+        </dl-avatar>
+        <dl-avatar
+            color="dl-color-warning"
+            size="48px"
+            tooltip="johndoe@mail.com"
+            name="John Doe"
+        />
+        <dl-avatar
+            color="dl-color-darker"
+            size="64px"
+            tooltip="john@mail.com"
+            name="John"
+        />
+        <dl-avatar
+            tooltip="popcat@gmail.com"
+            size="72px"
+        >
+            <img src="https://popcat.click/twitter-card.jpg">
+        </dl-avatar>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import DlAvatar from '../components/DlAvatar.vue'
+import DlIcon from '../components/DlIcon.vue'
+export default defineComponent({
+    components: { DlAvatar, DlIcon }
+})
+</script>

package/src/demo/DlBadgeDemo.vue

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <dl-button>
+            <dl-badge
+                with-border
+                floating
+                align="top"
+                color="red"
+            />
+            button with badge
+        </dl-button>
+        <p>Badge with content:</p>
+        <dl-badge color="green">
+            <p>21</p>
+        </dl-badge>
+        <p>Badge as indicator:</p>
+        <div style="display: flex; align-items: center">
+            <dl-badge color="green" /> Test indicator
+        </div>
+        <p>Badge with multi-line:</p>
+        <div style="display: flex; align-items: center">
+            <dl-badge
+                color="green"
+                multiline
+            >
+                <div style="width: 30px">
+                    Test Multi
+                </div>
+            </dl-badge>
+        </div>
+
+        <p>Badge with single-line:</p>
+        <div style="display: flex; align-items: center">
+            <dl-badge style="max-width: 55px">
+                Test Single
+            </dl-badge>
+        </div>
+
+        <p>Outline badge:</p>
+        <div style="display: flex; align-items: center">
+            <dl-badge
+                color="green"
+                outline
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlButton, DlBadge } from '../components'
+
+export default defineComponent({
+    name: 'BadgeDemo',
+    components: {
+        DlButton,
+        DlBadge
+    }
+})
+</script>
+<style scoped>
+p {
+    margin: 0 auto;
+}
+</style>

package/src/demo/DlButtonDemo.vue

@@ -0,0 +1,266 @@
+<template>
+    <div style="width: 950px; padding-top: 20px">
+        <div
+            v-for="buttonSize in buttons"
+            :key="buttonSize"
+        >
+            <h3>Size {{ buttonSize }}</h3>
+            <div style="display: flex; gap: 10px; justify-content: center">
+                <div class="col">
+                    <DlButton
+                        :size="buttonSize"
+                        color="dl-color-negative"
+                        label="COntained text"
+                        @click="log"
+                    />
+                    <DlButton
+                        :size="buttonSize"
+                        outlined
+                        @click="log"
+                    >
+                        Outlined
+                    </DlButton>
+                    <DlButton
+                        :size="buttonSize"
+                        flat
+                        @click="log"
+                    >
+                        Flat Primary
+                    </DlButton>
+                    <DlButton
+                        color="secondary"
+                        :size="buttonSize"
+                        flat
+                        @click="log"
+                    >
+                        Flat Secondary
+                    </DlButton>
+                    <DlButton
+                        flat
+                        disabled
+                        :size="buttonSize"
+                        @click="log"
+                    >
+                        Disabled Flat
+                    </DlButton>
+                    <DlButton
+                        disabled
+                        :size="buttonSize"
+                        @click="log"
+                    >
+                        Disabled
+                    </DlButton>
+                </div>
+            </div>
+        </div>
+        <div
+            style="
+                display: flex;
+                gap: 10px;
+                justify-content: center;
+                margin-top: 50px;
+            "
+        >
+            <DlButton
+                :fluid="true"
+                size="xl"
+                @click="log"
+            >
+                Fluid Button
+            </DlButton>
+            <DlButton
+                size="xl"
+                outlined
+                @click="log"
+            >
+                Outlined
+            </DlButton>
+            <DlButton
+                size="xl"
+                flat
+                @click="log"
+            >
+                Flat
+            </DlButton>
+            <DlButton
+                size="xl"
+                disabled
+                @click="log"
+            >
+                Disabled
+            </DlButton>
+        </div>
+        <div
+            v-for="buttonSize in buttons"
+            :key="buttonSize"
+        >
+            <h3>Size {{ buttonSize }}</h3>
+            <div style="display: flex; gap: 10px; justify-content: center">
+                <DlButton
+                    icon="icon-dl-add"
+                    :size="buttonSize"
+                    round
+                    @click="log"
+                />
+                <DlButton
+                    icon="icon-dl-add"
+                    :size="buttonSize"
+                    @click="log"
+                />
+                <DlButton
+                    icon="icon-dl-add"
+                    :size="buttonSize"
+                    outlined
+                    @click="log"
+                >
+                    Outlined
+                </DlButton>
+                <DlButton
+                    icon="icon-dl-add"
+                    :size="buttonSize"
+                    flat
+                    @click="log"
+                >
+                    Flat Primary
+                </DlButton>
+                <DlButton
+                    icon="icon-dl-add"
+                    color="secondary"
+                    :size="buttonSize"
+                    flat
+                    @click="log"
+                >
+                    Flat Secondary
+                </DlButton>
+                <DlButton
+                    flat
+                    icon="icon-dl-add"
+                    disabled
+                    :size="buttonSize"
+                    @click="log"
+                >
+                    Disabled Flat
+                </DlButton>
+                <DlButton
+                    icon="icon-dl-add"
+                    disabled
+                    :size="buttonSize"
+                    @click="log"
+                >
+                    Disabled
+                </DlButton>
+            </div>
+        </div>
+        <div
+            style="
+                display: flex;
+                gap: 10px;
+                justify-content: center;
+                margin-top: 50px;
+            "
+        >
+            <DlButton
+                icon="icon-dl-add"
+                :fluid="true"
+                size="xl"
+                @click="log"
+            >
+                Fluid Button
+            </DlButton>
+            <DlButton
+                icon="icon-dl-add"
+                size="xl"
+                outlined
+                @click="log"
+            >
+                Outlined
+            </DlButton>
+            <DlButton
+                icon="icon-dl-add"
+                size="xl"
+                flat
+                @click="log"
+            >
+                Flat
+            </DlButton>
+            <DlButton
+                icon="icon-dl-add"
+                size="xl"
+                disabled
+                @click="log"
+            >
+                Disabled
+            </DlButton>
+        </div>
+        <div>
+            <h3>With badge</h3>
+
+            <dl-button>
+                <dl-badge
+                    with-border
+                    floating
+                    align="top"
+                    color="red"
+                />
+                button with badge
+            </dl-button>
+        </div>
+        <div>
+            <h3>Button with label and slot</h3>
+
+            <dl-button label="Hello">
+                World
+            </dl-button>
+        </div>
+        <div>
+            <h3>Button with icon and slot</h3>
+
+            <dl-button icon="icon-dl-search">
+                <dl-icon
+                    size="16px"
+                    icon="icon-dl-cart"
+                />
+                <dl-badge
+                    with-border
+                    floating
+                    align="top"
+                    color="red"
+                />
+            </dl-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue-demi'
+import { DlButton, DlBadge, DlIcon } from '../components'
+import { ButtonSizes } from '../components/DlButton'
+export default defineComponent({
+    name: 'DlButtonDemo',
+    components: {
+        DlButton,
+        DlBadge,
+        DlIcon
+    },
+    setup() {
+        const buttons = reactive<ButtonSizes[]>(['s', 'm', 'l', 'xl'])
+
+        const log = (e: Event) => console.log(e)
+        return { buttons, log }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.col {
+    width: auto;
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 0;
+    max-width: 100%;
+    & > button,
+    & > div.dl-chip {
+        margin: 0 0 0 8px;
+    }
+}
+</style>

package/src/demo/DlCheckboxDemo.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <dl-checkbox
+            v-model="customValueCheck"
+            toggle-indeterminate
+            indeterminate-value="maybe"
+            false-value="no"
+            true-value="yes"
+            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 "
+            @update:model-value="logValue"
+        >
+            Indeterminate checkbox component
+        </dl-checkbox>
+        <dl-checkbox
+            v-model="switchValue"
+            :value="3"
+            label="Option 3"
+            @update:model-value="logValue"
+        />
+        <dl-checkbox
+            v-model="booleanValue"
+            label="Boolean v-model"
+            @update:model-value="logValue"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlCheckbox } from '../components'
+export default defineComponent({
+    name: 'DlCheckboxDemo',
+    components: {
+        DlCheckbox
+    },
+    setup() {
+        const logValue = (newValue: any) => console.log('New value:', newValue)
+        const switchValue = ref<number[]>([1, 3])
+        const booleanValue = ref(true)
+        const customValueCheck = ref('maybe')
+
+        return {
+            switchValue,
+            booleanValue,
+            customValueCheck,
+            logValue
+        }
+    }
+})
+</script>

package/src/demo/DlChipDemo.vue

@@ -0,0 +1,181 @@
+<template>
+    <div style="width: 800px">
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip label="Lorem ipsum dolor" />
+            <DlChip
+                outlined
+                label="Chip outlined"
+            />
+            <DlChip
+                disabled
+                label="Chip disabled"
+            />
+            <DlChip label="Ellipsed Chip with a multiple words" />
+            <DlChip
+                label="Ellipsed Chip with a multiple words"
+                icon="icon-dl-search"
+            />
+            <DlChip
+                label="custom max width (200px)"
+                icon="icon-dl-search"
+                max-width="200px"
+            />
+        </div>
+        <h4>Removable Chips</h4>
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip
+                removable
+                label="Chip filled"
+                @remove="log"
+            />
+            <DlChip
+                removable
+                outlined
+                label="Chip outlined"
+                @remove="log"
+            />
+            <DlChip
+                removable
+                disabled
+                label="Chip disabled"
+                @remove="log"
+            />
+            <DlChip
+                removable
+                label="Ellipsed Chip with a multiple words"
+                @remove="log"
+            />
+            <DlChip
+                removable
+                label="custom max width (200px)"
+                max-width="200px"
+                @remove="log"
+            />
+        </div>
+        <h4>Removable Chips with icon</h4>
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip
+                removable
+                icon="icon-dl-search"
+                label="Chip filled"
+                @remove="log"
+            />
+            <DlChip
+                removable
+                icon="icon-dl-search"
+                @remove="log"
+            />
+            <DlChip
+                removable
+                icon="icon-dl-search"
+                outlined
+                label="Chip outlined"
+                @remove="log"
+            />
+            <DlChip
+                removable
+                icon="icon-dl-search"
+                disabled
+                label="Chip disabled"
+                @remove="log"
+            />
+            <DlChip
+                removable
+                label="Ellipsed Chip with a multiple words"
+                icon="icon-dl-search"
+                @remove="log"
+            />
+            <DlChip
+                removable
+                label="custom max width (200px)"
+                icon="icon-dl-search"
+                max-width="200px"
+                @remove="log"
+            />
+        </div>
+        <h4>Removable Chips without icon and label</h4>
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip
+                removable
+                @remove="log"
+            />
+            <DlChip
+                removable
+                outlined
+                @remove="log"
+            />
+            <DlChip
+                removable
+                disabled
+                @remove="log"
+            />
+        </div>
+        <h4>Chips with icon and without label</h4>
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip icon="icon-dl-search" />
+            <DlChip
+                icon="icon-dl-search"
+                outlined
+            />
+            <DlChip
+                icon="icon-dl-search"
+                disabled
+            />
+        </div>
+        <h4>Chips with overflow</h4>
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip
+                label="Long Chip Label With Alot Of Text"
+                max-width="75px"
+                overflow
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlChip } from '../components'
+export default defineComponent({
+    name: 'DlChipDemo',
+    components: {
+        DlChip
+    },
+    setup() {
+        const log = (e: Event) => console.log(e)
+        return { log }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.col {
+    width: auto;
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 0;
+    max-width: 100%;
+    & > button,
+    & > div.dl-chip {
+        margin: 0 0 0 8px;
+    }
+}
+</style>

package/src/demo/DlColorPickerDemo.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <DlColorPicker
+            theme="light"
+            :color="colorPickerValue"
+            :colors-history="colorsHistory"
+            @changeColor="onColorChange"
+            @updateColor="onColorUpdate"
+        />
+        <h1 :style="{ color: colorPickerValue }">
+            The chosen color is {{ colorPickerValue }}
+        </h1>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlColorPicker } from '../components'
+import { NewColor } from '../components/DlColorPicker'
+
+export default defineComponent({
+    name: 'DlColorPickerDemo',
+    components: {
+        DlColorPicker
+    },
+    setup() {
+        const colorPickerValue = ref('#AF8F8F')
+
+        const colorsHistory = ref([])
+
+        const onColorChange = (e: NewColor) => {
+            colorPickerValue.value = e.hex
+        }
+
+        const onColorUpdate = (e: NewColor) => {
+            colorsHistory.value = [
+                `rgba(${e.rgba.r}, ${e.rgba.g}, ${e.rgba.b}, ${e.rgba.a})`,
+                ...colorsHistory.value
+            ].slice(0, 7)
+        }
+    }
+})
+</script>

package/src/demo/DlCounterDemo.vue

@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <dl-counters
+            :items="[
+                {
+                    value: 123,
+                    text: 'lorem ipsum'
+                },
+                {
+                    value: 45,
+                    text: 'ipsum lorem',
+                    subtext:
+                        'Cupidatat est labore et nisi do culpa veniam reprehenderit anim consectetur dolor mollit.'
+                },
+                {
+                    value: 6789,
+                    text: 'lorem lorem ipsum',
+                    subtext: 'Minim exercitation ipsum elit cillum magna.'
+                }
+            ]"
+        />
+        <dl-counters
+            small
+            :items="[
+                {
+                    text: 'lorem ipsum'
+                },
+                {
+                    value: 45,
+                    text: 'ipsum lorem',
+                    subtext:
+                        'Cupidatat est labore et nisi do culpa veniam reprehenderit anim consectetur dolor mollit.'
+                },
+                {
+                    value: 6789,
+                    text: 'lorem lorem ipsum',
+                    subtext: 'Minim exercitation ipsum elit cillum magna.'
+                }
+            ]"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlCounters } from '../components'
+export default defineComponent({
+    name: 'DlCounterDemo',
+    components: {
+        DlCounters
+    }
+})
+</script>