@neatui/nuxt 0.1.0 → 1.0.1

package/src/components/loader/TableLoader/TableRender.vue

@@ -0,0 +1,141 @@
+<template>
+  <template v-if="isArray(node.child)">
+    <div v-bind="attrs" v-on="event" v-memo="[node.child, data]">
+      <TableRender v-for="(sub, idx) in node.child" :key="idx" :node="sub" :data="data" />
+    </div>
+  </template>
+  <template v-else-if="node.popup">
+    <IFollowView v-memo="[node.popup, data]">
+      <TableRender :node="{ ...node, popup: null }" :data="data" />
+      <template #tips>
+        <TableRender :node="isFunction(node.popup) ? node.popup(data) : node.popup" :data="data" />
+      </template>
+    </IFollowView>
+  </template>
+  <template v-else>
+    <div v-if="model.value" v-bind="attrs" v-on="event">
+      <div v-if="model.value === 'image'" ui-cover="1:1" v-bind="model.attrs">
+        <div class="pa full bg-case-o-ls r-sm ot-no ol-no" :class="state.isloaded ? 'o-no' : 'o-ms'" ui-flex="col cm"><i ui-load="@d"></i></div>
+        <img ref="img" class="r-sm" :src="value" @load="state.isloaded = 1" />
+      </div>
+      <label v-else-if="model.value === 'switch'" ui-form="@a type:switch" @click.prevent>
+        <input type="checkbox" :checked="value" />
+        <span v-if="model.attrs?.label">{{ model.attrs?.label }}</span>
+      </label>
+    </div>
+    <div v-else v-bind="attrs" v-on="event" v-html="value"></div>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted, reactive, ref } from 'vue';
+  import { isFunction, isArray, isObject, isString, findEnumName } from '@fekit/utils';
+  import { useRoute, useRouter } from 'vue-router';
+  import TableRender from './TableRender.vue';
+  import { IFollowView } from '../../basic';
+
+  const route = useRoute();
+  const router = useRouter();
+
+  const props: any = defineProps({
+    node: {
+      type: Object,
+      default: () => ({}),
+    },
+    data: {
+      type: [Object],
+      default: () => ({}),
+    },
+  });
+
+  const img = ref<HTMLImageElement | null>(null);
+  onMounted(() => {
+    if (img.value) {
+      state.isloaded = img.value.complete && img.value.naturalWidth > 0 ? 1 : 0;
+    }
+  });
+
+  const state: any = reactive({
+    isloaded: 0,
+  });
+
+  // 属性处理
+  const attrs = computed(() => {
+    const a = props.node.attrs;
+    let attrs = isFunction(a) ? a?.(props.data) : a;
+
+    // 确保 attrs 存在
+    if (!attrs) attrs = {};
+    else attrs = { ...attrs };
+
+    // 处理 class 属性
+    if (attrs.class) {
+      attrs.class = attrs.class.split(/\s+/);
+      if (!attrs.class.some((c: string) => c === 'wrap' || c === 'nowrap')) {
+        attrs.class.push('nowrap');
+      }
+    } else {
+      attrs.class = ['nowrap'];
+    }
+
+    return attrs;
+  });
+
+  // 模型处理
+  const model: any = computed(() => {
+    const m = props.node.model;
+    if (!m) return { value: '', attrs: {} };
+
+    const model = isFunction(m) ? m(props.data) : m;
+
+    let value = '';
+    let attrs = {};
+    if (isString(model)) {
+      value = model;
+    } else if (isArray(model)) {
+      value = model[0] ?? '';
+      attrs = isObject(model[1]) ? model[1] : {};
+    }
+    value = value.toString().toLowerCase();
+
+    return { value, attrs };
+  });
+
+  // 枚举处理
+  const enums = computed(() => {
+    const e = props.node.enums;
+    return isFunction(e) ? e(props.data) : e;
+  });
+
+  // 数值处理
+  const value = computed(() => {
+    const n = props?.node;
+    const v = props?.data?.[n.field];
+    return n?.value !== null && n?.value !== undefined
+      ? isFunction(n?.value)
+        ? n?.value(props?.data)
+        : n?.value
+      : findEnumName(enums.value, v) !== null && findEnumName(enums.value, v) !== undefined
+        ? findEnumName(enums.value, v)
+        : '‐‐';
+  });
+
+  // 事件处理 (直接使用 computed)
+  const event = computed(() => {
+    let e = props.node.event;
+    if (isFunction(e)) {
+      e = e(props.data);
+    }
+    const events: any = {};
+    if (isObject(e)) {
+      for (const key in e) {
+        const fun = e[key];
+        if (isFunction(fun)) {
+          events[key] = (...args: any) => {
+            return fun({ data: props.data, route, router }, ...args);
+          };
+        }
+      }
+    }
+    return events;
+  });
+</script>

