mediacube-ui 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Design system for MediaCube services",
   "author": "MediaCube",
   "private": false,
@@ -17,7 +17,8 @@
     "src/tokens/*",
     "src/elements/**/*.vue",
     "src/patterns/**/*.vue",
-    "src/templates/**/*.vue"
+    "src/templates/**/*.vue",
+    "src/utils/*"
   ],
   "scripts": {
     "start": "yarn scss-export && start-storybook -p 6006 -s public",

package/src/utils/filters.js

@@ -0,0 +1,11 @@
+import numeral from "numeral"
+
+export const number = (value, decimals = 2) => {
+  if (value == null) return null
+
+  let deciamlsString = "".padStart(decimals, "0")
+
+  return numeral(value)
+    .format("0,0." + deciamlsString)
+    .replace(/,/g, " ")
+}

package/src/utils/getTokens.js

@@ -0,0 +1,41 @@
+import tokens from '../assets/tokens/tokens.json'
+
+const getTokenValue = name => {
+    const tokenData = tokens.variables.find(v => v.name === name)
+    return tokenData.value
+}
+
+const getTokensByType = type => {
+    const filteredTokens = tokens.variables.filter(v => {
+        const regExp = new RegExp(`^\\$${type}-`)
+        return regExp.test(v.name)
+    })
+    const tokenList = {}
+    filteredTokens.forEach(t => {
+        const key = t.name.replace(`$${type}-`, '')
+        tokenList[key] = key
+    })
+    return tokenList
+}
+
+const getTokenGroup = name => {
+    const dataTokens = tokens.variables.find(v => v.name === `$token-${name}`)
+    let tokenList = {}
+    if (!dataTokens) return tokenList
+
+    if ('mapValue' in dataTokens) {
+        dataTokens.mapValue.forEach(t => (tokenList[t.name] = t.name))
+        return tokenList
+    }
+
+    const valueArr = dataTokens.value.replace(/\/\*.+\*\/\s/, '').split(' ')
+    valueArr.forEach(i => {
+        if (i.match(/.+:$/)) {
+            const key = i.slice(0, i.length - 1)
+            tokenList[key] = key
+        }
+    })
+    return tokenList
+}
+
+export { getTokensByType, getTokenGroup, getTokenValue }

package/src/utils/load-icons.js

@@ -0,0 +1,3 @@
+const svgIconsReq = require.context('!!raw-loader!../assets/icons', true, /.\.svg$/)
+const svgIcons = svgIconsReq.keys().map(name => ({ name, content: svgIconsReq(name).default }))
+export default svgIcons

package/src/utils/treeSearch.js

@@ -0,0 +1,30 @@
+export const findParentComponent = ($component, name) => {
+  let $parent = null
+  do {
+    if (!$component) {
+      return null
+    }
+    let $componentParent = $component.$parent
+    if ($componentParent && $componentParent.$options.name === name) {
+      $parent = $componentParent
+    } else {
+      $component = $componentParent
+    }
+  } while ($parent == null)
+  return $parent
+}
+
+export const findChildrenComponents = ($component, name) => {
+  if ($component.$children == null || $component.$children.length === 0) return []
+
+  let $collapses = []
+  $component.$children.forEach($child => {
+    if ($child.$options.name === name) {
+      $collapses = [...$collapses, $child]
+    } else {
+      $collapses = [...$collapses, ...findChildrenComponents($child, name)]
+    }
+  })
+
+  return $collapses
+}

package/src/utils/webFontLoader.js

@@ -0,0 +1,12 @@
+/**
+ * Web Font Loader takes care of Vue Design System’s font loading.
+ * For full documentation, see: https://github.com/typekit/webfontloader
+ */
+import WebFont from 'webfontloader'
+
+WebFont.load({
+    custom: {
+        families: ['Font Awesome 5 Icons:400,900', 'Font Awesome 5 Brands:400'],
+        urls: ['https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css'],
+    },
+})