Merge pull request #233 from chakra-ui/release/chakra-directive

`v-chakra` directive

Author: codebender828

package.json

@@ -96,6 +96,7 @@
     "color": "^3.1.2",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.4",
+    "defu": "^2.0.4",
     "dotenv-defaults": "^1.1.1",
     "emotion": "^10.0.27",
     "eslint": "^5.16.0",

packages/chakra-ui-core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.5.10
+
+### Patch Changes
+
+- Adds the `v-chakra` directive for styling HTML elements
+
 ## 0.5.9
 
 ### Patch Changes

packages/chakra-ui-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/vue",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "description": "Build Accessible and Responsive Vue.js applications with ease",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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 { createClientDirective } 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', createClientDirective(mergedTheme))
+
     // Bind theme and icons to prototype
     Vue.prototype.$chakra = {
       theme: mergedTheme,

packages/chakra-ui-core/src/directives/chakra.directive.js

@@ -0,0 +1,104 @@
+import { css } from 'emotion'
+import Css from '../Css'
+import styleProps from '../config/props'
+import { camelize, kebabify } from '../utils'
+
+/** Filter attrs and return object of chakra props */
+function filterChakraProps (attrs) {
+  const pure = {}
+  for (const prop in attrs) {
+    if (styleProps[camelize(prop)]) {
+      pure[camelize(prop)] = attrs[prop]
+    }
+  }
+  return pure
+}
+
+/** Purify Chakra attributes */
+function purifyAttrs (el, props) {
+  for (const attr in props) {
+    el.removeAttribute(attr)
+  }
+}
+
+/** Purify's Chakra Attributes from VNode object */
+function purifyVNodeAttrs (vnode, props) {
+  if (props && vnode.data.attrs) {
+    for (const attr in props) {
+      delete vnode.data.attrs[kebabify(attr)]
+    }
+  }
+}
+
+/** Creates className from styles object */
+function createClassName (styleObject, theme, hasBindingValue = false) {
+  const pure = filterChakraProps(styleObject)
+  if (hasBindingValue) {
+    const className = css(Css(styleObject)(theme))
+    return [className, pure]
+  }
+  const className = css(Css(pure)(theme))
+  return [className, pure]
+}
+
+/** Creates SSR `v-chakra` directive for Nuxt */
+export function createServerDirective (theme) {
+  return (vnode, directive) => {
+    const [className, pure] = createClassName(vnode.data.attrs, theme)
+    if (vnode.data.class) {
+      vnode.data.class += ` ${className}`
+    } else {
+      vnode.data.class = className
+    }
+    purifyVNodeAttrs(vnode, pure)
+
+    if (directive.value) {
+      if (typeof directive.value === 'object') {
+        const [className, pure] = createClassName(directive.value, theme, true)
+        if (vnode.data.class) {
+          vnode.data.class += ` ${className}`
+        } else {
+          vnode.data.class = className
+        }
+        purifyVNodeAttrs(vnode, pure)
+      }
+
+      if (typeof directive.value === 'function') {
+        const styles = directive.value(theme)
+        const [className, pure] = createClassName(styles, theme, true)
+        if (vnode.data.class) {
+          vnode.data.class += ` ${className}`
+        } else {
+          vnode.data.class = className
+        }
+        purifyVNodeAttrs(vnode, pure)
+      }
+    }
+  }
+};
+
+/** Creates Client `v-chakra` Directive */
+export function createClientDirective (theme) {
+  return {
+    bind (el, binding, vnode) {
+      const [className, pure] = createClassName(vnode.data.attrs, theme)
+      el.classList.add(className)
+      purifyAttrs(el, pure)
+
+      if (binding.value) {
+        if (typeof binding.value === 'object') {
+          const [className, pure] = createClassName(binding.value, theme, true)
+          el.classList.add(className)
+          purifyAttrs(el, pure)
+        }
+
+        if (typeof binding.value === 'function') {
+          const styles = binding.value(theme)
+          const [className, pure] = createClassName(styles, theme, true)
+          el.classList.add(className)
+          purifyAttrs(el, pure)
+        }
+      }
+    }
+  }
+}

packages/chakra-ui-core/src/directives/chakra.stories.js

@@ -0,0 +1,55 @@
+import { storiesOf } from '@storybook/vue'
+
+storiesOf('Directives | Chakra', module)
+  .add('Base usage - No arguments', () => ({
+    template: `
+      <div>
+        <div v-chakra p="3" bg="red.100" rounded="md" color="red.500" font-weight="bold">Welcome to Chakra directive</div>
+      </div>
+    `
+  }))
+  .add('With value | Styles object', () => ({
+    template: `
+      <div>
+        <div v-chakra="{
+          p: 3,
+          shadow: 'sm',
+          h1: {
+            bg: 'blue.100'
+          },
+        }">
+          <h1>Title</h1>
+          <p>Text</p>
+        </div>
+      </div>
+    `
+  }))
+  .add('With value | Function', () => ({
+    template: `
+      <div>
+        <div v-chakra="theme => ({
+          shadow: 'sm',
+          bg: theme.colors.blue[800],
+          color: theme.colors.yellow[300],
+          p: {
+            fontWeight: 'bold',
+            p: 3
+          }
+        })">
+          <p>Computed styles</p>
+        </div>
+      </div>
+    `
+  }))
+  .add('Demo button', () => ({
+    template: `
+      <div>
+        <button v-chakra="{
+          ':hover': { bg: 'green.400' },
+          ':focus': { shadow: 'outline' }
+        }" font-weight="bold" px="4" py="3" color="white" rounded="md" bg="blue.400" outline="none">
+          Button
+        </button>
+      </div>
+    `
+  }))

packages/chakra-ui-core/src/directives/index.js

@@ -1 +1,2 @@
 export { default as ClickOutsideDirective } from './clickoutside.directive'
+export * from './chakra.directive'

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()
+  })
+}

packages/chakra-ui-docs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 0.4.8
+
+### Patch Changes
+
+- Adds the `v-chakra` directive for styling HTML elements
+- Updated dependencies [undefined]
+  - @chakra-ui/vue@0.5.10
+
 ## 0.4.7
 
 ### Patch Changes

packages/chakra-ui-docs/components/BottomLink.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-show="visible === true">
-    <CFlex justify="space-between">
+    <CFlex justify="space-between" pb="20">
       <div>
         <CLink v-if="prevName" as="router-link" class="link" :to="prevPath">
           <c-button left-icon="chevron-left" border-color="green.500" variant-color="green" variant="outline">