w-table-vue 1.0.0

package/src/components/WTableVue.vue

@@ -0,0 +1,12 @@
+<script>
+import WTableEdit from './WTableEdit.vue'
+
+let WTableVue = {
+    install: function(Vue) {
+        Vue.component('w-table-edit', WTableEdit)
+    }
+}
+
+export default WTableVue
+</script>
+

package/src/components/demolink.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="item">
+
+        <div style="display:inline-block;">
+            {{casename}}
+        </div>
+
+        <div style="padding-left:5px;"></div>
+
+        <w-button-circle
+            :paddingStyle="{v:3,h:3}"
+            :icon="mdiLaunch"
+            :iconSize="16"
+            :iconColor="'red darken-1'"
+            :iconColorHover="'red darken-1'"
+            :iconColorFocus="'red darken-1'"
+            :backgroundColor="'#fff'"
+            :backgroundColorHover="'#fff5f5'"
+            :backgroundColorFocus="'#fff2f2'"
+            :tooltip="'example'"
+            @click="ckExample"
+        ></w-button-circle>
+
+        <div style="padding-left:5px;"></div>
+
+        <w-button-circle
+            :paddingStyle="{v:3,h:3}"
+            :icon="mdiUnfoldMoreVertical"
+            :iconSize="16"
+            :iconColor="'red darken-1'"
+            :iconColorHover="'red darken-1'"
+            :iconColorFocus="'red darken-1'"
+            :backgroundColor="'#fff'"
+            :backgroundColorHover="'#fff5f5'"
+            :backgroundColorFocus="'#fff2f2'"
+            :tooltip="'code'"
+            @click="ckCode"
+        ></w-button-circle>
+
+    </div>
+</template>
+
+<script>
+import { mdiLaunch, mdiUnfoldMoreVertical } from '@mdi/js'
+import cvCasename from '../../toolg/cvCasename.mjs'
+import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
+
+
+export default {
+    components: {
+        WButtonCircle,
+    },
+    props: {
+        kbname: {
+            type: String,
+        },
+        casename: {
+            type: String,
+        },
+    },
+    data: function() {
+        return {
+            mdiLaunch,
+            mdiUnfoldMoreVertical
+        }
+    },
+    mounted: function() {
+    },
+    computed: {
+
+        fn: function() {
+            let fnc = `${this.casename}`
+            return `${this.kbname}_${cvCasename(fnc)}`
+        },
+
+    },
+    methods: {
+
+        ckExample: function() {
+            let vo = this
+            let url = 'https://yuda-lyu.github.io/w-table-vue/examples/' + vo.fn + '.html'
+            window.open(url, '_blank')
+        },
+
+        ckCode: function() {
+            let vo = this
+            let url = 'https://github.com/yuda-lyu/w-table-vue/blob/master/docs/examples/' + vo.fn + '.html'
+            window.open(url, '_blank')
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.item {
+    border-left: 3px solid #ffba75;
+    margin: 5px 5px 8px 0px;
+    padding: 3px 3px 5px 10px;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+</style>

package/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+    render: h => h(App),
+}).$mount('#app')

package/test/all.test.mjs

@@ -0,0 +1,10 @@
+import assert from 'assert'
+
+
+describe('all', function() {
+
+    it('test in localhost', function() {
+        assert.strict.deepEqual(1, 1)
+    })
+
+})

package/toolg/addVersion.mjs

@@ -0,0 +1,4 @@
+import addVersion from 'w-package-tools/src/addVersion.mjs'
+
+
+addVersion()

package/toolg/cleanFolder.mjs

@@ -0,0 +1,5 @@
+import cleanFolder from 'w-package-tools/src/cleanFolder.mjs'
+
+
+cleanFolder('dist')
+cleanFolder('docs')

package/toolg/cvCasename.mjs

@@ -0,0 +1,43 @@
+import map from 'lodash-es/map.js'
+import trim from 'lodash-es/trim.js'
+import filter from 'lodash-es/filter.js'
+import toUpper from 'lodash-es/toUpper.js'
+import split from 'lodash-es/split.js'
+import size from 'lodash-es/size.js'
+import join from 'lodash-es/join.js'
+
+
+function seCut(str) {
+
+    //split
+    let s = split(str, '&')
+
+    //trim
+    s = map(s, function(v) {
+        return trim(v)
+    })
+
+    //n
+    let n = size(s)
+    n = Math.min(4, n)
+
+    //r
+    let r = []
+    for (let i = 0; i < n; i++) {
+        r.push(s[i])
+    }
+
+    //join
+    let c = join(r, '_')
+
+    return c
+}
+
+
+function cvCasename(casename) {
+    //return seEncode(casename)
+    return seCut(casename)
+}
+
+
+export default cvCasename

package/toolg/gDistApp.mjs

@@ -0,0 +1,38 @@
+import rollupVueToHtml from 'w-package-tools/src/rollupVueToHtml.mjs'
+
+
+let opt = {
+    title: `w-table-vue`,
+    head: `
+
+    <!-- rollupVueToHtml已自動添加@babel/polyfill與vue -->
+
+    <!-- fontawesome -->
+    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
+
+    <!-- mdi, 各組件使用mdi/js故不需引用 -->
+    <link _href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" rel="stylesheet">
+
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+    <link _href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
+
+    <!-- xlsx, w-aggrid-vue的download與upload會使用 -->
+    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
+
+    <!-- ag-grid, ag-grid-vue無法被rollup編譯, 須由cdn引入, 且其依賴window.agGrid -->
+    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/dist/ag-grid-community.min.noStyle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/ag-grid-vue@31.3.4/dist/ag-grid-vue.umd.min.js"></script>
+
+    `,
+    globals: {
+        'vue': 'Vue', //因動態加載組件, 現統一使用window內Vue, 故此處不打包進來, 若vue-cli則自動將Vue關聯至window內的Vue
+        'ag-grid-vue': 'ag-grid-vue', //ag-grid-vue會再引用vue-class-component與vue-property-decorator, 無法被rollup編譯, 故不打包進來, 須由外部cdn引入, 其umd會掛於window['ag-grid-vue']
+    },
+    external: [
+        'vue',
+        'ag-grid-vue',
+    ],
+}
+rollupVueToHtml('./src/App.vue', './docs/examples/app.html', opt)
+

package/toolg/gDistRollupComps.mjs

@@ -0,0 +1,23 @@
+import _ from 'lodash-es'
+import rollupFiles from 'w-package-tools/src/rollupFiles.mjs'
+
+
+let fdSrc = './src/components/'
+let fdTar = './dist'
+
+
+rollupFiles({
+    fns: 'WTableVue.vue',
+    fdSrc,
+    fdTar,
+    nameDistType: 'kebabCase',
+    globals: {
+        'vue': 'Vue', //因動態加載組件, 現統一使用window內Vue, 故此處不打包進來, 若vue-cli則自動將Vue關聯至window內的Vue
+        'ag-grid-vue': 'ag-grid-vue', //ag-grid-vue會再引用vue-class-component與vue-property-decorator, 無法被rollup編譯, 故不打包進來, 須由外部cdn引入, 其umd會掛於window['ag-grid-vue']
+    },
+    external: [
+        'vue',
+        'ag-grid-vue',
+    ],
+})
+

package/toolg/gDocExams.mjs

@@ -0,0 +1,47 @@
+import fs from 'fs'
+import _ from 'lodash-es'
+import getFiles from 'w-package-tools/src/getFiles.mjs'
+import getPks from 'w-package-tools/src/getPks.mjs'
+
+
+let fdSrc = './test-html/'
+let fdTar = './docs/examples/'
+
+
+function main() {
+    //把example裡面cdn更換, 再複製到docs的example內, 作為日後發佈為靜態網站
+
+    //pks
+    let pks = getPks()
+
+    //cdn
+    let cdn = `<script src="https://cdn.jsdelivr.net/npm/w-table-vue@${pks.version}/dist/w-table-vue.umd.js"></script>`
+
+    //mkdirSync
+    if (!fs.existsSync(fdTar)) {
+        fs.mkdirSync(fdTar)
+    }
+
+    //getFiles
+    let ltfs = getFiles(fdSrc)
+
+    _.each(ltfs, function(v) {
+
+        //fn
+        let fn = fdSrc + v
+
+        //c
+        let c = fs.readFileSync(fn, 'utf8')
+
+        //replace
+        let r = `<script src="../dist/w-table-vue.umd.js"></script>`
+        c = c.replace(r, cdn)
+
+        //write
+        //console.log(c)
+        fs.writeFileSync(fdTar + v, c, 'utf8')
+
+    })
+
+}
+main()

package/toolg/gExtractHtml.mjs

@@ -0,0 +1,268 @@
+import fs from 'fs'
+import * as cheerio from 'cheerio'
+import _ from 'lodash-es'
+import w from 'wsemi'
+import getFiles from 'w-package-tools/src/getFiles.mjs'
+import cleanFolder from 'w-package-tools/src/cleanFolder.mjs'
+import parseVueCode from 'w-package-tools/src/parseVueCode.mjs'
+import kebabPropsVueTemp from 'w-package-tools/src/kebabPropsVueTemp.mjs'
+import extractHtml from 'w-package-tools/src/extractHtml.mjs'
+import cvCasename from './cvCasename.mjs'
+
+
+let fdSrc = './src/'
+let fdTestHtml = './test-html/'
+let fdTestSrc = './test-action/'
+
+
+let $setting = {
+    //ignoreWhitespace: true,
+    xmlMode: false, //不能設定true, 否則會導致vue組件名稱變成self-closing, 此於瀏覽器指定html5規範下無法解析
+    decodeEntities: false,
+    // recognizeSelfClosing: false, //若xmlMode為true則recognizeSelfClosing必定為true
+}
+
+
+function writeHtml(v) {
+
+    function getAppTmp() {
+
+        //h
+        let h = v.tmp
+        // console.log('h', w.strleft(h, 100) + '...')
+
+        //$
+        let $ = cheerio.load(h, $setting)
+
+        //移除demolink
+        $('demolink').remove()
+
+        //於bk前插入, 添加組件kbname
+        $('div.bk').before(`<div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-table-vue/examples/app.html?cmp='+this.innerText,'_blank')">${v.kbname}</span></div>`)
+
+        //於bk內插入, 添加範例casename
+        $('div.bk').prepend(`<div class="item">${v.casename}</div>`)
+
+        //to html
+        h = $('body').html()
+        // console.log('getAppTmp', w.strleft(h, 100) + '...')
+
+        return h
+    }
+
+    function procHtml(h) {
+
+        //replace mdi-icon
+        let r = `mdi[A-Za-z]+` //有些mdi是放在元素attr內, 有些是放在vue data內, 故不能包含雙引號(限定attr)查找
+        let reg = new RegExp(r, 'g')
+        let mdis = h.match(reg)
+        if (mdis) {
+            _.each(mdis, (mdi) => {
+                let c = mdi
+                c = _.kebabCase(c) //轉kebab
+                c = `'${c}'` //添加單引號成為字串
+                h = h.replace(mdi, c) //取代
+            })
+        }
+
+        return h
+    }
+
+    //opt
+    let opt = {
+        title: `w-table-vue`,
+        head: `
+    
+        <!-- extractHtml已自動添加@babel/polyfill與vue -->
+
+        <!-- fontawesome -->
+        <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
+
+        <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" rel="stylesheet">
+
+        <!-- google, 各組件使用mdi/js故不需引用 -->
+        <link _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+        <link _href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
+
+        <!-- xlsx, w-aggrid-vue的download與upload會使用 -->
+        <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
+
+        <!-- ag-grid, ag-grid-vue無法被rollup編譯, 須由cdn引入, 且其依賴window.agGrid -->
+        <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/dist/ag-grid-community.min.noStyle.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/ag-grid-vue@31.3.4/dist/ag-grid-vue.umd.min.js"></script>
+
+        <!-- w-table-vue -->
+        <script src="../dist/w-table-vue.umd.js"></script>
+    
+        <style>
+            .item { /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
+                border-left: 3px solid #ffba75;
+                margin: 5px 5px 8px 0px;
+                padding: 3px 3px 5px 10px;
+                font-size: 0.9rem;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+            }
+            .head1 {
+                padding: 0px 0px 20px 0px;
+                font-size: 2.5rem;
+            }
+            .bkh { /* 寬 */
+                padding:20px;
+            }
+            @media screen and (max-width:800px){ /* 中 */
+                .bkh {
+                    padding:10px;
+                }
+            }
+            @media screen and (max-width:400px){ /* 窄 */
+                .bkh {
+                    padding:5px;
+                }
+            }
+            .bk { /* 寬 */
+                display: inline-block;
+                vertical-align: top;
+                padding: 0px 80px 60px 0px;
+            }
+            @media screen and (max-width:1000px){ /* 中窄 */
+                .bk {
+                    display: block;
+                    padding: 0px 0px 50px 0px;
+                }
+            }
+        </style>
+    
+        `,
+        appTag: `div`,
+        appClass: `bkh`,
+        appStyle: ``,
+        appTmp: getAppTmp(),
+        installVue: `Vue.use(window['w-table-vue'])`,
+        data: v.data,
+        mounted: v.mounted,
+        computed: v.computed,
+        methods: v.methods,
+        action: v.action,
+        procHtml,
+        fpHtml: `${fdTestHtml}${v.fn}.html`,
+        fpAction: `${fdTestSrc}${v.fn}.action.json`,
+    }
+
+    //extractHtml
+    extractHtml(opt)
+
+}
+
+
+function extractAppZone(fn) {
+
+    //read
+    let hh = fs.readFileSync(fn, 'utf8')
+    // console.log('hh', hh)
+
+    //parseVueCode
+    let { tmp, data, mounted, computed, methods, action } = parseVueCode(hh)
+
+    //vue屬性轉kebab, 記得要在cheerio處理前, 否則attr都會被改成小寫
+    tmp = kebabPropsVueTemp(tmp)
+    tmp = w.replace(tmp, `=""`, '')
+    // console.log('tmp', w.strleft(tmp, 100) + '...')
+
+    //$
+    let $ = cheerio.load(tmp, $setting)
+    // console.log(`$('div.bk').html()`, w.strleft($('div.bk').html(), 100) + '...')
+
+    //name
+    let name = fn.split('AppZone')
+    name = name[1]
+    name = name.replace('.vue', '')
+
+    //clear data
+    let ss = data.split('\r\n')
+    ss = _.filter(ss, (s) => {
+        return s.indexOf('            mdi') < 0 //去除@mdi/js icon
+    })
+    ss = _.map(ss, (v, k) => {
+        if (k === 0) {
+            return v
+        }
+        return `        ${v}`
+    })
+    data = ss.join('\r\n')
+    //console.log('data', data)
+
+    function getAttr(h, name) {
+        // console.log('getAttr', h, name)
+        let $ = cheerio.load(h, $setting)
+        let c = $('demolink').attr(':' + name)
+        c = w.replace(c, `\'`, '')
+        return c
+    }
+
+    //取各個bk, 先於各bk外層添加shell在取html, 才能取到bk含自己的html
+    $('div.bk').wrap('<div class="shell"></div>')
+    $('div.shell').map((i, v) => {
+        // console.log('v', v)
+
+        //me
+        let me = $(v)
+        // console.log(i, 'me', me)
+
+        //tmp
+        let tmp = me.html()
+        // console.log(i, 'tmp', tmp)
+
+        //ss
+        let kbname = getAttr(tmp, 'kbname')
+        let casename = getAttr(tmp, 'casename')
+        // console.log(i, kbname, ',', casename)
+
+        //fn
+        let fnc = `${casename}`
+        let fn = `${kbname}_${cvCasename(fnc)}`
+
+        //writeHtml
+        writeHtml({ name, kbname, casename, tmp, data, mounted, computed, methods, action, fn })
+
+    })
+
+}
+
+
+function main() {
+    //由jsdoc產製之wsemi.html, 自動添加將example轉換成codepen線上編輯功能
+
+    //fdTestHtml
+    cleanFolder(fdTestHtml)
+    //fs.mkdirSync(fdTestHtml)
+    //await fs.promises.mkdir(fdTestHtml)
+
+    //fdTestSrc
+    cleanFolder(fdTestSrc)
+    //fs.mkdirSync(fdTestSrc)
+    //await fs.promises.mkdir(fdTestSrc)
+
+    //getFiles
+    let ltfs = getFiles(fdSrc)
+
+    //filter
+    ltfs = _.filter(ltfs, (v) => {
+        return v.indexOf('AppZone') >= 0
+    })
+    // ltfs = [
+    //     'AppZoneWJsonView.vue',
+    // ]
+    // console.log(ltfs)
+
+    //extractAppZone
+    _.each(ltfs, (v) => {
+        let fn = fdSrc + v
+        console.log('extracting: ' + fn)
+        extractAppZone(fn)
+    })
+
+}
+main()

package/toolg/gMergeComps.mjs

@@ -0,0 +1,75 @@
+import _ from 'lodash-es'
+import fs from 'fs'
+import w from 'wsemi'
+import getFiles from 'w-package-tools/src/getFiles.mjs'
+
+
+let fdSrc = './src/components/'
+let fn_tar = 'WTableVue.vue'
+
+
+function main() {
+    //讀取components裡面組件, 自動生成WTableVue, 供rollup打包整體組件
+
+    //getFiles
+    let ltfs = getFiles(fdSrc)
+    _.pull(ltfs, fn_tar)
+    _.pull(ltfs, 'demolink.vue')
+
+    //c1, c2
+    let c1 = []
+    let c2 = []
+    _.each(ltfs, function(v) {
+
+        //name_all
+        let name_all = v
+
+        //s
+        let s = _.split(v, '.')
+
+        //name_ori
+        let name_ori = s[0]
+
+        //name_ext
+        let name_ext = s[1]
+
+        //name_ori, name_kb
+        let name_kb = _.kebabCase(name_ori)
+
+        //c1
+        c1.push(`import ${name_ori} from './${name_all}'`)
+
+        //c2
+        if (name_ext === 'vue') {
+            c2.push(`        Vue.component('${name_kb}', ${name_ori})`)
+        }
+        else if (name_ext === 'mjs') {
+            let funName = _.toLower(name_ori)
+            funName = '$' + w.strdelleft(funName, 1)
+            c2.push(`        Vue.prototype.${funName} = ${name_ori}`)
+        }
+
+    })
+
+    //c
+    let c =
+`<script>
+${_.join(c1, '\r\n')}
+
+let WTableVue = {
+    install: function(Vue) {
+${_.join(c2, '\r\n')}
+    }
+}
+
+export default WTableVue
+</script>
+
+`
+
+    //write
+    //console.log(c)
+    fs.writeFileSync(fdSrc + fn_tar, c, 'utf8')
+
+}
+main()

package/toolg/modifyReadme.mjs

@@ -0,0 +1,4 @@
+import modifyReadme from 'w-package-tools/src/modifyReadme.mjs'
+
+
+modifyReadme()

package/vue.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    lintOnSave: false, //禁止eslint-loader於編譯時檢查語法
+    devServer: {
+        proxy: {
+        }
+    },
+    //transpileDependencies: ['abc'],
+    //publicPath: process.env.NODE_ENV === 'production' ? '/abc/' : '/',
+}