@soroka282/migrant.ui-kit 0.0.5

package/src/components/UI/button/UIButton.vue.js

@@ -0,0 +1,94 @@
+import { computed } from 'vue';
+import { UIColorName, UISize } from '@/types';
+import { UILoader } from '@/components';
+import { UIColor } from '@/constants';
+const props = withDefaults(defineProps(), {
+    text: '',
+    isLoading: false,
+    isBoxShadow: true,
+    disabled: false,
+    size: UISize.M,
+    color: UIColor[UIColorName.PurpleMain],
+    bgColor: UIColor[UIColorName.White],
+    loaderBorderColor: UIColor[UIColorName.Transparent],
+});
+const emit = defineEmits();
+const classList = computed(() => ({
+    [`--${props.size}-size`]: props.size,
+    'is-box-shadow': props.isBoxShadow,
+}));
+const borderColor = computed(() => props.color || null);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_withDefaultsArg = (function (t) { return t; })({
+    text: '',
+    isLoading: false,
+    isBoxShadow: true,
+    disabled: false,
+    size: UISize.M,
+    color: UIColor[UIColorName.PurpleMain],
+    bgColor: UIColor[UIColorName.White],
+    loaderBorderColor: UIColor[UIColorName.Transparent],
+});
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+// CSS variable injection 
+__VLS_ctx.bgColor;
+__VLS_ctx.color;
+// CSS variable injection end 
+__VLS_asFunctionalElement(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.emit('click');
+        } },
+    ...{ class: (__VLS_ctx.classList) },
+    disabled: (__VLS_ctx.disabled || __VLS_ctx.isLoading),
+    ...{ class: "ui-button" },
+});
+if (__VLS_ctx.isLoading) {
+    const __VLS_0 = {}.UILoader;
+    /** @type {[typeof __VLS_components.UILoader, ]} */ ;
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+        borderColor: (__VLS_ctx.borderColor),
+        loaderBorderColor: (__VLS_ctx.loaderBorderColor),
+        ...{ class: "ui-button__loader" },
+    }));
+    const __VLS_2 = __VLS_1({
+        borderColor: (__VLS_ctx.borderColor),
+        loaderBorderColor: (__VLS_ctx.loaderBorderColor),
+        ...{ class: "ui-button__loader" },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+}
+else {
+    var __VLS_4 = {};
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.span)({});
+    __VLS_asFunctionalDirective(__VLS_directives.vHtml)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.text) }, null, null);
+}
+/** @type {__VLS_StyleScopedClasses['ui-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['ui-button__loader']} */ ;
+// @ts-ignore
+var __VLS_5 = __VLS_4;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            UILoader: UILoader,
+            emit: emit,
+            classList: classList,
+            borderColor: borderColor,
+        };
+    },
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

package/src/components/UI/card/UICard.stories.js

@@ -0,0 +1,54 @@
+import { UIColorName, UISize } from '@/types';
+import { UICard } from '@/components';
+import { UIColor } from '@/constants';
+export default {
+    title: 'UICard',
+    component: UICard,
+    argTypes: {
+        isBoxShadow: {
+            control: { type: 'boolean' },
+        },
+        isBorder: {
+            control: { type: 'boolean' },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(UISize),
+        },
+        bgColor: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        color: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        borderRadius: {
+            control: { type: 'text' },
+        },
+        border: {
+            control: { type: 'text' },
+        },
+    },
+    args: {
+        size: UISize.M,
+        bgColor: UIColorName.PurpleMain,
+        color: UIColorName.White,
+        isBoxShadow: true,
+        isBorder: true,
+        borderRadius: '12px',
+        padding: '12px',
+    },
+};
+export const DefaultCard = (args) => ({
+    components: { UICard },
+    setup() {
+        return { args, UIColor };
+    },
+    template: `<UICard
+        v-bind="args"
+        :bg-color="UIColor[args.bgColor]"
+    >
+        UICard
+    </UICard>`,
+});

