Merge pull request #15 from chakra-ui/feat/spinner

Feat/spinner

Author: codebender828

_templates/generator/component/examples.vue.ejs.t

@@ -3,7 +3,7 @@ to: packages/<%=h.changeCase.paramCase(name)%>/examples/base-<%=h.changeCase.par
 ---
 
 <template>
-  <<%=h.changeCase.pascalCase(name)%>> HELLO <%=h.changeCase.pascalCase(name)%> <<%=h.changeCase.pascalCase(name)%>>
+  <<%=h.changeCase.paramCase(name)%>> HELLO <%=h.changeCase.pascalCase(name)%> </<%=h.changeCase.paramCase(name)%>>
 </template>
 
 <script lang="ts">

_templates/generator/component/package.json.ejs.t

@@ -10,12 +10,6 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "typings": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
-    }
-  },
   "author": "Jonathan Bakebwa <codebender828@gmail.com>",
   "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
   "license": "MIT",

package.json

@@ -29,7 +29,8 @@
     "theme": "yarn workspace @chakra-ui/vue-theme",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next",
     "test-utils": "yarn workspace @chakra-ui/vue-test-utils",
-    "c-reset": "yarn workspace @chakra-ui/c-reset"
+    "c-reset": "yarn workspace @chakra-ui/c-reset",
+    "c-spinner": "yarn workspace @chakra-ui/c-spinner"
   },
   "license": "MIT",
   "private": true,

packages/c-reset/src/index.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { injectGlobal } from '@emotion/css'
+import { injectGlobal } from '@chakra-ui/vue-system'
 
 export const CReset = defineComponent({
   setup() {

packages/c-spinner/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/c-spinner
+
+Visual cue that an action is either processing awaiting a course of change or a result
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-spinner
+# or
+npm i @chakra-ui/c-spinner
+```

packages/c-spinner/examples/base-spinner.vue

@@ -0,0 +1,13 @@
+<template>
+  <c-spinner />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>

packages/c-spinner/examples/with-color.vue

@@ -0,0 +1,13 @@
+<template>
+  <c-spinner color="red.500" />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>

packages/c-spinner/examples/with-empty-area-color.vue

@@ -0,0 +1,19 @@
+<template>
+  <c-spinner
+    thickness="4px"
+    speed="0.65s"
+    emptyColor="gray.200"
+    color="blue.500"
+    size="xl"
+  />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>

packages/c-spinner/examples/with-label.vue

@@ -0,0 +1,13 @@
+<template>
+  <c-spinner label="My spinner label" />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>

packages/c-spinner/examples/with-size.vue

@@ -0,0 +1,17 @@
+<template>
+  <c-spinner size="xs" mr="3" />
+  <c-spinner size="sm" mr="3" />
+  <c-spinner size="md" mr="3" />
+  <c-spinner size="lg" mr="3" />
+  <c-spinner size="xl" />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>