npm - w-component-vue - Versions diffs - 2.3.43 → 2.3.45 - Mend

w-component-vue 2.3.43 → 2.3.45

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

package/docs/examples/w-list-expand_string items_slot item-content.html ADDED Viewed

@@ -0,0 +1,362 @@
+<!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 -->
+    <!-- vuetify -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.css"
+        rel="stylesheet"
+    />
+    <script
+        src="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.js"
+    ></script>
+    <!-- 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.2.96/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.22/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataRainClip.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataCivilSoilCodeIcon.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;
+  window.dataCivilSoilCodeIcon = dataCivilSoilCodeIcon;
+    </script>
+    <!-- w-component-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/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: #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;
+    padding: 10px 0px 60px 0px;
+  }
+  @media screen and (min-width: 1000px) {
+    /* 寬版 */
+    .bk {
+      display: inline-block;
+      margin: 0px 80px 0px 0px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" style="font-family:inherit; padding:0px 30px;">
+        <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-list-expand</span>
+        </div>
+        <div class="bk">
+            <div class="item">string items &amp; slot item-content</div>
+            <div style="display:inline-block; border:1px dashed #ddd;">
+                <w-list-expand
+                    style="height:400px; width:250px;"
+                    :items="WListExpand.itemsString"
+                    :item-active.sync="WListExpand.itemsStringActive"
+                >
+                    <template v-slot:item-content="props">
+                        <!-- 使用多層border-left會有無渲染間距, 導致看起來有白線, 暫時使用align-items:stretch呈現 -->
+                        <div
+                            style="display:flex; align-items:stretch; border-bottom:1px solid #eee;"
+                        >
+                            <div style="padding-left:10px; background:#FFE0B2;"></div>
+                            <div style="padding-left:1px; background:#FFB74D;"></div>
+                            <div
+                                style="padding:10px; font-size:0.7rem; background:rgba(255, 243, 224, 0.2);"
+                            >{{props}}</div>
+                        </div>
+                    </template>
+                </w-list-expand>
+            </div>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-component-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    vuetify: new Vuetify(),
+    data: function() {
+      return {
+        WListExpand: {
+          itemsString: [
+            "Real-Time",
+            "Audience",
+            "Conversions",
+            "Management",
+            "Settings",
+            "Actions"
+          ],
+          itemsStringActive: "Real-Time",
+          itemsObj: [
+            {
+              text: "Real-Time",
+              icon: "mdi-stack-overflow",
+              dsp:
+                "Lorem ipsum dolor sit amet, id nec quod persius patrioque. Quaestio antiopam sea ex. Ius no illud mucius admodum, ea nonumes habemus interpretaris sit, eu ius suavitate definitionem."
+            },
+            {
+              text: "Audience",
+              icon: "mdi-book-music-outline",
+              dsp:
+                "Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix."
+            },
+            {
+              text: "Conversions",
+              icon: "mdi-charity",
+              dsp:
+                "Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur."
+            },
+            {
+              text: "Management",
+              icon: "mdi-lightbulb-group-outline",
+              dsp:
+                "Qui oratio partem percipit ex, brute omittantur eum no, id his iriure splendide voluptatum. Ei his etiam vivendo adversarium, nam iusto ridens ei, meis disputationi eos eu. Meis accumsan mea et, ut ubique deserunt dignissim vix. Duo ex dicant detracto tacimates."
+            },
+            {
+              text: "Settings",
+              icon: "mdi-message-cog-outline",
+              dsp: "Sed et nisi maximus, aliquet justo in, consequat nisl."
+            },
+            {
+              text: "Actions",
+              icon: "mdi-gesture-double-tap",
+              dsp:
+                "Aliquam faucibus ipsum quis massa facilisis, ac sollicitudin lectus volutpat."
+            }
+          ],
+          itemsObjLarge: [
+            {
+              text: "Real-Time-1",
+              icon: "mdi-stack-overflow",
+              dsp:
+                "Lorem ipsum dolor sit amet, id nec quod persius patrioque. Quaestio antiopam sea ex. Ius no illud mucius admodum, ea nonumes habemus interpretaris sit, eu ius suavitate definitionem."
+            },
+            {
+              text: "Audience-1",
+              icon: "mdi-book-music-outline",
+              dsp:
+                "Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix."
+            },
+            {
+              text: "Conversions-1",
+              icon: "mdi-charity",
+              dsp:
+                "Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur."
+            },
+            {
+              text: "Management-1",
+              icon: "mdi-lightbulb-group-outline",
+              dsp:
+                "Qui oratio partem percipit ex, brute omittantur eum no, id his iriure splendide voluptatum. Ei his etiam vivendo adversarium, nam iusto ridens ei, meis disputationi eos eu. Meis accumsan mea et, ut ubique deserunt dignissim vix. Duo ex dicant detracto tacimates."
+            },
+            {
+              text: "Settings-1",
+              icon: "mdi-message-cog-outline",
+              dsp: "Sed et nisi maximus, aliquet justo in, consequat nisl."
+            },
+            {
+              text: "Actions-1",
+              icon: "mdi-gesture-double-tap",
+              dsp:
+                "Aliquam faucibus ipsum quis massa facilisis, ac sollicitudin lectus volutpat."
+            },
+            {
+              text: "Real-Time-2",
+              icon: "mdi-stack-overflow",
+              dsp:
+                "Donec sagittis hendrerit sapien at varius. Donec semper massa eget neque consequat, quis elementum nisi venenatis. Sed sed libero vitae eros rutrum dapibus a eget neque."
+            },
+            {
+              text: "Audience-2",
+              icon: "mdi-book-music-outline",
+              dsp:
+                "Nam facilisis, felis ac pellentesque ultrices, ligula lacus lobortis mauris, sed elementum orci orci ac urna. Ut sit amet ipsum dapibus."
+            },
+            {
+              text: "Conversions-2",
+              icon: "mdi-charity",
+              dsp:
+                "Placerat libero sed, commodo purus. Donec suscipit nibh a lobortis varius. Nullam quis velit dignissim ligula luctus rutrum. In viverra viverra pellentesque."
+            },
+            {
+              text: "Management-2",
+              icon: "mdi-lightbulb-group-outline",
+              dsp:
+                "Ut iaculis sapien id arcu ornare sodales. Pellentesque faucibus ipsum a odio pharetra tincidunt. Mauris molestie consequat neque a vestibulum."
+            },
+            {
+              text: "Settings-2",
+              icon: "mdi-message-cog-outline",
+              dsp:
+                "Morbi mi lectus, semper vitae dolor eget, venenatis pellentesque purus. Phasellus sollicitudin mattis molestie. Nunc felis mauris."
+            },
+            {
+              text: "Actions-2",
+              icon: "mdi-gesture-double-tap",
+              dsp:
+                "Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus metus lectus, tincidunt id mi id, accumsan imperdiet ante."
+            }
+          ],
+          itemsObjForKey: [
+            {
+              name: "Real-Time",
+              path: "mdi-stack-overflow",
+              message:
+                "Lorem ipsum dolor sit amet, id nec quod persius patrioque. Quaestio antiopam sea ex. Ius no illud mucius admodum, ea nonumes habemus interpretaris sit, eu ius suavitate definitionem."
+            },
+            {
+              name: "Audience",
+              path: "mdi-book-music-outline",
+              message:
+                "Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix."
+            },
+            {
+              name: "Conversions",
+              path: "mdi-charity",
+              message:
+                "Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur."
+            },
+            {
+              name: "Management",
+              path: "mdi-lightbulb-group-outline",
+              message:
+                "Qui oratio partem percipit ex, brute omittantur eum no, id his iriure splendide voluptatum. Ei his etiam vivendo adversarium, nam iusto ridens ei, meis disputationi eos eu. Meis accumsan mea et, ut ubique deserunt dignissim vix. Duo ex dicant detracto tacimates."
+            },
+            {
+              name: "Settings",
+              path: "mdi-message-cog-outline",
+              message: "Sed et nisi maximus, aliquet justo in, consequat nisl."
+            },
+            {
+              name: "Actions",
+              path: "mdi-gesture-double-tap",
+              message:
+                "Morbi mi lectus, semper vitae dolor eget, venenatis pellentesque purus. Phasellus sollicitudin mattis molestie. Nunc felis mauris."
+            }
+          ],
+          itemActive: {
+            text: "Audience",
+            icon: "mdi-book-music-outline",
+            dsp:
+              "Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix."
+          },
+          itemActiveMulti: [
+            {
+              text: "Audience",
+              icon: "mdi-book-music-outline",
+              dsp:
+                "Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix."
+            }
+          ]
+        },
+        actions: []
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  });
+    </script>
+</body>
+</html>

package/docs/examples/w-list-horizontal_borderBottomSize.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -168,6 +168,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -314,7 +315,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_default.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -167,6 +167,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -313,7 +314,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_item with no editable.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -164,6 +164,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -310,7 +311,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_item with no editable_itemDisabledColor.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -170,6 +170,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -316,7 +317,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_item with no editable_itemTextColorDisabled_itemIconColorDisabled_itemBackgroundColorDisabled.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -173,6 +173,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -319,7 +320,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_itemBackgroundColor_itemBackgroundColorHover_itemBackgroundColorActive.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -172,6 +172,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -318,7 +319,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_itemBorderRadius.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -168,6 +168,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -314,7 +315,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_itemBorderRadius_space.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -171,6 +171,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -317,7 +318,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_itemRippleColor.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -168,6 +168,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -314,7 +315,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_itemRippleColor_borderBottomColor_itemTextColorActive_itemIconColorActive.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -177,6 +177,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -323,7 +324,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_itemTextFontSize_itemIconSize.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -169,6 +169,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -315,7 +316,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",

package/docs/examples/w-list-horizontal_keyText_keyIcon.html CHANGED Viewed

@@ -89,7 +89,7 @@
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.43/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.45/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -168,6 +168,7 @@
             "Settings",
             "Actions"
           ],
+          itemsStringActive: "Real-Time",
           itemsObj: [
             {
               text: "Real-Time",
@@ -314,7 +315,6 @@
               editable: true
             }
           ],
-          itemsStringActive: "Real-Time",
           itemActive: {
             text: "Audience",
             icon: "mdi-book-music-outline",