feat(textarea): create textarea component

codebender828 · codebender828 · commit 31868b47b6aa · 2023-02-27T04:07:18.000+08:00
diff --git a/@types/components.d.ts b/@types/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-26T19:46:48.080Z
+ * This file was generated on 2023-02-26T20:03:44.297Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -161,6 +161,7 @@ declare module "@vue/runtime-core" {
     CTbody: typeof import("@chakra-ui/vue-next")["CTbody"]
     CTd: typeof import("@chakra-ui/vue-next")["CTd"]
     CText: typeof import("@chakra-ui/vue-next")["CText"]
+    CTextarea: typeof import("@chakra-ui/vue-next")["CTextarea"]
     CTfoot: typeof import("@chakra-ui/vue-next")["CTfoot"]
     CTh: typeof import("@chakra-ui/vue-next")["CTh"]
     CThead: typeof import("@chakra-ui/vue-next")["CThead"]
diff --git a/_templates/generator/component/package.json.ejs.t b/_templates/generator/component/package.json.ejs.t
@@ -5,7 +5,7 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
   "description": "<%= 'Chakra UI Vue | ' + h.changeCase.sentence(description) + ' component'%>",
-  "version": "0.0.0-next.0",
+  "version": "0.0.0-beta.0",
   "author": "Jonathan Bakebwa <codebender828@gmail.com>",
   "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
   "license": "MIT",
diff --git a/_templates/generator/module/package.json.ejs.t b/_templates/generator/module/package.json.ejs.t
@@ -4,29 +4,37 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
 
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
-  "version": "0.0.0-next.0",
-  "main": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
-  "module": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>",
+  "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
+  "author": "Jonathan Bakebwa codebender828@gmail.com",
+  "version": "0.0.0-beta.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "require": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
-      "default": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>"
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
     }
   },
-  "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",
-  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
-  "author": "Jonathan Bakebwa codebender828@gmail.com",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
+  },
+  "sideEffects": false,
   "scripts": {
-    "build": "rimraf ./dist && concurrently yarn:build:*",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
-    "watch": "concurrently yarn:watch:*",
-    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
-    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
-    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "types:check": "tsc --noEmit",
+    "dev": "tsup --watch"
   }
 }
diff --git a/_templates/generator/tooling/package.json.ejs.t b/_templates/generator/tooling/package.json.ejs.t
@@ -5,29 +5,28 @@ to: tooling/<%=h.changeCase.paramCase(name)%>/package.json
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
   "version": "1.0.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
     }
   },
   "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",
   "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
   "author": "Jonathan Bakebwa codebender828@gmail.com",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf ./dist && concurrently yarn:build:*",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
-    "build:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
-    "watch": "concurrently yarn:watch:*",
-    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
-    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
-    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "types:check": "tsc --noEmit",
+    "dev": "tsup --watch"
   }
 }
