mediacube-ui-v2 0.0.5 → 0.0.7

package/src/composables/useTooltip.ts

@@ -1,174 +0,0 @@
-import { type ITooltip, type ITooltipInstance, type ITooltipStyles } from '@/types/ITooltip'
-import { useDebounceFn } from '@vueuse/core'
-import { useRandomNumber } from '@/composables/useRandomNumber'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { TooltipPositions, TooltipSizes } from '@/enums'
-import { Colors, type ColorsUnion } from '@/types'
-import { useHelper } from '@/composables/useHelper'
-
-const debounce = useDebounceFn((method) => {
-  method()
-}, 150)
-
-const tooltipInstances = ref<ITooltipInstance[]>([])
-const helper = useHelper()
-
-class TooltipInstance {
-  id: number
-  target: HTMLElement
-  content: string | undefined
-  visible = ref(false)
-  position = ref<ITooltipStyles>({ top: null, left: null, translate: 'translate(0, 0)' })
-  placement: TooltipPositions
-  size: TooltipSizes
-  arrow: boolean
-  color: ColorsUnion
-  textColor: ColorsUnion
-
-  constructor(el: HTMLElement, value: ITooltip) {
-    this.target = el
-    this.content = value.content
-    this.placement = value.placement || TooltipPositions.Top
-    this.size = value.size || TooltipSizes.M
-    this.id = useRandomNumber().timestamp(5)
-    this.arrow = helper.hasProperty(value, 'arrow') ? !!value.arrow : true
-    this.color = value.color || Colors.black
-    this.textColor = value.textColor || Colors.white
-
-    this.target.addEventListener('mouseenter', this.showTooltip)
-    this.target.addEventListener('mouseleave', this.hideTooltip)
-
-    //@ts-ignore
-    tooltipInstances.value.push(this)
-  }
-
-  showTooltip = (): void => {
-    this.updateTooltipPosition()
-    this.visible.value = true
-
-    let tooltipElement = document.getElementById(String(this.id))
-
-    if (!tooltipElement) {
-      const tooltipDiv = document.createElement('div')
-      tooltipDiv.classList.add('mc-tooltip')
-      tooltipDiv.id = String(this.id)
-      tooltipDiv.innerText = this.content || ''
-      tooltipDiv.style.setProperty('--tooltip-color', this.color)
-      tooltipDiv.style.setProperty('--tooltip-text-color', this.textColor)
-      tooltipDiv.setAttribute('tooltip-placement', this.placement)
-      tooltipDiv.setAttribute('tooltip-size', this.size)
-      tooltipDiv.setAttribute('tooltip-arrow', String(this.arrow))
-      document.getElementById('tooltip-container')?.appendChild(tooltipDiv)
-    }
-
-    tooltipElement = document.getElementById(String(this.id))
-    if (tooltipElement) {
-      tooltipElement.style.visibility = 'visible'
-      for (const key in this.position.value) {
-        if (key && helper.hasProperty(this.position.value, key)) {
-          //@ts-ignore
-          tooltipElement.style[key] = `${this.position.value[key]}px`
-        }
-      }
-      tooltipElement.style.transform = this.position.value.translate
-    }
-  }
-
-  hideTooltip = (): void => {
-    this.visible.value = false
-    const tooltipElement = document.getElementById(String(this.id))
-    if (tooltipElement) {
-      tooltipElement.style.visibility = 'hidden'
-    }
-  }
-
-  updateTooltipPosition = (): void => {
-    const { top, left, width, height } = this.target.getBoundingClientRect()
-    const requiredTop = top + window.scrollY
-    const requiredLeft = left + window.scrollX
-    const space = 4
-    const arrow = this.arrow ? 4 : 0
-
-    switch (this.placement) {
-      case TooltipPositions.Right:
-        this.position.value = {
-          top: requiredTop,
-          left: requiredLeft + width + (space + arrow),
-          translate: `translate(0, calc(-50% + ${height / 2}px))`
-        }
-        break
-      case TooltipPositions.Left:
-        this.position.value = {
-          top: requiredTop,
-          left: requiredLeft - (space + arrow),
-          translate: `translate(-100%, calc(-50% + ${height / 2}px))`
-        }
-        break
-      case TooltipPositions.Top:
-        this.position.value = {
-          top: requiredTop - (space + arrow),
-          left: requiredLeft + width / 2,
-          translate: 'translate(-50%, -100%)'
-        }
-        break
-      case TooltipPositions.Bottom:
-        this.position.value = {
-          top: requiredTop + height + (space + arrow),
-          left: requiredLeft + width / 2,
-          translate: 'translate(-50%, 0%)'
-        }
-        break
-    }
-  }
-
-  destroy = (): void => {
-    this.target.removeEventListener('mouseenter', this.showTooltip)
-    this.target.removeEventListener('mouseleave', this.hideTooltip)
-    tooltipInstances.value = tooltipInstances.value.filter((instance) => instance.id !== this.id)
-    const tooltipToDestroy = document.getElementById(String(this.id))
-    tooltipToDestroy && tooltipToDestroy.remove()
-  }
-}
-const updateAllTooltips = debounce(() => {
-  tooltipInstances.value.forEach((instance) => instance.updateTooltipPosition())
-})
-
-const createTooltipContainer = () => {
-  const modalContainerElement = document.createElement('div')
-  modalContainerElement.id = 'tooltip-container'
-  document.body.appendChild(modalContainerElement)
-}
-
-const ensureTooltipContainerExists = () => {
-  if (!document.getElementById('tooltip-container')) {
-    createTooltipContainer()
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('scroll', () => updateAllTooltips)
-  window.addEventListener('resize', () => updateAllTooltips)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('scroll', () => updateAllTooltips)
-  window.removeEventListener('resize', () => updateAllTooltips)
-})
-
-export function useTooltip() {
-  const tooltip = ref<ITooltipInstance | null>(null)
-  return {
-    mounted(el: HTMLElement, binding: { value: ITooltip }) {
-      ensureTooltipContainerExists()
-
-      const content = binding.value.content
-      if (!content) return
-      //@ts-ignore
-      tooltip.value = new TooltipInstance(el, binding.value)
-    },
-    updated() {},
-    beforeUnmount() {
-      tooltip.value?.destroy()
-    }
-  }
-}

