plugin-ui-for-kzt 0.0.58 → 0.0.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/.claude/settings.local.json +7 -0
  2. package/dist/components/BaseBadge/BaseBadge.vue.d.ts +1 -1
  3. package/dist/components/BaseButton/BaseButton.vue.d.ts +2 -6
  4. package/dist/components/BaseCalendar/BaseCalendar.vue.d.ts +2 -2
  5. package/dist/components/BaseCheckbox/BaseCheckbox.vue.d.ts +2 -6
  6. package/dist/components/BaseChips/BaseChips.vue.d.ts +2 -0
  7. package/dist/components/BaseDropdown/BaseDropdown.vue.d.ts +2 -6
  8. package/dist/components/BaseField/BaseField.vue.d.ts +3 -3
  9. package/dist/components/BaseInput/BaseInput.vue.d.ts +2 -2
  10. package/dist/components/BaseInputCalendar/BaseInputCalendar.vue.d.ts +2 -2
  11. package/dist/components/BaseInputCurrency/BaseInputCurrency.vue.d.ts +3 -3
  12. package/dist/components/BaseInputEmail/BaseInputEmail.vue.d.ts +2 -2
  13. package/dist/components/BaseInputPhone/BaseInputPhone.vue.d.ts +2 -2
  14. package/dist/components/BaseOpenedListItem/BaseOpenedListItem.vue.d.ts +2 -6
  15. package/dist/components/BaseRadio/BaseRadio.vue.d.ts +2 -6
  16. package/dist/components/BaseSegmentedButtons/BaseSegmentedButtons.vue.d.ts +2 -6
  17. package/dist/components/BaseSelect/BaseSelect.vue.d.ts +5 -13
  18. package/dist/components/BaseTextarea/BaseTextarea.vue.d.ts +2 -2
  19. package/dist/components/BaseToggle/BaseToggle.vue.d.ts +2 -6
  20. package/dist/components/BaseTooltip/BaseTooltip.vue.d.ts +1 -1
  21. package/dist/index.js +1 -1
  22. package/dist/store/modal.d.ts +13 -13
  23. package/package.json +1 -1
  24. package/src/components/BaseChips/BaseChips.vue +233 -139
  25. package/src/components/BaseChips/README.md +8 -7
  26. package/src/components/BaseSelect/BaseSelect.vue +13 -0
  27. package/src/components/BaseUpload/BaseUpload.vue +1 -1
  28. package/src/types/chips.d.ts +1 -0
