@neatui/vue 2.17.3 → 3.0.0

package/src/components/basic/LayerView/Layer.vue

@@ -1,29 +1,34 @@
 <!-- 实验性插件 -->
 <template>
-  <Teleport :to="area">
-    <div
-      v-if="state.view"
-      :am-view="am"
-      :data-key="id"
-      :style="`${`${dark}` ? 'background-color: rgba(0, 0, 0, ' + dark + ');' : ''}${zIndex ? 'z-index:' + zIndex + ';' : ''}`"
-      :view="state.view"
-      class="fekit-layer"
-    >
-      <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
-        <slot :param="_tasks[id]?.params"></slot>
+  <div>
+    <Teleport :to="area">
+      <div
+        v-if="state.view"
+        :am-view="am"
+        :data-key="id"
+        :style="`${`${dark}` ? 'background-color: rgba(0, 0, 0, ' + dark + ');' : ''}${zIndex ? 'z-index:' + zIndex + ';' : ''}`"
+        :view="state.view"
+        class="fekit-layer"
+      >
+        <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
+          <slot :param="_tasks[id]?.params"></slot>
+        </div>
       </div>
-    </div>
-  </Teleport>
+    </Teleport>
+  </div>
 </template>
 <script lang="ts" setup>
   import { onBeforeUnmount, reactive, watch } from 'vue';
-  import { isFunction } from '@fekit/utils';
+  import { env, isFunction } from '@fekit/utils';
 
   // 弹层队列
-  if (!(window as any)._FEKIT_LAYER_TASKS) {
-    (window as any)._FEKIT_LAYER_TASKS = {};
-  }
-  const _tasks: any = (window as any)._FEKIT_LAYER_TASKS;
+  const _tasks: any = (() => {
+    if (!env.client) return {};
+    if (!(window as any)._FEKIT_LAYER_TASKS) {
+      (window as any)._FEKIT_LAYER_TASKS = {};
+    }
+    return (window as any)._FEKIT_LAYER_TASKS;
+  })();
 
   // 获取活跃的弹层
   const getActiveLayer = () => {
@@ -54,12 +59,14 @@
     wrapStyle: '',
   });
 
-  const _area: any = document.querySelector(props.area);
-  if (!_area) {
-    const el = document.createElement('div');
-    el.id = (props.area || '#fekit').substring(1);
-    el.style.position = 'absolute';
-    document.body.appendChild(el);
+  if (env.client) {
+    const _area: any = document.querySelector(props.area);
+    if (!_area) {
+      const el = document.createElement('div');
+      el.id = (props.area || '#fekit').substring(1);
+      el.style.position = 'absolute';
+      document.body.appendChild(el);
+    }
   }
 
   // 状态管理
@@ -71,6 +78,7 @@
   });
 
   function disableScroll() {
+    if (!env.client) return;
     state.top = document.documentElement.scrollTop;
     const sw = window.innerWidth - document.documentElement.clientWidth;
     state.sw = sw;
@@ -82,6 +90,7 @@
   }
 
   function enableScroll() {
+    if (!env.client) return;
     document.body.style.removeProperty('overflow');
     document.body.style.removeProperty('position');
     document.body.style.removeProperty('top');

package/src/components/basic/LayerView/index.ts

@@ -1,5 +1,7 @@
 import Layer from './Layer.vue';
+import { env } from '@fekit/utils';
+
 const LayerById = (id: any) => {
-  return (window as any)._FEKIT_LAYER_TASKS[id];
+  return env.client ? (window as any)._FEKIT_LAYER_TASKS?.[id] : undefined;
 };
 export { Layer, LayerById };

package/src/components/form/DateView@v3.vue

@@ -217,7 +217,8 @@
   // 创建日期
   const cDate = (date: any = null) => {
     const normalized = normalizeDateInput(date);
-    return isDateString(normalized) ? new Date(normalized) : new Date();
+    // iOS 兼容：Safari 不支持 "YYYY-MM-DD" 格式，需要替换为 "YYYY/MM/DD"
+    return isDateString(normalized) ? new Date(normalized?.replace(/-/g, '/')) : new Date();
   };
 
   // 快捷预设

package/src/components/form/Input@v3.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :ui-form="`${theme} sz:${sz} ${state.error.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
+    :ui-form="`${theme} sz:${sz} ${state.error.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''} ${preview ? 'preview' : ''}`"
     @click="emits('click', $event)"
   >
     <div v-if="state.interacted" :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>
@@ -20,8 +20,7 @@
         :type="inputType"
         :placeholder="placeholder"
         :disabled="disabled"
-        :readonly="readonly"
-        autocomplete="new-password"
+        :readonly="readonly || preview"
         @focus="emits('focus', $event, state)"
         @input="input($event)"
         @change="emits('change', $event, state)"
@@ -29,10 +28,10 @@
       />
     </slot>
     <div ui-form-suffix="">
-      <i ui-form-clean="" v-if="clearable && props.modelValue && !readonly && !disabled" @click.stop="clear"></i>
+      <i ui-form-clean="" v-if="clearable && props.modelValue && !readonly && !preview && !disabled" @click.stop="clear"></i>
       <div
         class="o-ls"
-        v-if="type === 'password' && cipher"
+        v-if="type === 'password' && cipher && !preview"
         :ui-form-cipher="cipherVisible ? '1' : ''"
         @click.stop="toggleCipher"
       ></div>
@@ -70,7 +69,9 @@
    * minlength      最小长度
    * disabled       是否禁用
    * readonly       是否只读
+   * preview        是否预览展示
    * clearable      是否显示清除按钮
+   * cipher         密码框是否显示明密文切换
    * rules          校验规则
    * verify         是否显示校验
    * prefix         前缀内容
@@ -94,6 +95,7 @@
     minlength?: null | number;
     disabled?: boolean;
     readonly?: boolean;
+    preview?: boolean;
     clearable?: boolean;
     cipher?: boolean;
     verify?: boolean;
@@ -116,6 +118,7 @@
     minlength: null,
     disabled: false,
     readonly: false,
+    preview: false,
     clearable: true,
     cipher: true,
     verify: false,
@@ -217,7 +220,7 @@
   }
 
   const toggleCipher = () => {
-    if (props.disabled || props.readonly) return;
+    if (props.disabled || props.readonly || props.preview) return;
     cipherVisible.value = !cipherVisible.value;
   };
   // 输入

