fix: expose internal utils

docs/guide/specs.md

@@ -74,6 +74,8 @@ In order to cope with various situations, the order of list rendering is based o
 
 </RCard>
 
+You can also use a similar mechanism in custom components using `useList` and `useListItem`.
+
 ## Controlled and Uncontrolled Components
 
 In Roughness, all components that support `v-model` also support not binding the properties and events, which means:

src/checkbox/index.vue

@@ -56,14 +56,14 @@ defineSlots<{
 const multiple = $(inject(multipleInjection, ref()))
 let model = $(inject(modelInjection, ref()))
 const disabledByGroup = $(inject(disabledInjection, ref()))
-const labels = inject(labelsInjection, new Map<RValueOrKey, string>())
+const labels = inject(labelsInjection, undefined)
 
 const label = $computed(() => {
   return userLabel ?? (typeof value === 'undefined' ? value : startCase(keyOf(value)))
 })
 
 watchEffect(onInvalidate => {
-  if (value !== undefined && label !== undefined) {
+  if (labels && value !== undefined && label !== undefined) {
     const key = keyOf(value)
     labels.set(key, label)
     onInvalidate(() => {

src/compositions.ts

@@ -1,7 +1,9 @@
+export { useList, useListItem } from './common/list'
+export type { RValue } from './common/key'
 export { keyOf, RKey } from './common/key'
 export type { ReactionState } from './common/reaction'
 export { useReactionState } from './common/reaction'
-export type { ComponentProps, ComponentRenderable } from './common/renderable'
+export type { ComponentProps, ComponentRenderable, ComponentSlots } from './common/renderable'
 export type { Colors } from './common/theme'
 export { darkColors, lightColors, useColors, useDark } from './common/theme'
 export { useConfirm } from './confirm/utils'

src/confirm/confirm-provider.vue

@@ -2,7 +2,7 @@
 import '../common/style.scss'
 import { provide, reactive } from 'vue'
 import RConfirm from './index.vue'
-import type { ConfirmItem } from './utils'
+import type { ConfirmItemData } from './utils'
 import { itemsInjection } from './utils'
 
 defineOptions({
@@ -13,9 +13,9 @@ defineSlots<{
   default?: (props: {}) => any,
 }>()
 
-const items = reactive<ConfirmItem[]>([])
+const items = reactive<ConfirmItemData[]>([])
 
-function resolve(id: ConfirmItem['id'], value: boolean) {
+function resolve(id: ConfirmItemData['id'], value: boolean) {
   const index = items.findIndex(item => item.id === id)
   if (index !== -1) {
     const item = items[index]

src/confirm/utils.ts

@@ -6,24 +6,25 @@ import type RConfirm from './index.vue'
 
 type ResolveFunction = (value: boolean | PromiseLike<boolean>) => void
 
-export interface ConfirmItem {
+export interface ConfirmItemData {
   id: string,
   props?: ComponentProps<typeof RConfirm>,
   slots: ComponentSlots<typeof RConfirm>,
   resolve: ResolveFunction,
 }
 
-export const itemsInjection: InjectionKey<ConfirmItem[]> = Symbol('RConfirmProvider#items')
+export const itemsInjection: InjectionKey<ConfirmItemData[]> = Symbol('RConfirmProvider#items')
 
 let base = 0n
 const generateId = () => String(++base)
 
 export function useConfirm() {
-  const items = inject(itemsInjection, [])
+  const items = inject(itemsInjection, undefined)
   return function (
     renderable: ComponentRenderable<typeof RConfirm>,
-    props?: ConfirmItem['props'],
+    props?: ConfirmItemData['props'],
   ) {
+    if (!items) return
     let resolve: (value: boolean | PromiseLike<boolean>) => void
     const promise = new Promise<boolean>(resolvePromise => {
       resolve = resolvePromise

src/table/utils.ts

@@ -2,7 +2,7 @@ import type { InjectionKey } from 'vue'
 import type { ComponentSlots } from '../common/renderable'
 import type RTableColumn from './table-column.vue'
 
-export interface TableColumnData {
+interface TableColumnData {
   name: string,
   slots: ComponentSlots<typeof RTableColumn>,
 }

src/tabs/utils.ts

@@ -3,7 +3,7 @@ import type { RValueOrKey } from '../common/key'
 import type { ComponentSlots } from '../common/renderable'
 import type RTabItem from './tab-item.vue'
 
-export interface TabItemData {
+interface TabItemData {
   value: RValueOrKey,
   slots: ComponentSlots<typeof RTabItem>,
 }

src/toast/toast-provider.vue

@@ -2,7 +2,7 @@
 import '../common/style.scss'
 import { provide, reactive } from 'vue'
 import RToast from './index.vue'
-import type { ToastItem } from './utils'
+import type { ToastItemData } from './utils'
 import { itemsInjection } from './utils'
 
 defineOptions({
@@ -13,9 +13,9 @@ defineSlots<{
   default?: (props: {}) => any,
 }>()
 
-const items = reactive<ToastItem[]>([])
+const items = reactive<ToastItemData[]>([])
 
-function toggle(open: boolean, id: ToastItem['id']) {
+function toggle(open: boolean, id: ToastItemData['id']) {
   if (!open) {
     const index = items.findIndex(item => item.id === id)
     if (index !== -1) {

src/toast/utils.ts

@@ -4,23 +4,24 @@ import type { ComponentProps, ComponentRenderable, ComponentSlots } from '../com
 import { getComponentRenderFunctions } from '../common/renderable'
 import type RToast from './index.vue'
 
-export interface ToastItem {
+export interface ToastItemData {
   id: string,
   slots: ComponentSlots<typeof RToast>,
   props?: ComponentProps<typeof RToast>,
 }
 
-export const itemsInjection: InjectionKey<ToastItem[]> = Symbol('RToastProvider#items')
+export const itemsInjection: InjectionKey<ToastItemData[]> = Symbol('RToastProvider#items')
 
 let base = 0n
 const generateId = () => String(++base)
 
 export function useToast() {
-  const items = inject(itemsInjection, [])
+  const items = inject(itemsInjection, undefined)
   return function (
     renderable: ComponentRenderable<typeof RToast>,
-    props?: ToastItem['props'],
+    props?: ToastItemData['props'],
   ) {
+    if (!items) return
     items.unshift({
       id: generateId(),
       slots: getComponentRenderFunctions(renderable),