feat: create tabs

codebender828 · codebender828 · commit 62b86e7e3c51 · 2023-03-29T02:24:11.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-03-28T16:40:42.002Z
+ * This file was generated on 2023-03-28T18:16:17.195Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -169,9 +169,16 @@ declare module "@vue/runtime-core" {
     CStack: typeof import("@chakra-ui/vue-next")["CStack"]
     CStackDivider: typeof import("@chakra-ui/vue-next")["CStackDivider"]
     CStackItem: typeof import("@chakra-ui/vue-next")["CStackItem"]
+    CTab: typeof import("@chakra-ui/vue-next")["CTab"]
+    CTabIndicator: typeof import("@chakra-ui/vue-next")["CTabIndicator"]
+    CTabList: typeof import("@chakra-ui/vue-next")["CTabList"]
+    CTabPanel: typeof import("@chakra-ui/vue-next")["CTabPanel"]
+    CTabPanels: typeof import("@chakra-ui/vue-next")["CTabPanels"]
+    CTabTrigger: typeof import("@chakra-ui/vue-next")["CTabTrigger"]
     CTable: typeof import("@chakra-ui/vue-next")["CTable"]
     CTableCaption: typeof import("@chakra-ui/vue-next")["CTableCaption"]
     CTableContainer: typeof import("@chakra-ui/vue-next")["CTableContainer"]
+    CTabs: typeof import("@chakra-ui/vue-next")["CTabs"]
     CTbody: typeof import("@chakra-ui/vue-next")["CTbody"]
     CTd: typeof import("@chakra-ui/vue-next")["CTd"]
     CText: typeof import("@chakra-ui/vue-next")["CText"]
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-03-28T16:40:42.002Z
+ * This file was generated on 2023-03-28T18:16:17.195Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -169,9 +169,16 @@ declare module "@vue/runtime-core" {
     CStack: typeof import("@chakra-ui/vue-next")["CStack"]
     CStackDivider: typeof import("@chakra-ui/vue-next")["CStackDivider"]
     CStackItem: typeof import("@chakra-ui/vue-next")["CStackItem"]
+    CTab: typeof import("@chakra-ui/vue-next")["CTab"]
+    CTabIndicator: typeof import("@chakra-ui/vue-next")["CTabIndicator"]
+    CTabList: typeof import("@chakra-ui/vue-next")["CTabList"]
+    CTabPanel: typeof import("@chakra-ui/vue-next")["CTabPanel"]
+    CTabPanels: typeof import("@chakra-ui/vue-next")["CTabPanels"]
+    CTabTrigger: typeof import("@chakra-ui/vue-next")["CTabTrigger"]
     CTable: typeof import("@chakra-ui/vue-next")["CTable"]
     CTableCaption: typeof import("@chakra-ui/vue-next")["CTableCaption"]
     CTableContainer: typeof import("@chakra-ui/vue-next")["CTableContainer"]
+    CTabs: typeof import("@chakra-ui/vue-next")["CTabs"]
     CTbody: typeof import("@chakra-ui/vue-next")["CTbody"]
     CTd: typeof import("@chakra-ui/vue-next")["CTd"]
     CText: typeof import("@chakra-ui/vue-next")["CText"]
diff --git a/modules/nuxt/playground/pages/tabs.vue b/modules/nuxt/playground/pages/tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <chakra.div data-testid="simple-tabs-example">
-    <c-tabs default-value="two">
+    <c-tabs v-model="value">
       <c-tab-list>
         <c-tab value="one"> Item One </c-tab>
         <c-tab value="two"> Item Two </c-tab>
@@ -26,5 +26,6 @@ import {
   CTabPanel,
   CTabPanels,
   CTabIndicator,
-} from "../../../../packages/c-tabs/src"
+} from "@chakra-ui/vue-next"
+const value = ref("two")
 </script>
diff --git a/modules/nuxt/src/runtime/chakra.ts b/modules/nuxt/src/runtime/chakra.ts
@@ -2,6 +2,7 @@ import type * as NuxtAppTypes from "nuxt/app"
 import { defineNuxtPlugin, useAppConfig } from "#imports"
 import {
   cookieStorageManagerSSR,
+  localStorageManager,
   ColorModeConstants,
   extendTheme,
   ColorModeScriptProps,
@@ -61,9 +62,9 @@ export default defineNuxtPlugin((nuxtApp) => {
           : ssrColorMode,
       },
     }),
-    colorModeManager: cookieStorageManagerSSR(
-      ColorModeConstants.CookieStorageKey
-    ),
+    colorModeManager: !!ssrColorMode
+      ? cookieStorageManagerSSR(ColorModeConstants.CookieStorageKey)
+      : localStorageManager,
     icons: chakraConfig.icons,
   })
 
