plugin-ui-for-kzt 0.0.58 → 0.0.60

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 (27) 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 +7 -7
  5. package/dist/components/BaseCheckbox/BaseCheckbox.vue.d.ts +4 -8
  6. package/dist/components/BaseChips/BaseChips.vue.d.ts +2 -0
  7. package/dist/components/BaseDropdown/BaseDropdown.vue.d.ts +3 -7
  8. package/dist/components/BaseField/BaseField.vue.d.ts +3 -3
  9. package/dist/components/BaseInput/BaseInput.vue.d.ts +4 -4
  10. package/dist/components/BaseInputCalendar/BaseInputCalendar.vue.d.ts +8 -8
  11. package/dist/components/BaseInputCurrency/BaseInputCurrency.vue.d.ts +5 -5
  12. package/dist/components/BaseInputEmail/BaseInputEmail.vue.d.ts +4 -4
  13. package/dist/components/BaseInputPhone/BaseInputPhone.vue.d.ts +4 -4
  14. package/dist/components/BaseOpenedListItem/BaseOpenedListItem.vue.d.ts +2 -6
  15. package/dist/components/BaseRadio/BaseRadio.vue.d.ts +4 -8
  16. package/dist/components/BaseSegmentedButtons/BaseSegmentedButtons.vue.d.ts +2 -6
  17. package/dist/components/BaseSelect/BaseSelect.vue.d.ts +7 -15
  18. package/dist/components/BaseTextarea/BaseTextarea.vue.d.ts +4 -4
  19. package/dist/components/BaseToggle/BaseToggle.vue.d.ts +4 -8
  20. package/dist/index.js +1 -1
  21. package/dist/store/modal.d.ts +13 -13
  22. package/package.json +1 -1
  23. package/src/components/BaseChips/BaseChips.vue +224 -142
  24. package/src/components/BaseChips/README.md +8 -7
  25. package/src/components/BaseSelect/BaseSelect.vue +13 -0
  26. package/src/components/BaseUpload/BaseUpload.vue +1 -1
  27. 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.60",
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,226 @@ const classList = computed(() => [
38
41
  @import '../../styles/root';
39
42
 
40
43
  .base-chips {
41
- $chip: &;
44
+ $chip: &;
42
45
 
43
- button {
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);
66
+ }
67
+
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
+ &__content {
94
+ color: var(--primary-black-600);
95
+ }
96
+
97
+ &__wrapper {
98
+ border: 1px solid var(--primary-black-400);
99
+ background: var(--primary-black-white);
100
+ }
101
+ }
102
+ }
103
+
104
+ &.--green-color {
105
+ #{$chip} {
106
+
107
+ &__content {
108
+ color: var(--success-green);
109
+ }
110
+
111
+ &__wrapper {
112
+ border: 1px solid var(--success-green-light-02);
113
+ background: var(--primary-black-white);
114
+ }
115
+ }
116
+ }
117
+
118
+ &.--red-color {
119
+ #{$chip} {
120
+
121
+ &__content {
122
+ color: var(--secondary-text-negative);
123
+ }
124
+
125
+ &__wrapper {
126
+ border: 1px solid var(--error-red-light-02);
127
+ background: var(--primary-black-white);
128
+ }
129
+ }
130
+ }
131
+
132
+ &.--warning-color {
133
+ #{$chip} {
134
+
135
+ &__content {
136
+ color: var(--warning-orange);
137
+ }
138
+
139
+ &__wrapper {
140
+ border: 1px solid var(--warning-orange-light-02);
141
+ background: var(--primary-black-white);
142
+ }
143
+ }
144
+ }
145
+
146
+ &.--blue-color {
147
+ #{$chip} {
148
+
149
+ &__content {
150
+ color: var(--primary-black-white);
151
+ }
152
+
153
+ &__wrapper {
44
154
  border: none;
45
- outline: none;
46
- margin: 0;
47
- padding: 0;
48
- display: block;
155
+ background: var(--primary-blue);
156
+ }
49
157
  }
