@flux-ui/components 3.0.0-next.24 → 3.0.0-next.26

package/dist/index.js

@@ -305,44 +305,6 @@ var freeGlobal = typeof global == "object" && global && global.Object === Object
 var freeSelf = typeof self == "object" && self && self.Object === Object && self;
 /** Built-in value references. */
 var Symbol$1 = (freeGlobal || freeSelf || Function("return this")()).Symbol;
-/**
-* A specialized version of `_.map` for arrays without support for iteratee
-* shorthands.
-*
-* @private
-* @param {Array} [array] The array to iterate over.
-* @param {Function} iteratee The function invoked per iteration.
-* @returns {Array} Returns the new mapped array.
-*/
-function arrayMap(array, iteratee) {
-	var index = -1, length = array == null ? 0 : array.length, result = Array(length);
-	while (++index < length) result[index] = iteratee(array[index], index, array);
-	return result;
-}
-/**
-* Checks if `value` is classified as an `Array` object.
-*
-* @static
-* @memberOf _
-* @since 0.1.0
-* @category Lang
-* @param {*} value The value to check.
-* @returns {boolean} Returns `true` if `value` is an array, else `false`.
-* @example
-*
-* _.isArray([1, 2, 3]);
-* // => true
-*
-* _.isArray(document.body.children);
-* // => false
-*
-* _.isArray('abc');
-* // => false
-*
-* _.isArray(_.noop);
-* // => false
-*/
-var isArray = Array.isArray;
 /** Used for built-in method references. */
 var objectProto = Object.prototype;
 /** Used to check objects for own properties. */
@@ -453,6 +415,44 @@ var symbolTag = "[object Symbol]";
 function isSymbol(value) {
 	return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
 }
+/**
+* A specialized version of `_.map` for arrays without support for iteratee
+* shorthands.
+*
+* @private
+* @param {Array} [array] The array to iterate over.
+* @param {Function} iteratee The function invoked per iteration.
+* @returns {Array} Returns the new mapped array.
+*/
+function arrayMap(array, iteratee) {
+	var index = -1, length = array == null ? 0 : array.length, result = Array(length);
+	while (++index < length) result[index] = iteratee(array[index], index, array);
+	return result;
+}
+/**
+* Checks if `value` is classified as an `Array` object.
+*
+* @static
+* @memberOf _
+* @since 0.1.0
+* @category Lang
+* @param {*} value The value to check.
+* @returns {boolean} Returns `true` if `value` is an array, else `false`.
+* @example
+*
+* _.isArray([1, 2, 3]);
+* // => true
+*
+* _.isArray(document.body.children);
+* // => false
+*
+* _.isArray('abc');
+* // => false
+*
+* _.isArray(_.noop);
+* // => false
+*/
+var isArray = Array.isArray;
 /** Used as references for various `Number` constants. */
 var INFINITY = Infinity;
 /** Used to convert symbols to primitives and strings. */
