@neatui/nuxt 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/nuxt",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "NeatUI component library for Nuxt 3",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -37,6 +37,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^4.3.1",
+    "@neatui/css": "^3.10.3",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/basic/IFollowView.vue

@@ -3,24 +3,33 @@
     <slot>
       <button ui-btn="@a s case :border"><i class="icon icon-dropdown"></i></button>
     </slot>
-    <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>
+  <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>
+          </div>
         </div>
+        <slot name="tips"></slot>
+        <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
       </div>
-    </Teleport>
-  </div>
+    </div>
+  </Teleport>
 </template>
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
@@ -28,11 +37,13 @@
 
   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);
+  if (import.meta.client) {
+    const area = document.querySelector('#ifollow');
+    if (!area) {
+      const el = document.createElement('div');
+      el.id = 'ifollow';
+      document.body.appendChild(el);
+    }
   }
 
   // 类型
@@ -48,6 +59,8 @@
     tipBoxStyle?: string;
     arrow?: any;
     clickTipHide?: boolean;
+    mobile?: boolean;
+    title?: string;
   }
 
   // 入参
@@ -63,6 +76,8 @@
     tipBoxStyle: '',
     arrow: {},
     clickTipHide: false,
+    mobile: true,
+    title: '',
   });
 
   const dom: any = ref(null);
@@ -74,6 +89,7 @@
     pos: props.pos,
     hover: 0,
     tipdom: false,
+    isMobile: false,
   });
 
   const showTimer: any = ref(null);
@@ -148,42 +164,47 @@
     }
   };
 
