mediacube-ui-v2 0.0.5 → 0.0.7

package/src/components/patterns/McSideBar/McSideBarTop/McSideBarTop.vue

@@ -1,211 +0,0 @@
-<script setup lang="ts">
-import McDropdown from '@/components/patterns/McDropdown/McDropdown.vue'
-import McButton from '@/components/elements/McButton/McButton.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import McPreview from '@/components/patterns/McPreview/McPreview.vue'
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import { computed, inject, type PropType, ref } from 'vue'
-import { useHelper } from '@/composables/useHelper'
-import { ButtonSize, DropdownPositions, HorizontalAlignment, SidebarTheme, TitleVariations, Weights } from '@/enums'
-import type {
-  ButtonVariationUnion,
-  DropdownPositionsUnion,
-  IconsListUnion,
-  ISideBarApp,
-  ISidebarThemeConfig,
-  ISidebarThemeConfigProvide,
-  TitleVariationsUnion
-} from '@/types'
-import { defaultThemes } from '@/mocks/sidebar'
-
-const helper = useHelper()
-const provideData = inject<ISidebarThemeConfigProvide>('provideData', {} as ISidebarThemeConfigProvide)
-const props = defineProps({
-  /**
-   *  Меню приложений
-   *
-   */
-  menuApps: {
-    type: Array as PropType<ISideBarApp[]>,
-    default: () => []
-  },
-  /**
-   *  Название сервиса
-   *
-   */
-  logoTitle: {
-    type: String as PropType<string>,
-    default: 'Dashboard'
-  },
-  /**
-   *  Размер текста названия сервиса
-   *
-   */
-  logoTitleVariation: {
-    type: String as () => TitleVariationsUnion,
-    default: TitleVariations.Subtitle
-  },
-  /**
-   *  Путь до изображения
-   */
-  logoSrc: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   *  Имя иконки
-   *  заголовка
-   */
-  logoIcon: {
-    type: String as () => IconsListUnion,
-    default: ''
-  },
-  dropdownPosition: {
-    type: String as () => DropdownPositionsUnion,
-    default: DropdownPositions.Left
-  },
-  /**
-   *  Компактный вид
-   */
-  compact: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  }
-})
-
-const dropIsOpen = ref<boolean>(false)
-
-const themeConfig = computed((): ISidebarThemeConfig => {
-  return provideData.currentThemeConfig || defaultThemes[SidebarTheme.Black]
-})
-
-const computedMenuApps = computed((): ISideBarApp[] | null => {
-  if (helper.isEmpty(props.menuApps)) return null
-  return props.menuApps.filter((app) => !Object.prototype.hasOwnProperty.call(app, 'isVisible') || app.isVisible)
-})
-</script>
-
-<template>
-  <div class="mc-side-bar-top" :class="`mc-side-bar-top--theme-${themeConfig.dropdownActivator}`">
-    <mc-preview v-if="!computedMenuApps">
-      <template v-if="logoSrc" #left>
-        <img class="mc-side-bar-top__img" :src="logoSrc" width="24" height="24" :alt="logoTitle" />
-      </template>
-      <template #top>
-        <mc-title v-if="!compact" :weight="Weights.SemiBold" :variation="logoTitleVariation">
-          {{ logoTitle }}
-          <template #icon-append>
-            <slot name="title-append" />
-          </template>
-        </mc-title>
-      </template>
-    </mc-preview>
-    <mc-dropdown v-else v-model="dropIsOpen" :position="dropdownPosition" :items="computedMenuApps">
-      <template #activator>
-        <mc-preview>
-          <template #left>
-            <img v-if="logoSrc" class="mc-side-bar-top__img" :src="logoSrc" width="24" height="24" :alt="logoTitle" />
-            <mc-svg-icon v-else-if="logoIcon" class="rotate" :name="logoIcon" />
-          </template>
-          <template #top>
-            <mc-button
-              :variation="`${themeConfig.dropdownActivator}-link` as ButtonVariationUnion"
-              :size="compact ? ButtonSize.LCompact : ButtonSize.L"
-              class="mc-side-bar-top__activator-btn"
-            >
-              <mc-title v-if="!compact" :weight="Weights.SemiBold" :variation="logoTitleVariation">
-                {{ logoTitle }}
-                <template #icon-append>
-                  <slot name="title-append" />
-                </template>
-              </mc-title>
-              <template #icon-append>
-                <mc-svg-icon class="rotate" name="arrow_drop_down" color="gray" />
-              </template>
-            </mc-button>
-          </template>
-        </mc-preview>
-      </template>
-      <template #item="{ item }">
-        <mc-button
-          full-width
-          :text-align="HorizontalAlignment.Left"
-          variation="black-flat"
-          :href="item.href"
-          :to="item.to"
-          :target="item.target"
-          :is-active="item.isActive"
-          :exact="item.exact"
-        >
-          <template #icon-prepend>
-            <mc-svg-icon v-if="item.icon" :name="item.icon" />
-            <img v-else-if="item.image" :src="item.image" width="24" height="24" alt="service image" />
-          </template>
-          {{ item.name }}
-        </mc-button>
-      </template>
-    </mc-dropdown>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../../assets/styles/mixins' as *;
-@use '../../../../assets/tokens/spacings' as *;
-@use '../../../../assets/tokens/colors' as *;
-@use '../../../../assets/tokens/line-heights' as *;
-@use '../../../../assets/tokens/sizes' as *;
-@use '../../../../assets/tokens/font-sizes' as *;
-.mc-side-bar-top {
-  $block-name: &;
-  @include reset-text-indents();
-  position: sticky;
-  top: -($space-250);
-  padding: $space-250 $space-100;
-  background: $color-white;
-  margin: -($space-250) (-($space-100)) $space-150 !important;
-  z-index: 2;
-  .mc-dropdown__toggle {
-    &:hover {
-      cursor: pointer;
-    }
-    .mc-preview__left {
-      margin-inline-end: 0;
-    }
-    .mc-button {
-      line-height: $line-height-250;
-      &__text {
-        margin-inline-start: $space-100;
-      }
-      &__append {
-        margin-inline-start: 0;
-      }
-      .rotate {
-        @include size($size-200);
-      }
-    }
-  }
-  &__img {
-    margin-inline-start: $space-100;
-  }
-  &__activator-btn {
-    font-size: $font-size-400;
-    line-height: $line-height-300;
-  }
-  &--theme-white {
-    background: $color-black;
-    .mc-preview__top {
-      .mc-title {
-        color: $color-white;
-      }
-    }
-  }
-  &--theme-black {
-    background: $color-white;
-    .mc-preview__top {
-      .mc-title {
-        color: $color-black;
-      }
-    }
-  }
-}
-</style>

