feat(v-chakra): initial implementation of v-chakra directive

codebender828 · codebender828 · commit ec73a49de507 · 2020-06-06T23:40:57.000+08:00
diff --git a/packages/chakra-ui-core/src/CBox/index.js b/packages/chakra-ui-core/src/CBox/index.js
@@ -1,2 +1,3 @@
 import CBox from './CBox'
 export default CBox
+export * from './CBox'
diff --git a/packages/chakra-ui-core/src/Chakra/index.js b/packages/chakra-ui-core/src/Chakra/index.js
@@ -2,6 +2,7 @@ import VScrollLock from 'v-scroll-lock'
 import { merge } from 'lodash-es'
 import { parsePackIcons } from '../utils/icons'
 import internalIcons from '../lib/internal-icons'
+import { createCharkaDirective } from '../directives'
 import defaultTheme from '../../../chakra-ui-theme/src'
 import useToast from '../CToast'
 
@@ -62,6 +63,8 @@ const Chakra = {
     // Recursively merge extended theme variables
     const mergedTheme = merge(defaultTheme, options.extendTheme)
 
+    Vue.directive('chakra', createCharkaDirective(mergedTheme))
+
     // Bind theme and icons to prototype
     Vue.prototype.$chakra = {
       theme: mergedTheme,
diff --git a/packages/chakra-ui-core/src/directives/chakra.directive.js b/packages/chakra-ui-core/src/directives/chakra.directive.js
@@ -0,0 +1,51 @@
+import { css } from 'emotion'
+import __css from '@styled-system/css'
+import { systemProps } from '../CBox'
+import styleProps from '../config/props'
+import { forwardProps, camelize } from '../utils'
+import { parsePseudoStyles } from '../CPseudoBox/utils'
+
+/** Filter attrs and return object of chakra props */
+function filterChakraProps(attrs) {
+  const pure = {}
+  for (const prop in attrs) {
+    if (styleProps[camelize(prop)]) {
+      pure[prop] = attrs[prop]
+    }
+  }
+  return pure
+}
+
+/** Purify Chakra attributes */
+function purifyAttrs(el, props) {
+  for (const attr in props) {
+    el.removeAttribute(attr)
+  }
+}
+
+/** Creates className from styles object */
+function createClassName(styleObject, theme) {
+  const pure = filterChakraProps(forwardProps(styleObject))
+  const { pseudoStyles, baseProps } = parsePseudoStyles(pure)
+  const baseStyles = systemProps({ ...baseProps, theme })
+  const _pseudoStyles = __css(pseudoStyles)(theme)
+  const className = css({ ...baseStyles, ..._pseudoStyles })
+  return [className, pure]
+}
+
+/** Creates Chakra Directive */
+export default function createCharkaDirective (theme) {
+  return {
+    bind (el, binding, vnode) {
+      const [className, pure] = createClassName(vnode.data.attrs, theme)
+      el.classList.add(className)
+      purifyAttrs(el, pure)
+      
+      if (binding.value && typeof binding.value === 'object') {
+        const [className, pure] = createClassName(binding.value, theme)
+        el.classList.add(className)
+        purifyAttrs(el, pure)
+      }
+    }
+  }
+}
diff --git a/packages/chakra-ui-core/src/directives/chakra.stories.js b/packages/chakra-ui-core/src/directives/chakra.stories.js
@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/vue'
+
+storiesOf('Directives | Chakra', module)
+  .add('Base usage - No arguments', () => ({
+    template: `
+      <div>
+        <div v-chakra="{
+          _hover: {
+            color: 'green.400',
+            fontWeight: 'bold'
+          }
+        }" p="3" color="red.400" font-weight="bold">Welcome to Chakra directive</div>
+      </div>
+    `
+  }))
diff --git a/packages/chakra-ui-core/src/directives/index.js b/packages/chakra-ui-core/src/directives/index.js
@@ -1 +1,2 @@
 export { default as ClickOutsideDirective } from './clickoutside.directive'
+export { default as createCharkaDirective } from './chakra.directive'
diff --git a/packages/chakra-ui-core/src/utils/strings.js b/packages/chakra-ui-core/src/utils/strings.js
@@ -27,3 +27,13 @@ export function kebabify (text) {
     .map(x => x.toLowerCase())
     .join('-')
 }
+
+/**
+ * Converts a kebab-case string into camel case
+ * @param {String} string
+ */
+export function camelize(string) {
+  return string.replace(/[.-](\w|$)/g, function (_,x) {
+      return x.toUpperCase();
+  });
+}

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`import CBox from './CBox'`
`2`	`2`	`export default CBox`
	`3`	`+export * from './CBox'`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export { default as ClickOutsideDirective } from './clickoutside.directive'`
	`2`	`+export { default as createCharkaDirective } from './chakra.directive'`