its_ui_vite 1.0.18 → 1.1.2

package/README.md

@@ -90,6 +90,28 @@ slots: ['successIcon' <!-- есть дефольное значение -->, 'er
 
 ```
 
+* CInput2
+
+```
+{
+  <!-- реактивна -->
+   status?: 'static' | 'focus' | 'error' | 'success',
+   <!-- для v-mode -->
+  modelValue?: '',
+
+  iconPosition?: Array<'left' | 'right'>
+  size?: 'lg' | 'md' | 'sm',
+  width?: string,
+  disabled?: boolean,
+  type?: InputTypeHTMLAttribute,
+  name?: string,
+  placeholder?: string,
+}
+
+slots: ['successIcon' <!-- есть дефольное значение -->, 'errorIcon' <!-- есть дефольное значение -->, 'customIcon-left', 'customIcon-right']
+
+```
+
 * CCheckbox 
 
 ```
@@ -130,6 +152,52 @@ slots: ['без имени' <!-- есть дефольное значение (p
 slots: ['customIcon' <!-- есть дефольное значение -->]
 ```
 
+* CDropdown
+
+```
+{
+  options?: Array,
+  size?: 'lg' | 'md' | 'sm',
+  autocomplete?: boolean,
+  disabled?: boolean,
+  transformVal?: boolean,
+  iconPosition?: Array<'left' | 'right'>,
+  iconLeftName?: keyof TIcon,
+  iconRightName?: keyof TIcon,
+  isOpen?: boolean,
+  locale?: 'rus' | 'usa' | 'tur' | 'spa',
+  placeholder?: string,
+  width?: string,
+  modelValue?: any,
+}
+
+slots: ['customIcon-left', 'customIcon-right' <!-- есть дефольное значение -->]
+```
+
+
+* CInput2Select
+
+```
+{
+  options?: Array,
+  size?: 'lg' | 'md' | 'sm',
+  variant?: 'default' | 'multiple',
+  autocomplete?: boolean,
+  disabled?: boolean,
+  transformVal?: boolean,
+  iconPosition?: Array<'left' | 'right'>,
+  iconLeftName?: keyof TIcon,
+  iconRightName?: keyof TIcon,
+  isOpen?: boolean,
+  locale?: 'rus' | 'usa' | 'tur' | 'spa',
+  placeholder?: string,
+  width?: string,
+  modelValue?: any,
+}
+
+slots: ['customIcon' <!-- есть дефольное значение -->]
+```
+
 * CDatepicker 
 
 ```
@@ -220,14 +288,14 @@ slots: ['без имени' <!-- есть дефольное значение (p
 
 *  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
+  docker login https://docker-registry.compass.msk.ru
+  docker tag its-ui-kit-3 docker-registry.compass.msk.ru/its-ui-kit-3
+  docker push docker-registry.compass.msk.ru/its-ui-kit-3
   ```
 
 * Use on client-side (as DevOps):
   ```shell
-  docker login https://ca-sim-docker.appmath.ru
+  docker login https://docker-registry.compass.msk.ru
   docker compose -f docker-compose-ui-kit-stage.yml up
   ```
 

package/package.json

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

package/src/assets/js/helpers.js

@@ -83,7 +83,7 @@ export function addTracingElement(target, moveFn = () => {}) {
   }
 
   function dispatch() {
-    const position = target.value.getBoundingClientRect()
+    const position = target.value?.getBoundingClientRect()
 
     if (!position) return;
 

package/src/assets/scss/main.scss

@@ -5,11 +5,13 @@
   --green-dark: #02423C;
   --green-low: #123234;
   --green-bg: #152829;
+  --brand-500: #04975C;
 
   // red
   --red: #EA1246;
   --red-medium: #920023;
   --red-dark: #490012;
+  --danger-500: #CC2C17;
 
   // orange
   --orange: #E2670D;
@@ -35,6 +37,13 @@
   --scroll: rgba(55, 120, 113, 0.45);
   --hover: #0A8A54;
   --disable: #084A36;
+  --neutral-50: #F6F6F7;
+  --neutral-200: #E3E3E7;
+  --neutral-300: #CFCFD6;
+  --neutral-400: #76758A;
+  --neutral-500: #49485C;
+  --neutral-700: #2D2C3D;
+  --grey-20: #76758A33;
 
   --transition: .2s;
 }

package/src/components/CCheckbox.vue

@@ -1,5 +1,8 @@
 <template>
-  <label :class="['c-checkbox__wrap', variant, size, {disabled}]">
+  <label
+    :class="['c-checkbox__wrap', variant, size, {disabled}]"
+    @dblclick="handleDblclick"
+  >
     <input 
       class="c-checkbox__inp" 
       :type="variant === 'radio' ? 'radio' : 'checkbox'" 
@@ -7,7 +10,7 @@
       :value="modelValue || value"
       :checked="isRadio ? value === modelValue : modelValue"
       :disabled="disabled"
-      @change="({ target }) => $emit('update:modelValue', isRadio ? value : (target as HTMLInputElement).checked)"
+      @change="({ target }) => dispatchEmit(target as HTMLInputElement)"
     />
     <div class="c-checkbox__checkmark"></div>
     <div class="c-checkbox__text">
@@ -45,6 +48,17 @@ const emits = defineEmits<{
 
 const isRadio = props.variant === 'radio'
 
+function handleDblclick() {
+  if (!isRadio) return;
+
+  emits('update:modelValue', null)
+}
+
+function dispatchEmit(target: HTMLInputElement) {
+  emits('update:checked', target.checked)
+  emits('update:modelValue', isRadio ? props.value : target.checked)
+}
+
 </script>
 
 <style lang="scss">
@@ -57,11 +71,13 @@ const isRadio = props.variant === 'radio'
     --border-width: 1px;
     --toggle-indentation: 1px;
     --toggle-padding: calc(var(--border-width) + var(--toggle-indentation) * 2);
+    --checkmark-width: calc((var(--size) * 2) - (var(--border-width) + var(--toggle-indentation)) * 2);
+    --checkmark-distance: 12px;
 
     display: flex;
     align-items: center;
 
-    gap: 12px;
+    gap: var(--checkmark-distance);
 
     cursor: pointer;
 
@@ -149,7 +165,7 @@ const isRadio = props.variant === 'radio'
       }
 
       .c-checkbox__checkmark {
-        width: calc((var(--size) * 2) - (var(--border-width) + var(--toggle-indentation)) * 2);
+        width: var(--checkmark-width);
       
         border-radius: var(--size);
 
@@ -196,14 +212,14 @@ const isRadio = props.variant === 'radio'
         border-color: transparent;
 
         &::after {
-          background: var(--black-dark);
+          background: var(--disable);
 
           opacity: 1;
         }
       }
 
       &~ .c-checkbox__text {
-        color: var(--black-dark);
+        color: var(--disable);
       }
     }
   }
@@ -241,6 +257,8 @@ const isRadio = props.variant === 'radio'
   }
 
   &__text {
+    width: calc(100% - var(--checkmark-width) - var(--checkmark-distance));
+
     font-size: var(--font-size);
 
     color: var(--white);

package/src/components/CCheckbox2.vue

@@ -0,0 +1,313 @@
+<template>
+  <label
+    :class="['c-checkbox-2__wrap', `text-${textPosition}`, `${indeterminate ? 'indeterminate' : ''}`, variant, {disabled}]"
+    @dblclick="handleDblclick"
+  >
+    <input 
+      class="c-checkbox-2__inp" 
+      :type="variant === 'radio' ? 'radio' : 'checkbox'" 
+      :name="name"
+      :value="modelValue || value"
+      :checked="isRadio ? value === modelValue : modelValue"
+      :disabled="disabled"
+      @change="({ target }) => dispatchEmit(target as HTMLInputElement)"
+    />
+    <div class="c-checkbox-2__checkmark"></div>
+    <div class="c-checkbox-2__text">
+      <slot>{{ text }}</slot>
+    </div>
+  </label>
+</template>
+
+<script setup lang="ts">
+
+type TProps = {
+  variant?: 'checkbox' | 'radio' | 'toggle',
+  textPosition?: 'left' | 'right',
+  disabled?: boolean,
+  indeterminate?: boolean,
+  text?: string,
+  name?: string,
+  value?: any,
+  modelValue?: any,
+}
+
+const props = withDefaults(defineProps<TProps>(), {
+  variant: 'checkbox',
+  textPosition: 'right',
+  indeterminate: false,
+  disabled: false,
+  text: '',
+  name: 'c_checkbox-2',
+  value: '',
+  modelValue: '',
+});
+
+const emits = defineEmits<{
+  (name: 'update:checked', value: boolean): void,
+  (name: 'update:modelValue', value: any): void,  
+}>();
+
+const isRadio = props.variant === 'radio'
+
+function handleDblclick() {
+  if (!isRadio) return;
+
+  emits('update:modelValue', null)
+}
+
+function dispatchEmit(target: HTMLInputElement) {
+  emits('update:checked', target.checked)
+  emits('update:modelValue', isRadio ? props.value : target.checked)
+}
+
+</script>
+
+<style lang="scss">
+// этого элемента нет
+.c-checkbox-2 {
+
+  // родительский элемент
+  &__wrap {
+    // для toggle
+    --border-width: 1px;
+    --toggle-indentation: 1px;
+    --toggle-padding: calc(var(--border-width) + var(--toggle-indentation) * 2);
+    --checkmark-width: calc((var(--size) * 2) + (var(--border-width) + var(--toggle-indentation)) * 2);
+    --checkmark-distance: 6px;
+    --size: 20px;
+      
+    --font-size: 14px;
+
+    display: flex;
+    align-items: center;
+
+    gap: var(--checkmark-distance);
+
+    cursor: pointer;
+
+    button,
+    input,
+    div,
+    a {
+      font-family: inherit;
+      font-weight: inherit;
+    }
+
+    &.disabled {
+      cursor: default;
+    }
+
+    // prop.textPosition
+    &.text-right {
+      flex-direction: row;
+    }    
+
+    &.text-left {
+      flex-direction: row-reverse;
+    }
+    // ./prop.textPosition    
+
+    // prop.variant
+    &.checkbox {
+      &.indeterminate { 
+        .c-checkbox-2__checkmark::after {
+          background: var(--green-light) url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.75H8.75' stroke='%23F6F6F7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
+        }
+
+        .c-checkbox-2__inp {
+          &:disabled ~ .c-checkbox-2__checkmark::after {
+            background-color: var(--neutral-500);
+          }
+        }
+      }
+      
+      .c-checkbox-2__checkmark {
+        border-radius: 4px;
+
+        &::after {
+          background: var(--green-light) url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 4.75L3.84858 7.40593C4.06656 7.59277 4.39676 7.55808 4.57116 7.33002L10.25 0.75' stroke='%23F6F6F7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
+        }
+      }
+
+      .c-checkbox-2__inp {
+        &:checked {
+          &~ .c-checkbox-2__checkmark::after {
+            opacity: 1;
+          }
+        }
+
+        &:disabled:not(:checked) {
+          &~ .c-checkbox-2__checkmark::after {
+            background-image: none;
+          }
+        }
+      }
+    }
+
+    &.radio {
+      .c-checkbox-2__inp:checked ~ .c-checkbox-2__checkmark {
+        &::before {
+          display: flex;
+        }
+      }
+
+      .c-checkbox-2__checkmark {
+        border-radius: 50%;
+
+        &::before {
+          content: '';
+          position: absolute;
+          z-index: 1;
+
+          left: 4px;
+          top: 4px;
+          
+          display: none;
+
+          width: 10px;
+          height: 10px;
+          
+          border-radius: 50%;
+
+          background: var(--white);
+        }
+
+        &::after{
+          background: var(--green-light);
+        }
+      }
+    }
+
+    &.toggle {
+      .c-checkbox-2__inp {
+        &:checked {
+          &~ .c-checkbox-2__checkmark {
+            background: var(--brand-500);
+
+            &::after {
+              left: 24px;
+            }
+          }
+        }
+      }
+
+      .c-checkbox-2__inp {
+        &:disabled {
+          background: var(--neutral-500);
+
+          &~ .c-checkbox-2__checkmark::after {
+            background: var(--neutral-400);
+          }
+
+          &:checked {
+            &~ .c-checkbox-2__checkmark {
+              background: var(--neutral-500);
+              
+              &::after {
+                left: 24px;
+              }
+            }
+          }
+        }
+      }
+
+      .c-checkbox-2__checkmark {
+        width: 42px;
+      
+        border-radius: var(--size);
+        border: none;
+
+        background: var(--neutral-500);
+
+        &::after {
+          position: absolute;
+          left: 2px;
+          top: 2px;
+
+          width: 16px;
+          height: 16px;
+
+          border-radius: 50%;
+
+          background: var(--neutral-200);
+
+          opacity: 1;
+        }
+      }
+    }
+    // ./prop.variant
+  }
+
+  &__inp {
+    display: none;
+
+    &:checked {
+      &~ .c-checkbox-2__checkmark {
+        border-color: var(--brand-500);
+
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:disabled {
+      &~ .c-checkbox-2__checkmark {
+        border-color: transparent;
+
+        &::after {
+          background-color: var(--neutral-500);
+
+          opacity: 1;
+        }
+      }
+
+      &~ .c-checkbox-2__text {
+        color: var(--neutral-400);
+      }
+    }
+  }
+
+  &__checkmark {
+    box-sizing: border-box;
+    display: flex;
+
+    position: relative;
+
+    width: var(--size);
+    height: var(--size);
+    
+    flex-shrink: 0;
+
+    border: var(--border-width) solid var(--neutral-400);
+    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 {
+    width: calc(100% - var(--checkmark-width) - var(--checkmark-distance));
+
+    font-size: var(--font-size);
+
+    color: var(--neutral-50);
+  }
+}
+
+</style>

package/src/components/CDatepicker.vue

@@ -35,6 +35,7 @@
 
     
     <div
+      v-if="showTime"
       ref="time"
       :class="['c-datepicker__time_wrap', { open: isOpenTime }]"
     >
@@ -60,7 +61,10 @@
           @blur="setIsOpenTime(false)"
         />
       </div>
-      <Teleport :to="teleportTo">
+      <Teleport
+        v-if="showTime"
+        :to="teleportTo"
+      >
         <div
           class="c-datepicker__time_list-wrap"
           ref="timeContent"
@@ -206,6 +210,7 @@ import { computed, ref, watch, onMounted, onUnmounted, Teleport } from 'vue';
 
 type TProps = {
   date?: string,
+  showTime: boolean,
   locale?: 'rus' | 'usa' | 'tur' | 'spa',
   max?: string,
   min?: string,
@@ -217,6 +222,7 @@ type TProps = {
 
 const props = withDefaults(defineProps<TProps>(), {
   locale: 'rus',
+  showTime: true,
   isOpen: false,
   width: '100%',
   modelValue: () => [],
@@ -754,6 +760,8 @@ $timeWidth: 54px;
     &_wrap {
       position: relative;
 
+      flex-grow: 1;
+
       cursor: pointer;
 
       &.open,