package/src/components/patterns/McTab/McTab.stories.ts

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McTab from '@/components/patterns/McTab/McTab.vue'
-
-const meta = {
-    title: 'McTab',
-    component: McTab,
-    tags: ['autodocs'],
-    argTypes: {},
-    args: { },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McTab>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {}
-};

package/src/components/patterns/McTab/McTab.vue

@@ -1,209 +0,0 @@
-<script setup lang="ts">
-import { computed, type PropType, ref, inject, onMounted, useAttrs } from 'vue'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import type { ITab } from '@/types/ITabs'
-import type { IRoute } from '@/types/IRoute'
-import { type IconsListUnion } from '@/types/styles/Icons'
-
-const selfRegisterTabToMcTabs: Function = inject('selfRegisterTabMethod', () => {})
-const attrs = useAttrs()
-const props = defineProps({
-  /**
-   *  Если нужен иной фрагмент в url после #
-   *  (по умолчанию берётся из 'name')
-   */
-  id: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   *  Имя таба (unique)
-   */
-  name: {
-    type: String as PropType<string>,
-    required: true,
-    default: ''
-  },
-  /**
-   *  Вставка в начало имени таба
-   *  (не влияет на значение вставленное в url)
-   */
-  prefix: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   *  Вставка в конец имени таба
-   *  (не влияет на значение вставленное в url)
-   */
-  suffix: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  appendCount: {
-    type: Number as PropType<number>,
-    default: null
-  },
-  appendCountColor: {
-    type: String as () => ColorTypes,
-    default: 'black'
-  },
-  /**
-   *  Отключенное состояние
-   */
-  isDisabled: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * Виден ли таб
-   */
-  visible: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  /**
-   *  Классы иконки в начале
-   */
-  iconPrepend: {
-    type: String as () => IconsListUnion,
-    default: ''
-  },
-  /**
-   *  Классы иконки в конце
-   */
-  iconAppend: {
-    type: String as () => IconsListUnion,
-    default: ''
-  },
-  /**
-   *  Цвет иконки в начале
-   */
-  iconPrependColor: {
-    type: String as () => ColorTypes,
-    default: ''
-  },
-  /**
-   *  Цвет иконки в конце
-   */
-  iconAppendColor: {
-    type: String as () => ColorTypes,
-    default: ''
-  },
-  /**
-   *  Если нужна ссылка внутри приложения:
-   * `{name: 'test', params: { id: test.id }}`
-   */
-  to: {
-    type: Object as PropType<IRoute>,
-    default: null
-  },
-  /**
-   *  Если нужна обычная ссылка:
-   * `https://mediacube.agency/`
-   */
-  href: {
-    type: String as PropType<string>,
-    default: ''
-  }
-})
-
-const isActive = ref<boolean>(false)
-const isVisible = ref<boolean>(true)
-
-const computedId = computed((): string => {
-  return props.id ? props.id : props.name.toLowerCase().replace(/ /g, '-')
-})
-
-const hash = computed((): string => {
-  return props.isDisabled ? '#' : `#${computedId.value}`
-})
-
-const hasAppendCount = computed((): boolean => {
-  return !!props.appendCount || props.appendCount === 0
-})
-
-const appendCountStyles = computed((): string => {
-  return `--mc-tab-append-count-color: ${Colors[props.appendCountColor]}`
-})
-
-const computedTabName = computed((): string => {
-  return [props.prefix, props.name, props.suffix].filter(Boolean).join('')
-})
-
-const header = computed(() => {
-  return props.visible ? computedTabName.value : ''
-})
-
-const showTab = () => {
-  isActive.value = true
-}
-const hideTab = () => {
-  isActive.value = false
-}
-
-onMounted(() => {
-  if (selfRegisterTabToMcTabs) {
-    const payload: Partial<ITab> = {
-      isActive: isActive.value,
-      isVisible: isVisible.value,
-      computedId: computedId.value,
-      hash: hash.value,
-      hasAppendCount: hasAppendCount.value,
-      appendCountStyles: appendCountStyles.value,
-      header: header.value,
-      id: props.id,
-      name: props.name,
-      to: props.to,
-      href: props.href,
-      iconAppendColor: props.iconAppendColor,
-      iconPrependColor: props.iconPrependColor,
-      iconAppend: props.iconAppend,
-      iconPrepend: props.iconPrepend,
-      visible: props.visible,
-      isDisabled: props.isDisabled,
-      appendCountColor: props.appendCountColor,
-      appendCount: props.appendCount,
-      suffix: props.suffix,
-      prefix: props.prefix,
-      showTab,
-      hideTab,
-      onClick: attrs.onClick,
-      ...attrs
-    }
-    selfRegisterTabToMcTabs(payload)
-  }
-})
-</script>
-
-<template>
-  <section
-    v-show="isActive"
-    :id="id"
-    :aria-hidden="!isActive"
-    class="tabs-component-panel"
-    role="tabpanel"
-    :href="href"
-    :to="to"
-  >
-    <!-- @slot контента -->
-    <slot v-if="visible" />
-  </section>
-</template>
-
-<style lang="scss">
-.tabs-component-panel {
-  $block-name: &;
-}
-.tabs-component-tab {
-  &__tab {
-    &-name-append-count {
-      color: var(--mc-tab-append-count-color);
-    }
-  }
-  a:empty {
-    margin: 0;
-    padding: 0;
-  }
-}
-</style>

