plugin-ui-for-kzt 0.0.8 → 0.0.10

package/src/composables/kit/style.ts

@@ -0,0 +1,18 @@
+import type { ICoreStyle } from '../../types/utils';
+import { computed } from 'vue';
+
+export function useKitStyle(props: ICoreStyle) {
+  const styleClassList = computed(() => {
+    return [
+      {
+        '--is-outline': props.outline,
+        '--is-rounded': props.rounded,
+        '--is-underline': props.underline,
+      },
+    ];
+  });
+
+  return {
+    styleClassList,
+  };
+}

package/src/composables/kit/utils.ts

@@ -0,0 +1,7 @@
+export function isValidUrl(string: string): boolean {
+  try {
+    return Boolean(new URL(string));
+  } catch {
+    return false;
+  }
+}

package/src/icons/index.ts

@@ -0,0 +1,9 @@
+const requireIcons = require.context(
+    "@/assets/icons",
+    false,
+    /\.svg$/
+  );
+  
+  requireIcons.keys().forEach((fileName) => {
+    requireIcons(fileName);
+  });

package/src/index.ts

@@ -5,8 +5,70 @@ import Tooltip from "./components/Tooltip/Tooltip.vue";
 import Spinner from "./components/Spinner/Spinner.vue";
 import ModalPlugin, { useModal } from "./plugins/modalPlugin";
 import ToasterPlugin, { useToast } from "./plugins/toasterPlugin";
+import "./icons"; // Импортируем иконки для генерации спрайта
+import "./styles/root.scss";
+import BaseIcon from "./components/BaseIcon/BaseIcon.vue";
+import BaseBreadCrumbs from "./components/BaseBreadCrumbs/BaseBreadCrumbs.vue";
+import BaseButton from "./components/BaseButton/BaseButton.vue";
+import BaseLoader from "./components/BaseLoader/BaseLoader.vue";
+import BaseCalendar from "./components/BaseCalendar/BaseCalendar.vue";
+import BaseCheckbox from "./components/BaseCheckbox/BaseCheckbox.vue";
+import BaseRadio from "./components/BaseRadio/BaseRadio.vue";
+import BaseTextarea from "./components/BaseTextarea/BaseTextarea.vue";
+import BaseToggle from "./components/BaseToggle/BaseToggle.vue";
+import BaseTooltip from "./components/BaseTooltip/BaseTooltip.vue";
+import BaseInput from "./components/BaseInput/BaseInput.vue";
+import BaseInputEmail from "./components/BaseInputEmail/BaseInputEmail.vue";
+import BaseInputCalendar from "./components/BaseInputCalendar/BaseInputCalendar.vue";
+import BaseOpenedListItem from "./components/BaseOpenedListItem/BaseOpenedListItem.vue";
+import BaseDropdown from "./components/BaseDropdown/BaseDropdown.vue";
+import BaseSelect from "./components/BaseSelect/BaseSelect.vue";
+import BaseSiteInput from "./components/BaseSiteInput/BaseSiteInput.vue";
+import BaseInputPhone from "./components/BaseInputPhone/BaseInputPhone.vue";
+import BaseInputCurrency from "./components/BaseInputCurrency/BaseInputCurrency.vue";
+import BaseSegmentedButtons from "./components/BaseSegmentedButtons/BaseSegmentedButtons.vue";
 