package/dist/store/modal.d.ts CHANGED
@@ -36,7 +36,7 @@ export declare const useModalStore: import("pinia").StoreDefinition<"modal", {
36
36
  template?: string | object | undefined;
37
37
  render?: Function | undefined;
38
38
  components?: Record<string, import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>> | undefined;
39
- directives?: Record<string, import("vue").Directive<any, any, string, any>> | undefined;
39
+ directives?: Record<string, import("vue").Directive<any, any, string, string>> | undefined;
40
40
  inheritAttrs?: boolean | undefined;
41
41
  emits?: any;
42
42
  slots?: {} | undefined;
@@ -113,18 +113,18 @@ export declare const useModalStore: import("pinia").StoreDefinition<"modal", {
113
113
  filters?: Record<string, Function> | undefined;
114
114
  mixins?: any[] | undefined;
115
115
  extends?: any;
116
- beforeCreate?: (() => any) | undefined;
117
- created?: (() => any) | undefined;
118
- beforeMount?: (() => any) | undefined;
119
- mounted?: (() => any) | undefined;
120
- beforeUpdate?: (() => any) | undefined;
121
- updated?: (() => any) | undefined;
122
- activated?: (() => any) | undefined;
123
- deactivated?: (() => any) | undefined;
124
- beforeDestroy?: (() => any) | undefined;
125
- beforeUnmount?: (() => any) | undefined;
126
- destroyed?: (() => any) | undefined;
127
- unmounted?: (() => any) | undefined;
116
+ beforeCreate?: (() => void) | undefined;
117
+ created?: (() => void) | undefined;
118
+ beforeMount?: (() => void) | undefined;
119
+ mounted?: (() => void) | undefined;
120
+ beforeUpdate?: (() => void) | undefined;
121
+ updated?: (() => void) | undefined;
122
+ activated?: (() => void) | undefined;
123
+ deactivated?: (() => void) | undefined;
124
+ beforeDestroy?: (() => void) | undefined;
125
+ beforeUnmount?: (() => void) | undefined;
126
+ destroyed?: (() => void) | undefined;
127
+ unmounted?: (() => void) | undefined;
128
128
  renderTracked?: ((e: import("vue").DebuggerEvent) => void) | undefined;
129
129
  renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | undefined;
130
130
  errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plugin-ui-for-kzt",
3
- "version": "0.0.58",
3
+ "version": "0.0.59",
4
4
  "description": "plugin-ui for kazaktelekom",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/BaseChips/BaseChips.vue CHANGED
@@ -1,18 +1,18 @@
1
1
  <template>
2
- <div class="base-chips" :class="classList">
3
- <button class="base-chips__wrapper">
4
- <div class="base-chips__content">
5
- <div v-if="iconName" class="base-chips__icon">
6
- <base-icon
7
- :name="iconName"
8
- :size="props.size"
9
- />
10
- </div>
11
- <div class="base-chips__text">{{ text }}</div>
12
- <div v-if="count" class="base-chips__count">{{ count }}</div>
13
- </div>
14
- </button>
15
- </div>
2
+ <div class="base-chips" :class="classList">
3
+ <button class="base-chips__wrapper">
4
+ <div class="base-chips__content">
5
+ <div v-if="iconName" class="base-chips__icon">
6
+ <base-icon
7
+ :name="iconName"
8
+ :size="props.size"
9
+ />
10
+ </div>
11
+ <div class="base-chips__text">{{ text }}</div>
12
+ <div v-if="count" class="base-chips__count">{{ count }}</div>
13
+ </div>
14
+ </button>
15
+ </div>
16
16
  </template>
17
17
 
18
18
  <script setup lang="ts">
@@ -20,17 +20,20 @@ import type { ICoreChipsProps } from '../../types/chips';
20
20
  import { useKitSize } from '../../composables/kit/size';
21
21
  import BaseIcon from '../BaseIcon/BaseIcon.vue';
22
22
  import { computed } from 'vue';
23
+ import { useKitColor } from "../../composables/kit/color";
23
24
 
24
- const props = withDefaults(defineProps<ICoreChipsProps>(), {
25
- size: 'medium',
26
- });
25
+ const props = withDefaults( defineProps<ICoreChipsProps>(), {
26
+ size: 'medium',
27
+ } );
27
28
 
28
- const { sizeClassList } = useKitSize(props);
29
+ const { sizeClassList } = useKitSize( props );
30
+ const { colorClassList } = useKitColor( props );
29
31
 
30
- const classList = computed(() => [
31
- sizeClassList.value,
32
- { '--is-active': props.active }
33
- ]);
32
+ const classList = computed( () => [
33
+ sizeClassList.value,
34
+ colorClassList.value,
35
+ { '--is-active': props.active }
36
+ ] );
34
37
  </script>
35
38
 
36
39
  <style lang="scss">
@@ -38,147 +41,238 @@ const classList = computed(() => [
38
41
  @import '../../styles/root';
39
42
 
40
43
  .base-chips {
41
- $chip: &;
44
+ $chip: &;
42
45
 
43
- button {
44
- border: none;
45
- outline: none;
46
- margin: 0;
47
- padding: 0;
48
- display: block;
46
+ button {
47
+ border: none;
48
+ outline: none;
49
+ margin: 0;
50
+ padding: 0;
51
+ display: block;
52
+ }
53
+
54
+ &__wrapper {
55
+ overflow: hidden;
56
+ cursor: pointer;
57
+ height: 100%;
58
+ width: 100%;
59
+ background: var(--primary-black-200);
60
+ color: var(--primary-black-800);
61
+ transition: all var(--transition);
62
+
63
+ @include hover {
64
+ background: var(--primary-black-300);
65
+ color: var(--primary-black-900);
49
66
  }
50
67
 
51
- &__wrapper {
52
- overflow: hidden;
53
- cursor: pointer;
54
- height: 100%;
55
- width: 100%;
56
- background: var(--primary-black-200);
57
- color: var(--primary-black-800);
58
- transition: all var(--transition);
59
-
68
+ @include focused {
69
+ background: var(--primary-black-200);
70
+ color: var(--primary-black-800);
71
+ outline-width: 4px;
72
+ outline-color: var(--effects-primary-focus);
73
+ outline-style: solid;
74
+ }
75
+
76
+ @include pressed {
77
+ background: var(--primary-black-400);
78
+ color: var(--primary-black);
79
+ }
80
+ }
81
+
82
+ &__content {
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ width: 100%;
87
+ height: 100%;
88
+ }
89
+
90
+
91
+ &.--gray-color {
92
+ #{$chip} {
93
+ &__wrapper {
60
94
  @include hover {
61
- background: var(--primary-black-300);
62
- color: var(--primary-black-900);
95
+ background: var(--primary-black-300);
96
+ color: var(--primary-black-900);
63
97
  }
98
+ }
99
+
100
+ &__content {
101
+ color: var(--primary-black-600);
102
+ }
103
+
104
+ &__wrapper {
105
+ border: 1px solid var(--primary-black-400);
106
+ background: var(--primary-black-white);
107
+ }
108
+ }
109
+ }
110
+
111
+ &.--green-color {
112
+ #{$chip} {
64
113
 
65
- @include focused {
66
- background: var(--primary-black-200);
67
- color: var(--primary-black-800);
68
- outline-width: 4px;
69
- outline-color: var(--effects-primary-focus);
70
- outline-style: solid;
114
+ &__wrapper {
115
+ @include hover {
116
+ background: var(--primary-black-300);
117
+ color: var(--primary-black-900);
71
118
  }
119
+ }
72
120
 
73
- @include pressed {
74
- background: var(--primary-black-400);
75
- color: var(--primary-black);
121
+ &__content {
122
+ color: var(--success-green);
123
+ }
124
+
125
+ &__wrapper {
126
+ border: 1px solid var(--success-green-light-02);
127
+ background: var(--primary-black-white);
128
+ }
129
+ }
130
+ }
131
+
132
+ &.--red-color {
133
+ #{$chip} {
134
+ &__wrapper {
135
+ @include hover {
136
+ background: var(--primary-black-300);
137
+ color: var(--primary-black-900);
76
138
  }
139
+ }
140
+
141
+ &__content {
142
+ color: var(--secondary-text-negative);
143
+ }
144
+
145
+ &__wrapper {
146
+ border: 1px solid var(--error-red-light-02);
147
+ background: var(--primary-black-white);
148
+ }
77
149
  }
150
+ }
151
+
152
+ &.--warning-color {
153
+ #{$chip} {
154
+ &__wrapper {
155
+ @include hover {
156
+ background: var(--primary-black-300);
157
+ color: var(--primary-black-900);
158
+ }
159
+ }
160
+
161
+ &__content {
162
+ color: var(--warning-orange);
163
+ }
78
164
 
79
- &__content {
80
- display: flex;
81
- align-items: center;
82
- justify-content: center;
83
- width: 100%;
84
- height: 100%;
165
+ &__wrapper {
166
+ border: 1px solid var(--warning-orange-light-02);
167
+ background: var(--primary-black-white);
168
+ }
85
169
  }
170
+ }
86
171
 
87
- &.--is-active {
88
- #{$chip}__wrapper {
89
- background: var(--primary-blue);
90
- color: var(--primary-black-white);
172
+ &.--is-active {
173
+ #{$chip} {
174
+
175
+ &__wrapper {
176
+ background: var(--primary-blue);
177
+ color: var(--primary-black-white);
178
+ border: none;
91
179
 
92
- @include hover {
93
- background: var(--primary-black-300);
94
- color: var(--primary-black-900);
95
- }
96
180
 
97
- @include pressed {
98
- background: var(--primary-black-400);
99
- color: var(--primary-black);
100
- }
181
+ @include hover {
182
+ background: var(--primary-black-300);
183
+ color: var(--primary-black-900);
101
184
  }
102
- }
103
185
 
104
- &.--extra-small-size {
105
- #{$chip} {
106
- &__content {
107
- padding: var(--spacing-2s) var(--spacing-m);
108
- gap: var(--spacing-xs);
109
- }
110
-
111
- &__wrapper {
112
- height: 32px;
113
- font: var(--typography-text-s-medium);
114
- border-radius: var(--corner-radius-xl);
115
- }
116
-
117
- &__count {
118
- transform: translateY(-3px);
119
- font: var(--typography-text-xs-medium);
120
- }
186
+ @include pressed {
187
+ background: var(--primary-black-400);
188
+ color: var(--primary-black);
121
189
  }
190
+ }
191
+
192
+ &__content {
193
+ color: var(--primary-black-white);
194
+ }
122
195
  }
196
+ }
123
197
 
124
- &.--small-size {
125
- #{$chip} {
126
- &__content {
127
- padding: var(--spacing-s) var(--spacing-l);
128
- gap: var(--spacing-s);
129
- }
130
-
131
- &__wrapper {
132
- height: 40px;
133
- font: var(--typography-text-m-medium);
134
- border-radius: var(--corner-radius-xl);
135
- }
136
-
137
- &__count {
138
- transform: translateY(-3px);
139
- font: var(--typography-text-xs-medium);
140
- }
141
- }
198
+ &.--extra-small-size {
199
+ #{$chip} {
200
+ &__content {
201
+ padding: var(--spacing-2s) var(--spacing-m);
202
+ gap: var(--spacing-xs);
203
+ }
204
+
205
+ &__wrapper {
206
+ height: 32px;
207
+ font: var(--typography-text-s-medium);
208
+ border-radius: var(--corner-radius-xl);
209
+ }
210
+
211
+ &__count {
212
+ transform: translateY(-3px);
213
+ font: var(--typography-text-xs-medium);
214
+ }
142
215
  }
216
+ }
143
217
 
144
- &.--medium-size {
145
- #{$chip} {
146
- &__content {
147
- padding: var(--spacing-2m) var(--spacing-l);
148
- gap: var(--spacing-s);
149
- }
150
-
151
- &__wrapper {
152
- height: 48px;
153
- font: var(--typography-text-l-medium);
154
- border-radius: var(--corner-radius-xl);
155
- }
156
-
157
- &__count {
158
- transform: translateY(-4px);
159
- font: var(--typography-text-s-medium);
160
- }
161
- }
218
+ &.--small-size {
219
+ #{$chip} {
220
+ &__content {
221
+ padding: var(--spacing-s) var(--spacing-l);
222
+ gap: var(--spacing-s);
223
+ }
224
+
225
+ &__wrapper {
226
+ height: 40px;
227
+ font: var(--typography-text-m-medium);
228
+ border-radius: var(--corner-radius-xl);
229
+ }
230
+
231
+ &__count {
232
+ transform: translateY(-3px);
233
+ font: var(--typography-text-xs-medium);
234
+ }
162
235
  }
236
+ }
163
237
 
164
- &.--large-size {
165
- #{$chip} {
166
- &__content {
167
- padding: var(--spacing-2l) var(--spacing-l);
168
- gap: var(--spacing-s);
169
- }
170
-
171
- &__wrapper {
172
- height: 56px;
173
- font: var(--typography-text-l-medium);
174
- border-radius: var(--corner-radius-2xl);
175
- }
176
-
177
- &__count {
178
- transform: translateY(-5px);
179
- font: var(--typography-text-s-medium);
180
- }
181
- }
238
+ &.--medium-size {
239
+ #{$chip} {
240
+ &__content {
241
+ padding: var(--spacing-2m) var(--spacing-l);
242
+ gap: var(--spacing-s);
243
+ }
244
+
245
+ &__wrapper {
246
+ height: 48px;
247
+ font: var(--typography-text-l-medium);
248
+ border-radius: var(--corner-radius-xl);
249
+ }
250
+
251
+ &__count {
252
+ transform: translateY(-4px);
253
+ font: var(--typography-text-s-medium);
254
+ }
255
+ }
256
+ }
257
+
258
+ &.--large-size {
259
+ #{$chip} {
260
+ &__content {
261
+ padding: var(--spacing-2l) var(--spacing-l);
262
+ gap: var(--spacing-s);
263
+ }
264
+
265
+ &__wrapper {
266
+ height: 56px;
267
+ font: var(--typography-text-l-medium);
268
+ border-radius: var(--corner-radius-2xl);
269
+ }
270
+
271
+ &__count {
272
+ transform: translateY(-5px);
273
+ font: var(--typography-text-s-medium);
274
+ }
182
275
  }
276
+ }
183
277
  }
184
278
  </style>
package/src/components/BaseChips/README.md CHANGED
@@ -15,13 +15,14 @@
15
15
 
16
16
  ## Свойства (Props)
17
17
 
18
- | Свойство | Тип | Значение по умолчанию | Описание |
19
- |-------------|-------------|-----------------------|----------------------------------------------|
20
- | `text` | `string` | Обязательно | Основной текст, отображаемый внутри чипа. |
21
- | `active` | `boolean` | `false` | Определяет, находится ли чип в активном состоянии. |
22
- | `iconName` | `string` | `undefined` | Название иконки для отображения (требуется BaseIcon). |
23
- | `count` | `number` | `undefined` | Число для отображения в чипе. |
24
- | `size` | `'extra-small' | 'small' | 'medium' | 'large'` | `medium` | Размер чипа (влияет на высоту, шрифт и отступы). |
18
+ | Свойство | Тип | Значение по умолчанию | Описание |
19
+ |------------|----------------|--------|-------------------------------------------------------|
20
+ | `text` | `string` | Обязательно | Основной текст, отображаемый внутри чипа. |
21
+ | `active` | `boolean` | `false` | Определяет, находится ли чип в активном состоянии. |
22
+ | `iconName` | `string` | `undefined` | Название иконки для отображения (требуется BaseIcon). |
23
+ | `count` | `number` | `undefined` | Число для отображения в чипе. |
24
+ | `size` | `'extra-small' | 'small'| 'medium'| 'large'` | `medium` | Размер чипа (влияет на высоту, шрифт и отступы). |
25
+ | `color` | `'gray' | 'red' | 'green' | 'warning'` | `medium`|
25
26
 
26
27
  ## События (Events)
27
28
 
package/src/components/BaseSelect/BaseSelect.vue CHANGED
@@ -436,6 +436,11 @@ defineSlots<{
436
436
 
437
437
  &.--small-size {
438
438
  #{$select} {
439
+
440
+ &__wrapper {
441
+ height: v-bind('props.searchable? `40px`: ``');
442
+ }
443
+
439
444
  &__header_value, &__placeholder {
440
445
  font: var(--typography-text-m-regular);
441
446
  }
@@ -459,6 +464,10 @@ defineSlots<{
459
464
 
460
465
  &.--medium-size {
461
466
  #{$select} {
467
+ &__wrapper {
468
+ height: v-bind('props.searchable? `48px`: ``');
469
+ }
470
+
462
471
  &__header_value, &__placeholder {
463
472
  font: var(--typography-text-m-regular);
464
473
  }
@@ -482,6 +491,10 @@ defineSlots<{
482
491
 
483
492
  &.--large-size {
484
493
  #{$select} {
494
+ &__wrapper {
495
+ height: v-bind('props.searchable? `56px`: ``');
496
+ }
497
+
485
498
  &__header_value, &__placeholder {
486
499
  font: var(--typography-text-l-regular);
487
500
  }
package/src/components/BaseUpload/BaseUpload.vue CHANGED
@@ -470,7 +470,7 @@ watch( () => props.files,
470
470
  display: flex;
471
471
  justify-content: space-between;
472
472
  align-items: center;
473
- padding: 8px 0;
473
+ padding: 8px 12px;
474
474
  border-bottom: 1px solid var(--primary-black-200);
475
475
 
476
476
  &:last-child {
package/src/types/chips.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface ICoreChipsBaseProps {
5
5
  active: boolean;
6
6
  iconName?: string;
7
7
  count?: number;
8
+ color?: string;
8
9
  }
9
10
 
10
11
  export type ICoreChipsProps = ICoreChipsBaseProps & ICoreSize;