-  const downdom = (ev: any) => {
-    // 不记得了这个当时为什么要加上这个，这个会影响单选框的选中后不自动关闭下拉框啊～
-    // state.tipdom = true;
-    // document.addEventListener(
-    //   'mouseup',
-    //   () => {
-    //     setTimeout(() => {
-    //       state.tipdom = false;
-    //     }, 10);
-    //   },
-    //   true
-    // );
+  // 阻止触摸事件冒泡和默认行为
+  const preventTouchScroll = (e: TouchEvent) => {
+    // 只有当触摸点在遮罩层本身时才阻止，不影响子元素
+    if (e.target === tip.value && tip.value?.classList.contains('fekit-follow-mobile')) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
   };
 
   onMounted(() => {
     document.addEventListener('click', cancel, true);
+    // 添加触摸事件监听器以防止页面滚动
+    document.addEventListener('touchstart', preventTouchScroll, { passive: false });
+    document.addEventListener('touchmove', preventTouchScroll, { passive: false });
+    // 判断是否为移动端
+    state.isMobile = window.innerWidth < 800;
   });
 
   const ex: any = ref(null);
   watch([() => dom.value, () => tip.value], () => {
     if (dom.value && tip.value) {
-      ex.value = new Follow(dom.value, tip.value, (status) => {
-        if (!props?.pos?.includes(':fixed')) {
-          if (status === 'b') {
-            const _pos = props?.pos?.replace(/b/g, 't');
-            if (_pos) {
-              state.pos = _pos;
-            }
-          } else {
-            const _pos = props?.pos?.replace(/t/g, 'b');
-            if (_pos) {
-              state.pos = _pos;
+      ex.value = new Follow(
+        dom.value,
+        tip.value,
+        (status) => {
+          if (!props?.pos?.includes(':fixed')) {
+            if (status === 'b') {
+              const _pos = props?.pos?.replace(/b/g, 't');
+              if (_pos) {
+                state.pos = _pos;
+              }
+            } else {
+              const _pos = props?.pos?.replace(/t/g, 'b');
+              if (_pos) {
+                state.pos = _pos;
+              }
             }
           }
-        }
-      });
+        },
+        { hideOnScrollOut: false },
+      );
     } else {
       ex.value = null;
     }
@@ -191,6 +212,9 @@
 
   onUnmounted(() => {
     document.removeEventListener('click', cancel, true);
+    // 移除触摸事件监听器
+    document.removeEventListener('touchstart', preventTouchScroll);
+    document.removeEventListener('touchmove', preventTouchScroll);
     state.show = 0;
 
     if (ex.value) {
@@ -218,3 +242,64 @@
     cancel,
   });
 </script>
+<style lang="scss">
+  @use '@neatui/css' as neatui;
+  @include neatui.mob {
+    .fekit-follow-mobile {
+      position: fixed !important;
+      width: 100% !important;
+      height: 100% !important;
+
+      display: flex !important;
+      flex-direction: column !important;
+      justify-content: flex-end !important;
+      align-items: center !important;
+      align-content: center !important;
+      inset: 0 0 0 0 !important;
+
+      &[ui-tips-view='1'] {
+        background-color: rgba(0, 0, 0, 0.5);
+        pointer-events: auto !important;
+        touch-action: none !important;
+      }
+
+      &[ui-tips~='@a'] [ui-tips-box] {
+        position: relative !important;
+
+        width: 100% !important;
+        bottom: env(safe-area-inset-bottom) !important;
+        right: unset !important;
+        top: unset !important;
+        left: unset !important;
+        transform: translate3d(0, 0.5em, 0);
+
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: flex-end !important;
+        align-items: center !important;
+        align-content: center !important;
+
+        [ui-tips-arrow] {
+          display: none;
+        }
+      }
+    }
+
+    .mob-follow-tips {
+      position: relative;
+      padding-bottom: env(safe-area-inset-bottom, 16px);
+      &::before {
+        position: absolute;
+        content: '';
+        display: block;
+        width: 4rem;
+        height: 3px;
+        border-radius: 1em;
+        background-color: var(--co-text-ss);
+        top: 5px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+</style>

package/src/components/basic/IRouterView.vue

@@ -3,7 +3,7 @@
     <div :class="listClass" :style="listStyle" am-view-item="list">
       <slot name="list" :mode="mode"></slot>
     </div>
-    <div :class="itemClass" :style="itemStyle" am-view-item="item" ref="itemRef" v-if="view === 'iteming' || view === 'listing' || view === 'item'">
+    <div v-if="view === 'iteming' || view === 'listing' || view === 'item'" ref="itemRef" :class="itemClass" :style="itemStyle" am-view-item="item">
       <div class="iroute-view-dark" @click="cancel"></div>
       <div class="iroute-view-body" :style="mode === 'preview' || mode === 'pop-up' ? '' : 'width: 100%;'">
         <slot name="item" :mode="mode"></slot>
@@ -64,17 +64,17 @@
       );
     };
   };
-  provide('onlist', evs('list', 'item'));
-  provide('onitem', evs('item', 'list'));
 
   const init = ref(0);
   const view = ref('');
   const anim = (e: any) => {
     if (
       e.animationName === 'am-show-default' ||
+      e.animationName === 'am-show-window' ||
       e.animationName === 'am-show-preview' ||
       e.animationName === 'am-show-pop-up' ||
       e.animationName === 'am-hide-default' ||
+      e.animationName === 'am-hide-window' ||
       e.animationName === 'am-hide-preview' ||
       e.animationName === 'am-hide-pop-up'
     ) {
@@ -93,12 +93,17 @@
     }
   };
 
-  watch(() => route.query[props.queryName], a);
-  a();
+  if (import.meta.client) {
+    provide('onlist', evs('list', 'item'));
+    provide('onitem', evs('item', 'list'));
+    watch(() => route.query[props.queryName], a);
+    a();
+  }
 
   // 取消
-  const cancel = ({ target }: any = {}) => {
+  const cancel = () => {
     const _query = { ...route.query };
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete _query[props.queryName];
     router.push({ path: route.path, query: _query });
   };
@@ -172,27 +177,27 @@
       }
     }
     &[am-view='list'] {
-      & > [am-view-item~='list'] {
+      [am-view-item~='list'] {
         flex-direction: column;
         display: flex;
         animation: am-show-default 0.35s ease both;
       }
     }
     &[am-view='listing'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         flex-direction: column;
         display: flex;
         animation: am-hide-default 0.3s ease-in-out both;
       }
     }
     &[am-view='item'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         animation: am-show-default 0.35s ease both;
       }
     }
     &[am-view='iteming'] {
-      & > [am-view-item~='list'] {
+      [am-view-item~='list'] {
         display: flex;
         animation: am-hide-default 0.3s ease-in-out both;
       }
@@ -259,14 +264,14 @@
     }
     &[am-view='list'],
     &[am-view='listing'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         animation: am-hide-preview 0.5s ease-in-out both;
       }
     }
     &[am-view='item'],
     &[am-view='iteming'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         animation: am-show-preview 0.5s ease both;
       }
@@ -353,7 +358,7 @@
     }
     &[am-view='list'],
     &[am-view='listing'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         opacity: 0;
         & > * {
@@ -363,7 +368,7 @@
     }
     &[am-view='item'],
     &[am-view='iteming'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         opacity: 1;
         & > * {
@@ -372,4 +377,73 @@
       }
     }
   }
+
+  // 窗口模式
+  [am-view][am-mode~='window'] {
+    overflow: hidden;
+
+    @keyframes am-show-default {
+      0% {
+        opacity: 0;
+        transform: translate3d(1em, 0, 0);
+      }
+      100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+    @keyframes am-hide-default {
+      0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+      100% {
+        opacity: 0;
+        transform: translate3d(1em, 0, 0);
+      }
+    }
+
+    &[view-full~='1'] {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 15;
+    }
+
+    [am-view-item] {
+      display: none;
+
+      &[am-view-item~='row'] {
+        flex-direction: row !important;
+      }
+    }
+    &[am-view='list'] {
+      [am-view-item~='list'] {
+        flex-direction: column;
+        display: flex;
+        animation: am-show-default 0s ease both;
+      }
+    }
+    &[am-view='listing'] {
+      [am-view-item~='item'] {
+        flex-direction: column;
+        display: flex;
+        animation: am-hide-default 0s ease-in-out both;
+      }
+    }
+    &[am-view='item'] {
+      [am-view-item~='item'] {
+        display: flex;
+        animation: am-show-default 0s ease both;
+      }
+    }
+    &[am-view='iteming'] {
+      [am-view-item~='list'] {
+        display: flex;
+        animation: am-hide-default 0s ease-in-out both;
+      }
+    }
+  }
 </style>

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

@@ -1,63 +1,46 @@
 <!-- 实验性插件 -->
 <template>
-  <Teleport :to="area">
+  <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"
-    >
+      class="fekit-layer">
       <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
-        <slot></slot>
+        <slot :param="_tasks[id].params"></slot>
       </div>
     </div>
   </Teleport>
 </template>
 <script lang="ts" setup>
-  import { onBeforeUnmount, PropType, reactive, ref, watch } from 'vue';
+  import { onBeforeUnmount, reactive, watch } from 'vue';
   import { isFunction } from '@fekit/utils';
+  import { _tasks } from './index';
 
-  // 弹层队列
-  if (!(window as any)._FEKIT_LAYER_TASKS) {
-    (window as any)._FEKIT_LAYER_TASKS = {};
+  // 类型定义
+  interface Props {
+    zIndex?: string | number;
+    area?: string;
+    id: string;
+    am?: 'aa' | 'ab' | 'ac' | 'ad' | 'ae' | 'af' | 'ag' | 'ah' | 'ai' | 'aj' | 'ak' | 'al' | 'am' | 'an' | 'ao' | 'ap' | 'aq' | 'ar' | 'as' | 'at';
+    flex?: 'lt' | 'ct' | 'rt' | 'lm' | 'cm' | 'rm' | 'lb' | 'cb' | 'rb';
+    dark?: string | number;
+    darkClickClose?: boolean;
+    wrapStyle?: string;
   }
-  const _tasks: any = (window as any)._FEKIT_LAYER_TASKS;
 
   // 弹窗入参
-  const props: any = defineProps({
-    zIndex: {
-      type: [String, Number],
-      default: '',
-    },
-    area: {
-      type: String,
-      default: '#fekit',
-    },
-    id: {
-      type: String,
-    },
-    am: {
-      type: String as PropType<'aa' | 'ab' | 'ac' | 'ad' | 'ae' | 'af' | 'ag' | 'ah' | 'ai' | 'aj' | 'ak' | 'al' | 'am' | 'an' | 'ao' | 'ap' | 'aq' | 'ar' | 'as' | 'at'>,
-      default: 'as',
-    },
-    flex: {
-      type: String as PropType<'lt' | 'ct' | 'rt' | 'lm' | 'cm' | 'rm' | 'lb' | 'cb' | 'rb'>,
-      default: 'cm',
-    },
-    dark: {
-      type: [String, Number],
-      default: '',
-    },
-    darkClickClose: {
-      type: Boolean,
-      default: true,
-    },
-    wrapStyle: {
-      type: String,
-      default: '',
-    },
+  const props = withDefaults(defineProps<Props>(), {
+    zIndex: '',
+    area: '#fekit',
+    id: '',
+    am: 'as',
+    flex: 'cm',
+    dark: '',
+    darkClickClose: true,
+    wrapStyle: '',
   });
 
   const _area: any = document.querySelector(props.area);
@@ -77,10 +60,12 @@
 
   function disableScroll() {
     state.top = document.documentElement.scrollTop;
+    const sw = window.innerWidth - document.documentElement.clientWidth;
     document.body.style.overflow = 'hidden';
     document.body.style.position = 'fixed';
     document.body.style.top = `-${state.top}px`;
     document.body.style.width = '100%';
+    document.body.style.paddingRight = `${sw}px`;
   }
 
   function enableScroll() {
@@ -88,6 +73,7 @@
     document.body.style.removeProperty('position');
     document.body.style.removeProperty('top');
     document.body.style.removeProperty('width');
+    document.body.style.removeProperty('padding-right');
     window.scrollTo(0, state.top);
   }
 
@@ -185,21 +171,22 @@
   // 注册弹层
   const { id = '' }: any = { ...props };
   if (_tasks[id]) {
-    console.error('Layer 有重复 id', id);
   }
   if (id) {
     _tasks[id] = { init, show, hide, open, none };
   } else {
-    console.error('Layer 必须填写全局统一的 id');
   }
 
   // 卸载弹层
   onBeforeUnmount(() => {
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete _tasks[id];
   });
 </script>
 
 <style lang="scss">
+  @use '@neatui/css' as neatui;
+
   // 弹层
   .fekit-layer {
     position: fixed;
@@ -232,21 +219,20 @@
       width: 2em;
       height: 2em;
 
-      color: var(--co-read);
+      color: var(--co-vice);
       bottom: auto;
-      top: 0.5em;
-      right: 0.5em;
+      top: 1.5em;
+      right: 1.5em;
       left: auto;
       box-shadow: none;
 
       padding: 0.25em;
       margin-left: -1rem;
       text-align: center;
-      transform: scale(0.8);
+      transform: scale(0.9);
       transition: all 0.2s;
       border-radius: 50%;
-      background:
-        linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%,
+      background: linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%,
         linear-gradient(-45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%;
 
       &:active {
@@ -256,11 +242,25 @@
 
     .fekit-layer-close {
       &:hover {
-        transform: scale(0.8) rotate(90deg);
+        transform: scale(0.9) rotate(90deg);
       }
       &:active {
         transform: scale(0.7) rotate(90deg);
       }
     }
   }
+
+  @include neatui.mob {
+    .fekit-layer-close {
+      top: 1.5em;
+      right: 1.5em;
+
+      color: var(--co-fore);
+      top: auto;
+      right: auto;
+      left: 50%;
+      bottom: -2.5rem;
+      box-shadow: 0 0 0 2px currentColor;
+    }
+  }
 </style>

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

@@ -1,5 +1,5 @@
-import Layer from './Layer.vue';
+export const _tasks: any = {};
 const LayerById = (id: any) => {
-  return (window as any)._FEKIT_LAYER_TASKS[id];
+  return _tasks[id];
 };
-export { Layer, LayerById };
+export default LayerById;

package/src/components/basic/index.ts

@@ -1,4 +1,5 @@
-import { Layer, LayerById } from './LayerView';
+import Layer from './LayerView/Layer.vue';
+import LayerById from './LayerView/index';
 import Icon from './Icon.vue';
 import IFollowView from './IFollowView.vue';
 import IPickerView from './IPickerView.vue';

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

@@ -66,7 +66,7 @@
       </div>
     </div>
     <div v-if="!state.isNoTime" class="ny-sm nx-ms">
-      <div class="full ac b-solid bk-back b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
+      <div class="full ac b-solid bk-line b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
         <ul
           :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
           class="fekit-date-view-time-scroll"

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

@@ -1,13 +1,13 @@
 <template>
   <div ui-date="@a" class="fekit-date-view pr" :class="`${frame ? 'b-solid bk-line b-xs r-sm' : ''}`" ui-flex="col xy" style="width: 22em">
-    <div ui-date-head="" class="flex-fixed nx-ms mt-ss ny-sm b-solid bk-back" ui-flex="row xm">
+    <div ui-date-head="" class="flex-fixed nx-ms mt-ss ny-sm b-solid bk-line" ui-flex="row xm">
       <div ui-flex="row lm" class="o-lm">
         <div ui-btn="@a s none :square" @click="prev()">
           <Icon name="arrow-left" />
         </div>
       </div>
       <div ui-btns="@a none s" @click="setPanelType()">
-        <p v-if="state.type > 2" class="nowrap" ui-flex="row cm">
+        <p v-if="state.type === 2" class="nowrap" ui-flex="row cm">
           <b class="nx-ss">{{ panel.sta }}年</b>
           <span class="nx-xs">-</span>
           <b class="nx-ss">{{ panel.end }}年</b>
@@ -26,32 +26,38 @@
         </div>
       </div>
     </div>
-    <div ui-date-body="" class="flex-block pr">
-      <div v-if="state.type === 2" class="full n-ms">
-        <ul ui-row="mob-6" class="n-ms ny-sm-sub">
+    <div ui-date-body="" :class="['flex-block pr', bodyClass]">
+      <div v-if="state.type === 2" class="full">
+        <ul ui-grid="mob:4" class="n-ms ny-sm-sub">
           <li v-for="(year, idx) in panel.years" :key="idx" ui-flex="col cm" @click="setDateValue('y', year)">
-            <div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">{{ year }}</div>
+            <div
+              ui-flex="col cm"
+              class="w-ss h-xs ac ux-none r-sm"
+              :class="isSelectedYear(year) ? 'active bg-main-o-lm co-w' : 'co-main:hover'"
+            >
+              {{ year }}
+            </div>
           </li>
         </ul>
       </div>
       <div v-else-if="state.type === 1" class="full">
-        <ul ui-row="mob-4" class="n-ms ny-sm-sub">
-          <li ui-flex="col cm" @click="setDateValue('m', 1)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">1月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 2)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">2月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 3)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">3月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 4)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">4月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 5)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">5月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 6)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">6月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 7)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">7月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 8)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">8月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 9)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">9月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 10)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">10月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 11)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">11月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 12)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">12月</div></li>
+        <ul ui-grid="mob:4" class="n-ms ny-sm-sub">
+          <li ui-flex="col cm" @click="setDateValue('m', 1)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(1) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">1月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 2)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(2) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">2月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 3)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(3) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">3月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 4)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(4) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">4月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 5)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(5) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">5月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 6)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(6) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">6月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 7)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(7) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">7月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 8)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(8) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">8月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 9)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(9) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">9月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 10)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(10) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">10月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 11)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(11) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">11月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 12)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(12) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">12月</div></li>
         </ul>
       </div>
       <div v-else class="full">