-const components = { Modal, DataTable, Tooltip, Spinner };
+const components = { 
+  Modal, 
+  DataTable, 
+  Tooltip, 
+  Spinner, 
+  BaseIcon,
+  BaseBreadCrumbs,
+  BaseButton,
+  BaseLoader,
+  BaseCalendar,
+  BaseCheckbox,
+  BaseRadio,
+  BaseTextarea,
+  BaseToggle,
+  BaseTooltip,
+  BaseInput,
+  BaseInputEmail,
+  BaseInputCalendar,
+  BaseOpenedListItem,
+  BaseDropdown,
+  BaseSelect,
+  BaseSiteInput,
+  BaseInputPhone,
+  BaseInputCurrency,
+  BaseSegmentedButtons
+};
+
+// Функция для загрузки sprite.svg
+const loadSprite = () => {
+  fetch("/sprite.svg")
+    .then((response) => response.text())
+    .then((svg) => {
+      const div = document.createElement("div");
+      div.style.display = "none";
+      div.innerHTML = svg;
+      document.body.appendChild(div);
+    })
+    .catch((error) => {
+      console.error("Ошибка загрузки SVG-спрайта:", error);
+    });
+};
 
 export default {
   install(app: any) {
@@ -21,7 +83,36 @@ export default {
 
     app.use(ModalPlugin);
     app.use(ToasterPlugin);
+
+    loadSprite();
   },
 };
 
-export { Modal, DataTable, Tooltip, Spinner, useModal, useToast };
+export { 
+  Modal, 
+  DataTable, 
+  Tooltip, 
+  Spinner, 
+  useModal, 
+  useToast,
+  BaseIcon,
+  BaseBreadCrumbs,
+  BaseButton,
+  BaseLoader,
+  BaseCalendar,
+  BaseCheckbox,
+  BaseRadio,
+  BaseTextarea,
+  BaseToggle,
+  BaseTooltip,
+  BaseInput,
+  BaseInputEmail,
+  BaseInputCalendar,
+  BaseOpenedListItem,
+  BaseDropdown,
+  BaseSelect,
+  BaseSiteInput,
+  BaseInputPhone,
+  BaseInputCurrency,
+  BaseSegmentedButtons
+};

package/src/plugins/modalPlugin.ts

@@ -30,18 +30,17 @@ export default {
                 // Очищаем контейнер
                 modalContainer.innerHTML = "";
 
+                // Обновляем data-атрибут и класс
+                if (newModals.length > 1) {
+                    modalContainer.classList.add("modal");
+                } else {
+                    modalContainer.classList.remove("modal");
+                }
+
                 // Добавляем модалки в DOM
                 newModals.forEach((modal) => {
                     modalContainer.dataset.modalId = String(modal.id);
-
-                    modalContainer.addEventListener("click", (event) => {
-                        console.log(`Closing modal with id: ${modal.id}`);
-                        console.log("this click on background", modalStore.modals);
-                        if (modalStore.modals.length === 1) modalContainer.classList.remove("modal")
-                        modalStore.closeModal(modal.id);
-                    });
                     modalContainer.setAttribute("name", modal.name);
-                    modalContainer.classList.add("modal");
 
                     const modalApp = createApp({
                         render() {
@@ -49,17 +48,31 @@ export default {
                                 options: modal.options,
                                 name: modal.name,
                                 onClose: () => {
-                                    modalContainer.classList.remove("modal");
                                     modalStore.closeModal(modal.id);
                                 },
                             });
                         },
                     });
+
                     modalApp.mount(modalContainer);
                 });
             },
             {deep: true}
         );
+        // ✅ Добавляем ОДИН обработчик клика по фону
+        modalContainer.addEventListener("click", (event) => {
+            console.log("click on background", modalStore.modals.length);
+
+            if (modalStore.modals.length > 0) {
+                const lastModal = modalStore.modals[modalStore.modals.length - 1];
+                modalStore.closeModal(lastModal.id);
+
+                // Удаляем класс, если это была последняя модалка
+                if (modalStore.modals.length <= 1) {
+                    modalContainer.classList.remove("modal");
+                }
+            }
+        });
     },
 };
 

package/src/shims-context.d.ts

@@ -0,0 +1,19 @@
+declare module "*.svg?sprite" {
+  const content: string;
+  export default content;
+}
+
+declare function require(context: string): {
+  keys(): string[];
+  (id: string): any;
+};
+declare namespace require {
+  function context(
+    directory: string,
+    useSubdirectories?: boolean,
+    regExp?: RegExp
+  ): {
+    keys(): string[];
+    (id: string): any;
+  };
+}

package/src/styles/index.scss

@@ -1,3 +1,4 @@
 body {
-  font-family: Arial, sans-serif;
+  font-family: 'Roboto Condensed', 'Helvetica Neue', sans-serif;
+  font-size: 100%;
 }

package/src/styles/root.scss

