Merge branch 'feat/c-skip-nav' of https://github.com/TylerAPfledderer/chakra-ui-vue-next into feat/c-skip-nav

TylerAPfledderer · TylerAPfledderer · commit a26b8ac0522d · 2022-09-30T18:46:45.000-04:00
diff --git a/packages/c-checkbox/package.json b/packages/c-checkbox/package.json
@@ -16,10 +16,7 @@
       "default": "./dist/chakra-ui-c-checkbox.esm.js"
     }
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
-  },
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next/tree/master/packages/c-checkbox",
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
   },
@@ -30,16 +27,16 @@
   "dependencies": {
     "@chakra-ui/c-form-control": "0.0.0-alpha.5",
     "@chakra-ui/c-motion": "0.1.0-alpha.9",
-    "@chakra-ui/utils": "2.0.3",
+    "@chakra-ui/utils": "^2.0.3",
     "@chakra-ui/vue-composables": "0.1.0-alpha.9",
     "@chakra-ui/vue-system": "0.1.0-alpha.10",
     "@chakra-ui/vue-utils": "0.1.0-alpha.10",
-    "@vueuse/motion": "1.5.4",
+    "@vueuse/motion": "^1.5.4",
     "@zag-js/checkbox": "0.1.6",
-    "@zag-js/vue": "0.1.14"
+    "@zag-js/vue": "^0.1.14"
   },
   "devDependencies": {
-    "vue": "^3.1.4"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-skip-nav/src/c-skip-nav.ts b/packages/c-skip-nav/src/c-skip-nav.ts
@@ -0,0 +1,110 @@
+/**
+ * Hey! Welcome to @chakra-ui/vue-next CSkipNav
+ *
+ * Component tandem to allow users to skip navigation content
+ *
+ * @see Docs     https://next.vue.chakra-ui.com/c-skip-nav
+ * @see Source   https://github.com/chakra-ui/chakra-ui-vue-next/blob/master/packages/c-skip-nav/src/c-skip-nav/c-skip-nav.ts
+ * @see WebAIM   https://webaim.org/techniques/skipnav/
+ */
+
+import { h, defineComponent } from "vue"
+import {
+  chakra,
+  ComponentWithProps,
+  DeepPartial,
+  HTMLChakraProps,
+  SystemStyleObject,
+  useStyleConfig,
+} from "@chakra-ui/vue-system"
+import { CBox } from "@chakra-ui/vue-next"
+
+const FALLBACK_ID = "chakra-skip-nav"
+
+export interface CSkipNavLinkProps extends HTMLChakraProps<"a"> {}
+
+export const CSkipNavLink: ComponentWithProps<DeepPartial<CSkipNavLinkProps>> =
+  defineComponent({
+    name: "CSkipNavLink",
+    props: {
+      id: {
+        type: String,
+        default: FALLBACK_ID,
+      },
+    },
+    setup(props, { slots, attrs }) {
+      function getBaseStyles(styles: any): SystemStyleObject {
+        return {
+          userSelect: "none",
+          border: "0",
+          borderRadius: "md",
+          fontWeight: "semibold",
+          height: "1px",
+          width: "1px",
+          margin: "-1px",
+          padding: "0",
+          outline: "0",
+          overflow: "hidden",
+          position: "absolute",
+          clip: "rect(0 0 0 0)",
+          ...styles,
+          _focus: {
+            clip: "auto",
+            width: "auto",
+            height: "auto",
+            boxShadow: "outline",
+            padding: "1rem",
+            position: "fixed",
+            top: "1.5rem",
+            insetStart: "1.5rem",
+            ...styles["_focusVisible"],
+          },
+        }
+      }
+
+      const styles = useStyleConfig("SkipLink", props)
+
+      return () => {
+        return h(
+          chakra("a", {
+            __css: {
+              ...getBaseStyles(styles.value),
+            },
+          }),
+          {
+            ...attrs,
+            href: `#${props.id}`,
+          },
+          slots
+        )
+      }
+    },
+  })
+
+export interface CSkipNavContentProps extends HTMLChakraProps<"div"> {}
+
+export const CSkipNavContent: ComponentWithProps<
+  DeepPartial<CSkipNavContentProps>
+> = defineComponent({
+  name: "CSkipNavContent",
+  props: {
+    id: {
+      type: String,
+      default: FALLBACK_ID,
+    },
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      return h(
+        chakra(CBox),
+        {
+          ...attrs,
+          id: props.id,
+          tabIndex: "-1",
+          "data-testid": FALLBACK_ID,
+        },
+        slots
+      )
+    }
+  },
+})
diff --git a/yarn.lock b/yarn.lock
@@ -1028,16 +1028,6 @@
   dependencies:
     "@chakra-ui/theme-tools" "^2.0.2"
 
