plugin-ui-for-kzt 0.0.8 → 0.0.10

package/README.md

@@ -73,15 +73,20 @@ Follow these steps to update and publish a new version of the plugin:
 
 Update the `version` field in your `package.json` file according to [Semantic Versioning](https://semver.org/).
 
-### 2. Commit and Push to GitLab
+### 2. Clean Previous Builds
 
 ```bash
-git add .
-git commit -m "chore: bump version to x.x.x"
-git push
+rm -rf dist
+```
+
+### 3. Clean Previous Builds
+
+```bash
+npm run build
 ```
+check to correct build version
 
-### 3. Log in to npm
+### 4. Log in to npm
 
 ```bash
 npm login
@@ -89,25 +94,32 @@ npm login
 
 > 💡 Use the **npm credentials** stored in your GitLab vault or settings.
 
-### 4. Publish the Package
+### 5. Publish the Package
 
 ```bash
 npm publish --access public
 ```
 
-### 5. (Optional) Clear npm Cache
+### 6. Commit and Push to GitLab
+
+```bash
+git add .
+git commit -m "chore: bump version to x.x.x"
+git push
+```
+### 7. (Optional) Clear npm Cache
 
 ```bash
 npm cache clean --force
 ```
 
-### 6. Update the Plugin in Your Project
+### 7. Update the Plugin in Your Project
 
 ```bash
 npm install plugin-ui-for-kzt@latest --force
 ```
 
-### 7. Restart Your Quasar Project
+### 8. Restart Your Quasar Project
 
 ```bash
 quasar clean

package/example/App.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="demo-page">
+    <h1>Plugin UI KZT - Компоненты</h1>
+    <p>Ниже представлены все компоненты библиотеки с примерами их использования.</p>
+  
+  <section>
+  <h2>BaseInputPhone.vue</h2>
+  <p>Компонент для отображения полей ввода телефонных номеров.</p>
+  <p>Пример использования:</p>
+  <base-input-phone 
+    id="phone" 
+    v-model="phoneModel" 
+    size="large" 
+    label="Phone Number" 
+    placeholder="Enter phone number"
+    error="Invalid phone number"
+    hint="Please enter a valid phone number"
+    :tooltip-options="tooltipOptions"
+  />
+  </section>
+
+  <section>
+  <h2>BaseSegmentedButtons.vue</h2>
+  <p>Компонент для отображения сегментированных кнопок.</p>
+  <p>Пример использования:</p>
+  <base-segmented-buttons 
+    id="segmented-buttons" 
+    v-model="selectedOptionButton" 
+    :options="[ 
+      { value: '1', label: 'Option 1' }, 
+      { value: '2', label: 'Option 2' }, 
+      { value: '3', label: 'Option 3' } 
+    ]" 
+    size="large" 
+  />
+  </section>
+
+  <section>
+  <h2>BaseInputCurrency.vue</h2>
+  <p>Компонент для отображения полей ввода валюты.</p>
+  <p>Пример использования:</p>
+  <base-input-currency 
+    id="currency" 
+    v-model="currencyModel" 
+    size="large" 
+    label="Currency Amount" 
+    placeholder="0.00"
+    error="Invalid currency amount"
+    hint="Please enter a valid currency amount"
+    :tooltip-options="tooltipOptions"
+  />
+  </section>
+
+  <section>
+  <h2>BaseIcon.vue</h2>
+  <p>Компонент для отображения иконок.</p>
+  <p>Пример использования:</p>
+  <base-icon name="loader" size="small" />
+  <base-icon name="email-sms" size="medium" />
+  <base-icon name="calendar" size="small" />
+  </section>
+
+  <section>
+  <h2>BaseSiteInput.vue</h2>
+  <base-site-input 
+    v-model="siteModel" 
+    size="small" 
+    label="Site" 
+    hint="Please enter site"
+    validation-text="validationText"
+  />
+  </section>
+
+  <section>
+  <h2>BaseBreadCrumbs.vue</h2>
+  <p>Компонент для отображения хлебных крошек.</p>
+  <p>Пример использования:</p>
+  <base-bread-crumbs :crumbs="[
+    { label: 'Home', to: '/' },
+    { label: 'Products', to: '/products' },
+    { label: 'Electronics', to: '/electronics' },
+    { label: 'Laptops', to: '/laptops' },
+    { label: 'Gaming Laptops', to: '/laptops/gaming' },
+  ]" />
+  </section>
+
+  <section>
+  <h2>BaseLoader.vue</h2>
+  <p>Компонент для отображения индикатора загрузки.</p>
+  <p>Пример использования:</p>
+  <base-loader />
+  </section>
+
+  <section>
+  <h2>BaseButton.vue</h2>
+  <p>Компонент для отображения кнопок.</p>
+  <p>Пример использования:</p>
+  <base-button>Click Me</base-button>
+  </section>
+
+  <section>
+  <h2>BaseCheckbox.vue</h2>
+  <p>Компонент для отображения чекбоксов.</p>
+  <p>Пример использования:</p>
+  <base-checkbox id="check" v-model="checkboxModel" label="Accept Terms" />
+  </section>
+
+  <section>
+  <h2>BaseRadio.vue</h2>
+  <p>Компонент для отображения радиокнопок.</p>
+  <p>Пример использования:</p>
+  <base-radio id="radio1" v-model="radioModel" label="Option 1" />
+  </section>
+
+  <section>
+  <h2>BaseTextarea.vue</h2>
+  <p>Компонент для отображения текстовых областей.</p>
+  <p>Пример использования:</p>
+  <base-textarea 
+  id="textarea" 
+  v-model="textAreaModel" 
+  label="Enter text here"
+  size="large"
+   />
+  </section>
+
+  <section>
+  <h2>BaseToggle.vue</h2>
+  <p>Компонент для отображения переключателей.</p>
+  <p>Пример использования:</p>
+  <base-toggle id="toggle" v-model="toggleModel" label="Enable feature" />
+  </section>
+
+  <section>
+  <h2>BaseTooltip.vue</h2>
+  <p>Компонент для отображения подсказок.</p>
+  <p>Пример использования:</p>
+  <base-tooltip 
+    title="This is a tooltip" 
+    :content="contentTooltip" 
+    position="right"
+    trigger="click"
+    theme="light"
+  >
+    <template #trigger>
+    <base-button>Hover me</base-button>
+    </template>
+  </base-tooltip>
+  </section>
+
+  <section>
+  <h2>BaseInput.vue</h2>
+  <p>Компонент для отображения текстовых полей.</p>
+  <p>Пример использования:</p>
+  <base-input id="input" v-model="inputModel" label="Enter text here" />
+  </section>
+
+  <section>
+  <h2>BaseInputEmail.vue</h2>
+  <p>Компонент для отображения полей ввода электронной почты.</p>
+  <p>Пример использования:</p>
+  <base-input-email 
+    id="email" 
+    v-model="emailModel" 
+    label="Enter email here"
+    size="medium"
+    :tooltip-options="tooltipOptions"
+    validation-text="validationText Email"
+  >
+  <template #['right-icon']>
+    <base-icon name="calendar" size="medium" />
+  </template>
+  </base-input-email>
+  </section>
+
+  <section>
+  <h2>BaseInputCalendar.vue</h2>
+  <p>Компонент для отображения полей ввода даты.</p>
+  <p>Пример использования:</p>
+  <base-input-calendar 
+    id="calendar" 
+    v-model="calendarModel" 
+    label="Select date here"
+    size="medium"
+    placeholder="Select date"
+    :min-date="new Date()"
+  />
+  </section>
+
+  <section>
+  <h2>BaseOpenedListItem.vue</h2>
+  <p>Компонент для отображения открытых элементов списка.</p>
+  <p>Пример использования:</p>
+  <base-opened-list-item 
+    id="list-item" 
+    label="List Item"
+    active
+  >
+    <template #icon>
+      <base-icon name="email-sms" />
+    </template>
+      <p>This is the content of the opened list item.</p>
+  </base-opened-list-item>
+  </section>
+
+  <section>
+  <h2>BaseDropdown.vue</h2>
+  <p>Компонент для отображения выпадающих списков.</p>
+  <p>Пример использования:</p>
+  <base-dropdown 
+    id="dropdown" 
+    v-model="dropdownModel" 
+    label="Select an option"
+    auto-close
+    :options="[
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ]"
+  >
+    <template #top>
+      <base-button>Open Dropdown</base-button>
+    </template>
+    <template #dropdown>
+      <base-opened-list-item v-for="item in itemsDropdown" :key="item.text">
+        <template #icon>
+          <base-icon :name="item.name" size="medium" />
+        </template>
+          {{item.text}}
+      </base-opened-list-item>
+    </template>
+  </base-dropdown>
+  </section>
+
+  <section>
+  <h2>BaseSelect.vue</h2>
+  <p>Компонент для отображения выпадающих списков с выбором.</p>
+  <p>Пример использования:</p>
+  <base-select
+      id="select"
+      v-model="selectedOption"
+      :options="[
+        { id: 1, name: 'Option 1', value: 'option1', label: 'Option 1' },
+        { id: 2, name: 'Option 2', value: 'option2', label: 'Option 2' },
+        { id: 3, name: 'Option 3', value: 'option3', label: 'Option 3', disabled: true },
+        { id: 4, name: 'Option 4', value: 'option4', label: 'Option 4' },
+        { id: 5, name: 'Option 5', value: 'option5', label: 'Option 5' },
+        { id: 6, name: 'Option 6', value: 'option6', label: 'Option 6' },
+        { id: 7, name: 'Option 7', value: 'option7', label: 'Option 7' },
+        { id: 8, name: 'Option 8', value: 'option8', label: 'Option 8' },
+        { id: 9, name: 'Option 9', value: 'option9', label: 'Option 9' },
+        { id: 10, name: 'Option 10', value: 'option10', label: 'Option 10' },
+        { id: 11, name: 'Option 11', value: 'option11', label: 'Option 11' },
+        { id: 12, name: 'Option 12', value: 'option12', label: 'Option 12' },
+        { id: 13, name: 'Option 13', value: 'option13', label: 'Option 13' },
+        { id: 14, name: 'Option 14', value: 'option14', label: 'Option 14' },
+        { id: 15, name: 'Option 15', value: 'option15', label: 'Option 15' },
+      ]"
+      label="Выберите опцию"
+      hint="Подсказка"
+      error=""
+      placeholder="Выберите текст"
+      size="small"
+    >
+    <template #headerIcon>
+      <base-icon
+          name="email"
+          size="small"
+      />
+    </template>
+    <template #iconItem>
+     <base-icon
+          name="email"
+          size="small"
+      />
+    </template>
+    </base-select>
+  </section>
+
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const checkboxModel = ref(false);
+const radioModel = ref(false);
+const textAreaModel = ref('');
+const toggleModel = ref(false);
+const inputModel = ref('');
+const emailModel = ref('');
+const selectedOption = ref('option1');
+const siteModel = ref('');
+const phoneModel = ref('');
+const currencyModel = ref('');
+const selectedOptionButton = ref('1');
+const tooltipOptions = ref({
+  title: 'Tooltip Title',
+  content: 'This is a tooltip content.',
+  position: 'top',
+  trigger: 'hover',
+  theme: 'light',
+});
+
+const itemsDropdown = ref([
+  { name: 'email-sms', text: 'Clipboard Item' },
+  { name: 'help', text: 'Clipboard Item 2' },
+  { name: 'loader', text: 'Clipboard Item 32' },
+  { name: 'loader', text: 'Clipboard Item 33' },
+  { name: 'loader', text: 'Clipboard Item 34' },
+  { name: 'loader', text: 'Clipboard Item 35' },
+  { name: 'loader', text: 'Clipboard Item 31' },
+  { name: 'loader', text: 'Clipboard Item 323' },
+  { name: 'loader', text: 'Clipboard Item 351' },
+  { name: 'loader', text: 'Clipboard Item 3124' },
+  { name: 'loader', text: 'Clipboard Item 3512' },
+  { name: 'loader', text: 'Clipboard Item 3521' },
+  { name: 'loader', text: 'Clipboard Item 3512' },
+  { name: 'loader', text: 'Clipboard Item 3512' },
+]);
+const calendarModel = ref('');
+const dropdownModel = ref(false);
+const contentTooltip  = ref('<p>Test lorem ipsum asd asdd dasda text lorem ipsum dolor sit amet.</p>');
+</script>
+
+<style lang="scss" scoped>
+.demo-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+
+  h1 {
+    color: #2c3e50;
+    margin-bottom: 10px;
+  }
+
+  h2 {
+    color: #34495e;
+    margin-top: 40px;
+    margin-bottom: 20px;
+  }
+
+  section {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+  }
+
+  pre {
+    background: #f4f4f4;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+  }
+}
+</style>

