ropav 0.0.6 → 0.0.8
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.
- package/dist/_plugin-vue_export-helper.js +1 -11
- package/dist/accordion.css +112 -0
- package/dist/accordion.js +358 -0
- package/dist/badge.css +169 -0
- package/dist/badge.js +101 -0
- package/dist/bem.js +9 -0
- package/dist/button-group.css +8 -8
- package/dist/button-group.js +2 -3
- package/dist/button.js +3 -4
- package/dist/card.css +40 -20
- package/dist/card.js +71 -39
- package/dist/checkbox.js +2 -3
- package/dist/collapse.css +32 -0
- package/dist/collapse.js +62 -0
- package/dist/componentColors.js +0 -2
- package/dist/components/accordion/accordion-item.d.ts +40 -0
- package/dist/components/accordion/accordion.d.ts +23 -0
- package/dist/components/accordion/index.d.ts +4 -0
- package/dist/components/accordion/index.js +2 -0
- package/dist/components/accordion/types.d.ts +100 -0
- package/dist/components/accordion/useAccordion.d.ts +3 -0
- package/dist/components/badge/badge.d.ts +25 -0
- package/dist/components/badge/index.d.ts +3 -0
- package/dist/components/badge/index.js +2 -0
- package/dist/components/badge/types.d.ts +16 -0
- package/dist/components/badge/useBadgeColor.d.ts +8 -0
- package/dist/components/card/card.d.ts +4 -0
- package/dist/components/card/types.d.ts +4 -0
- package/dist/components/collapse/collapse.d.ts +36 -0
- package/dist/components/collapse/index.d.ts +3 -0
- package/dist/components/collapse/index.js +3 -0
- package/dist/components/collapse/types.d.ts +74 -0
- package/dist/components/collapse/useCollapse.d.ts +2 -0
- package/dist/components/dropdown-menu/dropdown-menu-items.d.ts +16 -0
- package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +23 -0
- package/dist/components/dropdown-menu/dropdown-menu.d.ts +26 -0
- package/dist/components/dropdown-menu/index.d.ts +3 -0
- package/dist/components/dropdown-menu/index.js +2 -0
- package/dist/components/dropdown-menu/types.d.ts +104 -0
- package/dist/components/dropdown-menu/useDropdownMenu.d.ts +32 -0
- package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts +30 -0
- package/dist/components/dropdown-menu/useDropdownMenuDom.d.ts +28 -0
- package/dist/components/dropdown-menu/useDropdownMenuHoverIntent.d.ts +24 -0
- package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +51 -0
- package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +16 -0
- package/dist/components/dropdown-menu/useDropdownMenuRenderItems.d.ts +25 -0
- package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +18 -0
- package/dist/components/field/field.d.ts +2 -2
- package/dist/components/field/useField.d.ts +17 -0
- package/dist/components/input/useInput.d.ts +8 -0
- package/dist/components/modal/index.d.ts +2 -0
- package/dist/components/modal/index.js +2 -0
- package/dist/components/modal/modal.d.ts +42 -0
- package/dist/components/modal/types.d.ts +31 -0
- package/dist/components/modal/useModal.d.ts +29 -0
- package/dist/components/overlay/index.d.ts +2 -0
- package/dist/components/overlay/index.js +2 -0
- package/dist/components/overlay/overlay.d.ts +19 -0
- package/dist/components/overlay/types.d.ts +12 -0
- package/dist/components/overlay/useOverlay.d.ts +7 -0
- package/dist/components/popover/index.d.ts +2 -0
- package/dist/components/popover/index.js +2 -0
- package/dist/components/popover/popover.d.ts +43 -0
- package/dist/components/popover/types.d.ts +43 -0
- package/dist/components/popover/usePopover.d.ts +23 -0
- package/dist/components/tabs/index.d.ts +6 -0
- package/dist/components/tabs/index.js +2 -0
- package/dist/components/tabs/tabs-content.d.ts +24 -0
- package/dist/components/tabs/tabs-list.d.ts +26 -0
- package/dist/components/tabs/tabs-trigger.d.ts +29 -0
- package/dist/components/tabs/tabs.d.ts +31 -0
- package/dist/components/tabs/types.d.ts +160 -0
- package/dist/components/tabs/useTabs.d.ts +5 -0
- package/dist/dropdown-menu.css +159 -0
- package/dist/dropdown-menu.js +901 -0
- package/dist/field.css +11 -8
- package/dist/field.js +93 -52
- package/dist/icon-button.css +1 -1
- package/dist/icon-button.js +3 -4
- package/dist/index.d.ts +8 -0
- package/dist/index.js +12 -1
- package/dist/input.css +25 -25
- package/dist/input.js +57 -40
- package/dist/modal.css +134 -0
- package/dist/modal.js +427 -0
- package/dist/overlay.css +28 -0
- package/dist/overlay.js +82 -0
- package/dist/popover.css +75 -0
- package/dist/popover.js +377 -0
- package/dist/progress.js +2 -3
- package/dist/radio.js +4 -11
- package/dist/select.js +8 -39
- package/dist/slider.js +2 -3
- package/dist/switch.js +2 -3
- package/dist/tabs.css +279 -0
- package/dist/tabs.js +513 -0
- package/dist/textarea.js +2 -3
- package/dist/tooltip.js +2 -3
- package/dist/useButtonColor.js +0 -2
- package/dist/useClickOutside.js +24 -0
- package/dist/useCollapse.js +92 -0
- package/dist/useControlState.js +0 -2
- package/dist/useRequiredInject.js +9 -0
- package/dist/x.js +12 -0
- package/package.json +40 -4
- package/dist/_plugin-vue_export-helper.js.map +0 -1
- package/dist/button-group.js.map +0 -1
- package/dist/button.js.map +0 -1
- package/dist/card.js.map +0 -1
- package/dist/checkbox.js.map +0 -1
- package/dist/componentColors.js.map +0 -1
- package/dist/field.js.map +0 -1
- package/dist/icon-button.js.map +0 -1
- package/dist/input.js.map +0 -1
- package/dist/progress.js.map +0 -1
- package/dist/radio.js.map +0 -1
- package/dist/select.js.map +0 -1
- package/dist/slider.js.map +0 -1
- package/dist/switch.js.map +0 -1
- package/dist/textarea.js.map +0 -1
- package/dist/tooltip.js.map +0 -1
- package/dist/useButtonColor.js.map +0 -1
- package/dist/useControlState.js.map +0 -1
package/dist/popover.css
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
.rp-popover[data-v-fd62ef9b] {
|
|
2
|
+
--_rp-popover-main-axis-offset: var(--rp-spacing-2);
|
|
3
|
+
--_rp-popover-cross-axis-offset: 0px;
|
|
4
|
+
--_rp-popover-radius: var(--rp-radius-sm);
|
|
5
|
+
position: relative;
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
font-family: var(--rp-font-family);
|
|
8
|
+
vertical-align: middle;
|
|
9
|
+
}
|
|
10
|
+
.rp-popover__content[data-v-fd62ef9b] {
|
|
11
|
+
position: absolute;
|
|
12
|
+
z-index: 100;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
min-width: 180px;
|
|
15
|
+
max-width: min(24rem, 100vw - var(--rp-spacing-6));
|
|
16
|
+
padding: var(--rp-spacing-4);
|
|
17
|
+
color: var(--rp-color-text);
|
|
18
|
+
font-size: var(--rp-font-size-base);
|
|
19
|
+
line-height: var(--rp-line-height-normal);
|
|
20
|
+
overflow-wrap: anywhere;
|
|
21
|
+
background-color: var(--rp-color-surface-raised);
|
|
22
|
+
border: var(--rp-border-width-thin) solid var(--rp-color-border);
|
|
23
|
+
border-radius: var(--_rp-popover-radius);
|
|
24
|
+
box-shadow: var(--rp-shadow-base);
|
|
25
|
+
}
|
|
26
|
+
.rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b] {
|
|
27
|
+
bottom: calc(100% + var(--_rp-popover-main-axis-offset));
|
|
28
|
+
left: calc(50% + var(--_rp-popover-cross-axis-offset));
|
|
29
|
+
translate: -50% 0;
|
|
30
|
+
}
|
|
31
|
+
.rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b] {
|
|
32
|
+
top: calc(50% + var(--_rp-popover-cross-axis-offset));
|
|
33
|
+
left: calc(100% + var(--_rp-popover-main-axis-offset));
|
|
34
|
+
translate: 0 -50%;
|
|
35
|
+
}
|
|
36
|
+
.rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b] {
|
|
37
|
+
top: calc(100% + var(--_rp-popover-main-axis-offset));
|
|
38
|
+
left: calc(50% + var(--_rp-popover-cross-axis-offset));
|
|
39
|
+
translate: -50% 0;
|
|
40
|
+
}
|
|
41
|
+
.rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b] {
|
|
42
|
+
top: calc(50% + var(--_rp-popover-cross-axis-offset));
|
|
43
|
+
right: calc(100% + var(--_rp-popover-main-axis-offset));
|
|
44
|
+
translate: 0 -50%;
|
|
45
|
+
}
|
|
46
|
+
.rp-popover--target[data-v-fd62ef9b] {
|
|
47
|
+
display: contents;
|
|
48
|
+
}
|
|
49
|
+
.rp-popover--target .rp-popover__content[data-v-fd62ef9b] {
|
|
50
|
+
position: fixed;
|
|
51
|
+
top: var(--_rp-popover-target-y, 0);
|
|
52
|
+
right: auto;
|
|
53
|
+
bottom: auto;
|
|
54
|
+
left: var(--_rp-popover-target-x, 0);
|
|
55
|
+
}
|
|
56
|
+
.rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b] {
|
|
57
|
+
translate: calc(-50% + var(--_rp-popover-cross-axis-offset)) calc(-100% - var(--_rp-popover-main-axis-offset));
|
|
58
|
+
}
|
|
59
|
+
.rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b] {
|
|
60
|
+
translate: var(--_rp-popover-main-axis-offset) calc(-50% + var(--_rp-popover-cross-axis-offset));
|
|
61
|
+
}
|
|
62
|
+
.rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b] {
|
|
63
|
+
translate: calc(-50% + var(--_rp-popover-cross-axis-offset)) var(--_rp-popover-main-axis-offset);
|
|
64
|
+
}
|
|
65
|
+
.rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b] {
|
|
66
|
+
translate: calc(-100% - var(--_rp-popover-main-axis-offset)) calc(-50% + var(--_rp-popover-cross-axis-offset));
|
|
67
|
+
}
|
|
68
|
+
.rp-popover-content-enter-active[data-v-fd62ef9b],
|
|
69
|
+
.rp-popover-content-leave-active[data-v-fd62ef9b] {
|
|
70
|
+
transition: opacity var(--rp-transition-fast);
|
|
71
|
+
}
|
|
72
|
+
.rp-popover-content-enter-from[data-v-fd62ef9b],
|
|
73
|
+
.rp-popover-content-leave-to[data-v-fd62ef9b] {
|
|
74
|
+
opacity: 0;
|
|
75
|
+
}
|
package/dist/popover.js
ADDED
|
@@ -0,0 +1,377 @@
|
|
|
1
|
+
import './popover.css';
|
|
2
|
+
import { t as bem } from "./bem.js";
|
|
3
|
+
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
4
|
+
import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, isRef, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, template, unref, useId, useSlots, watch } from "vue";
|
|
5
|
+
//#region src/components/popover/usePopover.ts
|
|
6
|
+
var DEFAULT_PLACEMENT = "bottom";
|
|
7
|
+
var DEFAULT_ROLE = "dialog";
|
|
8
|
+
var TARGET_ATTRIBUTES = [
|
|
9
|
+
"aria-controls",
|
|
10
|
+
"aria-expanded",
|
|
11
|
+
"aria-haspopup"
|
|
12
|
+
];
|
|
13
|
+
function isHTMLElement(value) {
|
|
14
|
+
return typeof HTMLElement !== "undefined" && value instanceof HTMLElement;
|
|
15
|
+
}
|
|
16
|
+
function getTargetPosition(rect, placement) {
|
|
17
|
+
const centerX = rect.left + rect.width / 2;
|
|
18
|
+
const centerY = rect.top + rect.height / 2;
|
|
19
|
+
switch (placement) {
|
|
20
|
+
case "right": return {
|
|
21
|
+
x: rect.right,
|
|
22
|
+
y: centerY
|
|
23
|
+
};
|
|
24
|
+
case "bottom": return {
|
|
25
|
+
x: centerX,
|
|
26
|
+
y: rect.bottom
|
|
27
|
+
};
|
|
28
|
+
case "left": return {
|
|
29
|
+
x: rect.left,
|
|
30
|
+
y: centerY
|
|
31
|
+
};
|
|
32
|
+
default: return {
|
|
33
|
+
x: centerX,
|
|
34
|
+
y: rect.top
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
function setPixelVar(style, variable, value) {
|
|
39
|
+
if (value != null) style[variable] = `${value}px`;
|
|
40
|
+
}
|
|
41
|
+
function styleOrUndefined(style) {
|
|
42
|
+
return Object.keys(style).length > 0 ? style : void 0;
|
|
43
|
+
}
|
|
44
|
+
function resolveOffsetStyle(offset) {
|
|
45
|
+
if (offset == null) return void 0;
|
|
46
|
+
const style = {};
|
|
47
|
+
if (typeof offset === "number") {
|
|
48
|
+
setPixelVar(style, "--_rp-popover-main-axis-offset", offset);
|
|
49
|
+
return style;
|
|
50
|
+
}
|
|
51
|
+
setPixelVar(style, "--_rp-popover-main-axis-offset", offset.mainAxis);
|
|
52
|
+
setPixelVar(style, "--_rp-popover-cross-axis-offset", offset.crossAxis);
|
|
53
|
+
return styleOrUndefined(style);
|
|
54
|
+
}
|
|
55
|
+
function addIdReference(currentValue, id) {
|
|
56
|
+
const ids = (currentValue ?? "").split(/\s+/).filter(Boolean);
|
|
57
|
+
if (!ids.includes(id)) ids.push(id);
|
|
58
|
+
return ids.join(" ");
|
|
59
|
+
}
|
|
60
|
+
function snapshotAttributes(element) {
|
|
61
|
+
const snapshot = {};
|
|
62
|
+
for (const attribute of TARGET_ATTRIBUTES) snapshot[attribute] = element.getAttribute(attribute);
|
|
63
|
+
return snapshot;
|
|
64
|
+
}
|
|
65
|
+
function restoreAttributes(element, snapshot) {
|
|
66
|
+
for (const attribute of TARGET_ATTRIBUTES) {
|
|
67
|
+
const value = snapshot[attribute];
|
|
68
|
+
if (value == null) element.removeAttribute(attribute);
|
|
69
|
+
else element.setAttribute(attribute, value);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
function applyTargetAttributes(element, snapshot, options) {
|
|
73
|
+
element.setAttribute("aria-controls", addIdReference(snapshot["aria-controls"], options.id));
|
|
74
|
+
element.setAttribute("aria-expanded", String(options.expanded));
|
|
75
|
+
element.setAttribute("aria-haspopup", options.role);
|
|
76
|
+
}
|
|
77
|
+
function resolveTargetElement(target) {
|
|
78
|
+
if (!target) return null;
|
|
79
|
+
if (typeof target !== "string") return isHTMLElement(target) ? target : null;
|
|
80
|
+
if (typeof document === "undefined") return null;
|
|
81
|
+
try {
|
|
82
|
+
const element = document.querySelector(target);
|
|
83
|
+
return isHTMLElement(element) ? element : null;
|
|
84
|
+
} catch {
|
|
85
|
+
return null;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
function usePopover(props, emitOpenChange) {
|
|
89
|
+
const slots = useSlots();
|
|
90
|
+
const generatedId = useId();
|
|
91
|
+
const rootRef = ref(null);
|
|
92
|
+
const targetElement = ref(null);
|
|
93
|
+
const targetPosition = ref(null);
|
|
94
|
+
const uncontrolledOpen = ref(false);
|
|
95
|
+
const popoverId = computed(() => props.id ?? `${generatedId}-popover`);
|
|
96
|
+
const placement = computed(() => props.placement ?? DEFAULT_PLACEMENT);
|
|
97
|
+
const popoverRole = computed(() => props.role ?? DEFAULT_ROLE);
|
|
98
|
+
const isTargetMode = computed(() => props.target != null && props.target !== "");
|
|
99
|
+
const hasContent = computed(() => Boolean(slots.content || isTargetMode.value && slots.default));
|
|
100
|
+
const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));
|
|
101
|
+
const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
|
|
102
|
+
const isVisible = computed(() => isOpen.value && !isDisabled.value);
|
|
103
|
+
const shouldRenderContent = computed(() => !isDisabled.value);
|
|
104
|
+
const shouldWireTarget = computed(() => isTargetMode.value && !isDisabled.value);
|
|
105
|
+
const ariaLabel = computed(() => props.ariaLabel || void 0);
|
|
106
|
+
const ariaLabelledby = computed(() => props.ariaLabelledby || void 0);
|
|
107
|
+
const ariaDescribedby = computed(() => props.ariaDescribedby || void 0);
|
|
108
|
+
const rootClass = computed(() => bem("rp-popover", {
|
|
109
|
+
[`placement-${placement.value}`]: true,
|
|
110
|
+
target: isTargetMode.value,
|
|
111
|
+
open: isVisible.value,
|
|
112
|
+
disabled: props.disabled
|
|
113
|
+
}));
|
|
114
|
+
const contentStyle = computed(() => {
|
|
115
|
+
const style = { ...resolveOffsetStyle(props.offset) };
|
|
116
|
+
if (isTargetMode.value && targetPosition.value) {
|
|
117
|
+
setPixelVar(style, "--_rp-popover-target-x", targetPosition.value.x);
|
|
118
|
+
setPixelVar(style, "--_rp-popover-target-y", targetPosition.value.y);
|
|
119
|
+
}
|
|
120
|
+
return styleOrUndefined(style);
|
|
121
|
+
});
|
|
122
|
+
const triggerProps = computed(() => ({
|
|
123
|
+
"aria-controls": isDisabled.value ? void 0 : popoverId.value,
|
|
124
|
+
"aria-expanded": isDisabled.value ? void 0 : isVisible.value,
|
|
125
|
+
"aria-haspopup": isDisabled.value ? void 0 : popoverRole.value,
|
|
126
|
+
onClick: onTriggerClick,
|
|
127
|
+
onKeydown: onTriggerKeydown
|
|
128
|
+
}));
|
|
129
|
+
const contentSlotProps = computed(() => ({
|
|
130
|
+
isOpen: isVisible.value,
|
|
131
|
+
open: openPopover,
|
|
132
|
+
close: closePopover,
|
|
133
|
+
toggle: togglePopover
|
|
134
|
+
}));
|
|
135
|
+
const slotProps = computed(() => ({
|
|
136
|
+
triggerProps: triggerProps.value,
|
|
137
|
+
...contentSlotProps.value
|
|
138
|
+
}));
|
|
139
|
+
function setOpen(nextOpen) {
|
|
140
|
+
const previousOpen = isOpen.value;
|
|
141
|
+
if (props.open === void 0) uncontrolledOpen.value = nextOpen;
|
|
142
|
+
if (previousOpen !== nextOpen) emitOpenChange?.(nextOpen);
|
|
143
|
+
}
|
|
144
|
+
function openPopover() {
|
|
145
|
+
if (isDisabled.value) return;
|
|
146
|
+
updateTargetPosition();
|
|
147
|
+
setOpen(true);
|
|
148
|
+
}
|
|
149
|
+
function closePopover() {
|
|
150
|
+
setOpen(false);
|
|
151
|
+
}
|
|
152
|
+
function togglePopover() {
|
|
153
|
+
if (isVisible.value) closePopover();
|
|
154
|
+
else openPopover();
|
|
155
|
+
}
|
|
156
|
+
function onTriggerClick() {
|
|
157
|
+
togglePopover();
|
|
158
|
+
}
|
|
159
|
+
function onTriggerKeydown(event) {
|
|
160
|
+
if (event.key !== "Escape") return;
|
|
161
|
+
event.stopPropagation();
|
|
162
|
+
closePopover();
|
|
163
|
+
}
|
|
164
|
+
function onTargetClick() {
|
|
165
|
+
togglePopover();
|
|
166
|
+
}
|
|
167
|
+
function readTarget() {
|
|
168
|
+
return isRef(props.target) ? props.target.value : props.target;
|
|
169
|
+
}
|
|
170
|
+
function updateTargetPosition() {
|
|
171
|
+
if (!isTargetMode.value || !targetElement.value) {
|
|
172
|
+
targetPosition.value = null;
|
|
173
|
+
return;
|
|
174
|
+
}
|
|
175
|
+
targetPosition.value = getTargetPosition(targetElement.value.getBoundingClientRect(), placement.value);
|
|
176
|
+
}
|
|
177
|
+
function isEventInsidePopover(event) {
|
|
178
|
+
const eventTarget = event.target;
|
|
179
|
+
if (typeof Node === "undefined" || !(eventTarget instanceof Node)) return false;
|
|
180
|
+
return Boolean(rootRef.value?.contains(eventTarget) || targetElement.value?.contains(eventTarget));
|
|
181
|
+
}
|
|
182
|
+
function onDocumentClick(event) {
|
|
183
|
+
if (props.closeOnOutsideClick === false || isEventInsidePopover(event)) return;
|
|
184
|
+
closePopover();
|
|
185
|
+
}
|
|
186
|
+
function onDocumentKeydown(event) {
|
|
187
|
+
if (props.closeOnEscape === false || event.key !== "Escape") return;
|
|
188
|
+
closePopover();
|
|
189
|
+
}
|
|
190
|
+
function syncTargetElement() {
|
|
191
|
+
const nextTarget = isTargetMode.value ? resolveTargetElement(readTarget()) : null;
|
|
192
|
+
if (targetElement.value !== nextTarget) targetElement.value = nextTarget;
|
|
193
|
+
if (!nextTarget) {
|
|
194
|
+
targetPosition.value = null;
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
197
|
+
if (isVisible.value) updateTargetPosition();
|
|
198
|
+
}
|
|
199
|
+
watch(isDisabled, (disabled) => {
|
|
200
|
+
if (disabled) closePopover();
|
|
201
|
+
});
|
|
202
|
+
watch(() => readTarget(), () => syncTargetElement(), { flush: "post" });
|
|
203
|
+
watch([shouldWireTarget, targetElement], ([shouldWire, target], _previous, onCleanup) => {
|
|
204
|
+
if (!shouldWire || !target) return;
|
|
205
|
+
target.addEventListener("click", onTargetClick);
|
|
206
|
+
onCleanup(() => {
|
|
207
|
+
target.removeEventListener("click", onTargetClick);
|
|
208
|
+
});
|
|
209
|
+
}, { flush: "sync" });
|
|
210
|
+
watch([
|
|
211
|
+
shouldWireTarget,
|
|
212
|
+
targetElement,
|
|
213
|
+
popoverId,
|
|
214
|
+
popoverRole,
|
|
215
|
+
isVisible
|
|
216
|
+
], ([shouldWire, target], _previous, onCleanup) => {
|
|
217
|
+
if (!shouldWire || !target) return;
|
|
218
|
+
const snapshot = snapshotAttributes(target);
|
|
219
|
+
applyTargetAttributes(target, snapshot, {
|
|
220
|
+
id: popoverId.value,
|
|
221
|
+
expanded: isVisible.value,
|
|
222
|
+
role: popoverRole.value
|
|
223
|
+
});
|
|
224
|
+
onCleanup(() => {
|
|
225
|
+
restoreAttributes(target, snapshot);
|
|
226
|
+
});
|
|
227
|
+
}, { flush: "sync" });
|
|
228
|
+
watch([
|
|
229
|
+
isVisible,
|
|
230
|
+
isTargetMode,
|
|
231
|
+
targetElement
|
|
232
|
+
], ([visible, targetMode, target], _previous, onCleanup) => {
|
|
233
|
+
if (!visible || !targetMode || !target || typeof window === "undefined") return;
|
|
234
|
+
window.addEventListener("resize", updateTargetPosition);
|
|
235
|
+
window.addEventListener("scroll", updateTargetPosition, true);
|
|
236
|
+
onCleanup(() => {
|
|
237
|
+
window.removeEventListener("resize", updateTargetPosition);
|
|
238
|
+
window.removeEventListener("scroll", updateTargetPosition, true);
|
|
239
|
+
});
|
|
240
|
+
}, { flush: "sync" });
|
|
241
|
+
watch(isVisible, (visible, _previous, onCleanup) => {
|
|
242
|
+
if (!visible || typeof document === "undefined") return;
|
|
243
|
+
document.addEventListener("click", onDocumentClick, true);
|
|
244
|
+
document.addEventListener("keydown", onDocumentKeydown);
|
|
245
|
+
onCleanup(() => {
|
|
246
|
+
document.removeEventListener("click", onDocumentClick, true);
|
|
247
|
+
document.removeEventListener("keydown", onDocumentKeydown);
|
|
248
|
+
});
|
|
249
|
+
}, {
|
|
250
|
+
flush: "sync",
|
|
251
|
+
immediate: true
|
|
252
|
+
});
|
|
253
|
+
watch([
|
|
254
|
+
targetElement,
|
|
255
|
+
placement,
|
|
256
|
+
isVisible
|
|
257
|
+
], () => {
|
|
258
|
+
if (isVisible.value) updateTargetPosition();
|
|
259
|
+
}, { flush: "sync" });
|
|
260
|
+
onMounted(syncTargetElement);
|
|
261
|
+
return {
|
|
262
|
+
rootRef,
|
|
263
|
+
popoverId,
|
|
264
|
+
isOpen,
|
|
265
|
+
isVisible,
|
|
266
|
+
isTargetMode,
|
|
267
|
+
popoverRole,
|
|
268
|
+
ariaLabel,
|
|
269
|
+
ariaLabelledby,
|
|
270
|
+
ariaDescribedby,
|
|
271
|
+
shouldRenderContent,
|
|
272
|
+
rootClass,
|
|
273
|
+
contentStyle,
|
|
274
|
+
triggerProps,
|
|
275
|
+
slotProps,
|
|
276
|
+
contentSlotProps,
|
|
277
|
+
openPopover,
|
|
278
|
+
closePopover,
|
|
279
|
+
togglePopover,
|
|
280
|
+
onTriggerKeydown
|
|
281
|
+
};
|
|
282
|
+
}
|
|
283
|
+
//#endregion
|
|
284
|
+
//#region src/components/popover/popover.vue?vue&type=script&setup=true&vapor=true&lang.ts
|
|
285
|
+
var t0 = template("<section data-v-fd62ef9b class=rp-popover__content>");
|
|
286
|
+
var t1 = template("<span data-v-fd62ef9b>", 1);
|
|
287
|
+
//#endregion
|
|
288
|
+
//#region src/components/popover/popover.vue
|
|
289
|
+
var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
|
|
290
|
+
name: "RpPopover",
|
|
291
|
+
__name: "popover",
|
|
292
|
+
props: {
|
|
293
|
+
id: {},
|
|
294
|
+
target: {},
|
|
295
|
+
placement: { default: "bottom" },
|
|
296
|
+
offset: {},
|
|
297
|
+
open: {
|
|
298
|
+
type: Boolean,
|
|
299
|
+
default: void 0
|
|
300
|
+
},
|
|
301
|
+
disabled: {
|
|
302
|
+
type: Boolean,
|
|
303
|
+
default: false
|
|
304
|
+
},
|
|
305
|
+
role: { default: "dialog" },
|
|
306
|
+
ariaLabel: {},
|
|
307
|
+
ariaLabelledby: {},
|
|
308
|
+
ariaDescribedby: {},
|
|
309
|
+
closeOnOutsideClick: {
|
|
310
|
+
type: Boolean,
|
|
311
|
+
default: true
|
|
312
|
+
},
|
|
313
|
+
closeOnEscape: {
|
|
314
|
+
type: Boolean,
|
|
315
|
+
default: true
|
|
316
|
+
}
|
|
317
|
+
},
|
|
318
|
+
emits: ["update:open"],
|
|
319
|
+
setup(__props, { emit: __emit }) {
|
|
320
|
+
const props = __props;
|
|
321
|
+
const emit = __emit;
|
|
322
|
+
const { rootRef, popoverId, isVisible, isTargetMode, popoverRole, ariaLabel, ariaLabelledby, ariaDescribedby, shouldRenderContent, rootClass, contentStyle, slotProps, contentSlotProps } = usePopover(props, (open) => {
|
|
323
|
+
emit("update:open", open);
|
|
324
|
+
});
|
|
325
|
+
const n12 = t1();
|
|
326
|
+
renderEffect(() => setClass(n12, unref(rootClass)));
|
|
327
|
+
setInsertionState(n12, null, 0);
|
|
328
|
+
createIf(() => !unref(isTargetMode), () => {
|
|
329
|
+
return createSlot("default", {
|
|
330
|
+
triggerProps: () => unref(slotProps).triggerProps,
|
|
331
|
+
isOpen: () => unref(slotProps).isOpen,
|
|
332
|
+
open: () => unref(slotProps).open,
|
|
333
|
+
close: () => unref(slotProps).close,
|
|
334
|
+
toggle: () => unref(slotProps).toggle
|
|
335
|
+
}, null, 1);
|
|
336
|
+
});
|
|
337
|
+
setInsertionState(n12, null, 1);
|
|
338
|
+
createComponent(VaporTransition, {
|
|
339
|
+
name: "rp-popover-content",
|
|
340
|
+
persisted: ""
|
|
341
|
+
}, extend(() => {
|
|
342
|
+
return createIf(() => unref(shouldRenderContent), () => {
|
|
343
|
+
const n10 = t0();
|
|
344
|
+
renderEffect(() => {
|
|
345
|
+
setProp(n10, "id", unref(popoverId));
|
|
346
|
+
setProp(n10, "role", unref(popoverRole));
|
|
347
|
+
setAttr(n10, "aria-label", unref(ariaLabel));
|
|
348
|
+
setAttr(n10, "aria-labelledby", unref(ariaLabelledby));
|
|
349
|
+
setAttr(n10, "aria-describedby", unref(ariaDescribedby));
|
|
350
|
+
setStyle(n10, unref(contentStyle));
|
|
351
|
+
});
|
|
352
|
+
setInsertionState(n10, null, 0);
|
|
353
|
+
createSlot("content", {
|
|
354
|
+
isOpen: () => unref(contentSlotProps).isOpen,
|
|
355
|
+
open: () => unref(contentSlotProps).open,
|
|
356
|
+
close: () => unref(contentSlotProps).close,
|
|
357
|
+
toggle: () => unref(contentSlotProps).toggle
|
|
358
|
+
}, () => {
|
|
359
|
+
return createIf(() => unref(isTargetMode), () => {
|
|
360
|
+
return createSlot("default", {
|
|
361
|
+
isOpen: () => unref(contentSlotProps).isOpen,
|
|
362
|
+
open: () => unref(contentSlotProps).open,
|
|
363
|
+
close: () => unref(contentSlotProps).close,
|
|
364
|
+
toggle: () => unref(contentSlotProps).toggle
|
|
365
|
+
}, null, 1);
|
|
366
|
+
}, null, 129);
|
|
367
|
+
}, 1);
|
|
368
|
+
applyVShow(n10, () => unref(isVisible));
|
|
369
|
+
return n10;
|
|
370
|
+
}, null, 129);
|
|
371
|
+
}, { _: 8 }));
|
|
372
|
+
setStaticTemplateRef(n12, rootRef, null, "rootRef");
|
|
373
|
+
return n12;
|
|
374
|
+
}
|
|
375
|
+
}), [["__scopeId", "data-v-fd62ef9b"]]);
|
|
376
|
+
//#endregion
|
|
377
|
+
export { popover_default as t };
|
package/dist/progress.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import './progress.css';
|
|
2
|
+
import { t as bem } from "./bem.js";
|
|
3
|
+
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
2
4
|
import { n as getComponentCustomColor, r as isComponentPresetColor, t as componentColors } from "./componentColors.js";
|
|
3
|
-
import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
4
5
|
import { t as useControlState } from "./useControlState.js";
|
|
5
6
|
import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref } from "vue";
|
|
6
7
|
//#region src/components/progress/useProgress.ts
|
|
@@ -173,5 +174,3 @@ var progressRadiuses = [
|
|
|
173
174
|
];
|
|
174
175
|
//#endregion
|
|
175
176
|
export { progress_default as i, progressRadiuses as n, progressSizes as r, progressColors as t };
|
|
176
|
-
|
|
177
|
-
//# sourceMappingURL=progress.js.map
|
package/dist/radio.js
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import './radio.css';
|
|
2
|
+
import { t as useRequiredInject } from "./useRequiredInject.js";
|
|
3
|
+
import { t as bem } from "./bem.js";
|
|
4
|
+
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
2
5
|
import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
|
|
3
|
-
import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
4
6
|
import { t as useControlState } from "./useControlState.js";
|
|
5
|
-
import { child, computed, createIf, createSlot, defineVaporComponent,
|
|
6
|
-
//#region src/composables/useRequiredInject.ts
|
|
7
|
-
function useRequiredInject(key, componentName) {
|
|
8
|
-
const value = inject(key);
|
|
9
|
-
if (value == null) throw new Error(`[Ropav] <${componentName}> must be used inside its parent provider component.`);
|
|
10
|
-
return value;
|
|
11
|
-
}
|
|
12
|
-
//#endregion
|
|
7
|
+
import { child, computed, createIf, createSlot, defineVaporComponent, on, provide, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setValue, template, unref, useId } from "vue";
|
|
13
8
|
//#region src/components/radio/types.ts
|
|
14
9
|
var radioGroupKey = Symbol("radioGroup");
|
|
15
10
|
//#endregion
|
|
@@ -195,5 +190,3 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
|
|
|
195
190
|
}), [["__scopeId", "data-v-a2c46e46"]]);
|
|
196
191
|
//#endregion
|
|
197
192
|
export { radio_default as n, radio_group_default as t };
|
|
198
|
-
|
|
199
|
-
//# sourceMappingURL=radio.js.map
|
package/dist/select.js
CHANGED
|
@@ -1,49 +1,20 @@
|
|
|
1
1
|
import './select.css';
|
|
2
|
-
import {
|
|
2
|
+
import { t as bem } from "./bem.js";
|
|
3
|
+
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
3
4
|
import { t as useControlState } from "./useControlState.js";
|
|
4
|
-
import {
|
|
5
|
+
import { t as useClickOutside } from "./useClickOutside.js";
|
|
6
|
+
import { t as x_default } from "./x.js";
|
|
7
|
+
import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, withModifiers, withVaporModifiers } from "vue";
|
|
5
8
|
//#region ~icons/lucide/chevrons-up-down
|
|
6
|
-
var t0$
|
|
7
|
-
function render$1(_ctx) {
|
|
8
|
-
return t0$2();
|
|
9
|
-
}
|
|
10
|
-
var chevrons_up_down_default = markRaw(defineVaporComponent({
|
|
11
|
-
name: "lucide-chevrons-up-down",
|
|
12
|
-
render: render$1
|
|
13
|
-
}));
|
|
14
|
-
//#endregion
|
|
15
|
-
//#region ~icons/lucide/x
|
|
16
|
-
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=\"M18 6L6 18M6 6l12 12\">", 3, 1);
|
|
9
|
+
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=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
|
|
17
10
|
function render(_ctx) {
|
|
18
11
|
return t0$1();
|
|
19
12
|
}
|
|
20
|
-
var
|
|
21
|
-
name: "lucide-
|
|
13
|
+
var chevrons_up_down_default = markRaw(defineVaporComponent({
|
|
14
|
+
name: "lucide-chevrons-up-down",
|
|
22
15
|
render
|
|
23
16
|
}));
|
|
24
17
|
//#endregion
|
|
25
|
-
//#region src/composables/useClickOutside.ts
|
|
26
|
-
function useClickOutside(target, active, callback) {
|
|
27
|
-
let isListening = false;
|
|
28
|
-
let stopWatch;
|
|
29
|
-
function handler(e) {
|
|
30
|
-
if (target.value && !target.value.contains(e.target)) callback();
|
|
31
|
-
}
|
|
32
|
-
function setListening(value) {
|
|
33
|
-
if (typeof document === "undefined" || value === isListening) return;
|
|
34
|
-
isListening = value;
|
|
35
|
-
if (value) document.addEventListener("click", handler, true);
|
|
36
|
-
else document.removeEventListener("click", handler, true);
|
|
37
|
-
}
|
|
38
|
-
onMounted(() => {
|
|
39
|
-
stopWatch = watch(active, setListening, { immediate: true });
|
|
40
|
-
});
|
|
41
|
-
onBeforeUnmount(() => {
|
|
42
|
-
stopWatch?.();
|
|
43
|
-
setListening(false);
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
//#endregion
|
|
47
18
|
//#region src/composables/useListNavigation.ts
|
|
48
19
|
function useListNavigation(options) {
|
|
49
20
|
const localFocusedIndex = ref(-1);
|
|
@@ -405,5 +376,3 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
|
|
|
405
376
|
}), [["__scopeId", "data-v-9838513c"]]);
|
|
406
377
|
//#endregion
|
|
407
378
|
export { select_default as t };
|
|
408
|
-
|
|
409
|
-
//# sourceMappingURL=select.js.map
|
package/dist/slider.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import './slider.css';
|
|
2
|
-
import {
|
|
2
|
+
import { t as bem } from "./bem.js";
|
|
3
|
+
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
3
4
|
import { t as useControlState } from "./useControlState.js";
|
|
4
5
|
import { n as useDelayedOpen, t as tooltip_default } from "./tooltip.js";
|
|
5
6
|
import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, next, on, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setStyle, setText, setValue, template, toDisplayString, txt, unref } from "vue";
|
|
@@ -408,5 +409,3 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
|
|
|
408
409
|
}), [["__scopeId", "data-v-c9655b1d"]]);
|
|
409
410
|
//#endregion
|
|
410
411
|
export { sliderSizes as i, sliderColors as n, sliderOrientations as r, slider_default as t };
|
|
411
|
-
|
|
412
|
-
//# sourceMappingURL=slider.js.map
|
package/dist/switch.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import './switch.css';
|
|
2
|
+
import { t as bem } from "./bem.js";
|
|
3
|
+
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
2
4
|
import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
|
|
3
|
-
import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
4
5
|
import { t as useControlState } from "./useControlState.js";
|
|
5
6
|
import { child, computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
|
|
6
7
|
//#region src/components/switch/useSwitch.ts
|
|
@@ -103,5 +104,3 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
|
|
|
103
104
|
}), [["__scopeId", "data-v-e9d95947"]]);
|
|
104
105
|
//#endregion
|
|
105
106
|
export { switch_default as t };
|
|
106
|
-
|
|
107
|
-
//# sourceMappingURL=switch.js.map
|