@cpany/app - npm Package Compare versions

Comparing version 0.0.24 to 0.0.25

package.json

 {
   "name": "@cpany/app",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "CPany web app",
@@ -12,3 +12,3 @@ "repository": {
   "dependencies": {
-    "@cpany/types": "0.0.24",
+    "@cpany/types": "0.0.25",
     "vue": "^3.1.4",
@@ -15,0 +15,0 @@ "vue-router": "4"

src/cfHandles.ts

@@ -0,0 +0,0 @@ import type { CodeforcesHandleList } from '@cpany/types';

src/codeforces.ts

@@ -0,0 +0,0 @@ import type { IContest, RouteKey } from '@cpany/types';

src/components/codeforces/index.ts

@@ -0,0 +0,0 @@ import CfHandle from './cf-handle.vue';

src/components/navbar/index.ts

@@ -0,0 +0,0 @@ import Navbar from './navbar.vue';

src/components/progress/index.ts

@@ -0,0 +0,0 @@ import Progress from './progress.vue';

src/components/stastic/index.ts

 import CStastic from './c-stastic.vue';
 
 export { CStastic };

src/components/table/c-table-column.ts

@@ -0,0 +0,0 @@ import { defineComponent, toRefs, h } from 'vue';

src/components/table/c-table.ts

@@ -5,4 +5,2 @@ import {
   ref,
-  Ref,
-  unref,
   computed,
@@ -13,3 +11,5 @@ toRefs,
   onUnmounted,
-  Fragment
+  Fragment,
+  watchEffect,
+  watch
 } from 'vue';
@@ -19,17 +19,7 @@ import IconDown from 'virtual:vite-icons/mdi/arrow-down';
 
+import { isDef } from '@/utils';
+import { useIsMobile, usePagination } from './utils';
 import CTableColumn from './c-table-column';
-import { isDef } from '@/utils';
+import CTablePage from './c-table-page.vue';
 
-export function useIsMobile(mobileWidth: Ref<number> | number) {
-  const width = ref(window.innerWidth);
-  const isMobile = ref(width.value <= unref(mobileWidth));
-  const handler = () => {
-    width.value = window.innerWidth;
-    isMobile.value = width.value <= unref(mobileWidth);
-  };
-  const clean = () => window.removeEventListener('resize', handler);
-  window.addEventListener('resize', handler, { passive: true });
-  return { width, isMobile, clean };
-}
-
 export default defineComponent({
@@ -39,3 +29,4 @@ name: 'CTable',
     IconDown,
-    IconUp
+    IconUp,
+    CTablePage
   },
@@ -57,6 +48,19 @@ props: {
       default: 'asc'
+    },
+    pageSize: {
+      type: Number
+    },
+    mobilePageSize: {
+      type: Number
     }
   },
   setup(props, { slots }) {
-    const { data, defaultSort, defaultSortOrder, mobile } = toRefs(props);
+    const {
+      data,
+      defaultSort,
+      defaultSortOrder,
+      mobile,
+      pageSize,
+      mobilePageSize
+    } = toRefs(props);
 
@@ -66,2 +70,10 @@ const { isMobile, clean } = useIsMobile(mobile);
 
+    const realPageSize = computed(() =>
+      !isMobile.value ? pageSize.value : mobilePageSize.value ?? pageSize.value
+    );
+
+    const isPagination = computed(() => isDef(realPageSize.value));
+    const { current, pageLength, L, R, nextPage, prePage, goPage } =
+      usePagination(realPageSize, data);
+
     const sortField = ref(defaultSort.value);
@@ -122,2 +134,17 @@ const sortOrder = ref<'asc' | 'desc'>(
 
+    const slicedData = computed(() => sortedData.value.slice(L.value, R.value));
+
+    const renderPage = () =>
+      h(resolveComponent('c-table-page'), {
+        current: current.value,
+        first: 0,
+        last: pageLength.value,
+        pageSize: realPageSize.value,
+        nextPage,
+        prePage,
+        goPage,
+        pageView: !isMobile.value ? 5 : 3,
+        isMobile: isMobile.value
+      });
+
     const renderDestop = () => {
@@ -193,17 +220,26 @@ const renderHead = () =>
             {},
-            slots.columns && filterColumn(slots.columns({ row, index }))
+            slots.columns &&
+              filterColumn(slots.columns({ row, index: index + L.value }))
           );
         });
 
-      return h(
-        'table',
-        {
-          class: ['table', 'w-full', 'border-separate', 'table-auto', 'rounded']
-        },
-        [
-          h('thead', {}, h('tr', {}, renderHead())),
-          h('tbody', {}, renderBody(sortedData.value)),
-          h('tfoot', {}, [])
-        ]
-      );
+      return h('div', {}, [
+        h(
+          'table',
+          {
+            class: [
+              'table',
+              'w-full',
+              'border-separate',
+              'table-auto',
+              'rounded'
+            ]
+          },
+          [
+            h('thead', {}, h('tr', {}, renderHead())),
+            h('tbody', {}, renderBody(slicedData.value))
+          ]
+        ),
+        isPagination.value && renderPage()
+      ]);
     };
@@ -213,5 +249,6 @@
       const renderBody = () => {
-        return sortedData.value.map((row, index) => {
+        return slicedData.value.map((row, index) => {
           const columns = filterColumn(
-            slots.columns && slots.columns({ row, index, mobile: true })
+            slots.columns &&
+              slots.columns({ row, index: index + L.value, mobile: true })
           );
@@ -259,3 +296,6 @@ return h(
 
-      return h('div', { class: ['mobile-table'] }, renderBody());
+      return h('div', { class: ['mobile-table'] }, [
+        renderBody(),
+        isPagination.value && renderPage()
+      ]);
     };
@@ -262,0 +302,0 @@

src/components/table/index.ts

@@ -0,0 +0,0 @@ import CTable from './c-table';

src/config.ts

 export const CodeforcesAPIBase = 'https://codeforces.com/api/';

src/contests.ts

@@ -0,0 +0,0 @@ import type { IContest, RouteKey } from '@cpany/types';

src/main.ts

@@ -0,0 +0,0 @@ import { createApp, ref } from 'vue';

src/overview.ts

@@ -0,0 +0,0 @@ import type { IContestOverview, IUserOverview } from '@cpany/types';

src/router.ts

@@ -0,0 +0,0 @@ import { createRouter, createWebHistory } from 'vue-router';

src/shims-vue.d.ts

@@ -0,0 +0,0 @@ declare module '*.vue' {

src/users.ts

@@ -0,0 +0,0 @@ import type { IUserOverview } from '@cpany/types';

src/utils.ts

 import { Ref, ref, unref } from 'vue';
+import type { IContest } from '@cpany/types';
 
@@ -48,1 +49,17 @@ export function isUndef<T>(
 }
+
+export const displayContestType = (contest: IContest) => {
+  if (contest.type.startsWith('codeforces')) {
+    if (/Round/.test(contest.name) || /Div/.test(contest.name)) {
+      return 'Codeforces Round';
+    } else if (/gym/.test(contest.type)) {
+      return 'Codeforces Gym';
+    } else {
+      return 'Codeforces';
+    }
+  } else if (contest.type === 'nowcoder') {
+    return '牛客竞赛';
+  } else {
+    return contest.type;
+  }
+};

src/vite-env.d.ts

 /// <reference types="vite/client" />

vite.config.ts

@@ -0,0 +0,0 @@ import { resolve } from 'path';

windi.config.js

@@ -7,3 +7,4 @@ import { defineConfig } from 'windicss/helpers';
     box: 'rounded-md p-4 shadow-box',
-    'info-box': 'rounded border-8 border-green-100 bg-light-200 md:(pl-4) <md:(pl-2) py-2'
+    'info-box':
+      'rounded border-8 border-green-100 bg-light-200 md:(pl-4) <md:(pl-2) py-2'
   },
@@ -10,0 +11,0 @@ theme: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

347838

increased by4.02%

Number of package files

74

increased by2.78%

Lines of code

1321

increased by11.29%

Dependency changes

• + Added@cpany/types@0.0.25(transitive)

• - Removed@cpany/types@0.0.24(transitive)

• Updated@cpany/types@0.0.25