@dataloop-ai/components 0.13.0

package/src/demo/DlStepperDemo/steps/DataStep.vue

@@ -0,0 +1,158 @@
+<template>
+    <div>
+        <div style="display: flex; gap: 8px">
+            <dl-button
+                color="dl-color-positive"
+                label="Completed"
+                @click="$emit('complete-click')"
+            />
+            <dl-button
+                color="dl-color-warning"
+                label="Warning"
+                @click="$emit('warning-click')"
+            />
+            <dl-button
+                color="dl-color-negative"
+                label="Error"
+                @click="$emit('error-click')"
+            />
+            <dl-button
+                label="Reset"
+                @click="$emit('reset-click')"
+            />
+        </div>
+        <div class="inputs-container">
+            <dl-select
+                v-model="dataset"
+                title="Dataset"
+                required
+                :options="['Rotem Shaham']"
+            />
+            <span>
+                <dl-typography color="dl-color-medium">Folder or DQL (Optional)</dl-typography>
+                <div style="height: 8px" />
+                <dl-option-group
+                    v-model="dql"
+                    inline
+                    :options="[
+                        { label: 'Option 1', value: 1 },
+                        { label: 'Option 2', value: 2 }
+                    ]"
+                />
+            </span>
+            <dl-typography>
+                <dl-typography
+                    style="display: inline-block"
+                    color="dl-color-medium"
+                >
+                    Scope Items:
+                </dl-typography>
+                All Items (500)
+            </dl-typography>
+            <span>
+                <dl-typography color="dl-color-medium">Filter Items *</dl-typography>
+                <div style="height: 8px" />
+                <div style="display: flex; align-items: center">
+                    <dl-button
+                        size="s"
+                        outlined
+                        label="Percentage"
+                    />
+                    <dl-button
+                        size="s"
+                        outlined
+                        label="Items"
+                        color="dl-color-separator"
+                        text-color="dl-color-darker"
+                    />
+                    <dl-text-input
+                        v-model="percentage"
+                        style="width: 60px; margin: 0 10px 0 15px"
+                        size="m"
+                        without-root-padding
+                        disable-clear-btn
+                    />
+                    <dl-typography color="dl-color-medium">Items Limit</dl-typography>
+                </div>
+                <hr class="separator">
+            </span>
+            <dl-typography>Total Items: 120</dl-typography>
+            <span>
+                <dl-typography
+                    style="margin-bottom: 6px"
+                    color="dl-color-medium"
+                >Setting (Optional)</dl-typography>
+                <dl-alert type="info">WEBM Conversion is executed as a project service and incurs
+                    compute costs. Set service compute resources according to
+                    planned workload.</dl-alert>
+            </span>
+            <span style="display: flex; align-items: flex-start; gap: 10px">
+                <dl-checkbox v-model="enforce" />
+                <dl-typography>
+                    Enforce WEBM conversion on 8 video items for frame-accurate
+                    annotations.
+                    <dl-link
+                        style="display: inline-block"
+                        size="12px"
+                        color="dl-color-secondary"
+                        href="/"
+                    >
+                        Learn more</dl-link>.
+                </dl-typography>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import {
+    DlButton,
+    DlCheckbox,
+    DlTextInput,
+    DlTypography,
+    DlOptionGroup,
+    DlSelect,
+    DlLink,
+    DlAlert
+} from '../../../components'
+export default defineComponent({
+    components: {
+        DlButton,
+        DlTypography,
+        DlTextInput,
+        DlOptionGroup,
+        DlSelect,
+        DlCheckbox,
+        DlLink,
+        DlAlert
+    },
+    emits: ['reset-click', 'error-click', 'complete-click', 'warning-click'],
+    data() {
+        return {
+            dql: 1,
+            dataset: 'Rotem Shaham',
+            percentage: '100%',
+            enforce: true
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.inputs-container {
+    padding: 20px 0 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+    width: calc(100% - 2px);
+}
+
+.separator {
+    padding-top: 4px;
+    border: none;
+    width: 305px;
+    border-bottom: 1px solid var(--dl-color-separator);
+}
+</style>

package/src/demo/DlStepperDemo/steps/GeneralStep.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <div style="display: flex; gap: 8px">
+            <dl-button
+                color="dl-color-positive"
+                label="Completed"
+                @click="$emit('complete-click')"
+            />
+            <dl-button
+                color="dl-color-warning"
+                label="Warning"
+                @click="$emit('warning-click')"
+            />
+            <dl-button
+                color="dl-color-negative"
+                label="Error"
+                @click="$emit('error-click')"
+            />
+            <dl-button
+                label="Reset"
+                @click="$emit('reset-click')"
+            />
+        </div>
+        <div class="inputs-container">
+            <dl-text-input
+                without-root-padding
+                required
+                title="Name"
+            />
+            <span>
+                <dl-typography color="dl-color-medium">Type *</dl-typography>
+                <span style="height: 10px" />
+                <dl-option-group
+                    v-model="type"
+                    inline
+                    :options="[
+                        { label: 'Option 1', value: 1 },
+                        { label: 'Option 2', value: 2 }
+                    ]"
+                />
+            </span>
+            <dl-select
+                v-model="owner"
+                title="Owner"
+                required
+                :options="['Rotem Shaham', 'Fadi Atamny', 'Orily Shefler']"
+            />
+            <dl-select
+                v-model="status"
+                title="Task Status"
+                required
+                :options="['To Do', 'In Progress', 'Done']"
+            />
+            <dl-select
+                v-model="priority"
+                title="Priority"
+                required
+                :options="['High', 'Medium', 'Low']"
+            />
+            <dl-text-input
+                without-root-padding
+                title="Completion Due Date"
+                placeholder="dd/mm/yy"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import {
+    DlButton,
+    DlTextInput,
+    DlSelect,
+    DlOptionGroup,
+    DlTypography
+} from '../../../components'
+export default defineComponent({
+    components: {
+        DlButton,
+        DlTypography,
+        DlOptionGroup,
+        DlTextInput,
+        DlSelect
+    },
+    emits: ['reset-click', 'error-click', 'complete-click', 'warning-click'],
+    data() {
+        return {
+            owner: 'Rotem Shaham',
+            type: 1,
+            status: 'To do',
+            priority: 'High'
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.inputs-container {
+    padding: 20px 0 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: calc(100% - 2px);
+}
+</style>

package/src/demo/DlStepperDemo/steps/InstructionStep.vue

@@ -0,0 +1,176 @@
+<template>
+    <div>
+        <div style="display: flex; gap: 8px">
+            <dl-button
+                color="dl-color-positive"
+                label="Completed"
+                @click="$emit('complete-click')"
+            />
+            <dl-button
+                color="dl-color-warning"
+                label="Warning"
+                @click="$emit('warning-click')"
+            />
+            <dl-button
+                color="dl-color-negative"
+                label="Error"
+                @click="$emit('error-click')"
+            />
+            <dl-button
+                label="Reset"
+                @click="$emit('reset-click')"
+            />
+        </div>
+        <div class="inputs-container">
+            <dl-select
+                v-model="recipe"
+                title="Recipe"
+                required
+                :options="['Rotem Shaham']"
+            />
+            <dl-typography>
+                Go to
+                <dl-link
+                    :size="12"
+                    color="dl-color-secondary"
+                    style="display: inline-block"
+                >
+                    Recipes Page
+                </dl-link>
+                to create a new recipe.
+            </dl-typography>
+            <span>
+                <dl-typography color="dl-color-medium">2. Instruction Document</dl-typography>
+                <div style="height: 10px" />
+                <dl-typography>Lorem Ipsum Dolot Sit Amat.Pdf</dl-typography>
+            </span>
+            <span>
+                <dl-typography color="dl-color-medium">Instruction Range</dl-typography>
+                <div style="height: 4px" />
+                <dl-option-group
+                    v-model="range"
+                    :options="[
+                        { label: 'All', value: 1 },
+                        { label: 'Custom', value: 2 },
+                        { label: 'None', value: 3 }
+                    ]"
+                />
+            </span>
+            <span>
+                <dl-typography color="dl-color-medium">Tools Settings (Optional)</dl-typography>
+                <div style="height: 10px" />
+                <dl-checkbox
+                    v-model="pixel"
+                    padding="5px 0px"
+                    label="Super Pixel"
+                />
+            </span>
+            <span>
+                <dl-typography color="dl-color-medium">Labeling Task Actions</dl-typography>
+                <div style="height: 10px" />
+                <dl-checkbox
+                    v-model="auto"
+                    padding="5px 0px"
+                    label="Auto apply status on classification tool"
+                />
+                <div
+                    class="labeling-option"
+                    style="margin-top: 4px"
+                >
+                    <dl-radio
+                        v-model="labeling"
+                        label="Complete"
+                        padding="5px 0px"
+                        value="complete"
+                    />
+                    <dl-typography
+                        size="10px"
+                        color="dl-color-lighter"
+                    >(Default)</dl-typography>
+                    <dl-icon
+                        icon="icon-dl-close"
+                        size="8px"
+                    />
+                </div>
+                <div class="labeling-option">
+                    <dl-radio
+                        v-model="labeling"
+                        label="Disable"
+                        padding="5px 0px"
+                        value="disable"
+                    />
+                    <dl-icon
+                        icon="icon-dl-close"
+                        size="8px"
+                    />
+                </div>
+            </span>
+            <dl-button
+                icon="icon-dl-add"
+                flat
+                class="add-button"
+                text-color="dl-color-darker"
+                label="Add New Action"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import {
+    DlButton,
+    DlSelect,
+    DlTypography,
+    DlLink,
+    DlOptionGroup,
+    DlRadio,
+    DlIcon,
+    DlCheckbox
+} from '../../../components'
+export default defineComponent({
+    components: {
+        DlButton,
+        DlCheckbox,
+        DlIcon,
+        DlOptionGroup,
+        DlRadio,
+        DlLink,
+        DlTypography,
+        DlSelect
+    },
+    emits: ['reset-click', 'error-click', 'complete-click', 'warning-click'],
+    data() {
+        return {
+            recipe: 'Rotem Shaham',
+            range: 1,
+            auto: true,
+            pixel: false,
+            labeling: 'complete'
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.inputs-container {
+    padding: 20px 0 10px;
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: calc(100% - 2px);
+}
+
+.add-button {
+    padding: 0;
+}
+
+.labeling-option {
+    display: flex;
+    align-items: center;
+    padding-top: 4px;
+    justify-content: space-between;
+    width: 140px;
+}
+</style>

package/src/demo/DlStepperDemo/steps/QualityStep.vue

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <div style="display: flex; gap: 8px">
+            <dl-button
+                color="dl-color-positive"
+                label="Completed"
+                @click="$emit('complete-click')"
+            />
+            <dl-button
+                color="dl-color-warning"
+                label="Warning"
+                @click="$emit('warning-click')"
+            />
+            <dl-button
+                color="dl-color-negative"
+                label="Error"
+                @click="$emit('error-click')"
+            />
+            <dl-button
+                label="Reset"
+                @click="$emit('reset-click')"
+            />
+        </div>
+        <div class="inputs-container">
+            <dl-checkbox
+                v-model="qa"
+                padding="5px 0px"
+                label="Auto QA task"
+            />
+            <dl-checkbox
+                v-model="consensus"
+                padding="5px 0px"
+                label="Consensus"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlButton, DlCheckbox } from '../../../components'
+export default defineComponent({
+    components: {
+        DlButton,
+        DlCheckbox
+    },
+    emits: ['reset-click', 'error-click', 'complete-click', 'warning-click'],
+    data() {
+        return {
+            qa: false,
+            consensus: false
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.inputs-container {
+    padding: 20px 0 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: calc(100% - 2px);
+}
+</style>

package/src/demo/DlSwitchDemo.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        Normal switch
+        <dl-switch v-model="changingValue" />
+        Switch with disabled
+        <dl-switch
+            v-model="switchValue"
+            disabled
+        />
+        Switch with value not updating
+        <dl-switch v-model="switchValue" />
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi'
+import { DlSwitch } from '../components'
+
+export default defineComponent({
+    components: { DlSwitch },
+    setup() {
+        const val = ref(false)
+        const changeVal = ref(false)
+
+        const switchValue = computed({
+            get() {
+                return val.value
+            },
+            set(value) {
+                console.log('not setting the value to:', value)
+            }
+        })
+        const changingValue = computed({
+            get() {
+                return changeVal.value
+            },
+            set(value: boolean) {
+                changeVal.value = value
+                console.log('changed value to:', value)
+            }
+        })
+
+        return {
+            changingValue,
+            switchValue
+        }
+    }
+})
+</script>