w-component-vue 2.1.57

package/src/js/vuetifyColor.mjs

@@ -0,0 +1,88 @@
+import camelCase from 'lodash/camelCase'
+import split from 'lodash/split'
+import size from 'lodash/size'
+import get from 'lodash/get'
+import isestr from 'wsemi/src/isestr.mjs'
+
+
+//fs.writeFileSync('colors.json', JSON.stringify(colors), 'utf8')
+let colors = { 'default': { 'red': { 'base': '#f44336', 'lighten5': '#ffebee', 'lighten4': '#ffcdd2', 'lighten3': '#ef9a9a', 'lighten2': '#e57373', 'lighten1': '#ef5350', 'darken1': '#e53935', 'darken2': '#d32f2f', 'darken3': '#c62828', 'darken4': '#b71c1c', 'accent1': '#ff8a80', 'accent2': '#ff5252', 'accent3': '#ff1744', 'accent4': '#d50000' }, 'pink': { 'base': '#e91e63', 'lighten5': '#fce4ec', 'lighten4': '#f8bbd0', 'lighten3': '#f48fb1', 'lighten2': '#f06292', 'lighten1': '#ec407a', 'darken1': '#d81b60', 'darken2': '#c2185b', 'darken3': '#ad1457', 'darken4': '#880e4f', 'accent1': '#ff80ab', 'accent2': '#ff4081', 'accent3': '#f50057', 'accent4': '#c51162' }, 'purple': { 'base': '#9c27b0', 'lighten5': '#f3e5f5', 'lighten4': '#e1bee7', 'lighten3': '#ce93d8', 'lighten2': '#ba68c8', 'lighten1': '#ab47bc', 'darken1': '#8e24aa', 'darken2': '#7b1fa2', 'darken3': '#6a1b9a', 'darken4': '#4a148c', 'accent1': '#ea80fc', 'accent2': '#e040fb', 'accent3': '#d500f9', 'accent4': '#aa00ff' }, 'deepPurple': { 'base': '#673ab7', 'lighten5': '#ede7f6', 'lighten4': '#d1c4e9', 'lighten3': '#b39ddb', 'lighten2': '#9575cd', 'lighten1': '#7e57c2', 'darken1': '#5e35b1', 'darken2': '#512da8', 'darken3': '#4527a0', 'darken4': '#311b92', 'accent1': '#b388ff', 'accent2': '#7c4dff', 'accent3': '#651fff', 'accent4': '#6200ea' }, 'indigo': { 'base': '#3f51b5', 'lighten5': '#e8eaf6', 'lighten4': '#c5cae9', 'lighten3': '#9fa8da', 'lighten2': '#7986cb', 'lighten1': '#5c6bc0', 'darken1': '#3949ab', 'darken2': '#303f9f', 'darken3': '#283593', 'darken4': '#1a237e', 'accent1': '#8c9eff', 'accent2': '#536dfe', 'accent3': '#3d5afe', 'accent4': '#304ffe' }, 'blue': { 'base': '#2196f3', 'lighten5': '#e3f2fd', 'lighten4': '#bbdefb', 'lighten3': '#90caf9', 'lighten2': '#64b5f6', 'lighten1': '#42a5f5', 'darken1': '#1e88e5', 'darken2': '#1976d2', 'darken3': '#1565c0', 'darken4': '#0d47a1', 'accent1': '#82b1ff', 'accent2': '#448aff', 'accent3': '#2979ff', 'accent4': '#2962ff' }, 'lightBlue': { 'base': '#03a9f4', 'lighten5': '#e1f5fe', 'lighten4': '#b3e5fc', 'lighten3': '#81d4fa', 'lighten2': '#4fc3f7', 'lighten1': '#29b6f6', 'darken1': '#039be5', 'darken2': '#0288d1', 'darken3': '#0277bd', 'darken4': '#01579b', 'accent1': '#80d8ff', 'accent2': '#40c4ff', 'accent3': '#00b0ff', 'accent4': '#0091ea' }, 'cyan': { 'base': '#00bcd4', 'lighten5': '#e0f7fa', 'lighten4': '#b2ebf2', 'lighten3': '#80deea', 'lighten2': '#4dd0e1', 'lighten1': '#26c6da', 'darken1': '#00acc1', 'darken2': '#0097a7', 'darken3': '#00838f', 'darken4': '#006064', 'accent1': '#84ffff', 'accent2': '#18ffff', 'accent3': '#00e5ff', 'accent4': '#00b8d4' }, 'teal': { 'base': '#009688', 'lighten5': '#e0f2f1', 'lighten4': '#b2dfdb', 'lighten3': '#80cbc4', 'lighten2': '#4db6ac', 'lighten1': '#26a69a', 'darken1': '#00897b', 'darken2': '#00796b', 'darken3': '#00695c', 'darken4': '#004d40', 'accent1': '#a7ffeb', 'accent2': '#64ffda', 'accent3': '#1de9b6', 'accent4': '#00bfa5' }, 'green': { 'base': '#4caf50', 'lighten5': '#e8f5e9', 'lighten4': '#c8e6c9', 'lighten3': '#a5d6a7', 'lighten2': '#81c784', 'lighten1': '#66bb6a', 'darken1': '#43a047', 'darken2': '#388e3c', 'darken3': '#2e7d32', 'darken4': '#1b5e20', 'accent1': '#b9f6ca', 'accent2': '#69f0ae', 'accent3': '#00e676', 'accent4': '#00c853' }, 'lightGreen': { 'base': '#8bc34a', 'lighten5': '#f1f8e9', 'lighten4': '#dcedc8', 'lighten3': '#c5e1a5', 'lighten2': '#aed581', 'lighten1': '#9ccc65', 'darken1': '#7cb342', 'darken2': '#689f38', 'darken3': '#558b2f', 'darken4': '#33691e', 'accent1': '#ccff90', 'accent2': '#b2ff59', 'accent3': '#76ff03', 'accent4': '#64dd17' }, 'lime': { 'base': '#cddc39', 'lighten5': '#f9fbe7', 'lighten4': '#f0f4c3', 'lighten3': '#e6ee9c', 'lighten2': '#dce775', 'lighten1': '#d4e157', 'darken1': '#c0ca33', 'darken2': '#afb42b', 'darken3': '#9e9d24', 'darken4': '#827717', 'accent1': '#f4ff81', 'accent2': '#eeff41', 'accent3': '#c6ff00', 'accent4': '#aeea00' }, 'yellow': { 'base': '#ffeb3b', 'lighten5': '#fffde7', 'lighten4': '#fff9c4', 'lighten3': '#fff59d', 'lighten2': '#fff176', 'lighten1': '#ffee58', 'darken1': '#fdd835', 'darken2': '#fbc02d', 'darken3': '#f9a825', 'darken4': '#f57f17', 'accent1': '#ffff8d', 'accent2': '#ffff00', 'accent3': '#ffea00', 'accent4': '#ffd600' }, 'amber': { 'base': '#ffc107', 'lighten5': '#fff8e1', 'lighten4': '#ffecb3', 'lighten3': '#ffe082', 'lighten2': '#ffd54f', 'lighten1': '#ffca28', 'darken1': '#ffb300', 'darken2': '#ffa000', 'darken3': '#ff8f00', 'darken4': '#ff6f00', 'accent1': '#ffe57f', 'accent2': '#ffd740', 'accent3': '#ffc400', 'accent4': '#ffab00' }, 'orange': { 'base': '#ff9800', 'lighten5': '#fff3e0', 'lighten4': '#ffe0b2', 'lighten3': '#ffcc80', 'lighten2': '#ffb74d', 'lighten1': '#ffa726', 'darken1': '#fb8c00', 'darken2': '#f57c00', 'darken3': '#ef6c00', 'darken4': '#e65100', 'accent1': '#ffd180', 'accent2': '#ffab40', 'accent3': '#ff9100', 'accent4': '#ff6d00' }, 'deepOrange': { 'base': '#ff5722', 'lighten5': '#fbe9e7', 'lighten4': '#ffccbc', 'lighten3': '#ffab91', 'lighten2': '#ff8a65', 'lighten1': '#ff7043', 'darken1': '#f4511e', 'darken2': '#e64a19', 'darken3': '#d84315', 'darken4': '#bf360c', 'accent1': '#ff9e80', 'accent2': '#ff6e40', 'accent3': '#ff3d00', 'accent4': '#dd2c00' }, 'brown': { 'base': '#795548', 'lighten5': '#efebe9', 'lighten4': '#d7ccc8', 'lighten3': '#bcaaa4', 'lighten2': '#a1887f', 'lighten1': '#8d6e63', 'darken1': '#6d4c41', 'darken2': '#5d4037', 'darken3': '#4e342e', 'darken4': '#3e2723' }, 'blueGrey': { 'base': '#607d8b', 'lighten5': '#eceff1', 'lighten4': '#cfd8dc', 'lighten3': '#b0bec5', 'lighten2': '#90a4ae', 'lighten1': '#78909c', 'darken1': '#546e7a', 'darken2': '#455a64', 'darken3': '#37474f', 'darken4': '#263238' }, 'grey': { 'base': '#9e9e9e', 'lighten5': '#fafafa', 'lighten4': '#f5f5f5', 'lighten3': '#eeeeee', 'lighten2': '#e0e0e0', 'lighten1': '#bdbdbd', 'darken1': '#757575', 'darken2': '#616161', 'darken3': '#424242', 'darken4': '#212121' }, 'shades': { 'black': '#000000', 'white': '#ffffff', 'transparent': 'transparent' } } }
+
+
+function splitKey(c) {
+
+    //split, 'blue-grey lighten-5' => ['blue-grey', 'lighten-5']
+    let cc = split(c, ' ')
+
+    //check
+    if (size(cc) === 1) {
+        cc[1] = null
+    }
+
+    return cc
+}
+
+
+function getKey0(c) {
+    //'blue-grey' => 'blueGrey'
+    let key0 = c.trim()
+    key0 = camelCase(key0)
+    return key0
+}
+
+
+function getKey1(c) {
+    //'lighten-5' => 'lighten5', null => 'base'
+    if (!isestr(c)) {
+        c = 'base'
+    }
+    let key1 = c.trim()
+    key1 = key1.replace('-', '').trim()
+    return key1
+}
+
+
+function getHexColor(key0, key1, def) {
+    let hex = get(colors, `default.${key0}.${key1}`, null)
+    if (hex === null) {
+        hex = def
+    }
+    return hex
+}
+
+
+/**
+ * 轉換vuetify color為hex顏色字串
+ *
+ * @param {String} color 輸入vuetify顏色字串
+ * @returns {String} hex 回傳hex顏色字串
+ */
+function color2hex(color) {
+
+    //speed
+    if (color === 'white') {
+        return '#fff'
+    }
+    else if (color === 'black') {
+        return '#000'
+    }
+    else if (color === 'transparent') {
+        return 'rgba(0,0,0,0)'
+    }
+
+    //splitKey
+    let cc = splitKey(color)
+
+    //key0, key1
+    let key0 = getKey0(cc[0])
+    let key1 = getKey1(cc[1])
+
+    //hex
+    let hex = getHexColor(key0, key1, color)
+    //console.log('color', color, hex)
+
+    return hex
+}
+
+
+export default color2hex

