Merge pull request #188 from Shyrro/feature/pinInput

feat(cpininput): add c pin input

Author: codebender828

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2022-09-12T04:00:56.880Z
+ * This file was generated on 2022-10-06T19:08:38.068Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -79,6 +79,7 @@ declare module "@vue/runtime-core" {
     CButtonGroup: typeof import("@chakra-ui/vue-next")["CButtonGroup"]
     CIconButton: typeof import("@chakra-ui/vue-next")["CIconButton"]
     CCheckbox: typeof import("@chakra-ui/vue-next")["CCheckbox"]
+    CCheckboxGroup: typeof import("@chakra-ui/vue-next")["CCheckboxGroup"]
     CFocusLock: typeof import("@chakra-ui/vue-next")["CFocusLock"]
     CFormErrorIcon: typeof import("@chakra-ui/vue-next")["CFormErrorIcon"]
     CFormErrorMessage: typeof import("@chakra-ui/vue-next")["CFormErrorMessage"]
@@ -144,7 +145,11 @@ declare module "@vue/runtime-core" {
     CAnimatePresence: typeof import("@chakra-ui/vue-next")["CAnimatePresence"]
     CCollapse: typeof import("@chakra-ui/vue-next")["CCollapse"]
     CMotion: typeof import("@chakra-ui/vue-next")["CMotion"]
+    CPinInput: typeof import("@chakra-ui/vue-next")["CPinInput"]
+    CPinInputField: typeof import("@chakra-ui/vue-next")["CPinInputField"]
     CPortal: typeof import("@chakra-ui/vue-next")["CPortal"]
+    CSkipNavContent: typeof import("@chakra-ui/vue-next")["CSkipNavContent"]
+    CSkipNavLink: typeof import("@chakra-ui/vue-next")["CSkipNavLink"]
     CScrollLock: typeof import("@chakra-ui/vue-next")["CScrollLock"]
     CVisuallyHidden: typeof import("@chakra-ui/vue-next")["CVisuallyHidden"]
     CVisuallyHiddenInput: typeof import("@chakra-ui/vue-next")["CVisuallyHiddenInput"]

packages/c-pin-input/README.md

@@ -0,0 +1,60 @@
+# @chakra-ui/c-pin-input
+
+The pin input component is similar to the input component but is optimized for entering sequences of digits quickly
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-pin-input
+# or
+npm i @chakra-ui/c-pin-input
+```
+
+## Import
+
+This package exports the following components : 
+
+- **CPinInput** : The wrapper for all the field elements.
+- **CPinInputField**: The field element.
+- **CPinInputClearButton**: The button to clear all the fields.
+
+## Usage :
+
+### Basic : 
+
+```html
+<c-pin-input :value="['1', '2']">
+    <c-pin-input-field />
+    <c-pin-input-field />
+    <c-pin-input-field />
+    <c-pin-input-field />
+</c-pin-input>
+```
+
+### Event handling : 
+
+The `CPinInput` will trigger 3 events : 
+
+- `change` : Whenever the value changes. It also returns the new value of the input as an array in an object. `{ value: [] }`
+- `complete`: Trigger uppon completion of all the fields. Returns the value as an array, but also as a string. `{ value: [], valueAsString: '123' }`
+- `invalid`: Triggers if the input is invalid.
+
+```html
+<c-pin-input @change="triggerChange" @complete="complete">
+    <c-pin-input-field />
+    <c-pin-input-field />
+    <c-pin-input-field />
+    <c-pin-input-field />
+</c-pin-input>
+```
+
+### Props 
+
+`value`: Value of the input (Type: `Array`).
+`placeholder`: Changes the default placeholder (o)
+`blurOnComplete`: To blur the last input when the user completes the input.
+`type`: "alphanumeric" | "numeric"
+`otp`: To trigger smartphone OTP suggestion.
+`dir`: "rtl" | "ltr" . (Right-To-Left or Left-To-Right)
+`spacing`: Space between the fields.
+`mask` : Masks the value of the input by changing their type to "password"

packages/c-pin-input/examples/base-c-pin-input.vue

@@ -0,0 +1,13 @@
+<template>
+  <c-pin-input v-model="value">
+    <c-pin-input-field />
+    <c-pin-input-field />
+    <c-pin-input-field />
+    <c-pin-input-field />
+  </c-pin-input>
+</template>
+<script setup>
+import { ref } from "vue"
+import { CPinInput, CPinInputField } from "../src"
+const value = ref(["1", "2"])
+</script>

packages/c-pin-input/examples/index.ts

@@ -0,0 +1,3 @@
+export * as BaseCPinInput from "./base-c-pin-input.vue"
+export * as WithClearButton from "./with-clear-button.vue"
+export * as WithEvents from "./with-events.vue"

packages/c-pin-input/examples/with-clear-button.vue

@@ -0,0 +1,12 @@
+<template>
+  <c-pin-input>
+    <c-pin-input-field />
+    <c-pin-input-field />
+    <c-pin-input-field />
+    <c-pin-input-field />
+    <c-pin-input-clear-button>Clear</c-pin-input-clear-button>
+  </c-pin-input>
+</template>
+<script setup>
+import { CPinInput, CPinInputField, CPinInputClearButton } from "../src"
+</script>

packages/c-pin-input/examples/with-events.vue

@@ -0,0 +1,43 @@
+<template>
+  <c-stack>
+    <c-alert status="info" mb="3" v-if="alertVisible">
+      <c-alert-title> Change </c-alert-title>
+      <c-alert-description>
+        CPinInput value changed, new value : {{ value }}
+      </c-alert-description>
+    </c-alert>
+    <c-alert status="success" mb="3" v-if="completed">
+      <c-alert-title> Success </c-alert-title>
+      <c-alert-description>
+        CPinInput value completed. Value : {{ value }}</c-alert-description
+      >
+    </c-alert>
+    <chakra.p>An alert will show on change and on complete</chakra.p>
+    <c-pin-input @change="triggerChange" @complete="complete">
+      <c-pin-input-field />
+      <c-pin-input-field />
+      <c-pin-input-field />
+      <c-pin-input-field />
+    </c-pin-input>
+  </c-stack>
+</template>
+<script setup>
+import { ref } from "vue"
+import { CPinInput, CPinInputField } from "../src"
+const alertVisible = ref(false)
+const completed = ref(false)
+const value = ref("")
+
+const triggerChange = (result) => {
+  console.log(result?.value)
+  alertVisible.value = true
+  const currentValue = result?.value?.filter((item) => item)
+  if (currentValue?.length < 4) completed.value = false
+  value.value = result?.value?.join("")
+}
+
+const complete = (details) => {
+  completed.value = true
+  value.value = details.valueAsString
+}
+</script>

packages/c-pin-input/index.ts

@@ -0,0 +1 @@
+export * from './src'

packages/c-pin-input/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@chakra-ui/c-pin-input",
+  "description": "Chakra UI Vue | The pin input component is similar to the input component but is optimized for entering sequences of digits quickly component",
+  "version": "0.0.0-alpha.0",
+  "main": "dist/chakra-ui-c-pin-input.cjs.js",
+  "module": "dist/chakra-ui-c-pin-input.esm.js",
+  "author": "Shyrro <[email protected]>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/chakra-ui-c-pin-input.cjs.js",
+      "default": "./dist/chakra-ui-c-pin-input.esm.js"
+    }
+  },
+  "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"
+  },
+  "scripts": {
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@chakra-ui/vue-system": "0.1.0-alpha.10",
+    "@chakra-ui/vue-utils": "0.1.0-alpha.10",
+    "@zag-js/vue": "^0.1.14",
+    "@zag-js/pin-input": "0.1.14",
+    "@chakra-ui/c-input": "^0.0.0-alpha.5",
+    "@chakra-ui/utils": "^2.0.3"
+  },
+  "devDependencies": {
+    "vue": "^3.2.37"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.37"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/c-pin-input/src/c-pin-input.tsx

@@ -0,0 +1,144 @@
+/**
+ * Hey! Welcome to @chakra-ui/vue-next CPinInput
+ *
+ * The pin input component is similar to the input component but is optimized for entering sequences of digits quickly
+ *
+ * @see Docs     https://next.vue.chakra-ui.com/c-pin-input
+ * @see Source   https://github.com/chakra-ui/chakra-ui-vue-next/blob/master/packages/c-pin-input/src/c-pin-input/c-pin-input.tsx
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
+ */
+
+import { h, defineComponent, computed, PropType, ComputedRef } from "vue"
+import {
+  chakra,
+  createStylesContext,
+  useStyleConfig,
+} from "@chakra-ui/vue-system"
+import {
+  createContext,
+  getValidChildren,
+  vueThemingProps,
+} from "@chakra-ui/vue-utils"
+import { CInput } from "@chakra-ui/c-input"
+import { connect } from "@zag-js/pin-input"
+import { PinInputProps, usePinInputMachine } from "./use-pin-input"
+
+const [StylesProvider, useStyles] = createStylesContext("CPinInput")
+const [PinInputProvider, usePinInput] =
+  createContext<ComputedRef<ReturnType<typeof connect>>>()
+
+export { PinInputProvider, usePinInput }
+
+export const CPinInputProps = {
+  value: {
+    type: Object as PropType<Array<string>>,
+    default: [],
+  },
+  modelValue: {
+    type: Object as PropType<Array<string>>,
+    default: false,
+  },
+  id: {
+    type: String,
+    default: "0",
+  },
+  placeholder: {
+    type: String,
+    default: "o",
+  },
+  type: {
+    type: String as PropType<"alphanumeric" | "numeric">,
+    default: "numeric",
+  },
+  otp: {
+    type: Boolean,
+    default: false,
+  },
+  mask: {
+    type: Boolean,
+    default: false,
+  },
+  blurOnComplete: {
+    type: Boolean,
+    default: false,
+  },
+  dir: {
+    type: String as PropType<"rtl" | "ltr">,
+    default: "ltr",
+  },
+  spacing: {
+    type: [String, Number],
+    default: "0.75",
+  },
+  ...vueThemingProps,
+}
+
+export const CPinInput = defineComponent({
+  name: "CPinInput",
+  props: CPinInputProps,
+  emits: ["change", "invalid", "complete", "update:modelValue"],
+  setup(props, { slots, attrs, emit }) {
+    const styles = useStyleConfig("PinInput", props)
+
+    const inputStyles = computed(() => ({
+      ...styles.value,
+      mx: props.spacing,
+    }))
+    StylesProvider(inputStyles)
+
+    const api = usePinInputMachine(props as unknown as PinInputProps, emit)
+
+    PinInputProvider(api)
+
+    return () => (
+      <chakra.div __label="pin-input" {...api.value.rootProps} {...attrs}>
+        {() =>
+          getValidChildren(slots).map((child, index) =>
+            (child.type as any).name === "CPinInputField"
+              ? h(child, { index })
+              : child
+          )
+        }
+      </chakra.div>
+    )
+  },
+})
+
+export const CPinInputField = defineComponent({
+  name: "CPinInputField",
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup(props, { attrs }) {
+    const styles = useStyles()
+    const api = usePinInput()
+
+    return () => (
+      <CInput
+        __label="pin-input-field"
+        __css={styles.value}
+        {...api.value.getInputProps({ index: props.index })}
+        {...attrs}
+      />
+    )
+  },
+})
+
+export const CPinInputClearButton = defineComponent({
+  name: "CPinInputClearButton",
+  setup(_, { slots, attrs }) {
+    const api = usePinInput()
+    return () => (
+      <chakra.button
+        __label="pin-input-clear-button"
+        onClick={() => api.value.clearValue()}
+        {...attrs}
+      >
+        {() => getValidChildren(slots)}
+      </chakra.button>
+    )
+  },
+})

packages/c-pin-input/src/index.ts

@@ -0,0 +1 @@
+export * from "./c-pin-input"