feat(toolbar): new component

package.json

@@ -63,6 +63,7 @@
     "@oku-ui/tabs": "workspace:^",
     "@oku-ui/toggle": "workspace:^",
     "@oku-ui/toggle-group": "workspace:^",
+    "@oku-ui/toolbar": "workspace:^",
     "@oku-ui/tooltip": "workspace:^",
     "@oku-ui/use-composable": "workspace:^",
     "@oku-ui/utils": "workspace:^",

packages/components/dismissable-layer/src/util.ts

@@ -158,8 +158,7 @@ function dispatchUpdate() {
 }
 
 function handleAndDispatchCustomEvent<
-  E extends CustomEvent,
-  OriginalEvent extends Event,
+  E extends CustomEvent, OriginalEvent extends Event,
 >(
   name: string,
   handler: ((event: E) => void) | undefined,

packages/components/separator/src/separator.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue'
-import { defineComponent, h } from 'vue'
+import { computed, defineComponent, h } from 'vue'
 import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
@@ -39,8 +39,8 @@ export const separatorProps = {
      * Either `vertical` or `horizontal`. Defaults to `horizontal`.
      */
     orientation: {
-      type: String as PropType<Orientation>,
-      default: DEFAULT_ORIENTATION,
+      type: String as PropType<Orientation | undefined>,
+      default: undefined,
     },
     ...primitiveProps,
   },
@@ -54,11 +54,10 @@ const separator = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const { ...separatorAttrs } = attrs as SeparatorIntrinsicElement
-    const orientation = ORIENTATIONS.includes(props.orientation) ? props.orientation : DEFAULT_ORIENTATION
+    const orientation = computed(() => ORIENTATIONS.includes(props.orientation!) ? props.orientation : DEFAULT_ORIENTATION)
     // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
-    const ariaOrientation = orientation === 'vertical' ? orientation : undefined
-    const semanticProps = props.decorative ? { role: 'none' } : { 'aria-orientation': ariaOrientation, 'role': 'separator' }
-    const dataOrientation = { 'data-orientation': orientation }
+    const ariaOrientation = orientation.value === 'vertical' ? orientation : undefined
+    const semanticProps = props.decorative ? { role: 'none' } : { 'aria-orientation': ariaOrientation?.value, 'role': 'separator' }
 
     const forwardedRef = useForwardRef()
 
@@ -67,14 +66,14 @@ const separator = defineComponent({
         Primitive.div,
         {
           ...attrs,
-          ref: forwardedRef,
+          'ref': forwardedRef,
           ...semanticProps,
-          ...dataOrientation,
-          style: {
+          'data-orientation': orientation.value,
+          'style': {
             ...separatorAttrs,
             border: 'none',
           },
-          asChild: props.asChild,
+          'asChild': props.asChild,
         },
         {
           default: () => slots.default?.(),

packages/components/toggle-group/src/ToggleGroup.ts

@@ -1,5 +1,5 @@
 import { primitiveProps } from '@oku-ui/primitive'
-import { defineComponent, h, mergeProps, toRef } from 'vue'
+import { defineComponent, h, mergeProps } from 'vue'
 import type { Ref } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
 
@@ -9,10 +9,10 @@ import { createRovingFocusGroupScope } from '@oku-ui/roving-focus'
 import { scopeToggleGroupProps } from './utils'
 
 import type { ToggleGroupImplElement, ToggleGroupImplIntrinsicElement } from './ToggleGroupImpl'
-import type { ToggleGroupImplItemEmits, ToggleGroupImplItemProps } from './ToggleGroupImplItem'
-import { OkuToggleGroupImplItem, toggleGroupImplItemProps } from './ToggleGroupImplItem'
+import type { ToggleGroupVariantEmits, ToggleGroupVariantProps } from './ToggleGroupVariant'
+import { OkuToggleGroupVariant, toggleGroupVariantProps } from './ToggleGroupVariant'
 
-export const TOGGLE_GROUP_NAME = 'OkuRadioGroup'
+export const TOGGLE_GROUP_NAME = 'OkuToggleGroup'
 
 export const [createToggleGroupProvide, createToggleGroupScope] = createProvideScope(TOGGLE_GROUP_NAME, [
   createRovingFocusGroupScope,
@@ -38,18 +38,18 @@ export const [toggleGroupProvide, useToggleGroupInject]
 
 export const useRovingFocusGroupScope = createRovingFocusGroupScope()
 
-export type ToggleGroupProps = ToggleGroupImplItemProps
-export type ToggleGroupEmits = ToggleGroupImplItemEmits
+export type ToggleGroupProps = ToggleGroupVariantProps
+export type ToggleGroupEmits = ToggleGroupVariantEmits
 
 export type ToggleGroupElement = ToggleGroupImplElement
 export type ToggleGroupIntrinsicElement = ToggleGroupImplIntrinsicElement
 
 export const toggleGroupProps = {
   props: {
-    ...toggleGroupImplItemProps.props,
+    ...toggleGroupVariantProps.props,
   },
   emits: {
-    ...toggleGroupImplItemProps.emits,
+    ...toggleGroupVariantProps.emits,
   },
 }
 
@@ -64,12 +64,8 @@ const toggleGroup = defineComponent({
   emits: toggleGroupProps.emits,
   setup(props, { slots, attrs }) {
     const forwardedRef = useForwardRef()
-    const type = toRef(props, 'type')
     return () => {
-      if (!type.value)
-        throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``)
-
-      return h(OkuToggleGroupImplItem, {
+      return h(OkuToggleGroupVariant, {
         ...mergeProps(attrs, props),
         ref: forwardedRef,
       }, slots)

packages/components/toggle-group/src/ToggleGroupItem.ts

@@ -12,7 +12,7 @@ export const TOGGLE_ITEM_NAME = 'OkuToggleGroupItem'
 export type ToggleGroupItemIntrinsicElement = ToggleGroupItemImplIntrinsicElement
 export type ToggleGroupItemElement = ToggleGroupItemImplElement
 
-interface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, 'pressed'> {
+export interface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, 'pressed'> {
 
 }
 
@@ -34,7 +34,7 @@ const toggleGroupItem = defineComponent({
     ...scopeToggleGroupProps,
   },
   emits: toggleGroupItemProps.emits,
-  setup(props, { slots, emit, attrs }) {
+  setup(props, { slots, attrs }) {
     const {
       value,
       disabled,
@@ -62,13 +62,12 @@ const toggleGroupItem = defineComponent({
           pressed: pressed.value,
           disabled: _disabled.value,
           ref: forwardedRef,
-          onClick: (e) => {
-            emit('click', e)
-          },
         }, slots),
       })
       : h(OkuToggleGroupItemImpl, {
         ...mergeProps(attrs, props),
+        pressed: pressed.value,
+        disabled: _disabled.value,
         ref: forwardedRef,
       }, slots)
   },
@@ -78,5 +77,3 @@ export const OkuToggleGroupItem = toggleGroupItem as typeof toggleGroupItem &
 (new () => {
   $props: Partial<ToggleGroupItemElement>
 })
-
-export type { ToggleGroupItemProps }

packages/components/toggle-group/src/ToggleGroupImplItem.ts → packages/components/toggle-group/src/ToggleGroupVariant.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, ref, toRefs, useModel } from 'vue'
+import { computed, defineComponent, h, toRefs, useModel } from 'vue'
 import type { PropType } from 'vue'
 import { useControllable, useForwardRef } from '@oku-ui/use-composable'
 
@@ -8,10 +8,10 @@ import { toggleGroupValueProvider } from './ToggleGroup'
 
 const TOGGLE_GROUP_NAME = 'OkuToggleGroupImplSingle'
 
-export type ToggleGroupImplItemIntrinsicElement = ToggleGroupImplIntrinsicElement
-export type ToggleGroupImplItemElement = ToggleGroupImplElement
+export type ToggleGroupVariantIntrinsicElement = ToggleGroupImplIntrinsicElement
+export type ToggleGroupVariantElement = ToggleGroupImplElement
 
-export interface ToggleGroupImplItemProps extends ToggleGroupImplProps {
+export interface ToggleGroupVariantProps extends ToggleGroupImplProps {
   type: 'single' | 'multiple'
   /**
    * The controlled stateful value of the item that is pressed.
@@ -24,15 +24,15 @@ export interface ToggleGroupImplItemProps extends ToggleGroupImplProps {
   defaultValue?: string | string[]
 }
 
-export type ToggleGroupImplItemEmits = {
+export type ToggleGroupVariantEmits = {
   'update:modelValue': [value: string | string[]]
   /**
    * The callback that fires when the value of the toggle group changes.
    */
   'valueChange': [value: string | string[]]
 }
 
-export const toggleGroupImplItemProps = {
+export const toggleGroupVariantProps = {
   props: {
     type: {
       type: [String] as PropType<'single' | 'multiple'>,
@@ -62,14 +62,14 @@ export const toggleGroupImplItemProps = {
   },
 }
 
-const toggleGroupImplItem = defineComponent({
+const toggleGroupVariant = defineComponent({
   name: TOGGLE_GROUP_NAME,
   inheritAttrs: false,
   props: {
-    ...toggleGroupImplItemProps.props,
+    ...toggleGroupVariantProps.props,
     ...scopeToggleGroupProps,
   },
-  emits: toggleGroupImplItemProps.emits,
+  emits: toggleGroupVariantProps.emits,
   setup(props, { slots, emit, attrs }) {
     const {
       value: valueProp,
@@ -84,7 +84,6 @@ const toggleGroupImplItem = defineComponent({
     } = toRefs(props)
     const forwardedRef = useForwardRef()
     const modelValue = useModel(props, 'modelValue')
-
     const proxyChecked = computed({
       get: () => modelValue.value !== undefined
         ? modelValue.value
@@ -135,12 +134,11 @@ const toggleGroupImplItem = defineComponent({
         else if (type.value === 'multiple')
           handleButtonDeactivate(value)
       },
-      type: ref('single'),
+      type: computed(() => type.value || 'single'),
     })
 
     return () => h(OkuToggleGroupImpl, {
       ...attrs,
-      type: type.value,
       dir: dir.value,
       disabled: disabled.value,
       loop: loop.value,
@@ -153,7 +151,7 @@ const toggleGroupImplItem = defineComponent({
   },
 })
 
-export const OkuToggleGroupImplItem = toggleGroupImplItem as typeof toggleGroupImplItem &
+export const OkuToggleGroupVariant = toggleGroupVariant as typeof toggleGroupVariant &
 (new () => {
-  $props: Partial<ToggleGroupImplItemElement>
+  $props: Partial<ToggleGroupVariantElement>
 })

packages/components/toggle-group/src/index.ts

@@ -14,3 +14,21 @@ export {
   OkuToggleGroupItem,
   toggleGroupItemProps,
 } from './ToggleGroupItem'
+
+export type {
+  ToggleGroupItemElement,
+  ToggleGroupItemIntrinsicElement,
+  ToggleGroupItemProps,
+} from './ToggleGroupItem'
+
+export {
+  OkuToggleGroupVariant,
+  toggleGroupVariantProps,
+} from './ToggleGroupVariant'
+
+export type {
+  ToggleGroupVariantElement,
+  ToggleGroupVariantEmits,
+  ToggleGroupVariantIntrinsicElement,
+  ToggleGroupVariantProps,
+} from './ToggleGroupVariant'

packages/components/toolbar/README.md

@@ -0,0 +1,13 @@
+# `toolbar`
+
+<span><a href="https://www.npmjs.com/package/@oku-ui/toolbar "><img src="https://img.shields.io/npm/v/@oku-ui/toolbar?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toolbar"> <img src="https://img.shields.io/npm/dm/@oku-ui/toolbar?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/toolbar"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
+## Installation
+
+```sh
+$ pnpm add @oku-ui/toolbar
+```
+
+## Usage
+
+soon docs

packages/components/toolbar/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/toolbar/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@oku-ui/toolbar",
+  "type": "module",
+  "version": "0.2.3",
+  "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/toolbar"
+  },
+  "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/direction": "latest",
+    "@oku-ui/primitive": "latest",
+    "@oku-ui/provide": "latest",
+    "@oku-ui/roving-focus": "latest",
+    "@oku-ui/separator": "latest",
+    "@oku-ui/toggle-group": "latest",
+    "@oku-ui/use-composable": "latest",
+    "@oku-ui/utils": "latest"
+  },
+  "devDependencies": {
+    "tsconfig": "workspace:^"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}