package/src/main.js

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

package/src/plugins/vuetify.mjs

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+//import Vuetify from 'vuetify'
+//import 'vuetify/dist/vuetify.min.css'
+
+Vue.use(Vuetify)
+
+let opt = {
+    icons: {
+        iconfont: 'mdiSvg',
+    },
+}
+export default new Vuetify(opt)

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,4 @@
+import cleanFolder from 'w-package-tools/src/cleanFolder.mjs'
+
+
+cleanFolder('docs')

package/toolg/cvCasename.mjs

@@ -0,0 +1,90 @@
+import map from 'lodash/map'
+import trim from 'lodash/trim'
+import filter from 'lodash/filter'
+import toUpper from 'lodash/toUpper'
+import split from 'lodash/split'
+import size from 'lodash/size'
+import join from 'lodash/join'
+
+
+/**
+ * 將字串破壞性壓縮，縮短用
+ *
+ * @param {String} v 輸入原始字串
+ * @returns {String} 回傳破壞性字串
+ */
+function seEncode(str) {
+
+    //ks, 1~27
+    let ks = '_abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+
+    //toUpper, 轉大寫
+    str = toUpper(str)
+
+    //filter, 只保留英文字
+    str = filter(str, function(v) {
+        return v.match(/[A-Z]/)
+    })
+
+    //fks, 計算各字元編號
+    let fks = map(str, function(v) {
+        return v.charCodeAt(0) - 64 //1~27
+    })
+
+    //c, 重新編碼, 2字元index相加後, 再查ks得新字元
+    let c = ''
+    for (let i = 0; i < fks.length; i += 2) {
+
+        //k1
+        let k1 = fks[i]
+
+        //k2
+        let k2 = 0
+        let j = i + 1
+        if (j < fks.length) {
+            k2 = fks[j]
+        }
+
+        //k
+        c += ks[k1 + k2]
+
+    }
+
+    return c
+}
+
+
+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,55 @@
+import rollupVueToHtml from 'w-package-tools/src/rollupVueToHtml.mjs'
+
+
+let opt = {
+    title: `w-component-vue`,
+    head: `
+
+    <!-- rollupVueToHtml已自動添加@babel/polyfill與vue -->
+
+    <!-- vuetify -->
+    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.5.1/dist/vuetify.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.1/dist/vuetify.min.js"></script>
+
+    <!-- fontawesome -->
+    <link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet">
+
+    <!-- mdi, 各組件使用mdi/js故不需引用 -->
+    <link _href="https://cdn.jsdelivr.net/npm/@mdi/font/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">
+
+    <!-- data -->
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataAAPL.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataUSD2EUR.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataTemperature.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataHousePriceArea.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataFlare.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataRain.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataRainClip.js"></script>
+    <script>
+        //save in window
+        window.dataAAPL=dataAAPL
+        window.dataUSD2EUR=dataUSD2EUR
+        window.dataTemperature=dataTemperature
+        window.dataHousePriceArea=dataHousePriceArea
+        window.dataFlare=dataFlare
+        window.dataRain=dataRain
+        window.dataRainClip=dataRainClip
+    </script>
+
+    `,
+    newVue: `vuetify: new Vuetify(),`,
+    globals: {
+        'vue': 'Vue', //因動態加載組件, 現統一使用window內Vue, 故此處不打包進來, 若vue-cli則自動將Vue關聯至window內的Vue
+        'vuetify': 'vuetify',
+    },
+    external: [
+        'vue',
+        'vuetify',
+    ],
+}
+rollupVueToHtml('./src/App.vue', './docs/examples/app.html', opt)
+

