ropav 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/accordion.css +5 -16
  2. package/dist/accordion.js +10 -24
  3. package/dist/components/accordion/index.d.ts +1 -1
  4. package/dist/components/accordion/types.d.ts +0 -4
  5. package/dist/components/dialog/dialog-core.d.ts +4 -2
  6. package/dist/components/scroll-area/index.d.ts +3 -0
  7. package/dist/components/scroll-area/index.js +3 -0
  8. package/dist/components/scroll-area/scroll-area.d.ts +42 -0
  9. package/dist/components/scroll-area/scrollAreaCore.d.ts +25 -0
  10. package/dist/components/scroll-area/types.d.ts +33 -0
  11. package/dist/components/scroll-area/useScrollArea.d.ts +54 -0
  12. package/dist/components/scroll-area/useScrollAreaControls.d.ts +21 -0
  13. package/dist/components/scroll-area/useScrollAreaMetrics.d.ts +35 -0
  14. package/dist/components/scroll-area/useScrollAreaPointer.d.ts +17 -0
  15. package/dist/components/scroll-area/useScrollAreaPresentation.d.ts +49 -0
  16. package/dist/components/scroll-area/useScrollAreaVisibility.d.ts +27 -0
  17. package/dist/components/select/useSelect.d.ts +7 -5
  18. package/dist/components/select/useSelectNativeControl.d.ts +9 -0
  19. package/dist/components/select/useSelectNativeValue.d.ts +15 -0
  20. package/dist/dialog.js +23 -6
  21. package/dist/index.d.ts +1 -0
  22. package/dist/index.js +3 -1
  23. package/dist/modal.css +28 -29
  24. package/dist/modal.js +10 -8
  25. package/dist/number-input.css +3 -6
  26. package/dist/scroll-area.css +131 -0
  27. package/dist/scroll-area.js +696 -0
  28. package/dist/scroll-area2.js +23 -0
  29. package/dist/select.css +47 -45
  30. package/dist/select.js +167 -129
  31. package/dist/tabs.css +23 -18
  32. package/dist/tabs.js +16 -14
  33. package/docs/public-styles-api.md +1 -1
  34. package/package.json +5 -1
