w-component-vue 2.3.87 → 2.3.89

package/src/AppZoneWTimeminuteRange.vue

@@ -24,13 +24,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-timeminute-range'"
-                    :casename="'paddingStyle (thin style) & placementDist'"
+                    :casename="'paddingStyle (thin style) & placementDistY'"
                 ></demolink>
 
                 <w-timeminute-range
                     :icon="''"
                     :paddingStyle="{v:0,h:8}"
-                    :placementDist="3"
+                    :placementDistY="3"
                     :minuteStart.sync="WTimeminuteRange.minuteStart"
                     :minuteEnd.sync="WTimeminuteRange.minuteEnd"
                 ></w-timeminute-range>
@@ -40,14 +40,14 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-timeminute-range'"
-                    :casename="'paddingStyle (thin style) & textFontSize & placementDist'"
+                    :casename="'paddingStyle (thin style) & textFontSize & placementDistY'"
                 ></demolink>
 
                 <w-timeminute-range
                     :icon="''"
                     :paddingStyle="{v:0,h:8}"
                     :textFontSize="'0.7rem'"
-                    :placementDist="3"
+                    :placementDistY="3"
                     :minuteStart.sync="WTimeminuteRange.minuteStart"
                     :minuteEnd.sync="WTimeminuteRange.minuteEnd"
                 ></w-timeminute-range>
@@ -128,13 +128,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-timeminute-range'"
-                    :casename="'icon & iconSize & placementDist'"
+                    :casename="'icon & iconSize & placementDistY'"
                 ></demolink>
 
                 <w-timeminute-range
                     :icon="mdiCheckUnderlineCircle"
                     :iconSize="20"
-                    :placementDist="6"
+                    :placementDistY="6"
                     :minuteStart.sync="WTimeminuteRange.minuteStart"
                     :minuteEnd.sync="WTimeminuteRange.minuteEnd"
                 ></w-timeminute-range>
@@ -307,7 +307,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-timeminute-range'"
-                    :casename="'border & paddingStyle (thin style) & placementDist'"
+                    :casename="'border & paddingStyle (thin style) & placementDistY'"
                 ></demolink>
 
                 <w-timeminute-range
@@ -320,7 +320,7 @@
                     :backgroundColorFocus="'orange lighten-5'"
                     :icon="''"
                     :paddingStyle="{v:0,h:8}"
-                    :placementDist="3"
+                    :placementDistY="3"
                     :minuteStart.sync="WTimeminuteRange.minuteStart"
                     :minuteEnd.sync="WTimeminuteRange.minuteEnd"
                 ></w-timeminute-range>
@@ -330,7 +330,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-timeminute-range'"
-                    :casename="'border & paddingStyle (thin style) & textFontSize & placementDist'"
+                    :casename="'border & paddingStyle (thin style) & textFontSize & placementDistY'"
                 ></demolink>
 
                 <w-timeminute-range
@@ -344,7 +344,7 @@
                     :icon="''"
                     :paddingStyle="{v:0,h:8}"
                     :textFontSize="'0.7rem'"
-                    :placementDist="3"
+                    :placementDistY="3"
                     :minuteStart.sync="WTimeminuteRange.minuteStart"
                     :minuteEnd.sync="WTimeminuteRange.minuteEnd"
                 ></w-timeminute-range>

package/src/AppZoneWTooltip.vue

@@ -183,11 +183,11 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-tooltip'"
-                    :casename="'placementDist'"
+                    :casename="'placementDistY'"
                 ></demolink>
 
                 <w-tooltip
-                    :placementDist="10"
+                    :placementDistY="10"
                     v-model="WTooltip.bShow7"
                     @show="evShow"
                     @hide="evHide"