@@ -4268,32 +4268,32 @@ var FluxAction_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "buttonLabel": _0$14, "button": _1$7, "buttonIcon": _2$4 } = Button_module_default$1;
+var { "button": _0$14, "buttonIcon": _1$7, "buttonLabel": _2$4 } = Button_module_default$1;
 var Button_module_default = {
-	primaryButton: `primary-button ${_1$7}`,
+	primaryButton: `primary-button ${_0$14}`,
 	spinner: `spinner`,
-	primaryButtonIcon: `primary-button-icon ${_2$4}`,
-	primaryButtonLabel: `primary-button-label ${_0$14}`,
-	secondaryButton: `secondary-button ${_1$7}`,
-	secondaryButtonIcon: `secondary-button-icon ${_2$4}`,
-	secondaryButtonLabel: `secondary-button-label ${_0$14}`,
-	destructiveButton: `destructive-button ${_1$7}`,
-	destructiveButtonIcon: `destructive-button-icon ${_2$4}`,
-	destructiveButtonLabel: `destructive-button-label ${_0$14}`,
-	baseLinkButton: `base-link-button ${_1$7}`,
-	primaryLinkButton: `primary-link-button base-link-button ${_1$7}`,
-	primaryLinkButtonIcon: `primary-link-button-icon ${_2$4}`,
-	primaryLinkButtonLabel: `primary-link-button-label ${_0$14}`,
-	secondaryLinkButton: `secondary-link-button base-link-button ${_1$7}`,
-	secondaryLinkButtonIcon: `secondary-link-button-icon ${_2$4}`,
-	secondaryLinkButtonLabel: `secondary-link-button-label ${_0$14}`,
-	linkButton: `link-button ${_1$7}`,
-	linkButtonIcon: `link-button-icon ${_2$4}`,
+	primaryButtonIcon: `primary-button-icon ${_1$7}`,
+	primaryButtonLabel: `primary-button-label ${_2$4}`,
+	secondaryButton: `secondary-button ${_0$14}`,
+	secondaryButtonIcon: `secondary-button-icon ${_1$7}`,
+	secondaryButtonLabel: `secondary-button-label ${_2$4}`,
+	destructiveButton: `destructive-button ${_0$14}`,
+	destructiveButtonIcon: `destructive-button-icon ${_1$7}`,
+	destructiveButtonLabel: `destructive-button-label ${_2$4}`,
+	baseLinkButton: `base-link-button ${_0$14}`,
+	primaryLinkButton: `primary-link-button base-link-button ${_0$14}`,
+	primaryLinkButtonIcon: `primary-link-button-icon ${_1$7}`,
+	primaryLinkButtonLabel: `primary-link-button-label ${_2$4}`,
+	secondaryLinkButton: `secondary-link-button base-link-button ${_0$14}`,
+	secondaryLinkButtonIcon: `secondary-link-button-icon ${_1$7}`,
+	secondaryLinkButtonLabel: `secondary-link-button-label ${_2$4}`,
+	linkButton: `link-button ${_0$14}`,
+	linkButtonIcon: `link-button-icon ${_1$7}`,
 	icon: `icon`,
-	linkButtonLabel: `link-button-label ${_0$14}`,
-	publishButton: `publish-button primary-button ${_1$7}`,
-	publishButtonIcon: `publish-button-icon primary-button-icon ${_2$4}`,
-	publishButtonLabel: `publish-button-label primary-button-label ${_0$14}`,
+	linkButtonLabel: `link-button-label ${_2$4}`,
+	publishButton: `publish-button primary-button ${_0$14}`,
+	publishButtonIcon: `publish-button-icon primary-button-icon ${_1$7}`,
+	publishButtonLabel: `publish-button-label primary-button-label ${_2$4}`,
 	publishButtonAnimation: `publish-button-animation`,
 	isDone: `is-done`,
 	publishButtonAnimationArrow: `publish-button-animation-arrow`,
@@ -5644,7 +5644,158 @@ var FluxBoxedIcon_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "buttonIcon": _0$11, "buttonLabel": _1$5, "button": _2$2 } = Button_module_default$1;
+var Anchor_default = /* @__PURE__ */ defineComponent({
+	__name: "Anchor",
+	props: { tagName: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.tagName), null, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			});
+		};
+	}
+});
+var AnchorPopup_default = /* @__PURE__ */ defineComponent({
+	__name: "AnchorPopup",
+	props: {
+		anchor: {},
+		direction: { default: "vertical" },
+		margin: { default: 12 },
+		position: {},
+		useAnchorWidth: { type: Boolean }
+	},
+	setup(__props) {
+		const anchorRef = ref();
+		const popupRef = useTemplateRef("popup");
+		const state = reactive({
+			x: 0,
+			y: 0,
+			width: null
+		});
+		onMounted(() => {
+			window.addEventListener("resize", onResize, { passive: true });
+			window.addEventListener("scroll", onScroll, {
+				capture: true,
+				passive: true
+			});
+		});
+		onUnmounted(() => {
+			window.removeEventListener("resize", onResize);
+			window.removeEventListener("scroll", onScroll);
+		});
+		H(popupRef, () => {
+			reposition();
+		}, {
+			childList: true,
+			subtree: true
+		});
+		function reposition() {
+			const anchor = unref(anchorRef);
+			const popup = unref(popupRef);
+			if (!anchor || !popup) return;
+			const { x, y, height, width } = anchor.getBoundingClientRect();
+			const { height: popupHeight, width: popupWidth } = popup.getBoundingClientRect();
+			let px, py;
+			switch (__props.position) {
+				case "top":
+					px = x + width / 2 - popupWidth / 2;
+					py = y - popupHeight - __props.margin;
+					break;
+				case "top-left":
+					px = x;
+					py = y - popupHeight - __props.margin;
+					break;
+				case "top-right":
+					px = x - popupWidth + width;
+					py = y - popupHeight - __props.margin;
+					break;
+				case "left":
+					px = x - popupWidth - __props.margin;
+					py = y + height / 2 - popupHeight / 2;
+					break;
+				case "left-top":
+					px = x - popupWidth - __props.margin;
+					py = y;
+					break;
+				case "left-bottom":
+					px = x - popupWidth - __props.margin;
+					py = y + height - popupHeight;
+					break;
+				case "right":
+					px = x + width + __props.margin;
+					py = y + height / 2 - popupHeight / 2;
+					break;
+				case "right-top":
+					px = x + width + __props.margin;
+					py = y;
+					break;
+				case "right-bottom":
+					px = x + width + __props.margin;
+					py = y + height - popupHeight;
+					break;
+				case "bottom":
+					px = x + width / 2 - popupWidth / 2;
+					py = y + height + __props.margin;
+					break;
+				case "bottom-left":
+					px = x;
+					py = y + height + __props.margin;
+					break;
+				case "bottom-right":
+					px = x - popupWidth + width;
+					py = y + height + __props.margin;
+					break;
+				default:
+					if (__props.direction === "horizontal") {
+						px = x + width + __props.margin;
+						py = y + height / 2 - popupHeight / 2;
+						if (px + popupWidth > innerWidth) px = x - popupWidth - __props.margin;
+					} else {
+						px = x + width / 2 - popupWidth / 2;
+						py = y + height + __props.margin;
+						if (py + popupHeight + __props.margin > innerHeight) py = y - popupHeight - __props.margin;
+					}
+					if (py < 0 || py + popupHeight > innerHeight) py = innerHeight / 2 - popupHeight / 2;
+					break;
+			}
+			state.x = px;
+			state.y = py;
+		}
+		function resize() {
+			const anchor = unref(anchorRef);
+			if (!anchor) return;
+			const { width } = anchor.getBoundingClientRect();
+			state.width = __props.useAnchorWidth ? width : null;
+		}
+		function onResize() {
+			resize();
+			reposition();
+		}
+		function onScroll() {
+			reposition();
+		}
+		watchEffect(() => {
+			if (!__props.anchor || !Q$1(__props.anchor) && !__props.anchor.$el) return;
+			anchorRef.value = Q$1(__props.anchor) ? __props.anchor : __props.anchor.$el;
+			requestAnimationFrame(() => {
+				requestAnimationFrame(resize);
+				requestAnimationFrame(reposition);
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "popup",
+				style: normalizeStyle({
+					"--x": `${state.x}px`,
+					"--y": `${state.y}px`,
+					"--width": state.width ? `${state.width}px` : void 0
+				})
+			}, [renderSlot(_ctx.$slots, "default")], 4);
+		};
+	}
+});
+var { "button": _0$11, "buttonIcon": _1$5, "buttonLabel": _2$2 } = Button_module_default$1;
 var Menu_module_default = {
 	menu: `menu`,
 	menuNormal: `menu-normal menu`,
@@ -5652,15 +5803,15 @@ var Menu_module_default = {
 	menuGroup: `menu-group`,
 	menuGroupHorizontal: `menu-group-horizontal menu-group`,
 	menuGroupVertical: `menu-group-vertical menu-group`,
-	menuItem: `menu-item ${_2$2}`,
+	menuItem: `menu-item ${_0$11}`,
 	badge: `badge`,
-	menuItemIcon: `menu-item-icon ${_0$11}`,
-	menuItemLabel: `menu-item-label ${_1$5}`,
+	menuItemIcon: `menu-item-icon ${_1$5}`,
+	menuItemLabel: `menu-item-label ${_2$2}`,
 	menuItemActive: `menu-item-active`,
 	menuItemDestructive: `menu-item-destructive`,
 	menuItemHighlighted: `menu-item-highlighted`,
 	menuItemIndented: `menu-item-indented`,
-	menuItemSelectableIcon: `menu-item-selectable-icon ${_0$11}`,
+	menuItemSelectableIcon: `menu-item-selectable-icon ${_1$5}`,
 	menuItemSelected: `menu-item-selected`,
 	menuItemCommand: `menu-item-command`,
 	menuItemCommandIcon: `menu-item-command-icon`,
@@ -6258,157 +6409,6 @@ var FluxTag_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var Anchor_default = /* @__PURE__ */ defineComponent({
-	__name: "Anchor",
-	props: { tagName: {} },
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.tagName), null, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			});
-		};
-	}
-});
-var AnchorPopup_default = /* @__PURE__ */ defineComponent({
-	__name: "AnchorPopup",
-	props: {
-		anchor: {},
-		direction: { default: "vertical" },
-		margin: { default: 12 },
-		position: {},
-		useAnchorWidth: { type: Boolean }
-	},
-	setup(__props) {
-		const anchorRef = ref();
-		const popupRef = useTemplateRef("popup");
-		const state = reactive({
-			x: 0,
-			y: 0,
-			width: null
-		});
-		onMounted(() => {
-			window.addEventListener("resize", onResize, { passive: true });
-			window.addEventListener("scroll", onScroll, {
-				capture: true,
-				passive: true
-			});
-		});
-		onUnmounted(() => {
-			window.removeEventListener("resize", onResize);
-			window.removeEventListener("scroll", onScroll);
-		});
-		H(popupRef, () => {
-			reposition();
-		}, {
-			childList: true,
-			subtree: true
-		});
-		function reposition() {
-			const anchor = unref(anchorRef);
-			const popup = unref(popupRef);
-			if (!anchor || !popup) return;
-			const { x, y, height, width } = anchor.getBoundingClientRect();
-			const { height: popupHeight, width: popupWidth } = popup.getBoundingClientRect();
-			let px, py;
-			switch (__props.position) {
-				case "top":
-					px = x + width / 2 - popupWidth / 2;
-					py = y - popupHeight - __props.margin;
-					break;
-				case "top-left":
-					px = x;
-					py = y - popupHeight - __props.margin;
-					break;
-				case "top-right":
-					px = x - popupWidth + width;
-					py = y - popupHeight - __props.margin;
-					break;
-				case "left":
-					px = x - popupWidth - __props.margin;
-					py = y + height / 2 - popupHeight / 2;
-					break;
-				case "left-top":
-					px = x - popupWidth - __props.margin;
-					py = y;
-					break;
-				case "left-bottom":
-					px = x - popupWidth - __props.margin;
-					py = y + height - popupHeight;
-					break;
-				case "right":
-					px = x + width + __props.margin;
-					py = y + height / 2 - popupHeight / 2;
-					break;
-				case "right-top":
-					px = x + width + __props.margin;
-					py = y;
-					break;
-				case "right-bottom":
-					px = x + width + __props.margin;
-					py = y + height - popupHeight;
-					break;
-				case "bottom":
-					px = x + width / 2 - popupWidth / 2;
-					py = y + height + __props.margin;
-					break;
-				case "bottom-left":
-					px = x;
-					py = y + height + __props.margin;
-					break;
-				case "bottom-right":
-					px = x - popupWidth + width;
-					py = y + height + __props.margin;
-					break;
-				default:
-					if (__props.direction === "horizontal") {
-						px = x + width + __props.margin;
-						py = y + height / 2 - popupHeight / 2;
-						if (px + popupWidth > innerWidth) px = x - popupWidth - __props.margin;
-					} else {
-						px = x + width / 2 - popupWidth / 2;
-						py = y + height + __props.margin;
-						if (py + popupHeight + __props.margin > innerHeight) py = y - popupHeight - __props.margin;
-					}
-					if (py < 0 || py + popupHeight > innerHeight) py = innerHeight / 2 - popupHeight / 2;
-					break;
-			}
-			state.x = px;
-			state.y = py;
-		}
-		function resize() {
-			const anchor = unref(anchorRef);
-			if (!anchor) return;
-			const { width } = anchor.getBoundingClientRect();
-			state.width = __props.useAnchorWidth ? width : null;
-		}
-		function onResize() {
-			resize();
-			reposition();
-		}
-		function onScroll() {
-			reposition();
-		}
-		watchEffect(() => {
-			if (!__props.anchor || !Q$1(__props.anchor) && !__props.anchor.$el) return;
-			anchorRef.value = Q$1(__props.anchor) ? __props.anchor : __props.anchor.$el;
-			requestAnimationFrame(() => {
-				requestAnimationFrame(resize);
-				requestAnimationFrame(reposition);
-			});
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref: "popup",
-				style: normalizeStyle({
-					"--x": `${state.x}px`,
-					"--y": `${state.y}px`,
-					"--width": state.width ? `${state.width}px` : void 0
-				})
-			}, [renderSlot(_ctx.$slots, "default")], 4);
-		};
-	}
-});
 var INITIAL_HIGHLIGHTED_INDEX = -1;
 var SelectBase_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -6942,11 +6942,11 @@ const VNodeRenderer = defineComponent({
 		return () => props.vnode;
 	}
 });
