@neatui/nuxt 1.6.10 → 1.6.12

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/.prettierrc ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/prettierrc",
3
+ "semi": true,
4
+ "arrowParens": "always",
5
+ "trailingComma": "all",
6
+ "singleQuote": true,
7
+ "printWidth": 180,
8
+ "tabWidth": 2,
9
+ "bracketSameLine": false,
10
+ "vueIndentScriptAndStyle": true,
11
+ "htmlWhitespaceSensitivity": "ignore"
12
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neatui/nuxt",
3
- "version": "1.6.10",
3
+ "version": "1.6.12",
4
4
  "description": "NeatUI component library for Nuxt 3",
5
5
  "main": "./src/index.ts",
6
6
  "license": "MIT",
@@ -1,35 +1,39 @@
1
1
  <template>
2
2
  <div ref="dom" :class="btnClass" :style="btnStyle" @click="toggle" @mouseover="hovershow" @mouseout="hoverhide">
3
3
  <slot>
4
- <button ui-btn="@a s case :border"><i class="icon icon-dropdown"></i></button>
4
+ <button ui-btn="@a s case :border">
5
+ <i class="icon icon-dropdown"></i>
6
+ </button>
5
7
  </slot>
6
- </div>
7
- <Teleport v-if="$slots.tips" to="#ifollow">
8
- <div
9
- ref="tip"
10
- :class="`${tipClass}${mobile ? ' fekit-follow-mobile' : ''}`"
11
- :style="`position: fixed; pointer-events: none; ${tipStyle}`"
12
- ui-tips="@a"
13
- :ui-tips-view="state.show ? 1 : 0"
14
- @mouseover="hovershow"
15
- @mouseout="hoverhide"
16
- @click="clickhide"
17
- >
18
- <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
19
- <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
20
- <div class="w-sm"></div>
21
- <div>
22
- <h5 class="bold">{{ title }}</h5>
23
- </div>
24
- <div class="w-sm" ui-flex="row rm">
25
- <button ui-btn="@a none s :square" @click="toggle"><i class="icon icon-close"></i></button>
8
+ <Teleport v-if="teleportReady && $slots.tips" to="#ifollow">
9
+ <div
10
+ ref="tip"
11
+ :class="`${tipClass}${mobile ? ' fekit-follow-mobile' : ''}`"
12
+ :style="`position: fixed; pointer-events: none; ${tipStyle}`"
13
+ ui-tips="@a"
14
+ :ui-tips-view="state.show ? 1 : 0"
15
+ @mouseover="hovershow"
16
+ @mouseout="hoverhide"
17
+ @click="clickhide"
18
+ >
19
+ <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
20
+ <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
21
+ <div class="w-sm"></div>
22
+ <div>
23
+ <h5 class="bold">{{ title }}</h5>
24
+ </div>
25
+ <div class="w-sm" ui-flex="row rm">
26
+ <button ui-btn="@a none s :square" @click="toggle">
27
+ <i class="icon icon-close"></i>
28
+ </button>
29
+ </div>
26
30
  </div>
31
+ <slot name="tips"></slot>
32
+ <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
27
33
  </div>
28
- <slot name="tips"></slot>
29
- <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
30
34
  </div>
31
- </div>
32
- </Teleport>
35
+ </Teleport>
36
+ </div>
33
37
  </template>
34
38
  <script setup lang="ts">
35
39
  import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
@@ -37,15 +41,6 @@
37
41
 
38
42
  const emits = defineEmits(['update:modelValue', 'onhide', 'onshow']);
39
43
 
40
- if (import.meta.client) {
41
- const area = document.querySelector('#ifollow');
42
- if (!area) {
43
- const el = document.createElement('div');
44
- el.id = 'ifollow';
45
- document.body.appendChild(el);
46
- }
47
- }
48
-
49
44
  // 类型
50
45
  interface Props {
51
46
  modelValue?: string | number;
@@ -83,6 +78,7 @@
83
78
  const dom: any = ref(null);
84
79
  const tip: any = ref(null);
85
80
  const box: any = ref(null);
81
+ const teleportReady = ref(false);
86
82
  const state = reactive({
87
83
  view: 0,
88
84
  show: 0,
@@ -173,11 +169,26 @@
173
169
  }
174
170
  };
175
171
 
172
+ const ensureTeleportTarget = () => {
173
+ let area = document.querySelector('#ifollow');
174
+ if (!area) {
175
+ area = document.createElement('div');
176
+ area.id = 'ifollow';
177
+ document.body.appendChild(area);
178
+ }
179
+ teleportReady.value = true;
180
+ };
181
+
176
182
  onMounted(() => {
183
+ ensureTeleportTarget();
177
184
  document.addEventListener('click', cancel, true);
178
185
  // 添加触摸事件监听器以防止页面滚动
179
- document.addEventListener('touchstart', preventTouchScroll, { passive: false });
180
- document.addEventListener('touchmove', preventTouchScroll, { passive: false });
186
+ document.addEventListener('touchstart', preventTouchScroll, {
187
+ passive: false,
188
+ });
189
+ document.addEventListener('touchmove', preventTouchScroll, {
190
+ passive: false,
191
+ });
181
192
  // 判断是否为移动端
182
193
  state.isMobile = window.innerWidth < 800;
183
194
  });