package/src/components/loader/TableLoader/index.ts

@@ -1,2 +1,49 @@
+import { isFunction } from '@fekit/utils';
 import TableLoader from './TableLoader.vue';
+
+// 类型定义
+interface ListItem {
+  __selected?: boolean;
+  [key: string]: any;
+}
+
+type KeyExtractor<T = ListItem> = string | ((item: T) => any);
+
 export default TableLoader;
+
+// 是否有选中记录
+export const hasSelected = (lists: ListItem[] = []): boolean => {
+  return lists.some((item) => item.__selected === true);
+};
+
+// 获取选中记录的数量
+export const getSelectedCount = (lists: ListItem[] = []): number => {
+  return lists.filter((item) => item.__selected === true).length;
+};
+
+// 获取选中的记录
+export const getSelected = <T extends Record<string, any> = ListItem>(lists: T[] = [], key: KeyExtractor<T> = ''): any[] => {
+  return (
+    lists
+      ?.filter((item: T) => {
+        return item.__selected === true;
+      })
+      ?.map((item: T) => {
+        return isFunction(key) ? (key as (item: T) => any)(item) : key ? item[key as string] : item;
+      }) || []
+  );
+};
+
+// 全选计算属性
+export function allSelected(lists: ListItem[] = []) {
+  return {
+    get(): boolean {
+      return lists.length > 0 && lists.every((item) => item.__selected === true);
+    },
+    set(value: boolean): void {
+      lists.forEach((item) => {
+        item.__selected = value;
+      });
+    },
+  };
+}

package/src/components/loader/index.ts

@@ -1,5 +1,6 @@
-import FormLoader from './FormLoader';
+import FormLoader from './FormLoader/FormLoader@v2.vue';
 import LimitLoader from './LimitLoader';
-import TableLoader from './TableLoader';
+export * from './TableLoader/index';
+import TableLoader from './TableLoader/TableLoader.vue';
 import ViewLoader from './ViewLoader';
 export { FormLoader, LimitLoader, TableLoader, ViewLoader };

package/src/components/tools/Pagination@a.vue

@@ -1,9 +1,9 @@
 <template>
-  <div ui-pagination="@a" class="full-x pading" ui-flex="row rm">
+  <div ui-pagination="@a" class="w-full pading" ui-flex="row rm">
     <div class="ml-sl ar mob-ac" ui-flex="row rm">
       <div class="mx-ss-sub" ui-flex="row">
         <div v-if="state.showTotal" ui-flex="row cm" ui-hide="<pad">共 {{ data[defined.total || 'total'] || 0 }} 条</div>
-        <button :ui-btn="`@a s read :border :square ${data[defined.current || 'current'] > 1 ? '' : ':disabled'}`" @click="prev">
+        <button :ui-btn="`@a s read :border :square ${data[defined.page || 'page'] > 1 ? '' : ':disabled'}`" @click="prev">
           <svg
             style="width: 1em; height: 1em"
             t="1701228540398"
@@ -23,7 +23,7 @@
         </button>
         <div ui-tips="@a co:well ux:hover">
           <div ui-btn="@a s read :border">
-            <code>{{ data[defined.current || 'current'] || 0 }}/{{ data[defined.totalPages || 'totalPages'] || 0 }}</code>
+            <code>{{ data[defined.page || 'page'] || 0 }}/{{ data[defined.totalPages || 'totalPages'] || 0 }}</code>
             <svg
               style="width: 1em; height: 1em"
               t="1701229420486"
