feat(accordion): new component (#378)

* chore:update

* chore:update

* chore:update

* chore:update

* chore:update

* fix: css

* refactor: css name

* fix: some corrections

* refactor: selection-type to type

* fix: test

* chore: slots update

* fix: default slots

* fix: --radix

* fix: collapsiblecontent

* chore: fix ref

* fix: type

* fix: package name

* fix: lock

Author: kbrkiras

README.md

@@ -18,15 +18,15 @@ Website: [Oku Website](https://oku-ui.com)
 
 Please read our [contributing guide](https://github.com/oku-ui/primitives/blob/master/CONTRIBUTING.md)
 
-# TODO Components - 19/28
+# TODO Components - 22/28
 
 Enter the component you want most in the components, leave the emojis and follow.
 
 **Developers can work on unclaimed components**.
 
 | Component | Description | Status | Docs |
 | --- | --- | --- | --- |
-| [Accordion](https://github.com/oku-ui/primitives/issues/3) | A group of collapsible panels | 🚧 In Progress | -  |
+| [Accordion](https://oku-ui.com/primitives/components/accordion) | <span><a href="https://www.npmjs.com/package/@oku-ui/accordion "><img src="https://img.shields.io/npm/v/@oku-ui/accordion.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/accordion"><img src="https://img.shields.io/npm/dm/@oku-ui/accordion.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a> </span> | <span> <a href="https://oku-ui.com/primitives/components/accordion"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 | [Alert Dialog](https://oku-ui.com/primitives/components/alert-dialog) | <span><a href="https://www.npmjs.com/package/@oku-ui/alert-dialog "><img src="https://img.shields.io/npm/v/@oku-ui/alert-dialog.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/alert-dialog"><img src="https://img.shields.io/npm/dm/@oku-ui/alert-dialog.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a> </span> | <span> <a href="https://oku-ui.com/primitives/components/alert-dialog"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 | [Aspect Ratio](https://oku-ui.com/primitives/components/aspect-ratio) | <span><a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio "><img src="https://img.shields.io/npm/v/@oku-ui/aspect-ratio.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio"><img src="https://img.shields.io/npm/dm/@oku-ui/aspect-ratio.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a> </span> | <span> <a href="https://oku-ui.com/primitives/components/aspect-ratio"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 | [Avatar](https://oku-ui.com/primitives/components/avatar) | <span><a href="https://www.npmjs.com/package/@oku-ui/avatar "><img src="https://img.shields.io/npm/v/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/avatar"><img src="https://img.shields.io/npm/dm/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a></span> | <span> <a href="https://oku-ui.com/primitives/components/avatar"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |

package.json

@@ -41,6 +41,7 @@
     "@clack/prompts": "^0.7.0",
     "@egoist/tailwindcss-icons": "^1.1.0",
     "@iconify-json/ph": "^1.1.6",
+    "@oku-ui/accordion": "workspace:^",
     "@oku-ui/alert-dialog": "workspace:^",
     "@oku-ui/arrow": "workspace:^",
     "@oku-ui/aspect-ratio": "workspace:^",
@@ -124,6 +125,7 @@
   },
   "pnpm": {
     "overrides": {
+      "@oku-ui/accordion": "workspace:^",
       "@oku-ui/alert-dialog": "workspace:^",
       "@oku-ui/arrow": "workspace:^",
       "@oku-ui/aspect-ratio": "workspace:^",

packages/components/accordion/README.md

@@ -0,0 +1,14 @@
+# Accordion
+A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+
+![@oku-ui/accordion](./../../../.github/assets/og/oku-accordion.jpg)
+
+<span><a href="https://www.npmjs.com/package/@oku-ui/accordion "><img src="https://img.shields.io/npm/v/@oku-ui/accordion?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/accordion"> <img src="https://img.shields.io/npm/dm/@oku-ui/accordion?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/accordion"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
+## Installation
+
+```sh
+$ pnpm add @oku-ui/accordion
+```
+
+[Documentation](https://oku-ui.com/primitives/components/accordion)

packages/components/accordion/build.config.ts

@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild'
+
+const isClean = (process.env.CLEAN || 'false') === 'true'
+export default defineBuildConfig({
+  declaration: true,
+  clean: isClean,
+})

packages/components/accordion/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@oku-ui/accordion",
+  "type": "module",
+  "version": "0.0.0",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "funding": "https://github.com/sponsors/productdevbook",
+  "homepage": "https://oku-ui.com/primitives",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oku-ui/primitives.git",
+    "directory": "packages/components/label"
+  },
+  "bugs": {
+    "url": "https://github.com/oku-ui/primitives/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "clean": "rimraf ./dist && rimraf ./node_modules"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "@oku-ui/collapsible": "latest",
+    "@oku-ui/collection": "latest",
+    "@oku-ui/direction": "latest",
+    "@oku-ui/primitive": "latest",
+    "@oku-ui/provide": "latest",
+    "@oku-ui/roving-focus": "latest",
+    "@oku-ui/use-composable": "latest",
+    "@oku-ui/utils": "latest"
+  },
+  "devDependencies": {
+    "tsconfig": "workspace:^"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/components/accordion/src/accordion.ts

@@ -0,0 +1,68 @@
+import { defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
+import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
+import { OkuAccordionImplSingle } from './accordionImplSingle'
+import { OkuAccordionImplMultiple } from './accordionImplMultiple'
+import { ACCORDION_NAME, CollectionProvider, accordionProps, scopeAccordionProps } from './props'
+import type { AccordionImplSingleProps, AccordionNativeElement } from './props'
+
+const accordion = defineComponent({
+  name: ACCORDION_NAME,
+  inheritAttrs: false,
+  props: {
+    ...accordionProps.props,
+    ...scopeAccordionProps,
+  },
+  setup(props, { attrs, slots }) {
+    const {
+      type, ...accordionPropsRefs
+    } = toRefs(props)
+    const forwardRef = useForwardRef
+
+    const _reactiveProps = reactive(accordionPropsRefs) as AccordionImplSingleProps
+    const reactiveProps = reactiveOmit(_reactiveProps, (key, _value) => key === undefined)
+
+    return () => {
+      if (props.type) {
+        const value = props.value || props.defaultValue
+        if (props.type && !['single', 'multiple'].includes(props.type)) {
+          return new Error(
+            'Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.',
+          )
+        }
+        if (props.type === 'multiple' && typeof value === 'string') {
+          return new Error(
+            'Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.',
+          )
+        }
+        if (props.type === 'single' && Array.isArray(value)) {
+          return new Error(
+            'Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.',
+          )
+        }
+      }
+
+      return h(CollectionProvider, {
+        scope: props.scopeOkuAccordion,
+      },
+      {
+        default: () => type.value === 'multiple'
+          ? h(OkuAccordionImplMultiple, {
+            ...mergeProps(attrs, reactiveProps),
+            ref: forwardRef,
+          }, slots)
+          : h(OkuAccordionImplSingle, {
+            ...mergeProps(attrs, reactiveProps),
+            ref: forwardRef,
+          }, slots),
+      },
+      )
+    }
+  },
+})
+
+// TODO: https://github.com/vuejs/core/pull/7444 after delete
+export const OkuAccordion = accordion as typeof accordion
+&
+(new () => {
+  $props: AccordionNativeElement
+})

packages/components/accordion/src/accordionContent.ts

@@ -0,0 +1,54 @@
+import { OkuCollapsibleContent } from '@oku-ui/collapsible'
+import { primitiveProps } from '@oku-ui/primitive'
+import { defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
+import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
+import { ACCORDION_NAME, type AccordionContentNativeElement, CONTENT_NAME, accordionContentProps, scopeAccordionProps, useAccordionInject, useAccordionItemInject, useCollapsibleScope } from './props'
+
+/**
+ * `AccordionContent` contains the collapsible content for an `AccordionItem`.
+ */
+const accordionContent = defineComponent({
+  name: CONTENT_NAME,
+  inheritAttrs: false,
+  props: {
+    ...primitiveProps,
+    ...accordionContentProps.props,
+    ...scopeAccordionProps,
+  },
+  setup(props, { slots, attrs }) {
+    const {
+      scopeOkuAccordion,
+      ...contentProps
+    } = toRefs(props)
+
+    const accordionInject = useAccordionInject(ACCORDION_NAME, scopeOkuAccordion.value)
+    const itemInject = useAccordionItemInject(CONTENT_NAME, scopeOkuAccordion.value)
+    const collapsibleScope = useCollapsibleScope(scopeOkuAccordion.value)
+
+    const _reactive = reactive(contentProps)
+    const _contentProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
+    const forwardRef = useForwardRef()
+
+    return () => h(OkuCollapsibleContent, {
+      'role': 'region',
+      'aria-labelledby': itemInject.triggerId.value,
+      'data-orientation': accordionInject.orientation.value,
+      ...collapsibleScope,
+      ...mergeProps(attrs, _contentProps),
+      'ref': forwardRef,
+      'style': {
+        '--oku-accordion-content-height': 'var(--oku-collapsible-content-height)',
+        '--oku-accordion-content-width': 'var(--oku-collapsible-content-width)',
+        ...attrs.style as any,
+      },
+    }, slots)
+  },
+})
+
+// TODO: https://github.com/vuejs/core/pull/7444 after delete
+export const OkuAccordionContent = accordionContent as typeof accordionContent
+&
+(new () => {
+  $props: AccordionContentNativeElement
+})

packages/components/accordion/src/accordionHeader.ts

@@ -0,0 +1,50 @@
+import { defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
+import { Primitive, primitiveProps } from '@oku-ui/primitive'
+import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
+import { ACCORDION_NAME, type AccordionHeaderNativeElement, HEADER_NAME, accordionHeaderProps, scopeAccordionProps, useAccordionInject, useAccordionItemInject } from './props'
+import { getState } from './utils'
+
+/**
+ * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible
+ * whether or not its content is collapsed.
+ */
+const accordionHeader = defineComponent({
+  name: HEADER_NAME,
+  inheritAttrs: false,
+  props: {
+    ...primitiveProps,
+    ...accordionHeaderProps.props,
+    ...scopeAccordionProps,
+  },
+  emits: accordionHeaderProps.emits,
+  setup(props, { slots, attrs }) {
+    const {
+      scopeOkuAccordion, ...headerProps
+    } = toRefs(props)
+
+    const accordionInject = useAccordionInject(ACCORDION_NAME, scopeOkuAccordion.value)
+
+    const itemInject = useAccordionItemInject(HEADER_NAME, scopeOkuAccordion.value)
+
+    const _reactive = reactive(headerProps)
+    const _headerProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
+    const forwardRef = useForwardRef()
+
+    return () => h(Primitive.h3, {
+      'data-orientation': accordionInject.orientation.value,
+      'data-state': getState(itemInject.open?.value),
+      'data-disabled': itemInject.disabled?.value ? '' : undefined,
+      ...mergeProps(attrs, _headerProps),
+      'ref': forwardRef,
+
+    }, { default: () => slots.default?.() })
+  },
+})
+
+// TODO: https://github.com/vuejs/core/pull/7444 after delete
+export const OkuAccordionHeader = accordionHeader as typeof accordionHeader
+&
+(new () => {
+  $props: AccordionHeaderNativeElement
+})