-        <ul ui-flex="row am" class="fs-xs nx-sm nt-sm">
+        <ul ui-flex="row am" class="fs-xs nx-sm nt-ss">
           <li class="flex-block ac"><span>日</span></li>
           <li class="flex-block ac"><span>一</span></li>
           <li class="flex-block ac"><span>二</span></li>
@@ -73,9 +79,9 @@
               >
                 <div
                   ui-flex="col cm"
-                  class="r-sm b-solid bk-none b-xs my-ss ux-scale co-main:hover"
+                  class="r-sm b-solid bk-none b-xs my-ss ux-scale"
                   style="width: 1.8em; height: 1.8em"
-                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'}`"
+                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-w' : 'bg-weak:hover co-main:hover'}`"
                 >
                   <span>{{ item.day }}</span>
                 </div>
@@ -86,54 +92,57 @@
         </ul>
       </div>
     </div>
-    <div v-if="!state.isNoTime && state.type === 0" class="ny-sm nx-ms">
-      <div class="full ac b-solid bk-back b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
-        <ul
-          :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
-          class="fekit-date-view-time-scroll"
-          ref="ths"
-          ui-scroll=":y xs"
-          ui-btns="@a none s :block"
-          data-type="h"
-          @scroll="timeScroll"
-        >
-          <li v-for="(item, idx) in hours" :key="idx">
-            {{ item }}
-          </li>
-        </ul>
-        <ul
-          :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
-          class="fekit-date-view-time-scroll"
-          ref="tms"
-          ui-scroll=":y xs"
-          ui-btns="@a none s :block"
-          data-type="m"
-          @scroll="timeScroll"
-        >
-          <li v-for="(item, idx) in seconds" :key="idx">
-            {{ item }}
-          </li>
-        </ul>
-        <ul
-          :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
-          class="fekit-date-view-time-scroll"
-          ref="tss"
-          ui-scroll=":y xs"
-          ui-btns="@a none s :block"
-          data-type="s"
-          @scroll="timeScroll"
-        >
-          <li v-for="(item, idx) in seconds" :key="idx">
-            {{ item }}
-          </li>
-        </ul>
+    <template v-if="!state.isNoTime">
+      <div v-if="state.type === 0" class="h-ss ny-sm nx-ms">
+        <div class="full ac b-solid bk-line b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
+          <ul
+            :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
+            class="fekit-date-view-time-scroll"
+            ref="ths"
+            ui-scroll=":y xs"
+            ui-btns="@a none s :block"
+            data-type="h"
+            @scroll="timeScroll"
+          >
+            <li v-for="(item, idx) in hours" :key="idx">
+              {{ item }}
+            </li>
+          </ul>
+          <ul
+            :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
+            class="fekit-date-view-time-scroll"
+            ref="tms"
+            ui-scroll=":y xs"
+            ui-btns="@a none s :block"
+            data-type="m"
+            @scroll="timeScroll"
+          >
+            <li v-for="(item, idx) in seconds" :key="idx">
+              {{ item }}
+            </li>
+          </ul>
+          <ul
+            :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
+            class="fekit-date-view-time-scroll"
+            ref="tss"
+            ui-scroll=":y xs"
+            ui-btns="@a none s :block"
+            data-type="s"
+            @scroll="timeScroll"
+          >
+            <li v-for="(item, idx) in seconds" :key="idx">
+              {{ item }}
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-o-mm bt-xs">
+      <div v-else class="h-ss"></div>
+    </template>
+    <div v-if="showTools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <div v-if="state.panel" ui-flex="row lm">
-          <span :anim-editing="state.type === 'date'" class="nx-ss">{{ idate(state.panel).format('YYYY-MM-DD') }}</span>
-          <span v-if="!state.isNoTime" :anim-editing="state.type === 'time'" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span>
+          <span :anim-editing="state.type === baseType" class="nx-ss">{{ idate(state.panel).format(panelFormat) }}</span>
+          <!-- <span v-if="!state.isNoTime" :anim-editing="state.type === baseType" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span> -->
         </div>
         <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
           <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
