diff --git a/.github/workflows/documentation.yml b/.github/workflows/documentation.yml new file mode 100644 index 00000000..15f60fb9 --- /dev/null +++ b/.github/workflows/documentation.yml @@ -0,0 +1,53 @@ +# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created +# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages +# This file was contributed by Carlos Parada and Yamel Senih from ERP Consultores y Asociados, C.A + +name: Build Project + +# Controls when the action will run. +on: + # Triggers the workflow on push or pull request events but only for the master branch + push: + branches: [ master, develop ] + pull_request: + branches: [ master, develop ] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [14.x] + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: set -e + - run: | + cd docs + npm i + npm run build + - run: | + cd docs + git clone https://github.com/adempiere/adempiere-vue.git --branch gh-pages --single-branch gh-pages + cp -r .vuepress/dist/* gh-pages/ + cd gh-pages + touch .nojekyll + git init + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + git add . + git commit -m "Update documentation" -a || true + - uses: ad-m/github-push-action@master + with: + branch: gh-pages + directory: docs/gh-pages + github_token: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index e56a456a..edd9179b 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -11,11 +11,15 @@ on: jobs: build: runs-on: ubuntu-latest + strategy: + matrix: + node-version: [10.x, 12.x, 13.x, 14.x] + steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: 14 + node-version: ${{ matrix.node-version }} - run: npm i - run: npm test - run: npm run build:prod --if-present diff --git a/docs/.vuepress/components/CodingAD.vue b/docs/.vuepress/components/CodingAD.vue new file mode 100644 index 00000000..fe7ddd4a --- /dev/null +++ b/docs/.vuepress/components/CodingAD.vue @@ -0,0 +1,20 @@ + + + diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js new file mode 100644 index 00000000..a25ed0e4 --- /dev/null +++ b/docs/.vuepress/config.js @@ -0,0 +1,268 @@ +var nav = require('./nav.js') +var { EcosystemNav, ComponentNav, BackendNav } = nav + +var utils = require('./utils.js') +var { genNav, getComponentSidebar, deepClone } = utils + +module.exports = { + title: 'adempiere-vue', + description: 'The new UI for ADempiere ERP', + base: '/adempiere-vue/', + head: [ + [ + 'link', + { + rel: 'icon', + href: '/favicon.ico' + } + ] + ], + themeConfig: { + repo: 'adempiere/adempiere-vue', + docsRepo: 'adempiere/adempiere-vue', + docsDir: 'docs', + editLinks: true, + sidebarDepth: 3, + algolia: { + apiKey: 'ffce0083d0830de5f562c045a481410b', + indexName: 'vue_element_admin' + }, + locales: { + '/': { + label: 'English', + selectText: 'Languages', + editLinkText: 'Edit this page on GitHub', + nav: [ + { + text: 'Guide', + link: '/guide/' + }, + { + text: 'Features', + items: genNav([...BackendNav, ...deepClone(ComponentNav)], 'EN') + }, + { + text: 'Ecosystem', + items: genNav(deepClone(EcosystemNav), 'EN') + }, + { + text: 'Donate', + link: '/donate/' + }, + { + text: '中文站点(gitee)', + link: 'https://adempiere-vue.gitee.io/adempiere-vue/zh/' + } + ], + sidebar: { + '/guide/': [ + { + title: 'Essentials', + collapsable: false, + children: genEssentialsSidebar() + }, + { + title: 'Advanced', + collapsable: false, + children: genAdvancedSidebar() + }, + { + title: 'Other', + collapsable: false, + children: [ + '/guide/other/gitter.md', + '/guide/other/release-notes.md' + ] + } + ], + '/feature/component/': getComponentSidebar( + deepClone(ComponentNav), + 'EN' + ), + '/feature/script/': [ + '/feature/script/svgo.md', + '/feature/script/new.md' + ] + } + }, + '/es/': { + label: 'Español', + selectText: 'Idiomas', + editLinkText: 'Editar esta página en GitHub', + nav: [ + { + text: 'Guía', + link: '/es/guide/' + }, + { + text: 'Características', + items: genNav([...BackendNav, ...deepClone(ComponentNav)], 'ES') + }, + { + text: 'Ecosistema', + items: genNav(deepClone(EcosystemNav), 'ES') + }, + { + text: 'Donar', + link: '/es/donate/' + } + ], + sidebar: { + '/es/guide/': [ + { + title: 'Esenciales', + collapsable: false, + children: genEssentialsSidebar('/es') + }, + { + title: 'Avanzado', + collapsable: false, + children: genAdvancedSidebar('/es') + }, + { + title: 'Otro', + collapsable: false, + children: [ + '/es/guide/other/gitter.md', + '/es/guide/other/release-notes.md' + ] + } + ], + '/es/feature/component/': getComponentSidebar( + deepClone(ComponentNav), + 'ES' + ), + '/es/feature/script/': [ + '/es/feature/script/svgo.md', + '/es/feature/script/new.md' + ] + } + }, + '/zh/': { + label: '简体中文', + selectText: '选择语言', + editLinkText: '在 GitHub 上编辑此页', + nav: [ + { + text: '指南', + link: '/zh/guide/' + }, + { + text: '功能', + items: genNav([...BackendNav, ...deepClone(ComponentNav)], 'ZH') + }, + { + text: '生态系统', + items: genNav(deepClone(EcosystemNav), 'ZH') + }, + { + text: '捐赠', + link: '/zh/donate/' + }, + { + text: '中文站点(gitee)', + link: 'https://adempiere-vue.gitee.io/adempiere-vue/zh/' + }, + { + text: '招聘', + link: '/zh/job/' + } + ], + sidebar: { + '/zh/guide/': [ + { + title: '基础', + collapsable: false, + children: genEssentialsSidebar('/zh') + }, + { + title: '进阶', + collapsable: false, + children: genAdvancedSidebar('/zh') + }, + { + title: '其它', + collapsable: false, + children: [ + '/zh/guide/other/faq.md', + '/zh/guide/other/release-notes.md' + ] + } + ], + '/zh/feature/component/': getComponentSidebar( + deepClone(ComponentNav), + 'ZH' + ), + '/zh/feature/script/': [ + '/zh/feature/script/svgo.md', + '/zh/feature/script/new.md' + ] + } + } + } + }, + locales: { + '/': { + lang: 'en-US', + description: 'The new UI for ADempiere ERP' + }, + '/zh/': { + lang: 'zh-CN', + description: 'The new UI for ADempiere ERP' + }, + '/es/': { + lang: 'es-ES', + description: + 'La nueva UI para ADempiere ERP, tome su tiempo para ver estamaravillosa interfaz adaptada a los requerimientos de su negocio' + } + }, + configureWebpack: { + resolve: { + alias: { + '@public': './public' + } + } + }, + ga: 'UA-109340118-1' +} + +function genEssentialsSidebar(type = '') { + const mapArr = [ + '/guide/', + '/guide/essentials/layout.md', + '/guide/essentials/router-and-nav.md', + '/guide/essentials/permission.md', + '/guide/essentials/tags-view.md', + '/guide/essentials/new-page.md', + '/guide/essentials/style.md', + '/guide/essentials/server.md', + '/guide/essentials/mock-api.md', + '/guide/essentials/import.md', + '/guide/essentials/deploy.md', + '/guide/essentials/env.md' + ] + return mapArr.map(i => { + return type + i + }) +} + +function genAdvancedSidebar(type = '') { + const mapArr = [ + '/guide/advanced/cors.md', + '/guide/advanced/eslint.md', + '/guide/advanced/git-hook.md', + '/guide/advanced/style-guide.md', + '/guide/advanced/lazy-loading.md', + '/guide/advanced/chart.md', + '/guide/advanced/icon.md', + '/guide/advanced/cdn.md', + '/guide/advanced/theme.md', + '/guide/advanced/i18n.md', + '/guide/advanced/error.md', + '/guide/advanced/webpack.md', + '/guide/advanced/sass.md' + ] + return mapArr.map(i => { + return type + i + }) +} diff --git a/docs/.vuepress/nav.js b/docs/.vuepress/nav.js new file mode 100644 index 00000000..b52db579 --- /dev/null +++ b/docs/.vuepress/nav.js @@ -0,0 +1,172 @@ +var EcosystemNav = [ + { + textEN: 'Repositories', + textES: 'Repositorios', + textZH: '项目', + items: [ + { + text: 'adempiere-vue', + link: 'https://github.com/adempiere/adempiere-vue' + }, + { + text: 'vue-admin-template', + link: 'https://github.com/adempiere/vue-admin-template' + }, + { + text: 'electron-vue-admin', + link: 'https://github.com/PanJiaChen/electron-vue-admin' + }, + { + text: 'vue-typescript-admin-template', + link: 'https://github.com/Armour/vue-typescript-admin-template' + }, + { + text: 'awesome-project', + link: 'https://github.com/adempiere/adempiere-vue/issues/2312' + }, + { + text: 'vue-countTo', + link: 'https://github.com/adempiere/vue-countTo' + }, + { + text: 'vue-split-pane', + link: 'https://github.com/adempiere/vue-split-pane' + }, + { + text: 'awesome-bookmarks', + link: 'https://github.com/adempiere/awesome-bookmarks', + type: 'ZH' + } + ] + }, + { + textEN: 'Help', + textES: 'Ayuda', + textZH: '帮助', + items: [ + { + textZH: '国内文档(解决Github.io访问慢的问题)', + link: 'https://adempiere-vue.gitee.io/adempiere-vue-site/zh' + }, + { + text: 'Gitter', + textZH: 'Gitter讨论组', + link: 'https://gitter.im/adempiere-vue/discuss' + }, + { + textZH: '作者Blog', + link: 'https://jianshiapp.com/circles/1209', + type: 'ZH' + }, + { + textZH: '常见问题', + link: '/guide/other/faq.md', + type: 'ZH' + }, + { + textZH: 'QQ群', + link: 'https://github.com/adempiere/adempiere-vue/issues/602', + type: 'ZH' + }, + { + textZH: '作者个人微博', + link: 'https://weibo.com/u/3423485724', + type: 'ZH' + }, + { + text: 'Changelog', + textES: 'Registro de cambios', + textZH: '更新记录', + link: 'https://github.com/adempiere/adempiere-vue/releases' + } + ] + } +] + +var BackendNav = [ + { + text: 'Backend', + textES: 'Backend', + textZH: '后端整合', + items: [ + { + text: 'Java backend integration', + textES: 'Java backend integration', + textZH: 'Java 后端整合', + link: + 'https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=vue_featires' + } + ] + } +] + +var ComponentNav = [ + { + text: 'Component', + textES: 'Componente', + textZH: '组件', + items: [ + { + text: 'Rich Text Editor', + textES: 'Editor de Texto Enriquecido', + textZH: '富文本', + link: '/feature/component/rich-editor.md' + }, + { + text: 'Markdown Editor', + textES: 'Editor de Markdown', + textZH: 'Markdown 编辑器', + link: '/feature/component/markdown-editor.md' + }, + { + text: 'Svg Icon', + textES: 'Icono Svg', + textZH: 'Svg Icon 图标', + link: '/feature/component/svg-icon.md' + }, + { + text: 'Clipboard', + textES: 'Portapapeles', + textZH: '复制粘贴', + link: '/feature/component/clipboard.md' + }, + { + text: 'Excel', + textZH: 'Excel', + link: '/feature/component/excel.md' + }, + { + text: 'Pagination', + textES: 'Paginación', + textZH: 'Pagination 分页', + link: '/feature/component/pagination.md' + }, + { + text: 'Tree Table', + textES: 'Tabla de Árbol', + textZH: 'Tree Table 树形表格', + link: '/feature/component/tree-table.md' + } + ] + }, + { + text: 'Script', + items: [ + { + text: 'Svgo', + link: '/feature/script/svgo.md' + }, + { + text: 'New', + textES: 'Nuevo', + link: '/feature/script/new.md' + } + ] + } +] + +module.exports = { + EcosystemNav, + ComponentNav, + BackendNav +} diff --git a/docs/.vuepress/public/favicon.ico b/docs/.vuepress/public/favicon.ico new file mode 100644 index 00000000..a8552724 Binary files /dev/null and b/docs/.vuepress/public/favicon.ico differ diff --git a/docs/.vuepress/public/home.png b/docs/.vuepress/public/home.png new file mode 100644 index 00000000..a096f111 Binary files /dev/null and b/docs/.vuepress/public/home.png differ diff --git a/docs/.vuepress/public/icons/192x192.png b/docs/.vuepress/public/icons/192x192.png new file mode 100644 index 00000000..a096f111 Binary files /dev/null and b/docs/.vuepress/public/icons/192x192.png differ diff --git a/docs/.vuepress/public/icons/512x512.png b/docs/.vuepress/public/icons/512x512.png new file mode 100644 index 00000000..f95b35a6 Binary files /dev/null and b/docs/.vuepress/public/icons/512x512.png differ diff --git a/docs/.vuepress/public/images/ECharts-width.png b/docs/.vuepress/public/images/ECharts-width.png new file mode 100644 index 00000000..0da83131 Binary files /dev/null and b/docs/.vuepress/public/images/ECharts-width.png differ diff --git a/docs/.vuepress/public/images/default-openeds.jpg b/docs/.vuepress/public/images/default-openeds.jpg new file mode 100644 index 00000000..094d015a Binary files /dev/null and b/docs/.vuepress/public/images/default-openeds.jpg differ diff --git a/docs/.vuepress/public/images/vue-java-banner.png b/docs/.vuepress/public/images/vue-java-banner.png new file mode 100644 index 00000000..376eac69 Binary files /dev/null and b/docs/.vuepress/public/images/vue-java-banner.png differ diff --git a/docs/.vuepress/public/job.jpeg b/docs/.vuepress/public/job.jpeg new file mode 100644 index 00000000..c130568b Binary files /dev/null and b/docs/.vuepress/public/job.jpeg differ diff --git a/docs/.vuepress/public/manifest.json b/docs/.vuepress/public/manifest.json new file mode 100644 index 00000000..e81e552c --- /dev/null +++ b/docs/.vuepress/public/manifest.json @@ -0,0 +1,20 @@ +{ + "name": "adempiere-vue-doc", + "short_name": "adempiere-vue-doc", + "icons": [ + { + "src": "/icons/192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/icons/512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "/index.html", + "display": "standalone", + "background_color": "#fff", + "theme_color": "#3eaf7c" +} diff --git a/docs/.vuepress/public/nyan-cat.gif b/docs/.vuepress/public/nyan-cat.gif new file mode 100644 index 00000000..053b4d92 Binary files /dev/null and b/docs/.vuepress/public/nyan-cat.gif differ diff --git a/docs/.vuepress/style.styl b/docs/.vuepress/style.styl new file mode 100644 index 00000000..55cec332 --- /dev/null +++ b/docs/.vuepress/style.styl @@ -0,0 +1,27 @@ +.getting-started .outbound, +.nav-links .outbound { + display: none !important; +} + +.getting-started a img { + margin-right: 8px !important; +} + +.getting-started a img.no-margin { + margin-right: 0px !important; +} + +//global +p code { + // color: #e96900!important; + // background-color: #f8f8f8!important; + // margin: 0 2px!important; + // padding: 0.25rem 0.4rem!important; +} + +blockquote { + font-size: 15px !important; + color: #858585 !important; + border-left: 0.25rem solid #42b983 !important; + font-weight: 1000 !important; +} diff --git a/docs/.vuepress/theme/Home.vue b/docs/.vuepress/theme/Home.vue new file mode 100644 index 00000000..d943ed3f --- /dev/null +++ b/docs/.vuepress/theme/Home.vue @@ -0,0 +1,189 @@ + + + + + diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue new file mode 100644 index 00000000..90467be9 --- /dev/null +++ b/docs/.vuepress/theme/Layout.vue @@ -0,0 +1,345 @@ + + + + + + + + + + diff --git a/docs/.vuepress/theme/dynamic-load-script.js b/docs/.vuepress/theme/dynamic-load-script.js new file mode 100644 index 00000000..b42953e6 --- /dev/null +++ b/docs/.vuepress/theme/dynamic-load-script.js @@ -0,0 +1,40 @@ +const dynamicLoadScript = (src, callback, id) => { + const existingScript = document.getElementById(src) + const cb = callback || function() {} + + if (!existingScript) { + const script = document.createElement('script') + script.src = src // src url for the third-party library being loaded. + script.id = id || src + script.async = true + document.body.appendChild(script) + + const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd + onEnd(script, cb) + } + + if (existingScript && cb) cb(null, existingScript) + + function stdOnEnd(script, cb) { + script.onload = function() { + // this.onload = null here is necessary + // because even IE9 works not like others + this.onerror = this.onload = null + cb(null, script) + } + script.onerror = function() { + this.onerror = this.onload = null + cb(new Error('Failed to load ' + src), script) + } + } + + function ieOnEnd(script, cb) { + script.onreadystatechange = function() { + if (this.readyState !== 'complete' && this.readyState !== 'loaded') return + this.onreadystatechange = null + cb(null, script) // there is no way to catch loading errors in IE8 + } + } +} + +export default dynamicLoadScript diff --git a/docs/.vuepress/theme/utils.js b/docs/.vuepress/theme/utils.js new file mode 100644 index 00000000..0d98b4c6 --- /dev/null +++ b/docs/.vuepress/theme/utils.js @@ -0,0 +1,47 @@ +import axios from 'axios' +import dynamicLoadScript from './dynamic-load-script' + +export function getCodefund(template = 'default') { + const codefundId = isGitee() ? '79' : '116' + axios + .get( + `https://codefund.io/properties/${codefundId}/funder.html?template=${template}` + ) + .then(function(response) { + document.getElementById('codefund').innerHTML = response.data + }) +} + +export function isGitee() { + const origin = window.location.origin + if (origin.includes('gitee.io')) { + return true + } + return false +} + +export function loadCarbon() { + const id = '_carbonads_js' + const existingScript = document.getElementById(id) + if (existingScript) return + const script = document.createElement('script') + + document.body.appendChild(script) + dynamicLoadScript( + 'https://cdn.carbonads.com/carbon.js?serve=CE7IK5QY&placement=panjiachengithubio', + () => {}, + id + ) +} + +export function loadGitter() { + const id = 'adempiere-vue/discuss' + const existingScript = document.getElementById(id) + if (existingScript) return + const script = document.createElement('script') + script.id = id + script.text = + "((window.gitter = {}).chat = {}).options = {room: 'adempiere-vue/discuss'};" + document.body.appendChild(script) + dynamicLoadScript('https://sidecar.gitter.im/dist/sidecar.v1.js') +} diff --git a/docs/.vuepress/utils.js b/docs/.vuepress/utils.js new file mode 100644 index 00000000..8411c3dc --- /dev/null +++ b/docs/.vuepress/utils.js @@ -0,0 +1,47 @@ +function deepClone(d) { + return JSON.parse(JSON.stringify(d)) +} + +function genNav(items, type = 'EN') { + return items.filter(v => { + if (v.type && v.type !== type) return false + + if (v[`text${type}`]) { + v.text = v[`text${type}`] + } + + if (type != 'EN' && v.link && !isExternalLink(v.link)) { + v.link = `/${type.toLocaleLowerCase()}${v.link}` + } + + if (v.items && v.items.length > 0) { + v.items = genNav(v.items, type) + } + + return v + }) +} + +function validateURL(textval) { + const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%*$#=~_-]+))*$/ + return urlregex.test(textval) +} + +function isExternalLink(routePath) { + return validateURL(routePath) +} + +function getComponentSidebar(item, type = 'EN') { + return item[0].items.map(v => { + if (type != 'EN' && v.link && !isExternalLink(v.link)) { + v.link = `/${type.toLocaleLowerCase()}${v.link}` + } + return v.link + }) +} + +module.exports = { + genNav, + getComponentSidebar, + deepClone +} diff --git a/docs/README.md b/docs/README.md new file mode 100755 index 00000000..cf789a50 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,38 @@ +--- +home: true +heroImage: /home.png +title: a +actionText: Get Started → +actionLink: /guide/ +features: + - title: Feature-rich + details: A strong framework of ADempiere for many enterprise applications and various components + - title: Best Practice + details: Reasonable framework choice, good engineering practice + - title: Up-to-date Dev Stack + details: Development using front-end advanced technology + - title: Permission Validation + details: Dynamic loading of route and rendering sidebar based on permissions + - title: Globalization + details: Built-in industry universal international solution + - title: Theming + details: Supports multiple dynamic skin methods +footer: GNU/GPL v3 Licensed | Copyright © 2019-present ADempiere +--- + +## Getting Started + +```bash +# clone the project +git clone https://github.com/adempiere/adempiere-vue.git + +# install dependency +yarn install + +# develop +yarn dev +``` + +## Demo + +[ADempiere UI Demo](https://demo-ui.erpya.com/) diff --git a/docs/donate/README.md b/docs/donate/README.md new file mode 100644 index 00000000..753c8b02 --- /dev/null +++ b/docs/donate/README.md @@ -0,0 +1,9 @@ +--- +sidebar: false +--- + +::: tip Donate +If you find this project useful, you can help to maintain this project :tropical_drink: +::: + +[PayPal](https://www.paypal.me/YamelSenih) diff --git a/docs/es/README.md b/docs/es/README.md new file mode 100644 index 00000000..66bbd612 --- /dev/null +++ b/docs/es/README.md @@ -0,0 +1,38 @@ +--- +home: true +heroImage: /home.png +title: a +actionText: Empezar → +actionLink: /es/guide/ +features: + - title: Rico en características + details: Plantillas típicas para aplicaciones empresariales y varios componentes + - title: Mejores Prácticas + details: Elección razonable de framework, buenas prácticas de ingeniería + - title: Actualización de Dev Stack + details: Desarrollo utilizando tecnología avanzada front-end + - title: Validación de Permisos + details: Carga dinámica de ruta y barra lateral basada en permisos + - title: Globalización + details: Solución internacional universal integrada en la industria + - title: Tematización + details: Soporta múltiples métodos de temas dinámicos. +footer: Licencia MIT | Derechos de autor © 2017-presente PanJiaChen +--- + +## Empezando + +```bash +# clonar el proyecto +git clone https://github.com/adempiere/adempiere-vue.git + +# instalar dependencias +yarn + +# Correr cliente +yarn dev +``` + +## Demo + +[ADempiere UI Demo](https://demo-ui.erpya.com/) diff --git a/docs/es/donate/README.md b/docs/es/donate/README.md new file mode 100644 index 00000000..adbfdf37 --- /dev/null +++ b/docs/es/donate/README.md @@ -0,0 +1,9 @@ +--- +sidebar: false +--- + +::: tip Donar +Si encuentras útil este proyecto, puedes ayudar a manter el proyecto :tropical_drink: +::: + +[PayPal](https://www.paypal.me/YamelSenih) diff --git a/docs/es/feature/component/clipboard.md b/docs/es/feature/component/clipboard.md new file mode 100644 index 00000000..fe3c4b81 --- /dev/null +++ b/docs/es/feature/component/clipboard.md @@ -0,0 +1,65 @@ +--- +sidebarDepth: 3 +--- + +# Portapapeles + +Aquí está el copiar y pegar basado en [portapapeles](https://github.com/zenorocha/clipboard.js) + +Este proyecto ofrece dos maneras de usarlo. + +## Usar directamente + +```html +copiar +``` + +```js +import clip from '@/utils/clipboard.js' // usar el portapapeles directamente + +methods: { + handleCopy(text, event) { + clip(text, event) + } +} +``` + +En primer lugar, importa `clipboard.js` y configura la función `click`. + +`clip()` El primer parámetro es el contenido a copiar, el segundo parámetro es el evento event. Ambos parámetros son necesarios. + +
+
+ +## v-directive + +Este proyecto también encapsula un `v-clipboard`. + +```html + + copiar + +``` + +```js +import clipboard from '@/directive/clipboard/index.js' // usar el portapapeles por v-directive + +directives: { + clipboard +}, +methods: { + clipboardSuccess() { + this.$message({ + message: 'Copiado exitosamente', + type: 'success', + duration: 1500 + }) + } +} +``` + +`v-clipboard:copy`: La copia del contenido. + +`v-clipboard:success`: Función de devolución de llamada de éxito (callback). diff --git a/docs/es/feature/component/excel.md b/docs/es/feature/component/excel.md new file mode 100644 index 00000000..6f6dc45a --- /dev/null +++ b/docs/es/feature/component/excel.md @@ -0,0 +1,104 @@ +# Excel + +## Exportar Excel + +La importación y exportación de Excel se implementa confiando en [js-xlsx](https://github.com/SheetJS/js-xlsx). + +[Export2Excel.js](https://github.com/adempiere/adempiere-vue/blob/master/src/vendor/Export2Excel.js) está empaquetado en el `js-xlsx` para facilitar la exportación de datos. + +### Uso + +Dado que `Export2Excel` depende no solo de `js-xlsx` sino también de `file-saver` y `script-loader`. + +Primero debes instalar el siguiente comando: + +```bash +npm install xlsx file-saver -S +npm install script-loader -S -D +``` + +Dado que el tamaño `js-xlsx` todavía es muy grande, la función de exportación no es una función muy común, por lo que se recomienda una carga lenta al usarla. El método de uso es el siguiente: + +```js +import('@/vendor/Export2Excel').then(excel => { + excel.export_json_to_excel({ + header: tHeader, //Se requiere encabezado + data, //Datos específicos requeridos + filename: 'excel-list', //Opcional + autoWidth: true, //Opcional + bookType: 'xlsx' //Opcional + }) +}) +``` + +:::warning Advertencia +El código de compatibilidad para Blob se ha eliminado en las versiones posteriores a `v3.9.1 +`. Si necesita ser compatible con navegadores de muy bajo nivel, puedes introducir manualmente [blob-polyfill](https://www.npmjs.com/package/blob-polyfill). +::: + +### Parámetros + +| Parámetros | Descripción | Tipo | Valores Aceptados | Predeterminado | +| ---------- | -------------------------------- | ------- | ----------------------------------------------------------------------------------- | -------------- | +| header | Exportar encabezado de datos | Array | / | [] | +| data | Datos específicos exportados | Array | / | [] | +| filename | Nombre de archivo de exportación | String | / | excel-list | +| autoWidth | Si la celda de ancho automático | Boolean | true / false | true | +| bookType | Tipo de archivo de exportación | String | xlsx, csv, txt, [more](https://github.com/SheetJS/js-xlsx#supported-output-formats) | xlsx | + +### Ejemplo + +```js +import('@/vendor/Export2Excel').then(excel => { + const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date'] + const data = this.list + excel.export_json_to_excel({ + header: tHeader, //Se requiere encabezado + data, //Datos específicos requeridos + filename: 'excel-list', //Opcional + autoWidth: true, //Opcional + bookType: 'xlsx' //Opcional + }) +}) +``` + +- [Demo en línea](https://adempiere.github.io/adempiere-vue/#/excel/export-excel) +- [Código en línea](https://github.com/adempiere/adempiere-vue/blob/master/src/views/excel/export-excel.vue) + +## Importación de Excel + +El componente encapsulado de importación de Excel [UploadExcel](https://github.com/adempiere/adempiere-vue/blob/master/src/components/UploadExcel/index.vue), soporta clic, arrastrar y cargar, también depende de `js-xlsx`. + +Proporciona dos funciones de devolución de llamada (callback): + +- beforeUpload + + Puedes hacer algunos juicios especiales antes de subir. Por ejemplo, si el tamaño del archivo es mayor que 1 megabyte? Si es superior a 1 megabyte, deja de analizarlo y muestra un mensaje de error. + +```js + beforeUpload(file) { + const isLt1M = file.size / 1024 / 1024 < 1 + + if (isLt1M) { + return true + } + + this.$message({ + message: 'Por favor, no cargue archivos de más de 1m de tamaño.', + type: 'warning' + }) + return false + } +``` + +- onSuccess + Una función de devolución de llamada (callback) que se activa cuando el análisis se realiza correctamente, que devuelve el encabezado y el contenido de la tabla. + +```js + handleSuccess({ results, header }) { + this.tableData = results + this.tableHeader = header + } +``` + +- [Demo en línea](https://adempiere.github.io/adempiere-vue/#/excel/upload-excel) +- [Código en línea](https://github.com/adempiere/adempiere-vue/blob/master/src/views/excel/upload-excel.vue) diff --git a/docs/es/feature/component/markdown-editor.md b/docs/es/feature/component/markdown-editor.md new file mode 100644 index 00000000..d01d9884 --- /dev/null +++ b/docs/es/feature/component/markdown-editor.md @@ -0,0 +1,76 @@ +# Editor Markdown + +Originalmente utilizado [simplemde-markdown-editor](https://github.com/sparksuite/simplemde-markdown-editor) como editor de markdown, pero esta biblioteca no se ha actualizado ni mantenido desde hace mucho tiempo, y también existe el riesgo de xss. Así que después de la versión , usa [tui.editor](https://github.com/nhnent/tui.editor) como el nuevo editor. Todos los documentos siguientes están basados en tui.editor. [Más contenido](https://github.com/nhnent/tui.editor). + +## Propiedades + +| Nombre | Tipo | Predeterminado | Descripción | +| -------- | ------ | -------------------------- | ------------------------------------------------------------------------------------------------ | +| value | String | " " | Esta propiedad puede cambiar el contenido del editor. **Si estás usando `v-model`, no lo uses**. | +| options | Object | following `defaultOptions` | Opciones de tui.editor. Esto es para inicializar tui.editor. | +| height | String | '300px' | Esta propiedad puede controlar la altura del editor. | +| mode | String | 'markdown' | Esta propiedad puede cambiar el modo del editor. (`markdown`or `wysiwyg`) | +| language | String | 'en_US' | i18n | + +```js +const defaultOptions = { + minHeight: '200px', + previewStyle: 'vertical', + useCommandShortcut: true, + useDefaultHTMLSanitizer: true, + usageStatistics: false, + hideModeSwitch: false, + toolbarItems: [ + 'heading', + 'bold', + 'italic', + 'strike', + 'divider', + 'hr', + 'quote', + 'divider', + 'ul', + 'ol', + 'task', + 'indent', + 'outdent', + 'divider', + 'table', + 'image', + 'link', + 'divider', + 'code', + 'codeblock' + ] +} +``` + +## Métodos + +- setValue +- getValue +- setHtml +- getHtml + +## Ejemplo + +```html + + +``` + +## Ejemplo en Linea + +[enlace](https://adempiere.github.io/adempiere-vue/#/components/markdown) diff --git a/docs/es/feature/component/pagination.md b/docs/es/feature/component/pagination.md new file mode 100644 index 00000000..d94d89ea --- /dev/null +++ b/docs/es/feature/component/pagination.md @@ -0,0 +1,62 @@ +# Paginación + +El componente de paginación se basa principalmente en el elemento 'el-pagination' para el empaquetado secundario, y expandió la función de desplazamiento automático (auto-scroll). + +## Uso básico + +```html + + + +``` + +## Atributos + +| Atributo | Descripción | Tipo | Predeterminado | +| :---------: | :-------------------------------------------------------------------------- | :-------: | :-------------: | +| total | recuento total de artículos | Number | / | +| page | número de página actual, soporta el modificador .sync | Number | 1 | +| limit | Recuento de elementos de cada página, admite el modificador .sync | Number | 20 | +| page-sizes | Opciones de conteo de artículos por página | Number [] | 10, 20, 30, 50] | +| hidden | si ocultar | Boolean | false | +| auto-scroll | Si se desplaza automáticamente a la parte superior después de la paginación | Boolean | true | + +También se admite soporte de otros atributos del elemento `el-pagination`. Consulte la [Documentación](http://element.eleme.io/#/zh-CN/component/pagination) para obtener más detalles. + +## Eventos + +| Nombre del evento | Descripción | Parámetros | +| ----------------- | ---------------------------------------------- | ---------------- | +| pagination | Se dispara cuando cambia el límite o la página | {pagina, límite} | + +## Código fuente y Demo + +- [Código fuente](https://github.com/adempiere/adempiere-vue/blob/master/src/components/Pagination/index.vue) + +- [Demo en línea](https://adempiere.github.io/adempiere-vue/#/table/complex-table) diff --git a/docs/es/feature/component/rich-editor.md b/docs/es/feature/component/rich-editor.md new file mode 100644 index 00000000..41a7578d --- /dev/null +++ b/docs/es/feature/component/rich-editor.md @@ -0,0 +1,49 @@ +--- +sidebarDepth: 3 +--- + +# Editor de texto enriquecido + +El editor de texto enriquecido es una parte fundamental del sistema de administración, pero al mismo tiempo es un lugar con muchos problemas. En el proceso de selección de textos ricos, también caminé muchos desvíos. Los editores de texto enriquecido comunes en el mercado se utilizan básicamente, y finalmente se eligió [Tinymce](https://github.com/tinymce/tinymce). + +Aquí hay una breve introducción a las razones por las que se recomienda `tinymce`: `tinymce` es un veterano para hacer una compañía de texto enriquecido (aquí también se recomienda `ckeditor`, también es una compañía que ha estado haciendo texto enriquecido, la nueva versión es muy bueno), sus productos han superado la prueba del mercado y cuentan con documentación detallada y una rica configuración. Una de las claves para usar texto enriquecido es copiar el formato. Antes de usar un texto coreano rico `summernote`, me desperdició mucho tiempo, muy hostil. Pero el formato de `tinymce` es bastante bueno. También tiene una característica de valor agregado: es una pasta de poder, es extremadamente potente, soporta copiar todo desde Word o cualquier otro lugar. La extensibilidad también es crítica para el texto enriquecido. Uso `tinymce` para escribir varios complementos, los costos de aprendizaje y la facilidad de estudio son buenos y muy fáciles de expandir. El último punto es que la documentación es muy buena, básicamente desea obtener el elemento de configuración, tiene. Tinymce también admite la carga bajo demanda, puede personalizar los complementos a través de su página de compilación oficial. + +Déjame analizar algunos de los otros textos ricos en el mercado: + +- **[summernote](https://github.com/summernote/summernote)** Permítame comenzar con un texto enriquecido que definitivamente no recomendaría. Es inconsistente con muchos comportamientos predeterminados reconocidos entre otros. Y solo para el uso de una función de diálogo, importan el bootstrap, un grupo de personas protestan. El formateo también es muy malo. ¡No lo uses de todos modos! ¡No lo uses! ¡No lo uses! + +- **[ckeditor](https://github.com/galetahub/ckeditor)** Ckeditor también es una empresa veterana que hace texto enriquecido, solía ​​usarlo en el proyecto de la empresa. Este año, la versión 5.0 de la interfaz de usuario también se ha vuelto más bonita, bastante buena y tiene los complementos más ricos. Se recomienda que lo intentes. + +- **[quill](https://github.com/quilljs/quill)** También es un texto rico muy caliente, la piel es muy elegante. Escribir un plug-in basado en él también es muy simple. El diseño de la API es muy bueno. La razón por la que no lo elegí fue porque no era buena para la imagen de operación y era difícil de cambiar. Si no hay operación de la imagen del usuario, se recomienda. + +- **[medium-_editor_](https://github.com/yabwe/medium-editor)** El famoso texto rico en medio (producido de forma no oficial), pero el grado de finalización no es muy bueno, la escalabilidad no es mala . Sin embargo, creo que la mayoría de los usuarios todavía no se utilizarán en esta forma de escritura. + +- **[Squire](https://github.com/neilj/Squire)** Un texto enriquecido relativamente ligero, comprimido solo 11.5kb, en relación con otro texto enriquecido es muy pequeño, las características recomendadas no son una sugerencia complicada. + +- **[UEditor](http://ueditor.baidu.com/website/index.html)** No se usa en profundidad, solo se usa un proyecto simple en angular1X, pero ui realmente feo, no cumple con la estética actual , el funcionario también ha pasado mucho tiempo sin ir con el nuevo. + +- **[slate](https://github.com/ianstormtaylor/slate)** Un marco completamente personalizable para crear editores de texto enriquecido. Slate te permite crear editores ricos e intuitivos como los de Medium, Dropbox Paper o Google Docs, que se están convirtiendo en una mesa de apuestas para aplicaciones en la web, sin que tu base de código se vuelva más compleja. Se ve bien, después de una oportunidad practicaré en el proyecto, pruébalo. + +Incluí una gran cantidad de texto enriquecido, pero no enumeré ningún texto enriquecido relacionado con vue, principalmente porque el texto enriquecido es realmente más complejo de lo que se pensaba. También dicho en el artículo anterior, de hecho, los componentes de encapsulación vue son muy convenientes, no hay necesidad de usar el paquete de cosas de otra persona. +Qué tipo de vue-quill vue-editor es solo un paquete simple, sin dificultad. También puedes encapsularlo tú mismo, y ser un poco más flexible y controlable. Además, vue realmente no tiene ningún texto enriquecido bueno, a diferencia de reaccionar tiene [draft](https://github.com/facebook/draft-js) producido por facebook, [editor](https://github.com/ory/editor) producido por ory. Vue no tiene este producto de una gran empresa. + +Por supuesto, también puede elegir algún editor de texto enriquecido pagado, la propia compañía del autor tiene un proyecto en el uso del [froala-editor](https://www.froala.com/wysiwyg-editor). Si es hermoso y fácil de usar, la compañía compró una versión profesional, $ 349 al año, el precio también es muy razonable, pero de hecho, ahorrar el costo del desarrollo del desarrollador puede ir mucho más allá del precio. + +## Tinymce + +Aquí para hablar brevemente sobre el uso de Tinymce en sus propios proyectos. + +After will dynamic import tinymce by `CDN` . + +If you want to change the cdn address or the version of tinymce, just find tinymce cdn in [@/components/Tinymce](https://github.com/adempiere/adempiere-vue/blob/master/src/components/Tinymce/index.vue) then modified it. It will be automatically injected into `index.html` via `dynamicLoadScript`. + +> El uso actual del método 'Tinymce' de la instalación de npm es más complejo y tiene algunos problemas (que pueden usarse en el futuro). :space_invader: + +**Uso** +Debido a que el texto enriquecido no es adecuado para datos de dos vías, solo vea los cambios de contenido una vez, y luego no volverá a verse. Si más tarde necesita cambiar el contenido de texto enriquecido. Puede configurarse por `this.refs.xxx.setContent()`. + +El código fuente también es muy simple, cualquier otra necesidad se puede modificar en `@/components/Tinymce/index.vue`. + +```html + +``` diff --git a/docs/es/feature/component/svg-icon.md b/docs/es/feature/component/svg-icon.md new file mode 100644 index 00000000..9a33137c --- /dev/null +++ b/docs/es/feature/component/svg-icon.md @@ -0,0 +1,38 @@ +--- +sidebarDepth: 3 +--- + +# Icono Svg + +Componente global de icono: Icono Svg. + +Por defecto, el componente Icono Svg está registrado en [@/icons](https://github.com/adempiere/adempiere-vue/blob/master/src/icons/index.js#L6), y puede usarse en cualquier parte del proyecto. Todos los iconos se pueden encontrar en [@/icons/svg](https://github.com/adempiere/adempiere-vue/tree/master/src/icons/svg). Puedes agregar o eliminar el icono por ti mismo, y el icono se importará automáticamente sin operación manual. + +## Uso + +```html + + +``` + +## Cambiar color + +Por defecto, `svg-icon` lee su color primario `fill: currentColor;` + +Puedes cambiar el `color` del padre o directamente el color de relleno `fill`. + +## Importar desde url + +Soporte de importación `svg` desde url externa. P.ej: + +` +``` + +#### data(**Requerido**) + +```js + const data = [ + { + name:'1' + children: [ + { + name: '1-1' + }, + { + name: '1-2' + } + ] + }, + { + name: `2` + } + ] +``` + +#### columns(**Requerido**) + +- label: texto que se muestra en el encabezado +- key: data.key se mostrará en la columna +- expand: `true` o `false` +- checkbox: `true` o `false` +- width: ancho de columna, por ejemplo `200` +- align: alineación `left/center/right` +- header-align: alineación del encabezado de la tabla `left/center/right` + +```javascript +const columns = [ + { + label: 'Checkbox', + checkbox: true + }, + { + label: '', + key: 'id', + expand: true + }, + { + label: 'Event', + key: 'event', + width: 200, + align: 'left' + }, + { + label: 'Scope', + key: 'scope' + } +] +``` + +> El componente de la tabla de árbol generará un slot con nombre basado en la propiedad key de las columnas. Si necesitas personalizar los datos de la columna, puedes hacerlo a través del slot. + +```html + +``` + +## Eventos + +Actualmente hay varios métodos disponibles, pero solo la versión `beta`, que probablemente se modifique más adelante. + +```js +this.$refs.TreeTable.addChild(row, data) //Agregar elementos secundarios +this.$refs.TreeTable.addBrother(row, data) //Agregar un elemento hermano +this.$refs.TreeTable.delete(row) //Eliminar el elemento +``` + +## Otro + +Si tienes otros requisitos, consulta la api [el-table](http://element-cn.eleme.io/#/en-US/component/table) para modificar el index.vue diff --git a/docs/es/feature/script/new.md b/docs/es/feature/script/new.md new file mode 100644 index 00000000..b3495c8e --- /dev/null +++ b/docs/es/feature/script/new.md @@ -0,0 +1,19 @@ +# Nuevo + +En el trabajo diario, lo más común es escribir módulos y componentes comerciales. Cada vez que necesitas una nueva `vista` o `componente` debes crear manualmente un nuevo `.vue`, crear un `