npm - w-component-vue - Versions diffs - 2.4.63 → 2.4.65 - Mend

w-component-vue 2.4.63 → 2.4.65

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 (1508) hide show

package/docs/examples/w-explorer_slot list-item-sub.html ADDED Viewed

@@ -0,0 +1,734 @@
+<!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-component-vue</title>
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+    <!-- 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"
+    />
+    <!-- data -->
+    <script src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataAAPL.js"></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataHousePriceArea.js"
+    ></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataFlare.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataRain.js"></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataRainClip.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataCivilSoilCodeIcon.js"
+    ></script>
+    <!-- w-component-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.65/dist/w-component-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;
+    }
+  }
+  .cpitem {
+    transition: all 0.3s;
+    padding: 5px 15px;
+    cursor: pointer;
+  }
+  .cpitem-white {
+    background: #fff;
+  }
+  .cpitem-white:hover {
+    background: #eee;
+  }
+  .cpitem-black {
+    background: #333;
+  }
+  .cpitem-black:hover {
+    background: #555;
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" class="bkh" style="font-family:inherit;">
+        <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')"
+            >w-explorer</span>
+        </div>
+        <div class="bk" v-if="filterCaseCat==='slot'">
+            <div class="item">slot list-item-sub</div>
+            <w-explorer
+                style="width:600px; height:250px;"
+                :items="WExplorer.fps"
+                @click="ckItem"
+            >
+                <template v-slot:list-item-sub="props">
+                    <div
+                        :style="`transition:all 0.3s; padding:3px; background:${props.isHover?'#e2e2e2':'#fbf4f2'}; border-bottom:1px solid #ddd; font-size:0.7rem; line-height:0.7rem; display:flex; align-items:center; justify-content:flex-end;`"
+                        v-if="props.item.data._type==='file'"
+                    >
+                        <div
+                            style="padding:0px 5px; display:flex; align-items:center;"
+                        >
+                            <div
+                                style="padding-right:3px; color:#888;"
+                            >priority:</div>
+                            <div
+                                style="width:20px; color:#2e31af; text-align:left; cursor:pointer;"
+                                @click="ckItem('text-priority')"
+                            >{{props.item.data.data.priority}}</div>
+                        </div>
+                        <div
+                            style="padding:0px 5px; color:#6fb57e; cursor:pointer;"
+                            @click="ckItem('icon-shield')"
+                        >
+                            <i class="fas fa-shield-virus"></i>
+                        </div>
+                        <div
+                            style="padding:0px 5px; color:#b894be; cursor:pointer;"
+                            @click="ckItem('icon-dice')"
+                        >
+                            <i class="fas fa-dice"></i>
+                        </div>
+                        <div
+                            style="padding:0px 5px; color:#c79f6b; cursor:pointer;"
+                            @click="ckItem('icon-wired')"
+                        >
+                            <i class="fas fa-network-wired"></i>
+                        </div>
+                    </div>
+                </template>
+            </w-explorer>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-component-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    data: function() {
+      return {
+        filterCaseCat: "basic", //當前選中分類, 預設第一類
+        filterCaseCatActive: { name: "basic" }, //WListHorizontal 的 itemActive
+        filterCaseCats: [
+          { name: "basic" },
+          { name: "tree" },
+          { name: "path" },
+          { name: "btn" },
+          { name: "list" },
+          { name: "behavior" },
+          { name: "toggle" },
+          { name: "slot" },
+          { name: "draggable" },
+          { name: "operatable" },
+          { name: "editor" }
+        ],
+        WExplorer: {
+          bShowTree: true,
+          treeWidth: 275,
+          funSortTree: null,
+          fps: [
+            {
+              type: "file",
+              path: "/Applications/Calendar.app",
+              size: "256.5mb",
+              tester: "Perter",
+              priority: "L4"
+            },
+            {
+              type: "file",
+              path: "/Applications/Chrome.app",
+              size: "496.7mb",
+              tester: "Chloe",
+              priority: "L4"
+            },
+            {
+              type: "file",
+              path: "/Applications/Webstorm.app",
+              size: "128.6mb",
+              tester: "Adrian",
+              priority: "L4"
+            },
+            {
+              type: "folder",
+              path: "/Applications/Webs",
+              size: "",
+              tester: "",
+              priority: ""
+            },
+            {
+              type: "file",
+              path: "/Applications/Webs/web_infors.json",
+              size: "92.2kb",
+              tester: "Carl",
+              priority: "L3"
+            },
+            {
+              type: "file",
+              path: "/Applications/Webs/Shareco/shareco-s1.txt",
+              size: "5.4kb",
+              tester: "Charissa",
+              priority: "L4"
+            },
+            {
+              type: "file",
+              path: "/Applications/Webs/Shareco/shareco-s2.txt",
+              size: "7.3kb",
+              tester: "Dexter",
+              priority: "L4"
+            },
+            {
+              type: "folder",
+              path: "/Applications/Webs/Guess",
+              size: "",
+              tester: "",
+              priority: ""
+            },
+            {
+              type: "file",
+              path: "/Applications/Webs/Guess/guess-s3.txt",
+              size: "21.6kb",
+              tester: "Ashley",
+              priority: "L4"
+            },
+            {
+              type: "file",
+              path: "/Applications/Webs/Guess/guess-s4.txt",
+              size: "82.7kb",
+              tester: "Dwight",
+              priority: "L4"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/Regulator.ini",
+              size: "2.5kb",
+              tester: "Laura",
+              priority: "L5"
+            },
+            {
+              type: "file",
+              path: "/Applications/Systems/Regulator/vers/1-settings.st",
+              size: "56.2kb",
+              tester: "Mavis",
+              priority: "L5"
+            },
+            {
+              type: "file",
+              path: "/Applications/Systems/Regulator/vers/2-settings.st",
+              size: "87.2kb",
+              tester: "Geraint",
+              priority: "L5"
+            },
+            {
+              type: "file",
+              path: "/Applications/Systems/Regulator/vers/3-settings.st",
+              size: "224.2kb",
+              tester: "Penelope",
+              priority: "L5"
+            },
+            {
+              type: "file",
+              path: "/Applications/Systems/Regulator/vers/10-settings.st",
+              size: "72.7kb",
+              tester: "Heman",
+              priority: "L5"
+            },
+            {
+              type: "file",
+              path: "/Applications/Systems/Regulator/vers/111-settings.st",
+              size: "91.2kb",
+              tester: "Tessa",
+              priority: "L5"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device1.iso",
+              size: "1.2gb",
+              tester: "Una",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device2.iso",
+              size: "1.3gb",
+              tester: "Jasper",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device3.iso",
+              size: "1.1gb",
+              tester: "Violet",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device4.iso",
+              size: "1.7gb",
+              tester: "Perter",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device5.iso",
+              size: "2.0gb",
+              tester: "Winifred",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device6.iso",
+              size: "1.7gb",
+              tester: "Lance",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device7.iso",
+              size: "2.1gb",
+              tester: "Marvin",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device8.iso",
+              size: "1.5gb",
+              tester: "Nat",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device9.iso",
+              size: "1.8gb",
+              tester: "Nahum",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device10.iso",
+              size: "1.6gb",
+              tester: "Nicholas",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device11.iso",
+              size: "1.2gb",
+              tester: "Ralph",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device12.iso",
+              size: "2.2gb",
+              tester: "Rudolph",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device13.iso",
+              size: "1.9gb",
+              tester: "Rory",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device14.iso",
+              size: "1.2gb",
+              tester: "Jacqueline",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device15.iso",
+              size: "1.7gb",
+              tester: "Kathy",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device16.iso",
+              size: "1.1gb",
+              tester: "Melinda",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device17.iso",
+              size: "1.9gb",
+              tester: "Sharon",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device18.iso",
+              size: "1.2gb",
+              tester: "Philippa",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device19.iso",
+              size: "1.5gb",
+              tester: "Thelma",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Applications//Systems/device20.iso",
+              size: "1.4gb",
+              tester: "Stewart",
+              priority: "L2"
+            },
+            {
+              type: "file",
+              path: "/Documents/design-simple/src/index.txt",
+              size: "6.7kb",
+              tester: "Steve",
+              priority: "L1"
+            },
+            {
+              type: "file",
+              path: "/Documents/design-simple/src/bootstrap.txt",
+              size: "251.7kb",
+              tester: "Theobald",
+              priority: "L1"
+            },
+            {
+              type: "file",
+              path: "/Documents/design-material/src/btn.txt",
+              size: "241.2b",
+              tester: "Padraic",
+              priority: "L1"
+            },
+            {
+              type: "file",
+              path: "/Documents/design-material/src/card.txt",
+              size: "4.7kb",
+              tester: "Napoleon",
+              priority: "L1"
+            },
+            {
+              type: "file",
+              path: "/Documents/design-material/src/window.txt",
+              size: "7.2kb",
+              tester: "Lionel",
+              priority: "L1"
+            },
+            {
+              type: "file",
+              path: "/Downloads/October.pdf",
+              size: "16.9kb",
+              tester: "Olive",
+              priority: "L1"
+            },
+            {
+              type: "file",
+              path: "/Downloads/November.pdf",
+              size: "94.5kb",
+              tester: "Molly",
+              priority: "L1"
+            },
+            {
+              type: "file",
+              path: "/Downloads/Tutorial.html",
+              size: "22.7kb",
+              tester: "Melanie",
+              priority: "L1"
+            },
+            {
+              type: "folder",
+              path: "/Uploads",
+              size: "",
+              tester: "",
+              priority: ""
+            },
+            {
+              type: "file",
+              path: "/Videos/Tutorials/Basic layouts.mp4",
+              size: "862.7mb",
+              tester: "Lindsay",
+              priority: "L3"
+            },
+            {
+              type: "file",
+              path: "/Videos/Tutorials/Advanced techniques.mp4",
+              size: "626.5mb",
+              tester: "Jarvis",
+              priority: "L3"
+            },
+            {
+              type: "file",
+              path: "/Videos/Tutorials/All about app.mp4",
+              size: "796.2mb",
+              tester: "Gaston",
+              priority: "L3"
+            },
+            {
+              type: "file",
+              path: "/Videos/Intro.mov",
+              size: "852.8mb",
+              tester: "Dermot",
+              priority: "L3"
+            },
+            {
+              type: "file",
+              path: "/Videos/Conference introduction.avi",
+              size: "676.7mb",
+              tester: "Hector",
+              priority: "L3"
+            },
+            {
+              type: "folder",
+              path: "/Videos/Empty",
+              size: "",
+              tester: "",
+              priority: ""
+            }
+          ]
+        },
+        actions: [
+          {
+            mode: "eleclick",
+            selector: 'span[class="v-chip__content"]'
+          }
+        ]
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {
+      ckItem: function(msg) {
+        console.log("ckItem", msg);
+      },
+      ckFolder: function(msg) {
+        console.log("ckFolder", msg);
+      },
+      ckFile: function(msg) {
+        console.log("ckFile", msg);
+      },
+      toggleTreeFoldersByFun: function(ind, toUnfolding) {
+        console.log("toggleTreeFoldersByFun", ind, toUnfolding);
+        let vo = this;
+        //toggleTreeFoldersByFun
+        vo.$refs.ref_toggleTreeFoldersByFun.toggleTreeFoldersByFun(rows => {
+          console.log("toggleTreeFoldersByFun rows", rows);
+          return {
+            row: rows[ind],
+            toUnfolding
+          };
+        });
+      },
+      toggleTreeFoldersAll: function(toUnfolding, toLevel) {
+        console.log("toggleTreeFoldersAll", toUnfolding, toLevel);
+        let vo = this;
+        //toggleTreeFoldersAll
+        vo.$refs.ref_toggleTreeFoldersAll.toggleTreeFoldersAll(
+          toUnfolding,
+          toLevel
+        );
+      },
+      ckTriggerClickTreeFolderById: function(treeItemId) {
+        console.log("ckTriggerClickTreeFolderById", treeItemId);
+        let vo = this;
+        //triggerClickTreeFolderById
+        vo.$refs.we_triggerClickTreeFolderById.triggerClickTreeFolderById(
+          treeItemId
+        );
+      },
+      ckTriggerClickTreeFolderByFun: function(text) {
+        console.log("ckTriggerClickTreeFolderByFun", text);
+        let vo = this;
+        //triggerClickTreeFolderByFun
+        vo.$refs.we_triggerClickTreeFolderByFun.triggerClickTreeFolderByFun(
+          msg => {
+            console.log("cb msg", msg);
+            //find and triggerClickTreeFolderById
+            for (let k = 0; k < msg.treeItemsSpread.length; k++) {
+              let v = msg.treeItemsSpread[k];
+              // console.log(v)
+              if (v.text === text) {
+                console.log("find and click", v);
+                // vo.$refs.we_triggerClickTreeFolderByFun.triggerClickTreeFolderById(v.id)
+                // break
+                return v;
+              }
+            }
+            return null;
+          }
+        );
+      },
+      ckFunSortTree: function(m) {
+        console.log("ckFunSortTree", m);
+        let vo = this;
+        //fun
+        let fun = rs => {
+          console.log("rs", rs);
+          rs.reverse();
+          return rs;
+        };
+        //funSortTree
+        if (m === "default") {
+          vo.WExplorer.funSortTree = null;
+        } else {
+          vo.WExplorer.funSortTree = fun;
+        }
+      },
+      getFolderInfor: function(props) {
+        console.log("getFolderInfor", props);
+        let kfd = 0;
+        let kfl = 0;
+        for (let i = 0; i < props.items.length; i++) {
+          let v = props.items[i];
+          let t = v.data._type;
+          if (t === "folder") {
+            kfd++;
+          } else if (t === "file") {
+            kfl++;
+          }
+        }
+        return `There are ${kfd} folder(s) and ${kfl} file(s) in this folder`;
+      },
+      clickOperateItem: function(msg) {
+        console.log("clickOperateItem", msg);
+        //fun, 僅處理並回傳新項目, 不處理其他項目
+        let fun = function() {
+          return new Promise(function(resolve, reject) {
+            let id = Math.floor(Math.random() * 1000);
+            let text = "new-" + id;
+            let dataNew = {
+              // id: '',
+              text,
+              type: "folder",
+              // path: '',
+              size: "test",
+              tester: "test",
+              priority: "test"
+            };
+            resolve(dataNew);
+          });
+        };
+        //targetInd
+        let targetInd = msg.rowItem.index;
+        //operateItem
+        msg.operateItem(targetInd, msg.opItem.key, fun);
+      },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      }
+    }
+  });
+    </script>
+</body>
+</html>