@neatui/nuxt 0.1.0 → 1.0.1

package/USAGE.md

@@ -0,0 +1,291 @@
+# @neatui/nuxt 使用指南
+
+## 📦 安装
+
+```bash
+npm install @neatui/nuxt
+```
+
+## ⚙️ 配置
+
+在 `nuxt.config.ts` 中添加模块：
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@neatui/nuxt'
+  ],
+  neatui: {
+    prefix: 'Neat',  // 组件前缀
+    theme: 'default' // 主题
+  }
+})
+```
+
+## 🎯 基础使用
+
+### 方式1: 自动导入 (推荐)
+
+配置模块后，组件会自动注册，直接在模板中使用：
+
+#### 表单组件
+
+```vue
+<template>
+  <div>
+    <!-- 输入框 -->
+    <NeatInput
+      v-model="form.name"
+      placeholder="请输入姓名"
+      :rules="[{ required: true, message: '姓名必填' }]"
+    />
+
+    <!-- 选择器 -->
+    <NeatSelect
+      v-model="form.city"
+      :options="cityOptions"
+      placeholder="选择城市"
+    />
+
+    <!-- 日期选择 -->
+    <NeatDatePicker
+      v-model="form.date"
+      placeholder="选择日期"
+    />
+
+    <!-- 上传组件 -->
+    <NeatUpload
+      v-model="form.files"
+      :limit="3"
+      accept="image/*"
+    />
+
+    <!-- 按钮 -->
+    <NeatButton @click="submit" type="primary">
+      提交
+    </NeatButton>
+  </div>
+</template>
+
+<script setup>
+const form = reactive({
+  name: '',
+  city: '',
+  date: '',
+  files: []
+})
+
+const cityOptions = [
+  { label: '北京', value: 'beijing' },
+  { label: '上海', value: 'shanghai' },
+  { label: '广州', value: 'guangzhou' }
+]
+
+const submit = () => {
+  console.log('提交数据:', form)
+}
+</script>
+```
+
+### 展示组件
+
+```vue
+<template>
+  <div>
+    <!-- 表格组件 -->
+    <NeatTableLoader
+      :data="tableData"
+      :columns="columns"
+      :loading="loading"
+    />
+
+    <!-- 分页组件 -->
+    <NeatPageSelect
+      v-model="currentPage"
+      :total="total"
+      :page-size="pageSize"
+    />
+  </div>
+</template>
+
+<script setup>
+const tableData = ref([])
+const loading = ref(false)
+const currentPage = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+
+const columns = [
+  { key: 'name', title: '姓名' },
+  { key: 'age', title: '年龄' },
+  { key: 'city', title: '城市' }
+]
+</script>
+```
+
+### 表单构建器
+
+```vue
+<template>
+  <div>
+    <!-- 动态表单 -->
+    <NeatFormLoader
+      v-model="formData"
+      :form="formConfig"
+      :rows="2"
+    />
+  </div>
+</template>
+
+<script setup>
+const formData = ref({})
+
+const formConfig = [
+  {
+    field: 'name',
+    label: '姓名',
+    model: ['Input', { placeholder: '请输入姓名' }],
+    rules: [{ required: true, message: '姓名必填' }],
+    media: 'col-6'
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    model: ['Input', { type: 'email', placeholder: '请输入邮箱' }],
+    rules: [{ required: true, type: 'email', message: '邮箱格式错误' }],
+    media: 'col-6'
+  },
+  {
+    field: 'city',
+    label: '城市',
+    model: ['Select', { placeholder: '选择城市' }],
+    enums: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' }
+    ],
+    media: 'col-12'
+  }
+]
+</script>
+```
+
+### 方式2: 手动导入
+
+如果不想使用自动导入，可以手动导入组件：
+
+```vue
+<template>
+  <div>
+    <Textarea v-model="content" placeholder="请输入内容" />
+    <Input v-model="name" placeholder="请输入姓名" />
+    <Select v-model="city" :options="cities" />
+  </div>
+</template>
+
+<script setup>
+// 手动导入需要的组件
+import { Textarea, Input, Select } from '@neatui/nuxt/components'
+
+const content = ref('')
+const name = ref('')
+const city = ref('')
+const cities = [
+  { label: '北京', value: 'beijing' },
+  { label: '上海', value: 'shanghai' }
+]
+</script>
+```
+
+## 🎨 主题定制
+
+### 使用CSS变量
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  neatui: {
+    css: {
+      variables: {
+        'primary-color': '#007bff',
+        'border-radius': '6px',
+        'font-size': '14px',
+        'spacing-sm': '8px',
+        'spacing-md': '16px'
+      }
+    }
+  }
+})
+```
+
+### 自定义主题
+
+```css
+/* assets/css/custom-theme.css */
+:root {
+  --neat-primary-color: #007bff;
+  --neat-success-color: #28a745;
+  --neat-warning-color: #ffc107;
+  --neat-danger-color: #dc3545;
+  --neat-border-radius: 6px;
+}
+```
+
+## 🔧 高级配置
+
+### 按需导入
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  neatui: {
+    // 只导入需要的组件
+    exclude: [
+      'SomeHeavyComponent',
+      'AnotherComponent'
+    ]
+  }
+})
+```
+
+### 自定义前缀
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  neatui: {
+    prefix: 'My' // 组件将变成 <MyButton>, <MyInput>
+  }
+})
+```
+
+## 📱 SSR 注意事项
+
+某些组件可能需要客户端渲染：
+
+```vue
+<template>
+  <div>
+    <!-- 对于依赖浏览器API的组件，使用 ClientOnly -->
+    <ClientOnly>
+      <NeatUpload v-model="files" />
+      <template #fallback>
+        <div>加载中...</div>
+      </template>
+    </ClientOnly>
+  </div>
+</template>
+```
+
+## 🐛 常见问题
+
+### Q: 组件不显示？
+A: 确保已正确安装并在 nuxt.config.ts 中配置模块
+
+### Q: 类型提示不完整？
+A: 重启 TypeScript 服务或重新生成类型
+
+### Q: 样式没有加载？
+A: 检查是否正确导入了样式文件
+
+### Q: SSR 报错？
+A: 使用 `<ClientOnly>` 包裹客户端专用组件

