@volverjs/ui-vue 0.0.13-beta.9 → 0.0.13

package/src/composables/useVirtualScroll.ts

@@ -0,0 +1,89 @@
+import type { Ref } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { computed, unref } from 'vue'
+
+export type { ScrollToOptions } from '@tanstack/vue-virtual'
+
+function pxToNumber(value: undefined): undefined
+function pxToNumber(value: string | number): number
+function pxToNumber(value: string | number | undefined): number | undefined
+function pxToNumber(value: string | number | undefined): number | undefined {
+    if (value === undefined) {
+        return undefined
+    }
+    if (typeof value === 'number') {
+        return value
+    }
+    return Number.parseInt(value.replace('px', ''), 10)
+}
+
+function getHorizontalStyle(size: number) {
+    return { width: `${size}px` }
+}
+
+function getVerticalStyle(size: number) {
+    return { height: `${size}px` }
+}
+
+export function useVirtualScroll(settings: {
+    scrollEl: HTMLElement | null | Ref<HTMLElement | null>
+    count: number | Ref<number>
+    estimateSize: string | number | ((index: number) => number) | Ref<string | number | ((index: number) => number)>
+    getItemKey?: (index: number) => number | string | bigint
+    overscan?: string | number | Ref<string | number>
+    horizontal?: boolean | Ref<boolean>
+}) {
+    const virtualizer = useVirtualizer({
+        get count() {
+            return unref(settings.count)
+        },
+        getScrollElement: () => unref(settings.scrollEl),
+        getItemKey: settings.getItemKey,
+        estimateSize: (index: number) => {
+            const estimateSize = unref(settings.estimateSize)
+            if (typeof estimateSize === 'function') {
+                return estimateSize(index)
+            }
+            return pxToNumber(estimateSize)
+        },
+        overscan: pxToNumber(unref(settings.overscan)),
+        horizontal: unref(settings.horizontal),
+    })
+
+    const virtualItems = computed(() => virtualizer.value.getVirtualItems())
+    const virtualItemsLength = computed(() => virtualItems.value.length)
+    const firstVirtualItem = computed(() => virtualItems.value[0])
+    const lastVirtualItem = computed(() => virtualItems.value[virtualItemsLength.value - 1])
+    const totalSize = computed(
+        () => virtualizer.value.getTotalSize() ?? 0,
+    )
+
+    const startSpacer = computed(() => {
+        const size = firstVirtualItem.value?.start ?? 0
+        return {
+            show: size > 0,
+            size,
+            style: unref(settings.horizontal) ? getHorizontalStyle(size) : getVerticalStyle(size),
+        }
+    })
+    const endSpacer = computed(() => {
+        const end = lastVirtualItem.value?.end ?? 0
+        const size = totalSize.value - end
+        return {
+            show: size > 0,
+            size,
+            style: unref(settings.horizontal) ? getHorizontalStyle(size) : getVerticalStyle(size),
+        }
+    })
+
+    return {
+        virtualizer,
+        virtualItems,
+        virtualItemsLength,
+        firstVirtualItem,
+        lastVirtualItem,
+        totalSize,
+        startSpacer,
+        endSpacer,
+    }
+}

package/src/composables/useVolver.ts

@@ -0,0 +1,8 @@
+import { INJECTION_KEY_VOLVER } from '../constants'
+
+/**
+ * Injects volver
+ */
+export function useVolver() {
+    return inject(INJECTION_KEY_VOLVER, undefined)
+}

package/src/constants.ts

