@neatui/nuxt 0.1.0

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

@@ -0,0 +1,221 @@
+<template>
+  <div ui-pagination="@a" class="pading" ui-flex="row rm">
+    <div class="al mob-ac mr-sm-sub" ui-hide="=mob" ui-flex="row lm">
+      <p v-show="state.showTotalPages">
+        <span>共</span>
+        <code class="nx-ss">{{ data.totalPages || 0 }}</code>
+        <span>页</span>
+      </p>
+      <p v-show="state.showTotal">
+        <code class="nx-ss">{{ data.total || 0 }}</code>
+        <span>条记录</span>
+      </p>
+    </div>
+    <div class="ml-sl ar mob-ac">
+      <div class="fr mob-fn m-ss-sub" ui-flex="row rm">
+        <button class="flex-fixed" :ui-btn="`@a s read :border :square ${data.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>
+
+        <button class="flex-fixed" v-for="idx in state.list" :key="idx" :ui-btn="`@a s ${idx === data.current ? 'main' : 'read :border'}`" ui-hide="<pad" @click="page(idx)">
+          <code>{{ idx }}</code>
+        </button>
+        <button class="flex-fixed" ui-btn="@a s read :border" ui-hide=">mob">
+          <span>当前第</span>
+          <code class="nx-ss">{{ data.current || 1 }}</code>
+          <span>页</span>
+        </button>
+        <button class="flex-fixed" :ui-btn="`@a s read :border :square ${data.current < data.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 ui-tips="@a co:well ux:hover">
+          <div ui-btn="@a s read :border">
+            <code>{{ modelValue.pageSize || 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.list.length" ui-tips-box="tl" class="ny-sl al">
+            <div class="max-h-ls" ui-scroll=":y s">
+              <ul class="n-ms nx-ss-sub nowrap">
+                <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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="tools" 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" v-model="state.showTotalPages" />
+                <span>{{ state.showTotalPages ? '' : '' }}</span>
+              </label>
+            </li>
+            <li>
+              <h6 class="fs-xs o-mm nowrap">显示总条数</h6>
+              <label ui-form="@a type:switch">
+                <input type="checkbox" v-model="state.showTotal" />
+                <span>{{ state.showTotal ? '' : '' }}</span>
+              </label>
+            </li>
+          </ul>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, computed } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { Input } from '../form';
+
+  const route: any = useRoute();
+
+  interface ModelValueProps {
+    pageSize: number;
+    current: number;
+  }
+
+  interface DataProps {
+    total: number;
+    totalPages: number;
+    current: number;
+  }
+  // 类型
+  interface Props {
+    id?: string;
+    words?: object;
+    modelValue: ModelValueProps;
+    data: DataProps;
+    tools: boolean;
+  }
+  const props: any = withDefaults(defineProps<Props>(), {
+    words: () => ({}),
+    tools: false,
+    id: '',
+    modelValue: () => ({
+      pageSize: 0,
+      current: 0
+    }),
+    data: () => {
+      return {
+        total: 0,
+        totalPages: 0,
+        current: 0
+      };
+    }
+  });
+
+  const emits = defineEmits(['update:modelValue', 'page', 'size']);
+  const state = reactive({
+    showTotalPages: true,
+    showTotal: true,
+    id: computed(() => (props.id || 'PAGINATION' + route.path?.replace(/\//g, '_')).toUpperCase()),
+    list: computed(() => {
+      const _page = Number(props.data.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.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;
+    })
+  });
+
+  const prev = () => {
+    const _page = Number(props.data.current) - 1 < 1 ? 1 : Number(props.data.current) - 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ current: _page } });
+    emits('page', _page);
+  };
+
+  const next = () => {
+    const _page = Number(props.data.current) + 1 > props.data.totalPages ? props.data.totalPages : Number(props.data.current) + 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ current: _page } });
+    emits('page', _page);
+  };
+
+  const page = (idx: any) => {
+    emits('update:modelValue', { ...props.modelValue, ...{ current: idx } });
+    emits('page', idx);
+  };
+
+  const size = (size: any) => {
+    emits('update:modelValue', { ...props.modelValue, ...{ pageSize: size } });
+    emits('size', size);
+    window.localStorage.setItem(state.id, `${size}`);
+  };
+</script>

package/src/components/tools/index.ts

@@ -0,0 +1,5 @@
+import Pagination from './Pagination@a.vue';
+import MoreTools from './MoreTools.vue';
+import FormDraftsView from './FormDraftsView.vue';
+import FormVerifyView from './FormVerifyView.vue';
+export { Pagination, MoreTools, FormDraftsView, FormVerifyView };

package/src/index.ts

@@ -0,0 +1,9 @@
+// 数据
+export * from './store/myui';
+
+// 组件
+export * from './components/basic';
+export * from './components/display';
+export * from './components/form';
+export * from './components/loader';
+export * from './components/tools';

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/store/myui.ts

@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia';
+
+// 基础数据
+export const useMyuiStore = defineStore('myui', {
+  state: () => {
+    return {
+      full: localStorage.getItem('neatui_full') || 0,
+      // 字号
+      size: localStorage.getItem('neatui_size') || document?.documentElement?.getAttribute('size') || 'm',
+      // 主题
+      theme: localStorage.getItem('neatui_theme') || document?.documentElement?.getAttribute('theme') || 'auto',
+      // 侧边
+      side: 1
+    };
+  },
+  getters: {},
+  actions: {
+    // 设置全屏显示
+    async setfull(then = (res: any) => {}) {
+      const full = this.full ? 0 : 1;
+      this.full = full;
+      localStorage.setItem('neatui_full', `${full}`);
+      then(full);
+    },
+    // 设置系统主题
+    async settheme(theme: any = '', then = (res: any) => {}) {
+      if (theme) {
+        localStorage.setItem('neatui_theme', theme);
+        this.theme = theme;
+        document.documentElement.setAttribute('theme', theme);
+        then(theme);
+      } else {
+        document.documentElement.setAttribute('theme', this.theme);
+        then(this.theme);
+      }
+    },
+    // 设置系统字号
+    async setsize(size: any = '', then = (res: any) => {}) {
+      if (size) {
+        localStorage.setItem('neatui_size', size);
+        this.size = size;
+        document.documentElement.setAttribute('size', size);
+        then(size);
+      } else {
+        document.documentElement.setAttribute('size', this.size);
+        then(this.size);
+      }
+    }
+  }
+});

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": ["webpack-env"],
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/shims-vue.d.ts"],
+  "exclude": ["node_modules"]
+}