package/example/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Plugin UI KZT - Demo</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/index.js"></script>
+</body>
+</html>

package/example/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import PluginUIKzt from "../src/index";
+
+const app = createApp(App);
+
+app.use(PluginUIKzt);
+app.mount("#app");

package/example/shims-vue.d.ts

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

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "webpack --config webpack.config.js",
+    "dev": "webpack serve --config webpack.config.js --mode development",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -26,21 +27,30 @@
   },
   "homepage": "https://git.itte.kz/development-center/components/plugin-ui.git#readme",
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0"
   },
   "devDependencies": {
+    "@vue/compiler-sfc": "^3.5.12",
     "css-loader": "^7.1.2",
     "sass": "^1.83.4",
     "sass-loader": "^12.6.0",
+    "style-loader": "^4.0.0",
+    "svg-sprite-loader": "^6.0.11",
+    "svgo": "^3.3.2",
+    "svgo-loader": "^4.0.0",
     "ts-loader": "^9.0.0",
-    "vue-loader": "^16.8.3",
-    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.7.16",
+    "vue-loader": "^17.0.0",
     "webpack": "^5.97.1",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^5.2.1"
   },
   "dependencies": {
+    "@vuepic/vue-datepicker": "^11.0.2",
+    "@vueuse/core": "^13.1.0",
+    "maska": "^3.1.1",
     "pinia": "^2.3.1",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-virtual-scroller": "^2.0.0-beta.8"
   }
 }