@@ -45,7 +45,7 @@
             <div class="w-mm max-h-ls" ui-scroll=":y s">
               <ul class="n-sl n-ss-sub dib-sub">
                 <li v-for="item in state.lists" :key="item">
-                  <button :ui-btn="`@a s ${item === data[defined.current || 'current'] ? 'main' : 'read :border'}`" @click="page(item)">
+                  <button :ui-btn="`@a s ${item === data[defined.page || 'page'] ? 'main' : 'read :border'}`" @click="page(item)">
                     <code>{{ item }}</code>
                   </button>
                 </li>
@@ -53,7 +53,7 @@
             </div>
           </div>
         </div>
-        <button :ui-btn="`@a s read :border :square ${data[defined.current || 'current'] < data[defined.totalPages || 'totalPages'] ? '' : ':disabled'}`" @click="next">
+        <button :ui-btn="`@a s read :border :square ${data[defined.page || 'page'] < data[defined.totalPages || 'totalPages'] ? '' : ':disabled'}`" @click="next">
           <svg style="width: 1em; height: 1em" class="icon co-read" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2426" width="64" height="64">
             <path
               d="M341.63640988 781.41564784c20.63742578 21.22981847 54.12571728 21.22981847 74.81456101 0l265.95100164-273.75421824c20.62728703-21.26747667 20.62728703-55.75008988 0-76.97556317l-265.95100164-273.74407946c-20.68449855-21.26747667-54.17423844-21.26747667-74.81456101 0-20.67291141 21.23706043-20.67291142 55.71170748 0 76.98497771l228.55639458 235.24869384-228.55567038 235.22117436c-20.67218722 21.26747667-20.67146302 55.74357212 0 77.02263594l0 0z"
@@ -111,23 +111,22 @@
 <script setup lang="ts">
   import { reactive, computed, watch } from 'vue';
   import { useRoute } from 'vue-router';
-  import { isObject } from '@fekit/utils';
 
   interface ModelValueProps {
     pageSize?: number;
-    current?: number;
+    page?: number;
     [key: string]: any;
   }
 
   interface DataProps {
     total?: number;
     totalPages?: number;
-    current?: number;
+    page?: number;
     [key: string]: any;
   }
   interface DefinedProps {
     // 当前页
-    current?: string;
+    page?: string;
     // 总页数
     totalPages?: string;
     // 总条数
@@ -149,7 +148,7 @@
     id: '',
     modelValue: () => ({}),
     data: () => ({}),
-    defined: () => ({})
+    defined: () => ({}),
   });
 
   const emits = defineEmits(['update:modelValue', 'page', 'size']);
@@ -157,7 +156,7 @@
     id: computed(() => (props.id || 'PAGINATION' + route.path?.replace(/\//g, '_')).toUpperCase()),
     showTotal: true,
     list: computed(() => {
-      const _page = Number(props.data[props.defined.current || 'current'] || 1);
+      const _page = Number(props.data[props.defined.page || 'page'] || 1);
       const list = [_page];
       if (_page > 1) {
         list.unshift(_page - 1);
@@ -185,26 +184,26 @@
         _lists.push(i);
       }
       return _lists;
-    })
+    }),
   });
 
   const prev = () => {
-    const _page = Number(props.data[props.defined.current || 'current']) - 1 < 1 ? 1 : Number(props.data[props.defined.current || 'current']) - 1;
-    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.current || 'current']: _page } });
+    const _page = Number(props.data[props.defined.page || 'page']) - 1 < 1 ? 1 : Number(props.data[props.defined.page || 'page']) - 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.page || 'page']: _page } });
     emits('page', _page);
   };
 
   const next = () => {
     const _page =
-      Number(props.data[props.defined.current || 'current']) + 1 > props.data[props.defined.totalPages || 'totalPages']
+      Number(props.data[props.defined.page || 'page']) + 1 > props.data[props.defined.totalPages || 'totalPages']
         ? props.data[props.defined.totalPages || 'totalPages']
-        : Number(props.data[props.defined.current || 'current']) + 1;
-    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.current || 'current']: _page } });
+        : Number(props.data[props.defined.page || 'page']) + 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.page || 'page']: _page } });
     emits('page', _page);
   };
 
   const page = (idx: any) => {
-    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.current || 'current']: idx } });
+    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.page || 'page']: idx } });
     emits('page', idx);
   };
 

