import IconSelector_default from "../../IconSelector.vue.js";
import SidebarListElementForm_default from "./SidebarListElementForm.vue.js";
import { createBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, unref, withCtx } from "vue";
import { ScalarButton, ScalarTextInput } from "@scalar/components";
import { LibraryIcon } from "@scalar/icons/library";
//#region src/components/Sidebar/Actions/EditSidebarListCollection.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "grid grid-cols-[auto_1fr] gap-2" };
var _hoisted_2 = { class: "flex aspect-square" };
var EditSidebarListCollection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "EditSidebarListCollection",
	props: {
		name: {},
		icon: {}
	},
	emits: ["close", "edit"],
	setup(__props, { emit: __emit }) {
		const props = __props;
		const emit = __emit;
		const newName = ref(props.name);
		const newIcon = ref(props.icon);
		return (_ctx, _cache) => {
			return openBlock(), createBlock(SidebarListElementForm_default, {
				onCancel: _cache[2] || (_cache[2] = ($event) => emit("close")),
				onSubmit: _cache[3] || (_cache[3] = ($event) => emit("edit", newName.value, newIcon.value))
			}, {
				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(IconSelector_default, {
					modelValue: newIcon.value,
					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => newIcon.value = $event),
					placement: "bottom-start"
				}, {
					default: withCtx(() => [createVNode(unref(ScalarButton), {
						class: "aspect-square h-auto px-0",
						variant: "outlined"
					}, {
						default: withCtx(() => [createVNode(unref(LibraryIcon), {
							class: "text-c-2 size-4",
							src: newIcon.value
						}, null, 8, ["src"])]),
						_: 1
					})]),
					_: 1
				}, 8, ["modelValue"])]), createVNode(unref(ScalarTextInput), {
					modelValue: newName.value,
					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => newName.value = $event),
					autofocus: "",
					class: "flex-1"
				}, null, 8, ["modelValue"])])]),
				_: 1
			});
		};
	}
});
//#endregion
export { EditSidebarListCollection_vue_vue_type_script_setup_true_lang_default as default };

//# sourceMappingURL=EditSidebarListCollection.vue.script.js.map