package/src/AppZoneWVditorDyn.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="bkh">
+
+
+        <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-vditor-dyn</span></div>
+
+
+        <div style="font-size:0.9rem; margin-bottom:10px;">
+            <span style="margin-right:10px;">Links:</span>
+            <a href="//github.com/Vanessa219/vditor" target="_blank" rel="noreferrer noopener">vditor</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//b3log.org/vditor/" target="_blank" rel="noreferrer noopener">vditor examples</a>
+        </div>
+
+
+        <div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-vditor-dyn'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-vditor-dyn
+                    style="width:620px;"
+                    v-model="WVditorDyn.content"
+                ></w-vditor-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-vditor-dyn'"
+                    :casename="'height'"
+                ></demolink>
+
+                <w-vditor-dyn
+                    style="width:620px;"
+                    :height="400"
+                    v-model="WVditorDyn.content"
+                ></w-vditor-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-vditor-dyn'"
+                    :casename="'slot & keyHint'"
+                ></demolink>
+
+                <div style="color:#f26; font-size:0.8rem;">* type [/ ht] to show popup</div>
+
+                <w-vditor-dyn
+                    style="width:620px;"
+                    :keyHint="'ht'"
+                    v-model="WVditorDyn.content"
+                >
+
+                    <template v-slot:content="props">
+                        <div style="padding:4px 0px;">
+                            <div
+                                class="item item-white"
+                                :key="kitem"
+                                v-for="(item,kitem) in WVditorDyn.items"
+                                @click="props.funInsert(item); props.funHide();"
+                            >
+                                Item {{item}}
+                            </div>
+                        </div>
+                    </template>
+
+                </w-vditor-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-vditor-dyn'"
+                    :casename="'slot & keyHint & hintBorderRadius'"
+                ></demolink>
+
+                <div style="color:#f26; font-size:0.8rem;">* type [/ ht] to show popup</div>
+
+                <w-vditor-dyn
+                    style="width:620px;"
+                    :keyHint="'ht'"
+                    :hintBorderRadius="0"
+                    v-model="WVditorDyn.content"
+                >
+
+                    <template v-slot:content="props">
+                        <div style="padding:4px 0px;">
+                            <div
+                                class="item item-white"
+                                :key="kitem"
+                                v-for="(item,kitem) in WVditorDyn.items"
+                                @click="props.funInsert(item); props.funHide();"
+                            >
+                                Item {{item}}
+                            </div>
+                        </div>
+                    </template>
+
+                </w-vditor-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-vditor-dyn'"
+                    :casename="'slot & keyHint & hintBackgroundColor'"
+                ></demolink>
+
+                <div style="color:#f26; font-size:0.8rem;">* type [/ ht] to show popup</div>
+
+                <w-vditor-dyn
+                    style="width:620px;"
+                    :keyHint="'ht'"
+                    :hintBackgroundColor="'#333'"
+                    v-model="WVditorDyn.content"
+                >
+
+                    <template v-slot:content="props">
+                        <div style="padding:4px 0px;">
+                            <div
+                                class="item item-black"
+                                style="color:#fff;"
+                                :key="kitem"
+                                v-for="(item,kitem) in WVditorDyn.items"
+                                @click="props.funInsert(item); props.funHide();"
+                            >
+                                Item {{item}}
+                            </div>
+                        </div>
+                    </template>
+
+                </w-vditor-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-vditor-dyn'"
+                    :casename="'not editable'"
+                ></demolink>
+
+                <w-vditor-dyn
+                    style="width:620px;"
+                    :editable="false"
+                    v-model="WVditorDyn.content"
+                ></w-vditor-dyn>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WVditorDyn from './components/WVditorDyn.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WVditorDyn,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WVditorDyn': {
+                'content': 'abc中文123',
+                'items': ['foo', 'bar', 'fizz', 'buzz'],
+            },
+            'actions': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+.item {
+    transition: all 0.3s;
+    padding: 5px 15px;
+    cursor: pointer;
+}
+.item-white {
+    background: #fff;
+}
+.item-white:hover {
+    background: #eee;
+}
+.item-black {
+    background: #333;
+}
+.item-black:hover {
+    background: #555;
+}
+</style>

package/src/components/WAggridVueDyn.vue

@@ -5,8 +5,8 @@
 
 <script>
 import importResources from 'wsemi/src/importResources.mjs'
-import WIconLoading from './WIconLoading.vue'
 import getVue from '../js/getVue.mjs'