@@ -153,15 +162,43 @@
 <script setup lang="ts">
   import { computed, ref, reactive, watch, onMounted } from 'vue';
   import { isDateString, isObject, isString } from '@fekit/utils';
-  // import { idate } from '@fekit/utils';
   import { idate } from './date';
   import { Icon } from '../basic';
 
-  // const _level: any = { 0: ['d', 1], 1: ['m', 1], 2: ['y', 10], 3: ['y', 100] };
+  const normalizeDateInput = (value: any) => {
+    if (!value) {
+      return value;
+    }
+    if (isString(value)) {
+      if (/^\d{4}$/.test(value)) {
+        return `${value}-01-01`;
+      }
+      if (/^\d{4}-(\d{1,2})$/.test(value)) {
+        const [year, month] = value.split('-');
+        const m = month.padStart(2, '0');
+        return `${year}-${m}-01`;
+      }
+    }
+    return value;
+  };
+
+  interface PickerConfig {
+    baseType: number;
+    format: string;
+    bodyClass: string;
+    tools: boolean;
+  }
+
+  const PICKER_CONFIGS: Record<string, PickerConfig> = {
+    date: { baseType: 0, format: 'YYYY-MM-DD', bodyClass: 'min-h-ls+', tools: true },
+    month: { baseType: 1, format: 'YYYY-MM', bodyClass: 'min-h-ms', tools: false },
+    year: { baseType: 2, format: 'YYYY', bodyClass: 'min-h-ms', tools: false },
+  };
 
   // 创建日期
   const cDate = (date: any = null) => {
-    return isDateString(date) ? new Date(date) : new Date();
+    const normalized = normalizeDateInput(date);
+    return isDateString(normalized) ? new Date(normalized) : new Date();
   };
 
   // 快捷预设
