plugin-ui-for-kzt 0.0.17 → 0.0.18

package/src/components/BaseButton/BaseButton.vue

@@ -159,10 +159,6 @@ const classList = computed(() => [
         color: var(--primary-black-white);
         background: var(--primary-blue);
 
-        i,svg {
-            color: var(--primary-black-white) !important;
-        }
-
         @include hover {
             background: var(--primary-blue-800);
         }
@@ -180,10 +176,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--primary-blue-100);
             background: var(--primary-blue-300);
-
-            i,svg {
-                color: var(--primary-blue-100) !important;
-            }
         }
     }
 
@@ -191,10 +183,6 @@ const classList = computed(() => [
         color: var(--primary-black-800);
         background: var(--primary-black-200);
 
-        i,svg {
-            color: var(--primary-black-800) !important;
-        }
-
         @include hover {
             color: var(--primary-black-900);
             background: var(--primary-black-300);
@@ -213,10 +201,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--primary-black-400);
             background: var(--primary-black-100);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -225,18 +209,10 @@ const classList = computed(() => [
         background: transparent;
         border: 1px solid var(--primary-black-400);
 
-        i,svg {
-            color: var(--primary-black-600) !important;
-        }
-
         @include hover {
             color: var(--primary-black-700);
             text-decoration: none;
             border: 1px solid var(--primary-black-500);
-
-            i,svg {
-                color: var(--primary-black-700) !important;
-            }
         }
 
         @include pressed {
@@ -254,10 +230,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--primary-black-400);
             border: 1px solid var(--primary-black-300);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -266,18 +238,10 @@ const classList = computed(() => [
         background: transparent;
         border: 1px solid var(--primary-blue);
 
-        i,svg {
-            color: var(--primary-blue) !important;
-        }
-
         @include hover {
             color: var(--primary-blue-800);
             text-decoration: none;
             border: 1px solid var(--primary-blue-800);
-
-            i,svg {
-                color: var(--primary-blue-800) !important;
-            }
         }
 
         @include pressed {
@@ -294,10 +258,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--primary-black-400);
             border: 1px solid var(--primary-black-300);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -305,17 +265,9 @@ const classList = computed(() => [
         color: var(--primary-black-600);
         background: transparent;
 
-        i,svg {
-            color: var(--primary-black-600) !important;
-        }
-
         @include hover {
             color: var(--primary-black-700);
             background: var(--primary-black-100);
-
-            i,svg {
-                color: var(--primary-black-700) !important;
-            }
         }
 
         @include pressed {
@@ -332,10 +284,6 @@ const classList = computed(() => [
 
         @include is-disabled-state {
             color: var(--primary-black-400);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -343,18 +291,10 @@ const classList = computed(() => [
         color: var(--primary-blue);
         background: transparent;
 
-        i,svg {
-            color: var(--primary-blue) !important;
-        }
-
         @include hover {
             color: var(--primary-blue-900);
             text-decoration: none;
             background: var(--primary-blue-100);
-
-            i,svg {
-                color: var(--primary-blue-900) !important;
-            }
         }
 
         @include pressed {
@@ -371,10 +311,6 @@ const classList = computed(() => [
 
         @include is-disabled-state {
             color: var(--primary-black-400);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -384,24 +320,12 @@ const classList = computed(() => [
         background: transparent;
         padding: var(--corner-radius-xxs);
 
-        i,svg {
-            color: var(--primary-blue) !important;
-        }
-
         @include hover {
             color: var(--secondary-text-link-hover);
-
-            i,svg {
-                color: var(--primary-blue-700) !important;
-            }
         }
 
         @include pressed {
             color: var(--secondary-text-link-pressed);
-
-            i,svg {
-                color: var(--primary-blue-700) !important;
-            }
         }
 
         @include focused {
@@ -413,10 +337,6 @@ const classList = computed(() => [
 
         @include is-disabled-state {
             color: var(--secondary-text-link-disabled);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -426,24 +346,12 @@ const classList = computed(() => [
         background: transparent;
         padding: var(--corner-radius-xxs);
 
-        i,svg {
-            color: var(--error-red) !important;
-        }
-
         @include hover {
             color: var(--error-red-light-01);
-
-            i,svg {
-                color: var(--error-red-light-01) !important;
-            }
         }
 
         @include pressed {
             color: var(--error-red-deep);
-
-            i,svg {
-                color: var(--error-red-deep) !important;
-            }
         }
 
         @include focused {
@@ -455,10 +363,6 @@ const classList = computed(() => [
 
         @include is-disabled-state {
             color: var(--primary-black-400);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -468,24 +372,12 @@ const classList = computed(() => [
         text-decoration: underline;
         padding: var(--corner-radius-xxs);
 
-        i,svg {
-            color: var(--primary-black) !important;
-        }
-
         @include hover {
             color: var(--secondary-text-gray-link-hover);
-
-            i,svg {
-                color: var(--primary-black-500) !important;
-            }
         }
 
         @include pressed {
             color: var(--secondary-text-gray-link-pressed);
-
-            i,svg {
-                color: var(--primary-black-700) !important;
-            }
         }
 
         @include focused {
@@ -498,10 +390,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--secondary-text-gray-link-disabled);
             border-bottom: none;
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 }

package/src/components/BaseInput/BaseInput.vue

@@ -83,7 +83,7 @@ function handleInput(event: Event) {
 @import '../../styles/root';
 
   .base-input {
-    width: max-content;
+    width: 100%;
     $input: &;
 
     &__wrapper {
@@ -91,12 +91,12 @@ function handleInput(event: Event) {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      width: fit-content;
+      width: 100%;
     }
 
     &__field {
       flex: 1;
-      width: auto;
+      width: 100%;
       height: 100%;
       color: var(--primary-text-primary);
       background: var(--bg-light);
@@ -152,6 +152,7 @@ function handleInput(event: Event) {
       display: flex;
       flex-direction: column;
       gap: 6px;
+      width: 100%;
     }
 
     &__label-text {

package/src/components/BaseModal/BaseModal.vue

@@ -0,0 +1,189 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-for="modal in modals"
+      :key="modal.id"
+      v-show="modal.isOpen"
+      class="base-modal__overlay"
+      @click.self="handleOverlayClick(modal.id)"
+    >
+      <div class="base-modal" @click.stop>
+        <div class="base-modal__wrapper">
+          <base-icon
+            v-if="modal.props?.closable"
+            name="close-circle"
+            class="base-modal__close"
+            size="custom"
+            @click="handleClose(modal.id)"
+          />
+          <div class="base-modal__content">
+            <component :is="modal.component" v-if="modal.component" :modal-props="modal.props" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useModalStore } from '../../store/modal';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+
+const modalStore = useModalStore();
+
+const modals = computed(() => modalStore.modals);
+
+const handleClose = (id: string) => {
+  modalStore.closeModal(id);
+};
+
+const handleOverlayClick = (id: string) => {
+  const topModal = modals.value[modals.value.length - 1];
+  if (topModal?.id === id && topModal.props?.closable) {
+    handleClose(id);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+.base-modal {
+  background: var(--primary-black-white);
+  border-radius: var(--corner-radius-m);
+  overflow: hidden;
+  min-width: 335px;
+  transform: scale(0.7);
+  animation: slideIn 0.3s ease forwards;
+  margin: 0 20px;
+  max-height: 90vh;
+
+  @media #{$tablet} {
+    min-width: 588px;
+  }
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    min-height: 224px;
+    height: 100%;
+    padding: 24px;
+
+    @media #{$mobile-landscape} {
+      padding: 56px 68px;
+      min-height: 332px;
+    }
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    color: var(--primary-text-primary);
+    font: var(--typography-l-medium);
+
+    @media #{$mobile-landscape} {
+      font: var(--typography-h4-medium);
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--primary-gray-600);
+
+    &:hover {
+      color: var(--primary-black-900);
+    }
+
+    @media #{$mobile-landscape} {
+      width: 48px;
+      height: 48px;
+    }
+  }
+
+  &__content {
+    max-height: 70vh;
+    overflow-y: auto;
+    color: var(--primary-text-tertiary);
+    font: var(--typography-text-s-regular);
+
+    @media #{$mobile-landscape} {
+      font: var(--typography-text-l-regular);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    flex-grow: 1;
+    gap: 24px;
+    width: 100%;
+    margin-top: 24px;
+
+    :deep(.base-button) {
+      width: 100%;
+    }
+  }
+}
+
+// Анимации
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOut {
+  to {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+}
+
+.base-modal-leave-active {
+  animation: slideOut 0.3s ease reverse;
+}
+</style>

package/src/components/BaseTag/BaseTag.vue

@@ -0,0 +1,245 @@
+<template>
+<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>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+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 emit = defineEmits<{
+    updateInput: [value: ICoreTagProps['inputText']];
+    close: [];
+    addTag: [];
+}>();
+
+const inputText = ref<string>(props.inputText || '');
+
+const { sizeClassList } = useKitSize(props);
+const { colorClassList } = useKitColor(props);
+
+const classList = computed(() => [
+    sizeClassList.value,
+    colorClassList.value,
+    {'--adding-tag': props.addingTag},
+]);
+
+const handleClose = () => {
+    emit('close');
+};
+
+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 = '';
+    }
+};
+
+const handleAddTag = () => {
+    emit('addTag');
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/variables';
+@import '@/styles/root';
+
+.base-tag {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    &__wrapper {
+        display: flex;
+        align-items: center;
+        transition: all var(--transition);
+    }
+
+    &__text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: var(--spacing-xs);
+    }
+
+    &__input-wrapper {
+        display: flex;
+        align-items: center;
+
+        .base-tag__input {
+            border: none;
+            background: transparent;
+            outline: none;
+            color: var(--primary-blue);
+        }
+    }
+
+    &.--primary-color {
+        .base-tag__wrapper {
+            background: var(--primary-black-100);
+            color: var(--primary-black-700);
+
+            @include hover {
+                background: var(--primary-black-200);
+                color: var(--primary-black-900);
+
+                .base-tag__icon {
+                    color: var(--primary-black-900);
+                }
+            }
+        }
+
+        .base-tag__icon {
+            color: var(--primary-black-500);
+        }
+    }
+
+    &.--secondary-color {
+        .base-tag__wrapper {
+            background: var(--primary-black-white);
+            color: var(--primary-black-700); // same
+
+            @include hover {
+                background: var(--primary-black-200);
+                color: var(--primary-black-900);
+
+                .base-tag__icon {
+                    color: var(--primary-black-900);
+                }
+            }
+        }
+
+        .base-tag__icon {
+            color: var(--primary-black-500);
+        }
+    }
+
+    &.--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);
+        }
+
+        .base-tag__icon,
+        .base-tag__add-icon {
+            width: 12px;
+            height: 12px;
+        }
+    }
+
+    &.--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__icon,
+        .base-tag__add-icon {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    &.--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__icon,
+        .base-tag__add-icon {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    &.--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__icon,
+        .base-tag__add-icon {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}
+</style>