plugin-ui-for-kzt 0.0.66 → 0.0.68

package/example/App.vue

@@ -77,18 +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 MyCustomModal from './MyCustomModal.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.66",
+  "version": "0.0.68",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -37,11 +37,11 @@
     "sass-loader": "^12.6.0",
     "style-loader": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
-    "svgo": "^3.3.2",
+    "svgo": "4.0.1",
     "svgo-loader": "^4.0.0",
     "ts-loader": "^9.0.0",
     "vue-loader": "^17.0.0",
-    "webpack": "^5.97.1",
+    "webpack": "5.104.1",
     "webpack-cli": "^5.0.0",
     "webpack-dev-server": "^5.2.1"
   },

package/src/components/BaseBadge/BaseBadge.vue

@@ -14,7 +14,9 @@
             <div class="base-badge__text">
                 <slot name="text"></slot>
             </div>
-            <div class="base-badge__close">
+          <div
+              v-if="closable || arrowRightIcon"
+              class="base-badge__close">
                 <base-icon 
                     v-if="closable"
                     class="base-badge__icon" 
@@ -60,8 +62,6 @@ const classList = computed(() => [
  @import '@/styles/root';
 
     .base-badge {
-        cursor: pointer;
-
         &__wrapper {
             display: flex;
             align-items: center;
@@ -83,6 +83,7 @@ const classList = computed(() => [
         }
 
         &__close {
+          cursor: pointer;
             display: flex;
             align-items: center;
         }
@@ -92,41 +93,7 @@ const classList = computed(() => [
             height: 8px;
             border-radius: 50%;
             background-color: currentColor;
-        }
-
-        &.--primary-color {
-            color: var(--primary-blue);
-            .base-badge__wrapper {
-                background: var(--primary-blue-50);
-            }
-        }
-
-        &.--gray-color {
-            color: var(--primary-black-700);
-            .base-badge__wrapper {
-                background: var(--primary-black-100);
-            }
-        }
-
-        &.--error-color {
-            color: var(--error-red);
-            .base-badge__wrapper {
-                background: var(--error-red-light-05);
-            }
-        }
-
-        &.--warning-color {
-            color: var(--warning-orange);
-            .base-badge__wrapper {
-                background: var(--warning-orange-light-05);
-            }
-        }
-
-        &.--success-color {
-            color: var(--success-green);
-            .base-badge__wrapper {
-                background: var(--success-green-light-05);
-            }
+          margin-right: var(--spacing-2s);
         }
 
         &.--extra-small-size {
@@ -184,5 +151,62 @@ const classList = computed(() => [
                 height: 20px;
             }
         }
+
+      &.--primary-color {
+        color: var(--primary-blue);
+
+        .base-badge__wrapper {
+          background: var(--primary-blue-50);
+        }
+      }
+
+      &.--light-blue-color {
+        color: var(--primary-blue);
+
+
+        .base-badge__text {
+          background: var(--primary-black-white);
+          border: 1px solid var(--primary-blue-200);
+          border-radius: 16px;
+          padding: 1px 10px;
+        }
+
+        .base-badge__wrapper {
+          background: var(--primary-blue-50);
+          padding: 4px 4px 4px 14px;
+        }
+      }
+
+      &.--gray-color {
+        color: var(--primary-black-700);
+
+        .base-badge__wrapper {
+          background: var(--primary-black-100);
+        }
+      }
+
+      &.--error-color {
+        color: var(--error-red);
+
+        .base-badge__wrapper {
+          background: var(--error-red-light-05);
+        }
+      }
+
+      &.--warning-color {
+        color: var(--warning-orange);
+
+        .base-badge__wrapper {
+          background: var(--warning-orange-light-05);
+        }
+      }
+
+      &.--success-color {
+        color: var(--success-green);
+
+        .base-badge__wrapper {
+          background: var(--success-green-light-05);
+        }
+      }
     }
 </style>

package/src/components/BaseBadge/README.md

@@ -21,7 +21,7 @@ import BaseBadge from './BaseBadge.vue';
 | Параметр         | Тип                  | По умолчанию   | Описание                                   |
 |-------------------|----------------------|----------------|--------------------------------------------|
 | `size`           | `'extra-small' | 'small' | 'medium' | 'large'` | `'medium'` | Размер бейджа (влияет на шрифт и отступы). |
-| `color`          | `'primary' | 'gray' | 'error' | 'warning' | 'success'` | Цветовая схема бейджа.                    |
+| `color`          | `'primary' | 'light-blue' | 'gray' | 'error' | 'warning' | 'success'` | Цветовая схема бейджа.                    |
 | `hasDot`         | `boolean`            | `false`        | Отображение точки-индикатора слева.        |
 | `closable`       | `boolean`            | `false`        | Отображение иконки закрытия справа.        |
 | `arrowUpIcon`    | `boolean`            | `false`        | Отображение иконки стрелки вверх слева.    |

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;

package/src/types/utils.d.ts

@@ -2,7 +2,7 @@ export type Nullable<T> = T | null;
 
 export type TCoreSize = 'large' | 'medium' | 'small' | 'extra-small' | 'custom';
 
-export type TCoreColor = string | 'primary' | 'secondary' | 'tertiary-gray' | 'tertiary-blue' | 'quaternary-gray' | 'quaternary-blue' | 'link-blue' | 'link-critical' | 'link-gray' | 'gray' | 'error' | 'warning' | 'success' | 'custom';
+export type TCoreColor = string | 'primary' | 'secondary' | 'tertiary-gray' | 'tertiary-blue' | 'quaternary-gray' | 'quaternary-blue' | 'link-blue' | 'link-critical' | 'link-gray' | 'gray' | 'error' | 'warning' | 'success' | 'light-blue' | 'custom';
 export type TCoreInteractiveTag = 'link' | 'button' | 'span' | 'div' | 'a';
 
 export interface ICoreSize {