diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..69fe715 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env"] +} diff --git a/.editorconfig b/.editorconfig index 206e052..73dbd38 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,5 +1,9 @@ -[*] root = true + +[*] +charset = utf-8 +end_of_line = lf insert_final_newline = false +indent_style = space indent_size = 4 -indent_style = space \ No newline at end of file +trim_trailing_whitespace = true \ No newline at end of file diff --git a/.github/dependabot.yml b/.github/dependabot.yml deleted file mode 100644 index 9670ea5..0000000 --- a/.github/dependabot.yml +++ /dev/null @@ -1,9 +0,0 @@ -version: 2 -updates: - - package-ecosystem: "npm" - directory: "/" - schedule: - interval: "daily" - commit-message: - prefix: "chore(deps)" - prefix-development: "chore(deps-dev)" diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml deleted file mode 100644 index b26270a..0000000 --- a/.github/workflows/demo.yml +++ /dev/null @@ -1,36 +0,0 @@ -name: Build demo app - -on: - push: - branches: ["vue3"] - -jobs: - deploy: - runs-on: ubuntu-latest - permissions: - contents: write - concurrency: - group: ${{ github.workflow }}-${{ github.ref }} - steps: - - name: Checkout code - uses: actions/checkout@v3 - - - name: Set up Node.js - uses: actions/setup-node@v3 - with: - node-version: '22' - - - name: Install dependencies - run: npm install - - - name: Build demo - run: APP_BASE=/vue-data-table/demo npm run build:demo - - - name: Deploy - uses: peaceiris/actions-gh-pages@v4 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - publish_branch: demo - publish_dir: ./demo - destination_dir: demo - commit_message: update demo \ No newline at end of file diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..e546718 --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,31 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs + +name: Node.js CI + +on: + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [14.x, 16.x, 18.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v3 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build + - run: npm test diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml deleted file mode 100644 index a4c57d5..0000000 --- a/.github/workflows/tests.yml +++ /dev/null @@ -1,24 +0,0 @@ -name: Automated tests - -on: - push: - branches: [ "vue3", "vue2" ] - pull_request: - branches: [ "vue3", "vue2" ] - -jobs: - build: - runs-on: ubuntu-latest - strategy: - matrix: - node-version: [16.x, 18.x, 20.x] - steps: - - uses: actions/checkout@v3 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 - with: - node-version: ${{ matrix.node-version }} - cache: 'npm' - - run: npm install - - run: npm run build - - run: npm run test \ No newline at end of file diff --git a/.gitignore b/.gitignore index 6e19d65..9783c80 100644 --- a/.gitignore +++ b/.gitignore @@ -1,28 +1,10 @@ -.DS_Store +# ignore vendor packages node_modules -/dist -/demo +dist/ -# backup files -*.bak - -# local env files -.env.local -.env.*.local - -# Log files -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* - -# Editor directories and files -.idea +# ignore IDE files +tags .vscode .vim -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw -tags \ No newline at end of file + +.vue*.json \ No newline at end of file diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 2202f61..0000000 --- a/.npmignore +++ /dev/null @@ -1,7 +0,0 @@ -node_modules/ -src/ -tests/ -.git* -.editorconfig -vite.config.ts -tsconfig.* \ No newline at end of file diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 2b8529c..0000000 --- a/.prettierignore +++ /dev/null @@ -1,8 +0,0 @@ -node_modules/ -dist/ -build/ -assets/ -index.html -.github/ -*.md -*.min.js diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 0203e08..0000000 --- a/.prettierrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "arrowParens": "avoid", - "bracketSameLine": false, - "bracketSpacing": true, - "endOfLine": "lf", - "experimentalOperatorPosition": "end", - "htmlWhitespaceSensitivity": "ignore", - "objectWrap": "collapse", - "printWidth": 80, - "proseWrap": "preserve", - "quoteProps": "consistent", - "semi": false, - "singleAttributePerLine": true, - "singleQuote": false, - "tabWidth": 4, - "trailingComma": "es5", - "useTabs": false, - "vueIndentScriptAndStyle": false -} diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 04f55d9..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,151 +0,0 @@ -# CHANGELOG - -## Vue3 releases - -### v2.1.0 - -- feat: add option to show all entries in per-page -- feat: auto-hide pagination if no pages - -### v2.0.1 - -- fix: TS7016 error - -### v2.0.0 - -- feat: add vue3 support - -## Vue2 releases - -### v1.2.4 - -- fix: columns with empty cells not being sorted correctly - -### v1.2.3 - -- fix: plugin crashed when searching text on empty cells -- css: enhance display of editable cells - -### v1.2.2 - -- feat: add built-in editable cells - -### v1.1.2 - -- fix: property `columns` object array being changed by child component - -### v1.1.1 - -- fix: unsupported JS syntax sugar - -### v1.1.0 - -- feat: add support for user-provided search function -- feat: add built-in Action Buttons column -- feat: easy access to events emitted from user-defined cell components - -### v1.0.0 - -- initial release after refactoring of legacy code - -## Vue2 legacy releases - -### v3.3.3 (legacy) - -- css: removes Bootstrap as dependency, replacing it with our own custom CSS - -### v3.3.2 (legacy) - -- feat: add option to display user-provided Loading component (useful if data has not been loaded) - -### v3.2.2 (legacy) - -- fix: first table entry was incorrect on page 2 and onwards -- fix: empty filename when downloading data -- feat: export only filtered entries instead of all data entries - -### v3.2.1 (legacy) - -- feat: makes it possible to access column data from user-provided custom components - -### v3.1.1 (legacy) - -- feat: add option for user-provided table footer component - -### v3.0.1 (legacy) - -- fix: user-provided custom components not rendered properly - -### v3.0.0 (legacy) - -- break: interface changes - -### v2.3.4 (legacy) - -- feat: add support for user-provided vue components -- feat: add support for user-provided sorting function for individual columns -- feat: add Language Service Provider to set global language settings -- fix: numeric data sorted as string not as numbers - -### v2.2.3 (legacy) - -- fix: custom file name for exported file not working - -### v2.2.2 (legacy) - -- feat: allows setting the positions of components (pagination, search input, etc) via CSS' grid -- fix: default per-page value not working - -### v2.1.1 (legacy) - -- feat: allows display of HTML via `unsafeHTML` option (false by default, feature requested by users of the plugin) -- fix: incorrect display of Action Buttons -- fix: column sorting not working - -### v2.0.0 (legacy) - -- break: remove vuex from deps -- break: interface changes -- css: overall improvements -- fix: crashes when sorting empty cells -- fix: crashes if user inputs out-of-range `go to page` value (keep it in range) - -### v1.4.7 (legacy) - -- fix: column not being sorted on first click - -### v1.4.5 (legacy) - -- feat: add option to select default sorting mode -- feat: add option to use HTML code in column title - -### v1.3.4 (legacy) - -- feat: add `columnKeys` option, a syntax sugar for defining columns - -### v1.2.4 (legacy) - -- feat: add button to export data to csv/xml/json/txt file - -### v1.1.4 (legacy) - -- css: overall improvements - -### v1.1.2 (legacy) - -- feat: add `go to page` button in pagination - -### v1.0.1 (legacy) - -- fix: remove unused code bundled with deployed code - -### v1.0.0 (legacy) - -- initial release -- feat: pagination -- feat: text searching -- feat: column sorting -- feat: display stats -- feat: empty table text -- feat: customizable text -- feat: lang support (en, es, pt-br) diff --git a/LICENSE b/LICENSE deleted file mode 100644 index e043d31..0000000 --- a/LICENSE +++ /dev/null @@ -1,18 +0,0 @@ -MIT License - -Permission is hereby granted, free of charge, to any person obtaining a copy of -this software and associated documentation files (the "Software"), to deal in -the Software without restriction, including without limitation the rights to -use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of -the Software, and to permit persons to whom the Software is furnished to do so, -subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS -FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR -COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER -IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN -CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md index caedd04..5383287 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,25 @@ # VUE DATA TABLE -`VueDataTable` is a Vue plugin to easily create fully-featured data tables. - - - -* [FEATURES](#features) -* [DEMO](#demo) -* [GETTING STARTED](#getting-started) - * [Installation](#installation) - * [Set up](#set-up) - * [Usage](#usage) - * [Nuxt integration](#nuxt-integration) - * [Laravel integration](#laravel-integration) -* [CONFIGURATION](#configuration) - * [Columns](#columns) - * [Custom Cell Component](#custom-cell-component) - * [Action Buttons](#action-buttons) - * [Editable cells](#editable-cells) - * [Selectable rows](#selectable-rows) - * [Text](#text) - * [Adding Language](#adding-language) - * [Async data](#async-data) - * [Layout](#layout) - * [Custom Components](#custom-components) - * [Footer](#footer) - * [Sort Icon](#sort-icon) - * [Sorting Index Icon](#sorting-index-icon) -* [ROADMAP](#roadmap) -* [LICENSE](#license) -* [CONTRIBUTING](#contributing) - - - -Check out my other plugin, [vue-form-builder](https://github.com/uwla/vue-form-builder), -that automatically generates beautiful forms from declarative rules. +`VueDataTable` is a Vue2 plugin that adds advanced features to an HTML table. + +It was inspired by DataTable jQuery Plugin, but was written from scratch in Vue. + +## TABLE OF CONTENTS + +1. [Features](#features) +2. [Demo](#demo) +3. [Getting started](#getting-started) + - [Installation](#installation) + - [Set Up](#set-up) + - [Usage](#usage) +4. [Configuration](#configuration) + - [Columns](#columns) + - [Text](#text) + - [Layout](#layout) + - [Custom components](#custom-components) +5. [Roadmap](#roadmap) +6. [License](#license) +7. [Contributing](#contributing) ## FEATURES @@ -48,21 +34,14 @@ that automatically generates beautiful forms from declarative rules. - Editable cells (edit cell values) - Custom Vue components to render cells - Custom Footer to display data summary -- Support for Vue3 and Vue2 -- Nuxt integration -- Laravel integration ## DEMO -The best way to see if a package suits your needs is by viewing and testing its -functionalities via a [demo app](https://uwla.github.io/vue-data-table/demo). +The best way to see if a package suits your needs is by viewing and editing a +demo project. Here is a code playground in which you can test `VueDataTable`: -There is also this [CodeSandbox Playground](https://codesandbox.io/s/vue3-data-table-demo-c7kfj5) -in which you can edit the source code with live preview. - -![Vue Data Table Demo 1](./assets/vdt-1.png) -![Vue Data Table Demo 2](./assets/vdt-2.png) -![Vue Data Table Demo 3](./assets/vdt-3.png) +- [Demo (preview)](https://vtlyhz.csb.app/) +- [Demo (preview and code)](https://codesandbox.io/s/vue-data-table-demo-vtlyhz) ## GETTING STARTED @@ -72,10 +51,6 @@ in which you can edit the source code with live preview. npm install @uwlajs/vue-data-table ``` -Make sure to install version `2.0.0` or above for Vue3. - -Versions prior to `2.0.0` are for Vue2. Checkout the `vue2` branch for its documentation. - ### Set up ```javascript @@ -91,7 +66,7 @@ import "@uwlajs/vue-data-table/dist/VueDataTable.css"; ### Usage -```vue +```html