vue-ui-grid - npm Package Compare versions

Comparing version 0.1.74 to 1.0.0

package.json

 {
   "name": "vue-ui-grid",
-  "version": "0.1.74",
-  "main": "dist/vue-ui-grid.common.js",
-  "types": "index.d.ts",
+  "version": "1.0.0",
+  "main": "./dist/vue-ui-grid.umd.js",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build-bundle": "vue-cli-service build --target lib --name vue-ui-grid ./src/vue-grid.ts",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs"
+    "dev": "vite",
+    "build": "vite build",
+    "test:unit": "vitest --environment jsdom",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
+    "preview": "vite preview",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs"
   },
-  "files": [
-    "dist/*",
-    "src/*",
-    "index.d.ts",
-    "package.json"
-  ],
   "keywords": [
@@ -29,35 +22,48 @@ "grid",
   "author": "mihnsen <[e-mail]> (https://github.com/mihnsen/)",
+  "files": [
+    "src",
+    "dist",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "types": "./dist/types/vue-ui-grid.d.ts",
+  "module": "./dist/vue-ui-grid.es.js",
+  "dependencies": {
+    "vue": "^3.2.25"
+  },
   "devDependencies": {
-    "@types/jest": "^24.0.11",
-    "@types/luxon": "^1.15.2",
-    "@vue/cli-plugin-babel": "^4.0.0",
-    "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/cli-plugin-typescript": "^4.0.0",
-    "@vue/cli-plugin-unit-jest": "^4.0.0",
-    "@vue/cli-service": "^4.0.0",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/eslint-config-typescript": "^4.0.0",
-    "@vue/test-utils": "1.0.0-beta.29",
-    "apollo-boost": "^0.4.7",
-    "axios": "^0.19.0",
-    "bootstrap": "^4.3.1",
-    "core-js": "^3.3.2",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "graphql": "^14.5.8",
-    "pug": "^2.0.4",
-    "pug-plain-loader": "^1.0.0",
-    "sass": "^1.19.0",
-    "sass-loader": "^8.0.0",
-    "typescript": "~3.5.3",
-    "vue": "^2.6.11",
-    "vue-apollo": "^3.0.0",
-    "vue-class-component": "^7.0.2",
-    "vue-property-decorator": "^8.3.0",
-    "vue-template-compiler": "^2.6.11",
-    "vuepress": "^1.2.0"
+    "@apollo/client": "^3.6.6",
+    "@nabla/vite-plugin-eslint": "^1.4.0",
+    "@rushstack/eslint-patch": "^1.1.3",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/apollo-composable": "^4.0.0-alpha.17",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.7",
+    "axios": "^0.27.2",
+    "bootstrap": "^5.1.3",
+    "eslint": "^8.13.0",
+    "eslint-plugin-vue": "^8.6.0",
+    "graphql": "^16.5.0",
+    "graphql-tag": "^2.12.6",
+    "jsdom": "^19.0.0",
+    "sass": "^1.50.0",
+    "ts-dedent": "^2.2.0",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.2",
+    "vite-plugin-checker": "^0.4.6",
+    "vite-plugin-dts": "^1.2.0",
+    "vite-plugin-eslint": "^1.4.0",
+    "vite-svg-loader": "^3.2.0",
+    "vitest": "^0.9.4",
+    "vue-router": "4",
+    "vue-tsc": "^0.29.8"
   },
+  "peerDependencies": {
+    "vue": "^3.2.31"
+  },
   "repository": {
     "type": "git",
-    "url": "git+ssh://[e-mail]/mihnsen/vue-ui-grid.git"
+    "url": "git+https://github.com/mihnsen/vue-ui-grid.git"
   },
@@ -67,6 +73,3 @@ "bugs": {
   },
-  "homepage": "https://github.com/mihnsen/vue-ui-grid#readme",
-  "dependencies": {
-    "vue-router": "^3.5.2"
-  }
+  "homepage": "https://github.com/mihnsen/vue-ui-grid#readme"
 }

src/apollo-provider.ts

@@ -1,34 +0,56 @@
-import Vue from 'vue'
-import VueApollo from 'vue-apollo'
-import { ApolloClient, HttpLink, ApolloLink, InMemoryCache } from 'apollo-boost'
+// import Vue from 'vue'
+// import VueApollo from 'vue-apollo'
+// import { ApolloClient, HttpLink, ApolloLink, InMemoryCache } from 'apollo-boost'
+//
+// const httpLink = new HttpLink({
+//   uri: 'http://localhost:3102/v1/graphql'
+// })
+//
+// const authLink = new ApolloLink((operation, forward) => {
+//   operation.setContext({
+//     headers: {
+//       'x-hasura-admin-secret': import.meta.env.VITE_GRAPHQL_SECRET
+//     }
+//   })
+//
+//   // Call the next link in the middleware chain.
+//   return forward(operation)
+// })
+//
+// Vue.use(VueApollo)
+//
+// const apolloClient = new ApolloClient({
+//   cache: new InMemoryCache(),
+//   link: ApolloLink.from([
+//     authLink,
+//     httpLink // Http link must be at the end of this array: https://stackoverflow.com/a/58736777
+//   ])
+// })
+//
+// const apolloProvider = new VueApollo({
+//   defaultClient: apolloClient
+// })
+//
+// export default apolloProvider
+//
+import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 
-const httpLink = new HttpLink({
-  uri: 'http://localhost:3102/v1/graphql'
+// HTTP connection to the API
+const httpLink = createHttpLink({
+  // You should use an absolute URL here
+  uri: 'http://localhost:3102/v1/graphql',
+  headers: {
+    'x-hasura-admin-secret': import.meta.env.VITE_GRAPHQL_SECRET
+  },
 })
 
-const authLink = new ApolloLink((operation, forward) => {
-  operation.setContext({
-    headers: {
-      'x-hasura-admin-secret': process.env.VUE_APP_GRAPHQL_SECRET
-    }
-  })
+// Cache implementation
+const cache = new InMemoryCache()
 
-  // Call the next link in the middleware chain.
-  return forward(operation)
-})
-
-Vue.use(VueApollo)
-
+// Create the apollo client
 const apolloClient = new ApolloClient({
-  cache: new InMemoryCache(),
-  link: ApolloLink.from([
-    authLink,
-    httpLink // Http link must be at the end of this array: https://stackoverflow.com/a/58736777
-  ])
+  link: httpLink,
+  cache,
 })
 
-const apolloProvider = new VueApollo({
-  defaultClient: apolloClient
-})
-
-export default apolloProvider
+export default apolloClient

src/data-providers/abstract/index.ts

@@ -1,3 +0,3 @@
-import GridOption from '../../interfaces/grid-option'
-import DataResponse from '../../interfaces/data-response'
+import type GridOption from '../../interfaces/grid-option'
+import type DataResponse from '../../interfaces/data-response'
 
@@ -4,0 +4,0 @@ export interface IDataProvider {

src/data-providers/AjaxDataProvider.ts

@@ -1,5 +0,5 @@
-import ADataProvider, { IDataProvider } from './abstract'
-import GridOption from '../interfaces/grid-option'
-import Order from '../interfaces/order'
-import DataResponse from '../interfaces/data-response'
+import ADataProvider from './abstract'
+import type GridOption from '../interfaces/grid-option'
+import type Order from '../interfaces/order'
+import type DataResponse from '../interfaces/data-response'
 
@@ -65,3 +65,3 @@ export default class AjaxDataProvider extends ADataProvider {
       const CancelToken = this.options.cancelToken
-      cancelToken = new CancelToken((executor: Function) => {
+      cancelToken = new CancelToken((executor: any) => {
         this.cancelRequest = executor
@@ -68,0 +68,0 @@ })

src/data-providers/GraphDataProvider.ts

@@ -1,10 +0,10 @@
-import ADataProvider, { IDataProvider } from './abstract'
-import GridOption from '../interfaces/grid-option'
-import ColumnOption from '../interfaces/column-option'
-import Order from '../interfaces/order'
-import DataResponse, { ErrorResponse } from '../interfaces/data-response'
+import ADataProvider from './abstract'
+import type GridOption from '../interfaces/grid-option'
+import type ColumnOption from '../interfaces/column-option'
+import type Order from '../interfaces/order'
+import type { DataResponse, ErrorResponse } from '../interfaces/data-response'
 import gql from 'graphql-tag'
 
 export default class GraphDataProvider extends ADataProvider {
-  protected apolloProvider: any;
+  protected apolloClient: any;
   protected resource: string;
@@ -14,3 +14,3 @@
     super(options)
-    this.apolloProvider = apollo
+    this.apolloClient = apollo
     this.resource = resource
@@ -32,3 +32,3 @@ }
 
-      this.apolloProvider.query({
+      this.apolloClient.query({
         fetchPolicy: 'no-cache',
@@ -97,5 +97,5 @@ query: graphqlQuery,
       const normalSearch = normalKeys.map((key) => {
-        const filter = this.getFilter(key, where[key])
+        const cfilter = this.getFilter(key, where[key])
         return where[key]
-          ? `${filter}`
+          ? `${cfilter}`
           : ''
@@ -196,3 +196,3 @@ })
 
-  getRefQueryByNode(node: any, isRoot: boolean = false): string {
+  getRefQueryByNode(node: any, isRoot = false): string {
     const keys = Object.keys(node)
@@ -245,3 +245,3 @@ if (keys.length) {
 
-  getRefFilterByNode(node: any, isRoot: boolean = false): string {
+  getRefFilterByNode(node: any, isRoot = false): string {
     if (typeof node === 'object') {
@@ -248,0 +248,0 @@ const keys = Object.keys(node)

src/data-providers/JsonDataProvider.ts

@@ -1,6 +0,6 @@
-import GridOption from '../interfaces/grid-option'
-import Order from '../interfaces/order'
-import DataResponse from '../interfaces/data-response'
+import type GridOption from '../interfaces/grid-option'
+import type Order from '../interfaces/order'
+import type DataResponse from '../interfaces/data-response'
 
-import ADataProvider, { IDataProvider } from './abstract'
+import ADataProvider from './abstract'
 
@@ -7,0 +7,0 @@ export default class JsonDataProvider extends ADataProvider {

src/interfaces/column-option.ts

@@ -1,2 +0,2 @@
-export default interface ColumnOption {
+export interface ColumnOption {
   type?: string;
@@ -12,4 +12,6 @@ field: string;
   width?: number;
-  format?: Function;
+  format?: any;
   class?: string;
 }
+
+export default ColumnOption

src/interfaces/data-response.ts

@@ -1,2 +0,2 @@
-export default interface DataResponse {
+export interface DataResponse {
   query?: object | string;
@@ -11,1 +11,4 @@ items: Array<object>;
 }
+
+
+export default DataResponse

src/interfaces/grid-option.ts

@@ -1,2 +0,3 @@
-import ColumnOption from './column-option'
+import type DataResponse from './data-response';
+import type ColumnOption from './column-option'
 
@@ -18,13 +19,11 @@ export default interface GridOption {
 
-  routeState?: boolean;
-
   perPageKey?: string; // Ajax & Graphql
   pageKey?: string; // Ajax & Graphql
   searchField?: string;
-  limit: number;
+  limit?: number;
   sortKey?: string;
   sortTypeKey?: string;
-  getPageIndex?: Function;
-  extractData?: Function;
-  fetchData?: Function;
+  getPageIndex?: (page: number) => number;
+  extractData?: (responseData: any) => DataResponse;
+  fetchData?: (resource: string, options: any) => any;
   cancelToken?: any;
@@ -37,7 +36,9 @@
   refFilter?: string;
-  graphqlFilter?: Function;
-  graphqlOrder?: Function;
-  aggregateQuery?: Function;
-  graphqlDataCounter?: Function;
+  graphqlFilter?: (field: string, fieldType: string | any, value: any, filterType: string | any) => string;
+  graphqlOrder?: (by: string, type: string) => string;
+  aggregateQuery?: string;
+  graphqlDataCounter?: (data) => number;
+
+  routerKey?: any,
 }
 

src/interfaces/grid-state.ts

@@ -5,5 +5,7 @@ export default interface GridState {
   limit?: number;
+  pageSizes?: number[];
   order?: any;
   where?: any;
-  gridstate?: number;
+  time?: number;
+  hasSortType?: boolean;
 }

src/main.ts

@@ -1,16 +0,20 @@
-import Vue from 'vue'
-import App from './App.vue'
-import TestVue from './TestVue.vue'
+import axios from 'axios'
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import { DefaultApolloClient } from '@vue/apollo-composable'
+import { useRouter, routerKey } from 'vue-router'
+
+import VueGrid from './vue-grid'
+
+// import TestVue from './TestVue.vue'
+
+import MainApp from './MainApp.vue'
 import GraphqlApp from './GraphqlApp.vue'
 import AjaxApp from './AjaxApp.vue'
-import MainApp from './MainApp.vue'
-import apolloProvider from './apollo-provider'
-import VueUIGrid from './vue-grid'
-import axios from 'axios'
-import VueRouter from 'vue-router'
+import App from './App.vue'
 
-Vue.use(VueRouter)
+// Graph
+import apolloClient from './apollo-provider'
 
-Vue.config.productionTip = false
-
+// Ajax
 axios.defaults.baseURL = 'https://reqres.in/api'
@@ -28,3 +32,27 @@ axios.interceptors.response.use((response) => {
 
-Vue.use(VueUIGrid, {
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: App
+    },
+    {
+      path: '/ajax',
+      name: 'ajax',
+      component: AjaxApp
+    },
+    {
+      path: '/graph',
+      name: 'graph',
+      component: GraphqlApp
+    }
+  ]
+});
+
+const app = createApp(MainApp)
+app.use(router)
+app.provide(DefaultApolloClient, apolloClient)
+app.use(VueGrid, {
   debug: true,
@@ -38,3 +66,2 @@ ajax: true,
     const data = responseData.data
-    // console.log('hello', data)
     return {
@@ -47,2 +74,5 @@ items: data.data,
 
+  useRouter,
+  routerKey,
+
   graphql: true,
@@ -90,27 +120,2 @@ // filterKey: 'filter',
 
-const router = new VueRouter({
-  mode: 'history',
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: App
-    },
-    {
-      path: '/ajax',
-      name: 'ajax',
-      component: AjaxApp
-    },
-    {
-      path: '/graph',
-      name: 'graph',
-      component: GraphqlApp
-    }
-  ]
-})
-
-new Vue({
-  router,
-  apolloProvider,
-  render: h => h(MainApp)
-}).$mount('#app')
+app.mount('#app');

src/vue-grid.ts

@@ -1,13 +0,15 @@
-import Grid from './components/grid/BasicGrid.vue'
-import Cards from './components/grid/BasicCards.vue'
-import List from './components/grid/BasicList.vue'
+import type { App, Component } from 'vue';
 
-import AjaxGrid from './components/grid/AjaxGrid.vue'
-import AjaxList from './components/grid/AjaxList.vue'
-import AjaxCards from './components/grid/AjaxCards.vue'
+import VGrid from './components/grid/BasicGrid.vue'
+import VCards from './components/grid/BasicCards.vue'
+import VList from './components/grid/BasicList.vue'
 
-import GraphGrid from './components/grid/GraphGrid.vue'
-import GraphList from './components/grid/GraphList.vue'
-import GraphCards from './components/grid/GraphCards.vue'
+import VAjaxGrid from './components/grid/AjaxGrid.vue'
+import VAjaxList from './components/grid/AjaxList.vue'
+import VAjaxCards from './components/grid/AjaxCards.vue'
 
+import VGraphGrid from './components/grid/GraphGrid.vue'
+import VGraphList from './components/grid/GraphList.vue'
+import VGraphCards from './components/grid/GraphCards.vue'
+
 import Pagination from './components/Pagination.vue'
@@ -17,13 +19,13 @@
 
-const Plugin = {
-  install(Vue: any, options: any = {}) {
-    Vue.component('VGrid', Grid)
-    Vue.component('VList', List)
-    Vue.component('VCards', Cards)
+const VueGridPlugin = {
+  install(Vue: App, options: any = {}) {
+    Vue.component('VGrid', VGrid)
+    Vue.component('VList', VList)
+    Vue.component('VCards', VCards)
 
     const gridOption = {
       debug: options.debug,
-      perPage: options.perPage,
-      pageSizes: options.pageSizes,
-      routeState: options.routeState
+      perPage: options.perPage || 10,
+      pageSizes: options.pageSizes || [5, 10, 20, 50, 100],
+      routerKey: options.routerKey,
     }
@@ -34,27 +36,10 @@
 
-    if (options.graphql) {
-      Vue.component('VGraphGrid', GraphGrid)
-      Vue.component('VGraphList', GraphList)
-      Vue.component('VGraphCards', GraphCards)
-
-      graphqlOption = {
-        filterKey: options.filterKey || 'where',
-        limitKey: options.limitKey || 'limit',
-        offsetKey: options.offsetKey || 'offset',
-        aggregateQuery: options.aggregateQuery || 'aggregate { count }',
-        graphqlFilter: options.graphqlFilter,
-        graphqlOrder: options.graphqlOrder,
-        graphqlDataCounter: options.graphqlDataCounter
-      }
-    }
-
     if (options.ajax) {
-      Vue.component('VAjaxGrid', AjaxGrid)
-      Vue.component('VAjaxList', AjaxList)
-      Vue.component('VAjaxCards', AjaxCards)
+      Vue.component('VAjaxGrid', VAjaxGrid)
+      Vue.component('VAjaxList', VAjaxList)
+      Vue.component('VAjaxCards', VAjaxCards)
 
       ajaxOption = {
-        extractData: options.extractData,
         pageKey: options.pageKey || 'page',
-        hasSortType: options.hasSortType,
+        hasSortType: options.hasSortType || true,
         sortKey: options.sortKey || 'sort',
@@ -67,2 +52,3 @@ sortTypeKey: options.sortTypeKey || 'sort_type',
         // Funcs
+        extractData: options.extractData,
         getPageIndex: options.getPageIndex
@@ -72,3 +58,19 @@ }
 
-    Vue.prototype.$vgrid = {
+    if (options.graphql) {
+      Vue.component('VGraphGrid', VGraphGrid)
+      Vue.component('VGraphList', VGraphList)
+      Vue.component('VGraphCards', VGraphCards)
+
+      graphqlOption = {
+        filterKey: options.filterKey || 'where',
+        limitKey: options.limitKey || 'limit',
+        offsetKey: options.offsetKey || 'offset',
+        aggregateQuery: options.aggregateQuery || 'aggregate { count }',
+        graphqlFilter: options.graphqlFilter,
+        graphqlOrder: options.graphqlOrder,
+        graphqlDataCounter: options.graphqlDataCounter
+      }
+    }
+
+    const vueGridOptions = {
       ...gridOption,
@@ -78,12 +80,22 @@ ...ajaxOption,
     }
+
+    Vue.provide('$vgrid', vueGridOptions);
   }
 }
 
+// Export VField
 export {
-  Grid,
-  Cards,
-  List,
-  Pagination
-}
+  VGrid,
+  VCards,
+  VList,
+  VAjaxGrid,
+  VAjaxCards,
+  VAjaxList,
+  VGraphGrid,
+  VGraphCards,
+  VGraphList,
+  Pagination,
+};
 
-export default Plugin
+// Export all
+export default VueGridPlugin;

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

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

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

Unpopular package

Quality

This package is not very popular.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1495869

increased by1.67%

Dev dependency count

26

decreased by-7.14%

Number of package files

112

increased by13.13%

Lines of code

28684

increased by2.31%

Number of low quality alerts

1

decreased by-50%

Number of medium quality alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Number of medium supply chain risk alerts

13

increased by8.33%

Dependency changes

• + Addedvue@^3.2.25

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@vue/compiler-core@3.5.13(transitive)

• + Added@vue/compiler-dom@3.5.13(transitive)

• + Added@vue/compiler-sfc@3.5.13(transitive)

• + Added@vue/compiler-ssr@3.5.13(transitive)

• + Added@vue/reactivity@3.5.13(transitive)

• + Added@vue/runtime-core@3.5.13(transitive)

• + Added@vue/runtime-dom@3.5.13(transitive)

• + Added@vue/server-renderer@3.5.13(transitive)

• + Added@vue/shared@3.5.13(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedentities@4.5.0(transitive)

• + Addedestree-walker@2.0.2(transitive)

• + Addedmagic-string@0.30.14(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedvue@3.5.13(transitive)

• - Removedvue-router@^3.5.2

• - Removedvue-router@3.6.5(transitive)