plugin-ui-for-kzt 0.0.33 → 0.0.37

package/package.json

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

package/src/components/BaseTag/BaseTag.vue

@@ -1,24 +1,24 @@
 <template>
-<div class="base-tag" :class="classList">
+  <div class="base-tag" :class="classList">
     <div class="base-tag__wrapper">
-        <div class="base-tag__text">{{ text }}</div>
-        <div v-if="closable" class="base-tag__icon" @click="handleClose">
-            <base-icon name="close" size="custom" />
-        </div>
-        <div v-if="addingTag" class="base-tag__icon">
-            <base-icon name="add" size="custom" class="base-tag__add-icon" @click="handleAddTag" />
-        </div>
-        <div v-if="isHasAddTag" class="base-tag__input-wrapper">
-            <input
-                class="base-tag__input"
-                type="text"
-                v-model="inputText"
-                @input="handleInput"
-                @keypress.enter="handleCreateTag"
-            />
-        </div>
+      <div class="base-tag__text">{{ text }}</div>
+      <div v-if="closable" class="base-tag__icon" @click="handleClose">
+        <base-icon name="close" size="custom"/>
+      </div>
+      <div v-if="addingTag" class="base-tag__icon">
+        <base-icon name="add" size="custom" class="base-tag__add-icon" @click="handleAddTag"/>
+      </div>
+      <div v-if="isHasAddTag" class="base-tag__input-wrapper">
+        <input
+            class="base-tag__input"
+            type="text"
+            v-model="inputText"
+            @input="handleInput"
+            @keypress.enter="handleCreateTag"
+        />
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -28,50 +28,50 @@ import type { ICoreTagProps } from '../../types/tag';
 import { useKitSize } from '../../composables/kit/size';
 import { useKitColor } from '../../composables/kit/color';
 
-const props = withDefaults(defineProps<ICoreTagProps>(), {
-    size: 'medium',
-    color: 'primary',
-    closable: false,
-    isHasAddTag: false,
-    addingTag: false,
-    text: '',
-});
+const props = withDefaults( defineProps<ICoreTagProps>(), {
+  size: 'medium',
+  color: 'primary',
+  closable: false,
+  isHasAddTag: false,
+  addingTag: false,
+  text: '',
+} );
 
 const emit = defineEmits<{
-    updateInput: [value: ICoreTagProps['inputText']];
-    close: [];
-    addTag: [];
+  updateInput: [value: ICoreTagProps['inputText']];
+  close: [];
+  addTag: [];
 }>();
 
-const inputText = ref<string>(props.inputText || '');
+const inputText = ref<string>( props.inputText || '' );
 
-const { sizeClassList } = useKitSize(props);
-const { colorClassList } = useKitColor(props);
+const { sizeClassList } = useKitSize( props );
+const { colorClassList } = useKitColor( props );
 
-const classList = computed(() => [
-    sizeClassList.value,
-    colorClassList.value,
-    {'--adding-tag': props.addingTag},
-]);
+const classList = computed( () => [
+  sizeClassList.value,
+  colorClassList.value,
+  { '--adding-tag': props.addingTag },
+] );
 
 const handleClose = () => {
-    emit('close');
+  emit( 'close' );
 };
 
-const handleInput = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-    emit('updateInput', target.value);
+const handleInput = ( event: Event ) => {
+  const target = event.target as HTMLInputElement;
+  emit( 'updateInput', target.value );
 };
 
 const handleCreateTag = () => {
-    if (inputText.value.trim()) {
-        emit('updateInput', inputText.value.trim());
-        inputText.value = '';
-    }
+  if ( inputText.value.trim() ) {
+    emit( 'updateInput', inputText.value.trim() );
+    inputText.value = '';
+  }
 };
 
 const handleAddTag = () => {
-    emit('addTag');
+  emit( 'addTag' );
 };
 </script>
 