package/src/components/tools/Pagination@b.vue

@@ -13,7 +13,7 @@
     </div>
     <div class="ml-sl ar mob-ac">
       <div class="fr mob-fn m-ss-sub" ui-flex="row rm">
-        <button class="flex-fixed" :ui-btn="`@a s read :border :square ${data.current > 1 ? '' : ':disabled'}`" @click="prev">
+        <button class="flex-fixed" :ui-btn="`@a s read :border :square ${data.page > 1 ? '' : ':disabled'}`" @click="prev">
           <svg
             style="width: 1em; height: 1em"
             t="1701228540398"
@@ -32,15 +32,15 @@
           </svg>
         </button>
 
-        <button class="flex-fixed" v-for="idx in state.list" :key="idx" :ui-btn="`@a s ${idx === data.current ? 'main' : 'read :border'}`" ui-hide="<pad" @click="page(idx)">
+        <button class="flex-fixed" v-for="idx in state.list" :key="idx" :ui-btn="`@a s ${idx === data.page ? 'main' : 'read :border'}`" ui-hide="<pad" @click="page(idx)">
           <code>{{ idx }}</code>
         </button>
         <button class="flex-fixed" ui-btn="@a s read :border" ui-hide=">mob">
           <span>当前第</span>
-          <code class="nx-ss">{{ data.current || 1 }}</code>
+          <code class="nx-ss">{{ data.page || 1 }}</code>
           <span>页</span>
         </button>
-        <button class="flex-fixed" :ui-btn="`@a s read :border :square ${data.current < data.totalPages ? '' : ':disabled'}`" @click="next">
+        <button class="flex-fixed" :ui-btn="`@a s read :border :square ${data.page < data.totalPages ? '' : ':disabled'}`" @click="next">
           <svg style="width: 1em; height: 1em" class="icon co-read" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2426" width="64" height="64">
             <path
               d="M341.63640988 781.41564784c20.63742578 21.22981847 54.12571728 21.22981847 74.81456101 0l265.95100164-273.75421824c20.62728703-21.26747667 20.62728703-55.75008988 0-76.97556317l-265.95100164-273.74407946c-20.68449855-21.26747667-54.17423844-21.26747667-74.81456101 0-20.67291141 21.23706043-20.67291142 55.71170748 0 76.98497771l228.55639458 235.24869384-228.55567038 235.22117436c-20.67218722 21.26747667-20.67146302 55.74357212 0 77.02263594l0 0z"
@@ -133,13 +133,13 @@
 
   interface ModelValueProps {
     pageSize: number;
-    current: number;
+    page: number;
   }
 
   interface DataProps {
     total: number;
     totalPages: number;
-    current: number;
+    page: number;
   }
   // 类型
   interface Props {
@@ -155,15 +155,15 @@
     id: '',
     modelValue: () => ({
       pageSize: 0,
-      current: 0
+      page: 0,
     }),
     data: () => {
       return {
         total: 0,
         totalPages: 0,
-        current: 0
+        page: 0,
       };
-    }
+    },
   });
 
   const emits = defineEmits(['update:modelValue', 'page', 'size']);