-"@chakra-ui/c-motion@0.0.0-alpha.9":
-  version "0.1.0-alpha.9"
-  dependencies:
-    "@chakra-ui/styled-system" "^2.2.2"
-    "@chakra-ui/utils" "^2.0.3"
-    "@chakra-ui/vue-composables" "0.1.0-alpha.9"
-    "@chakra-ui/vue-system" "0.1.0-alpha.10"
-    "@chakra-ui/vue-utils" "0.1.0-alpha.10"
-    "@vueuse/motion" "^1.5.4"
-
 "@chakra-ui/styled-system@^2.2.2":
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.2.5.tgz#d1754d2117f554551b914ef060e81548c6cc9702"
@@ -3856,16 +3846,6 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-core@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.39.tgz#0d77e635f4bdb918326669155a2dc977c053943e"
-  integrity sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==
-  dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/shared" "3.2.39"
-    estree-walker "^2.0.2"
-    source-map "^0.6.1"
-
 "@vue/compiler-dom@3.2.37", "@vue/compiler-dom@^3.0.11":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz#10d2427a789e7c707c872da9d678c82a0c6582b5"
@@ -3874,14 +3854,6 @@
     "@vue/compiler-core" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/compiler-dom@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz#bd69d35c1a48fe2cea4ab9e96d2a3a735d146fdf"
-  integrity sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==
-  dependencies:
-    "@vue/compiler-core" "3.2.39"
-    "@vue/shared" "3.2.39"
-
 "@vue/compiler-sfc@3.2.37", "@vue/compiler-sfc@^3.0.11", "@vue/compiler-sfc@^3.2.29", "@vue/compiler-sfc@^3.2.4":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz#3103af3da2f40286edcd85ea495dcb35bc7f5ff4"
@@ -3898,22 +3870,6 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
-"@vue/compiler-sfc@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz#8fe29990f672805b7c5a2ecfa5b05e681c862ea2"
-  integrity sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==
-  dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.39"
-    "@vue/compiler-dom" "3.2.39"
-    "@vue/compiler-ssr" "3.2.39"
-    "@vue/reactivity-transform" "3.2.39"
-    "@vue/shared" "3.2.39"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
-    postcss "^8.1.10"
-    source-map "^0.6.1"
-
 "@vue/compiler-ssr@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz#4899d19f3a5fafd61524a9d1aee8eb0505313cff"
@@ -3922,14 +3878,6 @@
     "@vue/compiler-dom" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/compiler-ssr@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz#4f3bfb535cb98b764bee45e078700e03ccc60633"
-  integrity sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==
-  dependencies:
-    "@vue/compiler-dom" "3.2.39"
-    "@vue/shared" "3.2.39"
-
 "@vue/devtools-api@^6.0.0-beta.19", "@vue/devtools-api@^6.1.4":
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.0.tgz#e3dc98a0cce8e87292745e2d24c9ee8c274a023b"
@@ -3953,31 +3901,13 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity-transform@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz#da6ae6c8fd77791b9ae21976720d116591e1c4aa"
-  integrity sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==
-  dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.39"
-    "@vue/shared" "3.2.39"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
-
 "@vue/reactivity@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.37.tgz#5bc3847ac58828e2b78526e08219e0a1089f8848"
   integrity sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==
   dependencies:
     "@vue/shared" "3.2.37"
 
