plugin-ui-for-kzt 0.0.2

package/README.md

@@ -0,0 +1,83 @@
+# plugin-ui-kzt
+
+A custom UI plugin for Vue 3 + TypeScript projects, with Quasar integration support.
+
+---
+
+## Installation
+
+### Prerequisites
+- Node.js version **23.x** or higher
+
+### Install the Plugin
+```bash
+npm install plugin-ui-for-kzt
+```
+
+---
+
+## Quasar Project Setup
+
+If you are using **Quasar**, follow these additional steps:
+
+1. **Create a Boot File:**
+    - Create a new file named `plugin-ui-for-kzt.ts` inside the `boot/` folder.
+
+2. **Register the Boot File:**
+    - In `quasar.config.js`, add `'plugin-ui-for-kzt'` to the `boot` array:
+   ```js
+   boot: [
+     'plugin-ui-kzt',
+     // other boot files
+   ]
+   ```
+
+3. **Import in `client-entry.js`:**
+    - Import your boot file inside the `Promise.all` method:
+   ```js
+   import('boot/plugin-ui-for-kzt')
+   ```
+
+---
+
+## Publishing the Plugin to npm
+
+Follow these steps to update and publish the plugin:
+
+1. **Update the Version:**
+    - Before publishing, **update the `version`** field in `package.json` (according to semantic versioning).
+
+2. **Push Changes to GitLab:**
+    - Commit and push all your changes to your GitLab repository.
+
+3. **Login to npm:**
+   ```bash
+   npm login
+   ```
+    - Use the **npm credentials** stored in GitLab.
+
+4. **Publish the Plugin:**
+   ```bash
+   npm publish --access public
+   ```
+
+5. **Clear Cache (Recommended):**
+   ```bash
+   npm cache clean --force
+   ```
+
+6. **Update Plugin in Your Project:**
+   ```bash
+   npm install plugin-ui-for-kzt@latest --force
+   ```
+
+7. **Clean and Run Your Quasar Project:**
+   ```bash
+   quasar clean
+   quasar dev
+   ```
+
+---
+
+✅ Done! Now your updated plugin will be installed and ready to use!
+

package/dist/index.js

@@ -0,0 +1,31 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["ModalPluginNikitas"] = factory();
+	else
+		root["ModalPluginNikitas"] = factory();
+})(this, () => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ([
+/* 0 */
+/***/ (() => {
+
+throw new Error("Module build failed (from ./node_modules/ts-loader/index.js):\nError: TypeScript emitted no output for /Users/agusha/Desktop/work/kaztel/modal-plugin-nikitas/src/index.ts.\n    at makeSourceMapAndFinish (/Users/agusha/Desktop/work/kaztel/modal-plugin-nikitas/node_modules/ts-loader/dist/index.js:55:18)\n    at successLoader (/Users/agusha/Desktop/work/kaztel/modal-plugin-nikitas/node_modules/ts-loader/dist/index.js:42:5)\n    at Object.loader (/Users/agusha/Desktop/work/kaztel/modal-plugin-nikitas/node_modules/ts-loader/dist/index.js:23:5)");
+
+/***/ })
+/******/ 	]);
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module doesn't tell about it's top-level declarations so it can't be inlined
+/******/ 	var __webpack_exports__ = {};
+/******/ 	__webpack_modules__[0]();
+/******/ 	
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/dist/types/components/Toaster/timer.d.ts

@@ -0,0 +1,12 @@
+declare class Timer {
+    private timerId;
+    private start;
+    private remaining;
+    private callback;
+    constructor(callback: () => void, delay: number);
+    pause(): void;
+    resume(): void;
+    clear(): void;
+    reset(delay: number): void;
+}
+export default Timer;

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+import Modal from "./components/Modal/Modal.vue";
+import DataTable from "./components/DataTable/DataTable.vue";
+import Tooltip from "./components/Tooltip/Tooltip.vue";
+import Spinner from "./components/Spinner/Spinner.vue";
+import { useModal } from "./plugins/modalPlugin";
+import { useToast } from "./plugins/toasterPlugin";
+declare const _default: {
+    install(app: any): void;
+};
+export default _default;
+export { Modal, DataTable, Tooltip, Spinner, useModal, useToast };

package/dist/types/plugins/modalPlugin.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    install(app: any): void;
+};
+export default _default;
+export declare function useModal(): {
+    open: (name: string, options?: Record<string, any>) => void;
+    close: (id: number) => void;
+} | undefined;
+declare module "@vue/runtime-core" {
+    interface ComponentCustomProperties {
+        $modal: {
+            open: (name: string, options?: Record<string, any>) => void;
+            close: (id: number) => void;
+        };
+    }
+}

