@neatui/vue 2.17.3 → 3.0.0

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "arrowParens": "always",
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 180,
+  "tabWidth": 2,
+  "bracketSameLine": false,
+  "vueIndentScriptAndStyle": true,
+  "htmlWhitespaceSensitivity": "ignore"
+}

package/README.md

@@ -1,3 +1,85 @@
 # @neatui/vue
 
+NeatUI Vue component package for Vue 3 and Nuxt projects.
+
+`@neatui/vue` is the maintained component package. `@neatui/nuxt` has stopped maintenance as of 2026-05-26; Nuxt users should use `@neatui/vue` directly.
+
+## Installation
+
+```bash
+npm install @neatui/css @neatui/vue
+```
+
+## Vue Usage
+
+Import the style package once in your app entry:
+
+```ts
+import '@neatui/css';
+```
+
+Import components from `@neatui/vue`:
+
+```vue
+<template>
+  <Input v-model="value" placeholder="Enter text" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Input } from '@neatui/vue';
+
+const value = ref('');
+</script>
+```
+
+## Nuxt Usage
+
+Import the style package from a Nuxt app stylesheet:
+
+```scss
+/* app/assets/css/main.scss */
+@use '@neatui/css' as *;
+```
+
+Register the stylesheet in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  css: ['@/assets/css/main.scss'],
+});
+```
+
+Use explicit component imports:
+
+```vue
+<template>
+  <FormLoader :form="form" :data="data" />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { FormLoader } from '@neatui/vue';
+
+const form = [
+  { label: 'Name', field: 'name' },
+];
+
+const data = reactive({
+  name: '',
+});
+</script>
+```
+
+## Migration From @neatui/nuxt
+
+```diff
+- import { Input, FormLoader, Pagination } from '@neatui/nuxt';
++ import { Input, FormLoader, Pagination } from '@neatui/vue';
+```
+
+`@neatui/nuxt` should be removed from new Nuxt projects.
+
+## Documentation
+
 [http://neatui.fekit.cn](http://neatui.fekit.cn)

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@neatui/vue",
-  "version": "2.17.3",
+  "version": "3.0.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
   "author": "xiaojunbo",
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": "^3.2.0",
+    "vue-router": "^4.0.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js"
@@ -17,7 +18,9 @@
     "postcss-scss": "^4.0.9",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
   },
   "dependencies": {
     "@fekit/floor": "^3.0.1",
@@ -27,7 +30,7 @@
     "@fekit/scale": "^2.0.1",
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
-    "@fekit/utils": "^4.3.1",
+    "@fekit/utils": "^6.0.0",
     "@neatui/css": "^3.15.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",

package/src/components/basic/IFollowView.vue

@@ -1,35 +1,39 @@
 <template>
   <div ref="dom" :class="btnClass" :style="btnStyle" @click="toggle" @mouseover="hovershow" @mouseout="hoverhide">
     <slot>
-      <button ui-btn="@a s case :border"><i class="icon icon-dropdown"></i></button>
+      <button ui-btn="@a s case :border">
+        <i class="icon icon-dropdown"></i>
+      </button>
     </slot>
-  </div>
-  <Teleport v-if="$slots.tips" to="#ifollow">
-    <div
-      ref="tip"
-      :class="`${tipClass}${mobile ? ' fekit-follow-mobile' : ''}`"
-      :style="`position: fixed; pointer-events: none; ${tipStyle}`"
-      ui-tips="@a"
-      :ui-tips-view="state.show ? 1 : 0"
-      @mouseover="hovershow"
-      @mouseout="hoverhide"
-      @click="clickhide"
-    >
-      <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
-        <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
-          <div class="w-sm"></div>
-          <div>
-            <h5 class="bold">{{ title }}</h5>
-          </div>
-          <div class="w-sm" ui-flex="row rm">
-            <button ui-btn="@a none s :square" @click="toggle"><i class="icon icon-close"></i></button>
+    <Teleport v-if="teleportReady && $slots.tips" to="#ifollow">
+      <div
+        ref="tip"
+        :class="`${tipClass}${mobile ? ' fekit-follow-mobile' : ''}`"
+        :style="`position: fixed; pointer-events: none; ${tipStyle}`"
+        ui-tips="@a"
+        :ui-tips-view="state.show ? 1 : 0"
+        @mouseover="hovershow"
+        @mouseout="hoverhide"
+        @click="clickhide"
+      >
+        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
+          <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
+            <div class="w-sm"></div>
+            <div>
+              <h5 class="bold">{{ title }}</h5>
+            </div>
+            <div class="w-sm" ui-flex="row rm">
+              <button ui-btn="@a none s :square" @click="toggle">
+                <i class="icon icon-close"></i>
+              </button>
+            </div>
           </div>
+          <slot name="tips"></slot>
+          <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
         </div>
-        <slot name="tips"></slot>
-        <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
       </div>
-    </div>
-  </Teleport>
+    </Teleport>
+  </div>
 </template>
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
@@ -37,13 +41,6 @@
 
   const emits = defineEmits(['update:modelValue', 'onhide', 'onshow']);
 
-  const area: any = document.querySelector('#ifollow');
-  if (!area) {
-    const el = document.createElement('div');
-    el.id = 'ifollow';
-    document.body.appendChild(el);
-  }
-
   // 类型
   interface Props {
     modelValue?: string | number;
@@ -81,6 +78,7 @@
   const dom: any = ref(null);
   const tip: any = ref(null);
   const box: any = ref(null);
+  const teleportReady = ref(false);
   const state = reactive({
     view: 0,
     show: 0,
@@ -171,11 +169,26 @@
     }
   };
 
+  const ensureTeleportTarget = () => {
+    let area = document.querySelector('#ifollow');
+    if (!area) {
+      area = document.createElement('div');
+      area.id = 'ifollow';
+      document.body.appendChild(area);
+    }
+    teleportReady.value = true;
+  };
+
   onMounted(() => {
+    ensureTeleportTarget();
     document.addEventListener('click', cancel, true);
     // 添加触摸事件监听器以防止页面滚动
-    document.addEventListener('touchstart', preventTouchScroll, { passive: false });
-    document.addEventListener('touchmove', preventTouchScroll, { passive: false });
+    document.addEventListener('touchstart', preventTouchScroll, {
+      passive: false,
+    });
+    document.addEventListener('touchmove', preventTouchScroll, {
+      passive: false,
+    });
     // 判断是否为移动端
     state.isMobile = window.innerWidth < 800;
   });

package/src/components/basic/IPickerView.vue

@@ -2,7 +2,7 @@
   <div ref="dom" :class="btnClass" :style="btnStyle" class="fekit-picker-button" data-aaa="111" @click="toggle">
     <slot></slot>
   </div>
-  <Teleport to="#fekit">
+  <Teleport v-if="teleportReady" to="#fekit">
     <div v-if="state.view" :view="state.view" am-view="am" class="fekit-picker">
       <div :ui-flex="`col cb`" class="fekit-picker-wrap" @animationend="anim" @click="_sys_hide">
         <div class="picker bg-fore picker-virtual-key">
@@ -14,6 +14,7 @@
 </template>
 <script lang="ts" setup>
   import { reactive, ref, onMounted } from 'vue';
+  import { env } from '@fekit/utils';
 
   // 回调合集
   const on: any = {
@@ -23,13 +24,19 @@
     none() {}
   };
 
-  const area: any = document.querySelector('#fekit');
-  if (!area) {
-    const el = document.createElement('div');
-    el.id = 'fekit';
-    el.style.position = 'absolute';
-    document.body.appendChild(el);
-  }
+  const teleportReady = ref(false);
+
+  const ensureTeleportTarget = () => {
+    if (!env.client) return;
+    const area: any = document.querySelector('#fekit');
+    if (!area) {
+      const el = document.createElement('div');
+      el.id = 'fekit';
+      el.style.position = 'absolute';
+      document.body.appendChild(el);
+    }
+    teleportReady.value = true;
+  };
   const emits = defineEmits(['update:modelValue', 'show', 'hide']);
   const props = defineProps({
     btnClass: { type: String, default: 'dib' },
@@ -91,6 +98,7 @@
   };
 
   onMounted(() => {
+    ensureTeleportTarget();
     document.addEventListener('click', cancel, true);
   });