package/nuxt.config.example.ts

@@ -0,0 +1,37 @@
+// nuxt.config.ts 使用示例
+export default defineNuxtConfig({
+  modules: [
+    '@neatui/nuxt'
+  ],
+
+  // NeatUI 配置
+  neatui: {
+    // 组件前缀 (可选)
+    prefix: 'Neat', // 组件将以 <NeatButton>, <NeatInput> 等形式使用
+
+    // 主题设置 (可选)
+    theme: 'default', // 'default' | 'dark' | 自定义主题名
+
+    // 自动导入开关 (可选)
+    autoImport: true, // 是否自动导入组件
+
+    // 排除特定组件 (可选)
+    exclude: [
+      // 'SomeComponent' // 不自动导入的组件名
+    ],
+
+    // CSS 变量自定义 (可选)
+    css: {
+      variables: {
+        // 'primary-color': '#007bff',
+        // 'border-radius': '4px',
+        // 'font-size': '14px'
+      }
+    }
+  },
+
+  // 如果需要手动添加样式 (通常不需要，模块会自动处理)
+  css: [
+    // '@neatui/nuxt/dist/style.css'
+  ]
+})

package/package.json

@@ -1,33 +1,56 @@
 {
   "name": "@neatui/nuxt",
-  "version": "0.1.0",
-  "description": "basic component ui",
-  "main": "./src/index.ts",
+  "version": "1.0.1",
+  "description": "NeatUI component library for Nuxt 3",
+  "main": "./src/module.ts",
+  "types": "./src/module.ts",
+  "exports": {
+    ".": {
+      "types": "./src/module.ts",
+      "import": "./src/module.ts",
+      "require": "./src/module.ts"
+    },
+    "./components": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    }
+  },
   "license": "MIT",
   "author": "xiaojunbo",
+  "keywords": ["nuxt", "nuxt-module", "vue", "ui", "components"],
   "peerDependencies": {
+    "@nuxt/kit": "^3.0.0",
+    "nuxt": "^3.0.0",
     "vue": "^3.2.0"
   },
   "scripts": {
-    "build": "rollup -c rollup.config.js"
+    "dev": "nuxi dev playground",
+    "dev:prepare": "nuxi prepare playground",
+    "release": "npm publish",
+    "lint": "echo 'No lint configured'",
+    "test": "echo 'No tests configured'"
   },
   "devDependencies": {
+    "@nuxt/kit": "^3.0.0",
+    "@nuxt/schema": "^3.0.0",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@types/sortablejs": "^1.15.8",
+    "nuxt": "^3.0.0",
     "postcss-scss": "^4.0.9",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^5.1.6"
   },
   "dependencies": {
-    "@fekit/floor": "^2.2.2",
-    "@fekit/follow": "^1.0.10",
+    "@fekit/floor": "^3.0.1",
+    "@fekit/follow": "^1.7.0",
     "@fekit/itable": "^1.1.6",
     "@fekit/pullload": "^1.3.5",
     "@fekit/scale": "^2.0.1",
     "@fekit/scrollto": "^3.0.3",
-    "@fekit/toast": "^2.2.3",
-    "@fekit/url": "^2.0.1",
-    "@fekit/utils": "^2.10.21",
+    "@fekit/toast": "^2.7.2",
+    "@fekit/utils": "^4.3.1",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",
@@ -36,8 +59,8 @@
     "rollup": "^4.18.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-vue": "^6.0.0",
+    "sortablejs": "^1.15.6",
     "swiper": "^11.0.4",
-    "vue-cropper": "^0.6.4",
-    "vuedraggable": "^4.1.0"
+    "vue-cropper": "^0.6.4"
   }
 }

