its_ui_vite 0.0.1

package/README.md

@@ -0,0 +1,105 @@
+# UI Kit для Интелектуальной Транспортной Системы (ИТС) для Vue3
+
+## components props
+
+* CButton 
+
+```
+{
+  size: 'lg' | 'md' | 'sm',
+  variant: 'tonal' | 'outlined' | 'text',
+  color: 'green' | 'black',
+  disabled: Boolean,
+}
+```
+
+* CTabs 
+
+```
+{
+  tabs: Record<string, any> & { id: any, text: string }[],
+  activeId: any,
+}
+```
+
+* CInput
+
+```
+{
+  <!-- реактивна -->
+  status: 'static' | 'focus' | 'error' | 'success'
+
+  width: string,
+  type: string,
+  name: string,
+  placeholder: string,
+  value: string, 
+}
+```
+
+* CCheckbox 
+
+```
+{
+  variant: 'checkbox' | 'radio' | 'toggle'
+  <!-- по сути 'sm' используется только в CSelect -->
+  size: 'lg' | 'sm',
+  checked: Boolean,
+  disabled: Boolean,
+  text: string,
+  name:string,
+  value: string, 
+}
+```
+
+* CSelect 
+
+```
+{
+  options: Array,
+  variant: 'default' | 'multiple',
+  placeholder: string,
+}
+```
+
+* CTooltip
+
+```
+{
+  position: 'top' | 'bottom',
+  interactive: Boolean,
+}
+```
+
+* CPopup 
+
+```
+{
+  <!-- нет props -->
+}
+```
+
+* CAlert 
+
+```
+{
+  liveTime: number,
+  variant: 'notification' | 'success' | 'error',
+  width: string,
+  text: string,
+}
+```
+
+## Docker
+
+* Build container:
+  ```shell
+  docker build -t its-ui-kit_vue-host .
+  ```
+
+* Run container:
+  ```shell
+  docker run -d -p 3000:3000 --env-file .env its-ui-kit_vue-host
+  ```
+
+Откройте в браузере: http://localhost:3000

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "its_ui_vite",
+  "version": "0.0.1",
+  "main": "./src/libIndex.js",
+  "module": "./src/libIndex.js",
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LopanovCo/its_ui_kit-3"
+  },
+  "publishConfig": {
+    "@lopanovco:registry": "https://npm.pkg.github.com"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "compression": "^1.7.4",
+    "dotenv": "^16.3.1",
+    "express": "4.18.2",
+    "vue": "^3.3.11",
+    "vue3-perfect-scrollbar": "^2.0.0",
+    "yargs": "^17.7.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.6.2",
+    "sass": "^1.69.5",
+    "vite": "^5.0.8"
+  }
+}

package/src/assets/js/helpers.js

@@ -0,0 +1,29 @@
+/**
+ * @param {String} componentName componentName
+ * @param {String} propName propName
+ * @param {String[]} validValues 
+ */
+export function getPropValidator(componentName, propName, validValues) {
+  return (value) => {
+    const isValid = validValues.includes(value)
+    if (isValid) return true 
+
+    throw new Error(`${componentName}: \n invalid prop: ${propName} "${value}". Valid values: ${validValues}`)
+  }
+}
+
+/**
+ * @description есть баг с двойны срабатыванием click event (проблема со stackoverflow: https://stackoverflow.com/questions/10819699/simple-click-on-labels-makes-double-click)
+ * @description по сути это просто debounce
+ */
+export function fixDblEvent(foo) {
+  let timer
+
+  return (...arg) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      console.log('fixDblEvent');
+      foo(...arg)
+    }, 10)
+  }
+}

package/src/assets/scss/main.scss

@@ -0,0 +1,40 @@
+:root {
+  // green
+  --green-light: #0FC176;
+  --green-medium: #26776F;
+  --green-dark: #02423C;
+  --green-low: #123234;
+  --green-bg: #152829;
+
+  // red
+  --red: #EA1246;
+  --red-medium: #920023;
+  --red-dark: #490012;
+
+  // orange
+  --orange: #E2670D;
+  --orange-medium: #7D3500;
+  --orange-dark: #471F02;
+
+  // black
+  --black: #000;
+  --black-light: #252525;
+  --black-dark: #123234;
+  --shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
+
+  // grey
+  --grey: #B5B5B5;
+  --grey-light: #ECEAEA;
+  --grey-dark: #505050;
+
+  // dis
+  --dis-text: #324F4A;
+  
+  --white: #fff;
+  --yellow:#E9C400;
+  --scroll: rgba(55, 120, 113, 0.45);
+  --hover: #0A8A54;
+  --disable: #084A36;
+
+  --transition: .2s;
+}

