plugin-ui-for-kzt 0.0.67 → 0.0.68

package/example/App.vue

@@ -77,17 +77,14 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useModal } from '../src/composables/useModal';
 import BaseTextarea from '../src/components/BaseTextarea/BaseTextarea.vue';
 import BaseInputCalendar from '../src/components/BaseInputCalendar/BaseInputCalendar.vue';
 import BaseIcon from "../src/components/BaseIcon/BaseIcon.vue";
 import BaseInputWithSelector from "../src/components/BaseInputWithSelector/BaseInputWithSelector.vue";
 import BaseInput from "../src/components/BaseInput/BaseInput.vue";
 
-const { open } = useModal();
 
 const search = ref<string>( '' );
-const searchs = ref<any>( '' );
 const searchType = ref<string | number>( "iin" );
 const clearableSearch = ref<string>( 'Search text' );
 const clearableSearchType = ref<string | number>( "bin" );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/BaseChips/BaseChips.vue

@@ -24,6 +24,7 @@ import { useKitColor } from "../../composables/kit/color";
 
 const props = withDefaults( defineProps<ICoreChipsProps>(), {
   size: 'medium',
+  multiply: false,
 } );
 
 const { sizeClassList } = useKitSize( props );
@@ -157,11 +158,27 @@ const classList = computed( () => [
     }
   }
 
-  &.--is-active {
+  &.--light-blue-color {
     #{$chip} {
 
+      &__content {
+        color: var(--primary-blue);
+      }
+
       &__wrapper {
-        background: var(--primary-blue);
+        border: 1px solid var(--primary-blue-800);
+        background: var(--primary-black-white);
+      }
+    }
+  }
+
+  &.--is-active {
+    #{$chip} {
+      &__content {
+        color: var(--primary-black-white);
+      }
+      &__wrapper {
+        background: v-bind('props.multiply ? `#1D2939`: `#0096D7`');
         color: var(--primary-black-white);
         border: none;
 
@@ -169,6 +186,10 @@ const classList = computed( () => [
         @include hover {
           background: var(--primary-black-300);
           color: var(--primary-black-900);
+
+          #{$chip}__content {
+            color: v-bind('props.multiply ? `#101828`: `#fff`');
+          }
         }
 
         @include pressed {
@@ -176,10 +197,6 @@ const classList = computed( () => [
           color: var(--primary-black);
         }
       }
-
-      &__content {
-        color: var(--primary-black-white);
-      }
     }
   }
 

package/src/components/BaseChips/README.md

@@ -21,8 +21,9 @@
 | `active`   | `boolean`      | `false` | Определяет, находится ли чип в активном состоянии.    |
 | `iconName` | `string`       | `undefined` | Название иконки для отображения (требуется BaseIcon). |
 | `count`    | `number`       | `undefined` | Число для отображения в чипе.                         |
-| `size`     | `'extra-small' | 'small'| 'medium'| 'large'` | `medium` | Размер чипа (влияет на высоту, шрифт и отступы). |
-| `color`    | `'gray'        | 'red'  | 'green' | 'warning'` | `blue`|
+| `size`     | `'extra-small' \| 'small' \| 'medium' \| 'large'` | `medium` | Размер чипа (влияет на высоту, шрифт и отступы). |
+| `color`    | `'gray' \| 'red' \| 'green' \| 'warning' \| 'blue' \| 'light-blue'` | `blue` | Цветовая схема чипа. |
+| `multiply` | `boolean`      | `false` | В активном состоянии (`active: true`) переключает цветовую схему: `false` — синий фон (`#0096D7`); `true` — тёмно-синий фон (`#1D2939`). |
 
 ## События (Events)
 

package/src/types/chips.d.ts

@@ -6,6 +6,7 @@ export interface ICoreChipsBaseProps {
     iconName?: string;
     count?: number;
     color?: string;
+    multiply?: boolean;
 }
 
 export type ICoreChipsProps = ICoreChipsBaseProps & ICoreSize;