mediacube-ui 0.1.347 → 0.1.348

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.348](https://github.com/MediaCubeCo/mcui/compare/v0.1.347...v0.1.348) (2024-12-18)
+
 ### [0.1.347](https://github.com/MediaCubeCo/mcui/compare/v0.1.346...v0.1.347) (2024-12-18)
 
 ### [0.1.346](https://github.com/MediaCubeCo/mcui/compare/v0.1.345...v0.1.346) (2024-12-11)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.347",
+  "version": "0.1.348",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,
@@ -8,11 +8,18 @@
   "license": "MIT",
   "main": "dist/mediacube-ui.umd.js",
   "files": [
-    "dist",
     "src/assets/fonts",
     "src/assets/img",
     "src/assets/tokens",
     "src/assets/icons.svg",
+    "src/helpers",
+    "src/styles",
+    "src/tokens",
+    "src/utils",
+    "src/mixins",
+    "src/elements/**/*.vue",
+    "src/patterns/**/*.vue",
+    "src/templates/**/*.vue",
     "src/main.js"
   ],
   "scripts": {

package/src/elements/McAvatar/McAvatar.vue

@@ -0,0 +1,276 @@
+<script>
+import defaultImage from '../../assets/img/no_user.png'
+export default {
+    name: 'McAvatar',
+    functional: true,
+    props: {
+        /**
+         *  Путь до изображения
+         *
+         */
+        src: {
+            type: String,
+            default: defaultImage,
+        },
+        /**
+         *  Отложенная подгрузка
+         *
+         */
+        lazy: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Атрибут alt
+         */
+        alt: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Размеры
+         */
+        size: {
+            type: String,
+            default: '300',
+        },
+        /**
+         *  Круглый
+         *
+         */
+        rounded: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Цвет рамки
+         *
+         */
+        borderColor: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Цвет точки
+         *
+         */
+        dotColor: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Цвет точки
+         *
+         */
+        shadow: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Перетаскивание изображения
+         *
+         */
+        draggable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    render(h, { props, data }) {
+        const hasStatus = props.borderColor || props.dotColor
+
+        const avatarClasses = {
+            'mc-avatar': true,
+            'mc-avatar--rounded': props.rounded,
+            'mc-avatar--shadow': props.shadow && !hasStatus,
+            [`mc-avatar--size-${props.size}`]: props.size,
+            ...(!hasStatus && data.class ? data.class : {}),
+        }
+        const wrapperClasses = {
+            'mc-avatar-status': true,
+            'mc-avatar-status--shadow': props.shadow,
+            [`mc-avatar-status--size-${props.size}`]: props.size,
+            'mc-avatar-status--has-dot': !!props.dotColor,
+            ...(data.class || {}),
+        }
+
+        if (data.staticClass) {
+            const staticClasses = data.staticClass.split(' ')
+            const targetClasses = hasStatus ? wrapperClasses : avatarClasses
+            staticClasses.forEach(c => c && (targetClasses[c] = true))
+        }
+
+        let style = {}
+        if (hasStatus) {
+            if (props.borderColor) style['--mc-avatar-border-color'] = `var(--color-${props.borderColor})`
+            if (props.dotColor) style['--mc-avatar-dot-color'] = `var(--color-${props.dotColor})`
+        }
+        if (props.size) {
+            style['--mc-avatar-avatar-size'] = `var(--size-${props.size})`
+            if (+props.size < 500) {
+                style['--mc-avatar-avatar-radius'] = `var(--radius-50)`
+            }
+            switch (+props.size) {
+                case 500:
+                case 600: {
+                    style['--mc-avatar-dot-size'] = `var(--size-150)`
+                    break
+                }
+                case 700:
+                case 800:
+                case 900:
+                case 1000: {
+                    style['--mc-avatar-dot-size'] = `var(--size-200)`
+                    style['--mc-avatar-dot-border-width'] = '2px'
+                    break
+                }
+            }
+        }
+        if (data.staticStyle) {
+            style = data.staticStyle
+        }
+
+        const lazyOptions = {
+            name: 'lazy',
+            value: {
+                src: props.src,
+                error: defaultImage,
+                attempt: 1,
+            },
+        }
+        const directives = props.lazy ? [lazyOptions] : []
+
+        const createAvatar = () => {
+            return h(
+                'figure',
+                {
+                    class: avatarClasses,
+                    style: {
+                        ...(!hasStatus ? style : {}),
+                    },
+                },
+                [
+                    h('img', {
+                        class: 'mc-avatar__img',
+                        attrs: {
+                            alt: props.alt,
+                            ...(!props.lazy ? { src: props.src || defaultImage } : {}),
+                            draggable: props.draggable,
+                        },
+                        directives,
+                        key: props.src,
+                        on: {
+                            error(e) {
+                                if (!e.target) return
+                                e.target.src = defaultImage
+                            },
+                        },
+                    }),
+                ],
+            )
+        }
+
+        const createWrapper = () => {
+            return h(
+                'section',
+                {
+                    class: wrapperClasses,
+                    style: {
+                        ...style,
+                    },
+                },
+                [createAvatar()],
+            )
+        }
+        return hasStatus ? createWrapper() : createAvatar()
+    },
+}
+</script>
+<style lang="scss">
+@import '../../styles/mixins';
+@import '../../tokens/durations';
+@import '../../tokens/colors';
+@import '../../tokens/spacings';
+$color-borders: $token-colors;
+$dot-colors: $token-colors;
+
+.mc-avatar-status {
+    $status-name: &;
+    --mc-avatar-dot-border-width: 1px;
+    --mc-avatar-dot-size: #{$space-100};
+    --mc-avatar-border-color: initial;
+    display: inline-flex;
+    border: 2px solid var(--mc-avatar-border-color);
+    padding: 1px;
+    position: relative;
+    border-radius: $radius-circle;
+
+    .mc-avatar {
+        border-radius: $radius-circle;
+    }
+
+    &::after {
+        width: var(--mc-avatar-dot-size);
+        height: var(--mc-avatar-dot-size);
+        @include pseudo($display: none);
+        left: 0;
+        bottom: 0;
+        border: var(--mc-avatar-dot-border-width) solid $color-white;
+        background-color: var(--mc-avatar-dot-color);
+        z-index: 2;
+        border-radius: 50%;
+    }
+    &--has-dot {
+        &:after {
+            display: block;
+        }
+    }
+
+    transition: box-shadow $duration-s;
+
+    &:hover,
+    &:focus {
+        .mc-avatar {
+            box-shadow: none;
+        }
+    }
+
+    &--shadow {
+        &:hover,
+        &:focus {
+            background-color: $color-hover-gray;
+            box-shadow: 0 0 0 $space-50 $color-hover-gray;
+        }
+    }
+}
+
+.mc-avatar {
+    $avatar-name: &;
+    --mc-avatar-avatar-radius: #{$space-100};
+    @include reset();
+    position: relative;
+    display: inline-block;
+    width: var(--mc-avatar-avatar-size);
+    height: var(--mc-avatar-avatar-size);
+    min-width: var(--mc-avatar-avatar-size);
+    border-radius: var(--mc-avatar-avatar-radius);
+    overflow: hidden;
+    background-color: $color-hover-gray;
+    transition: box-shadow $duration-s;
+
+    &__img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    &--rounded {
+        border-radius: $radius-circle;
+    }
+
+    &--shadow {
+        &:hover,
+        &:focus {
+            box-shadow: 0 0 0 $space-100 $color-hover-gray;
+        }
+    }
+}
+</style>

package/src/elements/McBadge/McBadge.vue

@@ -0,0 +1,153 @@
+<script>
+export default {
+    name: 'McBadge',
+    functional: true,
+    props: {
+        /**
+         *  Дизайн:
+         *  `purple, purple-outline т.д.`
+         */
+        variation: {
+            type: String,
+            default: 'transparent',
+        },
+        /**
+         *  Вертикальная черта (в таблице, к примеру)
+         */
+        verticalLine: {
+            type: Boolean,
+            default: false,
+        },
+        modern: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    render(h, { props, slots, data, listeners }) {
+        const variation = `${props.variation}${props.modern ? '-modern' : ''}`
+        const classes = {
+            'mc-badge': true,
+            'mc-badge--vertical-line': props.verticalLine,
+            'mc-badge--modern': props.modern,
+            ...(data.class || {}),
+        }
+
+        if (data.staticClass) {
+            const staticClasses = data.staticClass.split(' ')
+            staticClasses.forEach(c => c && (classes[c] = true))
+        }
+
+        let style = {}
+        const texts = variation.split('-')
+        const currentStyle = texts[texts.length - 1]
+        const color = props.variation ? variation.replace(`-${currentStyle}`, '') : variation
+        const setProperty = ({ property = '--mc-badge-color', value, newColor = color } = {}) =>
+            (style[property] = value || `var(--color-${newColor})`)
+        switch (currentStyle) {
+            case 'outline': {
+                setProperty()
+                setProperty({ property: '--mc-badge-border-color' })
+                setProperty({ property: '--mc-badge-background-color', newColor: 'white' })
+                setProperty({ property: '--mc-badge-background-opacity', value: '0.4' })
+                break
+            }
+            case 'invert':
+            case 'modern': {
+                setProperty()
+                setProperty({ property: '--mc-badge-background-color' })
+                setProperty({ property: '--mc-badge-background-opacity', value: '0.1' })
+                break
+            }
+            default: {
+                const lightColors = ['hover-gray', 'white', 'lighter-blue', 'lighter-purple', 'toxic', 'transparent']
+                lightColors.includes(variation) && setProperty({ newColor: 'black' })
+                setProperty({ property: '--mc-badge-background-color', newColor: variation })
+                break
+            }
+        }
+        if (data.staticStyle) {
+            style = data.staticStyle
+        }
+
+        return h(
+            'section',
+            {
+                class: classes,
+                style,
+                on: listeners,
+            },
+            [
+                h(
+                    'div',
+                    {
+                        class: 'mc-badge__text',
+                    },
+                    slots()['default'],
+                ),
+                h('div', {
+                    class: 'mc-badge__background',
+                }),
+            ],
+        )
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/mixins';
+@import '../../tokens/font-families';
+@import '../../tokens/letter-spacings';
+@import '../../tokens/colors';
+@import '../../tokens/font-sizes';
+@import '../../tokens/line-heights';
+@import '../../tokens/font-weights';
+@import '../../tokens/spacings';
+.mc-badge {
+    $block-name: &;
+    --mc-badge-color: #{$color-white};
+    --mc-badge-background-color: inherit;
+    --mc-badge-background-opacity: initial;
+    --mc-badge-border-color: #{$color-transparent};
+    @include ellipsis(100%, inline-flex);
+    align-items: center;
+    color: var(--mc-badge-color);
+    position: relative;
+    font-family: $font-family-main;
+    font-size: $font-size-100;
+    line-height: $line-height-150;
+    height: $line-height-200;
+    font-weight: $font-weight-medium;
+    text-transform: uppercase;
+    letter-spacing: $letter-spacing-m;
+    vertical-align: middle;
+    padding: 2px $space-100;
+    border-radius: $radius-50;
+    &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        @include size(100%);
+        background-color: var(--mc-badge-background-color);
+        opacity: var(--mc-badge-background-opacity);
+        border: 1px solid var(--mc-badge-border-color);
+        border-radius: inherit;
+    }
+    &__text {
+        z-index: 1;
+    }
+    &--modern {
+        border-radius: $radius-50;
+    }
+    &--vertical-line {
+        padding: 0;
+        border-radius: 0;
+        width: 5px;
+        #{$block-name} {
+            &__text {
+                display: none;
+            }
+        }
+    }
+}
+</style>