@neatui/nuxt 0.1.0

package/src/components/basic/IPickerView.vue

@@ -0,0 +1,351 @@
+<template>
+  <div ref="dom" :class="btnClass" :style="btnStyle" class="fekit-picker-button" data-aaa="111" @click="toggle">
+    <slot></slot>
+  </div>
+  <Teleport to="#fekit">
+    <div v-if="state.view" :view="state.view" am-view="am" class="fekit-picker">
+      <div :ui-flex="`col cb`" class="fekit-picker-wrap" @animationend="anim" @click="_sys_hide">
+        <div class="picker bg-fore picker-virtual-key">
+          <slot name="options"></slot>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, onMounted } from 'vue';
+
+  // 回调合集
+  const on: any = {
+    show() {},
+    hide() {},
+    open() {},
+    none() {}
+  };
+
+  const area: any = document.querySelector('#fekit');
+  if (!area) {
+    const el = document.createElement('div');
+    el.id = 'fekit';
+    el.style.position = 'absolute';
+    document.body.appendChild(el);
+  }
+  const emits = defineEmits(['update:modelValue', 'show', 'hide']);
+  const props = defineProps({
+    btnClass: { type: String, default: 'dib' },
+    btnStyle: { type: String, default: 'dib' }
+  });
+
+  const dom: any = ref(null);
+  const tip: any = ref(null);
+  const state = reactive({
+    view: 0,
+    show: 0
+  });
+
+  // 开关
+  const toggle = () => {
+    state.view = state.view ? 0 : 2;
+  };
+
+  // 显示弹层
+  const show = (then = () => {}) => {
+    state.view = 2;
+    on.show = then;
+  };
+
+  // 隐藏弹层
+  const hide = (then = () => {}) => {
+    if (state.view === 3) {
+      state.view = 1;
+      on.hide = then;
+    }
+  };
+
+  // 监听动画
+  const anim = () => {
+    if (state.view === 1) {
+      state.view = 0;
+      on.hide();
+      emits('hide');
+    }
+    if (state.view === 2) {
+      state.view = 3;
+      on.show();
+      emits('show');
+    }
+  };
+
+  // 取消
+  const cancel = ({ target }: any = {}) => {
+    if (tip.value && !tip.value?.contains(target) && dom.value && !dom.value.contains(target)) {
+      state.show = 0;
+    }
+  };
+
+  // 点暗层关闭
+  const _sys_hide = (ev: any) => {
+    if (ev.target.className === 'fekit-picker-wrap' && state.view === 3) {
+      state.view = 1;
+    }
+  };
+
+  onMounted(() => {
+    document.addEventListener('click', cancel, true);
+  });
+
+  defineExpose({
+    show,
+    hide
+  });
+</script>
+
+<style lang="scss">
+  .fekit-picker-button {
+    & > *,
+    [ui-form-prefix],
+    [ui-form-suffix] {
+      pointer-events: none !important;
+    }
+  }
+
+  .picker {
+    width: 100%;
+    max-height: 50%;
+    border-radius: 0.5em 0.5em 0 0;
+  }
+
+  // 显示动画
+  @keyframes am-show-am {
+    0% {
+      opacity: 0;
+      transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
+    }
+    100% {
+      opacity: 1;
+      transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
+    }
+  }
+
+  // 隐藏动画
+  @keyframes am-hide-am {
+    0% {
+      opacity: 1;
+      transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
+    }
+    100% {
+      opacity: 0;
+      transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
+    }
+  }
+
+  // 引用显示
+  %am-show-am {
+    transform: translate3d(0, -150%, 0);
+    opacity: 0;
+    transform-style: preserve-3d;
+  }
+
+  // 引用隐藏
+  %am-hide-am {
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+    opacity: 0;
+    transform-style: preserve-3d;
+  }
+
+  // 传参调用
+  @mixin am-view-am($time: 450ms, $delay: 100ms) {
+    &.show,
+    &[view='2'] {
+      & > * {
+        @extend %am-show-am;
+        animation: am-show-am $time $delay both;
+      }
+    }
+
+    &.hide,
+    &[view='1'] {
+      opacity: 0;
+      transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+      pointer-events: none;
+
+      & > * {
+        @extend %am-hide-am;
+        animation: am-hide-am $time $delay both;
+      }
+    }
+
+    &.none,
+    &[view='0'] {
+      display: none;
+    }
+  }
+
+  // 动画时间
+  $time: 400ms;
+  $delay: 100ms;
+
+  // 全套引用
+  [am-view='am'] {
+    &.show,
+    &[view='2'] {
+      & > * {
+        @extend %am-show-am;
+        animation: am-show-am $time $delay both;
+      }
+    }
+
+    &.hide,
+    &[view='1'] {
+      opacity: 0;
+      transition: ($time + $delay) * 0.4 ($time + $delay) * 0.6;
+      pointer-events: none;
+
+      & > * {
+        @extend %am-hide-am;
+        animation: am-hide-am $time $delay ease-in-out both;
+      }
+    }
+
+    &.none,
+    &[view='0'] {
+      display: none;
+    }
+  }
+
+  @keyframes am-dark-show {
+    0% {
+      background-color: rgba(0, 0, 0, 0);
+    }
+    100% {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  @keyframes am-dark-hide {
+    0% {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+    100% {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+
+  // 弹层
+  .fekit-picker {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 50;
+    background-color: rgba(0, 0, 0, 0);
+    pointer-events: none;
+    transition: all 0.3s;
+
+    &[view~='1'] {
+      animation: am-dark-hide 0.3s both;
+    }
+
+    &[view~='2'],
+    &[view~='3'] {
+      animation: am-dark-show 0.3s both;
+    }
+
+    &-wrap {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      pointer-events: auto;
+
+      & > * {
+        position: relative !important;
+
+        &.com-dialog {
+          max-width: 80%;
+        }
+      }
+    }
+
+    &-close {
+      position: absolute;
+      width: 2rem;
+      height: 2rem;
+      line-height: 2rem;
+      right: 0.5rem;
+      top: 0.5rem;
+      text-align: center;
+      transform: rotate(0deg);
+      transition: all 0.2s;
+
+      &:hover {
+        transform: rotate(-90deg);
+      }
+    }
+
+    &-close {
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      right: 0.5em;
+      top: 0.5em;
+      padding: 0.25em;
+      text-align: center;
+      transition: all 0.2s;
+      border-radius: 50%;
+      background:
+        linear-gradient(45deg, transparent 44%, currentColor 46%, currentColor 54%, transparent 56%) no-repeat center / 50% 50%,
+        linear-gradient(-45deg, transparent 44%, currentColor 46%, currentColor 54%, transparent 56%) no-repeat center / 50% 50%;
+      transform: scale(1) rotate(0deg);
+      opacity: 0.8;
+      transition: all 0.25s;
+
+      &:hover {
+        transform: scale(1) rotate(-90deg);
+      }
+
+      &:active {
+        transform: scale(0.8) rotate(-90deg);
+      }
+
+      &::before {
+        position: absolute;
+        content: '';
+        width: 200%;
+        height: 200%;
+        left: -50%;
+        top: -50%;
+      }
+    }
+  }
+
+  @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
+    .picker-virtual-key {
+      padding-bottom: constant(safe-area-inset-bottom) !important;
+      padding-bottom: env(safe-area-inset-bottom) !important;
+    }
+  }
+
+  html {
+    &[size='xs'] {
+      .fekit-picker-close {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    &[size='l'] {
+      .fekit-picker-close {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    &[size='xl'] {
+      .fekit-picker-close {
+        width: 22px;
+        height: 22px;
+      }
+    }
+  }
+</style>

package/src/components/basic/IRouterView.vue

@@ -0,0 +1,360 @@
+<template>
+  <div :am-view="view" :am-mode="mode" class="iroute-view pr full" :view-full="full ? 1 : 0" @animationend="anim">
+    <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 class="iroute-view-dark" @click="cancel"></div>
+      <div class="iroute-view-body" :style="mode === 'preview' || mode === 'pop-up' ? 'box-shadow: rgba(0, 0, 0, 0.08) -5px 0px 10px 0px;' : 'width: 100%;'">
+        <slot name="item" :mode="mode"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { deepcopy } from '@fekit/utils';
+  import { ref, watch, provide, reactive } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  const route = useRoute();
+  const router = useRouter();
+
+  interface Props {
+    full?: boolean | 0 | 1;
+    once?: number;
+    mode?: 'default' | 'preview' | 'pop-up' | 'window';
+    queryName?: string;
+    listClass?: string;
+    listStyle?: string;
+    itemClass?: string;
+    itemStyle?: string;
+  }
+  const props: any = withDefaults(defineProps<Props>(), {
+    full: 0,
+    once: 0,
+    mode: 'default',
+    queryName: 'id',
+    listClass: 'full',
+    listStyle: '',
+    itemClass: 'full',
+    itemStyle: ''
+  });
+  const state: any = reactive({
+    first: 1,
+    list: null,
+    item: null
+  });
+
+  const evs = (v: any = 'list', p: any = 'item') => {
+    return (then: any = () => {}, param: any) => {
+      watch(
+        () => view.value,
+        () => {
+          if (view.value === v) {
+            if (param) {
+              state[p] = param;
+            }
+            if (!state.first) {
+              then({ view: view.value, mode: props.mode, param: deepcopy(state[v] || {}) });
+            } else {
+              state.first = 0;
+            }
+          }
+        },
+        { deep: true, immediate: true }
+      );
+    };
+  };
+  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-preview' ||
+      e.animationName === 'am-show-pop-up' ||
+      e.animationName === 'am-hide-default' ||
+      e.animationName === 'am-hide-preview' ||
+      e.animationName === 'am-hide-pop-up'
+    ) {
+      view.value = route.query[props.queryName] ? 'item' : 'list';
+    }
+  };
+
+  const a = () => {
+    if (init.value) {
+      if (!props.once) {
+        view.value = route.query[props.queryName] ? 'iteming' : 'listing';
+      }
+    } else {
+      view.value = route.query[props.queryName] ? 'item' : 'list';
+      init.value = 1;
+    }
+  };
+
+  watch(() => route.query[props.queryName], a);
+  a();
+
+  // 取消
+  const cancel = ({ target }: any = {}) => {
+    const _query = { ...route.query };
+    delete _query[props.queryName];
+    router.push({ path: route.path, query: _query });
+  };
+</script>
+
+<style lang="scss">
+  .iroute-view-dark {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+  .iroute-view-body {
+    z-index: 1;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  [am-mode='preview'] {
+    .iroute-view-body > * {
+      height: 100%;
+    }
+  }
+
+  // 默认模式
+  [am-view][am-mode~='default'] {
+    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 0.35s ease both;
+      }
+    }
+    &[am-view='listing'] {
+      [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'] {
+        display: flex;
+        animation: am-show-default 0.35s ease both;
+      }
+    }
+    &[am-view='iteming'] {
+      [am-view-item~='list'] {
+        display: flex;
+        animation: am-hide-default 0.3s ease-in-out both;
+      }
+    }
+  }
+
+  // 默认模式
+  [am-view][am-mode~='preview'] {
+    overflow: hidden;
+
+    @keyframes am-show-preview {
+      0% {
+        opacity: 0;
+        transform: translate3d(110%, 0, 0);
+      }
+      100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+    @keyframes am-hide-preview {
+      0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+      100% {
+        opacity: 0;
+        transform: translate3d(110%, 0, 0);
+      }
+    }
+
+    &[view-full~='1'] {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 15;
+    }
+
+    [am-view-item] {
+      &[am-view-item~='row'] {
+        flex-direction: row !important;
+      }
+
+      &[am-view-item~='list'] {
+        display: flex;
+      }
+      &[am-view-item~='item'] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 10;
+        display: flex;
+        justify-content: flex-end;
+        align-items: stretch;
+        align-content: space-between;
+        pointer-events: none;
+        & > * {
+          pointer-events: auto;
+        }
+      }
+    }
+    &[am-view='list'],
+    &[am-view='listing'] {
+      [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'] {
+        display: flex;
+        animation: am-show-preview 0.5s ease both;
+      }
+    }
+
+    .side-preview {
+      min-width: 10rem;
+      height: 100%;
+      box-shadow: -0.25em 0 0.5em rgba(0, 0, 0, 0.05);
+      pointer-events: auto;
+
+      &[ui-card~='@a'][ui-card~=':max'] {
+        width: 100%;
+      }
+    }
+  }
+
+  // 弹出窗口
+  [am-view][am-mode~='pop-up'] {
+    overflow: hidden;
+
+    @keyframes am-show-pop-up {
+      0% {
+        opacity: 0;
+        transform: translate3d(0, 0, 0) scale(0.95);
+      }
+      100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+    @keyframes am-hide-pop-up {
+      0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+      100% {
+        opacity: 0;
+        transform: translate3d(0, 0, 0) scale(0.95);
+      }
+    }
+
+    &[view-full~='1'] {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 15;
+    }
+
+    [am-view-item] {
+      &[am-view-item~='row'] {
+        flex-direction: row !important;
+      }
+
+      &[am-view-item~='list'] {
+        display: flex;
+      }
+      &[am-view-item~='item'] {
+        position: fixed;
+        top: 0;
+        right: 0;
+        z-index: 100;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+        pointer-events: none;
+        background-color: rgba(0, 0, 0, 0.5);
+        transition: all 0.35s;
+        & > * {
+          pointer-events: auto;
+        }
+      }
+    }
+    &[am-view='list'],
+    &[am-view='listing'] {
+      [am-view-item~='item'] {
+        display: flex;
+        opacity: 0;
+        & > * {
+          animation: am-hide-pop-up 0.35s ease both;
+        }
+      }
+    }
+    &[am-view='item'],
+    &[am-view='iteming'] {
+      [am-view-item~='item'] {
+        display: flex;
+        opacity: 1;
+        & > * {
+          animation: am-show-pop-up 0.35s ease both;
+        }
+      }
+    }
+  }
+</style>