plugin-ui-for-kzt 0.0.66 → 0.0.67

package/example/App.vue

@@ -80,7 +80,6 @@ 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "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/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 {