@@ -0,0 +1,167 @@
+:root {
+    /* Primary colors */
+    --primary-blue-deep: #0085BE;
+    --primary-blue: #0096D7;
+    --primary-blue-900: #1AA0DB;
+    --primary-blue-800: #33ABDF;
+    --primary-blue-700: #4DB6E3;
+    --primary-blue-600: #66C0E7;
+    --primary-blue-500: #80CAEB;
+    --primary-blue-400: #99D5EF;
+    --primary-blue-300: #B3DAEC;
+    --primary-blue-200: #CCEAF7;
+    --primary-blue-100: #E6F5FB;
+    --primary-blue-50: #F2FAFD;
+
+    /* Black & Grayscale */
+    --primary-black: #090E17;
+    --primary-black-900: #101828;
+    --primary-black-800: #1D2939;
+    --primary-black-700: #344054;
+    --primary-black-600: #475467;
+    --primary-black-500: #667085;
+    --primary-black-400: #98A2B3;
+    --primary-black-300: #D0D5DD;
+    --primary-black-200: #E4E7EC;
+    --primary-black-100: #F2F4F7;
+    --primary-black-50: #F9FAFB;
+    --primary-black-white: #FFFFFF;
+
+    /* Secondary colors */
+    --error-red-deep: #D92D20;
+    --error-red: #F04438;
+    --error-red-light-01: #F97066;
+    --error-red-light-02: #FDA19B;
+    --error-red-light-03: #FECDC9;
+    --error-red-light-04: #FEE4E2;
+    --error-red-light-05: #FEF3F2;
+
+    /* Warning colors */
+    --warning-orange-deep: #EE7A00;
+    --warning-orange: #FC9700;
+    --warning-orange-light-01: #FDB022;
+    --warning-orange-light-02: #FEC84B;
+    --warning-orange-light-03: #FEDF89;
+    --warning-orange-light-04: #FEEFC6;
+    --warning-orange-light-05: #FFFAEB;
+
+    /* Success colors */
+    --success-green-deep: #039855;
+    --success-green: #12B76A;
+    --success-green-light-01: #32D583;
+    --success-green-light-02: #6CE9A6;
+    --success-green-light-03: #A6F4C5;
+    --success-green-light-04: #D1FADF;
+    --success-green-light-05: #ECFDF3;
+
+    /* Primary text colors */
+    --primary-text-primary: #090E17;
+    --primary-text-secondary: #344054;
+    --primary-text-tertiary: #667085;
+    --primary-text-quaternary: #98A2B3;
+    --primary-text-disabled-default: #D0D5DD;
+    --primary-text-on-color: #FFFFFF;
+    --primary-text-on-color-disabled: rgb(255 255 255 / 60%);
+
+    /* Secondary text colors */
+    --secondary-text-link-default-focus: #0096D7;
+    --secondary-text-link-hover: #4DB6E3;
+    --secondary-text-link-pressed: #0085BE;
+    --secondary-text-link-disabled: #98A2B3;
+    --secondary-text-gray-link-default-focus: #090E17;
+    --secondary-text-gray-link-hover: #667085;
+    --secondary-text-gray-link-pressed: #344054;
+    --secondary-text-gray-link-disabled: #98A2B3;
+    --secondary-text-positive: #12B76A;
+    --secondary-text-negative: #F04438;
+
+    /* Background colors */
+    --bg-darken: #F2F4F7;
+    --bg-light: #FFFFFF;
+
+    /* Effects colors */
+    --effects-primary-focus: #CCEAF7;
+    --effects-gray-focus: #E4E7EC;
+    --effects-error-focus: #FEE4E2;
+    --effects-drop-shadows-100: #101828;
+    --effects-drop-shadows-200: #101828;
+    --effects-drop-shadows-300: #101828;
+    --effects-toggles-shadows: #101828;
+    --effects-drop-shadows-s: rgb(128 128 128 / 85%) blur(10px);
+    --effects-drop-shadows-m: rgba(128 128 128 / 80%) blur(20px);
+    --effects-drop-shadows-l: rgba(128 128 128 / 75%) blur(30px);
+
+
+    // Typography variables
+    --font-size-h1: 48px;
+    --typography-h1-bold: 700 48px/60px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h1-medium: 500 48px/60px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h1-regular: 400 48px/60px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h1-semibold: 600 48px/60px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --font-size-h2: 36px;
+    --typography-h2-bold: 700 36px/48px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h2-medium: 500 36px/48px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h2-regular: 400 36px/48px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h2-semibold: 600 36px/48px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --font-size-h3: 30px;
+    --typography-h3-bold: 700 30px/38px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h3-medium: 500 30px/38px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h3-regular: 400 30px/38px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h3-semibold: 600 30px/38px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --font-size-h4: 24px;
+    --typography-h4-bold: 700 24px/32px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h4-medium: 500 24px/32px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h4-regular: 400 24px/32px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-h4-semibold: 600 24px/32px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --font-size-extra-large: 20px;
+    --font-size-large: 18px;
+    --font-size-medium: 16px;
+    --font-size-small: 14px;
+    --font-size-extra-small: 12px;
+    --typography-text-xl-bold: 700 20px/30px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-xl-medium: 500 20px/30px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-xl-regular: 400 20px/30px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-xl-semibold: 600 20px/30px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-l-bold: 700 18px/28px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-l-medium: 500 18px/28px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-l-regular: 400 18px/28px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-l-semibold: 600 18px/28px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-m-bold: 700 16px/24px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-m-medium: 500 16px/24px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-m-regular: 400 16px/24px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-m-semibold: 600 16px/24px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-s-bold: 700 14px/20px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-s-medium: 500 14px/20px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-s-regular: 400 14px/20px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-s-semibold: 600 14px/20px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-xs-bold: 700 12px/18px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-xs-medium: 500 12px/18px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-xs-regular: 400 12px/18px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --typography-text-xs-semibold: 600 12px/18px "Roboto Condensed", "Helvetica Neue", sans-serif;
+    --font-weight-bold: 700;
+    --font-weight-medium: 500;
+    --font-weight-regular: 400;
+    --font-weight-semibold: 600;
+    --corner-radius-xxs: 4px;
+    --corner-radius-xs: 8px;
+    --corner-radius-s: 10px;
+    --corner-radius-m: 12px;
+    --corner-radius-l: 16px;
+    --spacing-2xs: 2px;
+    --spacing-xs: 4px;
+    --spacing-2s: 6px;
+    --spacing-s: 8px;
+    --spacing-2m: 10px;
+    --spacing-m: 12px;
+    --spacing-2l: 14px;
+    --spacing-l: 16px;
+    --spacing-xl: 24px;
+    --spacing-2xl: 32px;
+    --spacing-3xl: 40px;
+    --spacing-4xl: 48px;
+
+    /* UI variables */
+    --transition-duration: 0.25s;
+    --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --transition: var(--transition-duration) var(--transition-timing-function);
+}

