mediacube-ui 0.1.345 → 0.1.347

package/src/elements/McChip/McChip.vue

@@ -1,300 +0,0 @@
-<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';
-.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.10;
-            }
-        }
-    }
-}
-</style>

package/src/elements/McCropper/McCropper.vue

@@ -1,133 +0,0 @@
-<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';
-.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

@@ -1,105 +0,0 @@
-<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,
-        },
-
-        /**
-         *  Формат даты
-         */
-        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';
-.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>