+import WIconLoading from './WIconLoading.vue'
 
 
 /**

package/src/components/WCkeditorVueDyn.vue

@@ -5,8 +5,8 @@
 
 <script>
 import importResources from 'wsemi/src/importResources.mjs'
-import WIconLoading from './WIconLoading.vue'
 import getVue from '../js/getVue.mjs'
+import WIconLoading from './WIconLoading.vue'
 
 
 /**

package/src/components/WColorSelect.vue

@@ -4,7 +4,7 @@
         :maxWidth="null"
         :autoFitMinWidth="false"
         :autoFitMaxWidth="false"
-        :placementDist="popupPlacementDist"
+        :placementDistY="popupPlacementDist"
         :editable="editable"
         v-model="show"
         :changeValue="changeValue"
@@ -205,7 +205,7 @@
 
 <script>
 import { mdiHexagonSlice6, mdiViewParallel, mdiEyedropper, mdiLoading } from '@mdi/js'
-import get from 'lodash-es/get.js'
+import get from 'lodash-es/get.js'
 import isfun from 'wsemi/src/isfun.mjs'
 import domGetBoudRect from 'wsemi/src/domGetBoudRect.mjs'
 import convertColor from '../js/convertColor.mjs'

package/src/components/WComponentVue.vue

@@ -95,7 +95,8 @@ import WTinymceVueDyn from './WTinymceVueDyn.vue'
 import WTooltip from './WTooltip.vue'
 import WTree from './WTree.vue'
 import WTreeIconCheckbox from './WTreeIconCheckbox.vue'
-import WTreeIconToggle from './WTreeIconToggle.vue'
+import WTreeIconToggle from './WTreeIconToggle.vue'
+import WVditorDyn from './WVditorDyn.vue'
 
 let WComponentVue = {
     install: function(Vue) {
@@ -195,7 +196,8 @@ let WComponentVue = {
         Vue.component('w-tooltip', WTooltip)
         Vue.component('w-tree', WTree)
         Vue.component('w-tree-icon-checkbox', WTreeIconCheckbox)
-        Vue.component('w-tree-icon-toggle', WTreeIconToggle)
+        Vue.component('w-tree-icon-toggle', WTreeIconToggle)
+        Vue.component('w-vditor-dyn', WVditorDyn)
     }
 }
 

package/src/components/WEchartsVueDyn.vue

@@ -5,8 +5,8 @@
 
 <script>
 import importResources from 'wsemi/src/importResources.mjs'
-import WIconLoading from './WIconLoading.vue'
 import getVue from '../js/getVue.mjs'
+import WIconLoading from './WIconLoading.vue'
 // import VueCompositionAPI from '@vue/composition-api'
 
 

package/src/components/WHighchartsVueDyn.vue

@@ -5,8 +5,8 @@
 
 <script>
 import importResources from 'wsemi/src/importResources.mjs'
-import WIconLoading from './WIconLoading.vue'
 import getVue from '../js/getVue.mjs'
+import WIconLoading from './WIconLoading.vue'
 
 
 /**

package/src/components/WHighstockVueDyn.vue

@@ -5,8 +5,8 @@
 
 <script>
 import importResources from 'wsemi/src/importResources.mjs'
-import WIconLoading from './WIconLoading.vue'
 import getVue from '../js/getVue.mjs'
+import WIconLoading from './WIconLoading.vue'
 
 
 /**

package/src/components/WImageCascadingDyn.vue

@@ -11,7 +11,7 @@
 
         <WIconLoading v-if="loading"></WIconLoading>
 
-        <div v-else>
+        <div :style="`${loading?'heigh:0px; max-height:0px; overflow-y:hidden;':''}`">
 
             <div
                 :style="`display:table-cell; vertical-align:top; margin:0; padding-left:${kimgs>0?space:0}px;`"
@@ -68,12 +68,12 @@
 </template>
 
 <script>
-import each from 'lodash-es/each.js'
-import map from 'lodash-es/map.js'
-import get from 'lodash-es/get.js'
-import times from 'lodash-es/times.js'
-import size from 'lodash-es/size.js'
-import isNumber from 'lodash-es/isNumber.js'
+import each from 'lodash-es/each.js'
+import map from 'lodash-es/map.js'
+import get from 'lodash-es/get.js'
+import times from 'lodash-es/times.js'
+import size from 'lodash-es/size.js'
+import isNumber from 'lodash-es/isNumber.js'
 import importResources from 'wsemi/src/importResources.mjs'
 import domShowImagesDyn from 'wsemi/src/domShowImagesDyn.mjs'
 import ispint from 'wsemi/src/ispint.mjs'

package/src/components/WImageViewerDyn.vue

@@ -3,7 +3,11 @@
 
         <WIconLoading v-if="loading"></WIconLoading>
 
-        <div ref="wig" v-else>
+        <div
+            ref="wig"
+            :style="`${loading?'heigh:0px; max-height:0px; overflow-y:hidden;':''}`"
+        >
+
             <!-- 為了使用fade-in故opacity給0 -->
             <div
                 ref="wiv"
@@ -19,15 +23,16 @@
                     :src="image"
                 >
             </div>
+
         </div>
 
     </div>
 </template>
 
 <script>
-import each from 'lodash-es/each.js'
-import get from 'lodash-es/get.js'
-import merge from 'lodash-es/merge.js'
+import each from 'lodash-es/each.js'
+import get from 'lodash-es/get.js'
+import merge from 'lodash-es/merge.js'
 import importResources from 'wsemi/src/importResources.mjs'
 import domShowImagesDyn from 'wsemi/src/domShowImagesDyn.mjs'
 import domFadeIn from 'wsemi/src/domFadeIn.mjs'

package/src/components/WLeafletVueDyn.vue

@@ -5,8 +5,8 @@
 
 <script>
 import importResources from 'wsemi/src/importResources.mjs'
-import WIconLoading from './WIconLoading.vue'
 import getVue from '../js/getVue.mjs'
+import WIconLoading from './WIconLoading.vue'
 
 
 /**

package/src/components/WPopup.vue

@@ -31,7 +31,8 @@ import WTooltip from './WTooltip.vue'
  * @vue-prop {Boolean} [autoFitMinWidth=false] 輸入是否使用驅動區寬度作為彈窗之最小寬度布林值，預設false
  * @vue-prop {Boolean} [autoFitMaxWidth=false] 輸入是否使用驅動區寬度作為彈窗之最大寬度布林值，預設false
  * @vue-prop {String} [placement='bottom'] 輸入彈窗出現位置字串，可選'top-start'、'top'、'top-end'、'bottom-start'、'bottom'、'bottom-end'、'left-start'、'left'、'left-end'、'right-start'、'right'、'right-end'、，預設'bottom'
- * @vue-prop {Number} [placementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5
+ * @vue-prop {Number} [placementDistX=0] 輸入彈窗距離觸發元素之水平向右平移數字，單位為px，預設0
+ * @vue-prop {Number} [placementDistY=5] 輸入彈窗距離觸發元素之垂直向下平移數字，單位為px，預設5
  * @vue-prop {Number} [borderRadius=4] 輸入彈窗框圓角度數字，單位為px，預設4
  * @vue-prop {String} [textFontSize='0.85rem'] 輸入彈窗文字字型大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='white'] 輸入彈窗文字顏色字串，預設'white'
@@ -83,7 +84,11 @@ export default {
             type: String,
             default: 'bottom-start',
         },
-        placementDist: {
+        placementDistX: {
+            type: Number,
+            default: 0,
+        },
+        placementDistY: {
             type: Number,
             default: 5,
         },

package/src/components/WQuillVueDyn.vue

@@ -5,8 +5,8 @@
 
 <script>
 import importResources from 'wsemi/src/importResources.mjs'
-import WIconLoading from './WIconLoading.vue'
 import getVue from '../js/getVue.mjs'
+import WIconLoading from './WIconLoading.vue'
 
 
 /**

package/src/components/WTextSelect.vue

@@ -58,7 +58,7 @@
                     :maxWidth="maxWidth"
                     :autoFitMinWidth="autoFitMinWidth"
                     :autoFitMaxWidth="autoFitMaxWidth"
-                    :placementDist="useDistY"
+                    :placementDistY="useDistY"
                     :defItemHeight="defItemHeight"
                     :editable="editable"
                     :focused="focusedTrans"
@@ -102,7 +102,7 @@
 </template>
 
 <script>
-import get from 'lodash-es/get.js'
+import get from 'lodash-es/get.js'
 import isobj from 'wsemi/src/isobj.mjs'
 import parseSpace from '../js/parseSpace.mjs'
 import domResize from '../js/domResize.mjs'

package/src/components/WTextSuggest.vue

@@ -63,7 +63,7 @@
                     :loadingText="loadingText"
                     :noResultsText="noResultsText"
                     :searchingText="searchingText"
-                    :placementDist="useDistY"
+                    :placementDistY="useDistY"
                     :defItemHeight="defItemHeight"
                     :editable="editable"
                     :focused="focusedTrans"
@@ -96,7 +96,7 @@
 </template>
 
 <script>
-import get from 'lodash-es/get.js'
+import get from 'lodash-es/get.js'
 import isobj from 'wsemi/src/isobj.mjs'
 import parseSpace from '../js/parseSpace.mjs'
 import domResize from '../js/domResize.mjs'

package/src/components/WTextSuggestCore.vue

@@ -5,7 +5,8 @@
         :maxWidth="maxWidth"
         :autoFitMinWidth="autoFitMinWidth"
         :autoFitMaxWidth="autoFitMaxWidth"
-        :placementDist="placementDist"
+        :placementDistX="placementDistX"
+        :placementDistY="placementDistY"
         :editable="editable"
         :value="showPanelTrans"
         @input="(v)=>{updateShowPanel(v,'WPopup')}"
@@ -118,8 +119,8 @@
 
 <script>
 import { mdiPlay } from '@mdi/js'
-import get from 'lodash-es/get.js'
-import size from 'lodash-es/size.js'
+import get from 'lodash-es/get.js'
+import size from 'lodash-es/size.js'
 import isobj from 'wsemi/src/isobj.mjs'
 import isbol from 'wsemi/src/isbol.mjs'
 import replace from 'wsemi/src/replace.mjs'
@@ -154,7 +155,8 @@ import WIcon from './WIcon.vue'
  * @vue-prop {Number} [maxWidth=null] 輸入最大寬度，單位為px，預設null
  * @vue-prop {Boolean} [autoFitMinWidth=true] 輸入是否使用驅動區寬度作為內容區之最小寬度布林值，預設true
  * @vue-prop {Boolean} [autoFitMaxWidth=true] 輸入是否使用驅動區寬度作為內容區之最大寬度布林值，預設true
- * @vue-prop {Number} [placementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5
+ * @vue-prop {Number} [placementDistX=0] 輸入彈窗距離觸發元素之水平向右平移數字，單位為px，預設0
+ * @vue-prop {Number} [placementDistY=5] 輸入彈窗距離觸發元素之垂直向下平移數字，單位為px，預設5
  * @vue-prop {String} [placeholder=''] 輸入無文字時的替代字符字串，預設''
  * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
@@ -265,7 +267,11 @@ export default {
             type: Boolean,
             default: true,
         },
-        placementDist: {
+        placementDistX: {
+            type: Number,
+            default: 0,
+        },
+        placementDistY: {
             type: Number,
             default: 5,
         },

package/src/components/WThreejsVueDyn.vue

@@ -5,8 +5,8 @@
 
 <script>
 import importResources from 'wsemi/src/importResources.mjs'
-import WIconLoading from './WIconLoading.vue'
 import getVue from '../js/getVue.mjs'
+import WIconLoading from './WIconLoading.vue'
 
 
 /**
@@ -22,7 +22,7 @@ export default {
         pathItems: {
             type: Array,
             default: () => [
-                'https://cdn.jsdelivr.net/npm/w-threejs-vue@1.0.7/dist/w-threejs-vue.umd.js', //使用最新版
+                'https://cdn.jsdelivr.net/npm/w-threejs-vue@1.0.9/dist/w-threejs-vue.umd.js', //使用最新版
             ],
         },
         opt: {

package/src/components/WTimeday.vue

@@ -33,7 +33,8 @@
                 :textColor="textColor"
                 :pickColor="pickColor"
                 :value="value"
-                :placementDist="placementDist"
+                :placementDistX="placementDistX"
+                :placementDistY="placementDistY"
                 :textEmpty="textEmpty"
                 :editable="editable"
                 @update:focused="changeFocused"
@@ -73,7 +74,8 @@ import WTimedayCore from './WTimedayCore.vue'
  * @vue-prop {String} [borderColorHover='white'] 輸入滑鼠移入時邊框顏色字串，預設'white'
  * @vue-prop {String} [borderColorFocus='white'] 輸入取得焦點時邊框顏色字串，預設'white'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
- * @vue-prop {Number} [placementDist=7] 輸入日期彈窗y向下平移數字，預設7
+ * @vue-prop {Number} [placementDistX=0] 輸入日期彈窗之水平向右平移數字，單位為px，預設0
+ * @vue-prop {Number} [placementDistY=7] 輸入日期彈窗之垂直向下平移數字，單位為px，預設7
  * @vue-prop {String} [textEmpty='Select a date'] 輸入尚未輸入日期之顯示文字字串，預設'Select a date'
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  * @vue-prop {Boolean} [focused=false] 輸入是否為取得焦點狀態，預設false
@@ -173,7 +175,11 @@ export default {
             type: String,
             default: 'deep-orange darken-1',
         },
-        placementDist: {
+        placementDistX: {
+            type: Number,
+            default: 0,
+        },
+        placementDistY: {
             type: Number,
             default: 7,
         },