package/src/components/CAlert.vue

@@ -0,0 +1,230 @@
+<template>
+  <div 
+    v-if="isShow" 
+    ref="root"
+    :style="`--width: ${width}; --transition-fade: ${timeFade}ms`" 
+    :class="[classes.root, variant, {fade: isFade}]"
+  >
+    <div class="c-alert__icon">
+      <CIcon :iconId="iconId" />
+    </div>
+    
+    <div class="c-alert__content">
+      <slot>{{ text }}</slot>
+    </div>
+
+    <div @click="close" class="c-alert__close">
+      <CIcon iconId="close" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPropValidator } from '../assets/js/helpers'
+import CIcon from './CIcons/index.vue'
+
+export default {
+  data() {
+    return {
+      isLockLiveTime: false,
+      isShow: true,
+      isFade: false,
+      timeFade: 5000,
+
+      timers: {
+        live: undefined,
+        fade: undefined,
+      },
+
+      classes: {
+        root: 'c-alert',
+      },
+    }
+  },
+
+  props: {
+    liveTime: {
+      type: Number,
+
+      default: 10000,
+    },
+
+    variant: {
+      type: String,
+
+      default: 'notification',
+      validator: getPropValidator('CAlert', 'variant', ['notification', 'success', 'error']),
+    },
+
+    width: {
+      type: String,
+
+      default: 'auto',
+    },
+
+    text: {
+      type: String,
+
+      default: '',
+    }
+  },
+
+  methods: {
+    close() {
+      this.isShow = false
+      this.isLockLiveTime = true  
+    },
+
+    updateLiveTime() {
+      if (!this.isShow) return
+
+      this.isShow = true
+      this.isFade = false
+
+      clearTimeout(this.timers.fade)
+      clearTimeout(this.timers.live)
+
+      if (this.isLockLiveTime) return
+
+      this.timers.fade = setTimeout(() => {
+        this.isFade = true
+      }, Math.max(this.liveTime - this.timeFade, 0));
+
+      this.timers.live = setTimeout(() => {
+        this.isShow = false
+      }, this.liveTime);
+    },
+
+    // слушатели
+    /**
+     * @param {MouseEvent} evt 
+     */
+     handleMouseover(evt){
+      const tooltipTarget = evt.target.closest(`.${this.classes.root}`)
+
+      if (tooltipTarget !== this.$refs.root) return
+
+      this.isLockLiveTime = true
+      evt.stopPropagation()
+      this.updateLiveTime()
+    },
+
+    /**
+     * @param {MouseEvent} evt 
+     */
+    handleMouseout(evt) {
+      const tooltipTarget = evt.target.closest(`.${this.classes.root}`)
+
+      if (tooltipTarget !== this.$refs.root) return 
+      
+      this.isLockLiveTime = false
+      this.updateLiveTime()
+    },
+
+    addListener() {
+      document.body.addEventListener('mouseover', this.handleMouseover)
+      document.body.addEventListener('mouseout', this.handleMouseout)  
+    },
+
+    removeListener() {
+      document.body.removeEventListener('mouseover', this.handleMouseover)
+      document.body.removeEventListener('mouseout', this.handleMouseout)  
+    },
+  },
+
+  mounted() {
+    this.addListener()
+  },
+
+  beforeDestroy() {
+    this.removeListener()
+  },
+
+  watch: {
+    $props: {
+      deep: true,
+      immediate: true,
+
+      handler(newWal) {
+        this.updateLiveTime()
+      },
+    },
+  },
+
+  computed: {
+    iconId() {
+      const iconsIds = {
+        notification: 'bell',
+        success: 'success',
+        error: 'error',
+      }
+
+      return iconsIds[this.variant]
+    },
+  },
+
+  components: {
+    CIcon,
+  },
+}
+
+</script>
+
+<style lang="scss">
+.c-alert {
+  width: var(--width, auto);
+
+  display: flex;
+  align-items: center;
+
+  padding: 12px 25px;
+
+  border-radius: 8px;
+
+  background: var(--green-bg);
+  box-shadow: var(--shadow);
+
+  transition: var(--transition);
+
+  // prop.variant
+  &.notification {
+    border: 1px solid var(--orange-dark);
+
+    color: var(--orange);
+  } 
+  
+  &.success {
+    border: 1px solid var(--green-dark);
+
+    color: var(--green-light);
+  } 
+  
+  &.error {
+    border: 1px solid var(--red-dark);
+
+    color: var(--red);
+  }
+  // ./prop.variant
+
+  &.fade{
+    opacity: 0;
+    transform: skewX(10%);
+    
+    transition: var(--transition-fade);
+  }
+
+  &__icon {
+    margin-right: 15px;
+  }
+
+  &__close {
+    margin-left: 25px;
+
+    cursor: pointer;
+
+    svg:hover {
+      opacity: 0.6;
+    }
+  }
+}
+</style>

