@chakra-ui/vue-utils - npm Package Compare versions

Comparing version 0.1.0-alpha.6 to 0.1.0-alpha.7

CHANGELOG.md

 # @chakra-ui/vue-utils
 
+## 0.1.0-alpha.7
+
+### Minor Changes
+
+- chore: parity release
+
 ## 0.1.0-alpha.6
 
-### Patch Changes
+### Minor Changes
 
-- Mock release
+- [#108](https://github.com/chakra-ui/chakra-ui-vue-next/pull/108) [`a7df008`](https://github.com/chakra-ui/chakra-ui-vue-next/commit/a7df008af57158fbd9240645d4177cf862ca764d) Thanks [@codebender828](https://github.com/codebender828)! - Create form control and input components
 
+* [#91](https://github.com/chakra-ui/chakra-ui-vue-next/pull/91) [`64ec694`](https://github.com/chakra-ui/chakra-ui-vue-next/commit/64ec694a67bf0932ad8d7569cf4347cd1da48513) Thanks [@codebender828](https://github.com/codebender828)! - Create `CFormControl` component
+
 ## 0.1.0-alpha.5
@@ -10,0 +18,0 @@

index.ts

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

package.json

 {
   "name": "@chakra-ui/vue-utils",
-  "version": "0.1.0-alpha.6",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "typings": "dist/types/index.d.ts",
+  "version": "0.1.0-alpha.7",
+  "main": "dist/chakra-ui-vue-utils.cjs.js",
+  "module": "dist/chakra-ui-vue-utils.esm.js",
   "description": "Chakra UI Vue | Utils module",
@@ -12,13 +10,13 @@ "repository": "https://github.com/chakra-ui/chakra-ui-vue-next/tree/master/packages/utils",
   "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/chakra-ui-vue-utils.cjs.js",
+      "default": "./dist/chakra-ui-vue-utils.esm.js"
+    }
+  },
   "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": "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"
   },
   "dependencies": {
+    "@chakra-ui/utils": "^1.8.2",
     "css-box-model": "1.2.1",
@@ -30,4 +28,11 @@ "lodash.mergewith": "^4.6.2",
     "@types/lodash.mergewith": "^4.6.6",
-    "@types/object-assign": "4.0.30"
+    "@types/object-assign": "4.0.30",
+    "vue": "^3.2.24"
+  },
+  "peerDependencies": {
+    "vue": "^3.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

src/dom-query.ts

@@ -20,7 +20,7 @@ interface IChildNode extends ChildNode {
 export function getSelector(node: HTMLElement) {
-  const id = node.getAttribute('id')
+  const id = node.getAttribute("id")
 
-  if (id) return '#' + id
+  if (id) return "#" + id
 
-  let path = ''
+  let path = ""
 
@@ -32,8 +32,8 @@ while (node) {
     if (!parent) {
-      path = name + ' > ' + path
+      path = name + " > " + path
       continue
     }
 
-    if (node.getAttribute('id')) {
-      path = '#' + node.getAttribute('id') + ' > ' + path
+    if (node.getAttribute("id")) {
+      path = "#" + node.getAttribute("id") + " > " + path
       break
@@ -57,7 +57,7 @@ }
       const index = sameTagSiblings.indexOf(node)
-      name += ':nth-of-type(' + (index + 1) + ')'
+      name += ":nth-of-type(" + (index + 1) + ")"
     }
 
     if (path) {
-      path = name + ' > ' + path
+      path = name + " > " + path
     } else {
@@ -64,0 +64,0 @@ path = name

src/dom.ts

@@ -9,5 +9,5 @@ import {
   UnwrapRef,
-} from 'vue'
-import { debounce } from './timers'
-import { MaybeRef } from './types'
+} from "vue"
+import { debounce } from "./timers"
+import { MaybeRef } from "./types"
 
@@ -14,0 +14,0 @@ /**

src/index.ts

@@ -1,7 +0,7 @@
-export * from './vue-utils'
-export * from './layout'
-export * from './dom'
-export * from './dom-query'
-export * from './types'
-export * from './timers'
-export * from './props'
+export * from "./vue-utils"
+export * from "./layout"
+export * from "./dom"
+export * from "./dom-query"
+export * from "./types"
+export * from "./timers"
+export * from "./props"

src/layout.ts

 export function orient(options: {
-  orientation?: 'vertical' | 'horizontal'
+  orientation?: "vertical" | "horizontal"
   vertical: any
@@ -8,3 +8,3 @@ horizontal: any
   if (!orientation) return {}
-  return orientation === 'vertical' ? vertical : horizontal
+  return orientation === "vertical" ? vertical : horizontal
 }

src/props.ts

@@ -1,9 +0,9 @@
-import { DOMElements, ThemingProps } from '@chakra-ui/vue-system'
-import { PropType } from 'vue'
+import { DOMElements, ThemingProps } from "@chakra-ui/vue-system"
+import { PropType } from "vue"
 
 export const vueThemingProps = {
-  colorScheme: String as PropType<ThemingProps['colorScheme']>,
-  variant: String as PropType<ThemingProps['variant']>,
-  size: String as PropType<ThemingProps['size']>,
-  styleConfig: String as PropType<ThemingProps['styleConfig']>,
+  colorScheme: String as PropType<ThemingProps["colorScheme"]>,
+  variant: String as PropType<ThemingProps["variant"]>,
+  size: String as PropType<ThemingProps["size"]>,
+  styleConfig: String as PropType<ThemingProps["styleConfig"]>,
 }
@@ -18,5 +18,5 @@
     ThemingProps,
-    'colorScheme' | 'variant' | 'size' | 'styleConfig'
+    "colorScheme" | "variant" | "size" | "styleConfig"
   > {
-  as: DOMElements | 'router-link' | 'nuxt-link'
+  as: DOMElements | "router-link" | "nuxt-link"
 }

src/types.ts

@@ -1,2 +0,3 @@
-import { ComputedRef, Ref } from 'vue'
+import { ComputedRef, Ref, VNodeProps } from "vue"
+import { TemplateRef } from "./dom"
 
@@ -11,1 +12,6 @@ /**
 export type MaybeRef<T> = T | Ref<T> | ComputedRef<T>
+
+/** VNodeProps Object */
+export interface MergedVNodeProps extends VNodeProps {
+  ref: TemplateRef | ((el: TemplateRef | null) => void)
+}

src/vue-utils.ts

@@ -1,3 +0,3 @@
-import { isFunction, isObject } from '@chakra-ui/utils'
-import { inject, InjectionKey, provide, isVNode, Slots, VNode } from 'vue'
+import { isFunction, isObject } from "@chakra-ui/utils"
+import { inject, InjectionKey, provide, isVNode, Slots, VNode } from "vue"
 
@@ -30,3 +30,3 @@ export interface CreateContextOptions {
     strict = true,
-    errorMessage = 'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider',
+    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
     name,
@@ -78,3 +78,3 @@ } = options
 ) {
-  const validComponentTypes = ['function', 'object']
+  const validComponentTypes = ["function", "object"]
   if (!validComponentTypes.includes(typeof subject)) return false
@@ -85,6 +85,6 @@
     // Is object component with render function
-    if (typeof subject?.render === 'function' && isVNode(subject.render()))
+    if (typeof subject?.render === "function" && isVNode(subject.render()))
       return true
     // Is object component with setup function
-    else if (typeof subject?.setup === 'function') return true
+    else if (typeof subject?.setup === "function") return true
   }
@@ -91,0 +91,0 @@

tests/dom.test.ts

@@ -1,8 +0,8 @@
-import { render, waitMs, screen } from '@chakra-ui/vue-test-utils/src'
-import { defineComponent, h, nextTick, onMounted } from 'vue'
-import { useRef } from '../src/dom'
+import { render, waitMs, screen } from "@chakra-ui/vue-test-utils/src"
+import { defineComponent, h, nextTick, onMounted } from "vue"
+import { useRef } from "../src/dom"
 
 const ExampleComponent = defineComponent({
   setup(_, { slots }) {
-    return () => h('button', {}, () => slots?.default?.())
+    return () => h("button", {}, () => slots?.default?.())
   },
@@ -41,16 +41,16 @@ })
 
-it('`useDOMRef` should bind components to template elements', async () => {
+it("`useDOMRef` should bind components to template elements", async () => {
   renderComponent()
 
   await waitMs(500)
-  expect(screen.getByTestId('divElement')).toBe(_containerEl)
-  expect(screen.getByTestId('buttonComponent')).toBe(_componentEl)
+  expect(screen.getByTestId("divElement")).toBe(_containerEl)
+  expect(screen.getByTestId("buttonComponent")).toBe(_componentEl)
 })
 
-it('`useDOMRef` should bind components to render function elements', async () => {
+it("`useDOMRef` should bind components to render function elements", async () => {
   renderComponent()
 
   await waitMs(500)
-  expect(screen.getByTestId('divElement')).toBe(_containerEl)
-  expect(screen.getByTestId('buttonComponent')).toBe(_componentEl)
+  expect(screen.getByTestId("divElement")).toBe(_containerEl)
+  expect(screen.getByTestId("buttonComponent")).toBe(_componentEl)
 })

tests/utils.test.ts

@@ -1,3 +0,3 @@
-it('should be truthy', () => {
+it("should be truthy", () => {
   expect(1).toBe(1)
 })

tests/vue-helpers.test.ts

@@ -1,4 +0,4 @@
-import { createContext } from '@chakra-ui/vue-utils/src'
-import { defineComponent, h } from 'vue'
-import { render } from '@chakra-ui/vue-test-utils/src'
+import { createContext } from "@chakra-ui/vue-utils/src"
+import { defineComponent, h } from "vue"
+import { render } from "@chakra-ui/vue-test-utils/src"
 
@@ -10,5 +10,5 @@ interface ExampleContext {
 const [ExampleProvider, useExampleContext] = createContext<ExampleContext>({
-  name: 'ExampleContext',
+  name: "ExampleContext",
   errorMessage:
-    'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider',
+    "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
 })
@@ -19,3 +19,3 @@
     const { example } = useExampleContext()
-    return () => h('div', `injected: ${example}`)
+    return () => h("div", `injected: ${example}`)
   },
@@ -26,6 +26,6 @@ })
   // disable console.warn
-  jest.spyOn(console, 'warn').mockImplementation(() => {})
+  jest.spyOn(console, "warn").mockImplementation(() => {})
 })
 
-it('should provide and inject a context', () => {
+it("should provide and inject a context", () => {
   const { getByText } = render({
@@ -39,3 +39,3 @@ components: { ExampleComponent },
     setup() {
-      ExampleProvider({ example: 'works' })
+      ExampleProvider({ example: "works" })
     },
@@ -46,3 +46,3 @@ })
 
-it('should throw an error when there is no provider', () => {
+it("should throw an error when there is no provider", () => {
   expect(() => {
@@ -55,4 +55,4 @@ render({
   }).toThrowError(
-    'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider'
+    "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider"
   )
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

17868

decreased by-73.94%

Dependency count

5

increased by66.67%

Dev dependency count

3

increased by50%

Number of package files

17

decreased by-69.09%

Lines of code

423

decreased by-60.69%

Dependency changes

• + Added@chakra-ui/utils@^1.8.2

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@chakra-ui/utils@1.10.4(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@types/lodash@4.17.13(transitive)

• + Added@types/lodash.mergewith@4.6.6(transitive)

• + Added@vue/compiler-core@3.5.13(transitive)

• + Added@vue/compiler-dom@3.5.13(transitive)

• + Added@vue/compiler-sfc@3.5.13(transitive)

• + Added@vue/compiler-ssr@3.5.13(transitive)

• + Added@vue/reactivity@3.5.13(transitive)

• + Added@vue/runtime-core@3.5.13(transitive)

• + Added@vue/runtime-dom@3.5.13(transitive)

• + Added@vue/server-renderer@3.5.13(transitive)

• + Added@vue/shared@3.5.13(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedentities@4.5.0(transitive)

• + Addedestree-walker@2.0.2(transitive)

• + Addedframesync@5.3.0(transitive)

• + Addedmagic-string@0.30.14(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedtslib@2.8.1(transitive)

• + Addedvue@3.5.13(transitive)