-"@vue/reactivity@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.39.tgz#e6e3615fe2288d4232b104640ddabd0729a78c80"
-  integrity sha512-vlaYX2a3qMhIZfrw3Mtfd+BuU+TZmvDrPMa+6lpfzS9k/LnGxkSuf0fhkP0rMGfiOHPtyKoU9OJJJFGm92beVQ==
-  dependencies:
-    "@vue/shared" "3.2.39"
-
 "@vue/runtime-core@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.37.tgz#7ba7c54bb56e5d70edfc2f05766e1ca8519966e3"
@@ -3986,14 +3916,6 @@
     "@vue/reactivity" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/runtime-core@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.39.tgz#dc1faccab11b3e81197aba33fb30c9447c1d2c84"
-  integrity sha512-xKH5XP57JW5JW+8ZG1khBbuLakINTgPuINKL01hStWLTTGFOrM49UfCFXBcFvWmSbci3gmJyLl2EAzCaZWsx8g==
-  dependencies:
-    "@vue/reactivity" "3.2.39"
-    "@vue/shared" "3.2.39"
-
 "@vue/runtime-dom@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz#002bdc8228fa63949317756fb1e92cdd3f9f4bbd"
@@ -4003,15 +3925,6 @@
     "@vue/shared" "3.2.37"
     csstype "^2.6.8"
 
-"@vue/runtime-dom@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.39.tgz#4a8cb132bcef316e8151c5ed07fc7272eb064614"
-  integrity sha512-4G9AEJP+sLhsqf5wXcyKVWQKUhI+iWfy0hWQgea+CpaTD7BR0KdQzvoQdZhwCY6B3oleSyNLkLAQwm0ya/wNoA==
-  dependencies:
-    "@vue/runtime-core" "3.2.39"
-    "@vue/shared" "3.2.39"
-    csstype "^2.6.8"
-
 "@vue/server-renderer@3.2.37", "@vue/server-renderer@^3.0.11", "@vue/server-renderer@^3.0.9", "@vue/server-renderer@^3.2.29":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.37.tgz#840a29c8dcc29bddd9b5f5ffa22b95c0e72afdfc"
@@ -4020,24 +3933,11 @@
     "@vue/compiler-ssr" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/server-renderer@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.39.tgz#4358292d925233b0d8b54cf0513eaece8b2351c5"
-  integrity sha512-1yn9u2YBQWIgytFMjz4f/t0j43awKytTGVptfd3FtBk76t1pd8mxbek0G/DrnjJhd2V7mSTb5qgnxMYt8Z5iSQ==
-  dependencies:
-    "@vue/compiler-ssr" "3.2.39"
-    "@vue/shared" "3.2.39"
-
 "@vue/shared@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.37.tgz#8e6adc3f2759af52f0e85863dfb0b711ecc5c702"
   integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==
 
-"@vue/shared@3.2.39":
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.39.tgz#302df167559a1a5156da162d8cc6760cef67f8e3"
-  integrity sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==
-
 "@vue/test-utils@^2.0.0-rc.10", "@vue/test-utils@^2.0.0-rc.18", "@vue/test-utils@^2.0.0-rc.6":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.2.tgz#0b5edd683366153d5bc5a91edc62f292118710eb"
@@ -4150,14 +4050,6 @@
     "@vueuse/shared" "4.9.1"
     vue-demi "*"
 