@@ -1,5 +1,5 @@
1
1
  @layer ropav.components {
2
- .rp-accordion[data-v-e732f2da] {
2
+ .rp-accordion[data-v-d15589fa] {
3
3
  --_rp-accordion-radius: var(--rp-radius-sm);
4
4
  --_rp-accordion-duration: var(--rp-transition-fast);
5
5
  box-sizing: border-box;
@@ -12,14 +12,10 @@
12
12
  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
13
13
  border-radius: var(--_rp-accordion-radius);
14
14
  }
15
- .rp-accordion--disabled[data-v-e732f2da] {
15
+ .rp-accordion--disabled[data-v-d15589fa] {
16
16
  opacity: var(--rp-opacity-disabled);
17
17
  cursor: not-allowed;
18
18
  }
19
- .rp-accordion--horizontal[data-v-e732f2da] {
20
- display: flex;
21
- align-items: stretch;
22
- }
23
19
  }@layer ropav.components {
24
20
  .rp-accordion-item[data-v-5b00ef39] {
25
21
  --_rp-accordion-duration: var(--rp-transition-fast);
@@ -30,14 +26,6 @@
30
26
  .rp-accordion-item[data-v-5b00ef39]:first-child {
31
27
  border-top: 0;
32
28
  }
33
- .rp-accordion-item--horizontal[data-v-5b00ef39] {
34
- flex: 1 1 0;
35
- border-top: 0;
36
- border-left: var(--rp-border-width-thin) solid var(--rp-color-default-border);
37
- }
38
- .rp-accordion-item--horizontal[data-v-5b00ef39]:first-child {
39
- border-left: 0;
40
- }
41
29
  .rp-accordion-item--disabled[data-v-5b00ef39] {
42
30
  opacity: var(--rp-opacity-disabled);
43
31
  cursor: not-allowed;
@@ -95,12 +83,12 @@
95
83
  display: grid;
96
84
  min-width: 0;
97
85
  overflow: hidden;
98
- padding: 0 var(--rp-spacing-4) var(--rp-spacing-4);
86
+ padding: var(--rp-spacing-3) var(--rp-spacing-4) var(--rp-spacing-4);
99
87
  color: var(--rp-color-text);
100
88
  font-size: var(--rp-font-size-md);
101
89
  line-height: var(--rp-line-height-md);
102
90
  grid-template-rows: 1fr;
103
- transition: grid-template-rows var(--_rp-accordion-duration), opacity var(--_rp-accordion-duration), padding-bottom var(--_rp-accordion-duration);
91
+ transition: grid-template-rows var(--_rp-accordion-duration), opacity var(--_rp-accordion-duration), padding-top var(--_rp-accordion-duration), padding-bottom var(--_rp-accordion-duration);
104
92
  }
105
93
  .rp-accordion-item__inner[data-v-5b00ef39] {
106
94
  min-height: 0;
@@ -111,6 +99,7 @@
111
99
  .rp-accordion-content-leave-to[data-v-5b00ef39] {
112
100
  opacity: 0;
113
101
  grid-template-rows: 0fr;
102
+ padding-top: 0;
114
103
  padding-bottom: 0;
115
104
  }
116
105
  }
package/dist/accordion.js CHANGED
@@ -33,15 +33,9 @@ function hasValue(values, value) {
33
33
  function withoutValue(values, value) {
34
34
  return values.filter((itemValue) => itemValue !== value);
35
35
  }
36
- var ORIENTATION_NAVIGATION_KEYS = {
37
- vertical: {
38
- ArrowDown: 1,
39
- ArrowUp: -1
40
- },
41
- horizontal: {
42
- ArrowRight: 1,
43
- ArrowLeft: -1
44
- }
36
+ var NAVIGATION_KEYS = {
37
+ ArrowDown: 1,
38
+ ArrowUp: -1
45
39
  };
46
40
  function getAccordionTrigger(event, root) {
47
41
  const target = event.target;
@@ -53,13 +47,13 @@ function getAccordionTrigger(event, root) {
53
47
  function getAccordionTriggers(root) {
54
48
  return Array.from(root.querySelectorAll(TRIGGER_SELECTOR)).filter((trigger) => trigger.closest(ACCORDION_SELECTOR) === root && !trigger.disabled);
55
49
  }
56
- function getNextTrigger(root, currentTrigger, key, orientation) {
50
+ function getNextTrigger(root, currentTrigger, key) {
57
51
  const triggers = getAccordionTriggers(root);
58
52
  const currentIndex = triggers.indexOf(currentTrigger);
59
53
  if (currentIndex === -1 || triggers.length === 0) return void 0;
60
54
  if (key === "Home") return triggers[0];
61
55
  if (key === "End") return triggers[triggers.length - 1];
62
- const direction = ORIENTATION_NAVIGATION_KEYS[orientation][key];
56
+ const direction = NAVIGATION_KEYS[key];
63
57
  if (!direction) return void 0;
64
58
  return triggers[(currentIndex + direction + triggers.length) % triggers.length];
65
59
  }
@@ -67,20 +61,17 @@ function useAccordion(props, emitUpdate) {
67
61
  const isMultiple = computed(() => Boolean(props.multiple));
68
62
  const isCollapsible = computed(() => props.collapsible !== false);
69
63
  const isDisabled = computed(() => Boolean(props.disabled));
70
- const orientation = computed(() => props.orientation ?? "vertical");
71
64
  const isControlled = computed(() => props.modelValue !== void 0);
72
65
  const uncontrolledValue = ref(props.defaultValue ?? null);
73
66
  const openValues = computed(() => normalizeValue(isControlled.value ? props.modelValue : uncontrolledValue.value, isMultiple.value));
74
67
  const rootClass = computed(() => bem("rp-accordion", {
75
68
  disabled: isDisabled.value,
76
- multiple: isMultiple.value,
77
- [`${orientation.value}`]: true
69
+ multiple: isMultiple.value
78
70
  }));
79
71
  const rootProps = computed(() => ({
80
72
  id: props.id,
81
73
  class: rootClass.value,
82
74
  "data-disabled": isDisabled.value || void 0,
83
- "data-orientation": orientation.value,
84
75
  "aria-label": props.ariaLabel || void 0,
85
76
  "aria-labelledby": props.labelledby || void 0,
86
77
  "aria-describedby": props.describedby || void 0,
@@ -107,7 +98,7 @@ function useAccordion(props, emitUpdate) {
107
98
  if (!root) return;
108
99
  const trigger = getAccordionTrigger(event, root);
109
100
  if (!trigger) return;
110
- const nextTrigger = getNextTrigger(root, trigger, event.key, orientation.value);
101
+ const nextTrigger = getNextTrigger(root, trigger, event.key);
111
102
  if (!nextTrigger) return;
112
103
  event.preventDefault();
113
104
  nextTrigger.focus();
@@ -125,9 +116,6 @@ function useAccordion(props, emitUpdate) {
125
116
  get unmountOnExit() {
126
117
  return Boolean(props.unmountOnExit);
127
118
  },
128
- get orientation() {
129
- return orientation.value;
130
- },
131
119
  isItemOpen(value) {
132
120
  return hasValue(openValues.value, value);
133
121
  },
@@ -166,8 +154,7 @@ function useAccordionItem(props) {
166
154
  const rootClass = computed(() => bem("rp-accordion-item", {
167
155
  open: isOpen.value,
168
156
  closed: !isOpen.value,
169
- disabled: isDisabled.value,
170
- [`${group.orientation}`]: true
157
+ disabled: isDisabled.value
171
158
  }));
172
159
  const rootProps = computed(() => ({
173
160
  id: id.value,
@@ -241,7 +228,7 @@ function useAccordionItem(props) {
241
228
  }
242
229
  //#endregion
243
230
  //#region src/components/accordion/accordion.vue?vue&type=script&setup=true&vapor=true&lang.ts
244
- var t0$2 = template("<div data-v-e732f2da>", 1);
231
+ var t0$2 = template("<div data-v-d15589fa>", 1);
245
232
  //#endregion
246
233
  //#region src/components/accordion/accordion.vue
247
234
  var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -268,7 +255,6 @@ var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
268
255
  type: Boolean,
269
256
  default: false
270
257
  },
271
- orientation: { default: "vertical" },
272
258
  ariaLabel: {},
273
259
  describedby: {},
274
260
  labelledby: {},
@@ -293,7 +279,7 @@ var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
293
279
  createSlot("default", null, null, 1);
294
280
  return n1;
295
281
  }
296
- }), [["__scopeId", "data-v-e732f2da"]]);
282
+ }), [["__scopeId", "data-v-d15589fa"]]);
297
283
  //#endregion
298
284
  //#region ~icons/lucide/chevron-down
299
285
  var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m6 9l6 6l6-6\">", 3, 1);
@@ -2,4 +2,4 @@ export { default as Accordion } from './accordion.js';
2
2
  export { default as AccordionItem } from './accordion-item.js';
3
3
  export { useAccordion, useAccordionItem } from './useAccordion.js';
4
4
  export { accordionItemParts, accordionParts } from './types.js';
5
- export type { AccordionItemPart, AccordionContentProps, AccordionContext, AccordionItemProps, AccordionItemRootProps, AccordionItemSlotProps, AccordionItemTriggerSlotProps, AccordionItemValue, AccordionModelValue, AccordionOrientation, AccordionPart, AccordionProps, AccordionRootProps, AccordionState, AccordionTriggerProps, UseAccordionItemReturn, UseAccordionReturn, } from './types.js';
5
+ export type { AccordionItemPart, AccordionContentProps, AccordionContext, AccordionItemProps, AccordionItemRootProps, AccordionItemSlotProps, AccordionItemTriggerSlotProps, AccordionItemValue, AccordionModelValue, AccordionPart, AccordionProps, AccordionRootProps, AccordionState, AccordionTriggerProps, UseAccordionItemReturn, UseAccordionReturn, } from './types.js';
@@ -3,7 +3,6 @@ import { StylesApiProps } from '../../styles-api.js';
3
3
  import { CollapseContentProps, CollapseContentRole, CollapseTriggerProps } from '../collapse/types.js';
4
4
  export type AccordionItemValue = string | number;
5
5
  export type AccordionModelValue = AccordionItemValue | AccordionItemValue[] | null;
6
- export type AccordionOrientation = 'vertical' | 'horizontal';
7
6
  export type AccordionState = 'open' | 'closed';
8
7
  export declare const accordionParts: readonly ["root"];
9
8
  export declare const accordionItemParts: readonly ["root", "trigger", "title", "icon", "content"];
@@ -17,7 +16,6 @@ export interface AccordionProps extends StylesApiProps<AccordionPart> {
17
16
  collapsible?: boolean;
18
17
  disabled?: boolean;
19
18
  unmountOnExit?: boolean;
20
- orientation?: AccordionOrientation;
21
19
  ariaLabel?: string;
22
20
  describedby?: string;
23
21
  labelledby?: string;
@@ -37,7 +35,6 @@ export interface AccordionRootProps {
37
35
  id?: string;
38
36
  class: string[];
39
37
  'data-disabled'?: boolean;
40
- 'data-orientation': AccordionOrientation;
41
38
  'aria-label'?: string;
42
39
  'aria-labelledby'?: string;
43
40
  'aria-describedby'?: string;
@@ -73,7 +70,6 @@ export interface AccordionContext {
73
70
  collapsible: boolean;
74
71
  disabled: boolean;
75
72
  unmountOnExit: boolean;
76
- orientation: AccordionOrientation;
77
73
  isItemOpen: (value: AccordionItemValue) => boolean;
78
74
  setItemOpen: (value: AccordionItemValue, open: boolean) => void;
79
75
  }
@@ -1,4 +1,4 @@
1
- import { ComponentPublicInstance, ComputedRef, InjectionKey, Ref } from 'vue';
1
+ import { ComponentPublicInstance, ComputedRef, InjectionKey, Ref, VaporComponentInstance } from 'vue';
2
2
  import { OverlayLayerContext } from '../../composables/useOverlayLayer.js';
3
3
  import { DialogCloseReason } from './types.js';
4
4
  export interface DialogRootContext {
@@ -22,6 +22,8 @@ export interface DialogRootContext {
22
22
  registerDescription: (id: string) => () => void;
23
23
  }
24
24
  export declare const dialogRootKey: InjectionKey<DialogRootContext>;
25
+ export type DialogElementRefValue = Element | ComponentPublicInstance | VaporComponentInstance | null;
25
26
  export declare function resolveDialogCloseReason(reason: unknown): DialogCloseReason;
26
- export declare function toDialogHTMLElement(value: Element | ComponentPublicInstance | null): HTMLElement | null;
27
+ export declare function toDialogHTMLElement(value: DialogElementRefValue): HTMLElement | null;
28
+ export declare function resolveDialogHTMLElementRef(value: DialogElementRefValue, fallbackId: string, resolve: (element: HTMLElement | null) => void): void;
27
29
  export declare function createDialogEvent<T>(type: string, detail: T, originalEvent: Event): CustomEvent<T>;
@@ -0,0 +1,3 @@
1
+ export { default as ScrollArea } from './scroll-area.js';
2
+ export { scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes } from './types.js';
3
+ export type { ScrollAreaOrientation, ScrollAreaPart, ScrollAreaPosition, ScrollAreaProps, ScrollAreaScrollbars, ScrollAreaSlotProps, ScrollAreaType, } from './types.js';
@@ -0,0 +1,3 @@
1
+ import { t as scroll_area_default } from "../../scroll-area.js";
2
+ import { n as scrollAreaScrollbars, r as scrollAreaTypes, t as scrollAreaParts } from "../../scroll-area2.js";
3
+ export { scroll_area_default as ScrollArea, scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes };
@@ -0,0 +1,42 @@
1
+ import { ScrollAreaProps } from './types.js';
2
+ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
3
+ props: import('vue').PublicProps & __VLS_PrettifyLocal<ScrollAreaProps & {
4
+ onScroll?: ((event: Event) => any) | undefined;
5
+ onScrollPositionChange?: ((position: {
6
+ x: number;
7
+ y: number;
8
+ }) => any) | undefined;
9
+ }> & (typeof globalThis extends {
10
+ __VLS_PROPS_FALLBACK: infer P;
11
+ } ? P : {});
12
+ expose: (exposed: import('vue').ShallowUnwrapRef<{
13
+ viewport: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
14
+ scrollTo: (scrollOptions: ScrollToOptions) => void;
15
+ scrollBy: (scrollOptions: ScrollToOptions) => void;
16
+ update: () => void;
17
+ }>) => void;
18
+ attrs: any;
19
+ slots: {
20
+ default?: (props: {
21
+ position: import('./types.js').ScrollAreaPosition;
22
+ overflowX: boolean;
23
+ overflowY: boolean;
24
+ scrollTo: (options: ScrollToOptions) => void;
25
+ scrollBy: (options: ScrollToOptions) => void;
26
+ update: () => void;
27
+ }) => any;
28
+ };
29
+ emit: ((evt: "scroll", event: Event) => void) & ((evt: "scrollPositionChange", position: {
30
+ x: number;
31
+ y: number;
32
+ }) => void);
33
+ }>) => import('vue').VNode & {
34
+ __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
35
+ };
36
+ declare const _default: typeof __VLS_export;
37
+ export default _default;
38
+ type __VLS_PrettifyLocal<T> = (T extends any ? {
39
+ [K in keyof T]: T[K];
40
+ } : {
41
+ [K in keyof T as K]: T[K];
42
+ }) & {};
@@ -0,0 +1,25 @@
1
+ import { ScrollAreaScrollbars, ScrollAreaType } from './types.js';
2
+ export type ScrollAxis = 'x' | 'y';
3
+ export interface ScrollAreaMetrics {
4
+ clientWidth: number;
5
+ clientHeight: number;
6
+ scrollWidth: number;
7
+ scrollHeight: number;
8
+ x: number;
9
+ y: number;
10
+ overflowX: boolean;
11
+ overflowY: boolean;
12
+ horizontalThumbSize: number;
13
+ horizontalThumbOffset: number;
14
+ verticalThumbSize: number;
15
+ verticalThumbOffset: number;
16
+ }
17
+ export declare function clamp(value: number, min: number, max: number): number;
18
+ export declare function isAxisEnabled(scrollbars: ScrollAreaScrollbars | false | undefined, axis: ScrollAxis): boolean;
19
+ export declare function isScrollbarActive(type: ScrollAreaType, enabled: boolean, overflowing: boolean): boolean;
20
+ export declare function getThumbGeometry(trackSize: number, viewportSize: number, scrollSize: number): {
21
+ size: number;
22
+ offsetRatio: number;
23
+ };
24
+ export declare function getThumbOffset(position: number, maxPosition: number, sizeRatio: number): number;
25
+ export declare function getLengthValue(value: number | string | undefined): string;
@@ -0,0 +1,33 @@
1
+ import { HTMLAttributes } from 'vue';
2
+ import { StylesApiProps } from '../../styles-api.js';
3
+ export declare const scrollAreaParts: readonly ["root", "viewport", "content", "scrollbar", "thumb", "corner"];
4
+ export type ScrollAreaPart = (typeof scrollAreaParts)[number];
5
+ export declare const scrollAreaTypes: readonly ["auto", "always", "hover", "scroll", "never"];
6
+ export type ScrollAreaType = (typeof scrollAreaTypes)[number];
7
+ export declare const scrollAreaScrollbars: readonly ["x", "y", "both"];
8
+ export type ScrollAreaScrollbars = (typeof scrollAreaScrollbars)[number];
9
+ export type ScrollAreaOrientation = 'horizontal' | 'vertical';
10
+ export interface ScrollAreaPosition {
11
+ x: number;
12
+ y: number;
13
+ }
14
+ export interface ScrollAreaSlotProps {
15
+ position: ScrollAreaPosition;
16
+ overflowX: boolean;
17
+ overflowY: boolean;
18
+ scrollTo: (options: ScrollToOptions) => void;
19
+ scrollBy: (options: ScrollToOptions) => void;
20
+ update: () => void;
21
+ }
22
+ export interface ScrollAreaProps extends StylesApiProps<ScrollAreaPart> {
23
+ id?: string;
24
+ embedded?: boolean;
25
+ type?: ScrollAreaType;
26
+ scrollbars?: ScrollAreaScrollbars | false;
27
+ scrollbarSize?: number | string;
28
+ scrollHideDelay?: number;
29
+ ariaLabel?: string;
30
+ ariaLabelledby?: string;
31
+ ariaDescribedby?: string;
32
+ viewportAttrs?: HTMLAttributes;
33
+ }
@@ -0,0 +1,54 @@
1
+ import { ScrollAreaPosition, ScrollAreaProps } from './types.js';
2
+ interface UseScrollAreaOptions {
3
+ props: Readonly<ScrollAreaProps>;
4
+ emitScroll: (event: Event) => void;
5
+ emitPositionChange: (position: ScrollAreaPosition) => void;
6
+ }
7
+ export declare function useScrollArea(options: UseScrollAreaOptions): {
8
+ onScrollbarPointerdown: (axis: import('./scrollAreaCore.js').ScrollAxis, event: PointerEvent) => void;
9
+ onThumbPointerdown: (axis: import('./scrollAreaCore.js').ScrollAxis, event: PointerEvent) => void;
10
+ onViewportScroll: (event: Event) => void;
11
+ onScrollbarKeydown: (axis: import('./scrollAreaCore.js').ScrollAxis, event: KeyboardEvent) => void;
12
+ onScrollbarWheel: (axis: import('./scrollAreaCore.js').ScrollAxis, event: WheelEvent) => void;
13
+ writeAxisPosition: (axis: import('./scrollAreaCore.js').ScrollAxis, value: number) => void;
14
+ scrollTo: (scrollOptions: ScrollToOptions) => void;
15
+ scrollBy: (scrollOptions: ScrollToOptions) => void;
16
+ renderHorizontalScrollbar: import('vue').ComputedRef<boolean>;
17
+ renderVerticalScrollbar: import('vue').ComputedRef<boolean>;
18
+ horizontalScrollbarActive: import('vue').ComputedRef<boolean>;
19
+ verticalScrollbarActive: import('vue').ComputedRef<boolean>;
20
+ horizontalScrollbarVisible: import('vue').ComputedRef<boolean>;
21
+ verticalScrollbarVisible: import('vue').ComputedRef<boolean>;
22
+ showDuringScroll: () => void;
23
+ setDraggingAxis: (axis: import('./scrollAreaCore.js').ScrollAxis | null) => void;
24
+ onPointerenter: () => void;
25
+ onPointerleave: () => void;
26
+ onFocusin: () => void;
27
+ onFocusout: (event: FocusEvent) => void;
28
+ rootRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
29
+ viewportRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
30
+ contentRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
31
+ horizontalScrollbarRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
32
+ verticalScrollbarRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
33
+ metrics: {
34
+ clientWidth: number;
35
+ clientHeight: number;
36
+ scrollWidth: number;
37
+ scrollHeight: number;
38
+ x: number;
39
+ y: number;
40
+ overflowX: boolean;
41
+ overflowY: boolean;
42
+ horizontalThumbSize: number;
43
+ horizontalThumbOffset: number;
44
+ verticalThumbSize: number;
45
+ verticalThumbOffset: number;
46
+ };
47
+ position: import('vue').ComputedRef<ScrollAreaPosition>;
48
+ update: () => void;
49
+ getPosition: (axis: import('./scrollAreaCore.js').ScrollAxis) => number;
50
+ getMaxPosition: (axis: import('./scrollAreaCore.js').ScrollAxis) => number;
51
+ getOverflow: (axis: import('./scrollAreaCore.js').ScrollAxis) => boolean;
52
+ };
53
+ export type ScrollAreaController = ReturnType<typeof useScrollArea>;
54
+ export {};
@@ -0,0 +1,21 @@
1
+ import { Ref } from 'vue';
2
+ import { ScrollAxis } from './scrollAreaCore.js';
3
+ import { ScrollAreaMetricsController } from './useScrollAreaMetrics.js';
4
+ import { ScrollAreaPosition } from './types.js';
5
+ interface UseScrollAreaControlsOptions {
6
+ viewportRef: Ref<HTMLElement | null>;
7
+ metrics: ScrollAreaMetricsController;
8
+ showDuringScroll: () => void;
9
+ emitScroll: (event: Event) => void;
10
+ emitPositionChange: (position: ScrollAreaPosition) => void;
11
+ }
12
+ export declare function useScrollAreaControls(options: UseScrollAreaControlsOptions): {
13
+ onViewportScroll: (event: Event) => void;
14
+ onScrollbarKeydown: (axis: ScrollAxis, event: KeyboardEvent) => void;
15
+ onScrollbarWheel: (axis: ScrollAxis, event: WheelEvent) => void;
16
+ writeAxisPosition: (axis: ScrollAxis, value: number) => void;
17
+ scrollTo: (scrollOptions: ScrollToOptions) => void;
18
+ scrollBy: (scrollOptions: ScrollToOptions) => void;
19
+ };
20
+ export type ScrollAreaControlsController = ReturnType<typeof useScrollAreaControls>;
21
+ export {};
@@ -0,0 +1,35 @@
1
+ import { Ref } from 'vue';
2
+ import { ScrollAxis } from './scrollAreaCore.js';
3
+ import { ScrollAreaPosition } from './types.js';
4
+ interface UseScrollAreaMetricsOptions {
5
+ viewportRef: Ref<HTMLElement | null>;
6
+ contentRef: Ref<HTMLElement | null>;
7
+ horizontalScrollbarRef: Ref<HTMLElement | null>;
8
+ verticalScrollbarRef: Ref<HTMLElement | null>;
9
+ horizontalEnabled: Readonly<Ref<boolean>>;
10
+ verticalEnabled: Readonly<Ref<boolean>>;
11
+ }
12
+ export declare function useScrollAreaMetrics(options: UseScrollAreaMetricsOptions): {
13
+ metrics: {
14
+ clientWidth: number;
15
+ clientHeight: number;
16
+ scrollWidth: number;
17
+ scrollHeight: number;
18
+ x: number;
19
+ y: number;
20
+ overflowX: boolean;
21
+ overflowY: boolean;
22
+ horizontalThumbSize: number;
23
+ horizontalThumbOffset: number;
24
+ verticalThumbSize: number;
25
+ verticalThumbOffset: number;
26
+ };
27
+ position: import('vue').ComputedRef<ScrollAreaPosition>;
28
+ update: () => void;
29
+ scheduleUpdate: () => void;
30
+ getPosition: (axis: ScrollAxis) => number;
31
+ getMaxPosition: (axis: ScrollAxis) => number;
32
+ getOverflow: (axis: ScrollAxis) => boolean;
33
+ };
34
+ export type ScrollAreaMetricsController = ReturnType<typeof useScrollAreaMetrics>;
35
+ export {};
@@ -0,0 +1,17 @@
1
+ import { Ref } from 'vue';
2
+ import { ScrollAxis } from './scrollAreaCore.js';
3
+ import { ScrollAreaControlsController } from './useScrollAreaControls.js';
4
+ import { ScrollAreaMetricsController } from './useScrollAreaMetrics.js';
5
+ interface UseScrollAreaPointerOptions {
6
+ horizontalScrollbarRef: Ref<HTMLElement | null>;
7
+ verticalScrollbarRef: Ref<HTMLElement | null>;
8
+ metrics: ScrollAreaMetricsController;
9
+ controls: ScrollAreaControlsController;
10
+ setDraggingAxis: (axis: ScrollAxis | null) => void;
11
+ shouldFocusScrollbar: () => boolean;
12
+ }
13
+ export declare function useScrollAreaPointer(options: UseScrollAreaPointerOptions): {
14
+ onScrollbarPointerdown: (axis: ScrollAxis, event: PointerEvent) => void;
15
+ onThumbPointerdown: (axis: ScrollAxis, event: PointerEvent) => void;
16
+ };
17
+ export {};
@@ -0,0 +1,49 @@
1
+ import { HTMLAttributes } from 'vue';
2
+ import { ScrollAreaController } from './useScrollArea.js';
3
+ import { ScrollAreaOrientation, ScrollAreaProps, ScrollAreaSlotProps } from './types.js';
4
+ export declare function useScrollAreaPresentation(props: Readonly<ScrollAreaProps>, scrollArea: ScrollAreaController): {
5
+ rootAttrs: import('vue').ComputedRef<Record<string, unknown>>;
6
+ viewportAttrs: import('vue').ComputedRef<HTMLAttributes>;
7
+ contentAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
8
+ horizontalScrollbarAttrs: import('vue').ComputedRef<{
9
+ role: string;
10
+ tabindex: number;
11
+ 'aria-controls': string | undefined;
12
+ 'aria-orientation': ScrollAreaOrientation;
13
+ 'aria-valuemin': number;
14
+ 'aria-valuemax': number;
15
+ 'aria-valuenow': number;
16
+ 'aria-disabled': true | undefined;
17
+ 'aria-hidden': true | undefined;
18
+ 'data-orientation': string;
19
+ 'data-active': "" | undefined;
20
+ 'data-visible': "" | undefined;
21
+ class?: import('vue').ClassValue;
22
+ style?: import('vue').StyleValue;
23
+ }>;
24
+ verticalScrollbarAttrs: import('vue').ComputedRef<{
25
+ role: string;
26
+ tabindex: number;
27
+ 'aria-controls': string | undefined;
28
+ 'aria-orientation': ScrollAreaOrientation;
29
+ 'aria-valuemin': number;
30
+ 'aria-valuemax': number;
31
+ 'aria-valuenow': number;
32
+ 'aria-disabled': true | undefined;
33
+ 'aria-hidden': true | undefined;
34
+ 'data-orientation': string;
35
+ 'data-active': "" | undefined;
36
+ 'data-visible': "" | undefined;
37
+ class?: import('vue').ClassValue;
38
+ style?: import('vue').StyleValue;
39
+ }>;
40
+ horizontalThumbAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
41
+ verticalThumbAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
42
+ cornerAttrs: import('vue').ComputedRef<{
43
+ 'aria-hidden': boolean;
44
+ 'data-visible': "" | undefined;
45
+ class?: import('vue').ClassValue;
46
+ style?: import('vue').StyleValue;
47
+ }>;
48
+ slotProps: import('vue').ComputedRef<ScrollAreaSlotProps>;
49
+ };
@@ -0,0 +1,27 @@
1
+ import { Ref } from 'vue';
2
+ import { ScrollAxis } from './scrollAreaCore.js';
3
+ import { ScrollAreaProps } from './types.js';
4
+ interface UseScrollAreaVisibilityOptions {
5
+ props: Readonly<ScrollAreaProps>;
6
+ rootRef: Ref<HTMLElement | null>;
7
+ horizontalEnabled: Readonly<Ref<boolean>>;
8
+ verticalEnabled: Readonly<Ref<boolean>>;
9
+ overflowX: () => boolean;
10
+ overflowY: () => boolean;
11
+ }
12
+ export declare function useScrollAreaVisibility(options: UseScrollAreaVisibilityOptions): {
13
+ renderHorizontalScrollbar: import('vue').ComputedRef<boolean>;
14
+ renderVerticalScrollbar: import('vue').ComputedRef<boolean>;
15
+ horizontalScrollbarActive: import('vue').ComputedRef<boolean>;
16
+ verticalScrollbarActive: import('vue').ComputedRef<boolean>;
17
+ horizontalScrollbarVisible: import('vue').ComputedRef<boolean>;
18
+ verticalScrollbarVisible: import('vue').ComputedRef<boolean>;
19
+ showDuringScroll: () => void;
20
+ setDraggingAxis: (axis: ScrollAxis | null) => void;
21
+ onPointerenter: () => void;
22
+ onPointerleave: () => void;
23
+ onFocusin: () => void;
24
+ onFocusout: (event: FocusEvent) => void;
25
+ };
26
+ export type ScrollAreaVisibilityController = ReturnType<typeof useScrollAreaVisibility>;
27
+ export {};
@@ -1,15 +1,16 @@
1
+ import { Ref } from 'vue';
1
2
  import { SelectOption, SelectProps } from './types.js';
2
3
  type SelectValue = string | number | null;
3
4
  type SelectBehaviorProps = Omit<SelectProps, 'classNames' | 'styles' | 'inputAttrs'>;
4
- export declare function useSelect(props: Readonly<SelectBehaviorProps>, emitUpdate: (value: SelectValue) => void, getValue?: () => SelectValue): {
5
- selectRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
6
- triggerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
7
- isOpen: import('vue').Ref<boolean, boolean>;
5
+ export declare function useSelect(props: Readonly<SelectBehaviorProps>, emitUpdate: (value: SelectValue) => void, getValue?: () => SelectValue, triggerRef?: Ref<HTMLElement | null>): {
6
+ selectRef: Ref<HTMLElement | null, HTMLElement | null>;
7
+ triggerRef: Ref<HTMLElement | null, HTMLElement | null>;
8
+ isOpen: Ref<boolean, boolean>;
8
9
  selectId: string;
9
10
  listboxId: string;
10
11
  control: import('../../composables/useControlState.js').ControlState;
11
12
  visibleOptions: import('vue').ComputedRef<SelectOption[]>;
12
- focusedIndex: import('vue').Ref<number, number>;
13
+ focusedIndex: Ref<number, number>;
13
14
  activeDescendantId: import('vue').ComputedRef<string | undefined>;
14
15
  rootClass: import('vue').ComputedRef<string[]>;
15
16
  hasValue: import('vue').ComputedRef<boolean>;
@@ -20,6 +21,7 @@ export declare function useSelect(props: Readonly<SelectBehaviorProps>, emitUpda
20
21
  selectOption: (option: SelectOption) => void;
21
22
  clearSelection: () => void;
22
23
  onOptionMouseenter: (option: SelectOption, index: number) => void;
24
+ onFocusout: (event: FocusEvent) => void;
23
25
  onTriggerKeydown: (e: KeyboardEvent) => void;
24
26
  };
25
27
  export {};
@@ -0,0 +1,9 @@
1
+ import { Ref, SelectHTMLAttributes } from 'vue';
2
+ import { SelectProps } from './types.js';
3
+ import { SelectValue } from './useSelectNativeValue.js';
4
+ export declare function useSelectNativeControl(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void, triggerRef: Readonly<Ref<HTMLElement | null>>): {
5
+ nativeSelectRef: Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
6
+ selectedValue: import('vue').ComputedRef<SelectValue>;
7
+ nativeInputAttrs: import('vue').ComputedRef<SelectHTMLAttributes>;
8
+ requestValueUpdate: (value: SelectValue) => void;
9
+ };
@@ -0,0 +1,15 @@
1
+ import { SelectProps } from './types.js';
2
+ export type SelectValue = string | number | null;
3
+ export declare function useSelectNativeValue(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void): {
4
+ nativeSelectRef: import('vue').Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
5
+ controllable: {
6
+ initialValue: SelectValue;
7
+ isControlled: import('vue').ComputedRef<boolean>;
8
+ value: import('vue').ComputedRef<SelectValue>;
9
+ setValue: (nextValue: SelectValue) => void;
10
+ resetValue: (nextValue?: SelectValue) => void;
11
+ };
12
+ getNativeValue: (select: HTMLSelectElement) => string | number | null;
13
+ syncNativeSelection: (value: SelectValue) => void;
14
+ requestValueUpdate: (value: SelectValue) => void;
15
+ };