package/src/styles/variables.scss

@@ -0,0 +1,160 @@
+/*  Breakpoints */
+$mobile-max-320: 'screen and (max-width: 320px)';
+$mobile-max-375: 'screen and (max-width: 370px)';
+$mobile-max-450: 'screen and (max-width: 450px)';
+$mobile-max-576: 'screen and (max-width: 576px)';
+$mobile-max-767: 'screen and (max-width: 767px)';
+$tablet-max-1366: 'screen and (max-width: 1366px)';
+$mobile: 'screen and (min-width: 375px)';
+$mobile-landscape: 'screen and (min-width: 576px)';
+$tablet: 'screen and (min-width: 768px)';
+$desktop-sm: 'screen and (min-width: 1366px)';
+$laptop: 'screen and (min-width: 992px)';
+$laptop-lg: 'screen and (min-width: 1280px)';
+$desktop: 'screen and (min-width: 1440px)';
+$desktop-lg: 'screen and (min-width: 1920px)';
+$retina: '(min-resolution: 1.5dppx), (min-resolution: 144dpi)';
+
+@mixin hover {
+    @media (hover), (width >= 0\0) {
+        &:hover {
+            @content;
+        }
+    }
+}
+
+@mixin pressed {
+    @media (any-pointer: fine), (width >= 0\0) {
+        &:active {
+            @content;
+        }
+    }
+}
+
+@mixin focused {
+    &:focus,
+    &:focus-visible {
+        @content;
+    }
+}
+
+
+@mixin reset-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+@mixin aspect-ratio($width, $height) {
+    position: relative;
+
+    &::before {
+        display: block;
+        width: 100%;
+        padding-top: calc($height / $width) * 100%;
+        content: '';
+    }
+}
+
+@mixin text-clamp($number: 3) {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $number;
+}
+
+@mixin disabled-element {
+    cursor: not-allowed;
+
+    & > * {
+        pointer-events: none;
+    }
+}
+
+@mixin is-disabled-state {
+    &.--is-disabled,
+    &:disabled,
+    &[data-disabled='true'] {
+        @include disabled-element;
+
+        @content;
+    }
+}
+
+@mixin loading-element {
+    cursor: progress;
+
+    & > * {
+        pointer-events: none;
+    }
+}
+
+@mixin reset-button {
+    background: none;
+    border: none;
+    outline: none;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+@mixin scrollbar {
+    &::-webkit-scrollbar {
+        width: 8px;
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--primary-black-200);
+        border: 6px solid transparent;
+        border-radius: 8px;
+    }
+
+    &::-webkit-scrollbar-button {
+        display: block;
+        height: 3px;
+        background-color: transparent;
+    }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.25s ease-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.right-enter-from {
+    opacity: 0;
+    transform: translate3d(-8px, 0, 0);
+}
+
+.right-leave-active {
+    opacity: 0;
+    transform: translate3d(8px, 0, 0);
+}
+
+.right-enter-active,
+.right-leave-active {
+    transition:
+        opacity 0.25s ease-out,
+        transform 0.25s ease-out;
+}
+
+.top-enter-from,
+.top-leave-to {
+    opacity: 0;
+    transform: translate3d(0, -8px, 0);
+}
+
+.top-enter-active,
+.top-leave-active {
+    transition:
+        opacity 0.25s ease,
+        transform 0.25s ease;
+}

package/src/types/breadcrumbs.d.ts

@@ -0,0 +1,13 @@
+import type { ICoreSize } from './utils';
+
+interface ICoreBreadcrumbItem {
+  label: string
+  to?: string
+  isEllipsis?: boolean
+}
+
+interface ICoreBreadcrumbs {
+  crumbs: ICoreBreadcrumbItem[]
+}
+
+export type IBaseBreadCrumbProps = ICoreBreadcrumbs & ICoreSize;

package/src/types/button.d.ts

@@ -0,0 +1,13 @@
+import type { ICoreColor, ICoreInteractive, ICoreSize, ICoreState, ICoreStyle } from './utils';
+
+export type ICoreButtonProps = ICoreSize & ICoreColor & ICoreInteractive & ICoreState & ICoreStyle;
+
+interface IOptionButtonSegment {
+    label: string;
+    value: string;
+}
+
+export type TSegmentedButtonsProps = ICoreButtonProps & {
+    options: IOptionButtonSegment[];
+    modelValue: string;
+}

package/src/types/calendar.d.ts

@@ -0,0 +1,16 @@
+import type { RangeConfig } from '@vuepic/vue-datepicker';
+import type { ICoreSize, ICoreState } from './utils';
+import type { InputProps } from './input';
+
+export type DateRange = [Date, Date] | Date | string | null;
+
+export interface IBaseCalendarProps {
+  modelValue?: DateRange
+  range?: boolean | RangeConfig | undefined
+  minDate?: Date | null
+  readonly?: boolean
+}
+
+export type TCoreCalendarProps = IBaseCalendarProps & ICoreSize;
+
+export type TCoreInputCalendarProps = InputProps & ICoreSize & ICoreState & IBaseCalendarProps;

package/src/types/checkbox-radio.d.ts

@@ -0,0 +1,15 @@
+import type { ICoreSize, ICoreState } from './utils';
+
+interface ICoreRadioProps {
+  id: string
+  modelValue: boolean;
+  name?: string
+  label?: string
+  subLabel?: string
+  labelPosition?: 'left' | 'right'
+  readonly?: boolean
+}
+
+interface ICoreCheckboxProps extends ICoreRadioProps {}
+export type IBaseCheckboxProps = ICoreCheckboxProps & ICoreSize & ICoreState;
+export type IBaseRadioProps = ICoreRadioProps & ICoreSize & ICoreState;

package/src/types/dropdown.d.ts

@@ -0,0 +1,20 @@
+import type { ICoreSize, ICoreState } from './utils';
+
+interface ICoreDropdownBaseProps {
+  modelValue: boolean
+  parentWidth?: boolean
+  preventControl?: boolean
+  autoClose?: boolean
+  transitionName?: string
+}
+
+interface ICoreOpenedListItemProps {
+  tag?: 'button'
+  icon?: string
+  postfixIcon?: string
+  externalIcon?: string
+  active?: boolean
+}
+
+export type ICoreDropdownProps = ICoreDropdownBaseProps & ICoreSize & ICoreState;
+export type IBaseOpenedListItemProps = ICoreOpenedListItemProps & ICoreSize & ICoreState;

package/src/types/icon.d.ts

@@ -0,0 +1,8 @@
+import type { ICoreSize } from './utils';
+
+
+interface IIconProps{
+    name: string;
+}
+
+export type TIconProps = IIconProps & ICoreSize;