@@ -172,7 +172,7 @@
     showTotal: true,
     id: computed(() => (props.id || 'PAGINATION' + route.path?.replace(/\//g, '_')).toUpperCase()),
     list: computed(() => {
-      const _page = Number(props.data.current || 1);
+      const _page = Number(props.data.page || 1);
       const list = [_page];
       if (_page > 1) {
         list.unshift(_page - 1);
@@ -193,23 +193,23 @@
         }
       }
       return list;
-    })
+    }),
   });
 
   const prev = () => {
-    const _page = Number(props.data.current) - 1 < 1 ? 1 : Number(props.data.current) - 1;
-    emits('update:modelValue', { ...props.modelValue, ...{ current: _page } });
+    const _page = Number(props.data.page) - 1 < 1 ? 1 : Number(props.data.page) - 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ page: _page } });
     emits('page', _page);
   };
 
   const next = () => {
-    const _page = Number(props.data.current) + 1 > props.data.totalPages ? props.data.totalPages : Number(props.data.current) + 1;
-    emits('update:modelValue', { ...props.modelValue, ...{ current: _page } });
+    const _page = Number(props.data.page) + 1 > props.data.totalPages ? props.data.totalPages : Number(props.data.page) + 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ page: _page } });
     emits('page', _page);
   };
 
   const page = (idx: any) => {
-    emits('update:modelValue', { ...props.modelValue, ...{ current: idx } });
+    emits('update:modelValue', { ...props.modelValue, ...{ page: idx } });
     emits('page', idx);
   };
 

package/src/index.ts

@@ -1,5 +1,6 @@
 // 数据
-export * from './store/myui';
+export * from './store/frame';
+export * from './utils/theme';
 
 // 组件
 export * from './components/basic';

package/src/module.ts

@@ -0,0 +1,169 @@
+import { defineNuxtModule, addComponent, createResolver } from '@nuxt/kit'
+import { readdirSync, statSync } from 'fs'
+import { join, extname, basename } from 'path'
+
+export interface ModuleOptions {
+  /**
+   * 组件前缀
+   * @default 'Neat'
+   */
+  prefix?: string
+
+  /**
+   * 主题配置
+   * @default 'default'
+   */
+  theme?: 'default' | 'dark' | string
+
+  /**
+   * 是否启用自动导入
+   * @default true
+   */
+  autoImport?: boolean
+
+  /**
+   * 要排除的组件列表
+   * @default []
+   */
+  exclude?: string[]
+
+  /**
+   * CSS配置
+   */
+  css?: {
+    variables?: Record<string, string>
+  }
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: '@neatui/nuxt',
+    configKey: 'neatui',
+    compatibility: {
+      nuxt: '^3.0.0'
+    }
+  },
+  defaults: {
+    prefix: 'Neat',
+    theme: 'default',
+    autoImport: true,
+    exclude: [],
+    css: {}
+  },
+  setup(options: ModuleOptions, nuxt: any) {
+    const { resolve } = createResolver(import.meta.url)
+
+    // 注册组件
+    if (options.autoImport) {
+      registerComponents(resolve, options)
+    }
+
+    // 添加CSS
+    // nuxt.options.css.push(resolve('./runtime/css/index.css'))
+
+    // 添加全局样式变量
+    if (options.css?.variables) {
+      const cssVars = Object.entries(options.css.variables)
+        .map(([key, value]) => `--neat-${key}: ${value};`)
+        .join('\n')
+
+      nuxt.options.css.push({
+        src: `data:text/css,:root { ${cssVars} }`,
+        lang: 'css'
+      } as any)
+    }
+
+    // 添加类型定义
+    nuxt.hook('prepare:types', ({ references }: any) => {
+      references.push({ path: resolve('./runtime/types.d.ts') })
+    })
+  }
+})
+
+/**
+ * 自动注册组件
+ */
+function registerComponents(resolve: (path: string) => string, options: ModuleOptions) {
+  const componentsDir = resolve('./components')
+
+  try {
+    // 扫描所有组件目录
+    const componentDirs = ['basic', 'display', 'form', 'icon', 'loader', 'tools']
+
+    for (const dir of componentDirs) {
+      const dirPath = join(componentsDir, dir)
+
+      try {
+        const files = readdirSync(dirPath)
+
+        for (const file of files) {
+          const filePath = join(dirPath, file)
+          const stat = statSync(filePath)
+
+          if (stat.isFile() && extname(file) === '.vue') {
+            const componentName = basename(file, '.vue')
+
+            // 跳过版本化组件 (包含@的)
+            if (componentName.includes('@')) continue
+
+            // 跳过排除的组件
+            if (options.exclude?.includes(componentName)) continue
+
+            // 注册组件
+            addComponent({
+              name: `${options.prefix}${componentName}`,
+              filePath: filePath,
+              global: true
+            })
+          } else if (stat.isDirectory()) {
+            // 处理嵌套目录 (如 SelectTree)
+            try {
+              const nestedFiles = readdirSync(filePath)
+              for (const nestedFile of nestedFiles) {
+                if (extname(nestedFile) === '.vue') {
+                  const nestedComponentName = basename(nestedFile, '.vue')
+
+                  if (nestedComponentName.includes('@')) continue
+                  if (options.exclude?.includes(nestedComponentName)) continue
+
+                  addComponent({
+                    name: `${options.prefix}${nestedComponentName}`,
+                    filePath: join(filePath, nestedFile),
+                    global: true
+                  })
+                }
+              }
+            } catch {
+              // 忽略嵌套目录错误
+            }
+          }
+        }
+      } catch {
+        // 目录不存在时忽略
+        console.warn(`@neatui/nuxt: Directory ${dir} not found, skipping...`)
+      }
+    }
+
+    // 特殊处理 loader 组件 (从 index.ts 导出)
+    try {
+      addComponent({
+        name: `${options.prefix}FormLoader`,
+        filePath: resolve('./components/loader/FormLoader/FormLoader@v2.vue'),
+        global: true
+      })
+
+      addComponent({
+        name: `${options.prefix}TableLoader`,
+        filePath: resolve('./components/loader/TableLoader/TableLoader.vue'),
+        global: true
+      })
+    } catch {
+      console.warn('@neatui/nuxt: Some loader components not found')
+    }
+
+  } catch (error) {
+    console.error('@neatui/nuxt: Error registering components:', error)
+  }
+}
+
+// 导出类型 (已在上面定义过，这里不需要重复导出)