package/src/components/CButton.vue

@@ -0,0 +1,149 @@
+<template>
+  <button :class="['c-btn', size, variant, color]" :disabled="disabled">
+    <div class="c-btn__container">
+      <slot></slot>
+    </div>
+  </button>
+</template>
+
+<script>
+import { getPropValidator } from '../assets/js/helpers.js'
+
+  export default {
+    props: {
+      size: {
+        type: String,
+
+        default: "lg",
+        validator: getPropValidator('CButton', 'size', ['lg', 'md', 'sm']),        
+      },
+
+      variant: {
+        type: String,
+
+        default: "tonal",
+        validator: getPropValidator('CButton', 'variant', ['tonal', 'outlined', 'text']),
+      },
+
+      disabled: {
+        type: Boolean,
+
+        default: false,
+      },
+
+      color: {
+        type: String,
+
+        default: "green",
+        validator: getPropValidator('CButton', 'color', ['green', 'black']),
+      },
+    },
+  }
+</script>
+
+<style lang="scss">
+@import "../assets/scss/main.scss";
+
+.c-btn {
+  border-radius: 30px;
+  
+  transition: var(--transition);
+  cursor: pointer;
+
+  outline: none;
+  border: none;
+  
+  &:disabled {
+    cursor: default;
+  }
+
+  // prop.size
+  &.lg {
+    padding: 15px 70px;
+    font-size: 16px;
+  }
+
+  &.md {
+    padding: 8px 40px;
+    font-size: 16px;
+  }
+
+  &.sm {
+    padding: 6px 20px;
+    font-size: 14px;
+  }
+  // ./prop.size
+
+  // prop.color
+  &.green {
+    --bg-color: var(--green-light);
+    --text-color: var(--black);
+
+    --bg-hover-color: #0A8A54;
+    --text-hover-color: #252525;
+
+    --bg-disable-color: #084A36;
+    --text-disable-color: #252525;
+  }
+
+  &.black {
+    --bg-color: var(--black);
+    --text-color: var(--white);
+
+    --bg-hover-color: #06100F;
+    --text-hover-color: #787878;
+
+    --bg-disable-color: #101D19;
+    --text-disable-color: #324F4A;
+  }
+  // ./prop.color
+
+  // prop.variant
+  &.tonal {
+    background: var(--bg-color);
+    color: var(--text-color);
+
+    &:hover, &.hover {
+      background: var(--bg-hover-color);
+      color: var(--text-hover-color);
+    }
+
+    &:disabled {
+      background: var(--bg-disable-color);
+      color: var(--text-disable-color);
+    }
+  }
+
+  &.outlined {
+    --text-color: var(--white);
+
+    border: 1px solid var(--bg-color);
+    background: transparent;
+    color: var(--text-color);
+
+    &:hover, &.hover {
+      border: 1px solid var(--bg-hover-color);
+      color: var(--bg-hover-color);
+    }
+
+    &:disabled {
+      border: 1px solid var(--bg-disable-color);
+      color: var(--bg-disable-color);
+    }
+  }
+
+  &.text {
+    background: transparent;
+    color: var(--bg-color);
+
+    &:hover, &.hover {
+      color: var(--bg-hover-color);
+    }
+
+    &:disabled {
+      color: var(--bg-disable-color);
+    }
+  }
+  // ./prop.variant
+}
+</style>