@neatui/nuxt 0.1.0

package/src/components/tools/FormVerifyView.vue

@@ -0,0 +1,206 @@
+<template>
+  <div ui-tips="@a co:well">
+    <button :ui-btn="`@a s none ${verify?.length ? '' : ':square'}`" :class="`${verify?.length ? 'co-risk' : 'co-well'}`" @click="state.show = state.show ? 0 : 1">
+      <i v-if="verify?.length" class="icon icon-verify-no co-risk"></i>
+      <i v-else class="icon icon-verify-ok co-well"></i>
+      <span v-if="verify?.length">{{ verify?.length }}</span>
+    </button>
+    <div ui-tips-box="tl" :ux-view="state.show" class="w-xl mob:w-ll n-ms">
+      <div class="fekit-layer-close" ui-flex="row cm" @click="state.show = 0"><i class="icon icon-close fs-xs"></i></div>
+      <h4>温馨提示</h4>
+      <p v-if="verify?.length" class="ny-sm">本条记录疑似有{{ verify?.length }}个错误，您再检查一遍吧～</p>
+      <p v-else class="nb-sm">好棒哦，没有发现任何错误！</p>
+      <p v-if="verify.length">
+        <span v-if="state.detail" class="ux-click co-link" @click="state.detail = 0">隐藏详情<i class="icon icon-dropdown r180"></i></span>
+        <span v-else class="ux-click co-link" @click="state.detail = 1">显示详情<i class="icon icon-dropdown"></i></span>
+      </p>
+      <ul v-if="state.detail" class="co-read" ui-scroll=":y s" style="max-height: 8em">
+        <li v-for="(err, idx) in verify" :key="idx">
+          <i v-if="err.type === 'warn'" class="icon icon-warn co-warn"></i>
+          <i v-else class="icon icon-error co-risk"></i>
+          <span class="nl-ss">
+            <span class="ux-hover ny-xs nx-ss r-sm" @click="fScrollToField(err.path)">[{{ err.label }}]</span>
+            <span class="ml-sm">{{ err.msg || '有一个错误' }}</span>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, reactive, toRefs, watch, onMounted, ref, onUnmounted } from 'vue';
+  import { useRoute } from 'vue-router';
+  import scrollTo from '@fekit/scrollto';
+  import { deepcopy, isArray, isObject, isFunction } from '@fekit/utils';
+
+  const route: any = useRoute();
+
+  const props: any = defineProps({
+    area: {
+      type: HTMLElement,
+      default: document.body
+    },
+    data: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+    form: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  const state: any = reactive({
+    __update: true,
+    mode: route.query.mode,
+    show: 0,
+    detail: 1,
+    // 数据校验
+    verify: computed(() => {
+      const error: any = [{ __update: state.__update }];
+      const edit = props.data || {};
+      const form = props.form || {};
+      // 核心
+      const core = (data: any = {}, form: any = {}, path: any = '') => {
+        Object.keys(data).forEach((item: any) => {
+          // 是否有表单结构
+          if (form[item]) {
+            // 是否末端
+            if (form[item]?.child && (isArray(data[item]) || isObject(data[item]))) {
+              if (isArray(data[item])) {
+                data[item].forEach((sub: any, idx: number) => {
+                  core(sub, form[item].child, path + '-' + form[item].field + '-' + idx);
+                });
+              } else {
+                (Object.values(data[item]) || []).forEach((sub: any, idx: number) => {
+                  core(sub, form[item].child, path + '-' + form[item].field + '-' + idx);
+                });
+              }
+            } else {
+              const value = data[item];
+              const { label = '', field = '', rules = [], clear = false } = form[item] || {};
+              if (isFunction(clear) ? !clear(data) : !clear) {
+                const _path = path + '-' + field;
+                rules?.forEach((rule: any = {}) => {
+                  const { type = '', msg = '', required = null, validator = null } = rule;
+                  if (required) {
+                    if (isArray(value)) {
+                      if (!value.length) {
+                        error.push({ field, label, type, msg, path: _path });
+                      }
+                    } else {
+                      if (!value) {
+                        error.push({ field, label, type, msg, path: _path });
+                      }
+                    }
+                  }
+                  const _validator = isFunction(validator) ? validator(deepcopy(props.data)) : null;
+                  if (value && _validator && !_validator(value)) {
+                    error.push({ field, label, type, msg, path: _path });
+                  }
+                });
+              }
+            }
+          }
+        });
+      };
+      core(edit, form, '#form-field');
+      error.shift();
+      return error;
+    })
+  });
+  const { verify = [] }: any = toRefs(state);
+
+  // 为了在退出编辑的时候平滑过滤
+  watch(
+    () => route.query.mode,
+    (mode) => {
+      if (mode) {
+        state.mode = mode;
+      } else {
+        setTimeout(() => {
+          state.mode = '';
+          state.show = 0;
+        }, 300);
+      }
+    }
+  );
+
+  const fScrollToField = (path: any) => {
+    const dom = document.querySelector(path);
+    if (dom) {
+      scrollTo({
+        el: props.area,
+        to: {
+          y: dom
+        },
+        offset: { y: -36 },
+        then() {
+          const input = dom.querySelector('input');
+          if (input) {
+            input?.focus();
+          }
+        }
+      });
+    }
+  };
+
+  // 初始化时进入页面时自动弹出
+  const timer1: any = ref(null);
+  onMounted(() => {
+    timer1.value = setTimeout(() => {
+      if (state.verify.length) {
+        state.show = 1;
+      }
+    }, 1000);
+  });
+  onUnmounted(() => {
+    clearTimeout(timer1.value);
+  });
+
+  const timer2: any = ref(null);
+  watch(
+    () => state.verify,
+    () => {
+      clearTimeout(timer2.value);
+      if (state.show && !state.verify.length) {
+        timer2.value = setTimeout(() => {
+          state.show = 0;
+        }, 1000);
+      }
+    }
+  );
+
+  // 初始化后进入页面时自动弹出
+  const timer3: any = ref(null);
+  watch(
+    () => route.query.mode,
+    (mode: any) => {
+      clearTimeout(timer3.value);
+      if (mode === 'edit') {
+        timer3.value = setTimeout(() => {
+          if (state.verify.length) {
+            state.show = 1;
+          }
+        }, 1000);
+      } else {
+        if (state.show) {
+          setTimeout(() => {
+            state.show = 0;
+          }, 300);
+        }
+      }
+    }
+  );
+
+  watch(
+    () => props.data,
+    () => {
+      state.__update = !state.__update;
+    },
+    {
+      deep: true
+    }
+  );
+</script>

package/src/components/tools/MoreTools.vue

@@ -0,0 +1,74 @@
+<template>
+  <div ui-tips="@a ux:hover">
+    <button :ui-btn="`@a none s :square`"><i class="icon icon-more"></i></button>
+    <div ui-tips-box="bl" class="n-sl">
+      <slot name="prefix"></slot>
+      <slot>
+        <div>
+          <h6 class="fs-xs o-mm nowrap">每页显示数量</h6>
+          <div ui-btns="@a line s :group :border">
+            <button @click="setLinkMode(0)"><code :class="`${state.tools.confs.linkMode === 0 ? 'co-main' : ''}`">跳转</code></button>
+            <button @click="setLinkMode(1)"><code :class="`${state.tools.confs.linkMode === 1 ? 'co-main' : ''}`">预览</code></button>
+            <button @click="setLinkMode(2)"><code :class="`${state.tools.confs.linkMode === 2 ? 'co-main' : ''}`">新窗口</code></button>
+          </div>
+        </div>
+        <div ui-line="@a" class="mt-sm mb-ss"></div>
+        <div>
+          <h6 class="fs-xs o-mm nowrap">每页显示数量</h6>
+          <div ui-btns="@a line s :group :border">
+            <button @click="setPageSize(10)"><code :class="`${state.tools.param.pageSize === 10 ? 'co-main' : ''}`">10</code></button>
+            <button @click="setPageSize(20)"><code :class="`${state.tools.param.pageSize === 20 ? 'co-main' : ''}`">20</code></button>
+            <button @click="setPageSize(50)"><code :class="`${state.tools.param.pageSize === 50 ? 'co-main' : ''}`">50</code></button>
+            <button @click="setPageSize(100)"><code :class="`${state.tools.param.pageSize === 100 ? 'co-main' : ''}`">100</code></button>
+          </div>
+        </div>
+      </slot>
+      <slot name="prefix"></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { reactive, computed } from 'vue';
+  import { useRoute } from 'vue-router';
+  const emits = defineEmits(['update:confs', 'update:param']);
+  const props = defineProps({
+    confs: {
+      type: Object,
+      default: () => ({})
+    },
+    param: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  const route = useRoute();
+  const state: any = reactive({
+    name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
+    tools: {
+      confs: {},
+      param: {}
+    }
+  });
+
+  const init = () => {
+    const _cache = JSON.parse(localStorage.getItem(`${state.name}`) || '{}');
+    state.tools.confs = _cache.confs || JSON.parse(JSON.stringify(props.confs));
+    state.tools.param = _cache.param || JSON.parse(JSON.stringify(props.param));
+    emits('update:confs', state.tools.confs);
+    emits('update:param', state.tools.param);
+  };
+  init();
+
+  const setLinkMode = (linkMode: any) => {
+    state.tools.confs.linkMode = linkMode;
+    emits('update:confs', state.tools.confs);
+    localStorage.setItem(state.name, JSON.stringify(state.tools));
+  };
+
+  const setPageSize = (pageSize: any) => {
+    state.tools.param.pageSize = pageSize;
+    emits('update:param', state.tools.param);
+    localStorage.setItem(state.name, JSON.stringify(state.tools));
+  };
+</script>

package/src/components/tools/MoreTools@v2.vue

@@ -0,0 +1,74 @@
+<template>
+  <div ui-tips="@a ux:hover">
+    <button :ui-btn="`@a none s :square`"><i class="icon icon-more"></i></button>
+    <div ui-tips-box="bl" class="n-sl">
+      <slot name="prefix"></slot>
+      <slot>
+        <div>
+          <h6 class="fs-xs o-mm nowrap">每页显示数量</h6>
+          <div ui-btns="@a line s :group :border">
+            <button @click="setLinkMode('default')"><code :class="`${state.tools.confs.linkMode === 'default' ? 'co-main' : ''}`">跳转</code></button>
+            <button @click="setLinkMode('preview')"><code :class="`${state.tools.confs.linkMode === 'preview' ? 'co-main' : ''}`">预览</code></button>
+            <button @click="setLinkMode('windows')"><code :class="`${state.tools.confs.linkMode === 'windows' ? 'co-main' : ''}`">新窗口</code></button>
+          </div>
+        </div>
+        <div ui-line="@a" class="mt-sm mb-ss"></div>
+        <div>
+          <h6 class="fs-xs o-mm nowrap">每页显示数量</h6>
+          <div ui-btns="@a line s :group :border">
+            <button @click="setPageSize(10)"><code :class="`${state.tools.param.pageSize === 10 ? 'co-main' : ''}`">10</code></button>
+            <button @click="setPageSize(20)"><code :class="`${state.tools.param.pageSize === 20 ? 'co-main' : ''}`">20</code></button>
+            <button @click="setPageSize(50)"><code :class="`${state.tools.param.pageSize === 50 ? 'co-main' : ''}`">50</code></button>
+            <button @click="setPageSize(100)"><code :class="`${state.tools.param.pageSize === 100 ? 'co-main' : ''}`">100</code></button>
+          </div>
+        </div>
+      </slot>
+      <slot name="prefix"></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { reactive, computed } from 'vue';
+  import { useRoute } from 'vue-router';
+  const emits = defineEmits(['update:confs', 'update:param']);
+  const props = defineProps({
+    confs: {
+      type: Object,
+      default: () => ({})
+    },
+    param: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  const route = useRoute();
+  const state: any = reactive({
+    name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
+    tools: {
+      confs: {},
+      param: {}
+    }
+  });
+
+  const init = () => {
+    const _cache = JSON.parse(localStorage.getItem(`${state.name}`) || '{}');
+    state.tools.confs = _cache.confs || JSON.parse(JSON.stringify(props.confs));
+    state.tools.param = _cache.param || JSON.parse(JSON.stringify(props.param));
+    emits('update:confs', state.tools.confs);
+    emits('update:param', state.tools.param);
+  };
+  init();
+
+  const setLinkMode = (linkMode: any) => {
+    state.tools.confs.linkMode = linkMode;
+    emits('update:confs', state.tools.confs);
+    localStorage.setItem(state.name, JSON.stringify(state.tools));
+  };
+
+  const setPageSize = (pageSize: any) => {
+    state.tools.param.pageSize = pageSize;
+    emits('update:param', state.tools.param);
+    localStorage.setItem(state.name, JSON.stringify(state.tools));
+  };
+</script>

package/src/components/tools/Pagination@a.vue

@@ -0,0 +1,222 @@
+<template>
+  <div ui-pagination="@a" class="full-x pading" ui-flex="row rm">
+    <div class="ml-sl ar mob-ac" ui-flex="row rm">
+      <div class="mx-ss-sub" ui-flex="row">
+        <div v-if="state.showTotal" ui-flex="row cm" ui-hide="<pad">共 {{ data[defined.total || 'total'] || 0 }} 条</div>
+        <button :ui-btn="`@a s read :border :square ${data[defined.current || 'current'] > 1 ? '' : ':disabled'}`" @click="prev">
+          <svg
+            style="width: 1em; height: 1em"
+            t="1701228540398"
+            class="icon co-read"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="2426"
+            width="64"
+            height="64"
+          >
+            <path
+              d="M683.36932763 159.41593598c-21.03260057-21.03260057-55.13210605-21.03260057-76.16470661 0L340.63067237 425.99156763c-21.03260057 21.03260057-21.03260057 55.13210605 0 76.16470662l266.57479015 266.57563164c21.03260057 21.03260057 55.13210605 21.03260057 76.16470661 1e-8s21.03260057-55.13210605 0-76.16470662L454.8768908 464.07392093l228.49243683-228.49327832C704.40276971 214.54804203 704.40276971 180.44853655 683.36932763 159.41593598z"
+              p-id="2427"
+            ></path>
+          </svg>
+        </button>
+        <div ui-tips="@a co:well ux:hover">
+          <div ui-btn="@a s read :border">
+            <code>{{ data[defined.current || 'current'] || 0 }}/{{ data[defined.totalPages || 'totalPages'] || 0 }}</code>
+            <svg
+              style="width: 1em; height: 1em"
+              t="1701229420486"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="2426"
+              width="64"
+              height="64"
+            >
+              <path
+                d="M210.99383545 420.72863834a55.61828615 55.61828615 0 1 1 78.60717773-78.60717774l222.91809082 222.84393313 222.84393312-222.84393313a55.61828615 55.61828615 0 1 1 78.60717772 78.60717774l-263.18572998 263.2598877a55.61828615 55.61828615 0 0 1-86.61621093-10.08544921L210.99383545 420.72863834z"
+                p-id="2427"
+              ></path>
+            </svg>
+          </div>
+          <div v-if="state.lists.length" ui-tips-box="tc" class="ny-sl al">
+            <div class="w-mm max-h-ls" ui-scroll=":y s">
+              <ul class="n-sl n-ss-sub dib-sub">
+                <li v-for="item in state.lists" :key="item">
+                  <button :ui-btn="`@a s ${item === data[defined.current || 'current'] ? 'main' : 'read :border'}`" @click="page(item)">
+                    <code>{{ item }}</code>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <button :ui-btn="`@a s read :border :square ${data[defined.current || 'current'] < data[defined.totalPages || 'totalPages'] ? '' : ':disabled'}`" @click="next">
+          <svg style="width: 1em; height: 1em" class="icon co-read" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2426" width="64" height="64">
+            <path
+              d="M341.63640988 781.41564784c20.63742578 21.22981847 54.12571728 21.22981847 74.81456101 0l265.95100164-273.75421824c20.62728703-21.26747667 20.62728703-55.75008988 0-76.97556317l-265.95100164-273.74407946c-20.68449855-21.26747667-54.17423844-21.26747667-74.81456101 0-20.67291141 21.23706043-20.67291142 55.71170748 0 76.98497771l228.55639458 235.24869384-228.55567038 235.22117436c-20.67218722 21.26747667-20.67146302 55.74357212 0 77.02263594l0 0z"
+              p-id="2427"
+            ></path>
+          </svg>
+        </button>
+      </div>
+      <div ui-hide="<pad" ui-tips="@a co:well ux:hover">
+        <button ui-btn="@a s none :square">
+          <svg
+            style="width: 1em; height: 1em"
+            t="1701229474205"
+            class="icon"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="2426"
+            width="64"
+            height="64"
+          >
+            <path
+              d="M512 604.16c-53.248 0-96.768-43.52-96.768-96.768 0-53.248 43.52-96.768 96.768-96.768 53.248 0 96.768 43.52 96.768 96.768 0 53.248-43.52 96.768-96.768 96.768zM512 274.432c-53.248 0-96.768-43.52-96.768-96.768s43.52-96.768 96.768-96.768c53.248 0 96.768 43.52 96.768 96.768s-43.52 96.768-96.768 96.768zM512 933.888c-53.248 0-96.768-43.52-96.768-96.768s43.52-96.768 96.768-96.768c53.248 0 96.768 43.52 96.768 96.768s-43.52 96.768-96.768 96.768z"
+              p-id="2427"
+            ></path>
+          </svg>
+        </button>
+        <div ui-tips-box="tl" class="al min-w-ms">
+          <slot name="setting">
+            <ul class="n-ms mb-sm-sub">
+              <li>
+                <h6 class="fs-xs o-mm nowrap">显示总条数</h6>
+                <label ui-form="@a type:switch">
+                  <input type="checkbox" name="form2" v-model="state.showTotal" />
+                  <span>{{ state.showTotal ? '' : '' }}</span>
+                </label>
+              </li>
+              <li>
+                <h6 class="fs-xs o-mm nowrap">每页显示数量</h6>
+                <ul>
+                  <li @click="size(10)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 10 ? 'co-main' : ''}`">10条/页</code></li>
+                  <li @click="size(20)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 20 ? 'co-main' : ''}`">20条/页</code></li>
+                  <li @click="size(50)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 50 ? 'co-main' : ''}`">50条/页</code></li>
+                  <li @click="size(100)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 100 ? 'co-main' : ''}`">100条/页</code></li>
+                </ul>
+              </li>
+            </ul>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, computed, watch } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { isObject } from '@fekit/utils';
+
+  interface ModelValueProps {
+    pageSize?: number;
+    current?: number;
+    [key: string]: any;
+  }
+
+  interface DataProps {
+    total?: number;
+    totalPages?: number;
+    current?: number;
+    [key: string]: any;
+  }
+  interface DefinedProps {
+    // 当前页
+    current?: string;
+    // 总页数
+    totalPages?: string;
+    // 总条数
+    total?: string;
+    // 每页条数
+    pageSize?: string;
+  }
+
+  // 类型
+  interface Props {
+    id?: string;
+    modelValue: ModelValueProps;
+    data: DataProps;
+    defined?: DefinedProps;
+  }
+
+  const route: any = useRoute();
+  const props: any = withDefaults(defineProps<Props>(), {
+    id: '',
+    modelValue: () => ({}),
+    data: () => ({}),
+    defined: () => ({})
+  });
+
+  const emits = defineEmits(['update:modelValue', 'page', 'size']);
+  const state: any = reactive({
+    id: computed(() => (props.id || 'PAGINATION' + route.path?.replace(/\//g, '_')).toUpperCase()),
+    showTotal: true,
+    list: computed(() => {
+      const _page = Number(props.data[props.defined.current || 'current'] || 1);
+      const list = [_page];
+      if (_page > 1) {
+        list.unshift(_page - 1);
+      }
+      if (_page > 2) {
+        list.unshift(_page - 2);
+      }
+      const _max = 5 - list.length;
+      for (let i = 1; i <= _max; i++) {
+        if (_page + i <= props.data[props.defined.totalPages || 'totalPages']) {
+          list.push(_page + i);
+        }
+      }
+      const _min = 5 - list.length;
+      for (let i = 1; i <= _min; i++) {
+        if (list[0] - 1 > 0) {
+          list.unshift(list[0] - 1);
+        }
+      }
+      return list;
+    }),
+    lists: computed(() => {
+      const _lists: any = [];
+      for (let i = 1; i <= props.data[props.defined.totalPages || 'totalPages']; i++) {
+        _lists.push(i);
+      }
+      return _lists;
+    })
+  });
+
+  const prev = () => {
+    const _page = Number(props.data[props.defined.current || 'current']) - 1 < 1 ? 1 : Number(props.data[props.defined.current || 'current']) - 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.current || 'current']: _page } });
+    emits('page', _page);
+  };
+
+  const next = () => {
+    const _page =
+      Number(props.data[props.defined.current || 'current']) + 1 > props.data[props.defined.totalPages || 'totalPages']
+        ? props.data[props.defined.totalPages || 'totalPages']
+        : Number(props.data[props.defined.current || 'current']) + 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.current || 'current']: _page } });
+    emits('page', _page);
+  };
+
+  const page = (idx: any) => {
+    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.current || 'current']: idx } });
+    emits('page', idx);
+  };
+
+  const size = (size: any) => {
+    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.pageSize || 'pageSize']: size } });
+    emits('size', size);
+    window.localStorage.setItem(state.id, `${size}`);
+  };
+
+  // 缓存
+  const cache = window.localStorage.getItem(state.id);
+  if (cache) {
+    size(Number(cache));
+  }
+</script>