@neatui/nuxt 0.1.0

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: false
+    },
+    load: {
+      type: Boolean,
+      default: false
+    }
+  });
+  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>

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

@@ -0,0 +1,339 @@
+<!-- 实验性插件 -->
+<template>
+  <Teleport :to="area">
+    <div
+      v-if="state.view"
+      :am-view="am"
+      :data-key="id"
+      :style="`${`${dark}` ? 'background-color: rgba(0, 0, 0, ' + dark + ');' : ''}${zIndex ? 'z-index:' + zIndex + ';' : ''}`"
+      :view="state.view"
+      class="fekit-layer"
+    >
+      <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
+        <slot></slot>
+      </div>
+    </div>
+  </Teleport>
+</template>
+<script lang="ts" setup>
+  import { onBeforeUnmount, PropType, reactive, ref, watch } from 'vue';
+  import { isFunction } from '@fekit/utils';
+
+  // 弹层队列
+  if (!(window as any)._FEKIT_LAYER_TASKS) {
+    (window as any)._FEKIT_LAYER_TASKS = {};
+  }
+  const _tasks: any = (window as any)._FEKIT_LAYER_TASKS;
+
+  // 弹窗入参
+  const 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 _area: any = document.querySelector(props.area);
+  if (!_area) {
+    const el = document.createElement('div');
+    el.id = (props.area || '#fekit').substring(1);
+    el.style.position = 'absolute';
+    document.body.appendChild(el);
+  }
+
+  // 状态管理
+  const state = reactive({
+    view: 0,
+    params: {},
+    top: 0
+  });
+
+  function disableScroll() {
+    state.top = document.documentElement.scrollTop;
+    document.body.style.overflow = 'hidden';
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${state.top}px`;
+    document.body.style.width = '100%';
+  }
+
+  function enableScroll() {
+    document.body.style.removeProperty('overflow');
+    document.body.style.removeProperty('position');
+    document.body.style.removeProperty('top');
+    document.body.style.removeProperty('width');
+    window.scrollTo(0, state.top);
+  }
+
+  watch(
+    () => state.view,
+    (view: any) => {
+      if (view === 2) {
+        disableScroll();
+      }
+      if (view === 0) {
+        enableScroll();
+      }
+    },
+    { deep: true, immediate: true }
+  );
+
+  // 回调合集
+  const on: any = {
+    show: [],
+    hide: [],
+    open: [],
+    none: []
+  };
+
+  // 注入参数
+  const init = (params: any = {}) => {
+    _tasks[id].params = params;
+    if (params?.on?.show) {
+      on.show.push(params.on.show);
+    }
+    if (params?.on?.hide) {
+      on.hide.push(params.on.hide);
+    }
+    return _tasks[id];
+  };
+
+  // 显示弹层
+  const show = (params: any = {}, then = () => {}) => {
+    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);
+  };
+
+  // 隐藏弹层
+  const hide = (_params: any = {}, then = () => {}) => {
+    if (state.view === 3) {
+      state.view = 1;
+      on.hide.push(then);
+    }
+  };
+
+  // 打开弹层(没有动画过程)
+  const open = (_params: any = {}, then = () => {}) => {
+    state.view = 3;
+    on.show.push(then);
+  };
+  // 关闭弹层(没有动画过程)
+  const none = (_params: any = {}, then = () => {}) => {
+    state.view = 0;
+    on.show.push(then);
+  };
+
+  // 点暗层关闭
+  const _sys_hide = (ev: any) => {
+    if (props.darkClickClose && ev.target.className === 'fekit-layer-wrap' && state.view === 3) {
+      state.view = 1;
+    }
+  };
+
+  // 监听动画
+  const anim = () => {
+    if (state.view === 1) {
+      state.view = 0;
+      on.hide.forEach((fun: any) => {
+        // isFunction(fun) && fun();
+        if (isFunction(fun)) {
+          fun();
+        }
+      });
+    }
+    if (state.view === 2) {
+      state.view = 3;
+      on.show.forEach((fun: any) => {
+        // isFunction(fun) && fun();
+        if (isFunction(fun)) {
+          fun();
+        }
+      });
+    }
+  };
+
+  // 注册弹层
+  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(() => {
+    delete _tasks[id];
+  });
+</script>
+<!-- <script lang="ts">
+  export const LayerById = (id: any) => {
+    return (window as any)._FEKIT_LAYER_TASKS[id];
+  };
+</script> -->
+
+<style lang="scss">
+  // 弹层
+  .fekit-layer {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 50;
+    background-color: rgba(0, 0, 0, 0.75);
+    pointer-events: none;
+
+    &-wrap {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      pointer-events: auto;
+
+      & > * {
+        position: relative !important;
+
+        &.com-dialog {
+          max-width: 80%;
+        }
+      }
+    }
+
+    &-close {
+      position: absolute;
+      width: 1.5em;
+      height: 1.5em;
+      left: 50%;
+      bottom: -2.5rem;
+      margin-left: -1rem;
+      padding: 0.25em;
+      text-align: center;
+      transform: scale(1) translate3d(0, -100%, 0);
+      transition: all 0.2s;
+      color: #fff;
+      box-shadow: 0 0 0 2px currentColor;
+      border-radius: 50%;
+      opacity: 0;
+      background:
+        linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 56%, transparent 57%) no-repeat center / 50% 50%,
+        linear-gradient(-45deg, transparent 44%, currentColor 45%, currentColor 56%, transparent 57%) no-repeat center / 50% 50%;
+
+      &:active {
+        transform: scale(0.9);
+      }
+    }
+
+    &[view='3'] {
+      .fekit-layer-close {
+        opacity: 0.85;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+
+    // &-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;
+    //   // box-shadow: 0 0 0 1px currentColor;
+    //   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%;
+    //   }
+    // }
+  }
+
+  // html {
+  //   &[size='xs'] {
+  //     .fekit-layer-close {
+  //       width: 16px;
+  //       height: 16px;
+  //     }
+  //   }
+  //   &[size='l'] {
+  //     .fekit-layer-close {
+  //       width: 20px;
+  //       height: 20px;
+  //     }
+  //   }
+  //   &[size='xl'] {
+  //     .fekit-layer-close {
+  //       width: 22px;
+  //       height: 22px;
+  //     }
+  //   }
+  // }
+</style>

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

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

package/src/components/basic/index.ts

@@ -0,0 +1,7 @@
+import { Layer, LayerById } from './LayerView';
+import Icon from './Icon.vue';
+import IFollowView from './IFollowView.vue';
+import IPickerView from './IPickerView.vue';
+import IScrollView from './IScrollView.vue';
+import IRouterView from './IRouterView.vue';
+export { Icon, IRouterView, IFollowView, IPickerView, IScrollView, Layer, LayerById };

package/src/components/display/Avatar.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Badge.vue

@@ -0,0 +1 @@
+<template><div></div></template>