diff --git a/components.d.ts b/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-26T19:46:48.080Z
+ * This file was generated on 2023-02-26T20:03:44.297Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -161,6 +161,7 @@ declare module "@vue/runtime-core" {
     CTbody: typeof import("@chakra-ui/vue-next")["CTbody"]
     CTd: typeof import("@chakra-ui/vue-next")["CTd"]
     CText: typeof import("@chakra-ui/vue-next")["CText"]
+    CTextarea: typeof import("@chakra-ui/vue-next")["CTextarea"]
     CTfoot: typeof import("@chakra-ui/vue-next")["CTfoot"]
     CTh: typeof import("@chakra-ui/vue-next")["CTh"]
     CThead: typeof import("@chakra-ui/vue-next")["CThead"]
diff --git a/packages/c-live-region/package.json b/packages/c-live-region/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@chakra-ui/c-live-region",
   "description": "Chakra UI Vue | Creates a hidden live region with dynamic content based on triggered events to be read out by the screen reader on change of the content component",
-  "version": "0.0.0-next.0",
+  "version": "2.0.0-beta.0",
   "author": "Jonathan Bakebwa <codebender828@gmail.com>",
   "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
   "license": "MIT",
diff --git a/packages/c-table/package.json b/packages/c-table/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@chakra-ui/c-table",
   "description": "Chakra UI Vue | Table component is used to organize and display data efficiently it renders a table element by default component",
-  "version": "0.0.0-next.0",
+  "version": "2.0.0-beta.0",
   "author": "Jonathan Bakebwa <codebender828@gmail.com>",
   "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
   "license": "MIT",
diff --git a/packages/c-textarea/README.md b/packages/c-textarea/README.md
@@ -0,0 +1,14 @@
+# `@chakra-ui/c-textarea`
+
+The textarea component allows you to easily create multi line text inputs
+
+## Installation
+
+```sh
+# with pnpm
+pnpm add @chakra-ui/c-textarea
+# or with Yarn
+yarn i @chakra-ui/c-textarea
+# or with npm
+npm i @chakra-ui/c-textarea
+```
diff --git a/packages/c-textarea/examples/simple-textarea.vue b/packages/c-textarea/examples/simple-textarea.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { CTextarea } from "../src"
+import { ref } from "vue"
+import { chakra } from "../../vue/src"
+
+const content = ref("")
+</script>
+
+<template>
+  <chakra.main>
+    <chakra.div> Value: {{ content }} </chakra.div>
+    <c-textarea v-model="content" />
+  </chakra.main>
+</template>
diff --git a/packages/c-textarea/index.tsx b/packages/c-textarea/index.tsx
@@ -0,0 +1 @@
+export * from "./src"
diff --git a/packages/c-textarea/package.json b/packages/c-textarea/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@chakra-ui/c-textarea",
+  "description": "Chakra UI Vue | The textarea component allows you to easily create multi line text inputs component",
+  "version": "0.0.0-beta.0",
+  "author": "Jonathan Bakebwa <codebender828@gmail.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "types:check": "tsc --noEmit",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@chakra-ui/c-form-control": "workspace:*",
+    "@chakra-ui/vue-system": "workspace:*",
+    "@chakra-ui/vue-utils": "workspace:*"
+  },
+  "devDependencies": {
+    "vue": "^3.2.37"
+  },
+  "peerDependencies": {
+    "vue": "^3.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/c-textarea/src/c-textarea.tsx b/packages/c-textarea/src/c-textarea.tsx
@@ -0,0 +1,105 @@
+/**
+ * Hey! Welcome to @chakra-ui/vue-next CTextarea
+ *
+ * C textarea
+ *
+ * @see Docs     https://next.vue.chakra-ui.com/c-textarea
+ * @see Source   https://github.com/chakra-ui/chakra-ui-vue-next/blob/master/packages/c-textarea/src/c-textarea/c-textarea.ts
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
+ */
+
+import {
+  h,
+  defineComponent,
+  PropType,
+  computed,
+  reactive,
+  toRefs,
+  ToRefs,
+} from "vue"
+import {
+  chakra,
+  HTMLChakraProps,
+  omitThemingProps,
+  ThemingProps,
+  useStyleConfig,
+} from "@chakra-ui/vue-system"
+import { omit } from "@chakra-ui/utils"
+import { vueThemingProps } from "@chakra-ui/vue-utils"
+import {
+  FormControlOptions,
+  formControlProps,
+  useFormControl,
+} from "@chakra-ui/c-form-control"
+
+interface TextareaOptions {
+  /**
+   * The border color when the textarea is focused. Use color keys in `theme.colors`
+   * @example
+   * focusBorderColor = "blue.500"
+   */
+  focusBorderColor?: string
+  /**
+   * The border color when the textarea is invalid. Use color keys in `theme.colors`
+   * @example
+   * errorBorderColor = "red.500"
+   */
+  errorBorderColor?: string
+}
+
+type Omitted = "disabled" | "required" | "readOnly"
+
+export interface CTextareaNativeProps
+  extends TextareaOptions,
+    FormControlOptions {}
+
+export interface CTextareaProps
+  extends Omit<HTMLChakraProps<"textarea">, Omitted>,
+    CTextareaNativeProps,
+    ThemingProps<"Textarea"> {}
+
+export const CTextarea = defineComponent({
+  name: "CTextarea",
+  props: {
+    modelValue: String as PropType<string>,
+    ...formControlProps,
+    rows: Number as PropType<HTMLTextAreaElement["rows"]>,
+    ...vueThemingProps,
+  },
+  emits: ["update:modelValue", "input", "change"],
+  setup(props, { emit, attrs }) {
+    const styles = useStyleConfig("Textarea", props)
+
+    const ownProps = computed(() =>
+      toRefs(reactive(omitThemingProps(props as ThemingProps<"Textarea">)))
+    )
+
+    const textarea = useFormControl(
+      ownProps.value as ToRefs<CTextareaNativeProps>
+    )
+
+    const textareaStyles = computed(() =>
+      props.rows
+        ? omit(styles.value, ["h", "minH", "height", "minHeight"])
+        : styles.value
+    )
+
+    const handleInput = (e: Event) => {
+      emit("update:modelValue", (e?.currentTarget as HTMLInputElement)?.value)
+      emit("input", e, (e?.currentTarget as HTMLInputElement)?.value)
+      emit("change", e, (e?.currentTarget as HTMLInputElement)?.value)
+    }
+
+    return () => (
+      <chakra.textarea
+        __chakraIsRaw
+        {...textarea.value}
+        value={props.modelValue}
+        onInput={handleInput}
+        __css={textareaStyles.value}
+        __label="textarea"
+        {...attrs}
+      />
+    )
+  },
+})
diff --git a/packages/c-textarea/src/index.tsx b/packages/c-textarea/src/index.tsx
@@ -0,0 +1,2 @@
+export { CTextarea } from "./c-textarea"
+export type { CTextareaNativeProps, CTextareaProps } from "./c-textarea"
diff --git a/packages/c-textarea/tests/c-textarea.test.ts b/packages/c-textarea/tests/c-textarea.test.ts
@@ -0,0 +1,7 @@
+import { render } from "../../test-utils/src"
+import { CTextarea } from "../src"
+
+it("should render properly", () => {
+  const { asFragment } = render(CTextarea)
+  expect(asFragment()).toMatchSnapshot()
+})
diff --git a/packages/c-textarea/tsconfig.json b/packages/c-textarea/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "./index.tsx"]
+}
diff --git a/packages/c-textarea/tsup.config.ts b/packages/c-textarea/tsup.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "tsup"
+import EsbuildPluginJSX from "unplugin-vue-jsx/esbuild"
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  esbuildPlugins: [
+    EsbuildPluginJSX({
+      include: [/.[jt]sx?$/],
+    }) as any,
+  ],
+  metafile: true,
+  external: ["lodash.mergewith"],
+  format: ["esm", "cjs"],
+  entry: ["src/**/*.(ts|tsx)"],
+  keepNames: true,
+})
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -54,6 +54,7 @@
     "@chakra-ui/c-spinner": "workspace:*",
     "@chakra-ui/c-table": "workspace:*",
     "@chakra-ui/c-tag": "workspace:*",
