# WColorSelect

Description:

### Props

Name | Type | Default value | Required? | Description
--- | --- | --- | --- | ---
`value` | String | `'#FFFFFF'` | No | 輸入顏色字串，預設'#FFFFFF'
`type` | String | `'HSVA'` | No | 輸入選擇顏色方式字串，可選'LUMP'、'HSVA'，預設'HSVA'
`size` | Number | `200` | No | 輸入尺寸數字，代表組件基礎寬度與將自動計算高度，單位px，預設200
`space` | Number | `10` | No | 輸入子組件間距數字，單位px，預設10
`colorBlockSize` | Number | `20` | No | 輸入色塊長與寬度數字，單位px，預設20
`colorBlockBorderWidth` | Number | `1` | No | 輸入色塊框線寬度數字，單位px，預設1
`colorBlockBorderColor` | String | `'#ddd'` | No | 輸入色塊框線顏色字串，預設'#ddd'
`showColorText` | Boolean | `true` | No | 輸入是否顯示當前RGBA顏色文字布林值，預設true
`colorTextColor` | String | `'#000'` | No | 輸入當前RGBA顏色文字顏色字串，預設'#000'
`colorTextFontSize` | String | `'0.8rem'` | No | 輸入當前RGBA顏色文字字型大小字串，預設'0.8rem'
`panelBackgroundColor` | String | `'#fff'` | No | 輸入彈窗背景顏色字串，預設'#fff'
`toolBackgroundColor` | String | `'#f5f5f5'` | No | 輸入彈窗背景顏色字串，預設'#f5f5f5'
`menuIconLump` | String | `mdiHexagonSlice6` | No | 輸入選單LUMP模式圖標字串，預設mdiHexagonSlice6
`menuIconHsva` | String | `mdiViewParallel` | No | mdiViewParallel
`menuIconEyeDropper` | String | `mdiEyedropper` | No | 輸入取色滴管圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiEyedropper)
`menuIconColor` | String | `'#aaa'` | No | 輸入選單圖標顏色字串，預設'#aaa'
`menuIconColorHover` | String | `'#999'` | No | 輸入滑鼠移入時選單圖標顏色字串，預設'#999'
`menuIconColorActive` | String | `'#666'` | No | 輸入主動模式時選單圖標顏色字串，預設'#666'
`menuIconSize` | Number | `20` | No | 輸入選單圖標尺寸數字，單位為px，預設20
`borderColor` | String | `'#ddd'` | No | 輸入邊框顏色字串，預設'#ddd'
`borderColorHover` | String | `'#ccc'` | No | 輸入滑鼠移入時邊框顏色字串，預設'#ccc'
`borderColorActive` | String | `'#777'` | No | 輸入主動模式時邊框顏色字串，預設'#777'
`menuBorderRadius` | Number | `4` | No | 輸入框圓角度數字，單位為px，預設4
`menuTextColor` | String | `'#444'` | No | 輸入選單文字顏色字串，預設'#444'
`menuTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時選單文字顏色字串，預設'#222'
`menuTextColorActive` | String | `'#000'` | No | 輸入主動模式時選單文字顏色字串，預設'#000'
`menuTextFontSize` | String | `'0.8rem'` | No | 輸入選單文字字型大小字串，預設'0.8rem'
`menuBackgroundColor` | String | `'#fff'` | No | 輸入選單背景顏色字串，預設'#fff'
`menuBackgroundColorHover` | String | `'#f9f9f9'` | No | 輸入滑鼠移入時選單背景顏色字串，預設'#f9f9f9'
`menuBackgroundColorActive` | String | `'#f2f2f2'` | No | 輸入主動模式時選單背景顏色字串，預設'#f2f2f2'
`inputBorderRadius` | Number | `4` | No | 輸入顏色數字輸入區邊框圓角度數字，單位為px，預設4
`inputBorderColor` | String | `'#ccc'` | No | 輸入顏色數字輸入區邊框顏色字串，預設'#ccc'
`inputBorderColorHover` | String | `'#b5b5b5'` | No | 輸入滑鼠移入時顏色數字輸入區邊框顏色字串，預設'#b5b5b5'
`inputBorderColorActive` | String | `'#aaa'` | No | 輸入主動模式時顏色數字輸入區邊框顏色字串，預設'#aaa'
`inputBackgroundColor` | String | `'#fff'` | No | 輸入顏色數字輸入區背景顏色字串，預設'#fff'
`inputBackgroundColorHover` | String | `'#fafafa'` | No | 輸入滑鼠移入時顏色數字輸入區背景顏色字串，預設'#fafafa'
`inputBackgroundColorActive` | String | `'#f2f2f2'` | No | 輸入主動模式時顏色數字輸入區背景顏色字串，預設'#f2f2f2'
`inputTextColor` | String | `'#000'` | No | 輸入顏色數字輸入區文字顏色字串，預設'#000'
`inputTextFontSize` | String | `'0.8rem'` | No | 輸入顏色數字輸入區文字字型大小字串，預設'0.8rem'
`inputTextWidth` | Number | `38` | No | 輸入顏色數字輸入區寬度數字，單位為px，預設38
`inputTextHeight` | Number | `18` | No | 輸入顏色數字輸入區高度數字，單位為px，預設18
`inputLabelWidth` | Number | `12` | No | 輸入顏色數字輸入區標題寬度數字，單位為px，預設12
`inputLabelColor` | String | `'#666'` | No | 輸入文字顏色字串，預設'#666'
`inputLabelFontSize` | String | `'0.8rem'` | No | 輸入文字字型大小字串，預設'0.8rem'
`barProgHeight` | Number | `4` | No | 輸入值域條高度數字，單位為px，預設4
`barProgColor` | String | `'#74a4d9'` | No | 輸入值域條顏色字串，預設'#74a4d9'
`barProgBackgroundColor` | String | `'#eee'` | No | 輸入值域條背景顏色字串，預設'#eee'
`barSliderSize` | Number | `10` | No | 輸入拖曳球尺寸數字，單位為px，預設10
`barSliderBackgroundColor` | String | `'#1565C0'` | No | 輸入拖曳球背景顏色字串，預設'#1565C0'
`barSliderBackgroundColorHover` | String | `'#1976D2'` | No | 輸入滑鼠移入時拖曳球背景顏色字串，預設'#1976D2'
`popupPlacementDist` | Number | `5` | No | 輸入彈窗距離觸發元素距離數字，單位為px，預設5
`btnText` | String | `'OK'` | No | 輸入確認按鈕之文字字串，預設'OK'
`btnRippleColor` | String | `'rgba(255,255,255,0.4)'` | No | 輸入確認按鈕之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
`btnPaddingStyle` | Object | `{v:1,h:5}` | No | 輸入確認按鈕之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:1,h:5}
`btnTextColor` | String | `'#000'` | No | 輸入確認按鈕之文字顏色字串，預設'#000'
`btnTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時確認按鈕之文字顏色字串，預設'#222'
`btnTextColorActive` | String | `'#222'` | No | 輸入主動模式時確認按鈕之文字顏色字串，預設'#222'
`btnTextFontSize` | String | `'0.8rem'` | No | 輸入確認按鈕之文字字型大小字串，預設'0.8rem'
`btnBorderRadius` | Number | `4` | No | 輸入確認按鈕之框圓角度數字，單位為px，預設4
`btnBackgroundColor` | String | `'rgb(241,241,241)'` | No | 輸入確認按鈕之背景顏色字串，預設'rgb(241,241,241)'
`btnBackgroundColorHover` | String | `'rgb(236,236,236)'` | No | 輸入滑鼠移入時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'
`btnBackgroundColorActive` | String | `'rgb(236,236,236)'` | No | 輸入主動模式時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'
`btnShadow` | Boolean | `true` | No | 輸入確認按鈕之是否顯示陰影布林值，預設true
`editable` | Boolean | `true` | No | 輸入是否為編輯模式布林值，預設true

