its_ui_vite 1.1.7 → 1.1.8

package/package.json

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

package/src/assets/icon/icons-manifest.ts

@@ -97,6 +97,10 @@ export type TIcon = {
     'bx-wind'?: boolean,
     /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNyAxMUg5VjEzSDdWMTFaTTIxIDVWMTlDMjEgMjAuMTEgMjAuMTEgMjEgMTkgMjFINUMzLjg5IDIxIDMgMjAuMSAzIDE5VjVDMyAzLjkgMy45IDMgNSAzSDZWMUg4VjNIMTZWMUgxOFYzSDE5QzIwLjExIDMgMjEgMy45IDIxIDVaTTUgN0gxOVY1SDVWN1pNMTkgMTlWOUg1VjE5SDE5Wk0xNSAxM1YxMUgxN1YxM0gxNVpNMTEgMTNWMTFIMTNWMTNIMTFaTTcgMTVIOVYxN0g3VjE1Wk0xNSAxN1YxNUgxN1YxN0gxNVpNMTEgMTdWMTVIMTNWMTdIMTFaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==) */
     'calendar-month-outline'?: boolean,
+    /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxwYXRoIGQ9Ik0xMiAxNS41QzEzLjkzMyAxNS41IDE1LjUgMTMuOTMzIDE1LjUgMTJDMTUuNSAxMC4wNjcgMTMuOTMzIDguNSAxMiA4LjVDMTAuMDY3IDguNSA4LjUgMTAuMDY3IDguNSAxMkM4LjUgMTMuOTMzIDEwLjA2NyAxNS41IDEyIDE1LjVaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4gIDxwYXRoIGQ9Ik0yIDEyLjg4VjExLjEyQzIgMTAuMDggMi44NSA5LjIyIDMuOSA5LjIyQzUuNzEgOS4yMiA2LjQ1IDcuOTQgNS41NCA2LjM3QzUuMDIgNS40NyA1LjMzIDQuMyA2LjI0IDMuNzhMNy45NyAyLjc5QzguNzYgMi4zMiA5Ljc4IDIuNiAxMC4yNSAzLjM5TDEwLjM2IDMuNThDMTEuMjYgNS4xNSAxMi43NCA1LjE1IDEzLjY1IDMuNThMMTMuNzYgMy4zOUMxNC4yMyAyLjYgMTUuMjUgMi4zMiAxNi4wNCAyLjc5TDE3Ljc3IDMuNzhDMTguNjggNC4zIDE4Ljk5IDUuNDcgMTguNDcgNi4zN0MxNy41NiA3Ljk0IDE4LjMgOS4yMiAyMC4xMSA5LjIyQzIxLjE1IDkuMjIgMjIuMDEgMTAuMDcgMjIuMDEgMTEuMTJWMTIuODhDMjIuMDEgMTMuOTIgMjEuMTYgMTQuNzggMjAuMTEgMTQuNzhDMTguMyAxNC43OCAxNy41NiAxNi4wNiAxOC40NyAxNy42M0MxOC45OSAxOC41NCAxOC42OCAxOS43IDE3Ljc3IDIwLjIyTDE2LjA0IDIxLjIxQzE1LjI1IDIxLjY4IDE0LjIzIDIxLjQgMTMuNzYgMjAuNjFMMTMuNjUgMjAuNDJDMTIuNzUgMTguODUgMTEuMjcgMTguODUgMTAuMzYgMjAuNDJMMTAuMjUgMjAuNjFDOS43OCAyMS40IDguNzYgMjEuNjggNy45NyAyMS4yMUw2LjI0IDIwLjIyQzUuMzMgMTkuNyA1LjAyIDE4LjUzIDUuNTQgMTcuNjNDNi40NSAxNi4wNiA1LjcxIDE0Ljc4IDMuOSAxNC43OEMyLjg1IDE0Ljc4IDIgMTMuOTIgMiAxMi44OFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) */
+    'gear'?: boolean,
+    /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxwYXRoIGQ9Ik0xMiAyTDE1IDVIMTNWMTFIMTlWOUwyMiAxMkwxOSAxNVYxM0gxM1YxOUgxNUwxMiAyMkw5IDE5SDExVjEzSDVWMTVMMiAxMkw1IDlWMTFIMTFWNUg5TDEyIDJaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==) */
+    'move'?: boolean,
 }
 export const iconContent = {
     'Bar-chart': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 20V10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 20V4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 20V14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
@@ -148,4 +152,6 @@ export const iconContent = {
     'bx-volume-mute': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.707 20.293L19.684 18.27C21.1845 16.5263 22.0063 14.3003 21.999 12C21.999 7.90897 19.527 4.54697 16 2.99997V4.99997C18.387 6.38597 19.999 9.04697 19.999 12C19.9946 13.7765 19.4072 15.5025 18.327 16.913L17.042 15.628C17.644 14.536 18 13.19 18 12C18 10.229 17.225 8.09997 16 6.99997V14.586L14 12.586V3.99997C13.9999 3.81908 13.9508 3.64161 13.8578 3.48645C13.7648 3.3313 13.6315 3.20426 13.472 3.11889C13.3125 3.03351 13.1329 2.99298 12.9522 3.00163C12.7715 3.01027 12.5966 3.06776 12.446 3.16797L7.727 6.31297L3.707 2.29297L2.293 3.70697L20.293 21.707L21.707 20.293ZM12 5.86797V10.586L9.169 7.75497L12 5.86797ZM4 17H6.697L12.445 20.832C12.5958 20.9321 12.7708 20.9896 12.9516 20.9984C13.1324 21.0072 13.3122 20.967 13.472 20.882C13.6316 20.7965 13.765 20.6693 13.858 20.514C13.951 20.3587 14.0001 20.181 14 20V18.121L12 16.121V18.132L7.555 15.168C7.53 15.151 7.499 15.148 7.473 15.135C7.35491 15.0707 7.22491 15.0312 7.091 15.019C7.059 15.016 7.032 15 7 15H4V8.99997H4.879L3.102 7.22297C2.77189 7.38821 2.4941 7.6418 2.29954 7.95553C2.10499 8.26926 2.00129 8.63081 2 8.99997V15C2 16.103 2.897 17 4 17Z" fill="white"/></svg>`,
     'bx-wind': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 5.5C13 3.57 11.43 2 9.5 2C7.466 2 6.25 3.525 6.25 5H8.25C8.25 4.585 8.638 4 9.5 4C10.327 4 11 4.673 11 5.5C11 6.327 10.327 7 9.5 7H2V9H9.5C11.43 9 13 7.43 13 5.5ZM15.5 15H8V17H15.5C16.327 17 17 17.673 17 18.5C17 19.327 16.327 20 15.5 20C14.638 20 14.25 19.415 14.25 19H12.25C12.25 20.475 13.466 22 15.5 22C17.43 22 19 20.43 19 18.5C19 16.57 17.43 15 15.5 15Z" fill="white"/><path d="M18 5C15.794 5 14 6.794 14 9H16C16 7.897 16.897 7 18 7C19.103 7 20 7.897 20 9C20 10.103 19.103 11 18 11H2V13H18C20.206 13 22 11.206 22 9C22 6.794 20.206 5 18 5ZM2 15H6V17H2V15Z" fill="white"/></svg>`,
     'calendar-month-outline': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11H9V13H7V11ZM21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5ZM5 7H19V5H5V7ZM19 19V9H5V19H19ZM15 13V11H17V13H15ZM11 13V11H13V13H11ZM7 15H9V17H7V15ZM15 17V15H17V17H15ZM11 17V15H13V17H11Z" fill="white"/></svg>`,
+    'gear': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">  <path d="M12 15.5C13.933 15.5 15.5 13.933 15.5 12C15.5 10.067 13.933 8.5 12 8.5C10.067 8.5 8.5 10.067 8.5 12C8.5 13.933 10.067 15.5 12 15.5Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M2 12.88V11.12C2 10.08 2.85 9.22 3.9 9.22C5.71 9.22 6.45 7.94 5.54 6.37C5.02 5.47 5.33 4.3 6.24 3.78L7.97 2.79C8.76 2.32 9.78 2.6 10.25 3.39L10.36 3.58C11.26 5.15 12.74 5.15 13.65 3.58L13.76 3.39C14.23 2.6 15.25 2.32 16.04 2.79L17.77 3.78C18.68 4.3 18.99 5.47 18.47 6.37C17.56 7.94 18.3 9.22 20.11 9.22C21.15 9.22 22.01 10.07 22.01 11.12V12.88C22.01 13.92 21.16 14.78 20.11 14.78C18.3 14.78 17.56 16.06 18.47 17.63C18.99 18.54 18.68 19.7 17.77 20.22L16.04 21.21C15.25 21.68 14.23 21.4 13.76 20.61L13.65 20.42C12.75 18.85 11.27 18.85 10.36 20.42L10.25 20.61C9.78 21.4 8.76 21.68 7.97 21.21L6.24 20.22C5.33 19.7 5.02 18.53 5.54 17.63C6.45 16.06 5.71 14.78 3.9 14.78C2.85 14.78 2 13.92 2 12.88Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+    'move': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">  <path d="M12 2L15 5H13V11H19V9L22 12L19 15V13H13V19H15L12 22L9 19H11V13H5V15L2 12L5 9V11H11V5H9L12 2Z" fill="white"/></svg>`,
 }

package/src/assets/icon/svg/gear.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 15.5C13.933 15.5 15.5 13.933 15.5 12C15.5 10.067 13.933 8.5 12 8.5C10.067 8.5 8.5 10.067 8.5 12C8.5 13.933 10.067 15.5 12 15.5Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M2 12.88V11.12C2 10.08 2.85 9.22 3.9 9.22C5.71 9.22 6.45 7.94 5.54 6.37C5.02 5.47 5.33 4.3 6.24 3.78L7.97 2.79C8.76 2.32 9.78 2.6 10.25 3.39L10.36 3.58C11.26 5.15 12.74 5.15 13.65 3.58L13.76 3.39C14.23 2.6 15.25 2.32 16.04 2.79L17.77 3.78C18.68 4.3 18.99 5.47 18.47 6.37C17.56 7.94 18.3 9.22 20.11 9.22C21.15 9.22 22.01 10.07 22.01 11.12V12.88C22.01 13.92 21.16 14.78 20.11 14.78C18.3 14.78 17.56 16.06 18.47 17.63C18.99 18.54 18.68 19.7 17.77 20.22L16.04 21.21C15.25 21.68 14.23 21.4 13.76 20.61L13.65 20.42C12.75 18.85 11.27 18.85 10.36 20.42L10.25 20.61C9.78 21.4 8.76 21.68 7.97 21.21L6.24 20.22C5.33 19.7 5.02 18.53 5.54 17.63C6.45 16.06 5.71 14.78 3.9 14.78C2.85 14.78 2 13.92 2 12.88Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icon/svg/move.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2L15 5H13V11H19V9L22 12L19 15V13H13V19H15L12 22L9 19H11V13H5V15L2 12L5 9V11H11V5H9L12 2Z" fill="white"/>
+</svg>

package/src/components/CDatepicker.vue

@@ -20,6 +20,7 @@
         <template #customIcon>
           <CTooltip
             v-if="isTooltip"
+            :z-index="zIndex"
           >
             <template #icon>
               <CIcon :name="{'calendar-month-outline': true}" :size="24" />
@@ -69,7 +70,7 @@
           class="c-datepicker__time_list-wrap"
           ref="timeContent"
           :data-c-datepicker-id="datePickerId"
-          :style="timeStyle"
+          :style="[`--z-index: ${zIndex}`, timeStyle]"
         >
           <div
             :style="`--transition: ${transition}ms; --picker-time-indent-y: ${pickerContentIndentY}px`"
@@ -115,7 +116,7 @@
 
     <Teleport :to="teleportTo">
       <div
-        :style="pickerContentStyle"
+        :style="[`--z-index: ${zIndex}`, pickerContentStyle]"
         :class="['c-datepicker__content_wrap', { open: isOpenPicker }]"
       >
         <div
@@ -129,6 +130,7 @@
               class="c-datepicker__select"
               ref="monthSelect"
               size="sm"
+              :z-index="zIndex"
               :options="monthsOption"
               :transform-val="true"
               :placeholder="monthsOption[activeMonth - 1].text"
@@ -142,6 +144,7 @@
               class="c-datepicker__select"
               ref="yearSelect"
               size="sm"
+              :z-index="zIndex"
               :options="yearOption"
               :transform-val="true"
               :placeholder="String(activeYear)"
@@ -217,6 +220,7 @@ type TProps = {
   locale?: 'rus' | 'usa' | 'tur' | 'spa',
   max?: string,
   min?: string,
+  zIndex?: number,
   width?: string,
   isOpen?: boolean,
   modelValue?: any,
@@ -226,6 +230,7 @@ type TProps = {
 const props = withDefaults(defineProps<TProps>(), {
   locale: 'rus',
   color: 'green',
+  zIndex: 999,
   emptyDate: false,
   showTime: true,
   isOpen: false,
@@ -981,7 +986,7 @@ $timeWidth: 54px;
   --scroll-height: 100px;
 
   position: fixed;
-  z-index: 999;
+  z-index: var(--z-index, 999);
   transition: var(--transition);
   // transform: translate(0, 50px);
   pointer-events: none;
@@ -1097,7 +1102,7 @@ $timeWidth: 54px;
 
 .c-datepicker__content_wrap {
   position: fixed;
-  z-index: 999;
+  z-index: var(--z-index, 999);
   transition: var(--transition);
   pointer-events: none;
 

package/src/components/CInput.vue

@@ -95,7 +95,7 @@ const iconPositionClass = computed(() => {
     &__wrap {
       position: relative;
       
-      min-width: var(--c-input-width);
+      width: var(--c-input-width);
 
       font-size: var(--font-size);
 

package/src/components/CInput2.vue

@@ -115,7 +115,7 @@ const iconPositionClass = computed(() => {
       display: flex;
       align-items: center;
       
-      min-width: var(--c-input2-width);
+      width: var(--c-input2-width);
       max-height: var(--height);
       height: var(--height);
 

package/src/components/CInput2Select.vue

@@ -38,7 +38,7 @@
     <Teleport :to="teleportTo">
       <div
         :data-c-input2-select-id="CInput2SelectId"
-        :style="listStyle"
+        :style="[`--z-index: ${zIndex}`, listStyle]"
         :class="[classes.fixedContainer, variant, size, { open: isOpen, disabled }]"
       >
         <CScroll2
@@ -115,6 +115,7 @@ type TProps = {
   variant?: 'default' | 'multiple',
   size?: 'lg' | 'md' | 'sm',
   color?: 'green' | 'green2',
+  zIndex?: number,
   selectAll?: boolean,
   autocomplete?: boolean,
   disabled?: boolean,
@@ -134,6 +135,7 @@ const props = withDefaults(defineProps<TProps>(), {
   variant: 'default',
   size: 'lg',
   color: 'green',
+  zIndex: 999,
   selectAll: false,
   autocomplete: false,
   disabled: false,
@@ -472,7 +474,7 @@ defineExpose({
   --font-size: 16px;
 
   position: fixed;
-  z-index: 999;
+  z-index: var(--z-index, 999);
 
   transition: var(--transition);
 

package/src/components/CSelect.vue

@@ -23,7 +23,7 @@
     <Teleport :to="teleportTo">
       <div
         :data-c-select-id="selectId"
-        :style="listStyle"
+        :style="[`--z-index: ${zIndex}`, listStyle]"
         :class="[classes.fixedContainer, variant, size, { open: isOpen, disabled }]"
       >
         <CScroll2
@@ -99,6 +99,7 @@ type TProps = {
   options?: TOption[],
   variant?: 'default' | 'multiple',
   size?: 'lg' | 'md' | 'sm',
+  zIndex?: number,
   selectAll?: boolean,
   autocomplete?: boolean,
   disabled?: boolean,
@@ -116,6 +117,7 @@ const props = withDefaults(defineProps<TProps>(), {
   options: () => [],
   variant: 'default',
   size: 'lg',
+  zIndex: 999,
   selectAll: false,
   autocomplete: false,
   disabled: false,
@@ -436,7 +438,7 @@ defineExpose({
   --font-size: 16px;
 
   position: fixed;
-  z-index: 999;
+  z-index: var(--z-index, 999);
 
   transition: var(--transition);
 

package/src/components/CTooltip.vue

@@ -8,7 +8,7 @@
     <Teleport v-if="!disabled && isShowTooltip" :to="teleportTo">
       <div
         :class="[classes.fixedContainer, position, {interactive: false}, {open: isOpen.click || isOpen.hover}]"
-        :style="tooltipPosition"
+        :style="[`--z-index: ${zIndex}`, tooltipPosition]"
       >
         <div :class="classes.contentWrap">
           <div :class="classes.content">
@@ -30,6 +30,7 @@ import { addTracingElement } from '../assets/js/helpers'
 type TProps = {
   position?: 'top' | 'top_left' | 'top_right' | 'bottom' | 'bottom_left' | 'bottom_right' | 'right' | 'left',
   interactive?: boolean,
+  zIndex?: number,
   disabled?: boolean,
   saveTarget?: boolean,
   isShowTooltip?: boolean,
@@ -37,6 +38,7 @@ type TProps = {
 
 const props = withDefaults(defineProps<TProps>(), {
   position: 'top',
+  zIndex: 999,
   interactive: true,
   disabled: false,
   saveTarget: true,
@@ -226,6 +228,8 @@ function removeListener() {
       
     font-size: 12px;
     
+    z-index: var(--z-index, 999);
+
     transition: var(--transition);
     pointer-events: none;
 

package/src/pages/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="overlay"></div>
   <div class="" style="background-color: #152829; padding: 50px 20px 700px;">
     <div class="hide-block"></div>
     <!-- button -->
@@ -596,16 +597,16 @@
 
           <!-- col -->
           <div class="table__col">
-            <div class="table__item">
-              <CInput v-model="inpSuccess" :status="successStatus"/> 
+            <div class="table__item" style="width: 200px;">
+              <CInput v-model="inpSuccess" width="100%" :status="successStatus"/> 
             </div>
 
             <div class="table__item">
-              <CInput v-model="inpError" :status="errorStatus" />
+              <CInput v-model="inpError" width="100%" :status="errorStatus" />
             </div>
 
             <div class="table__item">
-              <CInput v-model="inpError" size="md" :icon-position="['right', 'left']" :status="errorStatus">
+              <CInput v-model="inpError" width="100%" size="md" :icon-position="['right', 'left']" :status="errorStatus">
                 <template #customIcon>
                   <CIcon :name="{'Bar-chart': true}" />
                 </template>
@@ -663,16 +664,16 @@
 
           <!-- col -->
           <div class="table__col">
-            <div class="table__item">
-              <CInput2 v-model="inpSuccess" :status="successStatus"/> 
+            <div class="table__item" style="width: 200px;">
+              <CInput2 v-model="inpSuccess" width="100%" :status="successStatus"/> 
             </div>
 
             <div class="table__item">
-              <CInput2 v-model="inpError" :status="errorStatus" />
+              <CInput2 v-model="inpError" width="100%" :status="errorStatus" />
             </div>
 
             <div class="table__item">
-              <CInput2 v-model="inpError" size="md" :icon-position="['right', 'left']" :status="errorStatus">
+              <CInput2 v-model="inpError" width="100%" size="md" :icon-position="['right', 'left']" :status="errorStatus">
                 <template #customIcon-left>
                   <CIcon :name="{'Bar-chart': true}" />
                 </template>
@@ -1999,4 +2000,19 @@ h6 {
 
   color: var(--white);
 }
+
+.overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+
+  display: none;
+
+  background: rgba(0, 0, 0, 0.6);
+
+  pointer-events: none;
+}
 </style>