package/src/components/patterns/McTabs/McTabs.stories.ts

@@ -1,96 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McTabs from '@/components/patterns/McTabs/McTabs.vue'
-import McTab from '@/components/patterns/McTab/McTab.vue'
-import { TabVariations } from '@/enums/Tab'
-import { Colors } from '@/types/styles/Colors'
-
-const meta = {
-    title: 'McTabs',
-    component: McTabs,
-    tags: ['autodocs'],
-    argTypes: {
-        tabVariation: { control: 'select', options: Object.keys(TabVariations) },
-        color: { control: 'select', options: Object.keys(Colors) },
-        accentColor: { control: 'select', options: Object.keys(Colors) },
-        uppercase: { control: 'boolean' },
-        loading: { control: 'boolean' },
-        sticky: { control: 'boolean' },
-    },
-    args: {
-        uppercase: false,
-        loading: false,
-        sticky: false,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McTabs>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    render() {
-        return {
-            components: {
-                McTabs,
-                McTab,
-            },
-            data() {
-                return {
-                    v: null,
-                }
-            },
-            methods: {
-                handleChange(payload) {},
-            },
-            template: `
-            <mc-tabs v-model="v" color="black" accent-color="purple" tab-variation="caption" @tab-changed="handleChange">
-                <mc-tab id="custom" name="Custom fragment">Custom fragment content</mc-tab>
-                <mc-tab 
-                    name="With icon prep" 
-                    icon-prepend="close" 
-                    icon-prepend-color="red"
-                >
-                    With icon prepend.
-                </mc-tab>
-                <mc-tab 
-                    name="With icon app" 
-                    icon-append="link_external_new" 
-                    icon-append-color="purple"
-                >
-                    With icon append.
-                </mc-tab>
-                <mc-tab
-                    name="Href link"
-                    icon-append-classes="las la-external-link-alt"
-                    href="https://ya.ru"
-                >
-                    Href link
-                </mc-tab>
-                <mc-tab
-                    name="with counter"
-                    :append-count="5"
-                    append-count-color="purple"
-                >
-                    with counter
-                </mc-tab>
-                <mc-tab
-                    name="Router link" 
-                    icon-append-classes="las la-external-link-alt" 
-                    :to="{name: 'test', params: { id: 123 }}"
-                >
-                    Сработает только при наличии router = useRouter()
-                </mc-tab>
-                <mc-tab prefix="<<< " suffix=" >>>" name="With prefix and suffix">
-                    With prefix and suffix
-                </mc-tab>
-                <mc-tab name="Disabled" is-disabled>Disabled content</mc-tab>
-            </mc-tabs>
-            `
-        }
-    },
-};