158
+ }
50
159
 
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
-
60
- @include hover {
61
- background: var(--primary-black-300);
62
- color: var(--primary-black-900);
63
- }
160
+ &.--is-active {
161
+ #{$chip} {
64
162
 
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;
163
+ &__wrapper {
164
+ background: var(--primary-blue);
165
+ color: var(--primary-black-white);
166
+ border: none;
167
+
168
+
169
+ @include hover {
170
+ background: var(--primary-black-300);
171
+ color: var(--primary-black-900);
71
172
  }
72
173
 
73
174
  @include pressed {
74
- background: var(--primary-black-400);
75
- color: var(--primary-black);
175
+ background: var(--primary-black-400);
176
+ color: var(--primary-black);
76
177
  }
77
- }
178
+ }
78
179
 
79
- &__content {
80
- display: flex;
81
- align-items: center;
82
- justify-content: center;
83
- width: 100%;
84
- height: 100%;
180
+ &__content {
181
+ color: var(--primary-black-white);
182
+ }
85
183
  }
184
+ }
86
185
 
87
- &.--is-active {
88
- #{$chip}__wrapper {
89
- background: var(--primary-blue);
90
- color: var(--primary-black-white);
186
+ &.--extra-small-size {
187
+ #{$chip} {
188
+ &__content {
189
+ padding: var(--spacing-2s) var(--spacing-m);
190
+ gap: var(--spacing-xs);
191
+ }
91
192
 
92
- @include hover {
93
- background: var(--primary-black-300);
94
- color: var(--primary-black-900);
95
- }
193
+ &__wrapper {
194
+ height: 32px;
195
+ font: var(--typography-text-s-medium);
196
+ border-radius: var(--corner-radius-xl);
197
+ }
96
198
 
97
- @include pressed {
98
- background: var(--primary-black-400);
99
- color: var(--primary-black);
100
- }
101
- }
199
+ &__count {
200
+ transform: translateY(-3px);
201
+ font: var(--typography-text-xs-medium);
202
+ }
102
203
  }
204
+ }
103
205
 
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
- }
121
- }
122
- }
206
+ &.--small-size {
207
+ #{$chip} {
208
+ &__content {
209
+ padding: var(--spacing-s) var(--spacing-l);
210
+ gap: var(--spacing-s);
211
+ }
123
212
 
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
- }
213
+ &__wrapper {
214
+ height: 40px;
215
+ font: var(--typography-text-m-medium);
216
+ border-radius: var(--corner-radius-xl);
217
+ }
218
+
219
+ &__count {
220
+ transform: translateY(-3px);
221
+ font: var(--typography-text-xs-medium);
222
+ }
142
223
  }
224
+ }
143
225
 
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
- }
226
+ &.--medium-size {
227
+ #{$chip} {
228
+ &__content {
229
+ padding: var(--spacing-2m) var(--spacing-l);
230
+ gap: var(--spacing-s);
231
+ }
232
+
233
+ &__wrapper {
234
+ height: 48px;
235
+ font: var(--typography-text-l-medium);
236
+ border-radius: var(--corner-radius-xl);
237
+ }
238
+
239
+ &__count {
240
+ transform: translateY(-4px);
241
+ font: var(--typography-text-s-medium);
242
+ }
162
243
  }
244
+ }
163
245
 
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
- }
246
+ &.--large-size {
247
+ #{$chip} {
248
+ &__content {
249
+ padding: var(--spacing-2l) var(--spacing-l);
250
+ gap: var(--spacing-s);
251
+ }
252
+
253
+ &__wrapper {
254
+ height: 56px;
255
+ font: var(--typography-text-l-medium);
256
+ border-radius: var(--corner-radius-2xl);
257
+ }
258
+
259
+ &__count {
260
+ transform: translateY(-5px);
261
+ font: var(--typography-text-s-medium);
262
+ }
182
263
  }
264
+ }
183
265
  }
184
266
  </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'` | `blue`|
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;