package/src/components/form/{Textarea.vue → TextArea.vue}

@@ -94,7 +94,7 @@
     verify?: boolean;
     prefix?: Array<any>;
     suffix?: Array<any>;
-    interacted?: boolean;
+    interacted?: boolean | number | null;
     autoHeight?: boolean;
     rows?: number;
   }
@@ -116,7 +116,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false,
+    interacted: null,
     // textarea 特有属性默认值
     autoHeight: false,
     rows: 3,
@@ -124,7 +124,7 @@
 
   const state: any = reactive({
     // 用户是否交互
-    interacted: false,
+    interacted: null,
     // 值
     value: props.modelValue,
     // 错误

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

@@ -3,18 +3,18 @@
     <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">
+          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" :class="labelClass">
             <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>
+              <span>{{ formatLabel(col) }}</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">
+          <p v-else :class="[labelClass, `${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>
+              <span>{{ formatLabel(col) }}</span>
             </template>
           </p>
         </template>
@@ -262,6 +262,16 @@
       type: [String, Number],
       default: '',
     },
+    // label冒号控制，false不显示，string自定义字符
+    colon: {
+      type: [Boolean, String],
+      default: true,
+    },
+    // 统一的label class
+    labelClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
     // 是否垂直排列
     vertical: {
       type: Boolean,
@@ -269,6 +279,21 @@
     },
   });
 