@@ -198,7 +235,7 @@
     tools?: boolean;
     range?: boolean;
     format?: string;
-    picker?: 'date' | 'week' | 'month' | 'quarter';
+    picker?: 'date' | 'week' | 'month' | 'quarter' | 'year';
     holiday?: object;
     shortcuts?: Array<'yesterday' | 'today' | 'tomorrow'>;
     extras?: (item: any) => string;
@@ -211,19 +248,19 @@
     // 是否显示框架
     frame: false,
     // 是否是示工具
-    tools: true,
+    tools: undefined,
     // 时间范围
     range: false,
     // 面板类型
     picker: 'date',
     // 额外内容
     extras: (item: any) => {
-      return `<i class="dib o-ms mb-xs r-xl ${item.today ? 'bg-main' : 'bg-none'}" style="width:.6em; height:.6em;"></i>`;
+      return `<i class="dib o-ms mb-xs r-xl ${item.today ? 'bg-main' : 'bg-none'}" style="width:.5em; height:.5em;"></i>`;
     },
     // 快捷选择
     shortcuts: () => ['yesterday', 'today', 'tomorrow'],
     // 数据格式化
-    format: 'YYYY-MM-DD',
+    format: undefined,
     // 节假日
     holiday: () => ({}),
     time: false,
@@ -231,6 +268,11 @@
     lang: 'zh-CN',
   });
 
