@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/features/import-existing/Dialog/index.vue

@@ -9,37 +9,44 @@
     'Import content from an existing page. The items will be added to the end of the list. This action can be undone.'
   )
 "
-    :width="800"
     :submit-label="$t('importExistingDialogSubmit', 'Import content')"
-    :can-submit="!!(sourceEntityUuid && selectedFields.length)"
+    :can-submit
     :is-loading="isLoading || workspaces.isLoading.value || isSearching"
+    mono
     @submit="onSubmit"
     @cancel="$emit('cancel')"
   >
-    <div class="bk">
-      <FormCheckboxes
-        v-if="fieldOptions.length > 1"
-        id="import-existing-fields"
-        v-model="selectedFields"
-        :label="
+    <PanelSection
+      v-if="fieldOptions.length > 1"
+      padded
+      :title="
   $t(
     'importExistingFieldsLabel',
     'Which content would you like to import?'
   )
 "
+    >
+      <FormCheckboxes
+        id="import-existing-fields"
+        v-model="selectedFields"
         :options="fieldOptions"
         inline
       />
-      <div class="_bk_mt-15 _bk_pt-15 _bk_border-t _bk_border-t-mono-300">
+    </PanelSection>
+    <PanelSection padded :title="$t('selectPage', 'Select page')">
+      <FormItem>
         <FormText
           id="import-existing-search"
           v-model="searchText"
-          :label="$t('importExistingPagesTitle', 'Select page')"
           :placeholder="
-  $t('importExistingSearchPlaceholder', 'Search pages...')
+  $t('importExistingSearchPlaceholder', 'Search pages', {
+    more: true
+  })
 "
         />
-        <GrowOnly class="_bk_mt-20 _bk_min-w-0">
+      </FormItem>
+      <FormItem>
+        <GrowOnly>
           <div
             v-if="!pagedItems.length && !workspaces.isLoading.value"
             class="_bk_py-20 _bk_text-center _bk_text-mono-500 _bk_text-sm"
@@ -57,11 +64,10 @@
             />
           </div>
         </GrowOnly>
-      </div>
-    </div>
-    <template v-if="totalPages > 1" #pre-footer>
-      <Pagination v-model="page" :total-pages />
-    </template>
+      </FormItem>
+
+      <Pagination v-if="totalPages > 1" v-model="page" :total-pages />
+    </PanelSection>
   </DialogModal>
 </template>
 
@@ -79,9 +85,11 @@ import {
   Pagination,
   FormCheckboxes,
   FormText,
-  GrowOnly
+  GrowOnly,
+  FormItem
 } from "#blokkli/editor/components";
 import Item from "./Item.vue";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
 const { $t, context, state, workspaces } = useBlokkli();
 const props = defineProps({
   fields: { type: Array, required: true }
@@ -96,7 +104,7 @@ const fieldOptions = computed(
   })
 );
 const sourceEntityUuid = ref("");
-const selectedFields = ref(fieldOptions.value.map((v) => v.value));
+const selectedFields = ref([]);
 const isLoading = ref(false);
 const page = ref(0);
 const searchText = ref("");
@@ -104,6 +112,9 @@ const fzfResults = ref([]);
 const isSearching = ref(false);
 const ownerId = computed(() => state.owner.value?.id);
 const currentBundle = computed(() => context.value.entityBundle);
+const canSubmit = computed(() => {
+  return !!(sourceEntityUuid.value && selectedFields.value.length);
+});
 const sortedItems = computed(
   () => searchText.value.trim() ? fzfResults.value : workspaces.defaultSorted.value
 );
@@ -157,7 +168,10 @@ function onSubmit() {
   });
   isLoading.value = true;
 }
