@bikariya/modals 0.0.1 → 0.0.2
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 +63 -0
- package/dist/module.json +1 -1
- package/dist/module.mjs +2 -11
- package/dist/runtime/modals.vue +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# @bikariya/modals
|
|
2
|
+
|
|
3
|
+
无头模态框管理，基于 [Pinia](https://pinia.vuejs.org)。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm i -D @bikariya/modals
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 使用方式
|
|
12
|
+
|
|
13
|
+
1. 在 `nuxt.config.ts` 中添加模块：
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
export default defineNuxtConfig({
|
|
17
|
+
modules: [
|
|
18
|
+
"@bikariya/modals",
|
|
19
|
+
],
|
|
20
|
+
});
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
2. 在根组件或 Layout 中添加模态框容器：
|
|
24
|
+
|
|
25
|
+
```vue
|
|
26
|
+
<template>
|
|
27
|
+
<bikariya-modals />
|
|
28
|
+
</template>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
3. 在 `components` 文件夹下创建模态框组件：
|
|
32
|
+
|
|
33
|
+
```vue
|
|
34
|
+
<script lang="ts" setup>
|
|
35
|
+
defineProps<{
|
|
36
|
+
isOpening?: boolean;
|
|
37
|
+
}>();
|
|
38
|
+
|
|
39
|
+
defineEmits<{
|
|
40
|
+
close: [];
|
|
41
|
+
}>();
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<template>
|
|
45
|
+
<transition>
|
|
46
|
+
<div v-if="isOpening">
|
|
47
|
+
<span>I'm a modal.</span>
|
|
48
|
+
<button @click="$emit(`close`)">Close</button>
|
|
49
|
+
</div>
|
|
50
|
+
</transition>
|
|
51
|
+
</template>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
4. 在页面或组件中使用模态框：
|
|
55
|
+
|
|
56
|
+
```vue
|
|
57
|
+
<script lang="ts" setup>
|
|
58
|
+
import { LazySimpleModal } from "#components";
|
|
59
|
+
|
|
60
|
+
const modalStore = useModalStore();
|
|
61
|
+
const { open, close } = modalStore.use(() => h(LazySimpleModal));
|
|
62
|
+
</script>
|
|
63
|
+
```
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineNuxtModule, createResolver, addImportsDir, addComponent
|
|
1
|
+
import { defineNuxtModule, createResolver, addImportsDir, addComponent } from '@nuxt/kit';
|
|
2
2
|
|
|
3
3
|
const name = "@bikariya/modals";
|
|
4
4
|
const packageJson = {
|
|
@@ -12,22 +12,13 @@ const module$1 = defineNuxtModule({
|
|
|
12
12
|
moduleDependencies: {
|
|
13
13
|
"@bikariya/core": {}
|
|
14
14
|
},
|
|
15
|
-
setup(
|
|
15
|
+
setup() {
|
|
16
16
|
const resolver = createResolver(import.meta.url);
|
|
17
17
|
addImportsDir(resolver.resolve("runtime/stores"));
|
|
18
18
|
addComponent({
|
|
19
19
|
name: "BikariyaModals",
|
|
20
20
|
filePath: resolver.resolve("runtime/modals.vue")
|
|
21
21
|
});
|
|
22
|
-
addTemplate({
|
|
23
|
-
filename: "nuxt-modal.mjs",
|
|
24
|
-
getContents: () => (
|
|
25
|
-
/* TS */
|
|
26
|
-
`
|
|
27
|
-
export const overlayClass = \`${options.overlayClass}\`;
|
|
28
|
-
`.trimStart()
|
|
29
|
-
)
|
|
30
|
-
});
|
|
31
22
|
}
|
|
32
23
|
});
|
|
33
24
|
|
package/dist/runtime/modals.vue
CHANGED
|
@@ -11,7 +11,7 @@ const { modals } = storeToRefs(modalStore);
|
|
|
11
11
|
v-if="isOpening.value"
|
|
12
12
|
class="bikariya-overlay"
|
|
13
13
|
:style="{ zIndex: zIndex - 1 }"
|
|
14
|
-
@click="close.value"
|
|
14
|
+
@click="close.value()"
|
|
15
15
|
></div>
|
|
16
16
|
</transition>
|
|
17
17
|
<component :is="vnode.value" :is-opening="isOpening.value" :style="{ zIndex }"/>
|
package/package.json
CHANGED