+  const pickerConfig = computed<PickerConfig>(() => {
+    const key = props.picker || 'date';
+    return PICKER_CONFIGS[key] || PICKER_CONFIGS.date;
+  });
+
   // 小时
   const hours = computed(() => {
     const _hours: any = [];
@@ -248,6 +290,27 @@
     return _seconds;
   });
 
+  const baseType = computed(() => pickerConfig.value.baseType);
+
+  const panelFormat = computed(() => props.format || pickerConfig.value.format);
+
+  const bodyClass = computed(() => pickerConfig.value.bodyClass);
+
+  const showTools = computed(() => {
+    if (props.tools !== undefined) {
+      return !!props.tools;
+    }
+    return pickerConfig.value.tools;
+  });
+
+  const isSelectedYear = (year: number) => {
+    return !!state.panel && state.curr?.y === year;
+  };
+
+  const isSelectedMonth = (month: number) => {
+    return !!state.panel && state.curr?.M === month;
+  };
+
   // 内部数据
   const state: any = reactive({
     // 面板显示时间
@@ -256,7 +319,6 @@
     years: 0,
     // 当前时间计算
     curr: computed(() => {
-      // console.log(158, state.panel);
       const date = idate(state.panel);
       const days = date.calendar({ group: true, value: [state.panel] });
       return { days, ...date.attr };
@@ -281,6 +343,28 @@
     }),
   });
 
