@soroka282/migrant.ui-kit 0.0.17 → 0.0.18

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@soroka282/migrant.ui-kit",
     "private": false,
-    "version": "0.0.17",
+    "version": "0.0.18",
     "type": "module",
     "main": "dist/migrant.ui-kit.umd.js",
     "module": "dist/migrant.ui-kit.es.js",
@@ -15,8 +15,14 @@
         "build-storybook": "storybook build",
         "publish:npm": "npm run build && npm publish --access public"
     },
+    "typesVersions": {
+        "*": {
+            "*": ["src/*"]
+        }
+    },
     "files": [
-        "dist"
+        "dist",
+        "src"
     ],
     "peerDependencies": {
         "vue": "^3.5.17"

package/src/App.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div>UI-kit</div>
+</template>

package/src/App.vue.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import('vue').DefineComponent<
+    {},
+    {},
+    {},
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').PublicProps,
+    Readonly<{}> & Readonly<{}>,
+    {},
+    {},
+    {},
+    {},
+    string,
+    import('vue').ComponentProvideOptions,
+    true,
+    {},
+    any
+>;
+export default _default;

package/src/assets/scss/common/swiper.scss

@@ -0,0 +1,20 @@
+.swiper {
+    width: 95vw;
+    height: 100%;
+    overflow: visible;
+}
+
+.swiper-slide {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-shrink: 0;
+    max-width: 100%;
+    text-align: center;
+    font-size: 18px;
+    padding-right: 10px;
+
+    @media (min-width: 368px) {
+        max-width: 84%;
+    }
+}

package/src/assets/scss/common/variables.scss

@@ -0,0 +1,15 @@
+:root {
+    --transparent: transparent;
+    --white: #fff;
+    --black: #000;
+    --purple-main: #666EE4;
+    --purple-66: #DDDEF5A8;
+    --gray-text: #3A3A3A;
+    --gray-border: #d8d8d8;
+    --gray: #323232;
+    --danger-1: #FD324E;
+    --danger-2: #EA4242;
+    --danger-3: #FFE9E9;
+    --danger-4: #FFDCDC;
+    --danger-5: #DA363C;
+}

package/src/assets/scss/index.scss

@@ -0,0 +1,10 @@
+@use 'mixins/index.mixin';
+@forward 'mixins/index.mixin';
+@forward 'common/variables';
+
+@include index.indentation-creator-list(margin);
+@include index.indentation-creator-list(padding);
+
+* {
+    font-family: inherit, sans-serif;
+}

package/src/assets/scss/mixins/flex.minix.scss

@@ -0,0 +1,7 @@
+@mixin flex ($direction: column, $gap: 12px, $alignItems: flex-start, $justifyContent: flex-start) {
+    display: flex;
+    align-items: $alignItems;
+    justify-content: $justifyContent;
+    flex-direction: $direction;
+    gap: $gap;
+}

package/src/assets/scss/mixins/identation.mixin.scss

@@ -0,0 +1,17 @@
+@use "sass:string";
+
+@mixin indentation-creator ($className, $indentationName, $direction, $maxCount: 200) {
+    @for $i from 1 through $maxCount {
+        .#{$className}-#{$i} {
+            #{$indentationName}-#{$direction}: #{$i}px;
+        }
+    }
+}
+
+@mixin indentation-creator-list ($indentationName) {
+    $directionNameList: (top, left, bottom, right);
+
+    @each $direction in $directionNameList {
+        @include indentation-creator(#{string.slice($indentationName, 0, 1)}#{string.slice($direction, 0, 1)}, $indentationName, $direction);
+    }
+}

package/src/assets/scss/mixins/index.mixin.scss

@@ -0,0 +1,3 @@
+@forward "typograph.mixin";
+@forward "flex.minix";
+@forward "identation.mixin";

package/src/assets/scss/mixins/typograph.mixin.scss

@@ -0,0 +1,5 @@
+@mixin text ($size: 14px, $weight: 400, $lheight: 22px) {
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lheight;
+}

package/src/components/UI/button/UIButton.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+import { UIColorName, UISize } from '@/types';
+import { UIButton } from '@/index';
+import { UIColor } from '@/constants';
+
+export default {
+    title: 'UIButton',
+    component: UIButton,
+    argTypes: {
+        isLoading: {
+            control: { type: 'boolean' },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+        },
+        isBoxShadow: {
+            control: { type: 'boolean' },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(UISize),
+        },
+        color: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        bgColor: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        loaderBorderColor: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+    },
+    args: {
+        size: UISize.M,
+        color: UIColorName.White,
+        bgColor: UIColorName.PurpleMain,
+        loaderBorderColor: 'transparent',
+        disabled: false,
+        isLoading: false,
+        isBoxShadow: true,
+    },
+} as Meta<typeof UIButton>;
+
+export const DefaultButton: StoryFn<typeof UIButton> = (args) => ({
+    components: { UIButton },
+    setup() {
+        return { args, UIColor };
+    },
+    template: `<UIButton
+        v-bind="args"
+        :color="UIColor[args.color]"
+        :bg-color="UIColor[args.bgColor]"
+        :loader-border-color="UIColor[args.loaderBorderColor]"
+    >
+        Кнопка
+    </UIButton>`,
+});

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

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+    import { computed } from 'vue';
+    import { Nullable, UIColorName, UIColorValues, UISize } from '@/types';
+    import { UILoader } from '@/index';
+    import { UIColor } from '@/constants';
+
+    const props = withDefaults(
+        defineProps<{
+            text?: string;
+            isLoading?: boolean;
+            isBoxShadow?: boolean;
+            disabled?: boolean;
+            size?: UISize;
+            color?: UIColorValues;
+            bgColor?: UIColorValues;
+            loaderBorderColor: UIColorValues;
+        }>(),
+        {
+            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<{
+        click: [void];
+    }>();
+
+    const classList = computed(() => ({
+        [`--${props.size}-size`]: props.size,
+        'is-box-shadow': props.isBoxShadow,
+    }));
+
+    const borderColor = computed<Nullable<UIColorValues>>(
+        () => (props.color as UIColorValues) || null,
+    );
+</script>
+
+<template>
+    <button
+        :class="classList"
+        :disabled="disabled || isLoading"
+        class="ui-button"
+        @click="emit('click')"
+    >
+        <UILoader
+            v-if="isLoading"
+            :border-color="borderColor"
+            :loader-border-color="loaderBorderColor"
+            class="ui-button__loader"
+        />
+        <slot v-else>
+            <span v-html="text" />
+        </slot>
+    </button>
+</template>
+
+<style scoped lang="scss">
+    @use '@/assets/scss/mixins/index.mixin';
+
+    .ui-button {
+        @include index.text(14px, 700, 100%);
+
+        width: 100%;
+        background: v-bind(bgColor);
+        color: v-bind(color);
+        border: none;
+        transition: filter 0.25s;
+        border-radius: 8px;
+        outline: none;
+        cursor: pointer;
+
+        &.is-box-shadow {
+            box-shadow: 0 4px 29px rgb(0 0 0 / 10%);
+        }
+
+        // button state
+        &:hover {
+            filter: brightness(90%);
+        }
+
+        &:disabled {
+            filter: opacity(70%);
+        }
+
+        &__loader {
+            margin: 0 auto;
+        }
+
+        // button size
+        &.--xs-size {
+            min-height: 33px;
+        }
+
+        &.--s-size {
+            min-height: 44px;
+        }
+
+        &.--m-size {
+            @include index.text(15px, 700, 100%);
+
+            min-height: 54px;
+        }
+
+        &.--l-size {
+            min-height: 64px;
+        }
+
+        &.--custom-size {
+            min-height: inherit;
+        }
+    }
+</style>

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 '@/index';
+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/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/UIInput.stories.ts

@@ -0,0 +1,92 @@
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+import { EInputComponentType, EInputInputmode, EInputType } from '@/types';
+import { UIInput } from '@/index';
+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>`,
+});