npm - w-flow-vue - Versions diffs - 1.0.0 - Mend

w-flow-vue 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/.editorconfig +9 -0
package/.eslintignore +3 -0
package/.eslintrc.js +55 -0
package/.jsdoc +25 -0
package/AGENT.md +223 -0
package/LICENSE +21 -0
package/README.md +37 -0
package/SECURITY.md +5 -0
package/babel.config.js +16 -0
package/dist/w-flow-vue.umd.js +15 -0
package/dist/w-flow-vue.umd.js.map +1 -0
package/docs/components_WFlowVue.vue.html +1214 -0
package/docs/examples/app.html +62 -0
package/docs/examples/app.umd.js +20 -0
package/docs/examples/app.umd.js.map +1 -0
package/docs/examples/ex-AppBasic.html +440 -0
package/docs/examples/ex-AppConnectivity.html +131 -0
package/docs/fonts/Montserrat/Montserrat-Bold.eot +0 -0
package/docs/fonts/Montserrat/Montserrat-Bold.ttf +0 -0
package/docs/fonts/Montserrat/Montserrat-Bold.woff +0 -0
package/docs/fonts/Montserrat/Montserrat-Bold.woff2 +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.eot +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.woff +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.woff2 +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.eot +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +978 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.ttf +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff2 +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.eot +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1049 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.ttf +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff2 +0 -0
package/docs/global.html +1919 -0
package/docs/index.html +84 -0
package/docs/js_defaults.mjs.html +105 -0
package/docs/js_edge-path.mjs.html +237 -0
package/docs/js_geometry.mjs.html +298 -0
package/docs/js_graph.mjs.html +103 -0
package/docs/js_step-routing.mjs.html +346 -0
package/docs/module-WFlowVue.html +2790 -0
package/docs/scripts/collapse.js +39 -0
package/docs/scripts/commonNav.js +28 -0
package/docs/scripts/linenumber.js +25 -0
package/docs/scripts/nav.js +12 -0
package/docs/scripts/polyfill.js +4 -0
package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/scripts/prettify/lang-css.js +2 -0
package/docs/scripts/prettify/prettify.js +28 -0
package/docs/scripts/search.js +99 -0
package/docs/styles/jsdoc.css +776 -0
package/docs/styles/prettify.css +80 -0
package/jest.config.js +20 -0
package/package.json +80 -0
package/public/index.html +38 -0
package/script.txt +22 -0
package/src/App.vue +326 -0
package/src/AppBasic.vue +125 -0
package/src/AppConnectivity.vue +186 -0
package/src/components/WFlowVue.vue +1142 -0
package/src/components/canvas/BackgroundLayer.vue +78 -0
package/src/components/canvas/FlowCanvas.vue +64 -0
package/src/components/canvas/SelectionBox.vue +36 -0
package/src/components/canvas/ViewportTransform.vue +35 -0
package/src/components/edges/ConnectionLine.vue +65 -0
package/src/components/edges/EdgeMarkerDefs.vue +76 -0
package/src/components/edges/EdgeRenderer.vue +120 -0
package/src/components/edges/EdgeWrapper.vue +379 -0
package/src/components/nodes/DefaultNode.vue +276 -0
package/src/components/nodes/Handle.vue +101 -0
package/src/components/nodes/InputNode.vue +47 -0
package/src/components/nodes/NodeBody.vue +103 -0
package/src/components/nodes/NodeFace.vue +128 -0
package/src/components/nodes/NodeRenderer.vue +95 -0
package/src/components/nodes/NodeWrapper.vue +475 -0
package/src/components/nodes/OutputNode.vue +47 -0
package/src/components/ui/ConnSettingsForm.vue +158 -0
package/src/components/ui/Controls.vue +83 -0
package/src/components/ui/NodeSettingsForm.vue +185 -0
package/src/js/defaults.mjs +33 -0
package/src/js/edge-path.mjs +165 -0
package/src/js/geometry.mjs +226 -0
package/src/js/graph.mjs +31 -0
package/src/js/step-routing.mjs +274 -0
package/src/main.js +22 -0
package/test/WFlowVue-features.test.mjs +760 -0
package/test/WFlowVue.test.mjs +421 -0
package/test/components-canvas.test.mjs +102 -0
package/test/components-edge.test.mjs +147 -0
package/test/components-node.test.mjs +174 -0
package/test/components-ui.test.mjs +69 -0
package/test/defaults.test.mjs +86 -0
package/test/edge-path.test.mjs +102 -0
package/test/generate-routing-snapshots.mjs +77 -0
package/test/generate-visual-baselines.mjs +206 -0
package/test/geometry.test.mjs +236 -0
package/test/graph.test.mjs +72 -0
package/test/jsons/routing-snapshots.json +24994 -0
package/test/pics/_check2.png +0 -0
package/test/pics/_check3.png +0 -0
package/test/pics/_check4.png +0 -0
package/test/pics/_check5.png +0 -0
package/test/pics/_v1.png +0 -0
package/test/pics/_v2.png +0 -0
package/test/pics/_v3.png +0 -0
package/test/pics/_v4.png +0 -0
package/test/pics/_v5.png +0 -0
package/test/pics/_v6.png +0 -0
package/test/pics/_v7.png +0 -0
package/test/pics/vb-edge-hovered.png +0 -0
package/test/pics/vb-edges-normal.png +0 -0
package/test/pics/vb-locked-edge-hovered.png +0 -0
package/test/pics/vb-locked-node-hovered.png +0 -0
package/test/pics/vb-locked-node-selected.png +0 -0
package/test/pics/vb-locked-overview.png +0 -0
package/test/pics/vb-node-1.png +0 -0
package/test/pics/vb-node-10.png +0 -0
package/test/pics/vb-node-11.png +0 -0
package/test/pics/vb-node-12.png +0 -0
package/test/pics/vb-node-2.png +0 -0
package/test/pics/vb-node-3.png +0 -0
package/test/pics/vb-node-4.png +0 -0
package/test/pics/vb-node-5.png +0 -0
package/test/pics/vb-node-6.png +0 -0
package/test/pics/vb-node-7.png +0 -0
package/test/pics/vb-node-8.png +0 -0
package/test/pics/vb-node-9.png +0 -0
package/test/pics/vb-node-hovered.png +0 -0
package/test/pics/vb-node-selected.png +0 -0
package/test/pics/vb-overview.png +0 -0
package/test/step-routing-connectivity.test.mjs +78 -0
package/test/step-routing.test.mjs +88 -0
package/test/visual-regression.test.mjs +274 -0
package/toolg/addVersion.mjs +4 -0
package/toolg/cleanFolder.mjs +4 -0
package/toolg/gDistApp.mjs +34 -0
package/toolg/gDistRollupComps.mjs +22 -0
package/toolg/gDocExams.mjs +47 -0
package/toolg/gExtractHtml.mjs +179 -0
package/toolg/modifyReadme.mjs +4 -0
package/vue.config.js +9 -0
package/vue2/344/271/213foreignObject/345/205/247/346/270/262/346/237/223/345/225/217/351/241/214/350/210/207/344/277/256/346/255/243.md +151 -0

