mediacube-ui-v2 0.0.3 → 0.0.4

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

@@ -0,0 +1,211 @@
+<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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,209 @@
+<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

@@ -0,0 +1,96 @@
+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>
+            `
+        }
+    },
+};