package/src/assets/icons/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.6 7.45831L11.1667 12.8916C10.525 13.5333 9.47503 13.5333 8.83336 12.8916L3.40002 7.45831" stroke="#667085" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/calendar.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2V5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 2V5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.5 9.08984H20.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6947 13.7002H15.7037" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6947 16.7002H15.7037" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9955 13.7002H12.0045" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9955 16.7002H12.0045" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.29431 13.7002H8.30329" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.29431 16.7002H8.30329" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/checkbox-circle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 0C4.49 0 0 4.49 0 10C0 15.51 4.49 20 10 20C15.51 20 20 15.51 20 10C20 4.49 15.51 0 10 0ZM14.78 7.7L9.11 13.37C8.97 13.51 8.78 13.59 8.58 13.59C8.38 13.59 8.19 13.51 8.05 13.37L5.22 10.54C4.93 10.25 4.93 9.77 5.22 9.48C5.51 9.19 5.99 9.19 6.28 9.48L8.58 11.78L13.72 6.64C14.01 6.35 14.49 6.35 14.78 6.64C15.07 6.93 15.07 7.4 14.78 7.7Z" fill="#0096D7"/>
+</svg>

package/src/assets/icons/checkbox.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.4668 1.40001L6.20011 11.6667L1.53345 7.00001" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/email-sms.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.6665 27.3334H9.33317C5.33317 27.3334 2.6665 25.3334 2.6665 20.6667V11.3334C2.6665 6.66675 5.33317 4.66675 9.33317 4.66675H22.6665C26.6665 4.66675 29.3332 6.66675 29.3332 11.3334V20.6667C29.3332 25.3334 26.6665 27.3334 22.6665 27.3334Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.6668 12L18.4935 15.3333C17.1202 16.4267 14.8668 16.4267 13.4935 15.3333L9.3335 12" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/help.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52152 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13M12 17H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/kg.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_333_21577)">
+<path d="M-6.10352e-05 3C-6.10352e-05 1.34315 1.30238 0 2.90903 0H29.0908C30.6975 0 31.9999 1.34315 31.9999 3V21C31.9999 22.6569 30.6975 24 29.0908 24H2.90903C1.30238 24 -6.10352e-05 22.6569 -6.10352e-05 21V3Z" fill="#D80027"/>
+<path d="M23.8267 12.0001L20.6295 13.504L22.3321 16.6007L18.86 15.9364L18.4203 19.4436L16.0018 16.8643L13.5836 19.4436L13.1436 15.9364L9.67189 16.6006L11.3744 13.5039L8.17708 12.0001L11.3744 10.4963L9.67189 7.39958L13.1435 8.06395L13.5837 4.55664L16.0018 7.13608L18.4204 4.55664L18.86 8.06395L22.3322 7.39958L20.6296 10.4965L23.8267 12.0001Z" fill="#FFDA44"/>
+<path d="M15.9999 16.869C18.6893 16.869 20.8695 14.6888 20.8695 11.9994C20.8695 9.31006 18.6893 7.12988 15.9999 7.12988C13.3105 7.12988 11.1304 9.31006 11.1304 11.9994C11.1304 14.6888 13.3105 16.869 15.9999 16.869Z" fill="#D80027"/>
+<path d="M13.5662 12C13.4489 12 13.3331 12.006 13.2188 12.0174C13.2229 12.6918 13.4669 13.3091 13.8699 13.7887C14.0849 13.2101 14.4059 12.6826 14.8108 12.2311C14.4241 12.0824 14.0047 12 13.5662 12Z" fill="#FFDA44"/>
+<path d="M15.0625 14.6204C15.355 14.7249 15.6699 14.7823 15.9984 14.7823C16.3269 14.7823 16.6419 14.7249 16.9344 14.6204C16.7749 13.9947 16.4458 13.4361 15.9984 12.9971C15.5511 13.436 15.2219 13.9947 15.0625 14.6204Z" fill="#FFDA44"/>
+<path d="M18.4131 10.6095C17.932 9.7779 17.0334 9.21777 16.0034 9.21777C14.9734 9.21777 14.0749 9.77784 13.5938 10.6095C14.4709 10.614 15.2934 10.8525 16.0034 11.2643C16.7135 10.8525 17.5359 10.614 18.4131 10.6095Z" fill="#FFDA44"/>
+<path d="M17.1927 12.2311C17.5975 12.6825 17.9185 13.2101 18.1335 13.7887C18.5365 13.3091 18.7805 12.6918 18.7847 12.0174C18.6703 12.0059 18.5545 12 18.4373 12C17.9989 11.9999 17.5795 12.0823 17.1927 12.2311Z" fill="#FFDA44"/>
+</g>
+<defs>
+<clipPath id="clip0_333_21577">
+<rect width="32" height="24" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>