its_ui_vite 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "1.1.0",
+  "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

@@ -11,6 +11,7 @@
   --red: #EA1246;
   --red-medium: #920023;
   --red-dark: #490012;
+  --danger-500: #CC2C17;
 
   // orange
   --orange: #E2670D;

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,

package/src/components/CInput2Select.vue

@@ -263,12 +263,12 @@ watch(() => props.modelValue, (options: any[]) => {
 
   props.options.forEach((group) => {
     group.options?.forEach((item) => {
-      const option = options.find((modelValueItem) => [modelValueItem, modelValueItem.value].includes(item.value));
+      const option = options.find((modelValueItem) => [modelValueItem, modelValueItem?.value].includes(item.value));
 
       if (undefined === option) return;
 
-      activeOptions.value.add(option);
-      oldActiveOptions.value.add(option);
+      activeOptions.value.add(item);
+      oldActiveOptions.value.add(item);
     });
   });
 
@@ -339,11 +339,7 @@ const setOption: TDebounceEvent = function(option, evt) {
 }
 
 function getCheckboxProp(option: UnpackArray<TOption['options']>) {
-  let isChecked = false;
-
-  [...props.modelValue].forEach((item) => {
-    isChecked = [item?.value, item].includes(option?.value);
-  });
+  const isChecked = !!([...activeOptions.value, ...props.modelValue].find((item) => [item.value, item].includes(option?.value)));
 
   if (!isMultiple.value) return {}
   return {
@@ -364,6 +360,7 @@ function isActive(option?: UnpackArray<TOption['options']>) {
 
 function clear() {
   activeOptions.value.clear();
+  dispatchEmit();
   oldActiveOptions.value.clear();
 
   const checkedInputs = list.value.$el.querySelectorAll('.c-checkbox__inp:checked');
@@ -384,14 +381,14 @@ function setActivePlaceholder() {
 }
 
 function isChange() {
-  let biggerSet = activeOptions.value;
-  let smallerSet = oldActiveOptions.value;
   let isChange = false;
   
-  if (biggerSet.size < smallerSet.size) [biggerSet, smallerSet] = [smallerSet, biggerSet]
+  activeOptions.value.forEach((item) => {
+    if (!isChange) isChange = !oldActiveOptions.value.has(item);
+  });
 
-  biggerSet.forEach((item) => {
-    if (!isChange) isChange = !smallerSet.has(item);
+  oldActiveOptions.value.forEach((item) => {
+    if (!isChange) isChange = !activeOptions.value.has(item);
   });
 
   return isChange;

package/src/components/helpers/TextTooltip.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import CTooltip from '../CTooltip.vue';
 
@@ -48,10 +48,10 @@ const maxLine = ref(props.maxTextLine);
 onMounted(() => {
   setTimeout(() => {
     const textEl = (root.value?.querySelector('.c-text-tooltip__content') as HTMLElement);
-    const widthContent = root.value!.clientWidth;
-    const heightContent = root.value!.offsetHeight;
-    const widthText = textEl!.offsetWidth;
-    const heightText = textEl!.offsetHeight;
+    const widthContent = root.value?.clientWidth || 0;
+    const heightContent = root.value?.offsetHeight || 0;
+    const widthText = textEl?.offsetWidth || 0;
+    const heightText = textEl?.offsetHeight || 0;
 
     if (widthContent < widthText) {
       maxLine.value = 1;

package/src/pages/index.vue

@@ -830,7 +830,10 @@
           <!-- col -->
           <div class="table__col checkboxes">
             <div class="table__item">
-              <CDatepicker date="2025-10-10T00:00:00.000+03:00" @change_cdatepicker="(e) => console.log(e)" />
+              <CDatepicker date="2026-02-06T00:00:00.000+03:00" @change_cdatepicker="(e) => console.log(e)" />
+            </div>
+            <div class="table__item">
+              <CDatepicker date="2026-02-06T23:59:59.999+03:00" @change_cdatepicker="(e) => console.log(e)" />
             </div>
           </div>
           <!-- ./col -->
@@ -1142,7 +1145,7 @@
                 :options="optionGroup"
                 v-model="VModelOption3"
                 :autocomplete="true"
-                @change_cdropdown="(evt) => log(['CDropdown default', evt])"
+                @change_cinput2select="(evt) => log(['CInput2Select default', evt])"
               />
             </div>
           </div>
@@ -1150,9 +1153,9 @@
 
           <!-- col -->
           <div class="table__col">
-            
+            v-model(value): {{ VModelOption4 }}
             <div class="table__item">
-              <CInput2Select variant="multiple" @change_cdropdown="(evt) => log(['CDropdown multiple', evt])" :options="optionGroup" />
+              <CInput2Select variant="multiple" @change_cinput2select="(evt) => log(['CInput2Select multiple', evt])" :transform-val="true" v-model="VModelOption4" :options="optionGroup" />
             </div>
           </div>
           <!-- ./col -->
@@ -1160,7 +1163,7 @@
           <!-- col -->
           <div class="table__col">
             <div class="table__item">
-              <CInput2Select @change_cdropdown="(evt) => log(['CDropdown default', evt])" :autocomplete="true" size="md" :options="[{
+              <CInput2Select @change_cinput2select="(evt) => log(['CInput2Select default', evt])" :autocomplete="true" size="md" :options="[{
                 name: 'Коммерческие',
                 options: [
                   {
@@ -1202,7 +1205,7 @@
           <!-- col -->
           <div class="table__col scroll-sm scroll-container">
             <div class="table__item">
-              <CInput2Select @change_cdropdown="(evt) => log(['CDropdown default', evt])" :autocomplete="true" size="md" :options="[{
+              <CInput2Select @change_cinput2select="(evt) => log(['CInput2Select default', evt])" :autocomplete="true" size="md" :options="[{
                 name: 'Коммерческие',
                 options: [
                   {
@@ -1258,15 +1261,15 @@
             </div>
             <h4>isOpen: {{ selectIsOpen }}</h4>
             <div class="table__item">
-              <CInput2Select variant="multiple" @change_cdropdown="(evt) => log(['CDropdown multiple', evt])" size="sm" :select-all="true" :options="optionGroup" iconName="Cart" v-model:is-open="selectIsOpen" :model-value="VModelOption3" />
+              <CInput2Select variant="multiple" @change_cinput2select="(evt) => log(['CInput2Select multiple', evt])" size="sm" :select-all="true" :options="optionGroup" iconName="Cart" v-model:is-open="selectIsOpen" :model-value="VModelOption3" />
             </div>
 
             <div class="table__item">
-              <CInput2Select variant="multiple" @change_cdropdown="(evt) => log(['CDropdown multiple', evt])" size="sm" :select-all="true" :options="optionGroup" v-model="VModelOption3" />
+              <CInput2Select variant="multiple" @change_cinput2select="(evt) => log(['CInput2Select multiple', evt])" size="sm" :select-all="true" :options="optionGroup" v-model="VModelOption3" />
             </div>
 
             <div class="table__item">
-              <CInput2Select @change_cdropdown="(evt) => log(['CDropdown default', evt])" size="sm" :select-all="true" :disabled="true" :options="optionGroup" v-model="VModelOption3" />
+              <CInput2Select @change_cinput2select="(evt) => log(['CInput2Select default', evt])" size="sm" :select-all="true" :disabled="true" :options="optionGroup" v-model="VModelOption3" />
             </div>
           </div>
           <!-- ./col -->
@@ -1656,6 +1659,8 @@ export default {
         value: 2,
       }],
 
+      VModelOption4: [2],
+
       showBlock: {
         btn: true,
         tabs: true,