package/docs/styles/prettify.css ADDED Viewed

@@ -0,0 +1,80 @@
+.pln {
+  color: #ddd;
+}
+/* string content */
+.str {
+  color: #61ce3c;
+}
+/* a keyword */
+.kwd {
+  color: #fbde2d;
+}
+/* a comment */
+.com {
+  color: #aeaeae;
+}
+/* a type name */
+.typ {
+  color: #8da6ce;
+}
+/* a literal value */
+.lit {
+  color: #fbde2d;
+}
+/* punctuation */
+.pun {
+  color: #ddd;
+}
+/* lisp open bracket */
+.opn {
+  color: #000000;
+}
+/* lisp close bracket */
+.clo {
+  color: #000000;
+}
+/* a markup tag name */
+.tag {
+  color: #8da6ce;
+}
+/* a markup attribute name */
+.atn {
+  color: #fbde2d;
+}
+/* a markup attribute value */
+.atv {
+  color: #ddd;
+}
+/* a declaration */
+.dec {
+  color: #EF5050;
+}
+/* a variable name */
+.var {
+  color: #c82829;
+}
+/* a function name */
+.fun {
+  color: #4271ae;
+}
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-bottom: 2px;
+}

package/jest.config.js ADDED Viewed

@@ -0,0 +1,20 @@
+module.exports = {
+    testEnvironment: 'jsdom',
+    roots: ['<rootDir>/test'],
+    testMatch: ['**/*.test.mjs'],
+    testPathIgnorePatterns: ['/node_modules/', 'visual-regression\\.test\\.mjs', 'generate-visual-baselines\\.mjs'],
+    moduleFileExtensions: ['mjs', 'js', 'json', 'vue'],
+    transform: {
+        '^.+\\.vue$': '@vue/vue2-jest',
+        '^.+\\.m?js$': 'babel-jest',
+    },
+    transformIgnorePatterns: [
+        'node_modules/(?!(w-component-vue|wsemi|w-jsonview-tree|lodash-es|@popperjs|@mdi)/)',
+    ],
+    moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+    },
+    collectCoverageFrom: [
+        'src/**/*.{mjs,vue}',
+    ],
+}