package/src/components/UI/card/UICard.stories.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+import { UIColorName, UISize } from '@/types';
+import { UICard } from '@/components';
+import { UIColor } from '@/constants';
+
+export default {
+    title: 'UICard',
+    component: UICard,
+    argTypes: {
+        isBoxShadow: {
+            control: { type: 'boolean' },
+        },
+        isBorder: {
+            control: { type: 'boolean' },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(UISize),
+        },
+        bgColor: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        color: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        borderRadius: {
+            control: { type: 'text' },
+        },
+        border: {
+            control: { type: 'text' },
+        },
+    },
+    args: {
+        size: UISize.M,
+        bgColor: UIColorName.PurpleMain,
+        color: UIColorName.White,
+        isBoxShadow: true,
+        isBorder: true,
+        borderRadius: '12px',
+        padding: '12px',
+    },
+} as Meta<typeof UICard>;
+
+export const DefaultCard: StoryFn<typeof UICard> = (args) => ({
+    components: { UICard },
+    setup() {
+        return { args, UIColor };
+    },
+    template: `<UICard
+        v-bind="args"
+        :bg-color="UIColor[args.bgColor]"
+    >
+        UICard
+    </UICard>`,
+});

package/src/components/UI/card/UICard.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+    import { computed } from 'vue';
+    import { UIColorName, UIColorValues } from '@/types';
+    import { UIColor } from '@/constants';
+
+    const props = withDefaults(
+        defineProps<{
+            isBoxShadow?: boolean;
+            isBorder?: boolean;
+            bgColor?: UIColorValues;
+            color?: UIColorValues;
+            borderRadius?: string;
+            padding?: string;
+        }>(),
+        {
+            isBoxShadow: true,
+            isBorder: true,
+            bgColor: UIColor[UIColorName.White],
+            color: UIColor[UIColorName.GrayText],
+            borderRadius: '12px',
+            padding: '12px',
+        },
+    );
+
+    const classList = computed(() => ({
+        '--box-shadow': props.isBoxShadow,
+        '--border': props.isBorder,
+    }));
+</script>
+
+<template>
+    <div class="ui-card" :class="classList">
+        <slot />
+    </div>
+</template>
+
+<style scoped lang="scss">
+    .ui-card {
+        padding: v-bind(padding);
+        border-radius: v-bind(borderRadius);
+        background-color: v-bind(bgColor);
+        border: 1px solid transparent;
+
+        &.--border {
+            border: 1px solid rgb(255 255 255 / 50%);
+        }
+
+        &.--box-shadow {
+            box-shadow: 0 0 13.5px 0 rgb(180 180 180 / 15%);
+        }
+    }
+</style>

package/src/components/UI/card/UICard.vue.js

@@ -0,0 +1,59 @@
+import { computed } from 'vue';
+import { UIColorName } from '@/types';
+import { UIColor } from '@/constants';
+const props = withDefaults(defineProps(), {
+    isBoxShadow: true,
+    isBorder: true,
+    bgColor: UIColor[UIColorName.White],
+    color: UIColor[UIColorName.GrayText],
+    borderRadius: '12px',
+    padding: '12px',
+});
+const classList = computed(() => ({
+    '--box-shadow': props.isBoxShadow,
+    '--border': props.isBorder,
+}));
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_withDefaultsArg = (function (t) { return t; })({
+    isBoxShadow: true,
+    isBorder: true,
+    bgColor: UIColor[UIColorName.White],
+    color: UIColor[UIColorName.GrayText],
+    borderRadius: '12px',
+    padding: '12px',
+});
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+// CSS variable injection 
+__VLS_ctx.padding;
+__VLS_ctx.borderRadius;
+__VLS_ctx.bgColor;
+// CSS variable injection end 
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "ui-card" },
+    ...{ class: (__VLS_ctx.classList) },
+});
+var __VLS_0 = {};
+/** @type {__VLS_StyleScopedClasses['ui-card']} */ ;
+// @ts-ignore
+var __VLS_1 = __VLS_0;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            classList: classList,
+        };
+    },
+    __typeProps: {},
+    props: {},
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeProps: {},
+    props: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

