plugin-ui-for-kzt 0.0.21 → 0.0.23

package/src/components/BaseUpload/CropModal.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="crop-modal">
+    <div class="crop-modal__container">
+      <div class="crop-modal__body">
+        <div class="crop-modal__cropper-container">
+          <Cropper
+              ref="cropperRef"
+              class="crop-modal__cropper"
+              :src="modalProps.imageUrl"
+              :stencil-props="{
+              aspectRatio: NaN,
+              movable: true,
+              resizable: true,
+            }"
+              :resize-image="{
+              adjustStencil: false
+            }"
+          />
+        </div>
+      </div>
+
+      <div class="crop-modal__footer">
+        <base-button
+            color="secondary"
+            size="small"
+            @click="handleCancel"
+            class="crop-modal__button"
+        >
+          {{ modalProps.cancelText || 'Отменить' }}
+        </base-button>
+
+        <base-button
+            color="primary"
+            size="small"
+            @click="handleConfirm"
+            class="crop-modal__button"
+        >
+          {{ modalProps.confirmText || 'Применить' }}
+        </base-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import {Cropper} from 'vue-advanced-cropper';
+import 'vue-advanced-cropper/dist/style.css';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import {useModal} from '../../composables/useModal';
+
+interface CropModalProps {
+  modalProps: {
+    imageUrl: string;
+    fileName: string;
+    onConfirm: (croppedFile: File) => void;
+    onCancel: () => void;
+    cancelText?: string;
+    confirmText?: string;
+  };
+}
+
+const props = defineProps<CropModalProps>();
+const modal = useModal();
+
+const cropperRef = ref();
+
+const handleCancel = () => {
+  props.modalProps.onCancel();
+  modal.close('crop-modal');
+};
+
+const handleConfirm = () => {
+  if (!cropperRef.value) return;
+
+  const {canvas} = cropperRef.value.getResult();
+
+  if (canvas) {
+    canvas.toBlob((blob: Blob | null) => {
+      if (blob) {
+        const croppedFile = new File([blob], props.modalProps.fileName, {
+          type: 'image/jpeg',
+          lastModified: Date.now(),
+        });
+
+        props.modalProps.onConfirm(croppedFile);
+        modal.close('crop-modal');
+      }
+    }, 'image/jpeg', 0.9);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.crop-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 588px;
+  max-height: 776px;
+
+  @media #{$mobile-max-576} {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  &__container {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  &__body {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__cropper-container {
+    height: 500px;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    @media #{$mobile-max-375} {
+      overflow: unset;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    gap: var(--spacing-xl);
+    justify-content: space-between;
+    padding: var(--spacing-xl);
+    background-color: var(--primary-black-white);
+
+    @media #{$mobile-max-576} {
+      flex-direction: column;
+      justify-content: center;
+      gap: var(--spacing-l);
+    }
+  }
+
+  &__button {
+    min-width: 258px;
+
+    @media #{$mobile-landscape} {
+      min-width: unset;
+      width: 100%;
+    }
+  }
+}
+
+::v-deep(.vue-advanced-cropper__background) {
+  background: rgba(0, 0, 0, 0.3);
+  width: 100%;
+}
+
+::v-deep(.vue-advanced-cropper__foreground) {
+  border-color: var(--primary-blue);
+  background: rgba(0, 0, 0, 0.3);
+}
+
+::v-deep(.vue-simple-handler) {
+  background: var(--primary-blue);
+  border-color: white;
+}
+
+::v-deep(.vue-simple-handler:hover) {
+  background: var(--primary-blue-deep);
+}
+
+::v-deep(.vue-simple-line) {
+  border-color: var(--primary-blue);
+}
+</style>
+
+<style lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-modal:has(.crop-modal) {
+  @media screen and (max-width: 375px) {
+    max-height: unset !important;
+    height: 100vh !important;
+  }
+}
+
+.base-modal__content:has(.crop-modal) {
+  width: 100% !important;
+
+  @media screen and (max-width: 375px) {
+    overflow-y: unset !important;
+  }
+}
+
+.base-modal__wrapper:has(.crop-modal) {
+  padding: 0 !important;
+
+  @media #{$mobile-max-767} {
+    padding: 0 !important;
+  }
+
+  @media screen and (max-width: 375px) {
+    justify-content: start !important;
+  }
+}
+</style>

package/src/composables/kit/state.ts

@@ -8,10 +8,9 @@ export function useKitState(props: ICoreState) {
       '--is-selected': props.selected,
       '--is-active': props.active,
       '--is-required': props.required,
-      '--is-error': props.error,
+      '--is-error': Boolean(props.error || (typeof props.error === 'string' ? props.error.length > 0 : false)),
       '--is-loading': props.loading,
       '--is-disabled': props.disabled,
-      '--is-has-hint': props.hint,
     },
   ]);
 

package/src/index.ts

@@ -35,6 +35,8 @@ import BaseUpload from "./components/BaseUpload/BaseUpload.vue";
 import BaseBadge from "./components/BaseBadge/BaseBadge.vue";
 import BaseTag from "./components/BaseTag/BaseTag.vue";
 import BaseBadgeGroup from "./components/BaseBadge/BaseBadgeGroup.vue";
