w-component-vue 2.1.57

package/src/components/WTextarea.vue

@@ -0,0 +1,89 @@
+<template>
+    <div :changeParam="changeParam">
+
+        <v-textarea
+            style="margin:0px;padding:0px;"
+            auto-grow
+            hide-details
+            rows="1"
+            :color="borderColorFocus"
+            :placeholder="placeholder"
+            :disabled="!editable"
+            v-model="valueTrans"
+            @change="changeContent"
+        ></v-textarea>
+
+    </div>
+</template>
+
+<script>
+
+/**
+ * @vue-prop {String} [value=''] 輸入文字框值，預設''
+ * @vue-prop {String} [placeholder=''] 輸入無文字時的替代字符字串，預設''
+ * @vue-prop {String} [borderColorFocus='purple lighten-3'] 輸入邊框Focus顏色字串，預設'purple lighten-3'
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ */
+export default {
+    props: {
+        value: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        borderColorFocus: {
+            type: String,
+            default: 'purple lighten-3',
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function() {
+        return {
+            valueTrans: '',
+        }
+    },
+    mounted: function() {
+    },
+    computed: {
+
+        changeParam: function () {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            //valueTrans
+            vo.valueTrans = vo.value
+
+            return ''
+        },
+
+    },
+    methods: {
+
+        changeContent: function (value) {
+            //console.log('methods changeContent', value)
+
+            let vo = this
+
+            //$nextTick
+            vo.$nextTick(() => {
+
+                //emit
+                vo.$emit('input', value)
+
+            })
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WTimeday.vue

@@ -0,0 +1,228 @@
+<template>
+    <!-- 時間組件因v-date-picker有點擊區域的限制, 故得使用display:inline-block -->
+    <div
+        style="display:inline-block; cursor:pointer;"
+        :changeParam="changeParam"
+    >
+
+        <WShellEllipse
+            :paddingStyle="paddingStyle"
+            :borderRadius="borderRadius"
+            :shadow="shadow"
+            :leftIcon="icon"
+            :leftIconSize="iconSize"
+            :leftIconColor="iconColor"
+            :leftIconColorHover="iconColorHover"
+            :leftIconColorFocus="iconColorFocus"
+            :leftIconTooltip="iconTooltip"
+            :iconShiftOuter="iconShiftOuter"
+            :iconShiftInner="iconShiftInner"
+            :backgroundColor="backgroundColor"
+            :backgroundColorHover="backgroundColorHover"
+            :backgroundColorFocus="backgroundColorFocus"
+            :borderColor="borderColor"
+            :borderColorHover="borderColorHover"
+            :borderColorFocus="borderColorFocus"
+            :editable="editable"
+            :focused="focusedTrans"
+            @click-left="$emit('click-left')"
+        >
+
+            <WTimedayCore
+                :textFontSize="textFontSize"
+                :textColor="textColor"
+                :pickColor="pickColor"
+                :value="value"
+                :editable="editable"
+                @update:focused="changeFocused"
+                @input="(v)=>{$emit('input', v)}"
+            ></WTimedayCore>
+
+        </WShellEllipse>
+
+    </div>
+</template>
+
+<script>
+import { mdiClockOutline } from '@mdi/js'
+import WShellEllipse from './WShellEllipse.vue'
+import WTimedayCore from './WTimedayCore.vue'
+
+
+/**
+ * @vue-prop {String} [textFontSize='0.9rem'] 輸入文字大小字串，預設'0.9rem'
+ * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
+ * @vue-prop {Object} [paddingStyle={v:0,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:15}
+ * @vue-prop {Number} [borderRadius=30] 輸入框圓角度數字，單位為px，預設30
+ * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
+ * @vue-prop {String} [value=''] 輸入日期字串，預設''
+ * @vue-prop {String} [icon=mdiClockOutline] 輸入圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiClockOutline
+ * @vue-prop {Number} [iconSize=24] 輸入左側圖標大小，單位為px，預設24
+ * @vue-prop {String} [iconColor='deep-orange lighten-2'] 輸入框外左側圖標顏色字串，預設'deep-orange lighten-2'
+ * @vue-prop {String} [iconColorHover='deep-orange lighten-1'] 輸入滑鼠移入時框外左側圖標顏色字串，預設'deep-orange lighten-1'
+ * @vue-prop {String} [iconColorFocus='deep-orange lighten-1'] 輸入取得焦點時框外左側圖標顏色字串，預設'deep-orange lighten-1'
+ * @vue-prop {String} [iconTooltip=''] 輸入圖標提示文字字串，預設''
+ * @vue-prop {Number} [iconShiftOuter=-10] 輸入左右側圖標與外框距離數字，單位為px，預設-10
+ * @vue-prop {Number} [iconShiftInner=5] 輸入左右側圖標與內插槽區距離數字，單位為px，預設5
+ * @vue-prop {String} [backgroundColor='white'] 輸入背景顏色字串，預設'white'
+ * @vue-prop {String} [backgroundColorHover='white'] 輸入滑鼠移入時背景顏色字串，預設'white'
+ * @vue-prop {String} [backgroundColorFocus='white'] 輸入取得焦點時背景顏色字串，預設'white'
+ * @vue-prop {String} [borderColor='white'] 輸入邊框顏色字串，預設'white'
+ * @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 {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ * @vue-prop {Boolean} [focused=false] 輸入是否為取得焦點狀態，預設false
+ */
+export default {
+    components: {
+        WShellEllipse,
+        WTimedayCore,
+    },
+    props: {
+        textFontSize: {
+            type: String,
+            default: '0.9rem',
+        },
+        textColor: {
+            type: String,
+            default: 'black',
+        },
+        paddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 0,
+                    h: 15,
+                }
+            },
+        },
+        borderRadius: {
+            type: Number,
+            default: 30,
+        },
+        shadow: {
+            type: Boolean,
+            default: true,
+        },
+        value: {
+            type: String,
+            default: '',
+        },
+        icon: {
+            type: String,
+            default: mdiClockOutline,
+        },
+        iconSize: {
+            type: Number,
+            default: 24,
+        },
+        iconColor: {
+            type: String,
+            default: 'deep-orange lighten-2',
+        },
+        iconColorHover: {
+            type: String,
+            default: 'deep-orange lighten-1',
+        },
+        iconColorFocus: {
+            type: String,
+            default: 'deep-orange lighten-1',
+        },
+        iconTooltip: {
+            type: String,
+            default: '',
+        },
+        iconShiftOuter: {
+            type: Number,
+            default: -10,
+        },
+        iconShiftInner: {
+            type: Number,
+            default: 5,
+        },
+        backgroundColor: {
+            type: String,
+            default: 'white',
+        },
+        backgroundColorHover: {
+            type: String,
+            default: 'white',
+        },
+        backgroundColorFocus: {
+            type: String,
+            default: 'white',
+        },
+        borderColor: {
+            type: String,
+            default: 'white',
+        },
+        borderColorHover: {
+            type: String,
+            default: 'white',
+        },
+        borderColorFocus: {
+            type: String,
+            default: 'white',
+        },
+        pickColor: {
+            type: String,
+            default: 'deep-orange darken-1',
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+        focused: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function() {
+        return {
+            mdiClockOutline,
+            focusedTrans: false,
+        }
+    },
+    mounted: function() {
+    },
+    computed: {
+
+        changeParam: function () {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            //focusedTrans
+            vo.focusedTrans = vo.focused
+
+            return ''
+        },
+
+    },
+    methods: {
+
+        changeFocused: function(focused) {
+            //console.log('methods changeFocused', focused)
+
+            let vo = this
+
+            //save
+            vo.focusedTrans = focused
+
+            //$nextTick
+            vo.$nextTick(() => {
+
+                //emit
+                vo.$emit('update:focused', focused)
+
+            })
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WTimedayCore.vue

@@ -0,0 +1,197 @@
+<template>
+    <!-- 時間組件因v-date-picker有點擊區域的限制, 故得使用display:inline-block -->
+    <div
+        style="display:inline-block;"
+        :changeParam="changeParam"
+    >
+
+        <v-menu
+            offset-y
+            :close-on-content-click="false"
+            :disabled="!editable"
+            v-model="show"
+        >
+
+            <template v-slot:activator="{ on }">
+                <div
+                    TimedayCore="day"
+                    :style="`display:inline-block; width:83px; color:${useTextColor}; ${useTextFontSize} height:${height}px; line-height:${height}px; vertical-align:middle;`"
+                    v-on="on"
+                >
+                    {{getShowTime}}
+                </div>
+            </template>
+
+            <v-date-picker
+                no-title
+                locale="zh-tw"
+                :prev-icon="mdiChevronLeft"
+                :next-icon="mdiChevronRight"
+                :color="pickColor"
+                :day-format="getDay"
+                :value="value_day"
+                @input="ch_day"
+            ></v-date-picker>
+
+        </v-menu>
+
+    </div>
+</template>
+
+<script>
+import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
+import split from 'lodash/split'
+import get from 'lodash/get'
+import isday from 'wsemi/src/isday.mjs'
+import cint from 'wsemi/src/cint.mjs'
+import replace from 'wsemi/src/replace.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
+
+
+/**
+ * @vue-prop {String} [value=''] 輸入日期字串，預設''
+ * @vue-prop {String} [textFontSize='0.9rem'] 輸入文字大小字串，預設'0.9rem'
+ * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
+ * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
+ * @vue-prop {Number} [height=28] 輸入高度數字，單位為px，預設28
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ */
+export default {
+    props: {
+        value: {
+            type: String,
+            default: '',
+        },
+        textFontSize: {
+            type: String,
+            default: '0.9rem',
+        },
+        textColor: {
+            type: String,
+            default: 'black',
+        },
+        pickColor: {
+            type: String,
+            default: 'deep-orange darken-1',
+        },
+        height: {
+            type: Number,
+            default: 28,
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function() {
+        return {
+            mdiChevronLeft,
+            mdiChevronRight,
+
+            show: false,
+            value_day: '',
+        }
+    },
+    mounted: function() {
+    },
+    watch: {
+
+        show: function(value) {
+            //console.log('watch show')
+
+            let vo = this
+
+            //emit
+            vo.$emit('update:focused', value)
+
+        },
+
+    },
+    computed: {
+
+        changeParam: function () {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            //value for trigger
+            let value = vo.value
+
+            //check
+            if (isday(value)) {
+                vo.value_day = value
+            }
+            else {
+                vo.value_day = ''
+            }
+
+            return ''
+        },
+
+        getShowTime: function () {
+            //console.log('computed getShowTime')
+
+            let vo = this
+            return vo.value_day
+        },
+
+        useTextFontSize: function() {
+            let vo = this
+            let s = vo.textFontSize
+            s = replace(s, ';', '')
+            return `font-size:${s};`
+        },
+
+        useTextColor: function() {
+            //console.log('computed useTextColor')
+
+            let vo = this
+
+            return color2hex(vo.textColor)
+        },
+
+    },
+    methods: {
+
+        getDay: function (d) {
+            //console.log('methods getDay', d)
+
+            let s = split(d, '-')
+            s = get(s, '[2]')
+            s = cint(s)
+            return s
+        },
+
+        ch_day: function (d) {
+            //console.log('methods ch_day', d)
+
+            let vo = this
+
+            //value_day
+            let value_day = d
+
+            //check
+            let value = ''
+            if (isday(value_day)) {
+                value = value_day
+            }
+
+            //hide
+            vo.show = false
+
+            //$nextTick
+            vo.$nextTick(() => {
+
+                //emit
+                vo.$emit('input', value)
+
+            })
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>