package/src/components/UI/inputs/BaseMaskedInput.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+    import { computed, ref, watch } from 'vue';
+    import { mask } from 'maska';
+
+    const props = withDefaults(
+        defineProps<{
+            value?: string | number;
+            maska: string | any[];
+            masked?: boolean;
+            tokens: any;
+            id: string;
+        }>(),
+        {
+            value: '',
+            masked: false,
+            tokens: () => ({}),
+            id: '',
+        },
+    );
+
+    const emit = defineEmits<{
+        input: [any];
+        'update:modelValue': [any];
+        blur: [any];
+        focus: [any];
+    }>();
+
+    const lastValue = ref<string | null>(null);
+    const display = ref(props.value);
+
+    const config = computed(() => ({
+        mask: props.maska,
+        tokens: Object.assign(
+            props.tokens,
+            {
+                '#': { pattern: /\d/ },
+                p: { pattern: /\d|\// },
+                F: {
+                    pattern: /[0-9АВЕКМНОРСТУХавекмнорстухABEKMHOPCTYXabekmhopctyx]/,
+                    transform: (v: string) => v.toUpperCase(),
+                },
+                f: {
+                    pattern: /[АВЕКМНОРСТУХавекмнорстухABEKMHOPCTYXabekmhopctyx]/,
+                    transform: (v: string) => v.toUpperCase(),
+                },
+                A: {
+                    pattern: /[0-9ABCDEFGHJKLMNPRSTUVWXYZabcdefghjklmnprstuvwxyz]/,
+                    transform: (v: string) => v.toUpperCase(),
+                },
+                0: { pattern: /\d/ },
+            },
+            props.tokens,
+        ),
+
+        masked: props.masked,
+    }));
+
+    const refresh = (val: any) => {
+        display.value = val;
+        const value = mask(val, config.value.mask, config.value.tokens, config.value.masked);
+        if (value !== lastValue.value) {
+            lastValue.value = value;
+            emit('input', value);
+            emit('update:modelValue', value);
+        }
+    };
+
+    watch(
+        () => props.value,
+        (newValue) => {
+            if (newValue !== lastValue.value) {
+                display.value = newValue;
+            }
+        },
+    );
+
+    watch(
+        () => props.masked,
+        () => {
+            refresh(display.value);
+        },
+    );
+
+    const onInput = (evt: any) => {
+        if (evt.isTrusted || !evt.inputType) {
+            return;
+        }
+        refresh(evt.target.value);
+    };
+</script>
+
+<template>
+    <input
+        :id="id"
+        v-maska="config"
+        :value="display"
+        @maska="onInput"
+        @blur="emit('blur', $event)"
+        @focus="emit('focus', $event)"
+    />
+</template>

package/src/components/UI/inputs/BaseMaskedInput.vue.js

@@ -0,0 +1,100 @@
+import { computed, ref, watch } from 'vue';
+import { mask } from 'maska';
+const props = withDefaults(defineProps(), {
+    value: '',
+    masked: false,
+    tokens: () => ({}),
+    id: '',
+});
+const emit = defineEmits();
+const lastValue = ref(null);
+const display = ref(props.value);
+const config = computed(() => ({
+    mask: props.maska,
+    tokens: Object.assign(props.tokens, {
+        '#': { pattern: /\d/ },
+        p: { pattern: /\d|\// },
+        F: {
+            pattern: /[0-9АВЕКМНОРСТУХавекмнорстухABEKMHOPCTYXabekmhopctyx]/,
+            transform: (v) => v.toUpperCase(),
+        },
+        f: {
+            pattern: /[АВЕКМНОРСТУХавекмнорстухABEKMHOPCTYXabekmhopctyx]/,
+            transform: (v) => v.toUpperCase(),
+        },
+        A: {
+            pattern: /[0-9ABCDEFGHJKLMNPRSTUVWXYZabcdefghjklmnprstuvwxyz]/,
+            transform: (v) => v.toUpperCase(),
+        },
+        0: { pattern: /\d/ },
+    }, props.tokens),
+    masked: props.masked,
+}));
+const refresh = (val) => {
+    display.value = val;
+    const value = mask(val, config.value.mask, config.value.tokens, config.value.masked);
+    if (value !== lastValue.value) {
+        lastValue.value = value;
+        emit('input', value);
+        emit('update:modelValue', value);
+    }
+};
+watch(() => props.value, (newValue) => {
+    if (newValue !== lastValue.value) {
+        display.value = newValue;
+    }
+});
+watch(() => props.masked, () => {
+    refresh(display.value);
+});
+const onInput = (evt) => {
+    if (evt.isTrusted || !evt.inputType) {
+        return;
+    }
+    refresh(evt.target.value);
+};
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_withDefaultsArg = (function (t) { return t; })({
+    value: '',
+    masked: false,
+    tokens: () => ({}),
+    id: '',
+});
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.input)({
+    ...{ onMaska: (__VLS_ctx.onInput) },
+    ...{ onBlur: (...[$event]) => {
+            __VLS_ctx.emit('blur', $event);
+        } },
+    ...{ onFocus: (...[$event]) => {
+            __VLS_ctx.emit('focus', $event);
+        } },
+    id: (__VLS_ctx.id),
+    value: (__VLS_ctx.display),
+});
+__VLS_asFunctionalDirective(__VLS_directives.vMaska)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.config) }, null, null);
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            emit: emit,
+            display: display,
+            config: config,
+            onInput: onInput,
+        };
+    },
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+; /* PartiallyEnd: #4569/main.vue */