@@ -0,0 +1,153 @@
+import type { Emitter } from 'mitt'
+import type { InjectionKey, Ref } from 'vue'
+import type {
+    AccordionGroupState,
+    AlertGroupState,
+    AlertModifier,
+    ButtonGroupState,
+    InputGroupState,
+} from './types'
+import type { Volver } from './Volver'
+
+export const DEFAULT_ICONIFY_PROVIDER = 'vv'
+
+export enum StorageType {
+    local = 'local',
+    session = 'session',
+}
+
+export enum Strategy {
+    absolute = 'absolute',
+    fixed = 'fixed',
+}
+
+export enum Side {
+    left = 'left',
+    right = 'right',
+    top = 'top',
+    bottom = 'bottom',
+}
+
+export enum Placement {
+    topStart = 'top-start',
+    topEnd = 'top-end',
+    bottomStart = 'bottom-start',
+    bottomEnd = 'bottom-end',
+    leftStart = 'left-start',
+    leftEnd = 'left-end',
+    rightStart = 'right-start',
+    rightEnd = 'right-end',
+}
+
+export enum Position {
+    before = 'before',
+    after = 'after',
+}
+
+export enum ButtonType {
+    button = 'button',
+    submit = 'submit',
+    reset = 'reset',
+}
+
+export enum ActionTag {
+    nuxtLink = 'nuxt-link',
+    routerLink = 'router-link',
+    a = 'a',
+    button = 'button',
+}
+
+export enum ActionRoles {
+    button = 'button',
+    link = 'link',
+    menuitem = 'menuitem',
+}
+
+export enum DropdownRole {
+    listbox = 'listbox',
+    menu = 'menu',
+}
+
+export enum DropdownItemRole {
+    option = 'option',
+    presentation = 'presentation',
+}
+
+export enum AlertRole {
+    alert = 'alert',
+    alertdialog = 'alertdialog',
+}
+
+// volver
+export const INJECTION_KEY_VOLVER = Symbol.for('volver') as InjectionKey<Volver>
+
+// groups
+export const INJECTION_KEY_BUTTON_GROUP = Symbol.for(
+    'buttonGroup',
+) as InjectionKey<ButtonGroupState>
+export const INJECTION_KEY_RADIO_GROUP = Symbol.for(
+    'radioGroup',
+) as InjectionKey<InputGroupState>
+export const INJECTION_KEY_CHECK_GROUP = Symbol.for(
+    'checkGroup',
+) as InjectionKey<InputGroupState>
+export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
+    'accordionGroup',
+) as InjectionKey<AccordionGroupState>
+
+// dropdown
+export type DropdownTriggerState = {
+    id?: Ref<string | number>
+    reference?: Ref<HTMLElement | null | undefined>
+    bus?: Emitter<{
+        click: Event
+        mouseover: Event
+        mouseleave: Event
+    }>
+    expanded?: Ref<boolean>
+    aria?: Ref<{
+        'aria-controls': string
+        'aria-haspopup': boolean
+        'aria-expanded': boolean
+    }>
+}
+export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+    'dropdownTrigger',
+) as InjectionKey<DropdownTriggerState>
+
+export type DropdownItemState = {
+    role?: Ref<`${DropdownItemRole}`>
+    expanded?: Ref<boolean>
+    focused?: Ref<boolean>
+    hovered?: Ref<boolean>
+}
+export const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
+    'dropdownItem',
+) as InjectionKey<DropdownItemState>
+
+export type DropdownActionState = {
+    role?: Ref<`${ActionRoles}`>
+    expanded?: Ref<boolean>
+}
+export const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
+    'dropdownAction',
+) as InjectionKey<DropdownActionState>
+
+// alert
+export const INJECTION_KEY_ALERT_GROUP = Symbol.for(
+    'alertGroup',
+) as InjectionKey<AlertGroupState>
+export const DEFAULT_ALERT_AUTO_CLOSE = 10000
+export const DEFAULT_ALERT_MODIFIERS = 'info'
+export const DEFAULT_ALERT_DISMISSABLE = true
+export const DEFAULT_ALERT_GROUP = 'default'
+export const DEFAULT_ALERT_INFO_ICON = 'information'
+export const DEFAULT_ALERT_SUCCESS_ICON = 'check-circle'
+export const DEFAULT_ALERT_WARNING_ICON = 'warning'
+export const DEFAULT_ALERT_DANGER_ICON = 'error'
+export const DefaultAlertIconMap = new Map<AlertModifier, string>([
+    ['success', DEFAULT_ALERT_SUCCESS_ICON],
+    ['info', DEFAULT_ALERT_INFO_ICON],
+    ['warning', DEFAULT_ALERT_WARNING_ICON],
+    ['danger', DEFAULT_ALERT_DANGER_ICON],
+])

