@neatui/vue 1.0.0

package/src/components/basic/IRouterView@v4.vue

@@ -0,0 +1,362 @@
+<template>
+  <div :am-view="view" :am-mode="mode" class="route-view pr full bg-back" :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'">
+      <slot name="item" :mode="mode"></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { deepcopy } from '@fekit/utils';
+  import { onMounted, onUnmounted, 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 itemRef: any = ref(null);
+  // 取消
+  const cancel = ({ target }: any = {}) => {
+    const ifollow: any = document.querySelector('#ifollow');
+    const fekit: any = document.querySelector('#fekit');
+    const toasts: any = document.querySelectorAll('.mc-toast');
+    const layers: any = document.querySelectorAll('.fekit-layer');
+    if (
+      itemRef.value &&
+      !itemRef.value.contains(target) &&
+      !ifollow?.contains(target) &&
+      !fekit?.contains(target) &&
+      Array.from(layers).every((t: any) => !t.contains(target)) &&
+      Array.from(toasts).every((t: any) => !t.contains(target))
+    ) {
+      const _query = { ...route.query };
+      delete _query[props.queryName];
+      router.push({ path: route.path, query: _query });
+    }
+  };
+  onMounted(() => {
+    if (props.mode === 'preview' || props.mode === 'pop-up') {
+      document.addEventListener('click', cancel, true);
+    }
+  });
+  onUnmounted(() => {
+    if (props.mode === 'preview' || props.mode === 'pop-up') {
+      document.removeEventListener('click', cancel, true);
+    }
+  });
+</script>
+
+<style lang="scss">
+  // 默认模式
+  [am-view][am-mode~='default'] {
+    overflow: hidden;
+
+    @keyframes am-show-default {
+      0% {
+        opacity: 0;
+        transform: translate3d(2em, 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(2em, 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 {
+      width: 40rem;
+      height: 100%;
+      box-shadow: -0.5em 0 1em rgba(0, 0, 0, 0.07);
+      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>

package/src/components/basic/IScrollView.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="full fekit-ipull-scroll" ui-scroll=":y" ref="root">
+    <div>
+      <div class="fs-xs co-text o-mm" fekit-pullload-head="" v-if="pull">
+        <div v-show="demo.store.pull < 2" ui-flex="row cm">
+          <i class="pulldown icon icon-pulldown" :class="`${demo.store.pull === 1 ? 'toup' : ''}`"></i>
+          <span v-show="demo.store.pull === 0">下拉刷新</span>
+          <span v-show="demo.store.pull === 1">松开加载</span>
+        </div>
+        <div v-show="demo.store.pull === 2" ui-flex="row cm">
+          <span ui-load="@d"></span>
+          <!-- <span>正在刷新</span> -->
+        </div>
+        <div v-show="demo.store.pull === 3" ui-flex="row cm">
+          <span>刷新完成</span>
+        </div>
+      </div>
+      <slot></slot>
+      <div class="fs-xs co-text o-mm mb-sm" fekit-pullload-foot="" v-if="load">
+        <transition name="fekit-pullload-fade" mode="out-in">
+          <div v-if="demo.store.load === 2" ui-flex="row cm">
+            <span ui-load="@d"></span>
+            <!-- <span>正在加载</span> -->
+          </div>
+          <div v-else-if="demo.store.load === 3">没有更多了</div>
+          <div v-else>&nbsp;</div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { onMounted, onBeforeUnmount, ref } from 'vue';
+  import PullLoad, { Easing } from '@fekit/pullload';
+  const emits = defineEmits(['onpull', 'onload']);
+  const props: any = defineProps({
+    pull: {
+      type: Boolean,
+      default: true
+    },
+    load: {
+      type: Boolean,
+      default: true
+    }
+  });
+  const root: any = ref(null);
+  const demo: any = ref(null);
+  demo.value = new PullLoad({
+    easing: Easing.easeOut,
+    friction: 0.3,
+    triggerDistance: 60,
+    loadingDistance: 50,
+    ...(props.pull
+      ? {
+          onpull: async () => {
+            emits('onpull', demo.value);
+          }
+        }
+      : {}),
+    ...(props.pull
+      ? {
+          onload: async () => {
+            emits('onload', demo.value);
+          }
+        }
+      : {})
+  });
+
+  onMounted(() => {
+    if (root.value) {
+      demo.value?.listen(root.value);
+      if (props.pull) {
+        demo.value?.ispull();
+      }
+    }
+  });
+  onBeforeUnmount(() => {
+    demo.value?.remove();
+  });
+
+  const pullload = () => {
+    demo.value?.ispull();
+  };
+
+  defineExpose({ pullload, ex: () => demo.value });
+</script>
+
+<style lang="scss">
+  .fekit-ipull-scroll {
+    [fekit-pullload-head],
+    [fekit-pullload-foot] {
+      position: absolute;
+      width: 100%;
+      height: 2em;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+    }
+    [fekit-pullload-head] {
+      bottom: 100%;
+      margin-bottom: 1em;
+    }
+    [fekit-pullload-foot] {
+      position: relative;
+      top: 100%;
+    }
+
+    .fekit-pullload-fade-enter-active,
+    .fekit-pullload-fade-leave-active {
+      transition: opacity 0.2s;
+    }
+    .fekit-pullload-fade-enter,
+    .fekit-pullload-fade-leave-to {
+      opacity: 0;
+    }
+
+    .pulldown {
+      transition: all 0.3s;
+      display: inline-block;
+      &.toup {
+        transform: rotate(180deg);
+      }
+    }
+  }
+</style>

package/src/components/basic/Icon.vue

@@ -0,0 +1,54 @@
+<template>
+  <svg v-if="icons[name]" style="width: 1em; height: 1em" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path v-for="(d, i) in icons[name]?.path" :key="i" :d="d" />
+  </svg>
+</template>
+<script setup lang="ts">
+  const icons: any = {
+    'arrow-left': {
+      path: [
+        'M655.2 844c-12 0-24-4.8-32-13.6L336.8 544c-8.8-8.8-13.6-20-13.6-32s4.8-24 13.6-32l286.4-287.2c8.8-8 20-12.8 32-12.8s24 4.8 32 13.6c8.8 8.8 13.6 20 13.6 32s-4.8 23.2-12.8 32L432.8 512l254.4 254.4c8.8 8.8 13.6 20 13.6 32s-4.8 23.2-13.6 32c-8 8.8-20 13.6-32 13.6z'
+      ]
+    },
+    'arrow-right': {
+      path: [
+        'M368.8 844c-12 0-24-4.8-32-13.6-8.8-8.8-13.6-20-13.6-32s4.8-24 13.6-32L591.2 512 336.8 256.8c-8-8.8-12.8-20-12.8-32s4.8-23.2 13.6-32c8-8 20-13.6 32-13.6s23.2 4.8 32 12.8L688 479.2c8.8 8.8 13.6 20 13.6 32s-4.8 24-13.6 32l-286.4 286.4c-9.6 9.6-20.8 14.4-32.8 14.4z'
+      ]
+    },
+    'double-arrow-left': {
+      path: [
+        'M518.4 836.8c-11.2 0-22.4-4.8-31.2-12.8L205.6 541.6c-8.8-8.8-12.8-20-12.8-32s4.8-23.2 12.8-32l281.6-282.4c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8c8.8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 32L300.8 509.6 551.2 760c8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 31.2-20 13.6-32.8 13.6z',
+        'M786.4 840.8c-11.2 0-22.4-4.8-31.2-12.8L473.6 546.4c-8-8-12.8-20-12.8-32s4.8-23.2 12.8-32L755.2 200c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8c8.8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 32L568 514.4l250.4 250.4c8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 31.2c-8.8 8-20 12.8-32 12.8z'
+      ]
+    },
+    'double-arrow-right': {
+      path: [
+        'M504.8 836.8c-12 0-23.2-4.8-31.2-12.8s-12.8-19.2-12.8-31.2 4-23.2 12.8-31.2l250.4-250.4-250.4-252c-8.8-8.8-12.8-20-12.8-32s4.8-23.2 12.8-32c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8l281.6 282.4c8 8 12.8 20 12.8 32s-4.8 23.2-12.8 32L536.8 824c-8.8 8-20 12.8-32 12.8 0.8 0 0 0 0 0z',
+        'M237.6 840.8c-12 0-23.2-4.8-31.2-12.8s-12.8-19.2-12.8-31.2 4-23.2 12.8-31.2L456 514.4 205.6 264c-8.8-8.8-12.8-20-12.8-32s4.8-23.2 12.8-32c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8l281.6 282.4c8.8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 32l-281.6 282.4c-9.6 8-20 12-32 12z'
+      ]
+    },
+    more: {
+      path: [
+        'M512 512m-116.363636 0a116.363636 116.363636 0 1 0 232.727272 0 116.363636 116.363636 0 1 0-232.727272 0Z',
+        'M116.363636 512m-93.090909 0a93.090909 93.090909 0 1 0 186.181818 0 93.090909 93.090909 0 1 0-186.181818 0Z',
+        'M907.636364 512m-93.090909 0a93.090909 93.090909 0 1 0 186.181818 0 93.090909 93.090909 0 1 0-186.181818 0Z'
+      ]
+    },
+    setting: {
+      path: [
+        'M512 998.4c-22.4 0-44.8-3.2-67.2-6.4-35.2-6.4-67.2-32-76.8-64-16-54.4-64-89.6-121.6-89.6-9.6 0-19.2 0-28.8 3.2-6.4 0-12.8 3.2-19.2 3.2-28.8 0-54.4-12.8-73.6-35.2-25.6-35.2-51.2-73.6-67.2-115.2-12.8-35.2-6.4-73.6 19.2-99.2 44.8-48 44.8-121.6 0-172.8-25.6-25.6-32-64-19.2-99.2 19.2-38.4 41.6-76.8 70.4-112 19.2-22.4 44.8-35.2 73.6-35.2 6.4 0 12.8 0 19.2 3.2 9.6 3.2 19.2 3.2 28.8 3.2 54.4 0 102.4-35.2 118.4-89.6 9.6-35.2 41.6-60.8 76.8-64 22.4-3.2 44.8-3.2 67.2-3.2 22.4 0 44.8 0 67.2 3.2 35.2 6.4 67.2 32 76.8 64 9.6 32 28.8 57.6 57.6 70.4 19.2 9.6 41.6 16 64 16 9.6 0 19.2 0 28.8-3.2 6.4 0 12.8-3.2 19.2-3.2 28.8 0 54.4 12.8 73.6 35.2 25.6 35.2 48 76.8 67.2 118.4 12.8 32 6.4 73.6-19.2 99.2-44.8 48-44.8 121.6 0 172.8 25.6 25.6 32 64 19.2 99.2-16 41.6-38.4 80-67.2 115.2-19.2 22.4-44.8 35.2-73.6 35.2-6.4 0-12.8 0-19.2-3.2-9.6-3.2-19.2-3.2-28.8-3.2-54.4 0-102.4 35.2-118.4 89.6-9.6 35.2-41.6 60.8-76.8 64-25.6 3.2-48 3.2-70.4 3.2z m-265.6-236.8c89.6 0 169.6 57.6 198.4 144 3.2 6.4 6.4 9.6 12.8 9.6 19.2 3.2 35.2 3.2 54.4 3.2 12.8 0 25.6 0 38.4-3.2h22.4c6.4-3.2 9.6-6.4 9.6-9.6 16-51.2 48-92.8 92.8-115.2 32-19.2 67.2-25.6 102.4-25.6 16 0 32 3.2 44.8 6.4h3.2c3.2 0 9.6-3.2 12.8-3.2 22.4-28.8 41.6-60.8 57.6-96 3.2-6.4 0-12.8-3.2-16-70.4-80-70.4-198.4 0-275.2 3.2-6.4 3.2-12.8 3.2-19.2-12.8-35.2-32-67.2-57.6-96-6.4-6.4-9.6-9.6-12.8-9.6h-3.2c-16 3.2-28.8 6.4-44.8 6.4-35.2 0-70.4-9.6-102.4-25.6-44.8-25.6-76.8-67.2-92.8-115.2 0-6.4-6.4-9.6-9.6-9.6-19.2-3.2-38.4-3.2-57.6-3.2s-38.4 0-57.6 3.2c-6.4 3.2-9.6 6.4-9.6 9.6-16 51.2-48 92.8-92.8 115.2-32 19.2-67.2 25.6-102.4 25.6-16 0-32-3.2-44.8-6.4h-3.2c-9.6 3.2-12.8 3.2-16 6.4-22.4 28.8-41.6 60.8-57.6 96-3.2 6.4 0 12.8 3.2 16 70.4 80 70.4 198.4 0 275.2-3.2 3.2-3.2 9.6-3.2 16 12.8 35.2 32 67.2 54.4 96 3.2 3.2 9.6 6.4 16 6.4 12.8-3.2 28.8-6.4 44.8-6.4z m256-67.2c-48 0-92.8-19.2-128-54.4S320 560 320 512c0-99.2 83.2-182.4 182.4-182.4 102.4 0 182.4 83.2 182.4 182.4 0 102.4-80 182.4-182.4 182.4z m0-284.8c-57.6 0-102.4 48-102.4 105.6 0 57.6 48 105.6 105.6 105.6 57.6 0 105.6-48 102.4-105.6 0-60.8-48-105.6-105.6-105.6v-3.2 3.2z'
+      ]
+    },
+    'tableloader-setting': {
+      path: [
+        'M372 981.6c-80 0-154.4-43.2-195.2-112L35.2 624.8c-40-68.8-40-155.2 0-224.8l141.6-244.8c40-69.6 115.2-112 195.2-112h282.4c80 0 154.4 43.2 195.2 112L991.2 400c40 68.8 40 155.2 0 224.8l-141.6 244.8c-40 69.6-115.2 112-195.2 112H372z m0-825.6c-39.2 0-76.8 21.6-96.8 56L134.4 456c-20 34.4-20 76.8 0 112l140.8 244.8c20 34.4 56.8 55.2 96.8 55.2h282.4c39.2 0 76.8-21.6 96.8-56l140.8-244.8c20-34.4 20-76.8 0-112L751.2 211.2c-20-34.4-56.8-55.2-96.8-55.2H372z m140.8 552.8c-108.8 0-196.8-88-196.8-196.8 0-108.8 88-196.8 196.8-196.8 108.8 0 196.8 88 196.8 196.8 0.8 108.8-88 196.8-196.8 196.8z m0-280c-45.6 0-83.2 37.6-83.2 83.2s37.6 83.2 83.2 83.2c22.4 0 43.2-8.8 59.2-24 16-16 24-36.8 24-59.2 0-45.6-37.6-83.2-83.2-83.2z'
+      ]
+    }
+  };
+  const props: any = defineProps({
+    name: {
+      type: String,
+      default: ''
+    }
+  });
+</script>