mediacube-ui-v2 0.0.7 → 0.0.9

package/dist/components/patterns/McFilter/McFilterTypeRelation/McFilterTypeRelation.vue.js

@@ -0,0 +1,359 @@
+import McButton from '@/components/elements/McButton/McButton.vue';
+import McTitle from '@/components/elements/McTitle/McTitle.vue';
+import McFieldSelect from '@/components/elements/McFieldSelect/McFieldSelect.vue';
+import McFieldText from '@/components/elements/McFieldText/McFieldText.vue';
+import { computed, ref, watch, nextTick } from 'vue';
+import { FilterRelations } from '@/enums';
+import { useHelper } from '@/composables/useHelper';
+import { useDebounceFn } from '@vueuse/core';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const helper = useHelper();
+const emit = defineEmits();
+const props = defineProps({
+    /**
+     *  Значение
+     */
+    modelValue: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     *  Объект выбранного
+     *  фильтра
+     */
+    filter: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     *  Переводы локализаций
+     */
+    placeholders: {
+        type: Object,
+        required: true
+    },
+    /**
+     *  Текущее значение
+     *  добавленных фильтров
+     */
+    currentValues: {
+        type: Object,
+        default: () => ({})
+    }
+});
+const debounce = useDebounceFn((method) => {
+    method();
+}, 100);
+const relations = ref(Object.values(FilterRelations));
+const relationType = ref(FilterRelations.Is);
+const ajaxOptions = ref([]);
+const loading = ref(false);
+const component = computed(() => {
+    return props.filter.is_text ? McFieldText : McFieldSelect;
+});
+const computedPlaceholder = computed(() => {
+    return props.filter.placeholder || props.filter.is_text ? props.placeholders.enter : props.placeholders.choose;
+});
+const isAjax = computed(() => {
+    return props.filter.getAjaxOptions?.constructor === Function;
+});
+const computedOptions = computed(() => {
+    let options = isAjax.value ? ajaxOptions.value : props.filter.options || [];
+    if (props.currentValues[props.filter.value]) {
+        const category = props.currentValues[props.filter.value] || {};
+        let selected = [];
+        for (let [key, val] of Object.entries(category)) {
+            if (key === FilterRelations.Exists) {
+                return [];
+            }
+            selected = [...selected, ...(Array.isArray(val) ? val : [[val]])];
+        }
+        options = options.filter((o) => !selected.includes(String(o.value)));
+    }
+    return options;
+});
+const selectedOptionValue = computed({
+    get() {
+        let val = props.modelValue;
+        if (val) {
+            for (let [relationKey, relationVal] of Object.entries(props.modelValue)) {
+                let _relationKey = relationKey;
+                let _relationVal = relationVal;
+                if (_relationKey === FilterRelations.Exists) {
+                    val = '';
+                }
+                else {
+                    val = _relationVal?.[0] || '';
+                }
+            }
+            if (isAjax.value && val) {
+                addAjaxOption(val);
+            }
+        }
+        return val;
+    },
+    set(val) {
+        if (relationType.value === FilterRelations.Exists)
+            return;
+        setValue(val);
+    }
+});
+const changeRelationType = (relation) => {
+    if (relationType.value === relation)
+        return;
+    relationType.value = relation;
+    setValue(selectedOptionValue.value);
+};
+const setAjaxOptions = async (value) => {
+    loading.value = true;
+    ajaxOptions.value = props.filter.getAjaxOptions && (await props.filter.getAjaxOptions(value));
+    loading.value = false;
+};
+const addAjaxOption = async (value) => {
+    const option = props.filter.getAjaxOne && (await props.filter.getAjaxOne(value));
+    ajaxOptions.value = helper.uniqWith([...ajaxOptions.value, option], helper.isEqual);
+};
+const handleSearchChange = (value) => {
+    if (!isAjax.value || !value)
+        return;
+    debounce(() => setAjaxOptions(value));
+};
+const setValue = (value) => {
+    let currentValue = null;
+    let currentValueName = null;
+    const hasVal = value || Number.isInteger(value);
+    if (relationType.value !== FilterRelations.Exists && hasVal) {
+        const name = props.filter.is_text
+            ? value
+            : computedOptions.value.find((o) => String(o.value) === String(value))?.name;
+        currentValue = { [relationType.value]: [String(value)] };
+        currentValueName = { [relationType.value]: { [String(value)]: name } };
+    }
+    if (relationType.value === FilterRelations.Exists && !props.currentValues[props.filter.value]) {
+        currentValue = { [FilterRelations.Exists]: 0 };
+        currentValueName = { [FilterRelations.Exists]: null };
+    }
+    /**
+     * Событие по изменению значения
+     */
+    const payload = {
+        value: currentValue,
+        valueName: currentValueName
+    };
+    emit('update:modelValue', payload);
+};
+watch(() => props.modelValue, (val) => {
+    if (val) {
+        for (let relationKey of Object.keys(val)) {
+            relationType.value = relationKey;
+        }
+    }
+}, { immediate: true });
+watch(() => props.filter, () => {
+    relationType.value = FilterRelations.Is;
+    nextTick(() => (ajaxOptions.value = []));
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Объект выбранного
+         *  фильтра
+         */
+        filter: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true
+        },
+        /**
+         *  Текущее значение
+         *  добавленных фильтров
+         */
+        currentValues: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    __typeEmits: {},
+});
+;
+let __VLS_functionalComponentProps;
+function __VLS_template() {
+    const __VLS_ctx = {};
+    const __VLS_localComponents = {
+        ...{},
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_components;
+    const __VLS_localDirectives = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_directives;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    const __VLS_0 = ((__VLS_ctx.component));
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ 'onSearchChange': {} }, modelValue: __VLS_ctx.selectedOptionValue, options: ((__VLS_ctx.computedOptions)), internalSearch: ((!__VLS_ctx.isAjax)), placeholder: ((__VLS_ctx.computedPlaceholder)), loading: ((__VLS_ctx.loading)), disabled: ((__VLS_ctx.relationType === __VLS_ctx.FilterRelations.Exists)), hideSelected: (true), ...{ class: ("mc-filter-type-relation") }, name: ((`relation_${props.filter.type}`)), }));
+    const __VLS_2 = __VLS_1({ ...{ 'onSearchChange': {} }, modelValue: __VLS_ctx.selectedOptionValue, options: ((__VLS_ctx.computedOptions)), internalSearch: ((!__VLS_ctx.isAjax)), placeholder: ((__VLS_ctx.computedPlaceholder)), loading: ((__VLS_ctx.loading)), disabled: ((__VLS_ctx.relationType === __VLS_ctx.FilterRelations.Exists)), hideSelected: (true), ...{ class: ("mc-filter-type-relation") }, name: ((`relation_${props.filter.type}`)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    var __VLS_6 = {};
+    let __VLS_7;
+    const __VLS_8 = {
+        onSearchChange: ((payload) => __VLS_ctx.handleSearchChange(payload))
+    };
+    let __VLS_3;
+    let __VLS_4;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { header: __VLS_thisSlot } = __VLS_nonNullable(__VLS_5.slots);
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter-type-relation__header") }, });
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_9 = __VLS_asFunctionalComponent(McTitle, new McTitle({}));
+        const __VLS_10 = __VLS_9({}, ...__VLS_functionalComponentArgsRest(__VLS_9));
+        (__VLS_ctx.placeholders.condition);
+        __VLS_nonNullable(__VLS_13.slots).default;
+        var __VLS_13;
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter-type-relation__buttons") }, });
+        for (const [relation] of __VLS_getVForSourceType((__VLS_ctx.relations))) {
+            // @ts-ignore
+            [McButton, McButton,];
+            // @ts-ignore
+            const __VLS_14 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, key: ((relation)), variation: ((__VLS_ctx.relationType === relation ? 'purple' : 'dark-gray-outline')), }));
+            const __VLS_15 = __VLS_14({ ...{ 'onClick': {} }, key: ((relation)), variation: ((__VLS_ctx.relationType === relation ? 'purple' : 'dark-gray-outline')), }, ...__VLS_functionalComponentArgsRest(__VLS_14));
+            let __VLS_19;
+            const __VLS_20 = {
+                onClick: (() => __VLS_ctx.changeRelationType(relation))
+            };
+            let __VLS_16;
+            let __VLS_17;
+            (__VLS_ctx.placeholders.actions[`${relation === __VLS_ctx.FilterRelations.Exists ? 'empty' : relation}`]);
+            __VLS_nonNullable(__VLS_18.slots).default;
+            var __VLS_18;
+        }
+    }
+    var __VLS_5;
+    __VLS_styleScopedClasses['mc-filter-type-relation'];
+    __VLS_styleScopedClasses['mc-filter-type-relation__header'];
+    __VLS_styleScopedClasses['mc-filter-type-relation__buttons'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            McButton: McButton,
+            McTitle: McTitle,
+            FilterRelations: FilterRelations,
+            relations: relations,
+            relationType: relationType,
+            loading: loading,
+            component: component,
+            computedPlaceholder: computedPlaceholder,
+            isAjax: isAjax,
+            computedOptions: computedOptions,
+            selectedOptionValue: selectedOptionValue,
+            changeRelationType: changeRelationType,
+            handleSearchChange: handleSearchChange,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Объект выбранного
+         *  фильтра
+         */
+        filter: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true
+        },
+        /**
+         *  Текущее значение
+         *  добавленных фильтров
+         */
+        currentValues: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Объект выбранного
+         *  фильтра
+         */
+        filter: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true
+        },
+        /**
+         *  Текущее значение
+         *  добавленных фильтров
+         */
+        currentValues: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */

package/dist/components/patterns/McFilter/McFilterTypeText/McFilterTypeText.vue.js

@@ -0,0 +1,171 @@
+import McFieldText from '@/components/elements/McFieldText/McFieldText.vue';
+import { computed } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits();
+const props = defineProps({
+    /**
+     *  Значение
+     */
+    modelValue: {
+        type: [String, Number],
+        default: null
+    },
+    /**
+     *  Объект выбранного
+     *  фильтра
+     */
+    filter: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     *  Переводы локализаций
+     */
+    placeholders: {
+        type: Object,
+        required: true
+    }
+});
+const text = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(val) {
+        /**
+         * Событие по изменению значения
+         */
+        emit('update:modelValue', { value: val });
+    }
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            type: [String, Number],
+            default: null
+        },
+        /**
+         *  Объект выбранного
+         *  фильтра
+         */
+        filter: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true
+        }
+    },
+    __typeEmits: {},
+});
+;
+let __VLS_functionalComponentProps;
+function __VLS_template() {
+    const __VLS_ctx = {};
+    const __VLS_localComponents = {
+        ...{},
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_components;
+    const __VLS_localDirectives = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_directives;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    // @ts-ignore
+    [McFieldText,];
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(McFieldText, new McFieldText({ modelValue: ((__VLS_ctx.text)), placeholder: ((__VLS_ctx.filter.placeholder || __VLS_ctx.placeholders.enter)), ...{ class: ("mc-filter-type-text") }, name: ("mc_filter_type_text"), }));
+    const __VLS_1 = __VLS_0({ modelValue: ((__VLS_ctx.text)), placeholder: ((__VLS_ctx.filter.placeholder || __VLS_ctx.placeholders.enter)), ...{ class: ("mc-filter-type-text") }, name: ("mc_filter_type_text"), }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    var __VLS_5 = {};
+    var __VLS_4;
+    __VLS_styleScopedClasses['mc-filter-type-text'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            McFieldText: McFieldText,
+            text: text,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            type: [String, Number],
+            default: null
+        },
+        /**
+         *  Объект выбранного
+         *  фильтра
+         */
+        filter: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            type: [String, Number],
+            default: null
+        },
+        /**
+         *  Объект выбранного
+         *  фильтра
+         */
+        filter: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */