@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/index.vue

@@ -17,15 +17,11 @@
         </p>
         <div class="bk">
           <div class="bk-form-group">
-            <div>
-              <label class="bk-form-label" for="library_search">
-                {{ $t("libraryPlaceSearchLabel", "Filter library items") }}
-              </label>
-              <input
+            <FormItem>
+              <FormText
                 id="library_search"
                 v-model.lazy="searchText"
-                type="text"
-                class="bk-form-input"
+                :label="$t('libraryPlaceSearchLabel', 'Filter library items')"
                 :placeholder="
   $t(
     'libraryPlaceSearchInputPlaceholder',
@@ -34,25 +30,15 @@
 "
                 required
               />
-            </div>
-            <div>
-              <label class="bk-form-label" for="library_bundle">
-                {{ $t("libraryPlaceBundleSelectLabel", "Bundle") }}
-              </label>
-              <select
+            </FormItem>
+            <FormItem>
+              <FormSelect
                 id="library_bundle"
                 v-model="selectedBundle"
-                class="bk-form-input"
-              >
-                <option
-                  v-for="v in bundleOptions"
-                  :key="v.bundle"
-                  :value="v.bundle"
-                >
-                  {{ v.label }}
-                </option>
-              </select>
-            </div>
+                :label="$t('libraryPlaceBundleSelectLabel', 'Bundle')"
+                :options="bundleOptions"
+              />
+            </FormItem>
           </div>
         </div>
         <div class="bk-library-dialog-content">
@@ -85,7 +71,13 @@
 </template>
 
 <script setup>
-import { FormOverlay, Pagination } from "#blokkli/components";
+import {
+  FormOverlay,
+  Pagination,
+  FormText,
+  FormItem,
+  FormSelect
+} from "#blokkli/components";
 import Loading from "./../../../Loading/index.vue";
 import { ref, useBlokkli, useAsyncData, computed, watch } from "#imports";
 import LibraryListItem from "./Item/index.vue";
@@ -147,10 +139,10 @@ const bundleOptions = computed(() => {
   const bundles = allowedBundles.value.map((bundle) => {
     const definition = types.getBlockBundleDefinition(bundle);
     return {
-      bundle,
+      value: bundle,
       label: definition?.label || bundle
     };
   });
-  return [{ bundle: "all", label: $t("all", "All") }, ...bundles];
+  return [{ value: "all", label: $t("all", "All") }, ...bundles];
 });
 </script>

package/dist/runtime/components/Edit/Features/Library/ReusableDialog/index.vue

@@ -23,39 +23,43 @@
   )
 "
       />
-      <label for="reusable_label" class="bk-form-label">{{
-        $t("libraryDialogDescriptionLabel", "Description")
-      }}</label>
-      <input
-        id="reusable_label"
-        v-model="label"
-        type="text"
-        class="bk-form-input"
-        :placeholder="
-  $t('libraryDialogTitleInputPlaceholder', 'e.g. Teaser Campaign 2024')
+      <FormItem>
+        <FormText
+          id="reusable_label"
+          v-model="label"
+          :label="$t('libraryDialogDescriptionLabel', 'Description')"
+          type="text"
+          :placeholder="
+  $t(
+    'libraryDialogTitleInputPlaceholder',
+    'e.g. Teaser Campaign 2024'
+  )
 "
-        required
-      />
-    </div>
-    <div class="bk-form-label">
-      {{ $t("libraryPreviewLabel", "Preview") }}
-    </div>
-    <div
-      class="bk-dialog-content-element"
-      :class="[backgroundClass, { 'bk-default-bg': !backgroundClass }]"
-      :style="backgroundClass ? {} : { backgroundColor }"
-    >
-      <div ref="previewEl" />
+          required
+        />
+      </FormItem>
+      <FormItem>
+        <div class="bk-form-label">
+          {{ $t("libraryPreviewLabel", "Preview") }}
+        </div>
+        <div
+          class="bk-dialog-content-element"
+          :class="[backgroundClass, { 'bk-default-bg': !backgroundClass }]"
+          :style="backgroundClass ? {} : { backgroundColor }"
+        >
+          <div ref="previewEl" />
+        </div>
+      </FormItem>
     </div>
   </DialogModal>
 </template>
 
 <script setup>
 import { ref, useBlokkli, onMounted } from "#imports";
-import { DialogModal, InfoBox } from "#blokkli/components";
+import { DialogModal, InfoBox, FormText, FormItem } from "#blokkli/components";
 import { realBackgroundColor } from "#blokkli/helpers";
 defineEmits(["confirm", "cancel"]);
-const { dom, $t } = useBlokkli();
+const { dom, $t, blocks } = useBlokkli();
 const props = defineProps({
   uuid: { type: String, required: true },
   backgroundClass: { type: String, required: false }
@@ -66,14 +70,14 @@ const previewEl = ref(null);
 const backgroundColor = ref("");
 onMounted(() => {
   if (previewEl.value) {
-    const item = dom.findBlock(props.uuid);
+    const item = blocks.getBlock(props.uuid);
     if (!item) {
       return;
     }
-    if (item.editTitle) {
-      label.value = item.editTitle.substring(0, 40);
+    const element = dom.getDragElement(item);
+    if (!element) {
+      return;
     }
-    const element = item.element();
     const markup = dom.getDropElementMarkup(item);
     width.value = element.getBoundingClientRect().width + 40;
     const clone = document.createElement("div");

package/dist/runtime/components/Edit/Features/Library/index.vue

@@ -4,6 +4,7 @@
     id="library_detach"
     :title="$t('libraryDetach', 'Detach from library')"
     icon="detach"
+    edit-only
     multiple
     :weight="-70"
     @click="onDetach"
@@ -11,8 +12,9 @@
   <PluginItemAction
     v-else-if="!isReusable"
     id="library_make_reusable"
-    :title="$t('libraryAdd', 'Add to library')"
-    :disabled="!canMakeReusable || state.editMode.value !== 'editing'"
+    :title="$t('libraryAdd', 'Add to library...')"
+    :disabled="!canMakeReusable"
+    edit-only
     icon="reusable"
     :weight="-70"
     @click="showReusableDialog = true"
@@ -32,32 +34,32 @@
 "
     icon="reusable"
     color="lime"
-    item-bundle="from_library"
+    :item-bundle="BUNDLE_FROM_LIBRARY"
     :disabled="!fromLibraryAllowedInList"
     @placed="placedAction = $event"
   />
 
   <Teleport to="body">
-    <transition appear name="bk-slide-up" :duration="300">
+    <BlokkliTransition name="slide-up">
       <ReusableDialog
-        v-if="showReusableDialog && selectedItem"
-        :uuid="selectedItem.uuid"
+        v-if="showReusableDialog && selection.item.value"
+        :uuid="selection.item.value.uuid"
         :background-class="definition?.editor?.previewBackgroundClass"
         @confirm="onMakeReusable"
         @cancel="showReusableDialog = false"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 
   <Teleport to="body">
-    <transition appear name="bk-slide-in" :duration="200">
+    <BlokkliTransition name="slide-in">
       <LibraryDialog
         v-if="placedAction && adapter.getLibraryItems"
         :field="placedAction.field"
         @close="placedAction = null"
         @submit="onAddLibraryItem"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
   <EditReusable
     v-if="editingLibraryItem"
@@ -73,22 +75,19 @@ import { PluginItemAction, PluginAddAction } from "#blokkli/plugins";
 import ReusableDialog from "./ReusableDialog/index.vue";
 import LibraryDialog from "./LibraryDialog/index.vue";
 import EditReusable from "./EditReusable/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const { adapter } = defineBlokkliFeature({
   id: "library",
   icon: "reusable",
   label: "Library",
   description: "Implements support for a block library to manage reusable blocks.",
-  requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"]
+  requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"],
+  dependencies: ["add-list"]
 });
 const { selection, state, types, $t, eventBus, definitions } = useBlokkli();
 const showReusableDialog = ref(false);
-const selectedItem = computed(() => {
-  if (selection.blocks.value.length !== 1) {
-    return;
-  }
-  return selection.blocks.value[0];
-});
 const onDetach = async () => {
   if (!adapter.detachReusableBlock || !selection.uuids.value.length) {
     return;
@@ -114,43 +113,52 @@ const onAddLibraryItem = async (uuid) => {
   );
   placedAction.value = null;
 };
-const definition = computed(
-  () => selectedItem?.value ? definitions.getBlockDefinition(
-    selectedItem.value.itemBundle,
-    selectedItem.value.hostFieldListType,
-    selectedItem.value.parentBlockBundle
-  ) : null
-);
-const itemBundle = computed(
-  () => selectedItem?.value ? types.getBlockBundleDefinition(selectedItem.value.itemBundle) : null
-);
+const definition = computed(() => {
+  const item = selection.item.value;
+  if (!item) {
+    return null;
+  }
+  return definitions.getBlockDefinition(
+    item.bundle,
+    item.fieldListType,
+    item.parentBlockBundle
+  );
+});
+const itemBundle = computed(() => {
+  const item = selection.item.value;
+  if (!item) {
+    return null;
+  }
+  return types.getBlockBundleDefinition(item.bundle);
+});
 const isReusable = computed(
-  () => selection.blocks.value.length && selection.blocks.value.every((v) => v.itemBundle === "from_library")
+  () => selection.bundles.value.every((bundle) => bundle === BUNDLE_FROM_LIBRARY)
 );
 async function onMakeReusable(label) {
   showReusableDialog.value = false;
-  if (!selectedItem?.value?.uuid) {
+  const item = selection.item.value;
+  if (!item) {
     return;
   }
   await state.mutateWithLoadingState(
     () => adapter.makeBlockReusable({
       label,
-      uuid: selectedItem.value.uuid
+      uuid: item.uuid
     }),
     $t("libraryError", "Failed to add block to library.")
   );
   eventBus.emit("select:end");
 }
 const isSupportedOnEntity = computed(
-  () => types.generallyAvailableBundles.find((v) => v.id === "from_library")
+  () => types.generallyAvailableBundles.find((v) => v.id === BUNDLE_FROM_LIBRARY)
 );
 const fromLibraryAllowedInList = computed(() => {
   if (!selection.uuids.value.length) {
     return !!types.generallyAvailableBundles.find(
-      (v) => v.id === "from_library"
+      (v) => v.id === BUNDLE_FROM_LIBRARY
     );
   }
-  return types.allowedTypesInList.value.includes("from_library");
+  return types.allowedTypesInList.value.includes(BUNDLE_FROM_LIBRARY);
 });
 const canMakeReusable = computed(
   () => !isReusable.value && itemBundle?.value?.allowReusable && fromLibraryAllowedInList.value

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue

@@ -35,14 +35,11 @@
             </option>
           </select>
         </label>
-        <label
+        <FormToggle
           v-else-if="filter.filter.type === 'checkbox'"
-          class="bk-checkbox-toggle"
-        >
-          <input v-model="filterValues[filter.key]" type="checkbox" />
-          <div />
-          <span>{{ filter.filter.label }}</span>
-        </label>
+          v-model="filterValues[filter.key]"
+          :label="filter.filter.label"
+        />
       </div>
     </div>
     <div
@@ -83,7 +80,7 @@ import {
   watch,
   nextTick
 } from "#imports";
-import { Sortli, Icon, Pagination } from "#blokkli/components";
+import { Sortli, Icon, Pagination, FormToggle } from "#blokkli/components";
 import Item from "./Item.vue";
 import { buildDraggableItem, falsy } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
@@ -91,7 +88,7 @@ defineProps({
   isSortli: { type: Boolean, required: false },
   modelValue: { type: String, required: false }
 });
-const { adapter, storage, $t } = useBlokkli();
+const { adapter, storage, $t, element } = useBlokkli();
 const selected = ref([]);
 const listEl = ref(null);
 const page = ref(0);
@@ -100,10 +97,13 @@ function getDragItems(activeItem) {
   if (!selected.value.length || !listEl.value) {
     return null;
   }
+  const listElement = listEl.value;
   const activeId = activeItem?.itemType === "media_library" ? activeItem.mediaId : null;
   const items2 = selected.value.map((id) => {
-    const el = listEl.value?.querySelector(
-      `[data-sortli-id="media_library_${id}"]`
+    const el = element.query(
+      listElement,
+      `[data-sortli-id="media_library_${id}"]`,
+      "Find media library drag item."
     );
     if (!(el instanceof HTMLElement)) {
       return null;

package/dist/runtime/components/Edit/Features/MediaLibrary/index.vue

@@ -32,6 +32,7 @@ import { PluginSidebar, PluginDroppableEdit } from "#blokkli/plugins";
 import Library from "./Library/index.vue";
 import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
 import { falsy } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "media-library",
   icon: "image",
@@ -39,7 +40,7 @@ defineBlokkliFeature({
   description: "Implements a media library to easily drag and drop media like images or videos.",
   requiredAdapterMethods: ["mediaLibraryGetResults", "mediaLibraryAddBlock"]
 });
-const { $t, dom, adapter, state, runtimeConfig, types } = useBlokkli();
+const { $t, adapter, state, runtimeConfig, types, directive } = useBlokkli();
 const selected = ref("");
 const ERROR_MESSAGE = $t(
   "mediaLibraryReplaceFailed",
@@ -49,11 +50,12 @@ const onDroppableEditSave = async (e) => {
   if (!selected.value) {
     return;
   }
-  if ("itemBundle" in e.host && adapter.mediaLibraryReplaceMedia) {
+  if ("itemType" in e.host && adapter.mediaLibraryReplaceMedia) {
+    const host = e.host;
     await state.mutateWithLoadingState(
       () => adapter.mediaLibraryReplaceMedia({
         host: {
-          uuid: e.host.uuid,
+          uuid: host.block.uuid,
           type: runtimeConfig.itemEntityType,
           fieldName: e.fieldName
         },
@@ -62,11 +64,12 @@ const onDroppableEditSave = async (e) => {
       ERROR_MESSAGE
     );
   } else if ("type" in e.host && adapter.mediaLibraryReplaceEntityMedia) {
-    const type = e.host.type;
+    const host = e.host;
+    const type = host.type;
     await state.mutateWithLoadingState(
       () => adapter.mediaLibraryReplaceEntityMedia({
         host: {
-          uuid: e.host.uuid,
+          uuid: host.uuid,
           type,
           fieldName: e.fieldName
         },
@@ -87,18 +90,18 @@ defineDropAreas((dragItems) => {
   if (item.itemType !== "media_library") {
     return;
   }
-  return dom.getAllDroppableFields().map((field) => {
-    const config = types.getDroppableFieldConfig(field.fieldName, field.host);
+  return directive.getDroppableElements().map((field) => {
+    const config = types.getDroppableFieldConfig(field.fieldName, field);
     if (config.allowedEntityType !== "media") {
       return;
     }
     if (!config.allowedBundles.includes(item.mediaBundle)) {
       return;
     }
-    const isBlock = "itemBundle" in field.host;
+    const isBlock = field.type === itemEntityType;
     const draggableHost = {
-      uuid: field.host.uuid,
-      type: "itemBundle" in field.host ? runtimeConfig.itemEntityType : field.host.type,
+      uuid: field.uuid,
+      type: field.type,
       fieldName: field.fieldName
     };
     const label = $t("mediaLibraryReplaceMedia", "Replace @field").replace(
@@ -107,7 +110,7 @@ defineDropAreas((dragItems) => {
     );
     if (adapter.mediaLibraryReplaceMedia && isBlock) {
       return {
-        id: `replace-media:${field.host.uuid}:${field.fieldName}`,
+        id: `replace-media:${field.uuid}:${field.fieldName}`,
         label,
         element: field.element,
         icon: "swap-horizontal",
@@ -123,7 +126,7 @@ defineDropAreas((dragItems) => {
       };
     } else if (adapter.mediaLibraryReplaceEntityMedia && !isBlock) {
       return {
-        id: `replace-entity-media:${field.host.uuid}:${field.fieldName}`,
+        id: `replace-entity-media:${field.uuid}:${field.fieldName}`,
         label,
         element: field.element,
         icon: "swap-horizontal",

package/dist/runtime/components/Edit/Features/MultiSelect/Overlay/fragment.glsl

@@ -1,6 +1,6 @@
 #version 300 es
 
-precision mediump float;
+precision highp float;
 
 in float v_intersecting;
 in float v_is_select_rect;

package/dist/runtime/components/Edit/Features/MultiSelect/Overlay/index.vue

@@ -7,7 +7,7 @@
 <script setup>
 import { useBlokkli, onBeforeUnmount } from "#imports";
 import { intersects, toShaderColor } from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import {
@@ -17,7 +17,7 @@ import {
 } from "twgl.js";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
 import useDebugLogger from "#blokkli/helpers/composables/useDebugLogger";
-const { eventBus, dom, theme, animation, ui } = useBlokkli();
+const { eventBus, dom, theme, animation, ui, blocks } = useBlokkli();
 const logger = useDebugLogger();
 const props = defineProps({
   startX: { type: Number, required: true },
@@ -25,6 +25,7 @@ const props = defineProps({
   isPressingControl: { type: Boolean, required: true },
   gl: { type: null, required: true }
 });
+const startTimestamp = Date.now();
 defineEmits(["select"]);
 class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
   getBufferInfo(offset, scale) {
@@ -38,7 +39,7 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
       if (this.added.has(uuid)) {
         continue;
       }
-      const block = dom.findBlock(uuid);
+      const block = blocks.getBlock(uuid);
       if (!block) {
         continue;
       }
@@ -95,7 +96,7 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
   }
 }
 const collector = new MultiSelectRectangleBufferCollector(props.gl);
-const thick = 100;
+const thick = 300;
 collector.addRectangle(
   {
     width: 1e3,
@@ -180,33 +181,40 @@ function getSelectRect(offset, scale) {
   };
   return { shader, check };
 }
-const now = Date.now();
-onBlokkliEvent("canvas:draw", (e) => {
-  mouseX = e.mouseX;
-  mouseY = e.mouseY;
-  const { shader, check } = getSelectRect(e.artboardOffset, e.artboardScale);
-  const { nested } = collector.getSelectedUuids(check);
-  const shouldSelectAll = props.isPressingControl || !nested.length;
-  props.gl.useProgram(programInfo.program);
-  const time = (Date.now() - now) / 1e3;
-  setUniforms(programInfo, uniforms);
-  setUniforms(programInfo, {
-    u_select_all: shouldSelectAll ? 1 : 0,
-    u_select_rect: [shader.x, shader.y, shader.width, shader.height],
-    u_time: time
-  });
-  animation.setSharedUniforms(props.gl, programInfo);
-  const { info, hasChanged } = collector.getBufferInfo(
-    e.artboardOffset,
-    e.artboardScale
-  );
-  if (!info) {
-    return;
-  }
-  if (hasChanged) {
-    setBuffersAndAttributes(props.gl, programInfo, info);
+defineRenderer("multiselect-overlay", {
+  zIndex: 450,
+  only: true,
+  cursor: () => "crosshair",
+  render: (ctx) => {
+    mouseX = ctx.mouseX;
+    mouseY = ctx.mouseY;
+    const { shader, check } = getSelectRect(
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
+    const { nested } = collector.getSelectedUuids(check);
+    const shouldSelectAll = props.isPressingControl || !nested.length;
+    ctx.gl.useProgram(programInfo.program);
+    const time = (Date.now() - startTimestamp) / 1e3;
+    setUniforms(programInfo, uniforms);
+    setUniforms(programInfo, {
+      u_select_all: shouldSelectAll ? 1 : 0,
+      u_select_rect: [shader.x, shader.y, shader.width, shader.height],
+      u_time: time
+    });
+    animation.setSharedUniforms(ctx.gl, programInfo);
+    const { info, hasChanged } = collector.getBufferInfo(
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
+    if (!info) {
+      return;
+    }
+    if (hasChanged) {
+      setBuffersAndAttributes(ctx.gl, programInfo, info);
+    }
+    drawBufferInfo(ctx.gl, info, ctx.gl.TRIANGLES);
   }
-  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
 });
 function getUuidsToSelect() {
   const { check } = getSelectRect(
@@ -222,8 +230,12 @@ function getUuidsToSelect() {
   return nested;
 }
 onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
-  eventBus.emit("select:end", getUuidsToSelect());
+  const diff = Date.now() - startTimestamp;
+  if (diff > 175) {
+    eventBus.emit("select:end", getUuidsToSelect());
+  } else {
+    eventBus.emit("select:end");
+  }
   logger.log("MultiSelectOverlay unmounted");
 });
 </script>

package/dist/runtime/components/Edit/Features/MultiSelect/Overlay/vertex.glsl

@@ -1,6 +1,6 @@
 #version 300 es
 
-precision mediump float;
+precision highp float;
 
 in vec3 a_position;
 in vec4 a_quad;

package/dist/runtime/components/Edit/Features/MultiSelect/index.vue

@@ -20,11 +20,9 @@ defineBlokkliFeature({
   description: "Implements support for selecting multiple blocks using a select rectangle.",
   viewports: ["desktop"]
 });
-const { keyboard, eventBus, selection, state, animation } = useBlokkli();
+const { keyboard, eventBus, selection, animation } = useBlokkli();
 const gl = animation.gl();
-const enabled = computed(
-  () => !selection.editableActive.value && (state.editMode.value === "editing" || state.editMode.value === "translating") && gl
-);
+const enabled = computed(() => !selection.editableActive.value && gl);
 const shouldRender = ref(false);
 const downX = ref(0);
 const downY = ref(0);
@@ -32,24 +30,18 @@ const onSelect = (uuids) => {
   shouldRender.value = false;
   eventBus.emit("select:end", uuids);
 };
-let startTimeout = null;
-onBlokkliEvent("mouse:down", (e) => {
-  if (!enabled.value || e.type !== "mouse" || selection.isDragging.value) {
+const startTimeout = null;
+onBlokkliEvent("multi-select:start", (e) => {
+  if (!enabled.value) {
     return;
   }
-  if (keyboard.isPressingSpace.value || keyboard.isPressingControl.value) {
-    return;
-  }
-  clearTimeout(startTimeout);
   downX.value = e.x;
   downY.value = e.y;
-  startTimeout = setTimeout(() => {
-    eventBus.emit("select:start", {
-      uuids: [],
-      mode: "mouse"
-    });
-    shouldRender.value = true;
-  }, 70);
+  eventBus.emit("select:start", {
+    uuids: [],
+    mode: "mouse"
+  });
+  shouldRender.value = true;
 });
 onBlokkliEvent("mouse:up", () => {
   shouldRender.value = false;

package/dist/runtime/components/Edit/Features/Options/Form/Checkbox/index.vue

@@ -1,6 +1,6 @@
 <template>
   <label class="bk-blokkli-item-options-checkbox">
-    <input v-model="checked" type="checkbox" class="peer" />
+    <input v-model="checked" type="checkbox" class="peer" :required />
     <div />
     <span>{{ label }}</span>
   </label>
@@ -13,7 +13,8 @@ const { $t, state } = useBlokkli();
 const props = defineProps({
   label: { type: String, required: true },
   property: { type: String, required: true },
-  modelValue: { type: String, required: false }
+  modelValue: { type: String, required: false },
+  required: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const checked = computed({