mediacube-ui-v2 0.0.3 → 0.0.4

package/src/composables/useTooltip.ts

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

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

package/src/enums/Cell.ts

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

package/src/enums/Chip.ts

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

package/src/enums/Datepicker.ts

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

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

package/src/enums/Dropdown.ts

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

package/src/enums/Filter.ts

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

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

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

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

package/src/enums/Preview.ts

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

package/src/enums/Radio.ts

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

package/src/enums/RadioGroup.ts

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

package/src/enums/Select.ts

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

package/src/enums/Sidebar.ts

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

package/src/enums/Tab.ts

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

package/src/enums/Title.ts

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

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

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

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

package/src/enums/ui/Button.ts

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

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

package/src/enums/ui/Weights.ts

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

package/src/index.js

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

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

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