@youcan/celeste 0.6.101 → 0.7.0

package/dist/cjs/chunks/scroll-area.cjs

@@ -1,9 +1,145 @@
-const require_dist = require("./dist.cjs");
+require("./chunk.cjs");
 const require_clsx = require("./clsx.cjs");
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
-const require_use_delegated_props = require("../use-delegated-props.cjs");
+const require_dist = require("./dist.cjs");
+const require_Primitive = require("./Primitive.cjs");
+const require_useForwardExpose = require("./useForwardExpose.cjs");
+const require_useNonce = require("./useNonce.cjs");
 const require_scroll_bar = require("./scroll-bar.cjs");
+const require_use_delegated_props = require("../use-delegated-props.cjs");
 let vue = require("vue");
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaCornerImpl.js
+var ScrollAreaCornerImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ScrollAreaCornerImpl",
+	setup(__props) {
+		const rootContext = require_scroll_bar.injectScrollAreaRootContext();
+		const width = (0, vue.ref)(0);
+		const height = (0, vue.ref)(0);
+		const hasSize = (0, vue.computed)(() => !!width.value && !!height.value);
+		function setCornerHeight() {
+			const offsetHeight = rootContext.scrollbarX.value?.offsetHeight || 0;
+			rootContext.onCornerHeightChange(offsetHeight);
+			height.value = offsetHeight;
+		}
+		function setCornerWidth() {
+			const offsetWidth = rootContext.scrollbarY.value?.offsetWidth || 0;
+			rootContext.onCornerWidthChange(offsetWidth);
+			width.value = offsetWidth;
+		}
+		require_dist.useResizeObserver(rootContext.scrollbarX.value, setCornerHeight);
+		require_dist.useResizeObserver(rootContext.scrollbarY.value, setCornerWidth);
+		(0, vue.watch)(() => rootContext.scrollbarX.value, setCornerHeight);
+		(0, vue.watch)(() => rootContext.scrollbarY.value, setCornerWidth);
+		return (_ctx, _cache) => {
+			return hasSize.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive.Primitive), (0, vue.mergeProps)({
+				key: 0,
+				style: {
+					width: `${width.value}px`,
+					height: `${height.value}px`,
+					position: "absolute",
+					right: (0, vue.unref)(rootContext).dir.value === "ltr" ? 0 : void 0,
+					left: (0, vue.unref)(rootContext).dir.value === "rtl" ? 0 : void 0,
+					bottom: 0
+				}
+			}, _ctx.$parent?.$props), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["style"])) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaCorner.js
+var ScrollAreaCorner_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ScrollAreaCorner",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { forwardRef } = require_useForwardExpose.useForwardExpose();
+		const rootContext = require_scroll_bar.injectScrollAreaRootContext();
+		const hasBothScrollbarsVisible = (0, vue.computed)(() => !!rootContext.scrollbarX.value && !!rootContext.scrollbarY.value);
+		const hasCorner = (0, vue.computed)(() => rootContext.type.value !== "scroll" && hasBothScrollbarsVisible.value);
+		return (_ctx, _cache) => {
+			return hasCorner.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(ScrollAreaCornerImpl_default, (0, vue.mergeProps)({ key: 0 }, props, { ref: (0, vue.unref)(forwardRef) }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16)) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaViewport.js
+var ScrollAreaViewport_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "ScrollAreaViewport",
+	props: {
+		nonce: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { nonce: propNonce } = (0, vue.toRefs)(props);
+		const nonce = require_useNonce.useNonce(propNonce);
+		const rootContext = require_scroll_bar.injectScrollAreaRootContext();
+		const viewportElement = (0, vue.ref)();
+		(0, vue.onMounted)(() => {
+			rootContext.onViewportChange(viewportElement.value);
+			rootContext.onContentChange(contentElement.value);
+		});
+		__expose({ viewportElement });
+		const { forwardRef, currentElement: contentElement } = require_useForwardExpose.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
+				ref_key: "viewportElement",
+				ref: viewportElement,
+				"data-reka-scroll-area-viewport": "",
+				style: {
+					overflowX: (0, vue.unref)(rootContext).scrollbarXEnabled.value ? "scroll" : "hidden",
+					overflowY: (0, vue.unref)(rootContext).scrollbarYEnabled.value ? "scroll" : "hidden"
+				}
+			}, _ctx.$attrs, { tabindex: 0 }), [(0, vue.createVNode)((0, vue.unref)(require_Primitive.Primitive), {
+				ref: (0, vue.unref)(forwardRef),
+				style: (0, vue.normalizeStyle)({ minWidth: (0, vue.unref)(rootContext).scrollbarXEnabled.value ? "fit-content" : void 0 }),
+				"as-child": props.asChild,
+				as: _ctx.as
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"style",
+				"as-child",
+				"as"
+			])], 16), (0, vue.createVNode)((0, vue.unref)(require_Primitive.Primitive), {
+				as: "style",
+				nonce: (0, vue.unref)(nonce)
+			}, {
+				default: (0, vue.withCtx)(() => _cache[0] || (_cache[0] = [(0, vue.createTextVNode)(" /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */ [data-reka-scroll-area-viewport] { scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } [data-reka-scroll-area-viewport]::-webkit-scrollbar { display:none; } ")])),
+				_: 1,
+				__: [0]
+			}, 8, ["nonce"])], 64);
+		};
+	}
+});
+//#endregion
 //#region src/components/scroll-area/scroll-area.vue?vue&type=script&setup=true&lang.ts
 var scroll_area_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "scroll-area",
@@ -19,15 +155,15 @@ var scroll_area_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0
 		const props = __props;
 		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.Vy), (0, vue.mergeProps)((0, vue.unref)(delegatedProps), { class: (0, vue.unref)(require_clsx.clsx)("celeste-scroll-area", props.class) }), {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_scroll_bar.ScrollAreaRoot_default), (0, vue.mergeProps)((0, vue.unref)(delegatedProps), { class: (0, vue.unref)(require_clsx.clsx)("celeste-scroll-area", props.class) }), {
 				default: (0, vue.withCtx)(() => [
-					(0, vue.createVNode)((0, vue.unref)(require_dist.Fy), { class: "celeste-scroll-area-viewport" }, {
+					(0, vue.createVNode)((0, vue.unref)(ScrollAreaViewport_default), { class: "celeste-scroll-area-viewport" }, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
 						_: 3
 					}),
 					(0, vue.createVNode)(require_scroll_bar.scroll_bar_default),
 					(0, vue.createVNode)(require_scroll_bar.scroll_bar_default, { orientation: "horizontal" }),
-					(0, vue.createVNode)((0, vue.unref)(require_dist.zy))
+					(0, vue.createVNode)((0, vue.unref)(ScrollAreaCorner_default))
 				]),
 				_: 3
 			}, 16, ["class"]);
@@ -36,7 +172,7 @@ var scroll_area_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0
 });
 //#endregion
 //#region src/components/scroll-area/scroll-area.vue
-var scroll_area_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(scroll_area_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-fe1f2e6d"]]);
+var scroll_area_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(scroll_area_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-af5a144a"]]);
 //#endregion
 Object.defineProperty(exports, "scroll_area_default", {
 	enumerable: true,