@@ -80,166 +80,169 @@ const handleAddTag = () => {
 @import '@/styles/root';
 
 .base-tag {
-    display: inline-flex;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    transition: all var(--transition);
+    gap: 7px;
+  }
+
+  &__text {
+    //white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+
+  &__icon {
+    display: flex;
     align-items: center;
-    cursor: pointer;
+    justify-content: center;
+  }
 
-    &__wrapper {
-        display: flex;
-        align-items: center;
-        transition: all var(--transition);
-    }
+  &__input-wrapper {
+    display: flex;
+    align-items: center;
 
-    &__text {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    .base-tag__input {
+      border: none;
+      background: transparent;
+      outline: none;
+      color: var(--primary-blue);
     }
+  }
 
-    &__icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: var(--spacing-xs);
-    }
+  &.--primary-color {
+    .base-tag__wrapper {
+      background: var(--primary-black-100);
+      color: var(--primary-black-700);
 
-    &__input-wrapper {
-        display: flex;
-        align-items: center;
+      @include hover {
+        background: var(--primary-black-200);
+        color: var(--primary-black-900);
 
-        .base-tag__input {
-            border: none;
-            background: transparent;
-            outline: none;
-            color: var(--primary-blue);
+        .base-tag__icon {
+          color: var(--primary-black-900);
         }
+      }
     }
 
-    &.--primary-color {
-        .base-tag__wrapper {
-            background: var(--primary-black-100);
-            color: var(--primary-black-700);
+    .base-tag__icon {
+      color: var(--primary-black-500);
+    }
+  }
 
-            @include hover {
-                background: var(--primary-black-200);
-                color: var(--primary-black-900);
+  &.--secondary-color {
+    .base-tag__wrapper {
+      background: var(--primary-black-white);
+      color: var(--primary-black-700); // same
 
-                .base-tag__icon {
-                    color: var(--primary-black-900);
-                }
-            }
-        }
+      @include hover {
+        background: var(--primary-black-200);
+        color: var(--primary-black-900);
 
         .base-tag__icon {
-            color: var(--primary-black-500);
+          color: var(--primary-black-900);
         }
+      }
     }
 
-    &.--secondary-color {
-        .base-tag__wrapper {
-            background: var(--primary-black-white);
-            color: var(--primary-black-700); // same
+    .base-tag__icon {
+      color: var(--primary-black-500);
+    }
+  }
 
-            @include hover {
-                background: var(--primary-black-200);
-                color: var(--primary-black-900);
+  &.--adding-tag {
+    .base-tag__wrapper {
+      color: var(--primary-black-500);
 
-                .base-tag__icon {
-                    color: var(--primary-black-900);
-                }
-            }
-        }
+      @include hover {
+        color: var(--primary-black-900);
 
         .base-tag__icon {
-            color: var(--primary-black-500);
+          color: var(--primary-black-900);
         }
+      }
     }
+  }
 
-    &.--adding-tag {
-        .base-tag__wrapper {
-            color: var(--primary-black-500);
 
-            @include hover {
-                color: var(--primary-black-900);
-
-                .base-tag__icon {
-                    color: var(--primary-black-900);
-                }
-            }
-        }
+  &.--extra-small-size {
+    .base-tag__text,
+    .base-tag__input {
+      font: var(--typography-text-xs-medium);
     }
 
+    .base-tag__wrapper {
+      border-radius: var(--corner-radius-xxs);
+      padding: var(--spacing-2xs) var(--spacing-s);
+    }
 
-    &.--extra-small-size {
-        .base-tag__text,
-        .base-tag__input {
-            font: var(--typography-text-xs-medium);
-        }
-
-        .base-tag__wrapper {
-            border-radius: var(--corner-radius-xxs);
-            padding: var(--spacing-2xs) var(--spacing-s);
-        }
-
-        .base-tag__icon,
-        .base-tag__add-icon {
-            width: 12px;
-            height: 12px;
-        }
+    .base-tag__icon,
+    .base-tag__add-icon {
+      width: 12px;
+      height: 12px;
+      margin-top: 4px;
     }
+  }
 
-    &.--small-size {
-        .base-tag__text,
-        .base-tag__input {
-        font: var(--typography-text-s-medium);
-        }
+  &.--small-size {
+    .base-tag__text,
+    .base-tag__input {
+      font: var(--typography-text-s-medium);
+    }
 
-        .base-tag__wrapper {
-            border-radius: var(--corner-radius-xxs);
-            padding: var(--spacing-2xs) var(--spacing-s);
-        }
+    .base-tag__wrapper {
+      border-radius: var(--corner-radius-xxs);
+      padding: var(--spacing-2xs) var(--spacing-s);
+    }
 
-        .base-tag__icon,
-        .base-tag__add-icon {
-            width: 14px;
-            height: 14px;
-        }
+    .base-tag__icon,
+    .base-tag__add-icon {
+      width: 14px;
+      height: 14px;
+      margin-top: 4px;
     }
+  }
 
-    &.--medium-size {
-        .base-tag__text,
-        .base-tag__input {
-            font: var(--typography-text-s-medium);
-        }
+  &.--medium-size {
+    .base-tag__text,
+    .base-tag__input {
+      font: var(--typography-text-s-medium);
+    }
 
-        .base-tag__wrapper {
-            border-radius: var(--corner-radius-2xs);
-            padding: var(--spacing-xs) var(--spacing-2m);
-        }
+    .base-tag__wrapper {
+      border-radius: var(--corner-radius-2xs);
+      padding: var(--spacing-xs) var(--spacing-2m);
+    }
 
-        .base-tag__icon,
-        .base-tag__add-icon {
-            width: 16px;
-            height: 16px;
-        }
+    .base-tag__icon,
+    .base-tag__add-icon {
+      width: 16px;
+      height: 16px;
     }
+  }
 
-    &.--large-size {
-        .base-tag__text,
-        .base-tag__input {
-            font: var(--typography-text-m-medium);
-        }
+  &.--large-size {
+    .base-tag__text,
+    .base-tag__input {
+      font: var(--typography-text-m-medium);
+    }
 
-        .base-tag__wrapper {
-            border-radius: var(--corner-radius-2xs);
-            padding: var(--spacing-xs) var(--spacing-2m);
-        }
+    .base-tag__wrapper {
+      border-radius: var(--corner-radius-2xs);
+      padding: var(--spacing-xs) var(--spacing-2m);
+    }
 
-        .base-tag__icon,
-        .base-tag__add-icon {
-            width: 16px;
-            height: 16px;
-        }
+    .base-tag__icon,
+    .base-tag__add-icon {
+      width: 16px;
+      height: 16px;
     }
+  }
 }
 </style>

package/src/components/BaseUpload/BaseUpload.vue

@@ -286,6 +286,18 @@ const getImagePreview = (file: File) => {
 watch(uploadedFiles, (newFiles) => {
   emit('update:files', newFiles);
 }, { deep: true });
+
+watch(() => props.files,
+    (newFiles) => {
+      if(!newFiles) return;
+
+      uploadedFiles.value = [...newFiles];
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+)
 </script>
 
 <style lang="scss" scoped>

package/src/types/uploadedFile.d.ts

@@ -17,4 +17,5 @@ export interface IpropsUpload {
     cropTexts?: CropTexts; // Тексты для кнопок в модальном окне кропа
     onUpload?: (files: UploadedFile[]) => void; // Callback при загрузке файлов
     onError?: (error: string) => void; // Callback при ошибке загрузки
+    files?: UploadedFile[];
 }