@neatui/vue 2.17.5 → 3.0.0

package/src/store/frame.ts

@@ -1,14 +1,22 @@
 import { defineStore } from 'pinia';
+import { env } from '@fekit/utils';
+
+const getStorageItem = (key: string) => (env.client ? window.localStorage.getItem(key) : null);
+const setStorageItem = (key: string, value: string) => {
+  if (env.client) {
+    window.localStorage.setItem(key, value);
+  }
+};
 
 // 基础数据
 export const useFrameStore = defineStore('frame', {
   state: () => {
     return {
-      full: localStorage.getItem('neatui_full') || 0,
+      full: getStorageItem('neatui_full') || 0,
       // 字号
-      size: localStorage.getItem('neatui_size') || document?.documentElement?.getAttribute('size') || 'm',
+      size: getStorageItem('neatui_size') || (env.client ? document.documentElement.getAttribute('size') : null) || 'm',
       // 主题
-      theme: localStorage.getItem('neatui_theme') || document?.documentElement?.getAttribute('theme') || 'auto',
+      theme: getStorageItem('neatui_theme') || (env.client ? document.documentElement.getAttribute('theme') : null) || 'auto',
       // 侧边
       side: 1,
     };
@@ -19,30 +27,30 @@ export const useFrameStore = defineStore('frame', {
     async setfull(then = (res: any) => {}) {
       const full = this.full ? 0 : 1;
       this.full = full;
-      localStorage.setItem('neatui_full', `${full}`);
+      setStorageItem('neatui_full', `${full}`);
       then(full);
     },
     // 设置系统主题
     async settheme(theme: any = '', then = (res: any) => {}) {
       if (theme) {
-        localStorage.setItem('neatui_theme', theme);
+        setStorageItem('neatui_theme', theme);
         this.theme = theme;
-        document.documentElement.setAttribute('theme', theme);
+        if (env.client) document.documentElement.setAttribute('theme', theme);
         then(theme);
       } else {
-        document.documentElement.setAttribute('theme', this.theme);
+        if (env.client) document.documentElement.setAttribute('theme', this.theme);
         then(this.theme);
       }
     },
     // 设置系统字号
     async setsize(size: any = '', then = (res: any) => {}) {
       if (size) {
-        localStorage.setItem('neatui_size', size);
+        setStorageItem('neatui_size', size);
         this.size = size;
-        document.documentElement.setAttribute('size', size);
+        if (env.client) document.documentElement.setAttribute('size', size);
         then(size);
       } else {
-        document.documentElement.setAttribute('size', this.size);
+        if (env.client) document.documentElement.setAttribute('size', this.size);
         then(this.size);
       }
     },

package/src/utils/theme.ts

@@ -1,5 +1,8 @@
+import { env } from '@fekit/utils';
+
 // 主题
 export const theme = (then: (theme: string) => void = () => {}) => {
+  if (!env.client) return;
   // 自动设置主题
   const auto = (scheme: any) => {
     const _theme = window.localStorage.getItem('theme') || (scheme.matches ? 'dark' : 'light');

package/src/components/basic/follow.ts

@@ -1,133 +0,0 @@
-import ResizeObserver from 'resize-observer-polyfill';
-import raf from 'raf';
-
-class Follow {
-  box: any[];
-  dom: any;
-  tip: any;
-  ing: any;
-  sub: any;
-  obs: any;
-  fun: (status: any) => void;
-  private css: () => void;
-  z: number;
-  constructor(dom: any, tip: any, fun = (_status: any) => {}) {
-    this.dom = dom;
-    this.tip = tip;
-    this.box = [];
-    this.css = this.setcss.bind(this);
-    this.fun = fun;
-    this.sub = this.tip.firstElementChild;
-    this.z = 0;
-  }
-  setcss() {
-    if (!this.ing) {
-      raf(() => {
-        this.ing = false;
-        const dr = this.dom?.getBoundingClientRect() || { width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0 };
-        const sr = this.sub?.getBoundingClientRect() || { height: 0 };
-        this.tip.style.inset = `${dr.top}px auto auto ${dr.left}px`;
-        this.tip.style.width = dr.width + 'px';
-        this.tip.style.height = dr.height + 'px';
-        this.fun('');
-        this.box.forEach((e: any) => {
-          const _ar = { top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth };
-          const ar = e === window ? _ar : e?.getBoundingClientRect() || _ar;
-          if (dr.bottom < ar.top || dr.top > ar.bottom || dr.right < ar.left || dr.left > ar.right) {
-            this.tip.style.opacity = '0';
-            this.sub.style.pointerEvents = 'none';
-          } else {
-            this.tip.style.opacity = '';
-            this.sub.style.pointerEvents = '';
-          }
-          if (dr.bottom + sr.height + 10 > ar.bottom) {
-            this.fun('b');
-          }
-        });
-        const tr = this.tip?.getBoundingClientRect() || { left: 0 };
-        const x = this.sub.offsetLeft + tr.left;
-        const arrow = this.sub.querySelector('[ui-tips-arrow]');
-        if (x < 0) {
-          this.sub.style.transform = `translate3d(${-x}px,0,0)`;
-          if (arrow && arrow.style) {
-            arrow.style.transform = `translateX(${x}px) rotate(45deg)`;
-          }
-        } else {
-          this.sub.style.transform = '';
-          if (arrow && arrow.style) {
-            arrow.style.transform = '';
-          }
-        }
-      });
-      this.ing = true;
-    }
-  }
-  listen() {
-    // 向上查询有滚动条的元素
-    const _find = (e: any) => {
-      // 判断是否为DOM节点
-      if (e) {
-        if (e.nodeType === 1) {
-          const css: any = window.getComputedStyle(e);
-          // 查询所有父组节点的最高层级
-          if (!isNaN(css.zIndex) && css.zIndex >= this.z) {
-            this.z = Number(css.zIndex) + 10;
-          } else {
-            this.z += 1;
-          }
-          // 节点是否有滚动条
-          if (
-            (css.overflowY === 'auto' || css.overflowY === 'scroll' || css.overflowX === 'auto' || css.overflowX === 'scroll') &&
-            (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth)
-          ) {
-            this.box.push(e);
-          }
-          _find(e.parentNode);
-        } else if (e.nodeType === 9) {
-          console.log(42, e, e.nodeType);
-          this.box.push(window);
-        }
-      }
-    };
-    _find(this.dom);
-
-    // 自动层级
-    if (window.getComputedStyle(this.tip).zIndex) {
-      this.tip.style.zIndex = `${this.z}`;
-    }
-
-    this.css();
-    // 监听窗口尺寸变化
-    window.addEventListener('resize', this.css);
-    window.addEventListener('click', this.css);
-    // 监听滚动条的元素
-    this.box.forEach((e: any) => {
-      e.addEventListener('scroll', this.css);
-    });
-    // 监听移入事件
-    this.dom?.addEventListener('mouseenter', this.css);
-    // 监听参考元素变化
-    this.obs = new ResizeObserver(this.css);
-    if (this.dom) {
-      this.obs?.observe(this.dom);
-    }
-    if (this.sub) {
-      this.obs?.observe(this.sub);
-    }
-  }
-  remove() {
-    // console.log('移除监听');
-    // 清除窗口尺寸变化事件监听器
-    window.removeEventListener('resize', this.css);
-    window.removeEventListener('click', this.css);
-    // 清除滚动条元素的事件监听器
-    this.box.forEach((e: any) => {
-      e.removeEventListener('scroll', this.css);
-    });
-    // 清除鼠标移入事件监听器
-    this.dom?.removeEventListener('mouseenter', this.css);
-    // 清除监听参考元素变化
-    this.obs?.disconnect();
-  }
-}
-export default Follow;

package/src/components/loader/FormLoader/FormLoader@v2.vue

@@ -1,422 +0,0 @@
-<template>
-  <div :ui-row="rows" class="n-sl-sub">
-    <template v-for="(col, idx) in state.form" :key="idx">
-      <div v-if="!col.clear" :id="col._fid" :ui-col="col.media" :ui-flex="`${vertical ? 'col xm' : 'row lt'}`">
-        <template v-if="col.label">
-          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" class="o-ls">
-            <template v-if="col.label == '*'"></template>
-            <template v-else>
-              <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk pr" style="left: 0.1em">﹡</b>
-              <span>{{ col.label ? col.label + ':' : '' }}</span>
-            </template>
-          </h6>
-          <p v-else :class="`${clh({ ...(col.model[1] || {}) })}`" :style="`width:${state._lw + 'em'}; max-width:50%;`" class="ar nr-sm flex-fixed o-ls">
-            <template v-if="col.label == '*'"></template>
-            <template v-else>
-              <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk">﹡</b>
-              <span>{{ col.label ? col.label + ':' : '' }}</span>
-            </template>
-          </p>
-        </template>
-        <Input v-if="col.model[0] === 'Input'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="w-full" v-bind="{ ...(col.model[1] || {}) }" />
-        <Select
-          v-else-if="col.model[0] === 'Select'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col?.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        ></Select>
-        <SelectList
-          v-else-if="col.model[0] === 'SelectList'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col?.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <SelectTags
-          v-else-if="col.model[0] === 'SelectTags'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col?.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <SelectPicker
-          v-else-if="col.model[0] === 'SelectPicker'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col?.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <SearchSelect
-          v-else-if="col.model[0] === 'SearchSelect'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <MoreSelect
-          v-else-if="col.model[0] === 'MoreSelect'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <MoreSelectList
-          v-else-if="col.model[0] === 'MoreSelectList'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <MoreSelectTags
-          v-else-if="col.model[0] === 'MoreSelectTags'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <MoreSelectPicker
-          v-else-if="col.model[0] === 'MoreSelectPicker'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <SearchMoreSelect
-          v-else-if="col.model[0] === 'SearchMoreSelect'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <PageSelect
-          v-else-if="col.model[0] === 'PageSelect'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <SelectTree
-          v-else-if="col.model[0] === 'SelectTree'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <DatePicker
-          v-else-if="col.model[0] === 'DatePicker'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <DateRangePicker
-          v-else-if="col.model[0] === 'DateRangePicker'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <ImgUpload v-else-if="col.model[0] === 'ImgUpload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-        <Upload v-else-if="col.model[0] === 'Upload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-        <Textarea
-          v-else-if="col.model[0] === 'Textarea'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :rules="col.rules"
-          v-bind="{ ...(col.model[1] || {}) }"
-        ></Textarea>
-        <Switch v-else-if="col.model[0] === 'Switch'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-        <Checkbox v-else-if="col.model[0] === 'Checkbox'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-        <Tree v-else-if="col.model[0] === 'Tree'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="mt-sm" v-bind="{ ...(col.model[1] || {}) }" />
-        <Cascader
-          v-else-if="col.model[0] === 'Cascader'"
-          v-model="col._data[col.field]"
-          :interacted="interacted"
-          :options="col.enums"
-          :rules="col.rules"
-          class="w-full"
-          v-bind="{ ...(col.model[1] || {}) }"
-        />
-        <template v-else>
-          <slot v-if="col.slot" :name="col.slot" :col="col"></slot>
-          <slot v-else-if="col.model[0]" :name="col.model[0]" :col="col"></slot>
-          <slot v-else :name="col.field" :col="col"></slot>
-        </template>
-      </div>
-    </template>
-    <div :ui-flex="`${vertical ? 'col xm' : 'row xt'}`">
-      <div v-if="vertical">
-        <slot name="submit"></slot>
-      </div>
-      <div v-else :style="`padding-left:${state._lw + 'em'};`">
-        <slot name="submit"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { watch, reactive, onBeforeUnmount, nextTick } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { isString, isObject, isFunction, deepcopy, isArray } from '@fekit/utils';
-  import {
-    Input,
-    Switch,
-    Checkbox,
-    Textarea,
-    Select,
-    SelectList,
-    SelectTags,
-    SelectPicker,
-    SearchSelect,
-    PageSelect,
-    SelectTree,
-    MoreSelect,
-    MoreSelectList,
-    MoreSelectTags,
-    MoreSelectPicker,
-    DatePicker,
-    DateRangePicker,
-    SearchMoreSelect,
-    ImgUpload,
-    Upload,
-    Cascader,
-  } from '../../form';
-  import { Tree } from '../../display';
-
-  const route = useRoute();
-  const router = useRouter();
-
-  // 计算Label行高
-  const clh = ({ sz = '' }: any = {}) => {
-    const lhs: any = { xs: 'lh-sm', s: 'lh-mm', m: 'lh-ls', l: 'lh-ll', xl: 'lh-xl' };
-    return lhs[sz] || 'lh-ls';
-  };
-
-  // 计算Label宽度
-  function clw(label: any = '') {
-    let emWidth = 0;
-    if (isString(label)) {
-      for (let i = 0; i < label.length; i++) {
-        const char = label[i];
-        if (/^[\u4e00-\u9fa5]+$/.test(char)) {
-          emWidth += 1;
-        } else {
-          emWidth += 0.5;
-        }
-      }
-    }
-    return emWidth;
-  }
-
-  // 入参
-  const props: any = defineProps({
-    // 用户是否交互
-    interacted: {
-      type: Boolean,
-      default: false,
-    },
-    // JSON规则
-    form: {
-      type: Object,
-      default: () => ({}),
-    },
-    // 表单数据
-    data: {
-      type: Object as any,
-      default: () => ({}),
-    },
-    // 栅格系统
-    rows: {
-      type: String,
-      default: 'mob-24 pad-12 dpc-8',
-    },
-    // 如果表单是数组的话这里传入下标
-    idx: {
-      type: [String, Number],
-      default: '',
-    },
-    // 是否垂直排列
-    vertical: {
-      type: Boolean,
-      default: false,
-    },
-  });
-
-  // 数据
-  const state: any = reactive({
-    form: [],
-    _lw: 6,
-  });
-
-  // 监听结构
-  const unwatchs: any = [];
-  watch(
-    [() => props.form, () => props.data, () => props.idx],
-    ([form = []]) => {
-      const wkeys: any = {};
-      const onces: any = [];
-      state.form = deepcopy(form)?.map((item: any = {}, idx: number) => {
-        // 计算Label宽度
-        const _w = clw(item.label) + 2;
-        if (_w > state._lw) {
-          state._lw = _w;
-        }
-
-        if (isObject(item)) {
-          for (const key in item) {
-            let val = item[key] || {};
-            // 处理函数
-            if (isFunction(val)) {
-              val = val(deepcopy(props.data), props.form, route, router);
-              if (isObject(val)) {
-                if (!isFunction(val.setup)) {
-                  val.setup = item[key];
-                }
-                if (!isArray(val.watch)) {
-                  val.watch = deepcopy(form).map(({ field = '' }: any = {}) => field);
-                }
-              } else {
-                val = { value: val, setup: item[key], watch: deepcopy(form).map(({ field = '' }: any = {}) => field) };
-              }
-            }
-            // 对象处理
-            if (isObject(val)) {
-              const { value = null, setup = () => {}, watch: _watch = [] } = val || {};
-              // 监听字段为空
-              if (_watch.length) {
-                _watch?.forEach((k: any) => {
-                  if (wkeys[k]) {
-                    wkeys[k].push({ idx, key, value, setup });
-                  } else {
-                    wkeys[k] = [{ idx, key, value, setup }];
-                  }
-                });
-              } else {
-                onces.push({ idx, key, value, setup });
-              }
-              item[key] = value;
-            } else {
-              item[key] = val;
-            }
-          }
-        }
-
-        // 模型处理
-        if (item.model) {
-          if (isString(item.model)) {
-            item.model = [item.model, { verify: false }];
-          }
-        } else {
-          item.model = ['', { verify: false }];
-        }
-        if (item.model[1] && !Object.prototype.hasOwnProperty.call(item.model[1], 'verify')) {
-          item.model[1].verify = false;
-        }
-
-        // 添加ID
-        item._fid = `form-${props.idx !== '' ? props.idx + '-' : ''}field-${item.field}`;
-
-        // 数据路径处理
-        item._data = props.data;
-        (item.paths?.split('.') || [])?.forEach((i: any) => {
-          if (item._data[i]) {
-            item._data = item._data[i];
-          }
-        });
-        return item;
-      });
-      const runsetup = (item: any = {}) => {
-        const { idx = null, key = null, value = null, setup = null }: any = item || {};
-        if (state.form[idx] && isFunction(setup)) {
-          const v = setup(deepcopy(props.data), state.form[idx], route, router);
-          nextTick(() => {
-            if (v instanceof Promise) {
-              state.form[idx][key] = value;
-              v.then((res: any) => {
-                state.form[idx][key] = res;
-              });
-            } else {
-              state.form[idx][key] = v;
-            }
-          });
-        }
-      };
-      // 执行一次
-      onces?.forEach((item: any = {}) => {
-        runsetup(item);
-      });
-      // 监听列表
-      for (const key in wkeys) {
-        unwatchs.push(
-          watch(
-            () => props.data[key],
-            () => {
-              wkeys[key]?.forEach((item: any = {}) => {
-                runsetup(item);
-              });
-            },
-            {
-              deep: true,
-              immediate: true,
-            },
-          ),
-        );
-      }
-    },
-    { deep: true, immediate: true },
-  );
-
-  // 处理
-  watch(
-    [() => state.form, () => props.data],
-    () => {
-      state.form.forEach((item: any = {}) => {
-        const { clear = false, field = '', paths = '' }: any = item;
-        if (clear) {
-          // 数据路径处理
-          let _data = props.data;
-          (paths?.split('.') || [])?.forEach((i: any) => {
-            if (_data[i]) {
-              _data = item._data[i];
-            }
-          });
-          _data[field] = isArray(_data[field]) ? [] : '';
-        }
-      });
-    },
-    { deep: true },
-  );
-
-  onBeforeUnmount(() => {
-    unwatchs?.forEach((unwatch: any) => {
-      unwatch();
-    });
-  });
-</script>