package/src/components/UI/inputs/UIInput.stories.js

@@ -0,0 +1,89 @@
+import { EInputComponentType, EInputInputmode, EInputType } from '@/types';
+import { UIInput } from '@/components';
+import { UIColor } from '@/constants';
+export default {
+    title: 'UIInput',
+    component: UIInput,
+    argTypes: {
+        isError: {
+            control: { type: 'boolean' },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+        },
+        readonly: {
+            control: { type: 'boolean' },
+        },
+        masked: {
+            control: { type: 'boolean' },
+        },
+        isCapitalize: {
+            control: { type: 'boolean' },
+        },
+        isSetInputFocus: {
+            control: { type: 'boolean' },
+        },
+        component: {
+            control: { type: 'select' },
+            options: Object.values(EInputComponentType),
+        },
+        id: {
+            control: { type: 'text' },
+        },
+        label: {
+            control: { type: 'text' },
+        },
+        mask: {
+            control: { type: 'text' },
+        },
+        placeholder: {
+            control: { type: 'text' },
+        },
+        modelValue: {
+            control: { type: 'text' },
+        },
+        errorMessage: {
+            control: { type: 'text' },
+        },
+        delay: {
+            control: { type: 'text' },
+        },
+        type: {
+            control: { type: 'select' },
+            options: Object.values(EInputType),
+        },
+        inputmode: {
+            control: { type: 'select' },
+            options: Object.values(EInputInputmode),
+        },
+    },
+    args: {
+        component: EInputComponentType.input,
+        id: 'input',
+        label: 'label',
+        mask: '',
+        placeholder: '',
+        type: EInputType.text,
+        inputmode: EInputInputmode.text,
+        modelValue: '',
+        errorMessage: '',
+        isError: false,
+        disabled: false,
+        readonly: false,
+        masked: false,
+        isCapitalize: false,
+        isSetInputFocus: false,
+        delay: 0,
+    },
+};
+export const DefaultButton = (args) => ({
+    components: { UIInput },
+    setup() {
+        return { args, UIColor };
+    },
+    template: `<UIInput
+        v-bind="args"
+    >
+        Кнопка
+    </UIInput>`,
+});

package/src/components/UI/inputs/UIInput.stories.ts

@@ -0,0 +1,92 @@
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+import { EInputComponentType, EInputInputmode, EInputType } from '@/types';
+import { UIInput } from '@/components';
+import { UIColor } from '@/constants';
+
+export default {
+    title: 'UIInput',
+    component: UIInput,
+    argTypes: {
+        isError: {
+            control: { type: 'boolean' },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+        },
+        readonly: {
+            control: { type: 'boolean' },
+        },
+        masked: {
+            control: { type: 'boolean' },
+        },
+        isCapitalize: {
+            control: { type: 'boolean' },
+        },
+        isSetInputFocus: {
+            control: { type: 'boolean' },
+        },
+        component: {
+            control: { type: 'select' },
+            options: Object.values(EInputComponentType),
+        },
+        id: {
+            control: { type: 'text' },
+        },
+        label: {
+            control: { type: 'text' },
+        },
+        mask: {
+            control: { type: 'text' },
+        },
+        placeholder: {
+            control: { type: 'text' },
+        },
+        modelValue: {
+            control: { type: 'text' },
+        },
+        errorMessage: {
+            control: { type: 'text' },
+        },
+        delay: {
+            control: { type: 'text' },
+        },
+        type: {
+            control: { type: 'select' },
+            options: Object.values(EInputType),
+        },
+        inputmode: {
+            control: { type: 'select' },
+            options: Object.values(EInputInputmode),
+        },
+    },
+    args: {
+        component: EInputComponentType.input,
+        id: 'input',
+        label: 'label',
+        mask: '',
+        placeholder: '',
+        type: EInputType.text,
+        inputmode: EInputInputmode.text,
+        modelValue: '',
+        errorMessage: '',
+        isError: false,
+        disabled: false,
+        readonly: false,
+        masked: false,
+        isCapitalize: false,
+        isSetInputFocus: false,
+        delay: 0,
+    },
+} as Meta<typeof UIInput>;
+
+export const DefaultButton: StoryFn<typeof UIInput> = (args) => ({
+    components: { UIInput },
+    setup() {
+        return { args, UIColor };
+    },
+    template: `<UIInput
+        v-bind="args"
+    >
+        Кнопка
+    </UIInput>`,
+});