plugin-ui-for-kzt 0.0.57 → 0.0.59

package/example/App.vue

@@ -8,6 +8,20 @@
       />
     </div>
     <section>
+      <BaseInput
+          id="input-default"
+          v-model="demoValues.inputDefault"
+          placeholder="Default input"
+      />
+
+      <BaseInput
+          id="input-clearable"
+          v-model="demoValues.inputClearable"
+          placeholder="Clearable input"
+          size="small"
+          clearable
+      />
+
       <BaseInputCalendar
           id="input-calendar"
           v-model="demoValues.calendar"
@@ -38,7 +52,25 @@
         placeholder="Поиск..."
     >
       <template #left-icon>
-        <BaseIcon name="search" size="extra-small"/>
+        <BaseIcon name="search" size="large"/>
+      </template>
+    </BaseInputWithSelector>
+
+    <BaseInputWithSelector
+        v-model="clearableSearch"
+        v-model:selectedOptionId="clearableSearchType"
+        size="small"
+        clearable
+        :options="[
+           { id: 'iin', name: 'ИИН', value: 'iin' },
+           { id: 'bin', name: 'БИН', value: 'bin' },
+           { id: 'number', name: '#', value: '#' },
+        ]"
+        @search="handleSearch"
+        placeholder="Clearable search..."
+    >
+      <template #left-icon>
+        <BaseIcon name="search" size="large"/>
       </template>
     </BaseInputWithSelector>
   </div>
@@ -51,11 +83,14 @@ import BaseInputCalendar from '../src/components/BaseInputCalendar/BaseInputCale
 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 searchType = ref<string | number>( "iin" );
