@neatui/vue 4.5.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",

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

@@ -6,11 +6,14 @@
         v-if="state.view"
         :am-view="am"
         :data-key="id"
-        :style="`${`${dark}` ? 'background-color: rgba(0, 0, 0, ' + dark + ');' : ''}${zIndex ? 'z-index:' + zIndex + ';' : ''}`"
+        :data-recess="state.recess || undefined"
+        :data-cover-dark="state.coverDark !== '' ? '' : undefined"
+        :style="layerStyle"
         :view="state.view"
         class="fekit-layer"
       >
         <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
+          <div v-if="state.coverDark !== ''" class="fekit-layer-cover-dark"></div>
           <slot :param="_tasks[id]?.params"></slot>
         </div>
       </div>
@@ -18,7 +21,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onBeforeUnmount, reactive, watch } from 'vue';
+  import { computed, nextTick, onBeforeUnmount, reactive, watch } from 'vue';
   import { env, isFunction } from '@fekit/utils';
 
   // 弹层队列
@@ -60,6 +63,21 @@
   const SCROLL_LOCK_STATE = Symbol.for('@neatui/vue.Layer.scrollLock');
   const ESCAPE_STACK = Symbol.for('@neatui/vue.Layer.escapeStack');
   const ESCAPE_LISTENER = Symbol.for('@neatui/vue.Layer.escapeListener');
+  const AREA_GROUPS = Symbol.for('@neatui/vue.Layer.areaGroups');
+
+  type LayerMode = 'cover' | 'cascade' | 'displace' | 'replace' | 'queue';
+
+  type AreaGroup = {
+    dark: {
+      afterHide?: () => void;
+      el: HTMLElement | null;
+      listening: boolean;
+      owners: Set<string>;
+      view: number;
+    };
+    queue: Array<{ id: string; kind: 'open' | 'show'; params: any; then: any }>;
+    stack: string[];
+  };
 
   const getScrollLockState = (): ScrollLockState => {
     if (!_tasks[SCROLL_LOCK_STATE]) {
@@ -119,6 +137,199 @@
     });
   };
 
