@dataloop-ai/components 0.13.0

package/src/components/DlSlider/useSlider.ts

@@ -0,0 +1,277 @@
+import {
+    ref,
+    computed,
+    onBeforeUnmount,
+    getCurrentInstance,
+    Ref
+} from 'vue-demi'
+
+import { useFormProps, FormProps } from '../../hooks/useForm'
+
+import { includes, keyCodes, between, position } from '../../utils'
+
+export interface SliderProps extends FormProps {
+    text: string
+    width: string
+    min: number
+    max: number
+    step: number
+    snap: boolean
+    color: string
+    textColor: string
+    thumbSize: string
+    trackSize: string
+    readonly: boolean
+    disabled: boolean
+    tabindex: number | string
+}
+
+export type Dragging = DOMRect & {
+    ratioMin: number
+    ratioMax: number
+    valueMin: number
+    valueMax: number
+    offsetRatio: number
+    rangeRatio: number
+    offsetModel: number
+    rangeValue: number
+    type?: typeof dragType[keyof typeof dragType]
+}
+
+export const dragType = {
+    MIN: 0,
+    RANGE: 1,
+    MAX: 2
+}
+
+export const useSliderProps = {
+    ...useFormProps,
+    text: {
+        type: String,
+        required: true,
+        default: ''
+    },
+    width: {
+        type: String,
+        default: '100%'
+    },
+    min: {
+        type: Number,
+        default: 0
+    },
+    max: {
+        type: Number,
+        default: 100
+    },
+    step: {
+        type: Number,
+        default: 1,
+        validator: (v: number) => v >= 0
+    },
+    snap: {
+        type: Boolean,
+        default: false
+    },
+    color: {
+        type: String,
+        default: 'dl-color-secondary'
+    },
+    textColor: {
+        type: String,
+        default: 'dl-color-darker'
+    },
+    thumbSize: {
+        type: String,
+        default: '10px'
+    },
+    trackSize: {
+        type: String,
+        default: '3px'
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    tabindex: {
+        type: [String, Number],
+        default: '0'
+    }
+}
+
+export const useSliderEmits = ['pan', 'update:model-value', 'change']
+
+export default function ({
+    updateValue,
+    updatePosition,
+    getDragging
+}: {
+    updateValue: Function
+    updatePosition: Function
+    getDragging: Function
+}) {
+    const { props, emit }: { props: any; emit: any } = getCurrentInstance()!
+
+    const active: Ref<boolean> = ref(false)
+    const focus: Ref<'min' | 'max' | boolean> = ref(false)
+    const dragging: Ref<Dragging | boolean | undefined> = ref(false)
+
+    const editable = computed(
+        () =>
+            props.disabled !== true &&
+            props.readonly !== true &&
+            props.min < props.max
+    )
+
+    const decimals = computed(
+        () => (String(props.step).trim().split('.')[1] || '').length
+    )
+    const step = computed(() => (props.step === 0 ? 1 : props.step))
+    const tabindex = computed(() =>
+        editable.value === true ? props.tabindex || 0 : -1
+    )
+
+    const trackLen = computed(() => props.max - props.min)
+
+    const minRatio = computed(() => convertModelToRatio(props.min))
+    const maxRatio = computed(() => convertModelToRatio(props.max))
+
+    const attributes: Record<string, any> = computed(() => {
+        const acc: Record<string, any> = {
+            role: 'slider',
+            'aria-valuemin': props.min,
+            'aria-valuemax': props.max,
+            'aria-orientation': 'horizontal',
+            'data-step': props.step
+        }
+
+        if (props.disabled === true) {
+            acc['aria-disabled'] = 'true'
+        } else if (props.readonly === true) {
+            acc['aria-readonly'] = 'true'
+        }
+
+        return acc
+    })
+
+    function convertRatioToModel(ratio: number) {
+        const { min, max, step } = props
+
+        let model = min + ratio * (max - min)
+
+        if (step > 0) {
+            const modulo = (model - min) % step
+            model +=
+                (Math.abs(modulo) >= step / 2
+                    ? (modulo < 0 ? -1 : 1) * step
+                    : 0) - modulo
+        }
+
+        if (decimals.value > 0) {
+            model = parseFloat(model.toFixed(decimals.value))
+        }
+
+        return between(model, min, max)
+    }
+
+    function convertModelToRatio(model: number) {
+        return trackLen.value === 0 ? 0 : (model - props.min) / trackLen.value
+    }
+
+    function getDraggingRatio(evt: MouseEvent, dragging: Dragging) {
+        const pos = position(evt)
+        const val = between((pos.left - dragging.left) / dragging.width, 0, 1)
+
+        return between(val, minRatio.value, maxRatio.value)
+    }
+
+    function onPan(event: any) {
+        if (event.isFinal === true) {
+            if (dragging.value !== void 0) {
+                updatePosition(event.evt)
+                // only if touch, because we also have mousedown/up:
+                if (event.touch === true) {
+                    updateValue(true)
+                }
+                dragging.value = void 0
+                emit('pan', 'end')
+            }
+            active.value = false
+            focus.value = false
+        } else if (event.isFirst === true) {
+            dragging.value = getDragging(event.evt)
+            updatePosition(event.evt)
+            updateValue()
+            active.value = true
+            emit('pan', 'start')
+        } else {
+            updatePosition(event.evt)
+            updateValue()
+        }
+    }
+
+    function onBlur() {
+        focus.value = false
+    }
+
+    function onActivate(evt: any) {
+        updatePosition(evt, getDragging(evt))
+        updateValue()
+
+        active.value = true
+
+        document.addEventListener('mouseup', onDeactivate, true)
+    }
+
+    function onDeactivate() {
+        active.value = false
+
+        updateValue(true)
+        onBlur()
+
+        document.removeEventListener('mouseup', onDeactivate, true)
+    }
+
+    function onMobileClick(evt: any) {
+        updatePosition(evt, getDragging(evt))
+        updateValue(true)
+    }
+
+    function onKeyup(evt: KeyboardEvent) {
+        if (includes(keyCodes, Number(evt.code))) {
+            updateValue(true)
+        }
+    }
+
+    onBeforeUnmount(() => {
+        document.removeEventListener('mouseup', onDeactivate, true)
+    })
+
+    return {
+        state: {
+            active,
+            focus,
+            dragging,
+            editable,
+            tabindex,
+            attributes,
+            step,
+            decimals
+        },
+
+        methods: {
+            onActivate,
+            onDeactivate,
+            onMobileClick,
+            onBlur,
+            onKeyup,
+            convertRatioToModel,
+            convertModelToRatio,
+            getDraggingRatio,
+            onPan
+        }
+    }
+}

package/src/components/DlSlider/utils.ts

@@ -0,0 +1,7 @@
+export const getInputValue = (value: string, min: number, max: number) => {
+    if (parseInt(value) > max || parseInt(value) < min) {
+        return { value: (parseInt(value) > max ? max : min).toString() }
+    }
+
+    return { value }
+}

package/src/components/DlSmartSearch/DlJsonEditor.vue

@@ -0,0 +1,309 @@
+<template>
+    <div class="json-editor-layout">
+        <dl-dialog-box
+            :model-value="modelValue"
+            :width="800"
+        >
+            <template #header>
+                <dl-dialog-box-header
+                    title="DQL Search"
+                    :close-button="true"
+                    style="font-weight: 200"
+                    @onClose="$emit('update:modelValue', false)"
+                />
+            </template>
+            <template #body>
+                <div class="json-query">
+                    <div class="json-query-menu">
+                        <dl-select
+                            :model-value="selectedOption"
+                            width="200px"
+                            :options="selectOptions"
+                            placeholder="New Query"
+                            @update:model-value="updateActiveQuery"
+                        />
+                        <dl-button
+                            icon="icon-dl-align-left"
+                            label="Align Left"
+                            flat
+                            color="secondary"
+                            @click="alignText"
+                        />
+                    </div>
+                    <div
+                        ref="jsonEditorRef"
+                        class="json-editor"
+                    />
+                    <dl-typography
+                        style="margin-top: 5px"
+                        variant="p"
+                        color="red"
+                    >
+                        {{ message }}
+                    </dl-typography>
+                </div>
+            </template>
+            <template #footer>
+                <div class="footer-menu">
+                    <div class="footer-delete">
+                        <dl-button
+                            :disabled="deleteButtonState"
+                            icon="icon-dl-delete"
+                            label="Delete Query"
+                            flat
+                            color="secondary"
+                            @click="$emit('remove', activeQuery)"
+                        />
+                    </div>
+                    <div class="footer-save">
+                        <dl-button
+                            :disabled="message !== ''"
+                            outlined
+                            label="Save As"
+                            @click="save"
+                        />
+                        <dl-button
+                            :disabled="message !== ''"
+                            label="Search"
+                            @click="$emit('search', activeQuery)"
+                        />
+                    </div>
+                </div>
+            </template>
+        </dl-dialog-box>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { JSONEditor, JSONValue, Mode } from 'vanilla-jsoneditor'
+import { debounce } from 'lodash'
+import { Query } from './types'
+import DlDialogBox from '../DlDialogBox/DlDialogBox.vue'
+import DlDialogBoxHeader from '../DlDialogBox/DlDialogBoxHeader.vue'
+import DlSelect from '../DlSelect/DlSelect.vue'
+import DlButton from '../DlButton/DlButton.vue'
+import DlTypography from '../DlTypography.vue'
+
+interface JSONContent {
+    json: JSONValue
+    text: string
+}
+
+export default defineComponent({
+    components: {
+        DlDialogBox,
+        DlDialogBoxHeader,
+        DlSelect,
+        DlButton,
+        DlTypography
+    },
+    props: {
+        modelValue: { type: Boolean, default: false },
+        query: {
+            type: Object as PropType<Query>,
+            default: () =>
+                ({
+                    name: 'New Query',
+                    query: null
+                } as Query)
+        },
+        queries: {
+            type: Array as PropType<Query[]>,
+            default: () => [] as Query[]
+        }
+    },
+    emits: ['update:modelValue', 'save', 'remove'],
+    data() {
+        return {
+            preventOnChange: false,
+            preventUpdate: false,
+            jsonEditor: {} as JSONEditor,
+            activeQuery: this.query,
+            selectedOption: {
+                label: this.query?.name,
+                value: this.query?.query
+            },
+            message: ''
+        }
+    },
+    computed: {
+        selectOptions(): Record<string, string>[] {
+            return [
+                {
+                    label: 'New Query',
+                    value: ''
+                },
+                ...this.queries.map((q: Query) => ({
+                    label: q.name,
+                    value: q.query
+                }))
+            ]
+        },
+        deleteButtonState(): boolean {
+            return !this.queries.filter(
+                (q: Query) => q.name === this.activeQuery?.name
+            ).length
+        }
+    },
+    watch: {
+        modelValue(value) {
+            this.$nextTick(() => {
+                if (value) this.initJsonEditor()
+                else this.jsonEditor?.destroy()
+                this.activeQuery = this.query
+            })
+        },
+        queries() {
+            this.resetEditor()
+        },
+        query(val) {
+            this.$nextTick(() => {
+                if (val.name === 'New Query') return
+                this.selectedOption = {
+                    label: val.name,
+                    value: val.query
+                }
+                if (val.query && this.jsonEditor.set) {
+                    this.jsonEditor.set({
+                        text: val.query
+                    })
+                }
+                this.alignText()
+            })
+        },
+        activeQuery(val) {
+            try {
+                if (val.query) JSON.parse(val.query)
+                this.message = ''
+            } catch {
+                this.message = 'Invalid Query.'
+            }
+        }
+    },
+    mounted() {
+        this.initJsonEditor()
+    },
+    methods: {
+        updateActiveQuery(option: Record<string, string>) {
+            this.activeQuery = {
+                name: option.label,
+                query: option.value
+            }
+            this.jsonEditor?.destroy()
+            this.initJsonEditor()
+        },
+        alignText() {
+            if (!(this.jsonEditor.get && this.jsonEditor.get())) return
+            try {
+                const parsed = JSON.parse(
+                    (
+                        this.jsonEditor.get &&
+                        (this.jsonEditor?.get() as JSONContent)
+                    )?.text
+                )
+                const newText = JSON.stringify(parsed, null, 2)
+                this.jsonEditor?.set({ text: newText })
+            } catch (error) {}
+        },
+        resetEditor() {
+            if (this.jsonEditor.set) {
+                this.jsonEditor.set({
+                    text: '{}'
+                })
+            }
+            this.selectedOption = {
+                label: 'New Query',
+                value: ''
+            }
+        },
+        initJsonEditor() {
+            const initialAttrs: any = {
+                onChange: debounce(
+                    (updatedContent: { text: string; json: any }) => {
+                        if (this.preventOnChange) {
+                            this.preventOnChange = false
+                            return
+                        }
+                        this.activeQuery = {
+                            name: this.activeQuery
+                                ? this.activeQuery.name
+                                : 'New Query',
+                            query: updatedContent.text
+                        }
+                        this.preventUpdate = true
+                    },
+                    100
+                ),
+                mode: Mode.text,
+                mainMenuBar: false,
+                navigationBar: false,
+                statusBar: false,
+                ...(this.activeQuery !== undefined && {
+                    content: {
+                        text: this.activeQuery?.query
+                            ? this.activeQuery.query
+                            : '{}'
+                    }
+                })
+            }
+
+            // There is type instantiation issue with JSONEditor,
+            // it gives excessively deep and possibly infinite error
+            // @ts-ignore
+            this.jsonEditor = new JSONEditor({
+                target: this.$refs.jsonEditorRef
+                    ? (this.$refs.jsonEditorRef as Element)
+                    : document.createElement('div'),
+                props: initialAttrs
+            })
+            this.alignText()
+        },
+        save() {
+            this.$emit(
+                'save',
+                this.activeQuery
+                    ? this.activeQuery
+                    : {
+                          name: 'New Query',
+                          query: (this.jsonEditor?.get() as any).text || ''
+                      }
+            )
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+.json-editor {
+    --jse-text-color: var(--dl-color-tooltip-background);
+    --jse-delimiter-color: var(--dl-color-tooltip-background);
+    --jse-key-color: var(--dl-color-negative);
+    --jse-background-color: var(--dl-color-tooltip-text);
+    --jse-value-color-boolean: #ae6307;
+    --jse-value-color-string: #337433;
+    .jse-error {
+        display: none !important;
+    }
+    .cm-gutters {
+        display: none !important;
+    }
+}
+
+.json-query-menu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.footer-save button {
+    margin: 0px 10px;
+}
+
+.footer-menu {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+</style>