its_ui_vite 0.0.3 → 0.0.4

package/README.md

@@ -45,10 +45,10 @@ 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,
 }
 
 slots: ['без имени']
@@ -58,8 +58,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 +71,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 +92,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 +113,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 +128,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 +139,7 @@ slots: ['icon' <!-- есть дефольное значение -->, 'content']
 
 ```
 {
-  <!-- нет props -->
+  isShowTitle?: Boolean,
 }
 
 slots: ['title', 'content']
@@ -143,10 +159,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 +177,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.4",
   "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,5 +1,5 @@
 <template>
-  <button :class="['c-btn', size, variant, color]" :disabled="disabled">
+  <button :class="['c-btn', size, variant, color, { active }]" :disabled="disabled">
     <div class="c-btn__container">
       <slot></slot>
     </div>
@@ -22,20 +22,26 @@ 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,
       },
     },
   }
@@ -57,6 +63,14 @@ import { getPropValidator } from '../assets/js/helpers.js'
     cursor: default;
   }
 
+  button,
+  input,
+  div,
+  a {
+    font-family: inherit;
+    font-weight: inherit;
+  }
+
   // prop.size
   &.lg {
     padding: 15px 70px;
@@ -144,6 +158,35 @@ 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
 }
 </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/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 {

package/src/components/CPopup.vue

@@ -1,17 +1,28 @@
 <template>
   <div class="c-popup">
-    <div class="c-popup__title">
-      <slot name="title"></slot>
+    <div
+      v-if="isShowTitle"
+      class="c-popup__title"
+    >
+      <slot name="title">Label</slot>
     </div>
 
     <div class="c-popup__content">
-      <slot name="content"></slot>
+      <slot name="content">Content goes here</slot>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script>
+  export default {
+    props: {
+      isShowTitle: {
+        type: Boolean,
 
+        default: true
+      }
+    }
+  }
 </script>
 
 <style lang="scss">
@@ -24,10 +35,20 @@
   background: var(--green-bg);
   box-shadow: var(--shadow);
 
+  button,
+  input,
+  div,
+  a {
+    font-family: inherit;
+    font-weight: inherit;
+  }
+
   &__title {
-    height: 35px;
+    box-sizing: border-box;
+    min-height: 35px;
     width: 100%;
 
+    padding-bottom: 10px;
     border-bottom: 1px solid var(--green-medium);
 
     font-size: 16px;