Merge branch 'develop' into fix/textarea-event-error

Author: codebender828

.changeset/dull-books-judge.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/vue": patch
+---
+
+Include CGridItem in type definitions

packages/chakra-ui-core/src/CInputGroup/CInputGroup.js

@@ -53,7 +53,7 @@ const CInputGroup = {
           const clone = cloneVNode(vnode, h)
           return h(clone.componentOptions.Ctor, {
             ...clone.data,
-            ...(clone.componentOptions.listeners || {}),
+            on: (clone.componentOptions.listeners || {}),
             props: {
               ...(clone.data.props || {}),
               ...clone.componentOptions.propsData,

packages/chakra-ui-core/src/utils/icons.js

@@ -1,49 +1,72 @@
 import { merge } from 'lodash-es'
 
+/**
+ * @param {String} prefix - prefix for the icon pack
+ * @param {Array} icon - icon definition
+ * @returns {{path: string, viewBox: string, attrs: *}}
+ */
+const createIcon = (prefix, icon) => {
+  const [w, h, content, svg, data, , attrs] = icon
+  let path
+
+  const createPath = (d, attrs = {}) => `<path d="${d}" ${attrs.className ? `class="${attrs.className}"` : ''} fill="currentColor" />`
+
+  const createGroupedPath = (groups, prefix) => {
+    const paths = groups.map((d, idx) =>
+      createPath(d, {
+        className: idx ? `${prefix}-primary` : `${prefix}-secondary`,
+      })
+    )
+
+    return `<g fill="currentColor" class="${prefix}-group">${paths.join('')}</g>`
+  }
+
+  if (prefix.startsWith('fa')) {
+    path = Array.isArray(data)
+      ? createGroupedPath(data, prefix.substr(0, 2))
+      : createPath(data)
+  } else {
+    path = prefix.startsWith('fe') ? content : svg
+  }
+
+  return {
+    path,
+    viewBox: `0 0 ${w} ${h}`,
+    attrs,
+  }
+}
+
 /**
  * @description Custom parse all Icons provided by user
  * @param {Object} iconSet - Registered Icons object
  * @returns {Object}
  */
 const parseIcons = (iconSet = {}) => {
   const parseIcon = (iconObject) => {
-    const { icon } = iconObject
+    const { icon, prefix, iconName } = iconObject
     // Is library icon
     if (icon) {
-      const [w, h, content, svg, path, , attrs] = icon
       return {
-        [`${iconObject.iconName}`]: {
-          path: iconObject.prefix.startsWith('fa')
-            ? `<path d="${path}" fill="currentColor" />`
-            : iconObject.prefix.startsWith('fe')
-              ? content
-              : svg,
-          viewBox: `0 0 ${w} ${h}`,
-          attrs
-        }
+        [`${iconName}`]: createIcon(prefix, icon)
       }
     } else {
       return {}
     }
   }
 
-  const result = Object.values(iconSet)
+  return Object.values(iconSet)
     .map(value => parseIcon(value))
     .reduce((target, source) => merge(target, source), {})
-
-  return result
 }
 
 /**
  * @description Parse Icon packs
- * @param {String} pack Icon pack name
  * @param {Object} iconSet Registered Icon set
  * @returns {Object} Parsed pack icons object
  */
 export const parsePackIcons = (iconSet) => {
   // TODO: Add support for other icon libraries
-  // - Material Icons
+  // - Material Icons: these are string constants, and need lots of work
   // - Tailwind Icons (Hero icons)
-  const packIcons = parseIcons(iconSet)
-  return packIcons
+  return parseIcons(iconSet)
 }

packages/chakra-ui-core/types/component.d.ts

@@ -58,6 +58,7 @@ export class CFormHelperText extends Vue {}
 export class CFormLabel extends Vue {}
 export class CFragment extends Vue {}
 export class CGrid extends Vue {}
+export class CGridItem extends Vue {}
 export class CHeading extends Vue {}
 export class CIcon extends Vue {}
 export class CIconButton extends Vue {}