w-component-vue 2.1.57

package/src/components/WPopupEditText.vue

@@ -0,0 +1,326 @@
+<template>
+    <!-- popup的minWidth是內容有超長文字可自動撐開才適用, 編輯區內沒有此種條件元素故設定minWidth會失效 -->
+    <w-popup
+        :isolated="true"
+        _minWidth="minWidthForPopup"
+        @show="evShow"
+        @hide="evHide"
+    >
+
+        <template v-slot:trigger>
+            <div :style="`min-width:${minWidthForValue}px; min-height:1rem; cursor:pointer;`">
+                {{value}}
+            </div>
+        </template>
+
+        <template v-slot:content="props">
+
+            <!-- 無法使用w-popup的minWidth, 得於slot區自己撐開 -->
+            <div :style="`min-width:${minWidthForPopup}px; text-align:left; border-radius:5px; overflow:hidden;`">
+
+                <div v-if="title!==''">
+                    <div :style="` padding:10px; color:${useTitleColor}; ${useTitleFontSize}; background:${useHeaderBackgroundColor};`">
+                        {{title}}
+                    </div>
+                </div>
+
+                <div :style="`padding:20px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:${useContentBackgroundColor}; display:flex; align-items:center;`">
+
+                    <div style="padding-right:10px;">
+                        <v-icon
+                            :size="contentIconSize"
+                            :color="contentIconColor"
+                        >
+                            {{contentIcon}}
+                        </v-icon>
+                    </div>
+
+                    <div style="width:100%;">
+                        <WText
+                            :textColor="inputTextColor"
+                            :bottomLineBorderColor="inputTextBottomLineBorderColor"
+                            :bottomLineBorderColorHover="inputTextBottomLineBorderColorHover"
+                            :bottomLineBorderColorFocus="inputTextBottomLineBorderColorFocus"
+                            v-model="valueTemp"
+                            @enter="ckSave(props)"
+                            v-if="showEdit"
+                        ></WText>
+                    </div>
+
+                </div>
+
+                <div :style="`padding:10px; background:${useFooterBackgroundColor}; text-align:right;`">
+
+                    <WButtonChip
+                        :shiftLeft="-5"
+                        :icon="saveBtnIcon"
+                        :iconColor="saveBtnIconColor"
+                        :iconColorHover="saveBtnIconColorHover"
+                        :text="saveBtnText"
+                        :textColor="saveBtnTextColor"
+                        :textColorHover="saveBtnTextColorHover"
+                        :backgroundColor="saveBtnBackgroundColor"
+                        :backgroundColorHover="saveBtnBackgroundColorHover"
+                        @click="ckSave(props)"
+                    ></WButtonChip>
+
+                </div>
+
+            </div>
+
+        </template>
+    </w-popup>
+</template>
+
+<script>
+import { mdiSquareEditOutline, mdiCheckboxMarkedCircle } from '@mdi/js'
+import replace from 'wsemi/src/replace.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
+import WPopup from './WPopup.vue'
+import WText from './WText.vue'
+import WButtonChip from './WButtonChip.vue'
+
+
+/**
+ * @vue-prop {String|Number} [value=''] 輸入數據字串或數字，預設''
+ * @vue-prop {String} [title=''] 輸入上方區數據標題字串，預設''
+ * @vue-prop {String} [titleColor='grey darken-3'] 輸入上方區數據標題顏色字串，預設'grey darken-3'
+ * @vue-prop {String} [titleFontSize='0.8rem'] 輸入上方區數據標題字型大小字串，預設'0.8rem'
+ * @vue-prop {String} [contentIcon=mdiSquareEditOutline] 輸入內容區圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCommentEditOutline
+ * @vue-prop {String} [contentIconColor='orange'] 輸入內容區圖標顏色字串，預設'orange'
+ * @vue-prop {Number} [contentIconSize=36] 輸入內容區圖標大小，單位為px，預設36
+ * @vue-prop {String} [inputTextColor='grey darken-3'] 輸入輸入文字顏色字串，預設'grey darken-3'
+ * @vue-prop {String} [inputTextBottomLineBorderColor='grey lighten-1'] 輸入底部線顏色字串，預設'grey lighten-1'
+ * @vue-prop {String} [inputTextBottomLineBorderColorHover='grey'] 輸入滑鼠移入時底部線顏色字串，預設'grey'
+ * @vue-prop {String} [inputTextBottomLineBorderColorFocus='blue darken-1'] 輸入取得焦點時底部線顏色字串，預設'blue darken-1'
+ * @vue-prop {String} [saveBtnText='Save'] 輸入儲存按鈕文字字串，預設'Save'
+ * @vue-prop {String} [saveBtnTextColor='grey darken-3'] 輸入儲存按鈕文字顏色字串，預設'grey darken-3'
+ * @vue-prop {String} [saveBtnTextColorHover='grey darken-2'] 輸入滑鼠移入時儲存按鈕文字顏色字串，預設'grey darken-2'
+ * @vue-prop {String} [saveBtnIcon=mdiCheckboxMarkedCircle] 輸入儲存按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxMarkedCircle
+ * @vue-prop {Number} [saveBtnIconSize=22] 輸入儲存按鈕圖標大小，單位為px，預設22
+ * @vue-prop {String} [saveBtnIconColor='grey darken-1'] 輸入儲存按鈕圖標顏色字串，預設'grey darken-1'
+ * @vue-prop {String} [saveBtnIconColorHover='grey darken-2'] 輸入滑鼠移入時儲存按鈕圖標顏色字串，預設'grey darken-2'
+ * @vue-prop {String} [saveBtnIconRippleColor='rgba(200,200,200,0.4)'] 輸入儲存按鈕ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
+ * @vue-prop {String} [saveBtnBackgroundColor='white'] 輸入儲存按鈕背景顏色字串，預設'white'
+ * @vue-prop {String} [saveBtnBackgroundColorHover='grey lighten-3'] 輸入滑鼠移入時儲存按鈕背景顏色字串，預設'grey lighten-3'
+ * @vue-prop {String} [headerBackgroundColor='grey lighten-5'] 輸入上方區背景顏色字串，預設'grey lighten-5'
+ * @vue-prop {String} [contentBackgroundColor='white'] 輸入內容區塊背景顏色字串，預設'white'
+ * @vue-prop {String} [footerBackgroundColor='grey lighten-5'] 輸入下方區背景顏色字串，預設'grey lighten-5'
+ * @vue-prop {Number} [minWidthForValue=30] 輸入數據value展示時最小寬度數字，單位為px，預設30
+ * @vue-prop {Number} [minWidthForPopup=300] 輸入彈窗最小寬度數字，單位為px，預設300
+ */
+export default {
+    components: {
+        WPopup,
+        WText,
+        WButtonChip,
+    },
+    props: {
+        value: {
+            type: [String, Number],
+            default: '',
+        },
+        title: {
+            type: String,
+            default: 'Editor',
+        },
+        titleColor: {
+            type: String,
+            default: 'grey darken-3',
+        },
+        titleFontSize: {
+            type: String,
+            default: '0.8rem',
+        },
+        contentIcon: {
+            type: String,
+            default: mdiSquareEditOutline,
+        },
+        contentIconColor: {
+            type: String,
+            default: 'orange',
+        },
+        contentIconSize: {
+            type: Number,
+            default: 28,
+        },
+        inputTextColor: {
+            type: String,
+            default: 'grey darken-3',
+        },
+        inputTextBottomLineBorderColor: {
+            type: String,
+            default: 'grey lighten-1',
+        },
+        inputTextBottomLineBorderColorHover: {
+            type: String,
+            default: 'grey',
+        },
+        inputTextBottomLineBorderColorFocus: {
+            type: String,
+            default: 'blue darken-1',
+        },
+        saveBtnText: {
+            type: String,
+            default: 'Save',
+        },
+        saveBtnTextColor: {
+            type: String,
+            default: 'grey darken-3',
+        },
+        saveBtnTextColorHover: {
+            type: String,
+            default: 'grey darken-2',
+        },
+        saveBtnIcon: {
+            type: String,
+            default: mdiCheckboxMarkedCircle,
+        },
+        saveBtnIconSize: {
+            type: Number,
+            default: 22,
+        },
+        saveBtnIconColor: {
+            type: String,
+            default: 'grey darken-1',
+        },
+        saveBtnIconColorHover: {
+            type: String,
+            default: 'grey darken-2',
+        },
+        saveBtnIconRippleColor: {
+            type: String,
+            default: 'rgba(200,200,200,0.4)',
+        },
+        saveBtnBackgroundColor: {
+            type: String,
+            default: 'white',
+        },
+        saveBtnBackgroundColorHover: {
+            type: String,
+            default: 'grey lighten-3',
+        },
+        headerBackgroundColor: {
+            type: String,
+            default: 'grey lighten-5',
+        },
+        contentBackgroundColor: {
+            type: String,
+            default: 'white',
+        },
+        footerBackgroundColor: {
+            type: String,
+            default: 'grey lighten-5',
+        },
+        minWidthForValue: {
+            type: Number,
+            default: 30,
+        },
+        minWidthForPopup: {
+            type: Number,
+            default: 300,
+        },
+    },
+    data: function() {
+        return {
+
+            valueTemp: null,
+            showEdit: false,
+
+        }
+    },
+    computed: {
+
+        useTitleFontSize: function() {
+            let vo = this
+            let s = vo.titleFontSize
+            s = replace(s, ';', '')
+            return `font-size:${s};`
+        },
+
+        useTitleColor: function() {
+            let vo = this
+            return color2hex(vo.titleColor)
+        },
+
+        useHeaderBackgroundColor: function() {
+            let vo = this
+            return color2hex(vo.headerBackgroundColor)
+        },
+
+        useContentBackgroundColor: function() {
+            let vo = this
+            return color2hex(vo.contentBackgroundColor)
+        },
+
+        useFooterBackgroundColor: function() {
+            let vo = this
+            return color2hex(vo.footerBackgroundColor)
+        },
+
+    },
+    methods: {
+
+        evShow: function () {
+            // console.log('methods evShow')
+
+            let vo = this
+
+            //save
+            vo.valueTemp = vo.value
+
+            //nextTick
+            vo.$nextTick(() => {
+
+                //show
+                vo.showEdit = true
+
+            })
+
+        },
+
+        evHide: function() {
+            // console.log('methods evHide')
+
+            let vo = this
+
+            //nextTick
+            vo.$nextTick(() => {
+
+                //emit
+                vo.$emit('close')
+
+                //hide
+                vo.showEdit = false
+
+            })
+
+        },
+
+        ckSave: function(props, value) {
+            // console.log('methods ckSave', props, value)
+
+            let vo = this
+
+            //nextTick
+            vo.$nextTick(() => {
+
+                //emit
+                vo.$emit('input', vo.valueTemp)
+
+                //clear
+                vo.valueTemp = ''
+
+                //hide popup
+                props.funHide()
+
+            })
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WProgressBar.vue

@@ -0,0 +1,236 @@
+<template>
+    <div>
+
+        <div
+            :style="`color:${useTitleTextColor}; ${useTitleTextFontSize};`"
+            v-if="title"
+        >
+            {{title}}
+        </div>
+
+        <div style="display:flex; align-items:center;">
+
+            <div :style="`${useBorderRadius} overflow:hidden; width:100%; height:${height}px;`">
+                <div :style="`background:${useProgBackgroundColor}; height:${height}px;`">
+                    <div :style="`background:${useProgColor}; width:${useProg}%; height:${height}px;`"></div>
+                </div>
+            </div>
+
+            <div style="padding-left:5px;">
+                <WIcon
+                    :icon="status==='waiting'?iconWaiting:iconFinish"
+                    :color="status==='waiting'?useIconWaitingColor:useIconFinishColor"
+                    :size="iconSize"
+                    v-if="(enableIconWaiting && status==='waiting') || (enableIconFinish && status==='finish')"
+                ></WIcon>
+                <div
+                    :style="`color:${useValueTextColor}; ${useValueTextFontSize};`"
+                    v-else
+                >
+                    <div>{{useProg}}%</div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import { mdiCheck, mdiOrbitVariant } from '@mdi/js'
+import dig from 'wsemi/src/dig.mjs'
+import replace from 'wsemi/src/replace.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
+import WIcon from './WIcon.vue'
+
+
+/**
+ * @vue-prop {Number} [value=0] 輸入進度數字，單位%，介於0至100之間，預設0
+ * @vue-prop {Number} [decimal=1] 輸入進度取小數位數字，預設1
+ * @vue-prop {String} [title=''] 輸入項目名稱字串，預設''
+ * @vue-prop {String} [titleTextColor='grey darken-2'] 輸入文字顏色字串，預設'grey darken-2'
+ * @vue-prop {String} [titleTextFontSize='0.85rem'] 輸入文字字型大小字串，預設'0.85rem'
+ * @vue-prop {Number} [height=4] 輸入高度數字，單位為px，預設4
+ * @vue-prop {Number} [borderRadius=5] 輸入框圓角度數字，單位為px，預設5
+ * @vue-prop {String} [progColor='light-green accent-4'] 輸入進度條顏色字串，預設'light-green accent-4'
+ * @vue-prop {String} [progBackgroundColor='light-green lighten-5'] 輸入進度條背景顏色字串，預設'light-green lighten-5'
+ * @vue-prop {Number} [iconSize=20] 輸入左側圖標之尺寸數字，單位px，預設20
+ * @vue-prop {String} [iconWaiting='mdiOrbitVariant'] 輸入等待狀態(value<=0)圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設'mdiOrbitVariant'
+ * @vue-prop {String} [iconFinish='mdiCheck'] 輸入完成狀態(value>=100)圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設'mdiCheck'
+ * @vue-prop {String} [iconWaitingColor='grey'] 輸入等待狀態(value<=0)圖標顏色字串，預設'grey'
+ * @vue-prop {String} [iconFinishColor='green'] 輸入完成狀態(value>=100)圖標顏色字串，預設'green'
+ * @vue-prop {Boolean} [enableIconWaiting=true] 輸入是否使用等待狀態(value<=0)圖標，預設true
+ * @vue-prop {Boolean} [enableIconFinish=true] 輸入是否使用完成狀態(value>=100)圖標，預設true
+ * @vue-prop {String} [valueTextColor='grey darken-2'] 輸入文字顏色字串，預設'grey darken-2'
+ * @vue-prop {String} [valueTextFontSize='0.85rem'] 輸入文字字型大小字串，預設'0.85rem'
+ */
+export default {
+    components: {
+        WIcon,
+    },
+    props: {
+        value: {
+            type: Number,
+            default: 0,
+        },
+        decimal: {
+            type: Number,
+            default: 1,
+        },
+        title: {
+            type: String,
+            default: '',
+        },
+        titleTextColor: {
+            type: String,
+            default: 'grey darken-2',
+        },
+        titleTextFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
+        height: {
+            type: Number,
+            default: 4,
+        },
+        borderRadius: {
+            type: Number,
+            default: 5,
+        },
+        progColor: {
+            type: String,
+            default: 'lime accent-4',
+        },
+        progBackgroundColor: {
+            type: String,
+            default: 'light-green lighten-5',
+        },
+        iconSize: {
+            type: Number,
+            default: 20,
+        },
+        iconWaiting: {
+            type: String,
+            default: mdiOrbitVariant,
+        },
+        iconFinish: {
+            type: String,
+            default: mdiCheck,
+        },
+        iconWaitingColor: {
+            type: String,
+            default: 'grey',
+        },
+        iconFinishColor: {
+            type: String,
+            default: 'green',
+        },
+        enableIconWaiting: {
+            type: Boolean,
+            default: true,
+        },
+        enableIconFinish: {
+            type: Boolean,
+            default: true,
+        },
+        valueTextColor: {
+            type: String,
+            default: 'grey darken-2',
+        },
+        valueTextFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
+    },
+    data: function() {
+        return {
+            mdiCheck,
+            mdiOrbitVariant,
+        }
+    },
+    computed: {
+
+        status: function() {
+            let vo = this
+            if (vo.value <= 0) {
+                return 'waiting'
+            }
+            else if (vo.value >= 100) {
+                return 'finish'
+            }
+            return 'running'
+        },
+
+        useProg: function() {
+            let vo = this
+            let p = vo.value
+            p = Math.max(p, 0)
+            p = Math.min(p, 100)
+            p = vo.digValue(p)
+            return p
+        },
+
+        useTitleTextFontSize: function() {
+            let vo = this
+            let s = vo.titleTextFontSize
+            s = replace(s, ';', '')
+            return `font-size:${s};`
+        },
+
+        useBorderRadius: function() {
+            let vo = this
+            return `border-radius:${vo.borderRadius}px;`
+        },
+
+        useProgColor: function() {
+            let vo = this
+            return color2hex(vo.progColor)
+        },
+
+        useProgBackgroundColor: function() {
+            let vo = this
+            return color2hex(vo.progBackgroundColor)
+        },
+
+        useTitleTextColor: function() {
+            let vo = this
+            return color2hex(vo.titleTextColor)
+        },
+
+        useIconWaitingColor: function() {
+            let vo = this
+            return color2hex(vo.iconWaitingColor)
+        },
+
+        useIconFinishColor: function() {
+            let vo = this
+            return color2hex(vo.iconFinishColor)
+        },
+
+        useValueTextColor: function() {
+            let vo = this
+            return color2hex(vo.valueTextColor)
+        },
+
+        useValueTextFontSize: function() {
+            let vo = this
+            let s = vo.valueTextFontSize
+            s = replace(s, ';', '')
+            return `font-size:${s};`
+        },
+
+    },
+    methods: {
+
+        digValue: function(value) {
+            //console.log('methods digValue', value)
+            let vo = this
+            return dig(value, vo.decimal)
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WProgressCircle.vue

@@ -0,0 +1,132 @@
+<template>
+    <div style="display:inline-block;">
+
+        <v-tooltip bottom transition="slide-y-transition" :disabled="tooltip===''">
+
+            <template v-slot:activator="{ on }">
+                <v-progress-circular
+                    v-on="on"
+                    :rotate="-90"
+                    :size="size"
+                    :width="width"
+                    :color="color"
+                    :value="value"
+                >
+
+                    <div style="text-align:center; transform:translateY(-2%);">
+                        <div :style="[styleProg]">{{value}}%</div>
+                        <div :style="[styleText]">{{text}}</div>
+                    </div>
+
+                </v-progress-circular>
+            </template>
+
+            <span>{{tooltip}}</span>
+
+        </v-tooltip>
+
+    </div>
+</template>
+
+<script>
+
+/**
+ * @vue-prop {String} [text=''] 輸入文字字串，預設''
+ * @vue-prop {Number} [value=0] 輸入數值，介於0~100之間，預設0
+ * @vue-prop {String} [color='purple lighten-1'] 輸入環狀圓條顏色字串，預設'purple lighten-1'
+ * @vue-prop {Number} [size=120] 輸入進度條外徑寬度，單位為px，預設120
+ * @vue-prop {Number} [width=10] 輸入環狀圓條寬度，單位為px，預設10
+ * @vue-prop {String} [tooltip=''] 輸入提示文字字串，預設''
+ */
+export default {
+    props: {
+        text: {
+            type: String,
+            default: '',
+        },
+        value: {
+            type: Number,
+            default: 0,
+        },
+        color: {
+            type: String,
+            default: 'purple lighten-1',
+        },
+        size: {
+            type: Number,
+            default: 120,
+        },
+        width: {
+            type: Number,
+            default: 10,
+        },
+        tooltip: {
+            type: String,
+            default: '',
+        },
+    },
+    data: function() {
+        return {
+        }
+    },
+    mounted: function() {
+    },
+    computed: {
+
+        styleProg: function() {
+            //console.log('computed styleProg')
+
+            let vo = this
+
+            //size
+            let fs = vo.size / 5.4
+            let ts = (vo.size - 26) / (94) * (0.25) + 0.75
+            let s = {
+                'font-size': fs + 'pt',
+                'transform': `scale(${ts})`
+            }
+
+            return s
+        },
+
+        styleText: function() {
+            //console.log('computed styleText')
+
+            let vo = this
+
+            //size
+            let fs = vo.size / 12
+            let ts = 1.2
+            let s = {
+                'color': '#666',
+                'font-size': fs + 'pt',
+                'transform': `scale(${ts})`
+            }
+
+            return s
+        },
+
+    },
+    methods: {
+
+        clickBtn: function () {
+            //console.log('methods clickBtn')
+
+            let vo = this
+
+            //$nextTick
+            vo.$nextTick(() => {
+
+                //emit
+                vo.$emit('click')
+
+            })
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>