+    "@chakra-ui/c-textarea": "workspace:*",
     "@chakra-ui/c-theme-provider": "workspace:*",
     "@chakra-ui/c-toast": "workspace:*",
     "@chakra-ui/c-visually-hidden": "workspace:*",
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json`
`5`	`5`	`{`
`6`	`6`	`"name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",`
`7`	`7`	`"description": "<%= 'Chakra UI Vue \| ' + h.changeCase.sentence(description) + ' component'%>",`
`8`		`- "version": "0.0.0-next.0",`
	`8`	`+ "version": "0.0.0-beta.0",`
`9`	`9`	`"author": "Jonathan Bakebwa <codebender828@gmail.com>",`
`10`	`10`	`"homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",`
`11`	`11`	`"license": "MIT",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@chakra-ui/c-live-region",`
`3`	`3`	`"description": "Chakra UI Vue \| Creates a hidden live region with dynamic content based on triggered events to be read out by the screen reader on change of the content component",`
`4`		`- "version": "0.0.0-next.0",`
	`4`	`+ "version": "2.0.0-beta.0",`
`5`	`5`	`"author": "Jonathan Bakebwa <[email protected]>",`
`6`	`6`	`"homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",`
`7`	`7`	`"license": "MIT",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@chakra-ui/c-table",`
`3`	`3`	`"description": "Chakra UI Vue \| Table component is used to organize and display data efficiently it renders a table element by default component",`
`4`		`- "version": "0.0.0-next.0",`
	`4`	`+ "version": "2.0.0-beta.0",`
`5`	`5`	`"author": "Jonathan Bakebwa <[email protected]>",`
`6`	`6`	`"homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",`
`7`	`7`	`"license": "MIT",`