package/package.json ADDED Viewed

@@ -0,0 +1,80 @@
+{
+  "name": "w-flow-vue",
+  "version": "1.0.0",
+  "main": "dist/w-flow-vue.umd.js",
+  "dependencies": {
+    "@mdi/js": "^7.4.47",
+    "lodash-es": "^4.18.1",
+    "w-component-vue": "^2.4.49",
+    "w-jsonview-tree": "^1.0.31",
+    "wsemi": "^1.8.45"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/test-utils": "^1.3.6",
+    "@vue/vue2-jest": "^29.2.6",
+    "babel-jest": "^29.7.0",
+    "cheerio": "^1.2.0",
+    "eslint": "^8.37.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.10.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "playwright": "^1.59.1",
+    "pngjs": "^7.0.0",
+    "vue": "^2.6.14",
+    "w-package-tools": "^1.1.5"
+  },
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test": "jest",
+    "test:visual": "node test/visual-regression.test.mjs",
+    "test:visual:update": "node test/generate-visual-baselines.mjs",
+    "lint": "vue-cli-service lint",
+    "deploy": "gh-pages -d docs"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yuda-lyu/w-flow-vue.git"
+  },
+  "keywords": [
+    "component",
+    "vue",
+    "three.js",
+    "model",
+    "stl",
+    "3d"
+  ],
+  "author": "yuda-lyu(semisphere)",
+  "license": "MIT"
+}

package/public/index.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>w-flow-vue</title>
+        <!-- @vue-cli動添加@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 font -->
+        <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">
+        <!-- lodash -->
+        <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
+        <!-- wsemi -->
+        <script src="https://cdn.jsdelivr.net/npm/wsemi/dist/wsemi.umd.min.js"></script>
+    </head>
+    <body style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;">
+        <noscript>
+            <strong
+                >We're sorry but w-flow-vue doesn't work properly without
+                JavaScript enabled. Please enable it to continue.</strong
+            >
+        </noscript>
+        <div id="app"></div>
+        <!-- built files will be auto injected -->
+    </body>
+</html>

package/script.txt ADDED Viewed

@@ -0,0 +1,22 @@
+#node toolg/addVersion.mjs
+node toolg/modifyReadme.mjs
+node toolg/cleanFolder.mjs
+./node_modules/.bin/jsdoc -c .jsdoc
+node toolg/gDistApp.mjs
+node toolg/gExtractHtml.mjs
+node toolg/gDocExams.mjs
+node toolg/gDistRollupComps.mjs
+git add .  -A
+git commit -m 'modify: '
+git push origin master:master
+npm run deploy
+#npm test
+#npm publish

package/src/App.vue ADDED Viewed

