Merge pull request #16 from chakra-ui/develop

feat: merge spinner, visually hidden, and button group components

Author: codebender828

.eslintrc.yml

@@ -6,6 +6,7 @@ extends:
   - prettier/@typescript-eslint
   - plugin:prettier/recommended
   - plugin:vue/essential
+  - plugin:vue/vue3-essential
   - '@vue/typescript'
 parser: vue-eslint-parser
 parserOptions:

_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",

nodemon.json

@@ -25,10 +25,12 @@
     "c-button": "yarn workspace @chakra-ui/c-button",
     "c-icon": "yarn workspace @chakra-ui/c-icon",
     "system": "yarn workspace @chakra-ui/vue-system",
+    "utils": "yarn workspace @chakra-ui/vue-utils",
     "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,
@@ -73,7 +75,6 @@
     "jest-transform-stub": "^2.0.0",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.3",
-    "nodemon": "^2.0.7",
     "prettier": "^2.1.2",
     "pretty": "^2.0.0",
     "recursive-readdir": "^2.2.2",

package.json

@@ -9,7 +9,8 @@ const CAccordion = defineComponent({
     },
   },
   setup(props, { slots, attrs }) {
-    return () => h(chakra(props.as), { ...attrs }, slots)
+    return () =>
+      h(chakra(props.as, { label: 'accordion' }), { ...attrs }, slots)
   },
 })
 

packages/c-accordion/src/index.ts

@@ -3,7 +3,7 @@
 exports[`should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="css-0"
+    class="chakra-accordion css-0"
   />
 </DocumentFragment>
 `;

packages/c-accordion/tests/__snapshots__/c-accordion.test.ts.snap

@@ -26,6 +26,7 @@
   "dependencies": {
     "@chakra-ui/styled-system": "^1.4.1",
     "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*",
     "@chakra-ui/c-icon": "*"
   }
 }

packages/c-alert/package.json

@@ -96,7 +96,7 @@ export const CAlert = defineComponent({
 
     return () =>
       h(
-        chakra(props.as, 'alert'),
+        chakra(props.as, { label: 'alert' }),
         {
           role: 'alert',
           ...alertStyles,
@@ -119,7 +119,7 @@ export const CAlertTitle = defineComponent({
 
     return () =>
       h(
-        chakra('div', 'alert__title'),
+        chakra('div', { label: 'alert__title' }),
         {
           ...styles.title,
           ...attrs,
@@ -141,7 +141,7 @@ export const CAlertDescription = defineComponent({
 
     return () =>
       h(
-        chakra('div', 'alert__description'),
+        chakra('div', { label: 'alert__description' }),
         {
           ...styles.description,
           ...attrs,

packages/c-alert/src/alert.ts

@@ -0,0 +1,15 @@
+<template>
+  <c-button-group variant="outline" is-attached>
+    <c-button color-scheme="blue">Save</c-button>
+    <c-button>Cancel</c-button>
+  </c-button-group>
+</template>
+
+<script lang="ts">
+import { CButton, CButtonGroup } from '@chakra-ui/c-button/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: { CButton, CButtonGroup },
+})
+</script>