package/src/consts/table.ts

@@ -1,6 +0,0 @@
-export const TABLE = {
-  defaultHeaderHeight: 40,
-  defaultRowHeight: 40,
-  defaultFooterRowHeight: 40,
-  defaultTableFirstColWidth: 251,
-}

package/src/enums/Cell.ts

@@ -1,5 +0,0 @@
-export enum CellSizes {
-  S = 's',
-  M = 'm',
-  L = 'l'
-}

package/src/enums/Chip.ts

@@ -1,10 +0,0 @@
-export enum ChipSize {
-  Xs = 'xs',
-  S = 's',
-  M = 'm'
-}
-
-export enum ChipModifiers {
-  Invert = 'invert',
-  Outline = 'outline'
-}

package/src/enums/Datepicker.ts

@@ -1,38 +0,0 @@
-export enum DatepickerTypes {
-  TimePicker = 'time-picker',
-  DatePicker = 'date-picker',
-  DateTimePicker = 'date-time-picker',
-  WeekPicker = 'week-picker',
-  MonthPicker = 'month-picker',
-  YearPicker = 'year-picker'
-}
-export enum DatepickerFormatsVariations {
-  Picker = 'picker',
-  Dayjs = 'dayjs',
-  Output = 'output'
-}
-
-export enum DatepickerFormat {
-  TimePicker = 'HH:mm',
-  DateTimePicker = 'dd.MM.yyyy HH:mm',
-  DatePicker = 'dd.MM.yyyy',
-  WeekPicker = 'ww.yyyy',
-  MonthPicker = 'MM.yyyy',
-  YearPicker = 'yyyy'
-}
-export enum DayjsFormat {
-  TimePicker = 'HH:mm',
-  DateTimePicker = 'DD.MM.YYYY HH:mm',
-  DatePicker = 'DD.MM.YYYY',
-  WeekPicker = 'WW.YYYY',
-  MonthPicker = 'MM.YYYY',
-  YearPicker = 'YYYY'
-}
-export enum DatepickerOutputFormat {
-  TimePicker = 'HH:mm',
-  DateTimePicker = 'YYYY-MM-DD HH:mm',
-  DatePicker = 'YYYY-MM-DD',
-  WeekPicker = 'YYYY-WW',
-  MonthPicker = 'YYYY-MM-DD',
-  YearPicker = 'YYYY'
-}