-onMounted(() => workspaces.ensureLoaded());
+onMounted(async () => {
+  await workspaces.ensureLoaded();
+  selectedFields.value = fieldOptions.value.map((v) => v.value);
+});
 onBeforeUnmount(() => {
   if (searchTimeout) {
     clearTimeout(searchTimeout);
@@ -165,13 +179,12 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-import-existing-dialog .bk.bk-dialog-footer {
-    margin-top: 0px
+  margin-top: 0px;
 }
-  .bk.bk-import-existing-dialog .bk-dialog-pre-footer {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-    padding: 0px
+.bk.bk-import-existing-dialog .bk-dialog-pre-footer {
+  background-color: white;
+  padding: 0px;
 }
 </style>

package/dist/runtime/editor/features/import-existing/index.vue

@@ -71,7 +71,7 @@ defineMenuButton(() => {
   }
   return {
     id: "import_existing",
-    title: $t("importExistingTitle", "Import..."),
+    title: $t("import", "Import", { more: true }),
     description: $t(
       "importExistingDescription",
       "Import from an existing page"

package/dist/runtime/editor/features/library/{LibraryDialog → DialogBrowseLibrary}/index.vue

@@ -22,7 +22,7 @@
               <FormSelect
                 id="library_bundle"
                 v-model="selectedBundle"
-                :label="$t('libraryPlaceBundleSelectLabel', 'Bundle')"
+                :label="$t('bundle', 'Bundle')"
                 :options="bundleOptions"
               />
             </FormItem>
@@ -50,7 +50,7 @@
     </div>
 
     <template #footer>
-      <button class="bk-button bk-is-primary" @click="onSubmit">
+      <button class="bk-button bk-scheme-accent" @click="onSubmit">
         {{ $t("libraryPlaceDialogSubmit", "Add reusable block") }}
       </button>
     </template>

package/dist/runtime/editor/features/library/{ReusableDialog → DialogMakeReusable}/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DialogModal
     id="library-reusable"
-    :title="$t('libraryDialogTitle', 'Add to library')"
+    :title="$t('addToLibrary', 'Add to library')"
     :lead="
   $t(
     'libraryDialogLead',
@@ -10,42 +10,44 @@
 "
     :width="1200"
     icon="reusable"
-    :submit-label="$t('libraryDialogSubmit', 'Add to library')"
+    :submit-label="$t('addToLibrary', 'Add to library')"
     :can-submit="!!label.length"
+    mono
     @submit="$emit('confirm', label)"
     @cancel="$emit('cancel')"
   >
-    <div class="bk-reusable-dialog-form">
-      <InfoBox
-        :text="
+    <div>
+      <PanelSection padded :title="$t('settings', 'Settings')">
+        <FormItem>
+          <InfoBox
+            :text="
   $t(
     'libraryDialogReusableInfo',
     'The library item will be available for placement on other pages once this page has been published.'
   )
 "
-      />
-      <FormItem>
-        <FormText
-          id="reusable_label"
-          v-model="label"
-          lazy
-          :label="$t('libraryDialogDescriptionLabel', 'Description')"
-          type="text"
-          :placeholder="
+          />
+        </FormItem>
+        <FormItem>
+          <FormText
+            id="reusable_label"
+            v-model="label"
+            lazy
+            :label="$t('description', 'Description')"
+            type="text"
+            :placeholder="
   $t(
     'libraryDialogTitleInputPlaceholder',
     'e.g. Teaser Campaign 2024'
   )
 "
-          required
-        />
-      </FormItem>
-      <FormItem>
-        <div class="bk-form-label">
-          {{ $t("libraryPreviewLabel", "Preview") }}
-        </div>
+            required
+          />
+        </FormItem>
+      </PanelSection>
+      <PanelSection :title="$t('preview', 'Preview')">
         <BlockPreviewRenderer :uuids="[uuid]" />
-      </FormItem>
+      </PanelSection>
     </div>
   </DialogModal>
 </template>
@@ -59,6 +61,7 @@ import {
   FormItem,
   BlockPreviewRenderer
 } from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
 defineEmits(["confirm", "cancel"]);
 const { $t, ui } = useBlokkli();
 defineProps({

package/dist/runtime/editor/features/library/index.vue

@@ -13,7 +13,7 @@
   <PluginItemAction
     v-else-if="!isReusable"
     id="library_make_reusable"
-    :title="$t('libraryAdd', 'Add to library...')"
+    :title="$t('addToLibrary', 'Add to library', { more: true })"
     :disabled="makeReusableDisabledReason"
     edit-only
     icon="reusable"
@@ -75,10 +75,10 @@ import {
 } from "#blokkli/editor/composables";
 import { fromLibraryBlockBundle } from "#blokkli-build/config";
 const ReusableDialog = defineAsyncComponent(
-  () => import("./ReusableDialog/index.vue")
+  () => import("./DialogMakeReusable/index.vue")
 );
 const LibraryDialog = defineAsyncComponent(
-  () => import("./LibraryDialog/index.vue")
+  () => import("./DialogBrowseLibrary/index.vue")
 );
 const { adapter } = defineBlokkliFeature({
   id: "library",
@@ -204,7 +204,7 @@ const makeReusableDisabledReason = computed(() => {
   const item = selection.item.value;
   if (item && !permissions.checkBlockBundlePermission(item.bundle, "edit")) {
     return $t(
-      "libraryAddNoEditPermission",
+      "noEditPermission",
       "You do not have permission to edit this block."
     );
   }

package/dist/runtime/editor/features/media-library/Library/index.vue

@@ -32,7 +32,7 @@
     </div>
 
     <div v-if="selected.length" class="bk-media-library-cancel">
-      <button class="bk-button bk-is-primary" @click.prevent="selected = []">
+      <button class="bk-button bk-scheme-accent" @click.prevent="selected = []">
         {{ $t("cancelSelection", "Cancel selection") }}
       </button>
     </div>