bms-shared-components 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# BMS Shared Components
|
|
2
|
+
|
|
3
|
+
Библиотека общих Vue 3 компонентов для переиспользования в различных проектах.
|
|
4
|
+
|
|
5
|
+
## Установка
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install bms-shared-components
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Использование
|
|
12
|
+
|
|
13
|
+
### Как плагин (глобальная регистрация)
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import { createApp } from "vue";
|
|
17
|
+
import App from "./App.vue";
|
|
18
|
+
import BmsSharedComponents from "bms-shared-components";
|
|
19
|
+
import "bms-shared-components/style.css";
|
|
20
|
+
|
|
21
|
+
const app = createApp(App);
|
|
22
|
+
app.use(BmsSharedComponents);
|
|
23
|
+
app.mount("#app");
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Импорт отдельных компонентов
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
import { FullLoader } from "bms-shared-components";
|
|
30
|
+
import "bms-shared-components/style.css";
|
|
31
|
+
|
|
32
|
+
export default {
|
|
33
|
+
components: {
|
|
34
|
+
FullLoader,
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Компоненты
|
|
40
|
+
|
|
41
|
+
### FullLoader
|
|
42
|
+
|
|
43
|
+
Компонент полноэкранного загрузчика с красивой анимацией.
|
|
44
|
+
|
|
45
|
+
#### Пропсы
|
|
46
|
+
|
|
47
|
+
- `modelValue` (Boolean) - управляет видимостью загрузчика
|
|
48
|
+
- `minShowTime` (Number) - минимальное время показа в миллисекундах (по умолчанию 750)
|
|
49
|
+
|
|
50
|
+
#### Пример использования
|
|
51
|
+
|
|
52
|
+
```vue
|
|
53
|
+
<template>
|
|
54
|
+
<div>
|
|
55
|
+
<button @click="showLoader = true">Показать загрузчик</button>
|
|
56
|
+
|
|
57
|
+
<FullLoader v-model="showLoader"> Загружаем данные... </FullLoader>
|
|
58
|
+
</div>
|
|
59
|
+
</template>
|
|
60
|
+
|
|
61
|
+
<script setup>
|
|
62
|
+
import { ref } from "vue";
|
|
63
|
+
import { FullLoader } from "bms-shared-components";
|
|
64
|
+
|
|
65
|
+
const showLoader = ref(false);
|
|
66
|
+
|
|
67
|
+
// Автоматически скрыть через 3 секунды
|
|
68
|
+
setTimeout(() => {
|
|
69
|
+
showLoader.value = false;
|
|
70
|
+
}, 3000);
|
|
71
|
+
</script>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Разработка
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
# Установка зависимостей
|
|
78
|
+
npm install
|
|
79
|
+
|
|
80
|
+
# Запуск в режиме разработки
|
|
81
|
+
npm run dev
|
|
82
|
+
|
|
83
|
+
# Сборка библиотеки
|
|
84
|
+
npm run build:lib
|
|
85
|
+
|
|
86
|
+
# Публикация
|
|
87
|
+
npm publish
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Лицензия
|
|
91
|
+
|
|
92
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.loader-fade-enter-active[data-v-b1f0ef8e],.loader-fade-leave-active[data-v-b1f0ef8e]{transition:opacity .3s ease}.loader-fade-enter-from[data-v-b1f0ef8e],.loader-fade-leave-to[data-v-b1f0ef8e]{opacity:0}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { ref as h, onMounted as x, onUnmounted as b, watch as y, createBlock as v, openBlock as f, Transition as _, withCtx as g, createElementBlock as V, createCommentVNode as T, createElementVNode as t, renderSlot as S } from "vue";
|
|
2
|
+
const k = (l, i) => {
|
|
3
|
+
const n = l.__vccOpts || l;
|
|
4
|
+
for (const [o, s] of i)
|
|
5
|
+
n[o] = s;
|
|
6
|
+
return n;
|
|
7
|
+
}, B = {
|
|
8
|
+
key: 0,
|
|
9
|
+
class: "fixed inset-0 bg-black bg-opacity-50 z-[1000] flex items-center justify-center"
|
|
10
|
+
}, F = { class: "bg-white rounded-lg shadow-2xl p-8 max-w-sm mx-4 text-center" }, L = { class: "text-gray-600 text-sm" }, N = {
|
|
11
|
+
__name: "FullLoader",
|
|
12
|
+
props: {
|
|
13
|
+
modelValue: {
|
|
14
|
+
type: Boolean,
|
|
15
|
+
default: !1
|
|
16
|
+
},
|
|
17
|
+
minShowTime: {
|
|
18
|
+
type: Number,
|
|
19
|
+
default: 750
|
|
20
|
+
// минимальное время показа в миллисекундах
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
emits: ["update:modelValue"],
|
|
24
|
+
setup(l, { expose: i, emit: n }) {
|
|
25
|
+
const o = l, s = n, a = h(!1);
|
|
26
|
+
let c = null, u = null;
|
|
27
|
+
const d = () => {
|
|
28
|
+
a.value || (a.value = !0, c = Date.now());
|
|
29
|
+
}, r = () => {
|
|
30
|
+
if (a.value) {
|
|
31
|
+
const m = Date.now() - c, e = Math.max(0, o.minShowTime - m);
|
|
32
|
+
e > 0 ? u = setTimeout(() => {
|
|
33
|
+
a.value = !1, s("update:modelValue", !1);
|
|
34
|
+
}, e) : (a.value = !1, s("update:modelValue", !1));
|
|
35
|
+
}
|
|
36
|
+
}, w = () => {
|
|
37
|
+
o.modelValue ? d() : r();
|
|
38
|
+
};
|
|
39
|
+
return x(() => {
|
|
40
|
+
o.modelValue && d();
|
|
41
|
+
}), b(() => {
|
|
42
|
+
u && clearTimeout(u);
|
|
43
|
+
}), i({
|
|
44
|
+
startShow: d,
|
|
45
|
+
stopShow: r
|
|
46
|
+
}), y(() => o.modelValue, w), (m, e) => (f(), v(_, {
|
|
47
|
+
name: "loader-fade",
|
|
48
|
+
appear: ""
|
|
49
|
+
}, {
|
|
50
|
+
default: g(() => [
|
|
51
|
+
a.value ? (f(), V("div", B, [
|
|
52
|
+
t("div", F, [
|
|
53
|
+
e[0] || (e[0] = t("h3", { class: "text-lg font-semibold text-gray-800 mb-2" }, "Пожалуйста, подождите", -1)),
|
|
54
|
+
t("p", L, [
|
|
55
|
+
S(m.$slots, "default", {}, void 0, !0)
|
|
56
|
+
]),
|
|
57
|
+
e[1] || (e[1] = t("div", { class: "flex justify-center mt-4 space-x-1" }, [
|
|
58
|
+
t("div", {
|
|
59
|
+
class: "w-2 h-2 bg-blue-500 rounded-full animate-bounce",
|
|
60
|
+
style: { "animation-delay": "0ms" }
|
|
61
|
+
}),
|
|
62
|
+
t("div", {
|
|
63
|
+
class: "w-2 h-2 bg-blue-500 rounded-full animate-bounce",
|
|
64
|
+
style: { "animation-delay": "150ms" }
|
|
65
|
+
}),
|
|
66
|
+
t("div", {
|
|
67
|
+
class: "w-2 h-2 bg-blue-500 rounded-full animate-bounce",
|
|
68
|
+
style: { "animation-delay": "300ms" }
|
|
69
|
+
})
|
|
70
|
+
], -1))
|
|
71
|
+
])
|
|
72
|
+
])) : T("", !0)
|
|
73
|
+
]),
|
|
74
|
+
_: 3
|
|
75
|
+
}));
|
|
76
|
+
}
|
|
77
|
+
}, j = /* @__PURE__ */ k(N, [["__scopeId", "data-v-b1f0ef8e"]]);
|
|
78
|
+
function p(l) {
|
|
79
|
+
l.component("FullLoader", j);
|
|
80
|
+
}
|
|
81
|
+
const D = {
|
|
82
|
+
install: p
|
|
83
|
+
};
|
|
84
|
+
typeof window < "u" && window.Vue && window.Vue.use({ install: p });
|
|
85
|
+
export {
|
|
86
|
+
j as FullLoader,
|
|
87
|
+
D as default,
|
|
88
|
+
p as install
|
|
89
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.BmsSharedComponents={},t.Vue))})(this,function(t,e){"use strict";const h=(l,m)=>{const s=l.__vccOpts||l;for(const[n,d]of m)s[n]=d;return s},b={key:0,class:"fixed inset-0 bg-black bg-opacity-50 z-[1000] flex items-center justify-center"},y={class:"bg-white rounded-lg shadow-2xl p-8 max-w-sm mx-4 text-center"},V={class:"text-gray-600 text-sm"},f=h({__name:"FullLoader",props:{modelValue:{type:Boolean,default:!1},minShowTime:{type:Number,default:750}},emits:["update:modelValue"],setup(l,{expose:m,emit:s}){const n=l,d=s,a=e.ref(!1);let p=null,u=null;const c=()=>{a.value||(a.value=!0,p=Date.now())},w=()=>{if(a.value){const r=Date.now()-p,o=Math.max(0,n.minShowTime-r);o>0?u=setTimeout(()=>{a.value=!1,d("update:modelValue",!1)},o):(a.value=!1,d("update:modelValue",!1))}},x=()=>{n.modelValue?c():w()};return e.onMounted(()=>{n.modelValue&&c()}),e.onUnmounted(()=>{u&&clearTimeout(u)}),m({startShow:c,stopShow:w}),e.watch(()=>n.modelValue,x),(r,o)=>(e.openBlock(),e.createBlock(e.Transition,{name:"loader-fade",appear:""},{default:e.withCtx(()=>[a.value?(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("div",y,[o[0]||(o[0]=e.createElementVNode("h3",{class:"text-lg font-semibold text-gray-800 mb-2"},"Пожалуйста, подождите",-1)),e.createElementVNode("p",V,[e.renderSlot(r.$slots,"default",{},void 0,!0)]),o[1]||(o[1]=e.createElementVNode("div",{class:"flex justify-center mt-4 space-x-1"},[e.createElementVNode("div",{class:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{"animation-delay":"0ms"}}),e.createElementVNode("div",{class:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{"animation-delay":"150ms"}}),e.createElementVNode("div",{class:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{"animation-delay":"300ms"}})],-1))])])):e.createCommentVNode("",!0)]),_:3}))}},[["__scopeId","data-v-b1f0ef8e"]]);function i(l){l.component("FullLoader",f)}const _={install:i};typeof window<"u"&&window.Vue&&window.Vue.use({install:i}),t.FullLoader=f,t.default=_,t.install=i,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/favicon.ico
ADDED
|
Binary file
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "bms-shared-components",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Shared Vue 3 components library",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/bms-shared-components.umd.cjs",
|
|
7
|
+
"module": "./dist/bms-shared-components.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/bms-shared-components.js",
|
|
11
|
+
"require": "./dist/bms-shared-components.umd.cjs"
|
|
12
|
+
},
|
|
13
|
+
"./style.css": "./dist/style.css"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"scripts": {
|
|
19
|
+
"dev": "vite",
|
|
20
|
+
"build": "vite build",
|
|
21
|
+
"build:lib": "vite build --mode library",
|
|
22
|
+
"preview": "vite preview",
|
|
23
|
+
"prepublishOnly": "npm run build:lib"
|
|
24
|
+
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"vue": "^3.0.0"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@vitejs/plugin-vue": "^6.0.0",
|
|
30
|
+
"vue": "^3.5.17",
|
|
31
|
+
"vite": "^7.0.0",
|
|
32
|
+
"vite-plugin-vue-devtools": "^7.7.7"
|
|
33
|
+
},
|
|
34
|
+
"keywords": [
|
|
35
|
+
"vue",
|
|
36
|
+
"vue3",
|
|
37
|
+
"components",
|
|
38
|
+
"ui",
|
|
39
|
+
"library"
|
|
40
|
+
],
|
|
41
|
+
"author": "Your Name",
|
|
42
|
+
"license": "MIT",
|
|
43
|
+
"repository": {
|
|
44
|
+
"type": "git",
|
|
45
|
+
"url": "your-repo-url"
|
|
46
|
+
}
|
|
47
|
+
}
|