package/src/runtime/types.d.ts

@@ -0,0 +1,36 @@
+declare module '@nuxt/schema' {
+  interface NuxtConfig {
+    neatui?: {
+      /**
+       * 组件前缀
+       * @default 'Neat'
+       */
+      prefix?: string
+
+      /**
+       * 主题配置
+       * @default 'default'
+       */
+      theme?: 'default' | 'dark' | string
+
+      /**
+       * 是否启用自动导入
+       * @default true
+       */
+      autoImport?: boolean
+
+      /**
+       * 要排除的组件列表
+       * @default []
+       */
+      exclude?: string[]
+
+      /**
+       * CSS配置
+       */
+      css?: {
+        variables?: Record<string, string>
+      }
+    }
+  }
+}

package/src/store/{myui.ts → frame.ts}

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 
 // 基础数据
-export const useMyuiStore = defineStore('myui', {
+export const useFrameStore = defineStore('frame', {
   state: () => {
     return {
       full: localStorage.getItem('neatui_full') || 0,
@@ -10,7 +10,7 @@ export const useMyuiStore = defineStore('myui', {
       // 主题
       theme: localStorage.getItem('neatui_theme') || document?.documentElement?.getAttribute('theme') || 'auto',
       // 侧边
-      side: 1
+      side: 1,
     };
   },
   getters: {},
@@ -45,6 +45,6 @@ export const useMyuiStore = defineStore('myui', {
         document.documentElement.setAttribute('size', this.size);
         then(this.size);
       }
-    }
-  }
+    },
+  },
 });

package/src/utils/theme.ts

@@ -0,0 +1,14 @@
+// 主题
+export const theme = (then: (theme: string) => void = () => {}) => {
+  // 自动设置主题
+  const auto = (scheme: any) => {
+    const _theme = window.localStorage.getItem('theme') || (scheme.matches ? 'dark' : 'light');
+    document.documentElement.setAttribute('theme', _theme);
+    then(_theme);
+  };
+  // 监听系统主题
+  const scheme: any = window.matchMedia('(prefers-color-scheme: dark)');
+  auto(scheme);
+  // 监控主题事件
+  scheme.addListener(auto);
+};