-"@vueuse/core@^4.7.0":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-4.11.2.tgz#d4f54bd38e7c289c6f6357992c02423774cb26d9"
-  integrity sha512-4A17XvKXpMR6829EVWvrdSKEeAjTWaiC3+xh51KEtlyCwvWQwZ0xwKDrbMj+e15ANxjHrTw/0bJVaWDfPQt/Pw==
-  dependencies:
-    "@vueuse/shared" "4.11.2"
-    vue-demi "*"
-
 "@vueuse/core@^6.0.0":
   version "6.9.2"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.9.2.tgz#76b16d01f33cf367dd1a2d7f2e31d106443ceb8a"
@@ -4186,15 +4078,6 @@
     qrcode "^1.4.4"
     universal-cookie "^4.0.4"
 
-"@vueuse/motion@1.5.4":
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/@vueuse/motion/-/motion-1.5.4.tgz#ab5eb0de143a664f217f93ecf059cd6404246536"
-  integrity sha512-hSGnVOzzXfp9q9WMDYZImckQCp5BZb6WM1kq+pOZHhLolPt9JqPnK/gImIE/xU27bKZwjE8PeTTcIhCC18xwmQ==
-  dependencies:
-    "@vueuse/core" "^4.7.0"
-    popmotion "^9.3.5"
-    vue-demi "0.7.4"
-
 "@vueuse/motion@^1.5.4":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@vueuse/motion/-/motion-1.6.0.tgz#dff42b4137433da1fd5a8797826f70c105592278"
@@ -4423,7 +4306,7 @@
   dependencies:
     csstype "3.1.0"
 
-"@zag-js/vue@0.1.14", "@zag-js/vue@^0.1.14":
+"@zag-js/vue@^0.1.14":
   version "0.1.14"
   resolved "https://registry.yarnpkg.com/@zag-js/vue/-/vue-0.1.14.tgz#970e1b5e1847e55fbb330604d311a5ae066e3b61"
   integrity sha512-t54vB6BxeEYatpxRLk+kXypyLDnoUbwBzMeplZ4gGdAF+0FAJNvhpd9CV/ViykqLXCYUDdi1K8/BYxYdirtFPA==
@@ -14066,7 +13949,7 @@ pnp-webpack-plugin@^1.7.0:
   dependencies:
     ts-pnp "^1.1.6"
 
-popmotion@^9.3.5, popmotion@^9.4.0:
+popmotion@^9.4.0:
   version "9.4.2"
   resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.4.2.tgz#0fccc191b3ecbc3e33af2d0cb9a569a9c49d6105"
   integrity sha512-j1sSXszfQ6LkqML2NaqAEn1XmwT/TWUe06lXgIUGwomHdVWjM0W6tLay+i1v9zrIMZLBDXslZU9W4RKWhgPPMw==
@@ -17951,11 +17834,6 @@ vue-demi@*:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.2.tgz#f6081c2feb5b698549729a81683ce029b8da289e"
   integrity sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==
 
-vue-demi@0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.7.4.tgz#4c6be525788e1f6b3fd5d4f5f9f2148cf6645979"
-  integrity sha512-PT0qzI9Rp8R8eUAsTPXADC+KAZdrMufmbZqEMMqvaiesWyjCpgyuuvS5Su8cvBjK9RevLT/YfFiKWxc8YB9/8g==
-
 vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
@@ -18065,17 +17943,6 @@ vue3-perfect-scrollbar@^1.5.5:
     perfect-scrollbar "^1.5.5"
     postcss-import "^12.0.0"
 
-vue@^3.1.4:
-  version "3.2.39"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.39.tgz#de071c56c4c32c41cbd54e55f11404295c0dd62d"
-  integrity sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g==
-  dependencies:
-    "@vue/compiler-dom" "3.2.39"
-    "@vue/compiler-sfc" "3.2.39"
-    "@vue/runtime-dom" "3.2.39"
-    "@vue/server-renderer" "3.2.39"
-    "@vue/shared" "3.2.39"
-
 vue@^3.2.37:
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"