+const clearableSearch = ref<string>( 'Search text' );
+const clearableSearchType = ref<string | number>( "bin" );
 
 function handleSearch( { value, type }: { value: string; type: string | number } ) {
   console.log( 'DEBOUNCED SEARCH:', value, type )
@@ -70,6 +105,8 @@ const iconOptions = [
 
 const demoValues = ref( {
   icons: iconOptions[0].id,
+  inputDefault: '',
+  inputClearable: 'Text to clear',
   textarea: 'Тестовый текст',
   calendar: new Date(),
   calendarDisabled: new Date(),
@@ -125,4 +162,4 @@ const demoValues = ref( {
   gap: var(--spacing-xs);
   justify-content: flex-end;
 }
-</style>
+</style>

package/package.json

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

package/src/components/BaseChips/BaseChips.vue

@@ -1,18 +1,18 @@
 <template>
-    <div class="base-chips" :class="classList">
-        <button class="base-chips__wrapper">
-            <div class="base-chips__content">
-                <div v-if="iconName" class="base-chips__icon">
-                    <base-icon
-                        :name="iconName"
-                        :size="props.size"
-                    />
-                </div>
-                <div class="base-chips__text">{{ text }}</div>
-                <div v-if="count" class="base-chips__count">{{ count }}</div>
-            </div>
-        </button>
-    </div>
+  <div class="base-chips" :class="classList">
+    <button class="base-chips__wrapper">
+      <div class="base-chips__content">
+        <div v-if="iconName" class="base-chips__icon">
+          <base-icon
+              :name="iconName"
+              :size="props.size"
+          />
+        </div>
+        <div class="base-chips__text">{{ text }}</div>
+        <div v-if="count" class="base-chips__count">{{ count }}</div>
+      </div>
+    </button>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -20,17 +20,20 @@ import type { ICoreChipsProps } from '../../types/chips';
 import { useKitSize } from '../../composables/kit/size';
 import BaseIcon from '../BaseIcon/BaseIcon.vue';
 import { computed } from 'vue';
+import { useKitColor } from "../../composables/kit/color";
 
-const props = withDefaults(defineProps<ICoreChipsProps>(), {
-    size: 'medium',
-});
+const props = withDefaults( defineProps<ICoreChipsProps>(), {
+  size: 'medium',
+} );
 
-const { sizeClassList } = useKitSize(props);
+const { sizeClassList } = useKitSize( props );
+const { colorClassList } = useKitColor( props );
 
-const classList = computed(() => [
-    sizeClassList.value,
-    { '--is-active': props.active }
-]);
+const classList = computed( () => [
+  sizeClassList.value,
+  colorClassList.value,
+  { '--is-active': props.active }
+] );
 </script>
 
 <style lang="scss">
@@ -38,147 +41,238 @@ const classList = computed(() => [
 @import '../../styles/root';
 
 .base-chips {
-    $chip: &;
+  $chip: &;
 
-    button {
-        border: none;
-        outline: none;
-        margin: 0;
-        padding: 0;
-        display: block;
+  button {
+    border: none;
+    outline: none;
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+  &__wrapper {
+    overflow: hidden;
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+    background: var(--primary-black-200);
+    color: var(--primary-black-800);
+    transition: all var(--transition);
+
+    @include hover {
+      background: var(--primary-black-300);
+      color: var(--primary-black-900);
     }
 
-    &__wrapper {
-        overflow: hidden;
-        cursor: pointer;
-        height: 100%;
-        width: 100%;
-        background: var(--primary-black-200);
-        color: var(--primary-black-800);
-        transition: all var(--transition);
-        
+    @include focused {
+      background: var(--primary-black-200);
+      color: var(--primary-black-800);
+      outline-width: 4px;
+      outline-color: var(--effects-primary-focus);
+      outline-style: solid;
+    }
+
+    @include pressed {
+      background: var(--primary-black-400);
+      color: var(--primary-black);
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+
+  &.--gray-color {
+    #{$chip} {
+      &__wrapper {
         @include hover {
-            background: var(--primary-black-300);
-            color: var(--primary-black-900);
+          background: var(--primary-black-300);
+          color: var(--primary-black-900);
         }
+      }
+
+      &__content {
+        color: var(--primary-black-600);
+      }
+
+      &__wrapper {
+        border: 1px solid var(--primary-black-400);
+        background: var(--primary-black-white);
+      }
+    }
+  }
+
+  &.--green-color {
+    #{$chip} {
 
-        @include focused {
-            background: var(--primary-black-200);
-            color: var(--primary-black-800);
-            outline-width: 4px;
-            outline-color: var(--effects-primary-focus);
-            outline-style: solid;
+      &__wrapper {
+        @include hover {
+          background: var(--primary-black-300);
+          color: var(--primary-black-900);
         }
+      }
 
-        @include pressed {
-            background: var(--primary-black-400);
-            color: var(--primary-black);
+      &__content {
+        color: var(--success-green);
+      }
+
+      &__wrapper {
+        border: 1px solid var(--success-green-light-02);
+        background: var(--primary-black-white);
+      }
+    }
+  }
+
+  &.--red-color {
+    #{$chip} {
+      &__wrapper {
+        @include hover {
+          background: var(--primary-black-300);
+          color: var(--primary-black-900);
         }
+      }
+
+      &__content {
+        color: var(--secondary-text-negative);
+      }
+
+      &__wrapper {
+        border: 1px solid var(--error-red-light-02);
+        background: var(--primary-black-white);
+      }
     }
+  }
+
+  &.--warning-color {
+    #{$chip} {
+      &__wrapper {
+        @include hover {
+          background: var(--primary-black-300);
+          color: var(--primary-black-900);
+        }
+      }
+
+      &__content {
+        color: var(--warning-orange);
+      }
 
-    &__content {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
+      &__wrapper {
+        border: 1px solid var(--warning-orange-light-02);
+        background: var(--primary-black-white);
+      }
     }
+  }
 
-    &.--is-active {
-        #{$chip}__wrapper {
-            background: var(--primary-blue);
-            color: var(--primary-black-white);
+  &.--is-active {
+    #{$chip} {
+
+      &__wrapper {
+        background: var(--primary-blue);
+        color: var(--primary-black-white);
+        border: none;
 
-            @include hover {
-                background: var(--primary-black-300);
-                color: var(--primary-black-900);
-            }
 
-            @include pressed {
-                background: var(--primary-black-400);
-                color: var(--primary-black);
-            }
+        @include hover {
+          background: var(--primary-black-300);
+          color: var(--primary-black-900);
         }
-    }
 
-    &.--extra-small-size {
-        #{$chip} {
-            &__content {
-                padding: var(--spacing-2s) var(--spacing-m);
-                gap: var(--spacing-xs);
-            }
-
-            &__wrapper {
-                height: 32px;
-                font: var(--typography-text-s-medium);
-                border-radius: var(--corner-radius-xl);
-            }
-
-            &__count {
-                transform: translateY(-3px);
-                font: var(--typography-text-xs-medium);
-            }
+        @include pressed {
+          background: var(--primary-black-400);
+          color: var(--primary-black);
         }
+      }
+
+      &__content {
+        color: var(--primary-black-white);
+      }
     }
+  }
 
-    &.--small-size {
-        #{$chip} {
-            &__content {
-                padding: var(--spacing-s) var(--spacing-l);
-                gap: var(--spacing-s);
-            }
-
-            &__wrapper {
-                height: 40px;
-                font: var(--typography-text-m-medium);
-                border-radius: var(--corner-radius-xl);
-            }
-
-            &__count {
-                transform: translateY(-3px);
-                font: var(--typography-text-xs-medium);
-            }
-        }
+  &.--extra-small-size {
+    #{$chip} {
+      &__content {
+        padding: var(--spacing-2s) var(--spacing-m);
+        gap: var(--spacing-xs);
+      }
+
+      &__wrapper {
+        height: 32px;
+        font: var(--typography-text-s-medium);
+        border-radius: var(--corner-radius-xl);
+      }
+
+      &__count {
+        transform: translateY(-3px);
+        font: var(--typography-text-xs-medium);
+      }
     }
+  }
 
-    &.--medium-size {
-        #{$chip} {
-            &__content {
-                padding: var(--spacing-2m) var(--spacing-l);
-                gap: var(--spacing-s);
-            }
-
-            &__wrapper {
-                height: 48px;
-                font: var(--typography-text-l-medium);
-                border-radius: var(--corner-radius-xl);
-            }
-
-            &__count {
-                transform: translateY(-4px);
-                font: var(--typography-text-s-medium);
-            }
-        }
+  &.--small-size {
+    #{$chip} {
+      &__content {
+        padding: var(--spacing-s) var(--spacing-l);
+        gap: var(--spacing-s);
+      }
+
+      &__wrapper {
+        height: 40px;
+        font: var(--typography-text-m-medium);
+        border-radius: var(--corner-radius-xl);
+      }
+
+      &__count {
+        transform: translateY(-3px);
+        font: var(--typography-text-xs-medium);
+      }
     }
+  }
 
-    &.--large-size {
-        #{$chip} {
-            &__content {
-                padding: var(--spacing-2l) var(--spacing-l);
-                gap: var(--spacing-s);
-            }
-
-            &__wrapper {
-                height: 56px;
-                font: var(--typography-text-l-medium);
-                border-radius: var(--corner-radius-2xl);
-            }
-
-            &__count {
-                transform: translateY(-5px);
-                font: var(--typography-text-s-medium);
-            }
-        }
+  &.--medium-size {
+    #{$chip} {
+      &__content {
+        padding: var(--spacing-2m) var(--spacing-l);
+        gap: var(--spacing-s);
+      }
+
+      &__wrapper {
+        height: 48px;
+        font: var(--typography-text-l-medium);
+        border-radius: var(--corner-radius-xl);
+      }
+
+      &__count {
+        transform: translateY(-4px);
+        font: var(--typography-text-s-medium);
+      }
+    }
+  }
+
+  &.--large-size {
+    #{$chip} {
+      &__content {
+        padding: var(--spacing-2l) var(--spacing-l);
+        gap: var(--spacing-s);
+      }
+
+      &__wrapper {
+        height: 56px;
+        font: var(--typography-text-l-medium);
+        border-radius: var(--corner-radius-2xl);
+      }
+
+      &__count {
+        transform: translateY(-5px);
+        font: var(--typography-text-s-medium);
+      }
     }
+  }
 }
 </style>

package/src/components/BaseChips/README.md

@@ -15,13 +15,14 @@
 
 ## Свойства (Props)
 
-| Свойство    | Тип         | Значение по умолчанию | Описание                                      |
-|-------------|-------------|-----------------------|----------------------------------------------|
-| `text`      | `string`    | Обязательно           | Основной текст, отображаемый внутри чипа.     |
-| `active`    | `boolean`   | `false`               | Определяет, находится ли чип в активном состоянии. |
-| `iconName`  | `string`    | `undefined`           | Название иконки для отображения (требуется BaseIcon). |
-| `count`     | `number`    | `undefined`           | Число для отображения в чипе.                 |
-| `size`      | `'extra-small' | 'small' | 'medium' | 'large'` | `medium` | Размер чипа (влияет на высоту, шрифт и отступы). |
+| Свойство   | Тип            | Значение по умолчанию | Описание                                              |
+|------------|----------------|--------|-------------------------------------------------------|
+| `text`     | `string`       | Обязательно | Основной текст, отображаемый внутри чипа.             |
+| `active`   | `boolean`      | `false` | Определяет, находится ли чип в активном состоянии.    |
+| `iconName` | `string`       | `undefined` | Название иконки для отображения (требуется BaseIcon). |
+| `count`    | `number`       | `undefined` | Число для отображения в чипе.                         |
+| `size`     | `'extra-small' | 'small'| 'medium'| 'large'` | `medium` | Размер чипа (влияет на высоту, шрифт и отступы). |
+| `color`    | `'gray'        | 'red'  | 'green' | 'warning'` | `medium`|
 
 ## События (Events)