its_ui_vite 0.0.1

package/src/components/CSelect.vue

@@ -0,0 +1,263 @@
+<template>
+  <div :style="`--transition: ${transition}ms`" :class="[classes.root, variant]">
+    <CInput ref="input" :placeholder="activePlaceholder" v-model.trim="findValue" :class="classes.input">
+      <template #customIcon>
+        <CIcons class="c-select__inp_icon" :iconId="isMultiple ? 'arrow' : 'lens'" />
+      </template>
+    </CInput>
+
+    <CScroll :scrollY="scrollY" :class="['c-select__list', {open: isOpen}]">
+      <button 
+        :class="classes.optionBtn"
+        v-for="item in foundOptions"
+        :key="item.id"
+        @click="debounceEvent(item, $event)"
+      >
+        <component 
+          :class="classes.option"
+          :is="isMultiple ? 'CCheckbox' : 'div'"
+          v-bind.props="{size: 'sm'}"
+        >
+          {{ item.text }}
+        </component>
+      </button>
+      <div v-if="foundOptions.length < 1" :class="[classes.option, 'not-found']">
+        ничего не найдено
+      </div>
+    </CScroll>
+  </div>
+</template>
+
+<script>
+import CInput from './CInput.vue'
+import CCheckbox from './CCheckbox.vue'
+import CIcons from './CIcons/index.vue'
+import CScroll from './CScroll.vue';
+
+import { getPropValidator, fixDblEvent } from '../assets/js/helpers';
+
+export default {
+  data() {
+    return {
+      transition: 200,
+      isMultiple: this.variant === 'multiple',
+      scrollY: 0,
+      activeOptions: new Set(),
+      findValue: '',
+      activePlaceholder: this.placeholder,
+
+      debounceEvent: () => {},
+
+      isOpen: false,
+      classes: {
+        root: 'c-select',
+        input: 'c-select__inp',
+        option: 'c-select__list_item',
+        optionBtn: 'c-select__list_btn',
+      },
+    }
+  },
+
+  props: {
+    options: {
+      type: Array,
+
+      default: [],
+    },
+
+    variant: {
+      type: String,
+
+      default: 'default',
+      validator: getPropValidator('CSelect', 'variant', ['default', 'multiple']),
+    },
+
+    placeholder: {
+      type: String,
+
+      default: 'выберете вариант',
+    }
+  },
+
+  methods: {
+    handleOption(option, evt) {
+      const input = evt.target.closest(`.${this.classes.optionBtn}`).querySelector('input');
+      const isAdd = !this.isMultiple || input?.checked
+
+      if (!this.isMultiple) this.activeOptions.clear()
+
+      this.activeOptions[isAdd ? 'add' : 'delete'](option)
+
+      this.setActivePlaceholder()
+      this.$emit('change', [...this.activeOptions])
+    },
+
+    setActivePlaceholder() {
+      this.findValue = ''
+
+      const placeholderText = [...this.activeOptions].map(({text}) => text).join('')
+      const newPlaceholder = this.activeOptions.size > 1 ? 'несколько' : placeholderText
+
+      console.log([...this.activeOptions], 'placeholderText');
+
+      this.activePlaceholder = newPlaceholder || this.placeholder
+    },
+  },
+
+  mounted() {
+    this.debounceEvent = fixDblEvent(this.handleOption)
+    console.log(this.debounceEvent);
+
+    document.body.addEventListener('click', (evt) => {
+      const input = evt.target.closest(`.${this.classes.input}`)
+
+      if (input === this.$refs.input?.$el) return this.isOpen = true
+      
+      this.isOpen = false
+
+      setTimeout(() => {
+        this.findValue = ''
+      }, this.transition);
+    })
+  },
+
+  computed: {
+    foundOptions() {
+      const reg = new RegExp(this.findValue.replace(/\W/g, '\\$&'), 'i')
+      this.scrollY = Math.random();
+
+      return this.options.filter(({text}) => reg.test(text))
+    },
+  },
+
+  components: {
+    CInput,
+    CCheckbox,
+    CIcons,
+    CScroll,
+  }
+}
+</script>
+
+<style lang="scss">
+.c-select {
+  position: relative;
+
+  // prop.variant
+  &.default {
+    .c-select__inp .c-input {
+      padding-left: 50px;
+    }
+
+    .c-input__custom-icon {
+      left: 15px;
+      right: auto;
+    }
+  }
+
+  &.multiple {
+    .c-input:focus {
+      &~ .c-input__custom-icon svg {
+        transform: rotate(0deg);
+      }
+    }
+
+    .c-input__custom-icon svg {
+      transform: rotate(180deg);
+    }
+  }
+  // ./prop.variant
+
+  &__inp {
+    .c-input__custom-icon {
+      opacity: 1;
+    }
+
+    .c-input:focus {
+      &~ .c-input__custom-icon svg {
+        stroke: var(--green-light);
+      }
+    }
+  }
+
+  &__list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    transform: translate(0px, 0px);
+
+    width: 100%;
+    max-height: 240px;
+  
+    display: flex;
+    flex-direction: column;
+
+    border-radius: 8px;
+    border: 1px solid var(--green-medium);
+
+    transition: var(--transition);
+
+    opacity: 0;
+    pointer-events: none;
+
+    &.open {
+      transform: translate(0, 12px);
+
+      opacity: 1;
+      pointer-events: all;
+    }
+
+    &_item {
+      width: 100%;
+      height: 100%;
+
+      padding: 12px 15px;
+
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+
+      box-sizing: border-box;
+
+      color: var(--white);
+
+      transition: var(--transition);
+
+      &.not-found {
+        background: transparent;
+
+        cursor: default;
+
+        justify-content: center;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      .c-checkbox__text {
+        color: inherit;
+      }
+    }
+
+    &_btn {
+      height: 48px;
+      width: 100%;
+      
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+
+      border: none;
+
+      font-size: 16px;
+
+      background: transparent;
+
+      &:hover {
+        background: var(--green-dark);
+      }
+    }
+  }
+}
+</style>

