w-component-vue
Version:
A simple component for vue(vue2).
161 lines (107 loc) • 15.3 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>convertColor.mjs - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
<script src="scripts/nav.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav >
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WAggridVueDyn.html">WAggridVueDyn</a></li><li><a href="module-WBadge.html">WBadge</a></li><li><a href="module-WButtonChip.html">WButtonChip</a></li><li><a href="module-WButtonCircle.html">WButtonCircle</a></li><li><a href="module-WCheckbox.html">WCheckbox</a></li><li><a href="module-WCkeditorVueDyn.html">WCkeditorVueDyn</a></li><li><a href="module-WColorPickAlpha.html">WColorPickAlpha</a></li><li><a href="module-WColorPickHexagon.html">WColorPickHexagon</a></li><li><a href="module-WColorPickHexagonGray.html">WColorPickHexagonGray</a></li><li><a href="module-WColorPickHsv.html">WColorPickHsv</a></li><li><a href="module-WColorPickHue.html">WColorPickHue</a></li><li><a href="module-WColorPickStripe.html">WColorPickStripe</a></li><li><a href="module-WColorSelect.html">WColorSelect</a></li><li><a href="module-WColorSelectInput.html">WColorSelectInput</a></li><li><a href="module-WColorSelectPanel.html">WColorSelectPanel</a></li><li><a href="module-WColorSelectPanelBlock.html">WColorSelectPanelBlock</a></li><li><a href="module-WColorSelectPanelHsva.html">WColorSelectPanelHsva</a></li><li><a href="module-WConfirm.html">WConfirm</a></li><li><a href="module-WDialog.html">WDialog</a></li><li><a href="module-WDrawer.html">WDrawer</a></li><li><a href="module-WDropfiles.html">WDropfiles</a></li><li><a href="module-WDynamicList.html">WDynamicList</a></li><li><a href="module-WEchartsVueDyn.html">WEchartsVueDyn</a></li><li><a href="module-WExplorer.html">WExplorer</a></li><li><a href="module-WGroupBaggage.html">WGroupBaggage</a></li><li><a href="module-WGroupChipCheck.html">WGroupChipCheck</a></li><li><a href="module-WGroupChipRadio.html">WGroupChipRadio</a></li><li><a href="module-WGroupDragdrop.html">WGroupDragdrop</a></li><li><a href="module-WGroupIconCheck.html">WGroupIconCheck</a></li><li><a href="module-WGroupIconRadio.html">WGroupIconRadio</a></li><li><a href="module-WGroupTags.html">WGroupTags</a></li><li><a href="module-WHighchartsBitmapDyn.html">WHighchartsBitmapDyn</a></li><li><a href="module-WHighchartsVueDyn.html">WHighchartsVueDyn</a></li><li><a href="module-WHighstockVueDyn.html">WHighstockVueDyn</a></li><li><a href="module-WIcon.html">WIcon</a></li><li><a href="module-WIconLoading.html">WIconLoading</a></li><li><a href="module-WImageCascadingDyn.html">WImageCascadingDyn</a></li><li><a href="module-WImageLazy.html">WImageLazy</a></li><li><a href="module-WImageViewerDyn.html">WImageViewerDyn</a></li><li><a href="module-WInputCheckbox.html">WInputCheckbox</a></li><li><a href="module-WInputRadio.html">WInputRadio</a></li><li><a href="module-WJsonView.html">WJsonView</a></li><li><a href="module-WLeafletVueDyn.html">WLeafletVueDyn</a></li><li><a href="module-WLevelGrade.html">WLevelGrade</a></li><li><a href="module-WListCheck.html">WListCheck</a></li><li><a href="module-WListExpand.html">WListExpand</a></li><li><a href="module-WListExpandItem.html">WListExpandItem</a></li><li><a href="module-WListHorizontal.html">WListHorizontal</a></li><li><a href="module-WListItem.html">WListItem</a></li><li><a href="module-WListRadio.html">WListRadio</a></li><li><a href="module-WListVertical.html">WListVertical</a></li><li><a href="module-WPanelAvatar.html">WPanelAvatar</a></li><li><a href="module-WPanelBulge.html">WPanelBulge</a></li><li><a href="module-WPanelDivideHorizontal.html">WPanelDivideHorizontal</a></li><li><a href="module-WPanelDivideVertical.html">WPanelDivideVertical</a></li><li><a href="module-WPanelLabelItem.html">WPanelLabelItem</a></li><li><a href="module-WPanelScale.html">WPanelScale</a></li><li><a href="module-WPanelScrolly.html">WPanelScrolly</a></li><li><a href="module-WPanelScrollyCore.html">WPanelScrollyCore</a></li><li><a href="module-WPanelStripe.html">WPanelStripe</a></li><li><a href="module-WPopup.html">WPopup</a></li><li><a href="module-WPopupEditText.html">WPopupEditText</a></li><li><a href="module-WProgressBar.html">WProgressBar</a></li><li><a href="module-WProgressCircle.html">WProgressCircle</a></li><li><a href="module-WQuillVueDyn.html">WQuillVueDyn</a></li><li><a href="module-WSegmentsVertical.html">WSegmentsVertical</a></li><li><a href="module-WShellBottomLine.html">WShellBottomLine</a></li><li><a href="module-WShellEllipse.html">WShellEllipse</a></li><li><a href="module-WSlider.html">WSlider</a></li><li><a href="module-WSwitch.html">WSwitch</a></li><li><a href="module-WTableDyn.html">WTableDyn</a></li><li><a href="module-WText.html">WText</a></li><li><a href="module-WTextCore.html">WTextCore</a></li><li><a href="module-WTextInt.html">WTextInt</a></li><li><a href="module-WTextIntCore.html">WTextIntCore</a></li><li><a href="module-WTextSelect.html">WTextSelect</a></li><li><a href="module-WTextSuggest.html">WTextSuggest</a></li><li><a href="module-WTextSuggestCore.html">WTextSuggestCore</a></li><li><a href="module-WTextarea.html">WTextarea</a></li><li><a href="module-WTextareaCore.html">WTextareaCore</a></li><li><a href="module-WThreejsVueDyn.html">WThreejsVueDyn</a></li><li><a href="module-WTimeday.html">WTimeday</a></li><li><a href="module-WTimedayCore.html">WTimedayCore</a></li><li><a href="module-WTimedayCoreRe.html">WTimedayCoreRe</a></li><li><a href="module-WTimedayRange.html">WTimedayRange</a></li><li><a href="module-WTimedayRangeCore.html">WTimedayRangeCore</a></li><li><a href="module-WTimeminute.html">WTimeminute</a></li><li><a href="module-WTimeminuteCore.html">WTimeminuteCore</a></li><li><a href="module-WTimeminuteRange.html">WTimeminuteRange</a></li><li><a href="module-WTimeminuteRangeCore.html">WTimeminuteRangeCore</a></li><li><a href="module-WTinymceVueDyn.html">WTinymceVueDyn</a></li><li><a href="module-WTooltip.html">WTooltip</a></li><li><a href="module-WTree.html">WTree</a></li><li><a href="module-WTreeIconCheckbox.html">WTreeIconCheckbox</a></li><li><a href="module-WTreeIconToggle.html">WTreeIconToggle</a></li><li><a href="module-WVditorDyn.html">WVditorDyn</a></li></ul><h3>Global</h3><ul><li><a href="global.html#binarySearch">binarySearch</a></li><li><a href="global.html#convertColor">convertColor</a></li></ul>
</nav>
<div id="main">
<h1 class="page-title">convertColor.mjs</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>import camelCase from 'lodash-es/camelCase.js'
import split from 'lodash-es/split.js'
import size from 'lodash-es/size.js'
import get from 'lodash-es/get.js'
import isestr from 'wsemi/src/isestr.mjs'
//fs.writeFileSync('colors.json', JSON.stringify(colors), 'utf8')
let colors = { 'default': { 'red': { 'base': '#f44336', 'lighten5': '#ffebee', 'lighten4': '#ffcdd2', 'lighten3': '#ef9a9a', 'lighten2': '#e57373', 'lighten1': '#ef5350', 'darken1': '#e53935', 'darken2': '#d32f2f', 'darken3': '#c62828', 'darken4': '#b71c1c', 'accent1': '#ff8a80', 'accent2': '#ff5252', 'accent3': '#ff1744', 'accent4': '#d50000' }, 'pink': { 'base': '#e91e63', 'lighten5': '#fce4ec', 'lighten4': '#f8bbd0', 'lighten3': '#f48fb1', 'lighten2': '#f06292', 'lighten1': '#ec407a', 'darken1': '#d81b60', 'darken2': '#c2185b', 'darken3': '#ad1457', 'darken4': '#880e4f', 'accent1': '#ff80ab', 'accent2': '#ff4081', 'accent3': '#f50057', 'accent4': '#c51162' }, 'purple': { 'base': '#9c27b0', 'lighten5': '#f3e5f5', 'lighten4': '#e1bee7', 'lighten3': '#ce93d8', 'lighten2': '#ba68c8', 'lighten1': '#ab47bc', 'darken1': '#8e24aa', 'darken2': '#7b1fa2', 'darken3': '#6a1b9a', 'darken4': '#4a148c', 'accent1': '#ea80fc', 'accent2': '#e040fb', 'accent3': '#d500f9', 'accent4': '#aa00ff' }, 'deepPurple': { 'base': '#673ab7', 'lighten5': '#ede7f6', 'lighten4': '#d1c4e9', 'lighten3': '#b39ddb', 'lighten2': '#9575cd', 'lighten1': '#7e57c2', 'darken1': '#5e35b1', 'darken2': '#512da8', 'darken3': '#4527a0', 'darken4': '#311b92', 'accent1': '#b388ff', 'accent2': '#7c4dff', 'accent3': '#651fff', 'accent4': '#6200ea' }, 'indigo': { 'base': '#3f51b5', 'lighten5': '#e8eaf6', 'lighten4': '#c5cae9', 'lighten3': '#9fa8da', 'lighten2': '#7986cb', 'lighten1': '#5c6bc0', 'darken1': '#3949ab', 'darken2': '#303f9f', 'darken3': '#283593', 'darken4': '#1a237e', 'accent1': '#8c9eff', 'accent2': '#536dfe', 'accent3': '#3d5afe', 'accent4': '#304ffe' }, 'blue': { 'base': '#2196f3', 'lighten5': '#e3f2fd', 'lighten4': '#bbdefb', 'lighten3': '#90caf9', 'lighten2': '#64b5f6', 'lighten1': '#42a5f5', 'darken1': '#1e88e5', 'darken2': '#1976d2', 'darken3': '#1565c0', 'darken4': '#0d47a1', 'accent1': '#82b1ff', 'accent2': '#448aff', 'accent3': '#2979ff', 'accent4': '#2962ff' }, 'lightBlue': { 'base': '#03a9f4', 'lighten5': '#e1f5fe', 'lighten4': '#b3e5fc', 'lighten3': '#81d4fa', 'lighten2': '#4fc3f7', 'lighten1': '#29b6f6', 'darken1': '#039be5', 'darken2': '#0288d1', 'darken3': '#0277bd', 'darken4': '#01579b', 'accent1': '#80d8ff', 'accent2': '#40c4ff', 'accent3': '#00b0ff', 'accent4': '#0091ea' }, 'cyan': { 'base': '#00bcd4', 'lighten5': '#e0f7fa', 'lighten4': '#b2ebf2', 'lighten3': '#80deea', 'lighten2': '#4dd0e1', 'lighten1': '#26c6da', 'darken1': '#00acc1', 'darken2': '#0097a7', 'darken3': '#00838f', 'darken4': '#006064', 'accent1': '#84ffff', 'accent2': '#18ffff', 'accent3': '#00e5ff', 'accent4': '#00b8d4' }, 'teal': { 'base': '#009688', 'lighten5': '#e0f2f1', 'lighten4': '#b2dfdb', 'lighten3': '#80cbc4', 'lighten2': '#4db6ac', 'lighten1': '#26a69a', 'darken1': '#00897b', 'darken2': '#00796b', 'darken3': '#00695c', 'darken4': '#004d40', 'accent1': '#a7ffeb', 'accent2': '#64ffda', 'accent3': '#1de9b6', 'accent4': '#00bfa5' }, 'green': { 'base': '#4caf50', 'lighten5': '#e8f5e9', 'lighten4': '#c8e6c9', 'lighten3': '#a5d6a7', 'lighten2': '#81c784', 'lighten1': '#66bb6a', 'darken1': '#43a047', 'darken2': '#388e3c', 'darken3': '#2e7d32', 'darken4': '#1b5e20', 'accent1': '#b9f6ca', 'accent2': '#69f0ae', 'accent3': '#00e676', 'accent4': '#00c853' }, 'lightGreen': { 'base': '#8bc34a', 'lighten5': '#f1f8e9', 'lighten4': '#dcedc8', 'lighten3': '#c5e1a5', 'lighten2': '#aed581', 'lighten1': '#9ccc65', 'darken1': '#7cb342', 'darken2': '#689f38', 'darken3': '#558b2f', 'darken4': '#33691e', 'accent1': '#ccff90', 'accent2': '#b2ff59', 'accent3': '#76ff03', 'accent4': '#64dd17' }, 'lime': { 'base': '#cddc39', 'lighten5': '#f9fbe7', 'lighten4': '#f0f4c3', 'lighten3': '#e6ee9c', 'lighten2': '#dce775', 'lighten1': '#d4e157', 'darken1': '#c0ca33', 'darken2': '#afb42b', 'darken3': '#9e9d24', 'darken4': '#827717', 'accent1': '#f4ff81', 'accent2': '#eeff41', 'accent3': '#c6ff00', 'accent4': '#aeea00' }, 'yellow': { 'base': '#ffeb3b', 'lighten5': '#fffde7', 'lighten4': '#fff9c4', 'lighten3': '#fff59d', 'lighten2': '#fff176', 'lighten1': '#ffee58', 'darken1': '#fdd835', 'darken2': '#fbc02d', 'darken3': '#f9a825', 'darken4': '#f57f17', 'accent1': '#ffff8d', 'accent2': '#ffff00', 'accent3': '#ffea00', 'accent4': '#ffd600' }, 'amber': { 'base': '#ffc107', 'lighten5': '#fff8e1', 'lighten4': '#ffecb3', 'lighten3': '#ffe082', 'lighten2': '#ffd54f', 'lighten1': '#ffca28', 'darken1': '#ffb300', 'darken2': '#ffa000', 'darken3': '#ff8f00', 'darken4': '#ff6f00', 'accent1': '#ffe57f', 'accent2': '#ffd740', 'accent3': '#ffc400', 'accent4': '#ffab00' }, 'orange': { 'base': '#ff9800', 'lighten5': '#fff3e0', 'lighten4': '#ffe0b2', 'lighten3': '#ffcc80', 'lighten2': '#ffb74d', 'lighten1': '#ffa726', 'darken1': '#fb8c00', 'darken2': '#f57c00', 'darken3': '#ef6c00', 'darken4': '#e65100', 'accent1': '#ffd180', 'accent2': '#ffab40', 'accent3': '#ff9100', 'accent4': '#ff6d00' }, 'deepOrange': { 'base': '#ff5722', 'lighten5': '#fbe9e7', 'lighten4': '#ffccbc', 'lighten3': '#ffab91', 'lighten2': '#ff8a65', 'lighten1': '#ff7043', 'darken1': '#f4511e', 'darken2': '#e64a19', 'darken3': '#d84315', 'darken4': '#bf360c', 'accent1': '#ff9e80', 'accent2': '#ff6e40', 'accent3': '#ff3d00', 'accent4': '#dd2c00' }, 'brown': { 'base': '#795548', 'lighten5': '#efebe9', 'lighten4': '#d7ccc8', 'lighten3': '#bcaaa4', 'lighten2': '#a1887f', 'lighten1': '#8d6e63', 'darken1': '#6d4c41', 'darken2': '#5d4037', 'darken3': '#4e342e', 'darken4': '#3e2723' }, 'blueGrey': { 'base': '#607d8b', 'lighten5': '#eceff1', 'lighten4': '#cfd8dc', 'lighten3': '#b0bec5', 'lighten2': '#90a4ae', 'lighten1': '#78909c', 'darken1': '#546e7a', 'darken2': '#455a64', 'darken3': '#37474f', 'darken4': '#263238' }, 'grey': { 'base': '#9e9e9e', 'lighten5': '#fafafa', 'lighten4': '#f5f5f5', 'lighten3': '#eeeeee', 'lighten2': '#e0e0e0', 'lighten1': '#bdbdbd', 'darken1': '#757575', 'darken2': '#616161', 'darken3': '#424242', 'darken4': '#212121' }, 'shades': { 'black': '#000000', 'white': '#ffffff', 'transparent': 'transparent' } } }
function splitKey(c) {
//split, 'blue-grey lighten-5' => ['blue-grey', 'lighten-5']
let cc = split(c, ' ')
//check
if (size(cc) === 1) {
cc[1] = null
}
return cc
}
function getKey0(c) {
//'blue-grey' => 'blueGrey'
let key0 = c.trim()
key0 = camelCase(key0)
return key0
}
function getKey1(c) {
//'lighten-5' => 'lighten5', null => 'base'
if (!isestr(c)) {
c = 'base'
}
let key1 = c.trim()
key1 = key1.replace('-', '').trim()
return key1
}
function getHexColor(key0, key1, def) {
let hex = get(colors, `default.${key0}.${key1}`, null)
if (hex === null) {
hex = def
}
return hex
}
/**
* 轉換vuetify color為hex顏色字串
*
* @param {String} color 輸入vuetify顏色字串
* @returns {String} hex 回傳hex顏色字串
*/
function convertColor(color) {
//speed
if (color === 'white') {
return '#fff'
}
else if (color === 'black') {
return '#000'
}
else if (color === 'transparent') {
return 'rgba(0,0,0,0)'
}
//splitKey
let cc = splitKey(color)
//key0, key1
let key0 = getKey0(cc[0])
let key1 = getKey1(cc[1])
//hex
let hex = getHexColor(key0, key1, color)
//console.log('color', color, hex)
return hex
}
export default convertColor
</code></pre>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Tue Aug 12 2025 20:19:43 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>
</body>
</html>