diff --git a/packages/c-alert/src/alert.tsx b/packages/c-alert/src/alert.tsx
@@ -84,6 +84,7 @@ export const CAlert = defineComponent({
     )
 
     const themingProps = computed<ThemingProps>(() => ({
+      styleConfig: props.styleConfig,
       colorScheme: colorScheme.value,
       variant: props.variant,
     }))
diff --git a/packages/c-popover/src/c-popover.tsx b/packages/c-popover/src/c-popover.tsx
@@ -17,6 +17,7 @@ import type * as ZT from "@zag-js/types"
 import { useId } from "@chakra-ui/vue-composables"
 import { useMotions } from "@vueuse/motion"
 import { useMultiStyleConfig } from "@chakra-ui/vue-system"
+import { vueThemingProps } from "@chakra-ui/vue-utils"
 
 type PopoverPropsContext = UsePopoverProps["context"]
 
@@ -65,6 +66,7 @@ const VuePopoverProps = {
     type: String as PropType<CPopoverProps["trigger"]>,
     default: "click",
   },
+  ...vueThemingProps,
 }
 
 export const CPopover = defineComponent({
diff --git a/packages/c-tabs/src/c-tab-indicator.tsx b/packages/c-tabs/src/c-tab-indicator.tsx
@@ -1,14 +1,33 @@
 import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
-import { defineComponent } from "vue"
+import { computed, defineComponent } from "vue"
 import { useTabsContext } from "./tabs.context"
 
 export type CTabIndicatorProps = HTMLChakraProps<"div">
 export const CTabIndicator = defineComponent({
   name: "CTabIndicator",
+  inheritAttrs: false,
   setup(_, { attrs, slots }) {
     const api = useTabsContext()
+    const tabIndicatorProps = computed(() => {
+      const { indicatorStyles, ...otherProps } = api.value.indicatorProps || {}
+      const { style, ...otherAttrs } = attrs || {}
+      return {
+        style: {
+          ...(indicatorStyles || {}),
+          ...(style || {}),
+        },
+        others: {
+          ...otherProps,
+          ...otherAttrs,
+        },
+      }
+    })
     return () => (
-      <chakra.div {...api.value.indicatorProps} {...attrs}>
+      <chakra.div
+        style={tabIndicatorProps.value.style}
+        {...tabIndicatorProps.value.others}
+        {...attrs}
+      >
         {slots.default?.()}
       </chakra.div>
     )
diff --git a/packages/c-tabs/src/c-tab-list.tsx b/packages/c-tabs/src/c-tab-list.tsx
@@ -1,6 +1,10 @@
-import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
-import { defineComponent, watchEffect } from "vue"
-import { useTabsContext } from "./tabs.context"
+import {
+  HTMLChakraProps,
+  SystemStyleObject,
+  chakra,
+} from "@chakra-ui/vue-system"
+import { computed, defineComponent, watchEffect } from "vue"
+import { useTabsContext, useTabsStyles } from "./tabs.context"
 
 export type CTabListProps = HTMLChakraProps<"div">
 
@@ -12,8 +16,20 @@ export const CTabList = defineComponent({
   setup(_, { attrs, slots }) {
     const api = useTabsContext()
 
+    const styles = useTabsStyles()
+
+    const tablistStyles = computed<SystemStyleObject>(() => ({
+      display: "flex",
+      ...styles.value.tablist,
+    }))
+
     return () => (
-      <chakra.div {...api.value.tablistProps} {...attrs}>
+      <chakra.div
+        __label="tabs__tablist"
+        __css={tablistStyles.value}
+        {...api.value.tablistProps}
+        {...attrs}
+      >
         {slots.default?.()}
       </chakra.div>
     )
diff --git a/packages/c-tabs/src/c-tab-panel.tsx b/packages/c-tabs/src/c-tab-panel.tsx
@@ -9,7 +9,7 @@ import {
   type PropType,
   defineComponent,
 } from "vue"
-import { useTabsContext } from "./tabs.context"
+import { useTabsContext, useTabsStyles } from "./tabs.context"
 import type { connect } from "@zag-js/tabs"
 
 type GetContentProps = Parameters<
@@ -34,11 +34,14 @@ export const CTabPanel = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const api = useTabsContext()
+    const styles = useTabsStyles()
 
     return () => (
       <chakra.div
         as={props.as}
         {...api.value.getContentProps({ value: props.value })}
+        __label="tabs__tabpanel"
+        __css={styles.value.tabpanel}
         {...attrs}
       >
         {slots.default?.()}
diff --git a/packages/c-tabs/src/c-tab-panels.tsx b/packages/c-tabs/src/c-tab-panels.tsx
@@ -1,14 +1,20 @@
 import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
 import { defineComponent } from "vue"
-import { useTabsContext } from "./tabs.context"
+import { useTabsContext, useTabsStyles } from "./tabs.context"
 
 export type CTabPanelsProps = HTMLChakraProps<"div">
 export const CTabPanels = defineComponent({
   name: "CTabPanels",
   setup(_, { attrs, slots }) {
     const api = useTabsContext()
+    const styles = useTabsStyles()
     return () => (
-      <chakra.div {...attrs} {...api.value.contentGroupProps}>
+      <chakra.div
+        {...api.value.contentGroupProps}
+        __label="tabs__tabpanels"
+        __css={styles.value.tabpanels}
+        {...attrs}
+      >
         {slots.default?.()}
       </chakra.div>
     )
diff --git a/packages/c-tabs/src/c-tab.tsx b/packages/c-tabs/src/c-tab.tsx
@@ -1,16 +1,18 @@
 import {
-  HTMLChakraProps,
+  type HTMLChakraProps,
   chakra,
   type DOMElements,
+  type SystemStyleObject,
 } from "@chakra-ui/vue-system"
 import {
   defineComponent,
   type Component,
   type DefineComponent,
   type PropType,
+  computed,
 } from "vue"
-import { CTabTrigger, CTabTriggerProps } from "./c-tab-trigger"
-import { useTabsContext } from "./tabs.context"
+import { CTabTrigger, type CTabTriggerProps } from "./c-tab-trigger"
+import { useTabsContext, useTabsStyles } from "./tabs.context"
 
 export type CTabProps = HTMLChakraProps<"div">
 export const CTab = defineComponent({
@@ -31,10 +33,22 @@ export const CTab = defineComponent({
     },
   },
   setup(props, { attrs, slots }) {
-    const api = useTabsContext()
+    const styles = useTabsStyles()
+    const tabStyles = computed<SystemStyleObject>(() => ({
+      outline: "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      ...styles.value.tab,
+    }))
 
     return () => (
-      <CTabTrigger {...props} {...attrs}>
+      <CTabTrigger
+        {...props}
+        {...attrs}
+        __label="tabs__tab"
+        __css={tabStyles.value}
+      >
         <chakra.button>{slots.default?.()}</chakra.button>
       </CTabTrigger>
     )
diff --git a/packages/c-tabs/src/c-tabs.tsx b/packages/c-tabs/src/c-tabs.tsx
@@ -74,11 +74,19 @@ import {
   type DefineComponent,
   ref,
   Ref,
+  mergeProps,
 } from "vue"
-import { chakra, DOMElements, HTMLChakraProps } from "@chakra-ui/vue-system"
+import {
+  chakra,
+  DOMElements,
+  HTMLChakraProps,
+  useMultiStyleConfig,
+} from "@chakra-ui/vue-system"
 import { tabsProps } from "./tabs.props"
 import { TabsContext, UseTabsProps, useTabs } from "./use-tabs"
-import { CTabsProvider } from "./tabs.context"
+import { CTabsProvider, CTabsStylesProvider } from "./tabs.context"
+import { vueThemingProps } from "@chakra-ui/vue-utils"
+import { filterUndefined } from "@chakra-ui/utils"
 
 export interface CTabsProps
   extends HTMLChakraProps<"div">,
@@ -94,23 +102,39 @@ export const CTabs = defineComponent({
       default: "div",
     },
     ...tabsProps,
+    ...vueThemingProps,
   },
-  emits: ["change", "focus", "delete"],
+  emits: ["change", "focus", "delete", "update:modelValue"],
   setup(props, { slots, attrs, emit }) {
-    const tabs = ref<Ref<HTMLElement | null>[]>([])
-    const panels = ref<Ref<HTMLElement | null>[]>([])
-
     const tabsProps = computed<UseTabsProps>(() => ({
       context: props,
       defaultValue: props.modelValue,
       emit,
     }))
-
     const api = useTabs(tabsProps.value)
-
     CTabsProvider(api)
+
+    const themingProps = computed(() =>
+      filterUndefined({
+        colorScheme: props.colorScheme,
+        variant: props.variant,
+        size: props.size,
+        styleConfig: props.styleConfig,
+      })
+    )
+
+    // Styles
+    const styles = useMultiStyleConfig("Tabs", themingProps)
+    CTabsStylesProvider(styles)
+
     return () => (
-      <chakra.div as={props.as} {...api.value.rootProps} {...attrs}>
+      <chakra.div
+        __label="tabs"
+        as={props.as}
+        {...api.value.rootProps}
+        __css={styles.value.root}
+        {...attrs}
+      >
         {slots.default?.()}
       </chakra.div>
     )
diff --git a/packages/c-tabs/src/tabs.context.ts b/packages/c-tabs/src/tabs.context.ts
@@ -1,31 +1,16 @@
 import type { connect } from "@zag-js/tabs"
 import type { ComputedRef, Ref } from "vue"
-import { customRef, triggerRef } from "vue"
 import { createContext } from "@chakra-ui/vue-utils"
 import type { UseTabsReturn } from "./use-tabs"
-import {
-  Descendant,
-  DescendantAuthority,
-  createDescendantRegister,
-} from "@chakra-ui/vue-composables"
+import { createStylesContext } from "@chakra-ui/vue-system"
+import type * as SS from "@chakra-ui/styled-system"
 
-export interface CTabRegistryContext {
-  tabs: ComputedRef<Ref<Ref<HTMLElement | null>[]>>
-  panels: ComputedRef<Ref<Ref<HTMLElement | null>[]>>
-  registerTab(tab: Ref<HTMLElement | null>): void
-  unregisterTab(tab: Ref<HTMLElement | null>): void
-  registerPanel(panel: Ref<HTMLElement | null>): void
-  unregisterPanel(panel: Ref<HTMLElement | null>): void
-}
-
-export interface CTabsAuthorityContext {
-  registerTabsDescendant: (id: string) => Descendant
-  useTabsAuthority: () => DescendantAuthority
-}
 export type CTabsContext = UseTabsReturn
 export const [CTabsProvider, useTabsContext] = createContext<
   ComputedRef<ReturnType<typeof connect>>
 >({
   name: "CTabsContext",
   strict: true,
 })
+
+export const [CTabsStylesProvider, useTabsStyles] = createStylesContext("Tabs")
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts

Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,7 @@ export const CAlert = defineComponent({`
`84`	`84`	`)`
`85`	`85`
`86`	`86`	`const themingProps = computed<ThemingProps>(() => ({`
	`87`	`+ styleConfig: props.styleConfig,`
`87`	`88`	`colorScheme: colorScheme.value,`
`88`	`89`	`variant: props.variant,`
`89`	`90`	`}))`