### Props

Name | Type | Default value | Required? | Description
--- | --- | --- | --- | ---
`value` | String | `'#FFFFFF'` | No | 輸入顏色字串，預設'#FFFFFF'
`type` | String | `'HSVA'` | No | 輸入選擇顏色方式字串，可選'LUMP'、'HSVA'，預設'HSVA'
`size` | Number | `200` | No | 輸入尺寸數字，代表組件基礎寬度與將自動計算高度，單位px，預設200
`space` | Number | `10` | No | 輸入子組件間距數字，單位px，預設10
`colorBlockSize` | Number | `20` | No | 輸入色塊長與寬度數字，單位px，預設20
`colorBlockBorderWidth` | Number | `1` | No | 輸入色塊框線寬度數字，單位px，預設1
`colorBlockBorderColor` | String | `'#ddd'` | No | 輸入色塊框線顏色字串，預設'#ddd'
`showColorText` | Boolean | `true` | No | 輸入是否顯示當前RGBA顏色文字布林值，預設true
`colorTextColor` | String | `'#000'` | No | 輸入當前RGBA顏色文字顏色字串，預設'#000'
`colorTextFontSize` | String | `'0.8rem'` | No | 輸入當前RGBA顏色文字字型大小字串，預設'0.8rem'
`panelBackgroundColor` | String | `'#fff'` | No | 輸入彈窗背景顏色字串，預設'#fff'
`toolBackgroundColor` | String | `'#f5f5f5'` | No | 輸入彈窗背景顏色字串，預設'#f5f5f5'
`menuIconLump` | String | `mdiHexagonSlice6` | No | 輸入選單LUMP模式圖標字串，預設mdiHexagonSlice6
`menuIconHsva` | String | `mdiViewParallel` | No | mdiViewParallel
`menuIconEyeDropper` | String | `mdiEyedropper` | No | 輸入取色滴管圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiEyedropper)
`menuIconColor` | String | `'#aaa'` | No | 輸入選單圖標顏色字串，預設'#aaa'
`menuIconColorHover` | String | `'#999'` | No | 輸入滑鼠移入時選單圖標顏色字串，預設'#999'
`menuIconColorActive` | String | `'#666'` | No | 輸入主動模式時選單圖標顏色字串，預設'#666'
`menuIconSize` | Number | `20` | No | 輸入選單圖標尺寸數字，單位為px，預設20
`borderColor` | String | `'#ddd'` | No | 輸入邊框顏色字串，預設'#ddd'
`borderColorHover` | String | `'#ccc'` | No | 輸入滑鼠移入時邊框顏色字串，預設'#ccc'
`borderColorActive` | String | `'#777'` | No | 輸入主動模式時邊框顏色字串，預設'#777'
`menuBorderRadius` | Number | `4` | No | 輸入框圓角度數字，單位為px，預設4
`menuTextColor` | String | `'#444'` | No | 輸入選單文字顏色字串，預設'#444'
`menuTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時選單文字顏色字串，預設'#222'
`menuTextColorActive` | String | `'#000'` | No | 輸入主動模式時選單文字顏色字串，預設'#000'
`menuTextFontSize` | String | `'0.8rem'` | No | 輸入選單文字字型大小字串，預設'0.8rem'
`menuBackgroundColor` | String | `'#fff'` | No | 輸入選單背景顏色字串，預設'#fff'
`menuBackgroundColorHover` | String | `'#f9f9f9'` | No | 輸入滑鼠移入時選單背景顏色字串，預設'#f9f9f9'
`menuBackgroundColorActive` | String | `'#f2f2f2'` | No | 輸入主動模式時選單背景顏色字串，預設'#f2f2f2'
`inputBorderRadius` | Number | `4` | No | 輸入顏色數字輸入區邊框圓角度數字，單位為px，預設4
`inputBorderColor` | String | `'#ccc'` | No | 輸入顏色數字輸入區邊框顏色字串，預設'#ccc'
`inputBorderColorHover` | String | `'#b5b5b5'` | No | 輸入滑鼠移入時顏色數字輸入區邊框顏色字串，預設'#b5b5b5'
`inputBorderColorActive` | String | `'#aaa'` | No | 輸入主動模式時顏色數字輸入區邊框顏色字串，預設'#aaa'
`inputBackgroundColor` | String | `'#fff'` | No | 輸入顏色數字輸入區背景顏色字串，預設'#fff'
`inputBackgroundColorHover` | String | `'#fafafa'` | No | 輸入滑鼠移入時顏色數字輸入區背景顏色字串，預設'#fafafa'
`inputBackgroundColorActive` | String | `'#f2f2f2'` | No | 輸入主動模式時顏色數字輸入區背景顏色字串，預設'#f2f2f2'
`inputTextColor` | String | `'#000'` | No | 輸入顏色數字輸入區文字顏色字串，預設'#000'
`inputTextFontSize` | String | `'0.8rem'` | No | 輸入顏色數字輸入區文字字型大小字串，預設'0.8rem'
`inputTextWidth` | Number | `38` | No | 輸入顏色數字輸入區寬度數字，單位為px，預設38
`inputTextHeight` | Number | `18` | No | 輸入顏色數字輸入區高度數字，單位為px，預設18
`inputLabelWidth` | Number | `12` | No | 輸入顏色數字輸入區標題寬度數字，單位為px，預設12
`inputLabelColor` | String | `'#666'` | No | 輸入文字顏色字串，預設'#666'
`inputLabelFontSize` | String | `'0.8rem'` | No | 輸入文字字型大小字串，預設'0.8rem'
`barProgHeight` | Number | `4` | No | 輸入值域條高度數字，單位為px，預設4
`barProgColor` | String | `'#74a4d9'` | No | 輸入值域條顏色字串，預設'#74a4d9'
`barProgBackgroundColor` | String | `'#eee'` | No | 輸入值域條背景顏色字串，預設'#eee'
`barSliderSize` | Number | `10` | No | 輸入拖曳球尺寸數字，單位為px，預設10
`barSliderBackgroundColor` | String | `'#1565C0'` | No | 輸入拖曳球背景顏色字串，預設'#1565C0'
`barSliderBackgroundColorHover` | String | `'#1976D2'` | No | 輸入滑鼠移入時拖曳球背景顏色字串，預設'#1976D2'
`popupPlacementDist` | Number | `5` | No | 輸入彈窗距離觸發元素距離數字，單位為px，預設5
`btnText` | String | `'OK'` | No | 輸入確認按鈕之文字字串，預設'OK'
`btnRippleColor` | String | `'rgba(255,255,255,0.4)'` | No | 輸入確認按鈕之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
`btnPaddingStyle` | Object | `{v:1,h:5}` | No | 輸入確認按鈕之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:1,h:5}
`btnTextColor` | String | `'#000'` | No | 輸入確認按鈕之文字顏色字串，預設'#000'
`btnTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時確認按鈕之文字顏色字串，預設'#222'
`btnTextColorActive` | String | `'#222'` | No | 輸入主動模式時確認按鈕之文字顏色字串，預設'#222'
`btnTextFontSize` | String | `'0.8rem'` | No | 輸入確認按鈕之文字字型大小字串，預設'0.8rem'
`btnBorderRadius` | Number | `4` | No | 輸入確認按鈕之框圓角度數字，單位為px，預設4
`btnBackgroundColor` | String | `'rgb(241,241,241)'` | No | 輸入確認按鈕之背景顏色字串，預設'rgb(241,241,241)'
`btnBackgroundColorHover` | String | `'rgb(236,236,236)'` | No | 輸入滑鼠移入時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'
`btnBackgroundColorActive` | String | `'rgb(236,236,236)'` | No | 輸入主動模式時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'
`btnShadow` | Boolean | `true` | No | 輸入確認按鈕之是否顯示陰影布林值，預設true
`editable` | Boolean | `true` | No | 輸入是否為編輯模式布林值，預設true