+  const getAreaGroups = (): Record<string, AreaGroup> => {
+    if (!_tasks[AREA_GROUPS]) {
+      Object.defineProperty(_tasks, AREA_GROUPS, {
+        configurable: true,
+        value: {},
+      });
+    }
+    return _tasks[AREA_GROUPS];
+  };
+
+  const getAreaGroup = (area: string): AreaGroup => {
+    const groups = getAreaGroups();
+    if (!groups[area]) {
+      groups[area] = {
+        dark: {
+          el: null,
+          listening: false,
+          owners: new Set<string>(),
+          view: 0,
+        },
+        queue: [],
+        stack: [],
+      };
+    }
+    return groups[area];
+  };
+
+  const resolveDarkOpacity = (value: string | number | undefined) => {
+    return `${value ?? ''}` === '' ? '0.75' : `${value}`;
+  };
+
+  const participatesInGroup = (dark: string | number | undefined) => `${dark ?? ''}` !== '0';
+  const DEFAULT_COVER_DARK = 0.32;
+
+  const resolveCoverDark = (mode: LayerMode, hasPrev: boolean, coverDark: unknown) => {
+    if (mode !== 'cover' || !hasPrev) return '';
+    if (coverDark === false || `${coverDark}` === '0') return '';
+    if (coverDark === undefined || coverDark === true || `${coverDark}` === '') return DEFAULT_COVER_DARK;
+    return coverDark as string | number;
+  };
+
+  const isBlockingView = (view: number) => view === 1 || view === 2 || view === 3;
+
+  const occupiesGlobalDark = (task: any) => {
+    if (!task?.participates) return false;
+    if (task.view === 2 || task.view === 3 || task.view === 4) return true;
+    return task.view === 1 && !!task.parkAfterHide;
+  };
+
+  const setGlobalDarkView = (group: AreaGroup, view: number) => {
+    group.dark.view = view;
+    if (group.dark.el) group.dark.el.setAttribute('view', `${view}`);
+  };
+
+  const ensureGlobalDarkEl = (area: string, group: AreaGroup) => {
+    if (!env.client) return null;
+    if (group.dark.el?.isConnected) return group.dark.el;
+    group.dark.el = null;
+    group.dark.listening = false;
+    const container = document.querySelector(area);
+    if (!container) return null;
+    let el = container.querySelector(':scope > .fekit-layer-dark') as HTMLElement | null;
+    if (!el) {
+      el = document.createElement('div');
+      el.className = 'fekit-layer-dark';
+      el.setAttribute('view', '0');
+      container.insertBefore(el, container.firstChild);
+    }
+    group.dark.el = el;
+    el.addEventListener('animationend', (ev) => {
+      if (ev.target !== el) return;
+      if (group.dark.view === 2) setGlobalDarkView(group, 3);
+      if (group.dark.view === 1) {
+        setGlobalDarkView(group, 0);
+        const afterHide = group.dark.afterHide;
+        group.dark.afterHide = undefined;
+        afterHide?.();
+      }
+    });
+    group.dark.listening = true;
+    return el;
+  };
+
+  const syncGlobalDarkOpacity = (area: string, group: AreaGroup) => {
+    let opacity = '0.75';
+    for (let index = group.stack.length - 1; index >= 0; index -= 1) {
+      const task = _tasks[group.stack[index]];
+      if (occupiesGlobalDark(task)) {
+        opacity = resolveDarkOpacity(task.dark);
+        break;
+      }
+    }
+    const el = group.dark.owners.size ? ensureGlobalDarkEl(area, group) : group.dark.el;
+    if (el) el.style.setProperty('--layer-dark', opacity);
+  };
+
+  const acquireGlobalDark = (area: string, group: AreaGroup, layerId: string, immediate = false) => {
+    if (!layerId) return;
+    if (group.dark.owners.has(layerId)) {
+      syncGlobalDarkOpacity(area, group);
+      return;
+    }
+    group.dark.owners.add(layerId);
+    const el = ensureGlobalDarkEl(area, group);
+    if (!el) return;
+    syncGlobalDarkOpacity(area, group);
+    if (group.dark.owners.size > 1) {
+      if (group.dark.view === 1) setGlobalDarkView(group, 3);
+      else if (group.dark.view === 0) setGlobalDarkView(group, immediate ? 3 : 2);
+      return;
+    }
+    if (immediate) {
+      setGlobalDarkView(group, 3);
+      return;
+    }
+    if (group.dark.view === 0) setGlobalDarkView(group, 2);
+    else if (group.dark.view === 1) setGlobalDarkView(group, 3);
+  };
+
+  const releaseGlobalDark = (area: string, group: AreaGroup, layerId: string, immediate = false) => {
+    if (!layerId || !group.dark.owners.delete(layerId)) {
+      syncGlobalDarkOpacity(area, group);
+      return;
+    }
+    syncGlobalDarkOpacity(area, group);
+    if (group.dark.owners.size > 0) return;
+    if (immediate || !group.dark.el) {
+      setGlobalDarkView(group, 0);
+      const afterHide = group.dark.afterHide;
+      group.dark.afterHide = undefined;
+      afterHide?.();
+      return;
+    }
+    if (group.dark.view === 0) return;
+    setGlobalDarkView(group, 1);
+  };
+
+  const visibleGroupIds = (group: AreaGroup) =>
+    group.stack.filter((layerId) => {
+      const view = _tasks[layerId]?.view;
+      return view === 2 || view === 3;
+    });
+
+  const groupHasBlocking = (group: AreaGroup, exceptId = '') =>
+    group.stack.some((layerId) => layerId !== exceptId && isBlockingView(_tasks[layerId]?.view));
+
+  const syncStackIndex = (group: AreaGroup) => {
+    group.stack.forEach((layerId, index) => {
+      _tasks[layerId]?.setStackIndex?.(index);
+    });
+  };
+
+  const recomputeRecess = (group: AreaGroup) => {
+    const visible = visibleGroupIds(group);
+    visible.forEach((layerId, index) => {
+      let depth = 0;
+      for (let next = index + 1; next < visible.length; next += 1) {
+        if (_tasks[visible[next]]?.openMode === 'cascade') depth += 1;
+      }
+      _tasks[layerId]?.setRecess?.(depth > 2 ? 2 : depth);
+    });
+    group.stack.forEach((layerId) => {
+      if (!visible.includes(layerId)) _tasks[layerId]?.setRecess?.(0);
+    });
+  };
+
+  const ensureOnStack = (group: AreaGroup, layerId: string) => {
+    const index = group.stack.indexOf(layerId);
+    if (index !== -1) group.stack.splice(index, 1);
+    group.stack.push(layerId);
+    syncStackIndex(group);
+  };
+
+  const removeFromStack = (group: AreaGroup, layerId: string) => {
+    const index = group.stack.indexOf(layerId);
+    if (index !== -1) group.stack.splice(index, 1);
+    syncStackIndex(group);
+  };
+
+  const removeFromQueue = (group: AreaGroup, layerId: string) => {
+    group.queue = group.queue.filter((job) => job.id !== layerId);
+  };
+
+  const getVisibleTop = (group: AreaGroup, exceptId = '') => {
+    for (let index = group.stack.length - 1; index >= 0; index -= 1) {
+      const layerId = group.stack[index];
+      if (layerId === exceptId) continue;
+      const task = _tasks[layerId];
+      if (task && (task.view === 2 || task.view === 3)) return task;
+    }
+    return undefined;
+  };
+
   const hasInlineProperty = (style: CSSStyleDeclaration, property: string) => {
     for (let index = 0; index < style.length; index += 1) {
       if (style.item(index) === property) return true;
@@ -307,25 +518,78 @@
 
   // 状态管理
   const state = reactive({
-    view: 0,
+    coverDark: '' as string | number,
+    immediate: false,
+    openMode: 'cover' as LayerMode,
     params: {},
+    parkAfterHide: false,
+    recess: 0,
+    stackIndex: 0,
+    view: 0,
   });
   const scrollLockOwner = {};
 
+  const layerStyle = computed(() => {
+    let style = '';
+    if (`${props.dark}` !== '') style += `--layer-dark:${props.dark};`;
+    if (`${state.coverDark}` !== '') style += `--layer-cover-dark:${state.coverDark};`;
+    if (props.zIndex) style += `z-index:${props.zIndex};`;
+    else if (state.stackIndex > 0) style += `z-index:${50 + state.stackIndex};`;
+    return style;
+  });
+
+  const syncTaskView = (view: number) => {
+    if (!_tasks[props.id]) return;
+    _tasks[props.id].view = view;
+    _tasks[props.id].openMode = state.openMode;
+    _tasks[props.id].parkAfterHide = state.parkAfterHide;
+    _tasks[props.id].participates = participatesInGroup(props.dark);
+    _tasks[props.id].dark = props.dark;
+  };
+
+  const syncOwnDarkOccupancy = () => {
+    if (!env.client || !participatesInGroup(props.dark) || !props.id) return;
+    const group = getAreaGroup(props.area);
+    const immediate = state.immediate;
+    if (
+      occupiesGlobalDark({
+        dark: props.dark,
+        parkAfterHide: state.parkAfterHide,
+        participates: true,
+        view: state.view,
+      })
+    ) {
+      acquireGlobalDark(props.area, group, props.id, immediate);
+    } else {
+      releaseGlobalDark(props.area, group, props.id, immediate);
+    }
+  };
+
   watch(
     () => state.view,
     (view: any) => {
-      if (_tasks[props.id]) {
-        _tasks[props.id].view = view;
-      }
+      syncTaskView(view);
       if (view === 2 || view === 3) pushEscapeStack(props.id);
       else removeEscapeStack(props.id);
       if (view > 0) acquireScrollLock(scrollLockOwner);
       else releaseScrollLock(scrollLockOwner);
+      syncOwnDarkOccupancy();
+      state.immediate = false;
+      if (participatesInGroup(props.dark) && props.id) {
+        nextTick(() => recomputeRecess(getAreaGroup(props.area)));
+      }
     },
     { deep: true, immediate: true },
   );
 
+  watch(
+    () => props.dark,
+    () => {
+      syncTaskView(state.view);
+      syncOwnDarkOccupancy();
+    },
+  );
+
   watch(
     () => props.escClose,
     (escClose) => {
@@ -350,6 +614,138 @@
     none: [],
   };
 
+  const resolveMode = (params: any): LayerMode => {
+    const mode = params?.mode;
+    if (mode === 'cascade' || mode === 'displace' || mode === 'replace' || mode === 'queue') return mode;
+    return 'cover';
+  };
+
+  const bindOpenCallbacks = (params: any = {}, then = () => {}) => {
+    if (params?.on?.show) on.show.push(params.on.show);
+    if (params?.on?.hide) on.hide.push(params.on.hide);
+    on.show.push(then);
+  };
+
+  const runCallbacks = (key: 'show' | 'hide' | 'none') => {
+    on[key].forEach((fun: any) => {
+      if (isFunction(fun)) fun();
+    });
+    on[key].length = 0;
+  };
+
+  const flushQueue = (group: AreaGroup) => {
+    if (groupHasBlocking(group) || !group.queue.length) return;
+    const job = group.queue.shift();
+    if (!job) return;
+    const task = _tasks[job.id];
+    if (!task) {
+      flushQueue(group);
+      return;
+    }
+    const playParams = { ...job.params };
+    if (playParams.mode === 'queue') delete playParams.mode;
+    if (job.kind === 'open') task.open(playParams, job.then);
+    else task.show(playParams, job.then);
+  };
+
+  const scheduleFlushQueue = (group: AreaGroup) => {
+    const flush = () => flushQueue(group);
+    if (group.dark.view === 1) {
+      const prev = group.dark.afterHide;
+      group.dark.afterHide = () => {
+        prev?.();
+        flush();
+      };
+      return;
+    }
+    nextTick(flush);
+  };
+
+  const onGroupLayerClosed = (layerId: string) => {
+    if (!participatesInGroup(props.dark)) return;
+    const group = getAreaGroup(props.area);
+    removeFromStack(group, layerId);
+    const topId = group.stack[group.stack.length - 1];
+    if (topId && _tasks[topId]?.view === 4) _tasks[topId].unpark();
+    recomputeRecess(group);
+    scheduleFlushQueue(group);
+  };
+
+  const closeReplacedLayers = (mode: LayerMode, params: any, immediate: boolean) => {
+    if (mode !== 'replace' || !participatesInGroup(props.dark) || !props.id) return;
+    const group = getAreaGroup(props.area);
+    const prev = getVisibleTop(group, props.id);
+    const targets = params?.replace === 'all' ? group.stack.filter((layerId) => layerId !== props.id) : prev ? [prev.id] : [];
+    targets.forEach((layerId) => {
+      const task = _tasks[layerId];
+      if (!task) return;
+      if (immediate) task.none();
+      else task.hide();
+    });
+  };
+
+  const applyIncomingRelation = (mode: LayerMode, params: any, immediate: boolean) => {
+    if (!participatesInGroup(props.dark) || !props.id) {
+      state.coverDark = '';
+      state.recess = 0;
+      return;
+    }
+    const group = getAreaGroup(props.area);
+    const prev = getVisibleTop(group, props.id);
+    state.coverDark = resolveCoverDark(mode, !!prev, params?.coverDark);
+    state.recess = 0;
+
+    if (mode === 'displace' && prev) prev.park({ immediate });
+    ensureOnStack(group, props.id);
+  };
+
+  const syncGroupPresentation = () => {
+    if (!participatesInGroup(props.dark) || !props.id) return;
+    recomputeRecess(getAreaGroup(props.area));
+  };
+
+  const tryEnqueue = (kind: 'open' | 'show', params: any, then: any) => {
+    if (!participatesInGroup(props.dark) || resolveMode(params) !== 'queue' || !props.id) return false;
+    const group = getAreaGroup(props.area);
+    if (!groupHasBlocking(group, props.id)) return false;
+    removeFromQueue(group, props.id);
+    group.queue.push({ id: props.id, kind, params, then });
+    return true;
+  };
+
+  const setRecess = (depth: number) => {
+    state.recess = depth;
+  };
+
+  const setStackIndex = (index: number) => {
+    state.stackIndex = index;
+  };
+
+  const park = (options: any = {}) => {
+    if (options.immediate) {
+      state.parkAfterHide = false;
+      state.immediate = true;
+      state.view = 4;
+      return;
+    }
+    if (state.view === 2 || state.view === 3) {
+      state.parkAfterHide = true;
+      syncTaskView(state.view);
+      state.view = 1;
+    }
+  };
+
+  const unpark = (options: any = {}) => {
+    if (state.view !== 4) return;
+    state.parkAfterHide = false;
+    if (options.immediate) {
+      state.immediate = true;
+      state.view = 3;
+      return;
+    }
+    state.view = 2;
+  };
+
   // 注入参数
   const init = (params: any = {}) => {
     _tasks[id].params = params;
@@ -364,68 +760,86 @@
 
   // 显示弹层
   const show = (params: any = {}, then = () => {}) => {
+    if (tryEnqueue('show', params, then)) return;
+    if (participatesInGroup(props.dark) && props.id) removeFromQueue(getAreaGroup(props.area), props.id);
+    bindOpenCallbacks(params, then);
+    state.openMode = resolveMode(params);
+    applyIncomingRelation(state.openMode, params, false);
+    state.parkAfterHide = false;
     state.view = 2;
-    if (params?.on?.show) {
-      on.show.push(params.on.show);
-    }
-    if (params?.on?.hide) {
-      on.hide.push(params.on.hide);
-    }
-    on.show.push(then);
+    closeReplacedLayers(state.openMode, params, false);
+    syncGroupPresentation();
   };
 
   // 隐藏弹层
   const hide = (_params: any = {}, then = () => {}) => {
-    if (state.view === 3) {
+    if (state.view === 4) {
+      on.hide.push(then);
+      state.parkAfterHide = false;
+      state.immediate = true;
+      state.view = 0;
+      runCallbacks('hide');
+      onGroupLayerClosed(id);
+      return;
+    }
+    if (state.view === 2 || state.view === 3) {
+      state.parkAfterHide = false;
+      syncTaskView(state.view);
       state.view = 1;
       on.hide.push(then);
     }
   };
 
   // 打开弹层(没有动画过程)
-  const open = (_params: any = {}, then = () => {}) => {
+  const open = (params: any = {}, then = () => {}) => {
+    if (tryEnqueue('open', params, then)) return;
+    if (participatesInGroup(props.dark) && props.id) removeFromQueue(getAreaGroup(props.area), props.id);
+    bindOpenCallbacks(params, then);
+    state.openMode = resolveMode(params);
+    applyIncomingRelation(state.openMode, params, true);
+    state.parkAfterHide = false;
+    state.immediate = true;
     state.view = 3;
-    on.show.push(then);
+    closeReplacedLayers(state.openMode, params, true);
+    syncGroupPresentation();
+    runCallbacks('show');
   };
   // 关闭弹层(没有动画过程)
   const none = (_params: any = {}, then = () => {}) => {
+    const wasOpen = state.view > 0;
+    if (participatesInGroup(props.dark) && props.id) removeFromQueue(getAreaGroup(props.area), props.id);
+    state.parkAfterHide = false;
+    state.immediate = true;
     state.view = 0;
     on.none.push(then);
     // 立即执行回调，因为没有动画
-    on.none.forEach((fun: any) => {
-      if (isFunction(fun)) {
-        fun();
-      }
-    });
-    on.none.length = 0;
+    runCallbacks('none');
+    if (wasOpen) onGroupLayerClosed(id);
   };
 
   // 点暗层关闭
   const _sys_hide = (ev: any) => {
     if (props.darkClickClose && ev.target.className === 'fekit-layer-wrap' && state.view === 3) {
-      state.view = 1;
+      hide();
     }
   };
 
   // 监听动画
-  const anim = () => {
+  const anim = (ev?: AnimationEvent) => {
+    if (ev && ev.target !== ev.currentTarget) return;
     if (state.view === 1) {
+      if (state.parkAfterHide) {
+        state.parkAfterHide = false;
+        state.view = 4;
+        return;
+      }
       state.view = 0;
-      on.hide.forEach((fun: any) => {
-        if (isFunction(fun)) {
-          fun();
-        }
-      });
-      on.hide.length = 0; // 清空回调数组
+      runCallbacks('hide');
+      onGroupLayerClosed(id);
     }
     if (state.view === 2) {
       state.view = 3;
-      on.show.forEach((fun: any) => {
-        if (isFunction(fun)) {
-          fun();
-        }
-      });
-      on.show.length = 0; // 清空回调数组
+      runCallbacks('show');
     }
   };
 
@@ -435,7 +849,25 @@
     console.error('Layer 有重复 id', id);
   }
   if (id) {
-    _tasks[id] = { init, show, hide, open, none, view: state.view, escClose: props.escClose, darkClickClose: props.darkClickClose };
+    _tasks[id] = {
+      dark: props.dark,
+      darkClickClose: props.darkClickClose,
+      escClose: props.escClose,
+      hide,
+      id,
+      init,
+      none,
+      open,
+      openMode: state.openMode,
+      park,
+      parkAfterHide: state.parkAfterHide,
+      participates: participatesInGroup(props.dark),
+      setRecess,
+      setStackIndex,
+      show,
+      unpark,
+      view: state.view,
+    };
     ensureEscapeListener();
   } else {
     console.error('Layer 必须填写全局统一的 id');
@@ -443,6 +875,17 @@
 
   // 卸载弹层
   onBeforeUnmount(() => {
+    if (participatesInGroup(props.dark) && id) {
+      const group = getAreaGroup(props.area);
+      removeFromQueue(group, id);
+      if (state.view > 0) {
+        state.immediate = true;
+        state.view = 0;
+        onGroupLayerClosed(id);
+      } else {
+        removeFromStack(group, id);
+      }
+    }
     removeEscapeStack(id);
     releaseScrollLock(scrollLockOwner);
     delete _tasks[id];
@@ -453,24 +896,122 @@
   @use '@neatui/css' as neatui;
 
   // 弹层
+  @keyframes am-layer-dark-show {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes am-layer-dark-hide {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .fekit-layer-dark {
+    --layer-dark: 0.75;
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    pointer-events: none;
+    background-color: rgba(0, 0, 0, var(--layer-dark));
+    opacity: 0;
+    transition: background-color 180ms linear;
+
+    &[view='2'] {
+      animation: am-layer-dark-show 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
+    }
+
+    &[view='3'] {
+      opacity: 1;
+    }
+
+    &[view='1'] {
+      animation: am-layer-dark-hide 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
+    }
+
+    &[view='0'] {
+      opacity: 0;
+    }
+  }
+
   .fekit-layer {
+    --layer-dark: 0.75;
+    --layer-cover-dark: 0.32;
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     z-index: 50;
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: transparent;
     pointer-events: none;
 
+    .fekit-layer-cover-dark {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      background-color: rgba(0, 0, 0, var(--layer-cover-dark));
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &[view='2'] .fekit-layer-cover-dark {
+      animation: am-layer-dark-show 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
+    }
+
+    &[view='3'] .fekit-layer-cover-dark {
+      opacity: 1;
+    }
+
+    &[view='1'] .fekit-layer-cover-dark {
+      animation: am-layer-dark-hide 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
+    }
+
+    &[view='4'] {
+      pointer-events: none;
+
+      .fekit-layer-wrap {
+        pointer-events: none;
+
+        & > * {
+          opacity: 0;
+          visibility: hidden;
+        }
+      }
+    }
+
+    &[view='3'][data-recess='1'] .fekit-layer-wrap > *:not(.fekit-layer-cover-dark) {
+      transform: scale(0.94);
+      opacity: 0.88;
+      transition:
+        transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &[view='3'][data-recess='2'] .fekit-layer-wrap > *:not(.fekit-layer-cover-dark) {
+      transform: scale(0.88);
+      opacity: 0.76;
+      transition:
+        transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
     &-wrap {
       position: relative;
       width: 100%;
       height: 100%;
       pointer-events: auto;
 
-      & > * {
+      & > *:not(.fekit-layer-cover-dark) {
         position: relative !important;
+        z-index: 1;
 
         &.com-dialog {
           max-width: 80%;