package/src/directives/index.ts

@@ -0,0 +1,4 @@
+import vContextmenu from '../directives/v-contextmenu'
+import vTooltip from '../directives/v-tooltip'
+
+export { vContextmenu, vTooltip }

package/src/directives/v-contextmenu.ts

@@ -0,0 +1,32 @@
+import type { Directive, DirectiveBinding } from 'vue'
+import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { useDropdownContextmenu } from '@/composables'
+
+const contextmenu: Directive = {
+    beforeUpdate(el, binding: DirectiveBinding) {
+        const { onContextmenu, onScroll, getBoundingClientRect } = useDropdownContextmenu(binding as unknown as Ref<typeof VvDropdown>)
+        binding.value.init({
+            getBoundingClientRect,
+        })
+        el.addEventListener(
+            'contextmenu',
+            onContextmenu,
+            false,
+        )
+        const scrollContainerEl = findScrollContainer(binding.value.$el)
+        if (scrollContainerEl) {
+            scrollContainerEl.addEventListener('scroll', onScroll)
+        }
+        el.additionalData = { onContextmenu, onScroll, scrollContainerEl }
+    },
+    beforeUnmount(el) {
+        if (el?.additionalData?.onContextmenu) {
+            el.removeEventListener('contextmenu', el.additionalData.onContextmenu)
+        }
+        if (el?.additionalData?.onScroll && el?.additionalData?.scrollContainerEl) {
+            el.additionalData.scrollContainerEl.removeEventListener('scroll', el.additionalData.onScroll)
+        }
+    },
+}
+
+export default contextmenu

package/src/directives/v-tooltip.ts

@@ -0,0 +1,25 @@
+import type { Directive, DirectiveBinding } from 'vue'
+import type { Side } from '../constants'
+import { render } from 'vue'
+import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
+
+const tooltip: Directive = (() => {
+    return {
+        beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+            const tooltip = h(VvTooltip, {
+                value: binding.value,
+                position: binding.arg as Side,
+            })
+            render(tooltip, el)
+        },
+        updated(el: HTMLElement, binding: DirectiveBinding) {
+            const tooltip = h(VvTooltip, {
+                value: binding.value,
+                position: binding.arg as Side,
+            })
+            render(tooltip, el)
+        },
+    }
+})()
+
+export default tooltip

package/src/icons.ts

@@ -0,0 +1,7 @@
+import detailed from './assets/icons/detailed.json'
+import normal from './assets/icons/normal.json'
+import simple from './assets/icons/simple.json'
+
+export default [normal, detailed, simple]
+
+export { detailed, normal, simple }

package/src/index.ts

@@ -0,0 +1,14 @@
+import type { Volver, VolverOptions } from './Volver'
+import VolverPlugin from './Volver'
+
+export { VolverPlugin }
+export * from './types'
+export type { Volver, VolverOptions }
+
+// https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
+// Add custom property and extend vue type definition
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $vv?: typeof Volver.prototype
+    }
+}

package/src/json-render/catalog.ts

@@ -0,0 +1,31 @@
+import { defineCatalog } from '@json-render/core'
+import { schema } from '@json-render/vue'
+import { volverComponentDefinitions } from './definitions'
+
+/**
+ * Pre-built json-render catalog containing all 26 curated Volver UI components.
+ *
+ * Use this catalog to generate a system prompt for AI models and validate
+ * generated specs against the Volver component library.
+ *
+ * @example
+ * ```ts
+ * import { catalog } from '@volverjs/ui-vue/json-render'
+ *
+ * // Generate a system prompt for your AI model
+ * const systemPrompt = catalog.prompt()
+ *
+ * // With custom rules
+ * const systemPrompt = catalog.prompt({
+ *   customRules: [
+ *     'Always use Card as the root element for page sections',
+ *     'Group related form inputs in a Card with a descriptive title',
+ *     'Use Alert with modifiers=success/warning/danger for feedback messages',
+ *   ],
+ * })
+ * ```
+ */
+export const catalog = defineCatalog(schema, {
+    components: volverComponentDefinitions,
+    actions: {},
+})