package/dist/types/plugins/toasterPlugin.d.ts

@@ -0,0 +1,26 @@
+interface ToastOptions {
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    duration?: number;
+    dismissible?: boolean;
+    pauseOnHover?: boolean;
+}
+declare const _default: {
+    install(app: any): void;
+};
+export default _default;
+export declare function useToast(): {
+    success: (message: string, options?: ToastOptions) => void;
+    error: (message: string, options?: ToastOptions) => void;
+    info: (message: string, options?: ToastOptions) => void;
+    warning: (message: string, options?: ToastOptions) => void;
+} | undefined;
+declare module "@vue/runtime-core" {
+    interface ComponentCustomProperties {
+        $toast: {
+            success: (message: string, options?: ToastOptions) => void;
+            error: (message: string, options?: ToastOptions) => void;
+            info: (message: string, options?: ToastOptions) => void;
+            warning: (message: string, options?: ToastOptions) => void;
+        };
+    }
+}

package/dist/types/store/modal.d.ts

@@ -0,0 +1,11 @@
+import { IModalState } from "../types";
+export declare const useModalStore: import("pinia").StoreDefinition<"modal", {
+    modals: Array<{
+        id: number;
+        name: string;
+        options: IModalState;
+    }>;
+}, {}, {
+    openModal(name: string, options: IModalState): void;
+    closeModal(id: number): void;
+}>;

package/dist/types/types/index.d.ts

@@ -0,0 +1,4 @@
+export interface IModalState {
+    title: string;
+    message: string;
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "plugin-ui-for-kzt",
+  "version": "0.0.2",
+  "description": "plugin-ui for kazaktelekom",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://git.itte.kz/development-center/components/plugin-ui.git"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "plugin",
+    "modal",
+    "plugin-ui"
+  ],
+  "author": "nikitos.nik.523@gmail.com",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://git.itte.kz/development-center/components/plugin-ui.git/issues"
+  },
+  "homepage": "https://git.itte.kz/development-center/components/plugin-ui.git#readme",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "css-loader": "^7.1.2",
+    "sass": "^1.83.4",
+    "sass-loader": "^12.6.0",
+    "ts-loader": "^9.0.0",
+    "vue-loader": "^16.8.3",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.7.16",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^4.10.0"
+  },
+  "dependencies": {
+    "pinia": "^2.3.1",
+    "vue": "^3.0.0"
+  }
+}

package/public/close-icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7592 1.51746C16.0803 1.17049 16.0803 0.607198 15.7592 0.260228C15.3311 -0.0867426 14.796 -0.0867426 14.4749 0.260228L7.94649 6.74237L1.52508 0.260228C1.09699 -0.0867426 0.561873 -0.0867426 0.240803 0.260228C-0.0802676 0.607198 -0.0802676 1.17049 0.240803 1.51746L6.76923 7.9996L0.240803 14.4828C-0.0802676 14.8298 -0.0802676 15.392 0.240803 15.739C0.561873 16.087 1.09699 16.087 1.52508 15.739L7.94649 9.25683L14.4749 15.739C14.796 16.087 15.3311 16.087 15.7592 15.739C16.0803 15.392 16.0803 14.8298 15.7592 14.4828L9.23077 7.9996L15.7592 1.51746Z" fill="white"/>
+</svg>

package/public/error-icon.svg

@@ -0,0 +1,5 @@
+<svg width="45" height="40" viewBox="0 0 45 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.8186 36.4103L23.3834 2.5641C22.9908 1.88034 22.0092 1.88034 21.6166 2.5641L2.1814 36.4103C1.78877 37.094 2.27955 37.9487 3.06481 37.9487H41.9352C42.7205 37.9487 43.2112 37.094 42.8186 36.4103ZM25.1503 1.53846C23.9724 -0.512819 21.0276 -0.512822 19.8498 1.53846L0.414562 35.3846C-0.763329 37.4359 0.709031 40 3.06481 40H41.9352C44.291 40 45.7633 37.4359 44.5854 35.3846L25.1503 1.53846Z" fill="white"/>
+<rect x="21.6213" y="10.2565" width="2.04017" height="17.4359" rx="1.02008" fill="white"/>
+<ellipse cx="22.712" cy="32.3076" rx="1.53012" ry="1.53846" fill="white"/>
+</svg>

