@soroka282/migrant.ui-kit 0.0.68 → 0.0.70

package/README.md

@@ -1,147 +1,147 @@
-# 📖 Migrant UI Kit
-
-Библиотека переиспользуемых компонентов для проектов Migrant. Построена на [Vue 3](https://vuejs.org/) с поддержкой TypeScript и scoped-стилей.
-
-## 📦 Установка и использование библиотеки
-
-```bash
-  npm install @soroka282/migrant.ui-kit
-```
-или
-```bash
-  yarn add @soroka282/migrant.ui-kit
-```
-
-### 🛠️ Использование компонентов
-
-```
-<script setup lang="ts">
-    import {
-      UIButton,
-      UIColor,
-      UIColorName,
-      UISize,
-    } from '@soroka282/migrant.ui-kit';
-</script>
-
-<template>
-  <UIButton
-    is-box-shadow
-    :size="UISize.S"
-    :color="UIColor[UIColorName.White]"
-    :bg-color="UIColor[UIColorName.PurpleMain]"
-  >
-    Кнопка
-  </UIButton>
-</template>
-```
-
-### ⚙️ TypeScript автодополнение
-
-Убедитесь, что `tsconfig.json` содержит:
-
-```json
-{
-  "compilerOptions": {
-    "moduleResolution": "bundler",
-    "paths": {
-      "@soroka282/migrant.ui-kit": ["node_modules/@soroka282/migrant.ui-kit"]
-    }
-  }
-}
-```
-
-## 💻 Разработка
-
-#### Установка зависимостей
-```bash
-    npm i
-```
-Проверить, что установился .husky и commit-msg (.husky/commit-msg) имеет:
-```
-node scripts/verify-commit.js
-```
-
-#### Запуск локального проекта:
-```bash
-  npm run dev
-```
-
-#### Запуск локального сторибука
-```bash
-    npm run storybook
-```
-
-## 🧪 Коммиты
-
-Формат коммитов:
-```
-<номер задачи>/<тип>(<scope>): <описание>
-```
-
-Если задача в трекере отсутствует:
-```
-<тип>(<scope>): <описание>
-```
-
-#### Типы коммитов:
-
-- `feat` — добавление нового функционала
-- `fix` — исправление ошибок
-- `docs` — изменение документации
-- `build` — сборка и настройка инфраструктуры (vite, tsconfig и т.п.)
-
-#### Примеры:
-
-```
-EVOLVE-1/feat(useIframeHandler): добавлен новый composable метод
-EVOLVE-2/fix(UIInput): обработка событий при потере фокуса
-EVOLVE-3/build(vite.config): релиз библиотеки
-
-feat(useIframeHandler): добавлен новый composable метод
-build(vite.config): релиз библиотеки
-```
-
-## 🛠️ Сборка библиотеки
-
-Билд библиотеки:
-```bash
-    npm run build
-```
-
-Генерация .d.ts:
-```bash
-    npm run ts
-```
-
-### Публикация пакета в npm
-
-- Поднять version в package.json 
-- Опубликовать:
-```bash
-    npm run publish:npm
-```
-
-## 📖 Storybook
-
-Сборка:
-```bash
-    npm run build:storybook
-```
-
-## 🥉 Используемые зависимости
-
-- [Vue 3](https://vuejs.org/) — основной фреймворк
-- [Pinia](https://pinia.vuejs.org/) — управление состоянием
-- [Maska](https://beholdr.github.io/maska/) — маски ввода
-- [Swiper](https://swiperjs.com/) — свайпер/карусель
-- [Vue-toastification](https://vue-toastification.maronato.dev/) — уведомления (тосты)
-
-## 🎨 Глобальные стили (optional)
-
-В `main.ts`:
-
-```ts
-import '@soroka282/migrant.ui-kit/dist/style.css';
-```
-
+# 📖 Migrant UI Kit
+
+Библиотека переиспользуемых компонентов для проектов Migrant. Построена на [Vue 3](https://vuejs.org/) с поддержкой TypeScript и scoped-стилей.
+
+## 📦 Установка и использование библиотеки
+
+```bash
+  npm install @soroka282/migrant.ui-kit
+```
+или
+```bash
+  yarn add @soroka282/migrant.ui-kit
+```
+
+### 🛠️ Использование компонентов
+
+```
+<script setup lang="ts">
+    import {
+      UIButton,
+      UIColor,
+      UIColorName,
+      UISize,
+    } from '@soroka282/migrant.ui-kit';
+</script>
+
+<template>
+  <UIButton
+    is-box-shadow
+    :size="UISize.S"
+    :color="UIColor[UIColorName.White]"
+    :bg-color="UIColor[UIColorName.PurpleMain]"
+  >
+    Кнопка
+  </UIButton>
+</template>
+```
+
+### ⚙️ TypeScript автодополнение
+
+Убедитесь, что `tsconfig.json` содержит:
+
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "paths": {
+      "@soroka282/migrant.ui-kit": ["node_modules/@soroka282/migrant.ui-kit"]
+    }
+  }
+}
+```
+
+## 💻 Разработка
+
+#### Установка зависимостей
+```bash
+    npm i
+```
+Проверить, что установился .husky и commit-msg (.husky/commit-msg) имеет:
+```
+node scripts/verify-commit.js
+```
+
+#### Запуск локального проекта:
+```bash
+  npm run dev
+```
+
+#### Запуск локального сторибука
+```bash
+    npm run storybook
+```
+
+## 🧪 Коммиты
+
+Формат коммитов:
+```
+<номер задачи>/<тип>(<scope>): <описание>
+```
+
+Если задача в трекере отсутствует:
+```
+<тип>(<scope>): <описание>
+```
+
+#### Типы коммитов:
+
+- `feat` — добавление нового функционала
+- `fix` — исправление ошибок
+- `docs` — изменение документации
+- `build` — сборка и настройка инфраструктуры (vite, tsconfig и т.п.)
+
+#### Примеры:
+
+```
+EVOLVE-1/feat(useIframeHandler): добавлен новый composable метод
+EVOLVE-2/fix(UIInput): обработка событий при потере фокуса
+EVOLVE-3/build(vite.config): релиз библиотеки
+
+feat(useIframeHandler): добавлен новый composable метод
+build(vite.config): релиз библиотеки
+```
+
+## 🛠️ Сборка библиотеки
+
+Билд библиотеки:
+```bash
+    npm run build
+```
+
+Генерация .d.ts:
+```bash
+    npm run ts
+```
+
+### Публикация пакета в npm
+
+- Поднять version в package.json 
+- Опубликовать:
+```bash
+    npm run publish:npm
+```
+
+## 📖 Storybook
+
+Сборка:
+```bash
+    npm run build:storybook
+```
+
+## 🥉 Используемые зависимости
+
+- [Vue 3](https://vuejs.org/) — основной фреймворк
+- [Pinia](https://pinia.vuejs.org/) — управление состоянием
+- [Maska](https://beholdr.github.io/maska/) — маски ввода
+- [Swiper](https://swiperjs.com/) — свайпер/карусель
+- [Vue-toastification](https://vue-toastification.maronato.dev/) — уведомления (тосты)
+
+## 🎨 Глобальные стили (optional)
+
+В `main.ts`:
+
+```ts
+import '@soroka282/migrant.ui-kit/dist/style.css';
+```
+

package/dist/List-DkipCs8x.js

@@ -0,0 +1,94 @@
+import { defineComponent as b, ref as p, computed as w, createElementBlock as s, openBlock as o, createCommentVNode as a, createElementVNode as d, createVNode as I, renderSlot as V, createBlock as B, resolveDynamicComponent as L, Fragment as g, renderList as _, normalizeStyle as m, normalizeClass as N, createTextVNode as F, toDisplayString as f } from "vue";
+import { u as T, U, _ as $ } from "./index-BvOE31Fh.js";
+const z = { class: "select-list" }, A = {
+  key: 0,
+  class: "search-wrapper"
+}, D = {
+  key: 1,
+  class: "infoblock-wrapper"
+}, E = ["onClick"], M = {
+  key: 0,
+  class: "option-item-icon",
+  width: "20",
+  height: "20",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, R = {
+  key: 2,
+  class: "confirm-button-wrapper"
+}, Z = /* @__PURE__ */ b({
+  __name: "List",
+  props: {
+    showSearchInput: { type: Boolean, default: !0 },
+    placeholderSearchInput: { default: "Поиск..." },
+    options: {},
+    multiple: { type: Boolean, default: !1 },
+    selectedValues: { default: () => [] },
+    selectedColor: { default: "#7c3aed" },
+    infoblockSlot: {},
+    multipleButtonConfirmText: { default: "Подтвердить" }
+  },
+  emits: ["select", "close"],
+  setup(C, { emit: h }) {
+    const u = h, n = C, [v] = T(), c = p(""), r = p([...n.selectedValues]), k = w(() => {
+      if (!c.value) return n.options;
+      const e = c.value.toLowerCase();
+      return n.options.filter((l) => l.label.toLowerCase().includes(e));
+    }), i = (e) => r.value.some((l) => l.value === e.value), y = (e) => {
+      if (n.multiple) {
+        const l = r.value.findIndex((t) => t.value === e.value);
+        l === -1 ? r.value.push(e) : r.value.splice(l, 1), u("select", [...r.value]);
+      } else
+        u("select", e), u("close");
+    }, S = () => {
+      u("close");
+    };
+    return (e, l) => (o(), s("div", z, [
+      e.showSearchInput ? (o(), s("div", A, [
+        I(U, {
+          modelValue: c.value,
+          "onUpdate:modelValue": l[0] || (l[0] = (t) => c.value = t),
+          placeholder: e.placeholderSearchInput,
+          showSearchIcon: !0,
+          "color-scheme": e.selectedColor === "#3C6BFF" ? "WIR" : "SIR"
+        }, null, 8, ["modelValue", "placeholder", "color-scheme"])
+      ])) : a("", !0),
+      e.$slots.infoblock || e.infoblockSlot ? (o(), s("div", D, [
+        V(e.$slots, "infoblock", {}, () => [
+          e.infoblockSlot ? (o(), B(L(e.infoblockSlot), { key: 0 })) : a("", !0)
+        ], !0)
+      ])) : a("", !0),
+      d("ul", {
+        ref_key: "list",
+        ref: v,
+        class: "options-list"
+      }, [
+        (o(!0), s(g, null, _(k.value, (t) => (o(), s("li", {
+          key: t.value,
+          class: N(["option-item", { "--selected": e.multiple && i(t) }]),
+          style: m(e.multiple && i(t) ? { color: n.selectedColor } : {}),
+          onClick: (q) => y(t)
+        }, [
+          F(f(t.label) + " ", 1),
+          e.multiple && i(t) ? (o(), s("svg", M, l[1] || (l[1] = [
+            d("path", {
+              d: "M10 20C4.47656 20 0 15.5234 0 10C0 4.47656 4.47656 0 10 0C15.5234 0 20 4.47656 20 10C20 15.5234 15.5234 20 10 20ZM14.6094 5.69141C14.1914 5.38672 13.6055 5.48047 13.3008 5.89844L8.63672 12.3125L6.60156 10.2773C6.23438 9.91016 5.64063 9.91016 5.27734 10.2773C4.91406 10.6445 4.91016 11.2383 5.27734 11.6016L8.08984 14.4141C8.28516 14.6094 8.55078 14.707 8.82422 14.6875C9.09766 14.668 9.34766 14.5273 9.50781 14.3047L14.8164 7C15.1211 6.58203 15.0273 5.99609 14.6094 5.69141Z",
+              fill: "currentColor"
+            }, null, -1)
+          ]))) : a("", !0)
+        ], 14, E))), 128))
+      ], 512),
+      e.multiple ? (o(), s("div", R, [
+        d("button", {
+          class: "confirm-button",
+          style: m({ background: e.selectedColor }),
+          onClick: S
+        }, f(e.multipleButtonConfirmText), 5)
+      ])) : a("", !0)
+    ]));
+  }
+}), W = /* @__PURE__ */ $(Z, [["__scopeId", "data-v-247ea40b"]]);
+export {
+  W as default
+};