package/src/enums/Drawer.ts

@@ -1,4 +0,0 @@
-export enum DrawerPositions {
-  Left = 'left',
-  Right = 'right'
-}

package/src/enums/Dropdown.ts

@@ -1,11 +0,0 @@
-export enum DropdownListPositions {
-  Top = 'top',
-  Bottom = 'bottom',
-  Auto = 'auto'
-}
-
-export enum DropdownPositions {
-  Left = 'left',
-  Right = 'right',
-  Auto = 'auto'
-}

package/src/enums/Filter.ts

@@ -1,13 +0,0 @@
-export enum FilterRelations {
-  Exists = 'exists',
-  Is = 'is',
-  IsNot = 'is_not'
-}
-
-export enum FilterTypes {
-  Relation = 'relation',
-  Date = 'date',
-  Text = 'text',
-  Range = 'range',
-  Fast = 'fast'
-}

package/src/enums/Grid.ts

@@ -1,21 +0,0 @@
-export enum ColumnSizes {
-  Xs = 'xs',
-  S = 's',
-  M = 'm',
-  L = 'l',
-  Xl = 'xl',
-  Xxl = 'xxl'
-}
-export enum ColumnJustifyAlignment {
-  Left = 'left',
-  Right = 'right',
-  Center = 'center',
-  Around = 'around',
-  Between = 'between'
-}
-export enum ColumnAlignment {
-  Top = 'top',
-  Middle = 'middle',
-  Bottom = 'bottom',
-  Stretch = 'stretch'
-}

package/src/enums/Input.ts

@@ -1,19 +0,0 @@
-export enum InputTypes {
-  Text = 'text',
-  Password = 'password',
-  Email = 'email',
-  Date = 'date',
-  Textarea = 'textarea',
-  TextareaAutosize = 'textarea-autosize',
-  Num = 'num',
-  Int = 'int',
-  AmountFormat = 'amount_format',
-  Uppercase = 'uppercase',
-  Lowercase = 'lowercase',
-  PhoneNumber = 'phone_number'
-}
-
-export enum Autocomplete {
-  On = 'on',
-  Off = 'off'
-}

package/src/enums/Modal.ts

@@ -1,4 +0,0 @@
-export enum ModalVariation {
-  Default = 'default',
-  Info = 'info'
-}

package/src/enums/Preview.ts

@@ -1,5 +0,0 @@
-export enum PreviewSizes {
-  S = 's',
-  M = 'm',
-  L = 'l'
-}

package/src/enums/Radio.ts

@@ -1,4 +0,0 @@
-export enum RadioVariation {
-  Circle = 'circle',
-  Checkmark = 'checkmark'
-}

package/src/enums/RadioGroup.ts

@@ -1,4 +0,0 @@
-export enum RadioGroupDirection {
-  Column = 'column',
-  Row = 'row'
-}

package/src/enums/Select.ts

@@ -1,10 +0,0 @@
-export enum SelectGroupKeys {
-  Label = 'label',
-  Values = 'values'
-}
-
-export enum SelectListDirections {
-  Top = 'above',
-  Bottom = 'below',
-  Auto = 'auto'
-}

package/src/enums/Sidebar.ts

@@ -1,4 +0,0 @@
-export enum SidebarTheme {
-  Black = 'black',
-  White = 'white'
-}

package/src/enums/Tab.ts