package/toolg/gDistRollupComps.mjs

@@ -0,0 +1,23 @@
+import _ from 'lodash'
+import rollupFiles from 'w-package-tools/src/rollupFiles.mjs'
+
+
+let fdSrc = './src/components/'
+let fdTar = './dist'
+
+
+rollupFiles({
+    fns: 'WComponentVue.vue',
+    fdSrc,
+    fdTar,
+    nameDistType: 'kebabCase',
+    globals: {
+        'vue': 'Vue', //因動態加載組件, 現統一使用window內Vue, 故此處不打包進來, 若vue-cli則自動將Vue關聯至window內的Vue
+        'vuetify': 'vuetify',
+    },
+    external: [
+        'vue',
+        'vuetify',
+    ],
+})
+

package/toolg/gDocExams.mjs

@@ -0,0 +1,47 @@
+import fs from 'fs'
+import _ from 'lodash'
+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-component-vue@${pks.version}/dist/w-component-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-component-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,279 @@
+import fs from 'fs'
+import cheerio from 'cheerio'
+import _ from 'lodash'
+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-component-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-component-vue`,
+        head: `
+    
+        <!-- extractHtml已自動添加@babel/polyfill與vue -->
+    
+        <!-- vuetify -->
+        <link href="https://cdn.jsdelivr.net/npm/vuetify@2.5.1/dist/vuetify.min.css" rel="stylesheet">
+        <script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.1/dist/vuetify.min.js"></script>
+    
+        <!-- fontawesome -->
+        <link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet">
+    
+        <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+        <link href="https://cdn.jsdelivr.net/npm/@mdi/font/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">
+    
+        <!-- data -->
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataAAPL.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataUSD2EUR.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataTemperature.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataHousePriceArea.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataFlare.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataRain.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataRainClip.js"></script>
+        <script>
+            //save in window
+            window.dataAAPL=dataAAPL
+            window.dataUSD2EUR=dataUSD2EUR
+            window.dataTemperature=dataTemperature
+            window.dataHousePriceArea=dataHousePriceArea
+            window.dataFlare=dataFlare
+            window.dataRain=dataRain
+            window.dataRainClip=dataRainClip
+        </script>
+    
+        <!-- w-component-vue -->
+        <script src="../dist/w-component-vue.umd.js"></script>
+    
+        <style>
+            .v-application--wrap {
+                /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+                width: 100vw;
+                max-width: 100vw;
+                font-family: inherit;
+                background-color: #fff;
+            }
+            .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 {
+                margin: 0px;
+                padding: 0px 0px 20px 0px;
+                font-size: 2.5rem;
+            }
+            .bk {
+                vertical-align: top;
+                margin: 10px 0px 0px 0px;
+                padding: 0px 0px 60px 0px;
+            }
+            @media screen and (min-width:1000px){ /* 寬版 */
+                .bk {
+                    display: inline-block;
+                    margin: 0px 80px 0px 0px;
+                }
+                .dz {
+                    width: 400px;
+                }
+            }
+        </style>
+    
+        `,
+        appTag: `v-app`,
+        appStyle: `font-family:inherit; padding:0px 30px;`,
+        appTmp: getAppTmp(),
+        installVue: `Vue.use(window['w-component-vue'])`,
+        newVue: `vuetify: new Vuetify()`,
+        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
+    })
+    //console.log(ltfs)
+
+    //extractAppZone
+    _.each(ltfs, (v) => {
+        let fn = fdSrc + v
+        console.log('extracting: ' + fn)
+        extractAppZone(fn)
+    })
+
+}
+main()