+  watch(
+    () => baseType.value,
+    (value) => {
+      state.type = value;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => panelFormat.value,
+    (format) => {
+      if (state.panel) {
+        const formatted = idate(state.panel).format(format);
+        if (formatted !== state.panel) {
+          state.panel = formatted;
+        }
+        state.value = formatted;
+      }
+    },
+    { immediate: true },
+  );
+
   // 面板
   const panel: any = reactive({
     years: computed(() => {
@@ -301,9 +385,18 @@
 
   // 设置日期
   const setDateValue = (type: any, value: number = 0, add: number = 0) => {
-    state.panel = upload(type, value, add);
+    const panelValue = upload(type, value, add);
+    state.panel = panelValue;
+    state.value = panelValue;
     // 面板返回上一级
-    state.type -= 1;
+    const base = baseType.value;
+    const nextType = Math.max(base, state.type - 1);
+    state.type = nextType;
+
+    if (base > 0 && nextType === base) {
+      emits('change', panelValue);
+      update();
+    }
   };
 
   // 时分秒
@@ -338,10 +431,11 @@
   watch(
     () => props.modelValue,
     (value: any) => {
+      const formatted = value ? idate(value).format(panelFormat.value) : undefined;
       // 面板显示日期
-      state.panel = value || undefined;
+      state.panel = formatted;
       // 值
-      state.value = value || undefined;
+      state.value = formatted;
     },
     { deep: true, immediate: true },
   );
@@ -406,7 +500,7 @@
       default:
         break;
     }
-    return idate(date).format(props.format);
+    return idate(date).format(panelFormat.value);
   };
 
   // 日期前翻
@@ -420,8 +514,10 @@
 
   // 向外通信
   const change = (item: any) => {
-    state.panel = item ? idate(item.date).format(props.format) : item;
-    emits('change', state.value);
+    const panelValue = item ? idate(item.date).format(panelFormat.value) : item;
+    state.panel = panelValue;
+    state.value = panelValue;
+    emits('change', panelValue);
     if (state.isNoTime) {
       update();
     }
@@ -430,18 +526,24 @@
   // 清空日期
   const remove = () => {
     state.panel = undefined;
+    state.value = undefined;
     update();
   };
 
   // 更新数据
   const update = () => {
-    emits('update:modelValue', state.panel ? idate(state.panel).format(props.format) : undefined);
-    emits('update', state.panel ? idate(state.panel).format(props.format) : undefined);
+    const nextValue = state.panel ? idate(state.panel).format(panelFormat.value) : undefined;
+    if (state.panel && nextValue !== state.panel) {
+      state.panel = nextValue;
+    }
+    state.value = nextValue;
+    emits('update:modelValue', nextValue);
+    emits('update', nextValue);
   };
 
   // 面板类型
   const setPanelType = () => {
-    if (state.type < 3) {
+    if (state.type < 2) {
       state.type += 1;
     }
   };
@@ -456,16 +558,18 @@
       _timer.value = setTimeout(() => {
         const h = item.offsetHeight;
         const idx = Math.floor(ev.target.scrollTop / h);
+        const maxIdx = type === 'h' ? 23 : 59;
+        const safeIdx = Math.min(Math.max(idx, 0), maxIdx);
         const { YYYY = 0, MM = 0, DD = 0, HH = '', mm = '', ss = '' }: any = state.curr || {};
         let _panel = `${YYYY}-${MM}-${DD}`;
         if (type === 'h') {
-          _panel += ` ${idx}:${mm}:${ss}`;
+          _panel += ` ${safeIdx}:${mm}:${ss}`;
         }
         if (type === 'm') {
-          _panel += ` ${HH}:${idx}:${ss}`;
+          _panel += ` ${HH}:${safeIdx}:${ss}`;
         }
         if (type === 's') {
-          _panel += ` ${HH}:${mm}:${idx}`;
+          _panel += ` ${HH}:${mm}:${safeIdx}`;
         }
         state.panel = idate(_panel).format('YYYY-MM-DD HH:mm:ss');
       }, 100);

package/src/components/tools/FormVerifyView.vue

@@ -37,18 +37,18 @@
 
   const props: any = defineProps({
     area: {
-      type: HTMLElement,
-      default: document.body
+      type: [Object, HTMLElement],
+      default: () => (typeof document !== 'undefined' ? document.body : null),
     },
     data: {
       type: Object,
       required: true,
-      default: () => ({})
+      default: () => ({}),
     },
     form: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   });
 
   const state: any = reactive({
@@ -108,7 +108,7 @@
       core(edit, form, '#form-field');
       error.shift();
       return error;
-    })
+    }),
   });
   const { verify = [] }: any = toRefs(state);
 
@@ -124,16 +124,17 @@
           state.show = 0;
         }, 300);
       }
-    }
+    },
   );
 
   const fScrollToField = (path: any) => {
+    if (typeof document === 'undefined') return;
     const dom = document.querySelector(path);
     if (dom) {
       scrollTo({
         el: props.area,
         to: {
-          y: dom
+          y: dom,
         },
         offset: { y: -36 },
         then() {
@@ -141,7 +142,7 @@
           if (input) {
             input?.focus();
           }
-        }
+        },
       });
     }
   };
@@ -169,7 +170,7 @@
           state.show = 0;
         }, 1000);
       }
-    }
+    },
   );
 
   // 初始化后进入页面时自动弹出
@@ -191,7 +192,7 @@
           }, 300);
         }
       }
-    }
+    },
   );
 
   watch(
@@ -200,7 +201,7 @@
       state.__update = !state.__update;
     },
     {
-      deep: true
-    }
+      deep: true,
+    },
   );
 </script>