@@ -1,5 +0,0 @@
-export enum TabVariations {
-  Body = 'body',
-  Captions = 'caption',
-  Overline = 'overline'
-}

package/src/enums/Title.ts

@@ -1,20 +0,0 @@
-export enum TitleSizes {
-  Xs = 'xs',
-  S = 's',
-  M = 'm',
-  L = 'l',
-  Xl = 'xl',
-  Xxl = 'xxl'
-}
-
-export enum TitleVariations {
-  H1 = 'h1',
-  H2 = 'h2',
-  H3 = 'h3',
-  H4 = 'h4',
-  Subtitle = 'subtitle',
-  Body = 'body',
-  Overline = 'overline',
-  Article = 'article',
-  Info = 'info'
-}

package/src/enums/Tooltip.ts

@@ -1,14 +0,0 @@
-export enum TooltipPositions {
-  Top = 'top',
-  Left = 'left',
-  Right = 'right',
-  Bottom = 'bottom'
-}
-
-export enum TooltipSizes {
-  Xs = 'xs',
-  S = 's',
-  M = 'm',
-  L = 'l',
-  XL = 'xl'
-}

package/src/enums/index.ts

@@ -1,23 +0,0 @@
-export * from './Cell'
-export * from './Chip'
-export * from './Datepicker'
-export * from './Drawer'
-export * from './Dropdown'
-export * from './Filter'
-export * from './Grid'
-export * from './Input'
-export * from './Modal'
-export * from './Preview'
-export * from './Radio'
-export * from './RadioGroup'
-export * from './Select'
-export * from './Sidebar'
-export * from './Tab'
-export * from './Title'
-export * from './Tooltip'
-
-// UI enums
-export * from './ui/Alignment'
-export * from './ui/Button'
-export * from './ui/Directions'
-export * from './ui/Weights'

package/src/enums/ui/Alignment.ts

@@ -1,5 +0,0 @@
-export enum HorizontalAlignment {
-  Left = 'left',
-  Center = 'center',
-  Right = 'right'
-}

package/src/enums/ui/Button.ts

@@ -1,23 +0,0 @@
-export enum ButtonType {
-  Button = 'button',
-  Submit = 'submit',
-  Reset = 'reset'
-}
-
-export enum ButtonSize {
-  Xs = 'xs',
-  XsCompact = 'xs-compact',
-  S = 's',
-  SCompact = 's-compact',
-  M = 'm',
-  MCompact = 'm-compact',
-  L = 'l',
-  LCompact = 'l-compact'
-}
-
-export enum ButtonModifiers {
-  Invert = 'invert',
-  Outline = 'outline',
-  Link = 'link',
-  Flat = 'flat'
-}

package/src/enums/ui/Directions.ts

@@ -1,4 +0,0 @@
-export enum Directions {
-  Rtl = 'rtl',
-  Ltr = 'ltr'
-}

package/src/enums/ui/Weights.ts

@@ -1,6 +0,0 @@
-export enum Weights {
-  Normal = 'normal',
-  Medium = 'medium',
-  SemiBold = 'semi-bold',
-  Bold = 'bold'
-}

package/src/index.js

@@ -1,16 +0,0 @@
-export * from './types'
-export * from './enums'
-export * from './components'
-export * from './composables'
-export * from './assets/tokens/json'
-export * from './assets/iconsSprite.svg'
-
-export default {
-  install(app, options = {}) {
-    const defaultOptions = {
-      drawerComponents: {},
-      modalComponents: {}
-    }
-    app.config.globalProperties.$dsOptions = { ...defaultOptions, ...options }
-  }
-}

package/src/main.ts

@@ -1,9 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-
-import './assets/main.scss'
-import './assets/fonts/inter/inter.css'
-
-const app = createApp(App)
-
-app.mount('#app')

package/src/mocks/authUser.ts

