its_ui_vite 0.0.1

package/src/components/CCheckbox.vue

@@ -0,0 +1,241 @@
+<template>
+  <label :class="['c-checkbox__wrap', variant, size, {disabled}]">
+    <input 
+      class="c-checkbox__inp" 
+      :type="variant === 'radio' ? 'radio' : 'checkbox'" 
+      :name="name" 
+      :value="value"
+      :checked="checked"
+      :disabled="disabled"
+      @change="$emit('update:checked', $event.target.checked)"
+    />
+
+    <div class="c-checkbox__checkmark"></div>
+    <div class="c-checkbox__text">
+      <slot>{{ text }}</slot>
+    </div>
+  </label>
+</template>
+
+<script>
+import { getPropValidator } from '../assets/js/helpers.js'
+
+export default {
+  name: 'CCheckbox',
+  emits: ['update:checked'],
+
+  props: {
+
+    variant: {
+      type: String,
+
+      default: 'checkbox',
+      validator: getPropValidator('CCheckbox', 'variant', ['checkbox', 'radio', 'toggle'])
+    },
+
+    size: {
+      type: String,
+      
+      default: 'lg',
+      // по сути sm используется только в CSelect
+      validator: getPropValidator('CCheckbox', 'size', ['lg', 'sm'])
+    },
+
+    checked: {
+      type: Boolean,
+
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+
+      default: false,
+    },
+
+    text: {
+      type: String,
+    
+      default: '',
+    },
+
+    name: {
+      type: String,
+      
+      default: 'c_checkbox',
+    },
+
+    value: {
+      type: String, 
+      
+      default: '',
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+// этого элемента нет
+.c-checkbox {
+
+  // родительский элемент
+  &__wrap {
+    // для toggle
+    --border-width: 1px;
+    --toggle-indentation: 1px;
+    --toggle-padding: calc(var(--border-width) + var(--toggle-indentation) * 2);
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    gap: 12px;
+
+    cursor: pointer;
+
+    &.disabled {
+      cursor: default;
+    }
+
+    // prop.size
+    &.lg {
+      --size: 28px;
+      --toggle-size: 24px;
+    }
+
+    &.sm {
+      --size: 20px;
+    }
+    // ./prop.size
+
+    // prop.variant
+    &.checkbox {
+      .c-checkbox__checkmark::after {
+        background: var(--green-light) url("data:image/svg+xml,%3Csvg width='15' height='13' viewBox='0 0 15 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 7.5L5 11L13 2' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") center no-repeat;
+      }
+    }
+
+    &.radio {
+      .c-checkbox__checkmark {
+        border-radius: 50%;
+
+        &::after{
+          background: var(--green-light) url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10' rx='5' fill='white'/%3E%3C/svg%3E%0A") center no-repeat;
+        }
+      }
+    }
+
+    &.toggle {
+      .c-checkbox__inp {
+        &:checked {
+          &~ .c-checkbox__checkmark {
+
+            &::after {
+              left: calc(var(--toggle-size) + var(--border-width) + var(--toggle-indentation)); // тоже самое что и left: 26px;
+
+              background: var(--green-light);
+            }
+          }
+        }
+      }
+
+      .c-checkbox__checkmark {
+        width: calc((var(--size) * 2) - (var(--border-width) + var(--toggle-indentation)) * 2);
+      
+        border-radius: var(--size);
+
+        background: var(--black-dark);
+        
+
+        &::after {
+          position: absolute;
+          left: 2px;
+          top: 2px;
+
+          width: var(--toggle-size);
+          height: var(--toggle-size);
+
+          border-radius: 50%;
+
+          background: var(--green-bg);
+
+          opacity: 1;
+        }
+      }
+    }
+    // ./prop.variant
+  }
+
+  &__inp {
+    display: none;
+
+    &:checked {
+      &~ .c-checkbox__checkmark {
+        border-color: var(--green-light);
+
+        &::after {
+          opacity: 1;
+        }
+      }
+
+      &~ .c-checkbox__text {
+        color: var(--white);
+      }
+    }
+
+    &:disabled {
+      &~ .c-checkbox__checkmark {
+        border-color: transparent;
+
+        &::after {
+          background: var(--black-dark);
+
+          opacity: 1;
+        }
+      }
+
+      &~ .c-checkbox__text {
+        color: var(--black-dark);
+      }
+    }
+  }
+
+  &__checkmark {
+    box-sizing: border-box;
+    display: flex;
+
+    width: var(--size);
+    height: var(--size);
+    
+    flex-shrink: 0;
+
+    border: var(--border-width) solid var(--green-medium);
+    border-radius: 4px;
+
+    overflow: hidden;
+    transition: var(--transition);
+
+    &::after {
+      content: '';
+      display: flex;
+
+      width: 100%;
+      height: 100%;
+
+      background: var(--green-bg);
+
+      opacity: 0;
+      
+      transition: var(--transition);
+    }
+  }
+
+  &__text {
+    font-size: 16px;
+
+    color: var(--green-medium);
+  }
+}
+
+</style>

package/src/components/CIcons/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="svg">
+    <svg v-if="iconId === 'error'" :width="w" :height="h" viewBox="0 0 24 24" stroke="#EA1246" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10.29 3.85996L1.82002 18C1.64539 18.3024 1.55299 18.6453 1.55201 18.9945C1.55103 19.3437 1.64151 19.6871 1.81445 19.9905C1.98738 20.2939 2.23675 20.5467 2.53773 20.7238C2.83871 20.9009 3.18082 20.9961 3.53002 21H20.47C20.8192 20.9961 21.1613 20.9009 21.4623 20.7238C21.7633 20.5467 22.0127 20.2939 22.1856 19.9905C22.3585 19.6871 22.449 19.3437 22.448 18.9945C22.4471 18.6453 22.3547 18.3024 22.18 18L13.71 3.85996C13.5318 3.56607 13.2807 3.32308 12.9812 3.15444C12.6817 2.98581 12.3438 2.89722 12 2.89722C11.6563 2.89722 11.3184 2.98581 11.0188 3.15444C10.7193 3.32308 10.4683 3.56607 10.29 3.85996V3.85996Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M12 9V13" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M12 16V16.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+    <svg v-if="iconId === 'success'" :width="w" :height="h" viewBox="0 0 24 24" stroke="#0FC176" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M22 4L12 14.01L9 11.01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+    <svg v-if="iconId === 'bell'" :width="w" :height="h" viewBox="0 0 24 24" stroke="#E2670D" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+    <svg v-if="iconId === 'close'" :width="w" :height="h" viewBox="0 0 24 24" stroke="white" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M18 6L6 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+    <svg v-if="iconId === 'lens'" :width="w" :height="h" viewBox="0 0 24 24" stroke="#26776F" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="11" cy="11" r="8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M16.5 16.958L21.5 21.958" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+    <svg v-if="iconId === 'arrow'" :width="w" :height="h" viewBox="0 0 18 23" stroke="#26776F" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15 15L9 9L3 15" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    
+    <svg v-if="iconId === 'question'" :width="w" :height="h" viewBox="0 0 24 24" stroke="#26776F" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M9.09009 9.00008C9.32519 8.33175 9.78924 7.76819 10.4 7.40921C11.0108 7.05024 11.729 6.91902 12.4273 7.03879C13.1255 7.15857 13.7589 7.52161 14.2152 8.06361C14.6714 8.60561 14.9211 9.2916 14.9201 10.0001C14.9201 12.0001 11.9201 13.0001 11.9201 13.0001" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M12 16V16.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    iconId: {
+      type: String,
+
+      required: true,
+    },
+
+    size: {
+      type: Number,
+
+      default: 24
+    },
+
+    width: {
+      type: Number,
+    },
+
+    height: {
+      type: Number,
+    },
+  },
+
+  computed: {
+    w() {
+      return this.width || this.size
+    },
+
+    h() {
+      return this.height || this.size
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.svg,
+svg {
+  display: flex;
+  flex-shrink: 0;
+
+  transition: var(--transition);
+}
+</style>

package/src/components/CInput.vue

@@ -0,0 +1,160 @@
+<template>
+  <div :class="['c-input__wrap', status]" :style="`--c-input-width: ${width}`">
+    <input 
+      class="c-input" 
+      :type="type" 
+      :name="name" 
+      :placeholder="placeholder" 
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+
+    <div class="c-input__icon c-input__success-icon">
+      <slot name="successIcon">
+        <CIcon iconId="success" />
+      </slot>
+    </div>
+
+    <div class="c-input__icon c-input__error-icon">
+      <slot name="errorIcon">
+        <CIcon iconId="error" />
+      </slot>
+    </div>
+
+    <div class="c-input__icon c-input__custom-icon">
+      <slot name="customIcon"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import CIcon from './CIcons/index.vue'
+
+import { getPropValidator } from '../assets/js/helpers';
+
+  export default {
+    emits: ['update:modelValue'],
+    components: {
+      CIcon
+    },
+    props: {
+
+      status: {
+        type: String,
+
+        default: 'static',
+        validator: getPropValidator('CInput', 'status', ['static', 'focus'/* it rofls */, 'error', 'success'])
+      },
+
+      width: {
+        type: String,
+
+        default: '350px'
+      },
+
+      type: {
+        type: String,
+        
+        default: 'text',
+      },
+
+      name: {
+        type: String,
+        
+        default: 'c_inp',
+      },
+
+      placeholder: {
+        type: String,
+
+        default: '',
+      },
+
+      modelValue: {
+        type: String, 
+        
+        default: '',
+      }
+    },
+  }
+</script>
+
+<style lang="scss">
+
+  .c-input {
+    box-sizing: border-box;
+
+    width: var(--c-input-width);
+    padding: 15px 25px;
+    font-size: 21px;
+
+    outline: none;
+    border: 1px solid var(--green-medium);
+    border-radius: 50px;
+
+    background: var(--black-dark);
+    color: var(--white);
+
+    transition: var(--transition);
+
+    &::placeholder {
+      color: inherit;
+    }
+
+    &:focus {
+      border: 1px solid var(--green-light);
+    }
+
+    &__wrap {
+      position: relative;
+
+      // prop.status
+      &.focus .c-input {
+        border: 1px solid var(--green-light);
+      } 
+
+      &.error {
+        .c-input{
+          padding-right: 50px;
+          
+          border-color: var(--red);
+
+          color: var(--red);
+        }
+
+        .c-input__error-icon {
+          opacity: 1;
+          pointer-events: all;
+        }
+      }
+
+      &.success {
+        .c-input{
+          padding-right: 50px;
+
+          border-color: var(--green-light);
+
+          color: var(--green-light);
+        }
+
+        .c-input__success-icon {
+          opacity: 1;
+          pointer-events: all;
+        }
+      }
+      // ./prop.status
+    }
+
+    &__icon {
+      position: absolute;
+      top: 50%;
+      right: 15px;
+      transform: translate(0, -50%);
+
+      display: flex;
+
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+</style>

package/src/components/CPopup.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="c-popup">
+    <div class="c-popup__title">
+      <slot name="title">Label</slot>
+    </div>
+
+    <div class="c-popup__content">
+      <slot name="content">Content goes here</slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+.c-popup {
+  padding: 15px 20px 30px;
+
+  border-radius: 6px;
+
+  color: var(--white);
+  background: var(--green-bg);
+  box-shadow: var(--shadow);
+
+  &__title {
+    height: 35px;
+    width: 100%;
+
+    border-bottom: 1px solid var(--green-medium);
+
+    font-size: 16px;
+  }
+
+  &__content {
+    margin-top: 10px;
+  }
+}
+</style>

package/src/components/CScroll.vue

@@ -0,0 +1,105 @@
+<template>
+  <PerfectScrollbar 
+    :options="{ 
+      scrollYMarginOffset
+    }" 
+    class="c-scroll"
+  >
+    <div class="c-scroll__content">
+      <slot><div class=""></div></slot>
+    </div>
+  </PerfectScrollbar>  
+</template>
+
+<script>
+
+/**
+ * @description ссылка на npm vue2-scrollbar: https://www.npmjs.com/package/vue2-scrollbar
+ */
+
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+import 'vue3-perfect-scrollbar/style.css'
+
+export default {
+  data() {
+    return {
+      scrollYMarginOffset: 0,
+    }
+  },
+
+  props: {
+    scrollY: {
+      type: Number,
+
+      default: 1
+    },
+  },
+
+  methods: {
+    handleMaxScroll(direction) {
+      console.log(direction);
+    }
+  },
+
+  watch: {
+    /**
+     * @description bug fix "рофлов" (когда меняется размер контента вылезают "рофлы")
+     */
+    $props: {
+      deep: true,
+      immediate: true,
+
+      handler(newWal) {
+        // if (this.$refs.Scrollbar) this.$refs.Scrollbar.scrollToY(0)
+        this.scrollYMarginOffset = 0
+      },
+    },
+  },
+
+  components: {
+    PerfectScrollbar,
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .c-scroll {
+    --scrollbar-width: 12px;
+
+    &__content {
+      background: var(--green-bg);
+    }
+
+    .vue-scrollbar-transition {
+      transition: var(--transition);
+      -moz-transition: var(--transition);
+      -webkit-transition: var(--transition);
+      -o-transition: var(--transition);
+    }
+
+    .ps__rail-y,
+    .ps__rail-x {
+      width: var(--scrollbar-width);
+      display: block;
+
+      opacity: 1 !important;
+
+      background-color: transparent !important;
+    }
+
+    .ps__thumb-y,
+    .ps__thumb-x {
+      width: var(--scrollbar-width) !important;
+
+      box-sizing: border-box;
+      border: 4px solid transparent;
+      border-radius: var(--scrollbar-width);
+
+      background-color: var(--scroll) !important;
+      background-clip: content-box;
+
+      cursor: pointer;
+    }
+  }
+</style>