+  // label展示文案，支持全局/单个字段开关冒号
+  const formatLabel = (col: any = {}) => {
+    const { label = '', colon: localColon = undefined } = col || {};
+    if (!label) return '';
+    if (/[:：]\s*$/.test(label)) return label;
+    const suffix = (() => {
+      if (localColon === false) return '';
+      if (isString(localColon)) return localColon;
+      if (localColon === true) return ':';
+      if (isString(props.colon)) return props.colon;
+      return props.colon ? ':' : '';
+    })();
+    return suffix ? `${label}${suffix}` : label;
+  };
+
   // 数据
   const state: any = reactive({
     form: [],

package/src/components/loader/LayerLoader/LayerLoader.vue

@@ -76,7 +76,7 @@
   import { nextTick, reactive, ref, watch, onMounted } from 'vue';
   import LayerLoader from './LayerLoader.vue';
   import { useBasicStore, useWorksStore, storeToRefs } from '@/stores';
-  import { deepcopy } from '@fekit/utils';
+  import { deepcopy, env } from '@fekit/utils';
   import scrollto from '@fekit/scrollto';
 
   // 事件定义
@@ -131,6 +131,7 @@
         unfoldActivePath(props.data, newActive);
 
         nextTick(() => {
+          if (!env.client) return;
           const el = document.getElementById(`LID${newActive.replace(/\./g, '')}`);
           if (el && !store.isMouseInLayer) {
             scrollto({

package/src/components/loader/LimitLoader/LimitLoader@v3.vue

@@ -50,7 +50,7 @@
 <script lang="ts" setup>
   import { computed, reactive, watch } from 'vue';
   import { useRoute } from 'vue-router';
-  import { deepcopy, isObject, isString } from '@fekit/utils';
+  import { deepcopy, env, isObject, isString } from '@fekit/utils';
   import { IFollowView } from '../../basic';
   import { Input, Select, SelectTree, MoreSelect, SearchMoreSelect, DatePicker, DateRangePicker, Cascader } from '../../form';
 
@@ -108,7 +108,7 @@
   watch(
     () => props.limit,
     () => {
-      const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
+      const _cache = env.client ? JSON.parse(window.localStorage.getItem(`${state.name}_limit`) || '{}') : {};
       state.limit = deepcopy(props.limit)?.map((item: any) => {
         if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_close')) {
           item._close = Number(_cache[item.field]?._close);
@@ -159,7 +159,7 @@
           }
         }
       });
-      localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
+      if (env.client) window.localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
     },
     { deep: true },
   );

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

@@ -152,7 +152,7 @@
   import { IFollowView, Icon } from '../../basic';
   import { itable } from '@fekit/itable';
   import TableRender from './TableRender.vue';
-  import { isFunction, isObject, hasOwnProp, deepcopy } from '@fekit/utils';
+  import { isFunction, isObject, hasOwnProp, deepcopy, env } from '@fekit/utils';
 
   const route = useRoute();
   const router = useRouter();
@@ -264,7 +264,7 @@
   watch(
     () => props.table,
     () => {
-      const _cache = JSON.parse(localStorage.getItem(`${name}_table`) || '{}');
+      const _cache = env.client ? JSON.parse(window.localStorage.getItem(`${name}_table`) || '{}') : {};
       state.__last = 0;
       state.table = deepcopy(props.table || [])
         ?.map((col: TableColumn, idx: number) => {
@@ -340,7 +340,7 @@
           state.__last = idx;
         }
       });
-      localStorage.setItem(`${name}_table`, JSON.stringify(_table));
+      if (env.client) window.localStorage.setItem(`${name}_table`, JSON.stringify(_table));
     },
     { deep: true },
   );

package/src/components/loader/index.ts

@@ -1,4 +1,4 @@
-import FormLoader from './FormLoader/FormLoader@v2.vue';
+import FormLoader from './FormLoader/FormLoader.vue';
 import LimitLoader from './LimitLoader';
 export * from './TableLoader/index';
 import TableLoader from './TableLoader/TableLoader.vue';

package/src/components/tools/FormDraftsView.vue

@@ -41,7 +41,7 @@
   import { ref, reactive, watch, onMounted, onUnmounted, computed } from 'vue';
   import { useRoute } from 'vue-router';
   import scrollTo from '@fekit/scrollto';
-  import { diff, deepcopy, isArray } from '@fekit/utils';
+  import { diff, deepcopy, env, isArray } from '@fekit/utils';
 
   // 通过枚举值查找枚举名
   const findEnumName = (enums: any, val: any, join: boolean | string = ' Ι ') => {
@@ -69,8 +69,8 @@
   const route: any = useRoute();
   const props: any = defineProps({
     area: {
-      type: HTMLElement,
-      default: document.body
+      type: Object,
+      default: () => (env.client ? document.body : null)
     },
     // 数据
     data: {
@@ -101,7 +101,7 @@
     // 对比数据
     diffs: computed(() => {
       const cloud = props.data || {};
-      const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+      const local = env.client ? JSON.parse(window.localStorage.getItem(state.cacheKey) || '{}') : {};
 
       const diffs = Object.keys(local).length
         ? (diff(cloud, local) || []).map((item: any) => {
@@ -162,6 +162,7 @@
 
   // 定位字段
   const fScrollToField = (domId: any) => {
+    if (!env.client || !props.area) return;
     const dom = document.querySelector(domId);
     if (dom) {
       scrollTo({
@@ -182,7 +183,8 @@
 
   // 使用草稿
   const fConfirmDrafts = ({ field = '', path = [] }: any = {}) => {
-    const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+    if (!env.client) return;
+    const local = JSON.parse(window.localStorage.getItem(state.cacheKey) || '{}');
     if (field) {
       state.field = field;
       // 无限树型遍历
@@ -221,7 +223,8 @@
   };
   // 放弃草稿
   const fDiscardDrafts = ({ field = '', path = [] }: any = {}) => {
-    const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+    if (!env.client) return;
+    const local = JSON.parse(window.localStorage.getItem(state.cacheKey) || '{}');
     if (field) {
       // 无限树型遍历
       let _cloud = state.cloud || {};
@@ -232,7 +235,7 @@
       });
       _local[field] = _cloud[field];
 
-      localStorage.setItem(state.cacheKey, JSON.stringify(local));
+      window.localStorage.setItem(state.cacheKey, JSON.stringify(local));
       emits('discard', field);
     } else {
       state.diffs.forEach((item: any) => {
@@ -252,7 +255,7 @@
         }
         state.show = 0;
       });
-      localStorage.setItem(state.cacheKey, JSON.stringify(local));
+      window.localStorage.setItem(state.cacheKey, JSON.stringify(local));
       emits('discard');
       state.show = 0;
     }
@@ -312,14 +315,15 @@
   watch(
     () => props.data,
     (edit: any, old: any) => {
+      if (!env.client) return;
       if (edit === old) {
         if (state.field) {
-          const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+          const local = JSON.parse(window.localStorage.getItem(state.cacheKey) || '{}');
           local[state.field] = state.cloud[state.field];
-          localStorage.setItem(state.cacheKey, JSON.stringify(local));
+          window.localStorage.setItem(state.cacheKey, JSON.stringify(local));
           state.field = null;
         } else {
-          localStorage.setItem(state.cacheKey, JSON.stringify(edit));
+          window.localStorage.setItem(state.cacheKey, JSON.stringify(edit));
         }
       }
     },

package/src/components/tools/FormVerifyView.vue

@@ -31,14 +31,14 @@
   import { computed, reactive, toRefs, watch, onMounted, ref, onUnmounted } from 'vue';
   import { useRoute } from 'vue-router';
   import scrollTo from '@fekit/scrollto';
-  import { deepcopy, isArray, isObject, isFunction } from '@fekit/utils';
+  import { deepcopy, env, isArray, isObject, isFunction } from '@fekit/utils';
 
   const route: any = useRoute();
 
   const props: any = defineProps({
     area: {
-      type: HTMLElement,
-      default: document.body
+      type: Object,
+      default: () => (env.client ? document.body : null)
     },
     data: {
       type: Object,
@@ -128,6 +128,7 @@
   );
 
   const fScrollToField = (path: any) => {
+    if (!env.client || !props.area) return;
     const dom = document.querySelector(path);
     if (dom) {
       scrollTo({

package/src/components/tools/MoreTools.vue

@@ -30,6 +30,7 @@
 <script setup lang="ts">
   import { reactive, computed } from 'vue';
   import { useRoute } from 'vue-router';
+  import { env } from '@fekit/utils';
   const emits = defineEmits(['update:confs', 'update:param']);
   const props = defineProps({
     confs: {
@@ -52,7 +53,7 @@
   });
 
   const init = () => {
-    const _cache = JSON.parse(localStorage.getItem(`${state.name}`) || '{}');
+    const _cache = env.client ? JSON.parse(window.localStorage.getItem(`${state.name}`) || '{}') : {};
     state.tools.confs = _cache.confs || JSON.parse(JSON.stringify(props.confs));
     state.tools.param = _cache.param || JSON.parse(JSON.stringify(props.param));
     emits('update:confs', state.tools.confs);
@@ -63,12 +64,12 @@
   const setLinkMode = (linkMode: any) => {
     state.tools.confs.linkMode = linkMode;
     emits('update:confs', state.tools.confs);
-    localStorage.setItem(state.name, JSON.stringify(state.tools));
+    if (env.client) window.localStorage.setItem(state.name, JSON.stringify(state.tools));
   };
 
   const setPageSize = (pageSize: any) => {
     state.tools.param.pageSize = pageSize;
     emits('update:param', state.tools.param);
-    localStorage.setItem(state.name, JSON.stringify(state.tools));
+    if (env.client) window.localStorage.setItem(state.name, JSON.stringify(state.tools));
   };
 </script>