-var { "basePaneStructure": _0$9, "basePaneLoader": _1$4 } = Pane_module_default$1;
+var { "basePaneLoader": _0$9, "basePaneStructure": _1$4 } = Pane_module_default$1;
 var Calendar_module_default = {
-	calendar: `calendar ${_0$9}`,
+	calendar: `calendar ${_1$4}`,
 	calendarActions: `calendar-actions`,
-	calendarLoader: `calendar-loader ${_1$4}`,
+	calendarLoader: `calendar-loader ${_0$9}`,
 	calendarCurrent: `calendar-current`,
 	calendarCurrentValue: `calendar-current-value`,
 	calendarCurrentMonth: `calendar-current-month calendar-current-value`,
@@ -8236,7 +8236,7 @@ var FluxFormSelect_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "secondaryButton": _0$7, "secondaryButtonLabel": _1$3, "secondaryButtonIcon": _2$1 } = Button_module_default;
+var { "secondaryButton": _0$7, "secondaryButtonIcon": _1$3, "secondaryButtonLabel": _2$1 } = Button_module_default;
 var Pagination_module_default = {
 	pagination: `pagination`,
 	paginationButton: `pagination-button ${_0$7}`,
@@ -8244,8 +8244,8 @@ var Pagination_module_default = {
 	paginationButtonArrow: `pagination-button-arrow`,
 	paginationButtonCurrent: `pagination-button-current`,
 	paginationButtonSpacer: `pagination-button-spacer`,
-	paginationButtonIcon: `pagination-button-icon ${_2$1}`,
-	paginationButtonLabel: `pagination-button-label ${_1$3}`,
+	paginationButtonIcon: `pagination-button-icon ${_1$3}`,
+	paginationButtonLabel: `pagination-button-label ${_2$1}`,
 	paginationBar: `pagination-bar`,
 	paginationBarLimit: `pagination-bar-limit`,
 	paginationBarLimitDisplayingOf: `pagination-bar-limit-displaying-of`,
@@ -8492,13 +8492,13 @@ var FluxPaginationBar_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "basePaneLoader": _0$6, "basePaneElement": _1$2 } = Pane_module_default$1;
+var { "basePaneElement": _0$6, "basePaneLoader": _1$2 } = Pane_module_default$1;
 var Table_module_default = {
-	table: `table ${_1$2}`,
+	table: `table ${_0$6}`,
 	tableBase: `table-base`,
 	tableFill: `table-fill`,
 	tablePagination: `table-pagination`,
-	tableLoader: `table-loader ${_0$6}`,
+	tableLoader: `table-loader ${_1$2}`,
 	tableRow: `table-row`,
 	tableCell: `table-cell`,
 	tableCellContent: `table-cell-content`,
@@ -12271,10 +12271,10 @@ var FluxItemStack_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "stackHorizontal": _0$4, "stackVertical": _1$1 } = Layout_module_default;
+var { "stackVertical": _0$4, "stackHorizontal": _1$1 } = Layout_module_default;
 var Legend_module_default = {
-	legendHorizontal: `legend-horizontal ${_0$4}`,
-	legendVertical: `legend-vertical ${_1$1}`,
+	legendHorizontal: `legend-horizontal ${_1$1}`,
+	legendVertical: `legend-vertical ${_0$4}`,
 	legendItem: `legend-item`
 };
 var FluxLegend_default = /* @__PURE__ */ defineComponent({
@@ -13783,7 +13783,7 @@ var FluxStatistic_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "sparklesContainerActive": _0$1, "sparklesContainer": _1, "sparklesParticles": _2 } = {
+var { "sparklesContainer": _0$1, "sparklesContainerActive": _1, "sparklesParticles": _2 } = {
 	sparklesContainer: `sparkles-container`,
 	sparklesParticles: `sparkles-particles`,
 	sparklesContainerActive: `sparkles-container-active`,
@@ -13794,11 +13794,11 @@ var { "sparklesContainerActive": _0$1, "sparklesContainer": _1, "sparklesParticl
 var Stepper_module_default = {
 	stepperStep: `stepper-step`,
 	stepperSteps: `stepper-steps`,
-	stepperStepsItem: `stepper-steps-item ${_1}`,
+	stepperStepsItem: `stepper-steps-item ${_0$1}`,
 	icon: `icon`,
-	stepperStepsItemComplete: `stepper-steps-item-complete ${_0$1} stepper-steps-item ${_1}`,
-	stepperStepsItemCurrent: `stepper-steps-item-current stepper-steps-item ${_1}`,
-	stepperStepsItemIdle: `stepper-steps-item-idle stepper-steps-item ${_1}`,
+	stepperStepsItemComplete: `stepper-steps-item-complete ${_1} stepper-steps-item ${_0$1}`,
+	stepperStepsItemCurrent: `stepper-steps-item-current stepper-steps-item ${_0$1}`,
+	stepperStepsItemIdle: `stepper-steps-item-idle stepper-steps-item ${_0$1}`,
 	stepperStepsItemParticles: `stepper-steps-item-particles ${_2}`
 };
 var _hoisted_1$4 = ["onClick"];