@threadlabs/looma 0.23.21 → 0.23.23

package/vue/chunks/UiSeparator.js

@@ -2,34 +2,107 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { i as vPropValidity, t as checkedProp } from "./props.js";
 import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiSeparator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-orientation", "data-orientation"];
+var _hoisted_1 = [
+	"aria-orientation",
+	"data-emphasis",
+	"data-orientation",
+	"data-selectable",
+	"data-selected",
+	"data-ui-separator-state"
+];
 //#endregion
 //#region .build/vue/UiSeparator.vue
 var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiSeparator",
-	props: { orientation: {
-		type: null,
-		default: "horizontal"
-	} },
+	props: {
+		emphasis: {
+			type: null,
+			default: "normal"
+		},
+		orientation: {
+			type: null,
+			default: "horizontal"
+		},
+		selectable: {
+			type: null,
+			default: false
+		},
+		selected: {
+			type: null,
+			default: false
+		}
+	},
 	setup(__props) {
-		const propValidityContract = { props: { orientation: {
-			type: {
-				kind: "terminal",
-				name: "keyword"
+		const propValidityContract = { props: {
+			emphasis: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "emphasis" },
+				description: "Normal uses the decorative divider color; strong uses the stronger enclosing-edge color for clearer separation.",
+				values: ["normal", "strong"],
+				default: "normal"
 			},
-			required: false,
-			target: { attribute: "aria-orientation" },
-			description: "Whether the separator divides stacked content (horizontal) or inline content (vertical).",
-			values: ["horizontal", "vertical"],
-			default: "horizontal"
-		} } };
+			orientation: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "aria-orientation" },
+				description: "Whether the separator divides stacked content (horizontal) or inline content (vertical).",
+				values: ["horizontal", "vertical"],
+				default: "horizontal"
+			},
+			selectable: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "selectable" },
+				description: "Gives a document divider a pointer-sized hit area. The editor owns selection and deletion.",
+				default: false
+			},
+			selected: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "selected" },
+				description: "Shows the selected document divider. Selection does not change separator semantics.",
+				default: false
+			}
+		} };
 		const props = __props;
-		const acceptedProps = { orientation: "horizontal" };
-		const checkedProps = computed(() => ({ orientation: checkedProp(props["orientation"], {
-			kind: "terminal",
-			name: "keyword"
-		}, false, "orientation", acceptedProps) }));
+		const acceptedProps = {
+			emphasis: "normal",
+			orientation: "horizontal",
+			selectable: false,
+			selected: false
+		};
+		const checkedProps = computed(() => ({
+			emphasis: checkedProp(props["emphasis"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "emphasis", acceptedProps),
+			orientation: checkedProp(props["orientation"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "orientation", acceptedProps),
+			selectable: checkedProp(props["selectable"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "selectable", acceptedProps),
+			selected: checkedProp(props["selected"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "selected", acceptedProps)
+		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -54,16 +127,27 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 				message: "Server markup for <ui-separator> has an incompatible root."
 			})
 		});
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [
+			checkedProps.value.emphasis && "emphasis",
+			checkedProps.value.emphasis != null && `emphasis=${encodeURIComponent(checkedProps.value.emphasis)}`,
+			checkedProps.value.selectable && "selectable",
+			checkedProps.value.selected && "selected"
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, nativeAttrs(_ctx.$attrs), {
 				"aria-orientation": checkedProps.value.orientation ?? void 0,
-				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false)
+				"data-emphasis": reflectedProp("emphasis", "emphasis", checkedProps.value.emphasis, void 0, false),
+				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false),
+				"data-selectable": reflectedProp("selectable", "selectable", checkedProps.value.selectable, void 0, false),
+				"data-selected": reflectedProp("selected", "selected", checkedProps.value.selected, void 0, false),
+				"data-ui-separator-state": hostState.value || void 0
 			}), null, 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-5289daff"]]);
+}), [["__scopeId", "data-v-a49de10a"]]);
 //#endregion
 export { UiSeparator_default as t };