its_ui_vite 0.0.3 → 0.0.5

package/README.md

@@ -45,10 +45,11 @@ export default {
 
 ```
 {
-  size: 'lg' | 'md' | 'sm',
-  variant: 'tonal' | 'outlined' | 'text',
-  color: 'green' | 'black',
-  disabled: Boolean,
+  size?: 'lg' | 'md' | 'sm',
+  variant?: 'tonal' | 'outlined' | 'text' | 'nav_item',
+  color?: 'green' | 'black',
+  disabled?: Boolean,
+  loading?: Boolean,
 }
 
 slots: ['без имени']
@@ -58,8 +59,11 @@ slots: ['без имени']
 
 ```
 {
-  tabs: Record<string, any> & { id: any, text: string }[],
+  tabs: Record<string, any> & { value: any, text: string }[],
   activeId: any, <!-- activeId должен быть в tabs -->
+  transformVal?: Boolean,
+  scroll?: Boolean,
+  animationType?: 'worm' | 'trail',
 }
 ```
 
@@ -68,13 +72,17 @@ slots: ['без имени']
 ```
 {
   <!-- реактивна -->
-  status: 'static' | 'focus' | 'error' | 'success'
-
-  width: string,
-  type: string,
-  name: string,
-  placeholder: string,
-  value: string, 
+  status?: 'static' | 'focus' | 'error' | 'success',
+  <!-- для v-mode -->
+  modelValue?: '',
+
+  width?: string,
+  type?: string,
+  size?: 'lg' | 'md' | 'sm',
+  name?: string,
+  disabled?: Boolean,
+  placeholder?: string,
+  value?: string, 
 }
 
 slots: ['successIcon' <!-- есть дефольное значение -->, 'errorIcon' <!-- есть дефольное значение -->, 'customIcon']
@@ -85,14 +93,16 @@ slots: ['successIcon' <!-- есть дефольное значение -->, 'er
 
 ```
 {
-  variant: 'checkbox' | 'radio' | 'toggle'
   <!-- по сути 'sm' используется только в CSelect -->
-  size: 'lg' | 'sm',
-  checked: Boolean,
-  disabled: Boolean,
-  text: string,
-  name:string,
-  value: string, 
+  size?: 'lg' | 'sm',
+  <!-- работает с v-mode, modelValue работает как checked в случае с checkbox и toggle, в случае с radio в нем value -->
+  modelValue?: Boolean,
+
+  variant?: 'checkbox' | 'radio' | 'toggle',
+  disabled?: Boolean,
+  text?: string,
+  name?:string,
+  value?: string,
 }
 
 slots: ['без имени' <!-- есть дефольное значение (props.text) -->]
@@ -104,7 +114,14 @@ slots: ['без имени' <!-- есть дефольное значение (p
 {
   options: Array,
   variant: 'default' | 'multiple',
-  placeholder: string,
+  size?: 'lg' | 'md' | 'sm',
+  placeholder?: string,
+  disabled?: Boolean,
+  autocomplete?: Boolean,
+  selectAll?: Boolean,
+  width?: string,
+  locale?: string,
+  transformVal?: Boolean,
 }
 ```
 
@@ -112,8 +129,8 @@ slots: ['без имени' <!-- есть дефольное значение (p
 
 ```
 {
-  position: 'top' | 'bottom',
-  interactive: Boolean,
+  position?: 'top' | 'top_left' | 'top_right' | 'bottom' | 'bottom_left' | 'bottom_right',
+  interactive?: Boolean,
 }
 
 slots: ['icon' <!-- есть дефольное значение -->, 'content']
@@ -123,7 +140,7 @@ slots: ['icon' <!-- есть дефольное значение -->, 'content']
 
 ```
 {
-  <!-- нет props -->
+  isShowTitle?: Boolean,
 }
 
 slots: ['title', 'content']
@@ -143,10 +160,10 @@ slots: ['без имени']
 
 ```
 {
-  liveTime: number,
-  variant: 'notification' | 'success' | 'error',
-  width: string,
-  text: string,
+  liveTime?: number,
+  variant?: 'notification' | 'success' | 'error',
+  width?: string,
+  text?: string,
 }
 
 slots: ['без имени' <!-- есть дефольное значение (props.text) -->]
@@ -161,7 +178,34 @@ slots: ['без имени' <!-- есть дефольное значение (p
 
 * Run container:
   ```shell
-  docker run -d -p 3000:3000 --env-file .env its-ui-kit_vue-host
+  docker run -rm -p 3000:3000 --env-file .env its-ui-kit_vue-host --name its-ui-kit_vue-host
+  ```
+
+* Run container in deattach mode:
+  ```shell
+  docker run -d -p 3000:3000 --env-file .env its-ui-kit_vue-host --name its-ui-kit_vue-host
+  ```
+
+Откройте в браузере: http://localhost:3000
+
+## Deployment via Docker
+
+* Build container:
+  ```shell
+  docker build -f Dockerfile -t its-ui-kit-3 .
+  ```
+
+*  Push to Docker registry:
+  ```shell
+  docker login https://ca-sim-docker.appmath.ru
+  docker tag its-ui-kit-3 ca-sim-docker.appmath.ru/its-ui-kit-3
+  docker push ca-sim-docker.appmath.ru/its-ui-kit-3
+  ```
+
+* Use on client-side (as DevOps):
+  ```shell
+  docker login https://ca-sim-docker.appmath.ru
+  docker compose -f docker-compose-ui-kit-stage.yml up
   ```
 
-Откройте в браузере: http://localhost:3000
+* Navigate to http://localhost:28000 (exposed by Docker compose file) to see UI Kit

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "./src/libIndex.js",
   "module": "./src/libIndex.js",
   "files": [

package/src/assets/js/helpers.js

@@ -22,8 +22,26 @@ export function fixDblEvent(foo) {
   return (...arg) => {
     clearTimeout(timer)
     timer = setTimeout(() => {
-      console.log('fixDblEvent');
       foo(...arg)
     }, 10)
   }
+}
+
+/**
+ * @description проверка на телефон
+ */
+export function isMobile() {
+  const toMatch = [
+    /Android/i,
+    /webOS/i,
+    /iPhone/i,
+    /iPad/i,
+    /iPod/i,
+    /BlackBerry/i,
+    /Windows Phone/i
+  ];
+  
+  return toMatch.some((toMatchItem) => {
+    return navigator.userAgent.match(toMatchItem);
+  });
 }

package/src/components/CAlert.vue

@@ -186,6 +186,14 @@ export default {
 
   transition: var(--transition);
 
+  button,
+  input,
+  div,
+  a {
+    font-family: inherit;
+    font-weight: inherit;
+  }
+
   // prop.variant
   &.notification {
     border: 1px solid var(--orange-dark);

package/src/components/CButton.vue

@@ -1,15 +1,33 @@
 <template>
-  <button :class="['c-btn', size, variant, color]" :disabled="disabled">
+  <button :class="['c-btn', size, variant, color, { active, loading }]" :disabled="disabled">
     <div class="c-btn__container">
       <slot></slot>
     </div>
+    <div class="c-btn__loading">
+      <CIcon
+        iconId="loading"
+        :size="loadingSize[size]"
+      />
+    </div>
   </button>
 </template>
 
 <script>
+import CIcon from './CIcons/index.vue'
+
 import { getPropValidator } from '../assets/js/helpers.js'
 
   export default {
+    data() {
+      return {
+        loadingSize: {
+          lg: 24,
+          md: 20,
+          sm: 16,
+        }
+      }
+    },
+
     props: {
       size: {
         type: String,
@@ -22,22 +40,38 @@ import { getPropValidator } from '../assets/js/helpers.js'
         type: String,
 
         default: "tonal",
-        validator: getPropValidator('CButton', 'variant', ['tonal', 'outlined', 'text']),
+        validator: getPropValidator('CButton', 'variant', ['tonal', 'outlined', 'text', 'nav_item']),
       },
 
-      disabled: {
+      color: {
+        type: String,
+
+        default: "green",
+        validator: getPropValidator('CButton', 'color', ['green', 'black']),
+      },
+
+      active: {
         type: Boolean,
 
         default: false,
       },
 
-      color: {
-        type: String,
+      disabled: {
+        type: Boolean,
 
-        default: "green",
-        validator: getPropValidator('CButton', 'color', ['green', 'black']),
+        default: false,
       },
+
+      loading: {
+        type: Boolean,
+
+        default: false,
+      }
     },
+
+    components: {
+      CIcon
+    }
   }
 </script>
 
@@ -45,6 +79,7 @@ import { getPropValidator } from '../assets/js/helpers.js'
 @import "../assets/scss/main.scss";
 
 .c-btn {
+  position: relative;
   border-radius: 30px;
   
   transition: var(--transition);
@@ -53,9 +88,34 @@ import { getPropValidator } from '../assets/js/helpers.js'
   outline: none;
   border: none;
   
+  // prop.disabled
   &:disabled {
     cursor: default;
   }
+  // ./prop.disabled
+
+  // ./prop.loading
+  &.loading {
+    pointer-events: none;
+
+    .c-btn__container {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .c-btn__loading {
+      opacity: 1;
+    }
+  }
+  // ./prop.loading
+
+  button,
+  input,
+  div,
+  a {
+    font-family: inherit;
+    font-weight: inherit;
+  }
 
   // prop.size
   &.lg {
@@ -144,6 +204,61 @@ import { getPropValidator } from '../assets/js/helpers.js'
       color: var(--bg-disable-color);
     }
   }
+
+  &.nav_item {
+    height: 46px;
+
+    padding: 0 12px;
+
+    border-radius: 0;
+
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 500;
+
+    background: transparent;
+    color: var(--white);
+
+    &.active {
+      background: var(--green-dark);
+    }
+
+    .c-btn__container {
+      display: flex; 
+      align-items: center;
+      justify-content: flex-start;
+
+      height: 100%;
+
+      text-align: left;
+    }
+  }
   // ./prop.variant
+
+  &__loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+
+    svg {
+      animation: animation-rotation steps(100) 1.5s infinite;
+    }
+  }
+}
+
+@keyframes animation-rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  } 
 }
 </style>

package/src/components/CCheckbox.vue

@@ -3,12 +3,14 @@
     <input 
       class="c-checkbox__inp" 
       :type="variant === 'radio' ? 'radio' : 'checkbox'" 
-      :name="name" 
-      :value="value"
-      :checked="checked"
+      :name="name"
+      :value="modelValue || value"
+      :checked="isRadio ? value === modelValue : modelValue"
       :disabled="disabled"
-      @change="$emit('update:checked', $event.target.checked)"
+      @change="$emit('update:modelValue', isRadio ? value : $event.target.checked)"
     />
+      <!-- @change="(evt) => $emit('change', isRadio ? (modelValue || value) : evt.target.checked)" -->
+      <!-- @change="$emit('update:checked', $event.target.checked), $emit('update:modelValue', $event.target.value)" -->
 
     <div class="c-checkbox__checkmark"></div>
     <div class="c-checkbox__text">
@@ -22,10 +24,17 @@ import { getPropValidator } from '../assets/js/helpers.js'
 
 export default {
   name: 'CCheckbox',
-  emits: ['update:checked'],
 
-  props: {
+  data() {
+    return {
+      isRadio: this.variant === 'radio',
+    }
+  },
 
+  emits: ['update:checked', 'update:modelValue'],
+
+  props: {
+ 
     variant: {
       type: String,
 
@@ -41,12 +50,6 @@ export default {
       validator: getPropValidator('CCheckbox', 'size', ['lg', 'sm'])
     },
 
-    checked: {
-      type: Boolean,
-
-      default: false,
-    },
-
     disabled: {
       type: Boolean,
 
@@ -66,7 +69,11 @@ export default {
     },
 
     value: {
-      type: String, 
+      default: '',
+    },
+
+    modelValue: {
+      type: [Boolean, String, Number, Array],
       
       default: '',
     },
@@ -85,8 +92,6 @@ export default {
     --toggle-indentation: 1px;
     --toggle-padding: calc(var(--border-width) + var(--toggle-indentation) * 2);
 
-    position: relative;
-
     display: flex;
     align-items: center;
 
@@ -94,6 +99,14 @@ export default {
 
     cursor: pointer;
 
+    button,
+    input,
+    div,
+    a {
+      font-family: inherit;
+      font-weight: inherit;
+    }
+
     &.disabled {
       cursor: default;
     }
@@ -102,10 +115,14 @@ export default {
     &.lg {
       --size: 28px;
       --toggle-size: 24px;
+
+      --font-size: 16px;
     }
 
     &.sm {
       --size: 20px;
+      
+      --font-size: 14px;
     }
     // ./prop.size
 
@@ -132,7 +149,7 @@ export default {
           &~ .c-checkbox__checkmark {
 
             &::after {
-              left: calc(var(--toggle-size) + var(--border-width) + var(--toggle-indentation)); // тоже самое что и left: 26px;
+              left: calc(var(--toggle-size) + var(--toggle-indentation)); // тоже самое что и left: 25px;
 
               background: var(--green-light);
             }
@@ -150,8 +167,8 @@ export default {
 
         &::after {
           position: absolute;
-          left: 2px;
-          top: 2px;
+          left: 1px;
+          top: 1px;
 
           width: var(--toggle-size);
           height: var(--toggle-size);
@@ -180,7 +197,7 @@ export default {
       }
 
       &~ .c-checkbox__text {
-        color: var(--white);
+        color: var(--green-light);
       }
     }
 
@@ -205,6 +222,8 @@ export default {
     box-sizing: border-box;
     display: flex;
 
+    position: relative;
+
     width: var(--size);
     height: var(--size);
     
@@ -232,9 +251,9 @@ export default {
   }
 
   &__text {
-    font-size: 16px;
+    font-size: var(--font-size);
 
-    color: var(--green-medium);
+    color: var(--white);
   }
 }
 

package/src/components/CIcons/index.vue

@@ -36,6 +36,10 @@
       <path d="M12 16V16.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
 
+    <svg v-if="iconId === 'loading'" :width="w" :height="h" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10 0C8.68678 -1.489e-08 7.38642 0.258657 6.17317 0.761204C4.95991 1.26375 3.85752 2.00035 2.92893 2.92893C2.00035 3.85752 1.26375 4.95991 0.761204 6.17317C0.258657 7.38642 -1.489e-08 8.68678 0 10C-4.96335e-08 11.3132 0.258657 12.6136 0.761204 13.8268C1.26375 15.0401 2.00035 16.1425 2.92893 17.0711C3.85752 17.9997 4.95991 18.7362 6.17317 19.2388C7.38642 19.7413 8.68678 20 10 20C11.3132 20 12.6136 19.7413 13.8268 19.2388C15.0401 18.7362 16.1425 17.9997 17.0711 17.0711C17.9997 16.1425 18.7362 15.0401 19.2388 13.8268C19.7413 12.6136 20 11.3132 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7362 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761204C12.6136 0.258657 11.3132 -4.96335e-08 10 0ZM10 1C11.314 1.00028 12.6119 1.28828 13.8027 1.84375L12.959 3.65625C12.0324 3.22403 11.0224 3.00003 10 3C8.97758 3.00003 7.96758 3.22403 7.04102 3.65625L6.19922 1.84961C7.38895 1.2924 8.68625 1.0024 10 1ZM10 4C10.7879 4 11.5681 4.15519 12.2961 4.45672C13.0241 4.75825 13.6855 5.20021 14.2426 5.75736C14.7998 6.31451 15.2417 6.97595 15.5433 7.7039C15.8448 8.43185 16 9.21207 16 10C16 10.7879 15.8448 11.5681 15.5433 12.2961C15.2417 13.0241 14.7998 13.6855 14.2426 14.2426C13.6855 14.7998 13.0241 15.2417 12.2961 15.5433C11.5681 15.8448 10.7879 16 10 16C8.4087 16 6.88258 15.3679 5.75736 14.2426C4.63214 13.1174 4 11.5913 4 10C4 8.4087 4.63214 6.88258 5.75736 5.75736C6.88258 4.63214 8.4087 4 10 4Z" fill="white"/>
+    </svg>
+
   </div>
 </template>
 

package/src/components/CInput.vue

@@ -1,11 +1,12 @@
 <template>
-  <div :class="['c-input__wrap', status]" :style="`--c-input-width: ${width}`">
+  <div :class="['c-input__wrap', status, size, {disabled}]" :style="`--c-input-width: ${width}`">
     <input 
       class="c-input" 
       :type="type" 
       :name="name" 
       :placeholder="placeholder" 
       :value="modelValue"
+      :disabled="disabled"
       @input="$emit('update:modelValue', $event.target.value)"
     />
 
@@ -37,8 +38,8 @@ import { getPropValidator } from '../assets/js/helpers';
     components: {
       CIcon
     },
+    
     props: {
-
       status: {
         type: String,
 
@@ -46,12 +47,23 @@ import { getPropValidator } from '../assets/js/helpers';
         validator: getPropValidator('CInput', 'status', ['static', 'focus'/* it rofls */, 'error', 'success'])
       },
 
+      size: {
+        type: String,
+
+        default: 'lg',
+        validator: getPropValidator('CInput', 'size', ['lg', 'md', 'sm'])
+      },
+
       width: {
         type: String,
 
         default: '350px'
       },
 
+      disabled: {
+        type: Boolean,
+      },
+
       type: {
         type: String,
         
@@ -71,8 +83,6 @@ import { getPropValidator } from '../assets/js/helpers';
       },
 
       modelValue: {
-        type: String, 
-        
         default: '',
       }
     },
@@ -85,8 +95,8 @@ import { getPropValidator } from '../assets/js/helpers';
     box-sizing: border-box;
 
     width: var(--c-input-width);
-    padding: 15px 25px;
-    font-size: 21px;
+    padding: var(--padding);
+    font-size: inherit;
 
     outline: none;
     border: 1px solid var(--green-medium);
@@ -107,8 +117,28 @@ import { getPropValidator } from '../assets/js/helpers';
 
     &__wrap {
       position: relative;
+      
+      min-width: var(--c-input-width);
+
+      font-size: var(--font-size);
+
+      button,
+      input,
+      div,
+      a {
+        font-family: inherit;
+        font-weight: inherit;
+      }
+
+      // prop.disabled
+      &.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      // ./prop.disabled
 
       // prop.status
+      &:hover .c-input,
       &.focus .c-input {
         border: 1px solid var(--green-light);
       } 
@@ -143,6 +173,23 @@ import { getPropValidator } from '../assets/js/helpers';
         }
       }
       // ./prop.status
+    
+      // prop.size
+      &.lg {
+        --padding: 15px 25px;
+        --font-size: 21px;
+      }
+
+      &.md {
+        --padding: 10px 17px;
+        --font-size: 21px;
+      }
+
+      &.sm {
+        --padding: 10px 12px;
+        --font-size: 14px;
+      }
+      // ./prop.size
     }
 
     &__icon {