package/src/components/CTabs.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="c-tabs">
+    <button :class="['c-tabs__item', {'c-tabs__item-active': item === activeTab}]" v-for="item in tabs" :key="item.id" @click="handleTab(item)">
+      <div>
+        {{ item.text }}
+      </div>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeTab: this.tabs.find(({id}) => id === this.activeId)
+    }
+  },
+  props: {
+    tabs: {
+      type: Array,
+      
+      required: true,
+      default: [],
+    },
+
+    activeId: {
+      required: true,
+    }
+  },
+
+  computed: {
+    activeTab() {
+      return this.tabs.find(({id}) => id === (this.activeTab.id || this.activeId))
+    }
+  },
+
+  methods: {
+    handleTab(activeTab) {
+      console.log('handleTab');
+      if (this.activeTab === activeTab) return;
+
+      this.activeTab = activeTab
+      this.$emit('tabChange', activeTab)
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.c-tabs {
+  display: flex;
+
+  max-width: 100%;
+
+  gap: 40px;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+
+    font-size: 16px;
+
+    border: none;
+
+    color: var(--white);
+    background: transparent;
+
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      display: flex;
+
+      height: 5px;
+      width: 100%;
+      margin-top: 12px;
+
+      border-radius: 5px;
+
+      background: var(--green-light);
+      opacity: 0;
+    }
+
+    &-active {
+      color: var(--green-light);
+
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

package/src/components/CTooltip.vue

@@ -0,0 +1,212 @@
+<template>
+  <div :class="['c-tooltip', position, {interactive: interactive}, {open: isOpen.click || isOpen.hover}]">
+    <div ref="icon" :class="classes.icon">
+      <slot name="icon">
+        <CIcons iconId="question" />
+      </slot>
+    </div>
+    <div :class="classes.contentWrap">
+      <div :class="classes.content">
+        <slot name="content"></slot>
+      </div>
+      <div class="c-tooltip__arrow"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPropValidator } from '../assets/js/helpers';
+import CIcons from './CIcons/index.vue'
+
+export default {
+  data() {
+    return {
+      isOpen: {
+        click: false,
+        hover: false,
+      },
+
+      classes: {
+        icon: 'c-tooltip__icon',
+        content: 'c-tooltip__content',
+        contentWrap: 'c-tooltip__content_wrap'
+      },
+    }
+  },
+
+  props: {
+    position: {
+      type: String,
+
+      default: 'top',
+      validator: getPropValidator('CTooltip', 'position', ['top', 'bottom']),
+    },
+
+    interactive: {
+      type: Boolean,
+
+      default: true,
+    },
+  },
+
+  methods: {
+    /**
+     * @param {MouseEvent} evt 
+     */
+    handleMouseover(evt){
+      const tooltipTarget = evt.target.closest(`.${this.classes.icon}`)
+
+      if (tooltipTarget !== this.$refs.icon) return
+
+      this.isOpen.hover = true
+      evt.stopPropagation()
+    },
+
+    /**
+     * @param {MouseEvent} evt 
+     */
+    handleMouseout(evt) {
+      const tooltipTarget = evt.target.closest(`.${this.classes.icon}`)
+
+      if (tooltipTarget === this.$refs.icon) this.isOpen.hover = false
+    },
+
+    /**
+     * @param {MouseEvent} evt 
+     */
+    handleClick(evt) {
+      const tooltipTarget = evt.target.closest(`.${this.classes.icon}`)
+
+      if (tooltipTarget === this.$refs.icon) return this.isOpen.click = true
+      this.isOpen.click = false
+    },
+
+    addListener() {
+      document.body.addEventListener('mouseover', this.handleMouseover)
+      document.body.addEventListener('mouseout', this.handleMouseout)  
+      document.body.addEventListener('click', this.handleClick)
+    },
+
+    removeListener() {
+      document.body.removeEventListener('mouseover', this.handleMouseover)
+      document.body.removeEventListener('mouseout', this.handleMouseout)  
+      document.body.removeEventListener('click', this.handleClick)
+    },
+  },
+
+  mounted() {
+    this.addListener()
+  },
+
+  beforeDestroy() {
+    this.removeListener()
+  },
+
+  components: {
+    CIcons,
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .c-tooltip {
+    --arrow-size: 12px;
+
+    position: relative;
+
+    font-size: 12px;
+
+    // props.position
+    &.top {
+      .c-tooltip__content_wrap{
+        --translate-y: -10px;
+        --arrow-translate-y: -6px;
+
+        bottom: 100%;
+      }
+
+      .c-tooltip__arrow {
+        --rotate: 45deg;
+
+        top: 100%;
+      }
+    }
+
+    &.bottom {
+      .c-tooltip__content_wrap {
+        --translate-y: 10px;
+        --arrow-translate-y: 6px;
+
+        top: 100%;
+      }
+
+      .c-tooltip__arrow {
+        --rotate: -135deg;
+
+        bottom: 100%;
+      }
+    }
+    // ./props.position
+
+    &.interactive {
+      .c-tooltip__content_wrap {
+        pointer-events: all;
+      }
+    }
+
+    &:not(.open) {
+      .c-tooltip__content_wrap {
+        --translate-y: 0px;
+
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    &__icon {
+      cursor: pointer;
+    }
+
+    &__content {
+      position: relative;
+      z-index: 10;
+
+      padding: 7px 10px;
+
+      border-radius: 6px;
+
+      background: var(--green-bg);
+
+      &_wrap {
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%, var(--translate-y));
+
+        border: 1px solid var(--green-medium);
+        border-radius: 6px;
+        box-shadow: var(--shadow);
+
+        color: var(--white);
+
+        transition: var(--transition);
+        pointer-events: none;
+      }
+    }
+
+    &__arrow {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, var(--arrow-translate-y)) rotate(var(--rotate));
+
+      width: var(--arrow-size);
+      height: var(--arrow-size);
+
+      box-sizing: border-box;
+      border: 1px solid var(--green-medium);
+      border-width: 0px 1px 1px 0px;
+
+      background: var(--green-bg);
+    }
+  }
+</style>

package/src/index.js

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+
+import './assets/scss/main.scss'
+
+import Index from './pages/index.vue'
+
+const app = createApp(Index)
+app.mount('#app')

package/src/libIndex.js

@@ -0,0 +1,21 @@
+import CButton from './src/components/CButton.vue';
+import CTabs from './src/components/CTabs.vue';
+import CInput from './src/components/CInput.vue';
+import CCheckbox from './src/components/CCheckbox.vue'; 
+import CSelect from './src/components/CSelect.vue'; 
+import CTooltip from './src/components/CTooltip.vue';
+import CPopup from './src/components/CPopup.vue';
+import CAlert from './src/components/CAlert.vue';
+
+import './assets/scss/main.scss'
+
+export {
+  CButton,
+  CTabs, 
+  CInput,
+  CCheckbox,
+  CSelect,
+  CTooltip, 
+  CPopup, 
+  CAlert,
+}