@@ -0,0 +1,326 @@
+<template>
+    <div
+        style=""
+        :changeMenus="changeMenus"
+    >
+        <template v-if="!isNarrow">
+            <a href="https://github.com/yuda-lyu/w-flow-vue" class="github-corner" style="position:fixed; top:0; right:0; border:0; z-index:10000;" aria-label="View source on GitHub" target="_blank" rel="noreferrer noopener">
+                <svg width="80" height="80" viewBox="0 0 250 250" style="fill:rgba(0,0,0,0.25); color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
+            </a>
+        </template>
+        <div style="background:#f5f5f5;">
+            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL1 && cmpsL1.length>0">
+                <WListHorizontal
+                    :items="cmpsL1"
+                    :itemActive.sync="cmpP1"
+                    :itemBackgroundColor="'transparent'"
+                    :itemBackgroundColorHover="'#eee'"
+                    :itemBackgroundColorActive="'#eee'"
+                    :keyText="'name'"
+                    :paddingStyle="{v:12,h:20}"
+                    @update:itemActive="(v)=>{indP3=0;indP2=0;indP1=getInd(v,cmpsL1)}"
+                >
+                    <template v-slot:item="props">
+                        <div style="">
+                            {{props.item.name}}
+                        </div>
+                    </template>
+                </WListHorizontal>
+                <div style="height:1px; background:#ddd;"></div>
+            </div>
+            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL2 && cmpsL2.length>0">
+                <div style="height:3px; background:#fff;"></div>
+                <WListHorizontal
+                    :items="cmpsL2"
+                    :itemActive.sync="cmpP2"
+                    :itemBackgroundColor="'transparent'"
+                    :itemBackgroundColorHover="'#eee'"
+                    :itemBackgroundColorActive="'#eee'"
+                    :keyText="'name'"
+                    :paddingStyle="{v:12,h:20}"
+                    @update:itemActive="(v)=>{indP3=0;indP2=getInd(v,cmpsL2)}"
+                >
+                    <template v-slot:item="props">
+                        <div style="">
+                            {{props.item.name}}
+                        </div>
+                    </template>
+                </WListHorizontal>
+                <div style="height:1px; background:#ddd;"></div>
+            </div>
+            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL3 && cmpsL3.length>0">
+                <div style="height:3px; background:#fff;"></div>
+                <WListHorizontal
+                    :items="cmpsL3"
+                    :itemActive.sync="cmpP3"
+                    :itemBackgroundColor="'transparent'"
+                    :itemBackgroundColorHover="'#eee'"
+                    :itemBackgroundColorActive="'#eee'"
+                    :keyText="'name'"
+                    :paddingStyle="{v:12,h:20}"
+                    @update:itemActive="(v)=>{indP3=getInd(v,cmpsL3)}"
+                >
+                    <template v-slot:item="props">
+                        <div style="">
+                            {{props.item.name}}
+                        </div>
+                    </template>
+                </WListHorizontal>
+                <div style="height:1px; background:#ddd;"></div>
+            </div>
+        </div>
+        <div class="bkh">
+            <AppBasic v-if="cmpPick==='size'"></AppBasic>
+            <AppConnectivity v-if="cmpPick==='connectivity'"></AppConnectivity>
+        </div>
+    </div>
+</template>
+<script>
+import get from 'lodash-es/get.js'
+import each from 'lodash-es/each.js'
+// import cloneDeep from 'lodash-es/cloneDeep.js'
+import urlParse from 'wsemi/src/urlParse.mjs'
+import WListHorizontal from 'w-component-vue/src/components/WListHorizontal.vue'
+import AppBasic from './AppBasic.vue'
+import AppConnectivity from './AppConnectivity.vue'
+export default {
+    components: {
+        WListHorizontal,
+        AppBasic,
+        AppConnectivity,
+    },
+    data: function() {
+        let cmps = [
+            {
+                name: 'basic',
+                cmps: [
+                    { name: 'size' },
+                    { name: 'connectivity' },
+                ],
+            },
+        ]
+        return {
+            cmpsL1: cmps,
+            indP1: null,
+            cmpP1: null,
+            cmpsL2: null,
+            indP2: null,
+            cmpP2: null,
+            cmpsL3: null,
+            indP3: null,
+            cmpP3: null,
+            cmpsL4: null,
+            cmpPick: '',
+        }
+    },
+    mounted: function() {
+        let vo = this
+        //default
+        vo.indP1 = 0
+        vo.indP2 = 0
+        vo.indP3 = 0
+        //urlParse, http://localhost:8080/?cmp=w-set-multi
+        let p = urlParse(location.href)
+        // console.log('p', p)
+        //viewPick
+        vo.viewPick(get(p, 'cmp', ''))
+    },
+    computed: {
+        changeMenus: function() {
+            let vo = this
+            vo.modifyMenus(vo.indP1, vo.indP2, vo.indP3)
+            return ''
+        },
+        isNarrow: function() {
+            return window.innerWidth < 1000
+        },
+    },
+    methods: {
+        modifyMenus: function() {
+            let vo = this
+            let cmpPick = ''
+            setTimeout(() => {
+                // console.log('call P1')
+                vo.cmpP1 = get(vo.cmpsL1, vo.indP1, {})
+                vo.cmpsL2 = get(vo.cmpP1, `cmps`, [])
+                let _cmpPick = get(vo.cmpP1, `name`, '')
+                if (_cmpPick) {
+                    cmpPick = _cmpPick
+                }
+                // console.log('vo.cmpP1', cloneDeep(vo.cmpP1))
+                // console.log('vo.cmpsL2', cloneDeep(vo.cmpsL2))
+            }, 50)
+            setTimeout(() => {
+                // console.log('call P2')
+                let cmps = get(vo.cmpP1, `cmps`, [])
+                vo.cmpP2 = get(cmps, vo.indP2, {})
+                vo.cmpsL3 = get(vo.cmpP2, `cmps`, [])
+                let _cmpPick = get(vo.cmpP2, `name`, '')
+                if (_cmpPick) {
+                    cmpPick = _cmpPick
+                }
+                // console.log('vo.cmpP2', cloneDeep(vo.cmpP2))
+                // console.log('vo.cmpsL3', cloneDeep(vo.cmpsL3))
+            }, 100)
+            setTimeout(() => {
+                // console.log('call P3')
+                let cmps = get(vo.cmpP2, `cmps`, [])
+                vo.cmpP3 = get(cmps, vo.indP3, {})
+                vo.cmpsL4 = get(vo.cmpP3, `cmps`, [])
+                let _cmpPick = get(vo.cmpP3, `name`, '')
+                if (_cmpPick) {
+                    cmpPick = _cmpPick
+                }
+                // console.log('vo.cmpP3', cloneDeep(vo.cmpP3))
+                // console.log('vo.cmpsL4', cloneDeep(vo.cmpsL4))
+                //update
+                vo.cmpPick = cmpPick
+                // console.log('cmpPick', cmpPick)
+            }, 150)
+        },
+        getInd: function(item, items) {
+            // let vo = this
+            let ind = -1
+            each(items, (v, k) => {
+                if (item.name === v.name) {
+                    ind = k
+                    return false //跳出
+                }
+            })
+            return ind
+        },
+        viewPick: function(cmpPick) {
+            let vo = this
+            let _cmpPick = cmpPick
+            let r = ''
+            let rs = []
+            let ls = []
+            let pv = (ts) => {
+                each(ts, (v, k) => {
+                    ls.push(k)
+                    //name, _name
+                    let name = get(v, `name`, '')
+                    let _name = name
+                    //cmps
+                    let cmps = get(v, `cmps`, [])
+                    //push
+                    let cls = ls.join('.')
+                    let b = _name === _cmpPick
+                    rs.push({
+                        cls,
+                        name,
+                        b,
+                    })
+                    //save
+                    if (b) {
+                        r = JSON.parse(JSON.stringify(ls))
+                    }
+                    //遞迴pv
+                    if (cmps.length > 0) {
+                        pv(cmps)
+                    }
+                    ls.pop()
+                })
+            }
+            pv(vo.cmpsL1)
+            // console.log('rs', rs)
+            // console.log('r', r)
+            vo.indP1 = get(r, 0, 0)
+            vo.indP2 = get(r, 1, 0)
+            vo.indP3 = get(r, 2, 0)
+        },
+    },
+}
+</script>
+<style>
+.item-link {
+    display: inline-block;
+    margin: 10px 10px 0px 0px;
+    padding: 5px 10px;
+    font-size: 0.8rem;
+    color: #fff;
+    background-color: #443a65;
+    cursor: pointer;
+    text-decoration: none;
+}
+.bkh { /* 寬 */
+    padding:20px;
+}
+@media screen and (max-width:800px){ /* 中 */
+    .bkh {
+        padding:10px;
+    }
+}
+@media screen and (max-width:400px){ /* 窄 */
+    .bkh {
+        padding:5px;
+    }
+}
+.bkp { /* 寬 */
+    padding:0px 20px;
+}
+@media screen and (max-width:800px){ /* 中 */
+    .bkp {
+        padding:0px 10px;
+    }
+}
+@media screen and (max-width:400px){ /* 窄 */
+    .bkp {
+        padding:0px 5px;
+    }
+}
+</style>