mediacube-ui 0.1.347 → 0.1.349

package/src/elements/McChip/McChip.vue

@@ -0,0 +1,305 @@
+<template>
+    <section class="mc-chip" tabindex="0" :class="classes" :style="styles">
+        <div v-if="$slots.icon" class="mc-chip__icon">
+            <!-- @slot Слот для иконки -->
+            <slot name="icon" />
+        </div>
+        <div v-if="title || $slots.default" class="mc-chip__title">
+            <!-- @slot контента -->
+            <slot>
+                {{ title }}
+            </slot>
+        </div>
+        <div v-if="counter || counter === 0" class="mc-chip__counter">
+            {{ counter }}
+        </div>
+        <button v-if="closable" class="mc-chip__button" type="button" v-on="$listeners">
+            <!-- @slot Слот для пользовательской кнопки -->
+            <slot name="button">
+                <mc-svg-icon size="200" name="cancel" />
+            </slot>
+        </button>
+    </section>
+</template>
+
+<script>
+import McSvgIcon from '../McSvgIcon/McSvgIcon'
+export default {
+    name: 'McChip',
+    components: { McSvgIcon },
+    props: {
+        /**
+         *  Text content
+         *
+         */
+        title: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Кнопка закрытия
+         *
+         */
+        closable: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Дизайн:
+         *  `purple, purple-invert т.д.`
+         */
+        variation: {
+            type: String,
+            default: 'transparent',
+        },
+        /**
+         *  Счетчик
+         *
+         */
+        counter: {
+            type: [Number, String],
+            default: null,
+        },
+        /**
+         *  Размер
+         *  m, m-compact, s, s-compact, xs, xs-compact
+         */
+        size: {
+            type: String,
+            default: 'm',
+        },
+        /**
+         *  Если нужен
+         *  иной цвет текста
+         */
+        textColor: {
+            type: String,
+            default: '',
+        },
+    },
+
+    computed: {
+        classes() {
+            return {
+                [`mc-chip--variation-${this.chipOptions.variation}`]: this.variation,
+                [`mc-chip--size-${this.size}`]: this.size,
+            }
+        },
+        chipOptions() {
+            const variationProps = this.variation?.split('-')
+            const currentVariation = variationProps[variationProps.length - 1]
+            let color
+            let variation
+            switch (currentVariation) {
+                case 'outline':
+                case 'invert': {
+                    variation = currentVariation
+                    color = this.variation.replace(`-${currentVariation}`, '')
+                    break
+                }
+                default: {
+                    variation = 'default'
+                    color = this.variation
+                    break
+                }
+            }
+            return {
+                color,
+                variation,
+            }
+        },
+        styles() {
+            const textColor = this.textColor || 'white'
+            return {
+                ['--mc-chip-color']: `var(--color-${this.chipOptions.color})`,
+                ['--mc-chip-text-color']: `var(--color-${textColor})`,
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/mixins';
+@import '../../tokens/durations';
+@import '../../tokens/font-families';
+@import '../../tokens/colors';
+@import '../../tokens/font-sizes';
+@import '../../tokens/line-heights';
+@import '../../tokens/spacings';
+@import '../../tokens/sizes';
+.mc-chip {
+    $block-name: &;
+    --mc-chip-text-color: #{$color-black};
+    --mc-chip-color: #{$color-white};
+    overflow: hidden;
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    color: var(--mc-chip-color);
+    font-family: $font-family-main;
+    font-size: $font-size-200;
+    line-height: $line-height-200;
+    max-width: 100%;
+    border-radius: 100px;
+    vertical-align: middle;
+    outline: none;
+    z-index: 0;
+    flex-shrink: 0;
+    overflow: visible;
+    &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: 0;
+        @include size(100%);
+        border-radius: inherit;
+        background-color: var(--mc-chip-color);
+    }
+    > * {
+        margin-right: $space-50;
+        z-index: 1;
+    }
+    > *:first-child {
+        margin-left: $space-50;
+    }
+
+    &--size {
+        @mixin padding-x($space, $space-compact) {
+            padding-right: $space;
+            padding-left: $space;
+            &-compact {
+                padding-right: $space-compact;
+                padding-left: $space-compact;
+            }
+        }
+
+        &-m {
+            &,
+            &-compact {
+                height: $size-400;
+            }
+            @include padding-x($space-100, $space-50);
+        }
+        &-s {
+            &,
+            &-compact {
+                height: $size-300;
+            }
+            @include padding-x($space-100, $space-50);
+        }
+        &-xs {
+            &,
+            &-compact {
+                height: $space-200;
+                font-size: $font-size-100;
+                line-height: $line-height-150;
+            }
+
+            @include padding-x($space-50, 0);
+        }
+    }
+
+    &__icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 0;
+    }
+
+    &__title {
+        @include ellipsis();
+        @include layout-flex-fix();
+        color: var(--mc-chip-text-color);
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__counter {
+        flex: 0 0 auto;
+        font-family: $font-family-main;
+        font-size: $font-size-200;
+        line-height: $line-height-200;
+        color: $color-dark-gray;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__button {
+        @include size($size-200);
+        position: relative;
+        display: flex;
+        flex: 0 0 auto;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        margin-right: 0;
+        border-radius: 0;
+        user-select: none;
+        text-decoration: none;
+        text-transform: none;
+        background-color: transparent;
+        background-image: none;
+        cursor: pointer;
+        outline: 0;
+        border: none;
+        transition: all $duration-s;
+        flex-wrap: nowrap;
+        -webkit-appearance: none;
+        -webkit-text-fill-color: currentColor;
+        color: $color-dark-gray;
+        opacity: 0.2;
+
+        &:hover {
+            opacity: 1;
+            color: $color-red;
+        }
+
+        &:active {
+            color: darken($color-red, 15%);
+        }
+    }
+
+    &--variation {
+        &-default {
+            #{$block-name} {
+                &__button {
+                    color: var(--mc-chip-color);
+                    &:hover {
+                        opacity: 1;
+                        color: $color-white;
+                    }
+                    &:active {
+                        color: darken($color-white, 15%);
+                    }
+                }
+                &__title {
+                    color: var(--mc-chip-text-color);
+                }
+                &__counter {
+                    color: var(--mc-chip-text-color);
+                    opacity: 0.5;
+                }
+            }
+        }
+        &-outline {
+            color: var(--mc-chip-color);
+            border: 1px solid var(--mc-chip-color);
+            &:before {
+                display: none;
+            }
+        }
+        &-invert {
+            color: $color-black;
+            &:before {
+                background-color: var(--mc-chip-color);
+                opacity: 0.1;
+            }
+        }
+    }
+}
+</style>

package/src/elements/McCropper/McCropper.vue

@@ -0,0 +1,135 @@
+<template>
+    <section class="mc-cropper">
+        <vue-cropper
+            ref="cropper"
+            drag-mode="crop"
+            background
+            alt="Avatar"
+            :aspect-ratio="1 / 1"
+            :initial-aspect-ratio="1 / 1"
+            :highlight="false"
+            :guides="false"
+            :zoomable="zoomable"
+            :view-mode="2"
+            :src="imgSrc"
+            @ready="$emit('ready')"
+        />
+    </section>
+</template>
+
+<script>
+const VueCropper = () => import('vue-cropperjs')
+import 'cropperjs/dist/cropper.css'
+
+export default {
+    name: 'McCropper',
+    status: 'ready',
+    release: '1.0.0',
+    components: {
+        VueCropper,
+    },
+    props: {
+        /**
+         *  Путь к изображению
+         *
+         */
+        imgSrc: {
+            type: [String, Object],
+            default: null,
+        },
+        zoomable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            cropImg: '',
+        }
+    },
+    watch: {
+        imgSrc(val) {
+            this.setImage(val)
+        },
+    },
+    methods: {
+        setImage() {
+            this.$refs.cropper.replace(this.imgSrc)
+        },
+        cropImage() {
+            this.$refs.cropper
+                .getCroppedCanvas({
+                    maxWidth: 650,
+                    maxHeight: 650,
+                })
+                .toBlob(blob => {
+                    /**
+                     * Событие по обрезке
+                     * @property {blob}
+                     */
+                    this.$emit('crop', blob)
+                })
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../tokens/border-radius';
+@import '../../tokens/opacities';
+@import '../../tokens/colors';
+@import '../../tokens/media-queries';
+.mc-cropper {
+    $block-name: &;
+
+    $color-main: $color-purple;
+
+    .cropper {
+        &-modal {
+            opacity: $opacity-active;
+            background-color: $color-white;
+        }
+
+        &-face,
+        &-line,
+        &-point {
+            opacity: 0;
+        }
+
+        &-view-box {
+            border-radius: $radius-circle;
+            outline: 1px dashed $color-main;
+        }
+
+        &-line {
+            background-color: $color-main;
+        }
+
+        &-point {
+            background: $color-main;
+
+            &.point-se {
+                @media #{$media-query-xl} {
+                    opacity: 1;
+                }
+
+                &:before {
+                    background-color: $color-main;
+                }
+            }
+        }
+
+        &-center {
+            display: none;
+        }
+
+        &-canvas {
+            height: 100% !important;
+        }
+
+        &-hide {
+            height: 100% !important;
+        }
+    }
+}
+</style>

package/src/elements/McDate/McDate.vue

@@ -0,0 +1,107 @@
+<template>
+    <section class="mc-date">
+        <!-- @slot Слот для вставки в начало -->
+        <slot name="prepend" />
+        <time class="mc-date__time" :datetime="dayjsDate">
+            <mc-title :variation="size" :ellipsis="ellipsis" :uppercase="uppercase" :color="color">
+                {{ formattedDate }}
+            </mc-title>
+        </time>
+        <!-- @slot Слот для вставки в конец -->
+        <slot name="append" />
+    </section>
+</template>
+
+<script>
+import { dayjs } from '../../utils/dayjs'
+import McTitle from '../McTitle/McTitle'
+
+export default {
+    name: 'McDate',
+
+    components: {
+        McTitle,
+    },
+
+    props: {
+        /**
+         *  Значение
+         */
+        value: {
+            type: String,
+            default: null,
+        },
+
+        /**
+         *  Формат даты
+         */
+        // eslint-disable-next-line vue/require-prop-types
+        format: {
+            default: 'DD.MM.YYYY',
+        },
+
+        /**
+         *  Размер даты
+         *  `h1`, `h2`, `h3`, `h4`, `subtitle`, `body`, `overline`.
+         */
+        size: {
+            type: String,
+            default: 'body',
+        },
+
+        /**
+         *  Перенос строк
+         */
+        ellipsis: {
+            type: Boolean,
+            default: true,
+        },
+
+        /**
+         *  Заглавные буквы
+         */
+        uppercase: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         *  Цвет текста:
+         *  `purple, red, gray и т.д.`
+         */
+        color: {
+            type: String,
+            default: 'black',
+        },
+    },
+
+    computed: {
+        dayjsDate() {
+            if (dayjs === null) return null
+            const locale = this.$i18n?.locale || 'ru' // TODO: maybe `en`?
+            return dayjs(this.value).locale(locale)
+        },
+        formattedDate() {
+            if (this.dayjsDate === null) return this.value
+            return this.dayjsDate.format(this.format)
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/mixins';
+@import '../../tokens/font-families';
+@import '../../tokens/spacings';
+.mc-date {
+    $block-name: &;
+
+    display: inline-flex;
+    align-items: center;
+    @include reset-text-indents();
+    @include child-indent-right($space-50);
+
+    &__time {
+        font-family: $font-family-main;
+    }
+}
+</style>