its_ui_vite 1.1.2 → 1.1.3

package/package.json

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

package/src/components/CDatepicker.vue

@@ -2,7 +2,7 @@
   <div
     ref="root"
     :data-c-datepicker-id="datePickerId"
-    class="c-datepicker"
+    :class="['c-datepicker', color]"
     :style="`--transition: ${transition}ms; --width: ${width}; --picker-content-indent-y: ${pickerContentIndentY}px`"
   >
     <div
@@ -211,6 +211,7 @@ import { computed, ref, watch, onMounted, onUnmounted, Teleport } from 'vue';
 type TProps = {
   date?: string,
   showTime: boolean,
+  color?: 'green' | 'green2',
   locale?: 'rus' | 'usa' | 'tur' | 'spa',
   max?: string,
   min?: string,
@@ -222,6 +223,7 @@ type TProps = {
 
 const props = withDefaults(defineProps<TProps>(), {
   locale: 'rus',
+  color: 'green',
   showTime: true,
   isOpen: false,
   width: '100%',
@@ -751,6 +753,32 @@ $timeWidth: 54px;
 
   gap: 15px;
 
+  // prop.color
+  &.green2 {
+    .c-input {
+      border-color: var(--green-dark);
+
+      background: var(--green-low);
+      color: var(--white);
+
+      &::placeholder {
+        color: var(--green-medium);
+      }
+    }
+
+    .c-datepicker__time_wrap {
+      border-color: var(--green-dark);
+      
+      background: var(--green-low);
+
+      span,
+      input {
+        color: var(--green-medium);
+      }
+    }
+  }
+  // ./prop.color
+
   &__inp {
 
     .c-input {

package/src/components/CInput2Select.vue

@@ -3,7 +3,7 @@
     ref="root"
     :data-c-input2-select-id="CInput2SelectId"
     :style="`--transition: ${transition}ms; --width: ${width}; --list-indent-y: ${listIndentY}px`"
-    :class="[classes.root, variant, size, { disabled, open: isOpen }]"
+    :class="[classes.root, variant, color, size, { disabled, open: isOpen }]"
   >
     <CInput
       :placeholder="activePlaceholder"
@@ -12,7 +12,7 @@
       :width="width"
       :iconPosition="iconInfo.position.value"
       v-model.trim="findValue"
-      :class="[classes.input, {open: isOpen}]"
+      :class="[classes.input, {open: isOpen}, { 'have-value': activeOptions.size > 0 }]"
     >
       <template #customIcon>
         <div class="c-input2-select__inp_icon-content">
@@ -25,7 +25,7 @@
           <CIcon
             :class="['c-input2-select__inp_icon', 'c-input2-select__inp_icon-clear', { visible: activeOptions.size > 0 }]"
             :size="24"
-            :name="{ 'Cross': true }"
+            :name="iconInfo.clearable.value"
 
             @click.stop="clear"
           />
@@ -114,11 +114,13 @@ type TProps = {
   options?: TOption[],
   variant?: 'default' | 'multiple',
   size?: 'lg' | 'md' | 'sm',
+  color?: 'green' | 'green2',
   selectAll?: boolean,
   autocomplete?: boolean,
   disabled?: boolean,
   transformVal?: boolean,
   iconPosition?: Array<'left' | 'right'>,
+  clearable?: keyof TIcon,
   iconName?: keyof TIcon,
   isOpen?: boolean,
   locale?: 'rus' | 'usa' | 'tur' | 'spa',
@@ -131,6 +133,7 @@ const props = withDefaults(defineProps<TProps>(), {
   options: () => [],
   variant: 'default',
   size: 'lg',
+  color: 'green',
   selectAll: false,
   autocomplete: false,
   disabled: false,
@@ -227,7 +230,16 @@ const iconInfo = {
     const defaultIcon = {'Dropdown': true}
 
     return props.iconName ? propIcon : defaultIcon;
-  })
+  }),
+
+  clearable: computed(() => {
+    const strIconName = String(props?.clearable)
+    const propIcon = {[strIconName]: true}
+
+    const defaultIcon = {'Cross': true}
+
+    return props.clearable ? propIcon : defaultIcon;
+  }),
 }
 
 const foundOptions = computed(() => {
@@ -646,6 +658,21 @@ defineExpose({
   }
   // ./prop.size
 
+  // prop.color
+  &.green2 {
+    .c-input {
+      border-color: var(--green-dark);
+
+      background: var(--green-low);
+      color: var(--white);
+
+      &::placeholder {
+        color: var(--green-medium);
+      }
+    }
+  }
+  // ./prop.color
+
   // prop.disabled
   &.disabled {
     opacity: 0.6;
@@ -673,6 +700,10 @@ defineExpose({
 
         order: -1;
       }
+
+      &.have-value .c-input::placeholder {
+        color: var(--white);
+      }
     }
 
     &_count {

package/src/pages/index.vue

@@ -830,7 +830,7 @@
           <!-- col -->
           <div class="table__col checkboxes">
             <div class="table__item">
-              <CDatepicker date="2026-02-06T00:00:00.000+03:00" @change_cdatepicker="(e) => console.log(e)" />
+              <CDatepicker date="2026-02-06T00:00:00.000+03:00" color="green2" @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)" />
@@ -1144,6 +1144,7 @@
               <CInput2Select
                 :options="optionGroup"
                 v-model="VModelOption3"
+                color="green2"
                 :autocomplete="true"
                 @change_cinput2select="(evt) => log(['CInput2Select default', evt])"
               />