Merge pull request #11 from socotecio/addVuetify3Example

Add vuetify3 example

Author: AMontagu

package-lock.json

@@ -27,7 +27,7 @@ type VDUSConfiguration = {
 }
 
 type VuetifySortArraysObject = {
-  sortBy: Array<string>;
+  sortBy: Array<string | { key: string; order: 'asc' | 'desc'; }>;
   sortDesc: Array<boolean>;
 }
 

src/utils/VDUSTypes.ts

@@ -1,4 +1,5 @@
 import {VuetifySortArraysObject} from "./VDUSTypes";
+import { isVue2 } from 'vue-demi'
 
 export const elementToArrayOfInt = (element: any): Array<number> => {
   return ["number", "string"].includes(typeof element)
@@ -37,33 +38,49 @@ export const extractIntegerValue = (value: any, defaultValue = 0): number => {
 };
 
 export const getSortsArrayFromOrdering = (ordering: Array<string>|null): VuetifySortArraysObject => {
+  
   if (!ordering) {
     return { sortBy: [], sortDesc: [] };
   }
-  const sortBy: Array<string> = [];
+  const sortBy: Array<string | { key: string; order: 'asc' | 'desc'; }> = [];
   const sortDesc: Array<boolean> = [];
 
-  ordering.forEach(orderItem => {
-    let isDesc = false;
-    if (orderItem.startsWith("-")) {
-      orderItem = orderItem.replace("-", "");
-      isDesc = true;
-    }
-    sortBy.push(orderItem);
-    sortDesc.push(isDesc);
-  });
+    ordering.forEach(orderItem => {
+      let isDesc = false;
+      if (orderItem.startsWith("-")) {
+        orderItem = orderItem.replace("-", "");
+        isDesc = true;
+      }
+      if(isVue2) {
+        sortBy.push(orderItem);
+        sortDesc.push(isDesc);
+      } else {
+        sortBy.push({key: orderItem, order: isDesc ? "desc" : "asc"});
+      }
+    });
 
   return { sortBy, sortDesc };
 }
 
-export const getOrderingFromSortArray = (sortBy: Array<string>, sortDesc: Array<boolean>): Array<string> => {
-  const ordering: Array<string> = [];
-  sortBy.forEach((orderItem, index) => {
-    let isDesc = true;
-    if (sortDesc.length > index) {
-      isDesc = sortDesc[index];
-    }
-    ordering.push(`${isDesc ? "-" : ""}${orderItem}`);
-  });
+export const getOrderingFromSortArray = (sortBy: Array<string | { key: string; order: 'asc' | 'desc'; }>, sortDesc: Array<boolean>): Array<string> => {
+  let ordering: Array<string> = [];
+  if(isVue2) {
+    (sortBy as string[]).forEach((orderItem: string, index: number) => {
+      let isDesc = true;
+      if (sortDesc.length > index) {
+        isDesc = sortDesc[index];
+      }
+      ordering.push(`${isDesc ? "-" : ""}${orderItem}`);
+    });
+  } else {
+     // Vue 3 scenario: sortBy is Array<{ key: string; order: 'asc' | 'desc' }>
+     ordering = (sortBy as Array<{ key: string; order: 'asc' | 'desc' }>).reduce(
+      (acc: string[], item) => {
+        acc.push(`${item.order === 'desc' ? '-' : ''}${item.key}`);
+        return acc; // Return the accumulator array, not push result
+      },
+      []
+    );
+  }
   return ordering;
 }

src/utils/helpers.ts

@@ -119,30 +119,30 @@ describe('helpers.ts', () => {
       const element = ["ordering_field"];
       const returnValue = getSortsArrayFromOrdering(element);
 
-      expect(returnValue).toEqual({ sortBy: ["ordering_field"], sortDesc: [false] })
+      expect(returnValue).toEqual({ sortBy: [{key: "ordering_field", order: "asc"}], sortDesc: [] })
     })
 
     it("return correct VuetifySortArraysObject if negative ordering", () => {
       const element = ["-ordering_field"];
       const returnValue = getSortsArrayFromOrdering(element);
 
-      expect(returnValue).toEqual({ sortBy: ["ordering_field"], sortDesc: [true] })
+      expect(returnValue).toEqual({ sortBy: [{key: "ordering_field", order: "desc"}], sortDesc: [] })
     })
   })
 
   describe('getOrderingFromSortArray', () => {
 
     it("return correct ordering if positive ordering", () => {
-      const sortBy = ["ordering_field"];
-      const sortDesc = [false];
+      const sortBy: { key: string; order: 'asc' | 'desc'; }[] = [{key: "ordering_field", order: "asc"}];
+      const sortDesc: boolean[] = [];
       const returnValue = getOrderingFromSortArray(sortBy, sortDesc);
 
       expect(returnValue).toEqual(["ordering_field"])
     })
 
     it("return correct ordering if negative ordering", () => {
-      const sortBy = ["ordering_field"];
-      const sortDesc = [true];
+      const sortBy: { key: string; order: 'asc' | 'desc'; }[] = [{key: "ordering_field", order: "desc"}];
+      const sortDesc: boolean[] = [];
       const returnValue = getOrderingFromSortArray(sortBy, sortDesc);
 
       expect(returnValue).toEqual(["-ordering_field"])

tests/unit/helpers.spec.ts

@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
+not ie 11

vue3-example/.browserslistrc

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

vue3-example/.editorconfig

@@ -2,7 +2,6 @@
 node_modules
 /dist
 
-
 # local env files
 .env.local
 .env.*.local

vue3-example/.eslintrc.js

@@ -1,24 +1,81 @@
-# vue3-example
+# Vuetify (Default)
 
-## Project setup
-```
-npm install
-```
+This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## ❗️ Important Links
 
-### Compiles and minifies for production
-```
-npm run build
-```
+- 📄 [Docs](https://vuetifyjs.com/)
+- 🚨 [Issues](https://issues.vuetifyjs.com/)
+- 🏬 [Store](https://store.vuetifyjs.com/)
+- 🎮 [Playground](https://play.vuetifyjs.com/)
+- 💬 [Discord](https://community.vuetifyjs.com)
+
+## 💿 Install
+
+Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
+
+| Package Manager                                                | Command        |
+|---------------------------------------------------------------|----------------|
+| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
+| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
+| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
+| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
+
+After completing the installation, your environment is ready for Vuetify development.
+
+## ✨ Features
+
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
+- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
+- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
+- 💻 **Enhanced Development Experience**: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. [TypeScript](https://www.typescriptlang.org/) | [ESLint Plugin Vue](https://eslint.vuejs.org/)
+- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
+- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
+- 🛠️ **Strongly-Typed Vue**: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc)
+
+These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
+
+## 💡 Usage
 
-### Lints and fixes files
+This section covers how to start the development server and build your project for production.
+
+### Starting the Development Server
+
+To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
+
+```bash
+yarn dev
 ```
-npm run lint
+
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
+
+### Building for Production
+
+To build your project for production, use:
+
+```bash
+yarn build
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+Once the build process is completed, your application will be ready for deployment in a production environment.
+
+## 💪 Support Vuetify Development
+
+This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
+
+- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
+- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
+- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
+- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
+- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
+- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
+- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
+
+## 📑 License
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2016-present Vuetify, LLC

vue3-example/.gitignore

@@ -0,0 +1,17 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    BaseOrdering: typeof import('./src/components/BaseOrdering.vue')['default']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SimpleDatatable: typeof import('./src/components/SimpleDatatable.vue')['default']
+    VuetifyDatatable: typeof import('./src/components/VuetifyDatatable.vue')['default']
+  }
+}

vue3-example/README.md

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />

vue3-example/babel.config.js

@@ -0,0 +1,37 @@
+/**
+ * .eslint.js
+ *
+ * ESLint configuration file.
+ */
+
+import pluginVue from 'eslint-plugin-vue'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  ...pluginVue.configs['flat/recommended'],
+  ...vueTsEslintConfig(),
+
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+        },
+      ],
+      'vue/multi-word-component-names': 'off',
+    }
+  }
+]

vue3-example/components.d.ts

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to Vuetify 3</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>