package/src/components/basic/IDraggable.vue

@@ -1,84 +1,106 @@
 <template>
-  <ul>
-    <li
-      v-for="(item, idx) in list || []"
-      :key="idx"
-      class="pr drag-page-move n-sm"
-      draggable="true"
-      @dragstart.self="fMoveSta($event, list, idx)"
-      @dragend.self="fMoveEnd($event, list, idx)"
-      @dragenter.self="fMoveInt($event, list, idx)"
-      @dragover.prevent="fMoveIng($event)"
-      @dragleave="fMoveOut($event)"
-    >
+  <ul ref="listRef" class="drag-list">
+    <li v-for="(item, idx) in props.lists" :key="item.id ?? item.field ?? idx" class="pr drag-page-move">
       <slot :item="item" :idx="idx">{{ item.label }}</slot>
     </li>
   </ul>
 </template>
 
 <script setup lang="ts">
-  import { reactive, PropType } from 'vue';
+  import { ref, PropType, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+  import Sortable, { SortableEvent } from 'sortablejs';
+
   const props = defineProps({
-    list: {
+    lists: {
       type: Array as PropType<any[]>,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
-  const state: any = reactive({});
+  const emit = defineEmits(['update:lists']);
 
-  // 按下
-  const fMoveSta = (e: any, arr: any, idx: any) => {
-    state.__page_moveing = 1;
-    state.__page_moveStaNode = { e, arr, idx };
-  };
-  // 移动
-  const fMoveIng = (e: any) => {
-    if (state.__page_moveing) {
-      const _h = e?.target?.getBoundingClientRect()?.height || 0;
-      const _v = _h / 2 > 0 ? _h / 2 : 0;
-      state.__page_moveEndNodeIsNext = e?.layerY > _v ? 1 : 0;
-      console.log(40, e, _v, e?.layerY > _v ? 'next' : 'prev');
-      e?.target?.setAttribute('data-ins', e?.layerY > _v ? 'next' : 'prev');
-    }
-  };
-  // 移入
-  const fMoveInt = (e: any, arr: any, idx: any, page: any = '') => {
-    if (state.__page_moveing) {
-      state.__page_moveEndNode = { e, arr, idx, page };
-    }
-  };
-  // 移出
-  const fMoveOut = (e: any) => {
-    if (state.__page_moveing) {
-      e?.target?.removeAttribute('data-ins');
-    }
-  };
-  // 松开
-  const fMoveEnd = (_e: any, arr: any, i2: any) => {
-    if (state.__page_moveing) {
-      if (state.__page_moveEndNode) {
-        const [item] = arr.splice(i2, 1);
-        let idx = state.__page_moveEndNode?.idx || 0;
-        if (state.__page_moveEndNodeIsNext && i2 >= idx) {
-          idx = idx + 1;
-        }
-        if (!state.__page_moveEndNodeIsNext && i2 < idx) {
-          idx = idx - 1;
-        }
-        state.__page_moveEndNode?.arr?.splice(idx, 0, item);
-        fMoveOut(state.__page_moveEndNode?.e);
+  const listRef = ref<HTMLElement | null>(null);
+  let sortable: Sortable | null = null;
+
+  // 添加调试日志
+  watch(
+    () => props.lists,
+    (newVal, oldVal) => {
+      // console.log('IDraggable props.lists changed:', {
+      //   newLength: newVal?.length,
+      //   oldLength: oldVal?.length,
+      //   newVal: newVal?.map((item) => item.label || item.field),
+      //   oldVal: oldVal?.map((item) => item.label || item.field)
+      // });
+    },
+    { deep: true },
+  );
+
+  onMounted(() => {
+    nextTick(() => {
+      if (listRef.value) {
+        sortable = Sortable.create(listRef.value, {
+          animation: 200,
+          ghostClass: 'drag-ghost',
+          chosenClass: 'drag-chosen',
+          dragClass: 'drag-dragging',
+          onEnd(evt: SortableEvent) {
+            console.log('Sortable onEnd:', { oldIndex: evt.oldIndex, newIndex: evt.newIndex });
+
+            if (evt.oldIndex !== undefined && evt.newIndex !== undefined && evt.oldIndex !== evt.newIndex) {
+              // 创建新的数组顺序
+              const newList = [...props.lists];
+              const moved = newList.splice(evt.oldIndex, 1)[0];
+              newList.splice(evt.newIndex, 0, moved);
+
+              console.log(
+                'Emitting new list:',
+                newList.map((item) => item.label || item.field),
+              );
+
+              // 通知父组件更新数据
+              emit('update:lists', newList);
+            }
+          },
+        });
       }
-      state.__page_moveing = 0;
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (sortable) {
+      sortable.destroy();
+      sortable = null;
     }
-  };
+  });
 </script>
+
 <style lang="scss">
+  .drag-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
   .drag-page-move {
-    &[data-ins='prev'] {
-      box-shadow: inset 0 1px 0 0 #000;
-    }
-    &[data-ins='next'] {
-      box-shadow: inset 0 -1px 0 0 #000;
+    cursor: move;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.02);
     }
   }
+  .drag-ghost {
+    opacity: 0.4;
+    background: rgba(0, 0, 0, 0.05);
+    border: 2px dashed #ddd;
+  }
+  .drag-chosen {
+    background: rgba(24, 144, 255, 0.08);
+  }
+  .drag-dragging {
+    opacity: 0.8;
+    background: #fff;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    z-index: 1000;
+  }
 </style>

package/src/components/basic/IFollowView.vue

@@ -3,23 +3,24 @@
     <slot>
       <button ui-btn="@a s case :border"><i class="icon icon-dropdown"></i></button>
     </slot>
-  </div>
-  <Teleport to="#ifollow" v-if="$slots.tips">
-    <div
-      ref="tip"
-      :class="tipClass"
-      :style="`position: fixed; pointer-events: none; ${tipStyle}`"
-      ui-tips="@a"
-      :ui-tips-view="state.show ? 1 : 0"
-      @mouseover="hovershow"
-      @mouseout="hoverhide"
-    >
-      <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle" @mousedown="downdom">
-        <slot name="tips"></slot>
-        <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
+    <Teleport to="#ifollow" v-if="$slots.tips">
+      <div
+        ref="tip"
+        :class="tipClass"
+        :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" @mousedown="downdom">
+          <slot name="tips"></slot>
+          <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
+        </div>
       </div>
-    </div>
-  </Teleport>
+    </Teleport>
+  </div>
 </template>
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
@@ -46,6 +47,7 @@
     tipBoxClass?: string;
     tipBoxStyle?: string;
     arrow?: any;
+    clickTipHide?: boolean;
   }
 
   // 入参
@@ -54,12 +56,13 @@
     pos: 'bl',
     event: 'click',
     btnClass: 'dib',
-    btnStyle: 'dib',
+    btnStyle: '',
     tipClass: '',
     tipStyle: '',
     tipBoxClass: '',
     tipBoxStyle: '',
-    arrow: {}
+    arrow: {},
+    clickTipHide: false,
   });
 
   const dom: any = ref(null);
@@ -70,7 +73,7 @@
     show: 0,
     pos: props.pos,
     hover: 0,
-    tipdom: false
+    tipdom: false,
   });
 
   const showTimer: any = ref(null);
@@ -89,7 +92,7 @@
           state.show = 0;
         }, 100);
       }
-    }
+    },
   );
 
   // 开关
@@ -109,7 +112,7 @@
       }
       emits('update:modelValue', state.show);
     },
-    { deep: true }
+    { deep: true },
   );
 
   const hovershow = () => {
@@ -124,6 +127,12 @@
     }
   };
 
+  const clickhide = () => {
+    if (props.clickTipHide) {
+      state.show = 0;
+    }
+  };
+
   const show = () => {
     state.show = 1;
   };
@@ -199,13 +208,13 @@
           ex.value.remove();
         }
       }
-    }
+    },
   );
 
   defineExpose({
     toggle,
     show,
     hide,
-    cancel
+    cancel,
   });
 </script>