package/src/json-render/components.ts

@@ -0,0 +1,308 @@
+import type { BaseComponentProps } from '@json-render/vue'
+import { useBoundProp } from '@json-render/vue'
+import { h } from 'vue'
+import VvAccordion from '../components/VvAccordion/VvAccordion.vue'
+import VvAccordionGroup from '../components/VvAccordionGroup/VvAccordionGroup.vue'
+import VvAlert from '../components/VvAlert/VvAlert.vue'
+import VvAlertGroup from '../components/VvAlertGroup/VvAlertGroup.vue'
+import VvAvatar from '../components/VvAvatar/VvAvatar.vue'
+import VvAvatarGroup from '../components/VvAvatarGroup/VvAvatarGroup.vue'
+import VvBadge from '../components/VvBadge/VvBadge.vue'
+import VvBreadcrumb from '../components/VvBreadcrumb/VvBreadcrumb.vue'
+import VvButton from '../components/VvButton/VvButton.vue'
+import VvButtonGroup from '../components/VvButtonGroup/VvButtonGroup.vue'
+import VvCard from '../components/VvCard/VvCard.vue'
+import VvCheckbox from '../components/VvCheckbox/VvCheckbox.vue'
+import VvCheckboxGroup from '../components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCombobox from '../components/VvCombobox/VvCombobox.vue'
+import VvDialog from '../components/VvDialog/VvDialog.vue'
+import VvIcon from '../components/VvIcon/VvIcon.vue'
+import VvInputFile from '../components/VvInputFile/VvInputFile.vue'
+import VvInputText from '../components/VvInputText/VvInputText.vue'
+import VvNav from '../components/VvNav/VvNav.vue'
+import VvProgress from '../components/VvProgress/VvProgress.vue'
+import VvRadio from '../components/VvRadio/VvRadio.vue'
+import VvRadioGroup from '../components/VvRadioGroup/VvRadioGroup.vue'
+import VvSelect from '../components/VvSelect/VvSelect.vue'
+import VvTab from '../components/VvTab/VvTab.vue'
+import VvTextarea from '../components/VvTextarea/VvTextarea.vue'
+import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Pick keys from json-render props, converting nulls to undefined
+ * so Vue components receive clean prop values.
+ */
+function pick(props: Record<string, unknown>, keys: string[]): Record<string, unknown> {
+    const result: Record<string, unknown> = {}
+    for (const key of keys) {
+        result[key] = props[key] ?? undefined
+    }
+    return result
+}
+
+/** Render a Volver component with picked props and an optional default slot. */
+function render(
+    component: object,
+    props: Record<string, unknown>,
+    keys: string[],
+    extra?: Record<string, unknown>,
+    children?: unknown,
+) {
+    const isSlotMap
+        = children != null
+            && typeof children === 'object'
+            && !Array.isArray(children)
+            && Object.values(children as Record<string, unknown>).every(value => typeof value === 'function')
+
+    const slots
+        = children == null
+            ? undefined
+            : isSlotMap
+                ? (children as Record<string, () => unknown>)
+                : { default: () => children }
+    return h(component as any, { ...pick(props, keys), ...extra }, slots)
+}
+
+// ---------------------------------------------------------------------------
+// Layout & Container
+// ---------------------------------------------------------------------------
+
+export function CardComponent({ props, children }: BaseComponentProps) {
+    return render(VvCard, props, ['title', 'modifiers'], undefined, children)
+}
+
+export function AccordionComponent({ props, children }: BaseComponentProps) {
+    return render(VvAccordion, props, ['title', 'content', 'modifiers'], undefined, children)
+}
+
+export function AccordionGroupComponent({ props, children }: BaseComponentProps) {
+    return render(VvAccordionGroup, props, ['collapse', 'modifiers'], undefined, children)
+}
+
+export function DialogComponent({ props, children, bindings }: BaseComponentProps) {
+    return useRenderBound<boolean>(VvDialog, props, ['title', 'modifiers'], bindings, undefined, children, bindings?.value ? undefined : true)
+}
+
+export function TabComponent({ props }: BaseComponentProps) {
+    return render(VvTab, props, ['items', 'modifiers'])
+}
+
+// ---------------------------------------------------------------------------
+// Data Display
+// ---------------------------------------------------------------------------
+
+export function AlertComponent({ props, children, emit }: BaseComponentProps) {
+    return render(VvAlert, props, ['title', 'content', 'modifiers', 'dismissable', 'role'], { onClose: () => emit('close') }, children)
+}
+
+export function AlertGroupComponent({ props, children }: BaseComponentProps) {
+    return render(VvAlertGroup, props, ['stack', 'position', 'modifiers'], { name: 'json-render-alerts' }, children)
+}
+
+export function BadgeComponent({ props, children }: BaseComponentProps) {
+    return render(VvBadge, props, ['value', 'modifiers'], undefined, children)
+}
+
+export function AvatarComponent({ props, children }: BaseComponentProps) {
+    return render(VvAvatar, props, ['imgSrc', 'modifiers'], undefined, children)
+}
+
+export function AvatarGroupComponent({ props, children }: BaseComponentProps) {
+    return render(VvAvatarGroup, props, ['toShow', 'totalItems', 'modifiers'], { items: [] }, children)
+}
+
+export function ProgressComponent({ props }: BaseComponentProps) {
+    return render(VvProgress, props, ['label', 'value', 'max', 'modifiers'])
+}
+
+export function IconComponent({ props }: BaseComponentProps) {
+    return h(VvIcon as any, {
+        name: props.name,
+        color: props.color ?? undefined,
+        width: props.size ?? undefined,
+        height: props.size ?? undefined,
+    })
+}
+
+export function TooltipComponent({ props, children }: BaseComponentProps) {
+    return render(VvTooltip, props, ['value', 'position', 'modifiers'], undefined, children)
+}
+
+// ---------------------------------------------------------------------------
+// Action components
+// ---------------------------------------------------------------------------
+
+export function ButtonComponent({ props, children, emit }: BaseComponentProps) {
+    return render(
+        VvButton,
+        props,
+        ['label', 'modifiers', 'disabled', 'loading', 'icon', 'iconPosition', 'type', 'href'],
+        { type: props.type ?? 'button', onClick: () => emit('press') },
+        children,
+    )
+}
+
+export function ButtonGroupComponent({ props, children }: BaseComponentProps) {
+    return render(VvButtonGroup, props, ['toggle', 'multiple', 'modifiers'], undefined, children)
+}
+
+// ---------------------------------------------------------------------------
+// Navigation components
+// ---------------------------------------------------------------------------
+
+export function BreadcrumbComponent({ props }: BaseComponentProps) {
+    return render(VvBreadcrumb, props, ['routes', 'modifiers'])
+}
+
+export function NavComponent({ props, children }: BaseComponentProps) {
+    return render(VvNav, props, ['items', 'modifiers'], undefined, children)
+}
+
+// ---------------------------------------------------------------------------
+// Form components (with $bindState two-way binding support)
+// ---------------------------------------------------------------------------
+
+/** Render a form component with two-way binding via useBoundProp. */
+function useRenderBound<T>(
+    component: object,
+    props: Record<string, unknown>,
+    keys: string[],
+    bindings: Record<string, string> | undefined,
+    extra?: Record<string, unknown>,
+    children?: unknown,
+    defaultValue?: T,
+) {
+    const [value, setValue] = useBoundProp<T>(defaultValue, bindings?.value)
+    return render(component, props, keys, { ...extra, 'modelValue': value, 'onUpdate:modelValue': setValue }, children)
+}
+
+export function InputTextComponent({ props, bindings }: BaseComponentProps) {
+    return useRenderBound<string | number>(
+        VvInputText,
+        props,
+        ['name', 'label', 'type', 'placeholder', 'required', 'disabled', 'readonly', 'icon', 'iconPosition', 'floating', 'modifiers'],
+        bindings,
+    )
+}
+
+export function TextareaComponent({ props, bindings }: BaseComponentProps) {
+    return useRenderBound<string>(
+        VvTextarea,
+        props,
+        ['name', 'label', 'placeholder', 'rows', 'required', 'disabled', 'readonly', 'floating', 'modifiers'],
+        bindings,
+    )
+}
+
+export function SelectComponent({ props, bindings }: BaseComponentProps) {
+    return useRenderBound<unknown>(
+        VvSelect,
+        props,
+        ['name', 'label', 'options', 'multiple', 'placeholder', 'required', 'disabled', 'floating', 'modifiers'],
+        bindings,
+    )
+}
+
+export function CheckboxComponent({ props, bindings }: BaseComponentProps) {
+    return useRenderBound<boolean>(
+        VvCheckbox,
+        props,
+        ['name', 'label', 'value', 'disabled', 'switch', 'modifiers'],
+        bindings,
+    )
+}
+
+export function CheckboxGroupComponent({ props, children, bindings }: BaseComponentProps) {
+    return useRenderBound<unknown[]>(
+        VvCheckboxGroup,
+        props,
+        ['name', 'label', 'options', 'vertical', 'required', 'disabled', 'modifiers'],
+        bindings,
+        undefined,
+        children,
+    )
+}
+
+export function RadioComponent({ props, bindings }: BaseComponentProps) {
+    return useRenderBound<string | number | boolean>(
+        VvRadio,
+        props,
+        ['name', 'label', 'value', 'disabled', 'modifiers'],
+        bindings,
+    )
+}
+
+export function RadioGroupComponent({ props, children, bindings }: BaseComponentProps) {
+    return useRenderBound<string | number | boolean>(
+        VvRadioGroup,
+        props,
+        ['name', 'label', 'options', 'vertical', 'required', 'disabled', 'modifiers'],
+        bindings,
+        undefined,
+        children,
+    )
+}
+
+export function ComboboxComponent({ props, bindings }: BaseComponentProps) {
+    return useRenderBound<unknown>(
+        VvCombobox,
+        props,
+        ['name', 'label', 'options', 'placeholder', 'searchable', 'multiple', 'required', 'disabled', 'modifiers'],
+        bindings,
+    )
+}
+
+export function InputFileComponent({ props, bindings }: BaseComponentProps) {
+    return useRenderBound<File[]>(
+        VvInputFile,
+        props,
+        ['name', 'label', 'accept', 'multiple', 'max', 'required', 'disabled', 'modifiers'],
+        bindings,
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Aggregated export
+// ---------------------------------------------------------------------------
+
+/**
+ * All Volver Vue component implementations for building custom json-render registries.
+ * Import individual entries or spread into defineRegistry.
+ */
+export const volverComponents = {
+    // Layout
+    Card: CardComponent,
+    Accordion: AccordionComponent,
+    AccordionGroup: AccordionGroupComponent,
+    Dialog: DialogComponent,
+    Tab: TabComponent,
+    // Data Display
+    Alert: AlertComponent,
+    AlertGroup: AlertGroupComponent,
+    Badge: BadgeComponent,
+    Avatar: AvatarComponent,
+    AvatarGroup: AvatarGroupComponent,
+    Progress: ProgressComponent,
+    Icon: IconComponent,
+    Tooltip: TooltipComponent,
+    // Actions
+    Button: ButtonComponent,
+    ButtonGroup: ButtonGroupComponent,
+    // Navigation
+    Breadcrumb: BreadcrumbComponent,
+    Nav: NavComponent,
+    // Forms
+    InputText: InputTextComponent,
+    Textarea: TextareaComponent,
+    Select: SelectComponent,
+    Checkbox: CheckboxComponent,
+    CheckboxGroup: CheckboxGroupComponent,
+    Radio: RadioComponent,
+    RadioGroup: RadioGroupComponent,
+    Combobox: ComboboxComponent,
+    InputFile: InputFileComponent,
+} as const