@@ -1,163 +0,0 @@
-const authUser = {
-  id: 4,
-  uid: "a87ff679a2f3e71d9181a67b7542122c",
-  first_name: "Татьяна",
-  last_name: "Владимирова",
-  name: "MediaCube Network",
-  email: "info@mediacube.network",
-  is_confirmed: true,
-  avatar: null,
-  profile: {
-    id: 6,
-    user_id: 4,
-    country_id: 7,
-    country: {
-      id: 7,
-      youtube_id: "BY",
-      code: "BY",
-      name: "Belarus",
-      created_at: "2017-09-27 14:51:59",
-      updated_at: "2019-05-22 18:58:21",
-      order: null,
-    },
-    birthday: "2018-01-01T00:00:00+03:00",
-    sex: true,
-    region: "Минская Область",
-    city: "Минск",
-    postcode: null,
-    address: "ул.",
-  },
-  contacts: [
-    {
-      id: 13,
-      user_id: 4,
-      network: "vkontakte",
-      link: "Тест",
-    },
-    {
-      id: 14,
-      user_id: 4,
-      network: "okru",
-      link: "Тест",
-    },
-    {
-      id: 27,
-      user_id: 4,
-      network: "email",
-      link: "qwerty",
-    },
-    {
-      id: 28,
-      user_id: 4,
-      network: "messenger",
-      link: "344",
-    },
-    {
-      id: 29,
-      user_id: 4,
-      network: "instagram",
-      link: "sdwfwef",
-    },
-    {
-      id: 30,
-      user_id: 4,
-      network: "telegram",
-      link: "Qwerty",
-    },
-    {
-      id: 10,
-      user_id: 4,
-      network: "telegram",
-      link: "Тест",
-    },
-    {
-      id: 69,
-      user_id: 4,
-      network: "email",
-      link: "margarete44@yahoo.com",
-    },
-  ],
-  payment_methods: [
-    {
-      id: 426,
-      user_id: 4,
-      provider: "paypal",
-      identity: {
-        email: "1@1.q",
-      },
-      created_at: "2019-01-14T19:17:19+03:00",
-      updated_at: "2019-01-14T19:17:19+03:00",
-    },
-    {
-      id: 427,
-      user_id: 4,
-      provider: "card_by",
-      identity: {
-        last_name: "Петрушкин",
-        first_name: "Петр",
-        middle_name: "Петрович",
-        address: "ул. Пушкина",
-        zip: "220021",
-        passport_number: "мр2789909",
-        passport_issue_date: "1972-07-15",
-        passport_personal_number: "2345245",
-        card_bank_name: "4542",
-        card_bank_address: "4542",
-        swift: "4545",
-        iban: "234",
-        bank_account: "5545",
-      },
-      created_at: "2019-01-15T20:28:45+03:00",
-      updated_at: "2019-01-15T20:28:45+03:00",
-    },
-    {
-      id: 429,
-      user_id: 4,
-      provider: "payoneer",
-      identity: {
-        id: "2266099",
-      },
-      created_at: "2019-01-16T14:09:09+03:00",
-      updated_at: "2019-01-16T14:09:09+03:00",
-    },
-    {
-      id: 431,
-      user_id: 4,
-      provider: "payoneer",
-      identity: {
-        id: "2266099",
-      },
-      created_at: "2019-01-16T14:13:24+03:00",
-      updated_at: "2019-01-16T14:13:24+03:00",
-    },
-  ],
-  roles: [
-    {
-      id: 1,
-      name: "admin",
-      title: "Администратор",
-      level: 1,
-      users_count: null,
-    },
-  ],
-  organization_count: 0,
-  groups_count: 1,
-  recruiters_count: 2,
-  last_action_at: "2019-05-22T21:22:04+03:00",
-  is_banned: false,
-  balance: {
-    user_id: 4,
-    balance: "7987.00",
-    real_balance: "0.00",
-    credit_balance: "7987.00",
-  },
-  agree_at: "2017-10-17T15:53:15+03:00",
-  auto_transaction_active: false,
-  auto_transaction_min_sum: null,
-  auto_transaction_payment_method_id: null,
-  express_payment_active: false,
-  created_at: "2017-10-17T15:53:15+03:00",
-  updated_at: "2019-05-22T21:22:04+03:00",
-}
-
-export { authUser }