+import BaseField from "./components/BaseField/BaseField.vue";
+import BaseTabs from "./components/BaseTabs/BaseTabs.vue";
 
 const components = {
   BaseModal,
@@ -67,7 +69,9 @@ const components = {
   BaseSegmentedButtons,
   BaseChips,
   BaseSwiper,
-  BaseUpload
+  BaseUpload,
+  BaseField,
+  BaseTabs
 };
 
 // Функция для загрузки sprite.svg
@@ -153,5 +157,7 @@ export {
   BaseSegmentedButtons,
   BaseChips,
   BaseSwiper,
-  BaseUpload
+  BaseUpload,
+  BaseField,
+  BaseTabs
 };

package/src/styles/index.scss

@@ -1,4 +1,89 @@
-body {
-  font-family: 'Roboto Condensed', 'Helvetica Neue', sans-serif;
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
   font-size: 100%;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.5;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  appearance: none;
+}
+
+form {
+  margin: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: var(--primary-black-300, #ccc);
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
 }

package/src/styles/root.scss

@@ -1,3 +1,4 @@
+@import "./index.scss";
 :root {
     /* Primary colors */
     --primary-blue-deep: #0085BE;

package/src/styles/variables.scss

@@ -33,7 +33,8 @@ $retina: '(min-resolution: 1.5dppx), (min-resolution: 144dpi)';
 
 @mixin focused {
     &:focus,
-    &:focus-visible {
+    &:focus-visible,
+    &:focus-within {
         @content;
     }
 }

package/src/types/calendar.d.ts

@@ -5,10 +5,12 @@ import type { InputProps } from './input';
 export type DateRange = [Date, Date] | Date | string | null;
 
 export interface IBaseCalendarProps {
+  id: string
   modelValue?: DateRange
   range?: boolean | RangeConfig | undefined
   minDate?: Date | null
   readonly?: boolean
+  error?: string | boolean
 }
 
 export type TCoreCalendarProps = IBaseCalendarProps & ICoreSize;

package/src/types/field.d.ts

@@ -0,0 +1,12 @@
+import type { ICoreSize, ICoreState } from './utils';
+
+interface IFieldProps {
+    id: string
+    label: string
+    hint?: string
+    error?: string | boolean
+    focusable?: boolean
+    tabIndex?: number
+}
+
+export type TFieldProps = IFieldProps & ICoreSize & ICoreState;

package/src/types/input.d.ts

@@ -8,19 +8,16 @@ export interface InputProps {
   mask?: string
   type?: string
   placeholder?: string
-  error?: string | boolean
+  error?: string | boolean;
   readonly?: boolean
-  hint?: string
-  label?: string
   tooltipOptions?: ITooltipProps
   validationText?: string
+  focusable?: boolean
 }
 
-interface IPropsBaseSiteInput extends InputProps {}
-
 type TTextareaProps = Omit<InputProps, 'type'>;
 
-export type ICorePropsBaseSiteInput = Omit<IPropsBaseSiteInput, 'id'> & ICoreSize;
+export type ICorePropsBaseSiteInput = InputProps & ICoreSize;
 
 export type ICoreInputProps = InputProps & ICoreSize & ICoreState;
 
@@ -28,14 +25,29 @@ export type ICoreTextareaProps = ICoreState & TTextareaProps & ICoreSize;
 
 export type TSelectValue = Nullable<string | number | boolean>;
 
+type TOptionPhoneCountry = 'KZ' | 'RU' | 'KG' | 'UZ';
+type TOptionCurrency = 'KZT' | 'RUB' | 'KGS' | 'UZS';
+export interface IOptionsSelect<T extends string> {
+  id: string;
+  name: string;
+  value: T;
+  mask: string;
+}
+
+export interface IOptionsPhone extends IOptionsSelect<TOptionPhoneCountry> {
+  icon: TOptionPhoneCountry;
+}
+
+export interface IOptionsCurrency extends IOptionsSelect<TOptionCurrency> {
+  symbol: string;
+}
+
 export interface ICoreSelectOption {
   id: TSelectValue
   name: string
   disabled?: boolean
   icon?: string
   style?: Record<string, string>
-
-
 }
 
 export interface ICoreSelectBaseProps {
@@ -53,4 +65,10 @@ export interface ICoreSelectBaseProps {
   hint?: string
 }
 
+export interface ISelectSlotProps {
+  item: ICoreSelectBaseProps;
+  index: number;
+  active: boolean;
+}
+
 export type ICoreSelectProps = ICoreSelectBaseProps & ICoreSize & ICoreState & ICoreStyle & ICorePlaceholder;

package/src/types/tab.d.ts

@@ -0,0 +1,17 @@
+import type { ICoreSize } from './utils';
+
+type IconComponent = Component | (new () => Component) | (() => Promise<{ default: Component }>);
+
+interface ITab {
+    title: string;
+    id: number;
+    icon?: IconComponent;
+    disabled?: boolean
+}
+
+interface ITabs {
+    tabs: ITab[];
+    modelValue: number,
+}
+
+export type TTabProps = ICoreSize & ITabs

package/src/types/uploadedFile.d.ts

@@ -4,10 +4,17 @@ export interface UploadedFile {
     file: File;
 }
 
+export interface CropTexts {
+    cancel?: string;
+    confirm?: string;
+}
+
 export interface IpropsUpload {
     acceptedFormats: string[]; // Фильтр по типу файлов (например, "image/*" для изображений)
     multiple?: boolean; // Разрешить множественный выбор файлов
     maxFileSize?: number; // Максимальный размер файла в байтах
+    enableCrop?: boolean; // Включить функциональность кропа для изображений
+    cropTexts?: CropTexts; // Тексты для кнопок в модальном окне кропа
     onUpload?: (files: UploadedFile[]) => void; // Callback при загрузке файлов
     onError?: (error: string) => void; // Callback при ошибке загрузки
 }

package/src/types/utils.d.ts

@@ -28,7 +28,6 @@ export interface ICoreState {
   required?: boolean
   error?: Nullable<string | number | boolean> | undefined
   loading?: boolean
-  hint?: Nullable<string | number | boolean> | undefined
 }
 
 export interface ICoreStyle {