package/public/success-icon.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="22.5" stroke="white" stroke-width="3"/>
+<path d="M35.04 14.4L19.86 33.6L12.96 24.8728" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}

package/src/components/AboutPage/AboutPage.vue

@@ -0,0 +1 @@
+<template> <div>je;;p</div></template>

package/src/components/DataTable/DataTable.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="table-container">
+    <div class="search-container">
+      <input
+          type="text"
+          placeholder="Поиск..."
+          :value="searchQuery"
+          @input="handleSearchInput"
+      />
+      <p v-if="!searchExists">Ничего не найдено</p>
+    </div>
+
+    <table v-if="searchExists">
+      <thead>
+      <tr>
+        <th v-for="column in props.columns" :key="column.key">
+          {{ column.label }}
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(row, rowIndex) in paginatedRows" :key="rowIndex">
+        <td v-for="column in props.columns" :key="column.key">
+          {{ row[column.key] }}
+        </td>
+      </tr>
+      </tbody>
+    </table>
+
+    <div v-if="searchExists" class="pagination">
+      <button @click="goToPreviousPage" :disabled="currentPage === 1">
+        Предыдущая
+      </button>
+      <span>Страница {{ currentPage }} из {{ totalPages }}</span>
+      <button @click="goToNextPage" :disabled="currentPage === totalPages">
+        Следующая
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed} from 'vue';
+
+interface TableColumn {
+  key: string;
+  label: string;
+}
+
+interface TableProps {
+  columns: TableColumn[];
+  rows: Record<string, any>[];
+  pageSize?: number;
+}
+
+const props = defineProps<TableProps>();
+
+// states
+const searchQuery = ref<string>('');
+const currentPage = ref<number>(1);
+const rowsPerPage = ref<number>(props.pageSize ?? 5);
+
+// computed properties
+const filteredRows = computed(() => {
+  if (!searchQuery.value) {
+    return props.rows;
+  }
+  const query = searchQuery.value.toLowerCase();
+  return props.rows.filter((row: string | any) =>
+    Object.values(row).some((val) =>
+      String(val).toLowerCase().includes(query)
+    )
+  );
+});
+const searchExists = computed(() => filteredRows.value.length > 0);
+const totalPages = computed(() =>
+    Math.ceil(filteredRows.value.length / rowsPerPage.value)
+);
+const startIndex = computed(() => (currentPage.value - 1) * rowsPerPage.value);
+const endIndex = computed(() => currentPage.value * rowsPerPage.value);
+const paginatedRows = computed(() =>
+    filteredRows.value.slice(startIndex.value, endIndex.value)
+);
+
+// functions
+const goToPreviousPage = (): void => {
+  if (currentPage.value > 1) {
+    currentPage.value--;
+  }
+}
+const goToNextPage = (): void => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++;
+  }
+}
+const handleSearchInput = (event: Event): void => {
+  searchQuery.value = (event.target as HTMLInputElement).value;
+  currentPage.value = 1;
+}
+</script>
+
+<style scoped lang="scss">
+.table-container {
+  max-width: 100%;
+  overflow-x: auto;
+  padding: 1rem;
+
+  .search-container {
+    margin-bottom: 1rem;
+
+    input {
+      padding: 0.5rem;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+
+      &:focus {
+        outline: none;
+        border-color: #90caf9;
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1rem;
+
+    thead {
+      background-color: #e3f2fd;
+    }
+
+    th, td {
+      padding: 0.75rem 1rem;
+      border: 1px solid #ccc;
+      text-align: left;
+    }
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    button {
+      background-color: #90caf9;
+      color: #fff;
+      border: none;
+      padding: 0.5rem 1rem;
+      margin: 0 0.25rem;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+
+      &:hover:not(:disabled) {
+        background-color: #64b5f6;
+      }
+
+      &:disabled {
+        background-color: #ccc;
+        cursor: not-allowed;
+      }
+    }
+
+    span {
+      margin: 0 0.5rem;
+    }
+  }
+}
+</style>

package/src/components/DataTable/README.md

@@ -0,0 +1,57 @@
+# Документация компонента DataTable
+
+## Обзор
+Компонент `DataTable` предназначен для отображения табличных данных с поддержкой поиска и постраничной навигации. Он позволяет передавать список колонок и строк, а также управлять размером страницы.
+
+## Свойства (Props)
+
+- `columns` (массив объектов) – список колонок, каждая из которых содержит ключ `key` (для доступа к данным) и `label` (отображаемое название).
+- `rows` (массив объектов) – массив данных, где каждый объект представляет строку таблицы.
+- `pageSize` (число, необязательно) – количество строк, отображаемых на одной странице. По умолчанию `5`.
+
+## Вычисляемые свойства (Computed)
+
+- `filteredRows` – список строк, отфильтрованный по поисковому запросу.
+- `searchExists` – определяет, есть ли в таблице совпадающие результаты поиска.
+- `totalPages` – вычисляет общее количество страниц на основе размера страницы и количества строк.
+- `startIndex` – индекс начала текущей страницы.
+- `endIndex` – индекс конца текущей страницы.
+- `paginatedRows` – список строк, отображаемых на текущей странице.
+
+## Методы
+
+### `goToPreviousPage()`
+Переходит на предыдущую страницу, если это возможно.
+
+### `goToNextPage()`
+Переходит на следующую страницу, если это возможно.
+
+### `handleSearchInput(event: Event)`
+Обновляет поисковый запрос при вводе текста в поле поиска и сбрасывает текущую страницу на первую.
+
+## Использование
+
+```vue
+<DataTable
+  :columns="[
+    { key: 'name', label: 'Имя' },
+    { key: 'age', label: 'Возраст' },
+    { key: 'email', label: 'Email' }
+  ]"
+  :rows="[
+    { name: 'Иван', age: 25, email: 'ivan@example.com' },
+    { name: 'Мария', age: 30, email: 'maria@example.com' },
+    { name: 'Алексей', age: 28, email: 'alex@example.com' }
+  ]"
+  :pageSize="2"
+/>
+```
+
+## Функциональность
+
+- Поддержка поиска по всем значениям строк.
+- Автоматическая фильтрация результатов.
+- Пагинация с кнопками "Предыдущая" и "Следующая".
+- Отображение сообщения, если совпадений не найдено.
+
+

package/src/components/Modal/Modal.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="modal-container" @click.stop>
+    <div
+      class="modal-container-header"
+      :class="{
+        'modal-container-header-show-all': showMore,
+        [getTypeModal.nameClass]: getTypeModal.nameClass !== '',
+      }"
+    >
+      <div class="modal-container-header-title">
+        <component :is="getTypeModal.img" />
+        <div>{{ options.title }}</div>
+      </div>
+      <div
+        class="modal-container-header-show-more"
+        @click="showMore = !showMore"
+      >
+        {{ showMore ? "Скрыть" : "Смотреть больше" }}
+      </div>
+    </div>
+    <CloseIcon class="modal-button-close" @click="onClose" />
+    <div v-if="showMore" class="modal-container-subtitle">
+      Описание: <br />
+      {{ options.message }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import CloseIcon from "../icons/CloseIcon.vue";
+import ErrorIcon from "../icons/ErrorIcon.vue";
+import SuccessIcon from "../icons/SuccessIcon.vue";
+import WarningIcon from "../icons/WarningIcon.vue";
+import InfoIcon from "../icons/InfoIcon.vue";
+
+interface IProps {
+  options: {
+    title: string;
+    message: string;
+  };
+  name: string;
+  onClose: () => void;
+}
+
+const props = defineProps<IProps>();
+const showMore = ref<boolean>(false);
+
+const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
+  switch (props.name) {
+    case "error":
+      return { img: ErrorIcon, nameClass: "error" };
+    case "success":
+      return { img: SuccessIcon, nameClass: "success" };
+    case "warning":
+      return { img: WarningIcon, nameClass: "warning" };
+    case "info":
+      return { img: InfoIcon, nameClass: "info" };
+    default:
+      return {
+        img: SuccessIcon,
+        nameClass: "",
+      };
+  }
+});
+</script>
+
+<style lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 9999;
+
+  &-button-close {
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+  }
+
+  &-container {
+    position: relative;
+    font-family: "Roboto Condensed", serif;
+    font-optical-sizing: auto;
+
+    background: white;
+    border-radius: 16px;
+    max-width: 540px;
+    width: 100%;
+
+    &-header {
+      padding: 20px;
+      border-radius: 12px;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 24px;
+      &-show-all {
+        border-radius: 12px 12px 0 0;
+      }
+
+      &-title {
+        color: white;
+        display: flex;
+        align-items: start;
+        gap: 20px;
+      }
+
+      &-show-more {
+        color: #f5c9c3;
+        text-align: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+
+    &-subtitle {
+      padding: 20px;
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+}
+
+.error {
+  background: #ee5542;
+}
+
+.success {
+  background: #15b853;
+}
+
+.warning {
+  background: #f4a900;
+}
+
+.warning {
+  background: #0085cf;
+}
+</style>