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

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

@@ -99,180 +99,160 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-structure {
-        height: 100%;
-        overflow: auto;
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  height: 100%;
+  overflow: auto;
+  background-color: white;
 }
-
-  .bk.bk-structure > .bk-structure-list > li {
-        border-bottom-width: 1px;
-        --bk-tw-border-opacity: 1;
-        border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-        padding-top: 10px;
-        padding-bottom: 10px;
+:is(.bk.bk-structure > .bk-structure-list)  > li {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding-block: 10px;
 }
-
-  .bk.bk-structure > .bk-structure-list > li > .bk-structure-item {
-        border-left-width: 0;
-        border-right-width: 0;
+:is(:is(.bk.bk-structure > .bk-structure-list) > li)  > .bk-structure-item {
+  border-right-style: var(--bk-tw-border-style);
+  border-right-width: 0;
+  border-left-style: var(--bk-tw-border-style);
+  border-left-width: 0;
 }
-
-  .bk.bk-structure > .bk-structure-list .bk-structure-list {
-        position: relative;
-        padding-left: 11px;
+:is(.bk.bk-structure > .bk-structure-list) .bk-structure-list {
+  position: relative;
+  padding-left: 11px;
 }
-
-  .bk.bk-structure > .bk-structure-list .bk-structure-list > li:not(:first-child) > .bk-structure-field > .bk-structure-field-label {
-        margin-top: 20px;
+:is(:is(.bk.bk-structure > .bk-structure-list) .bk-structure-list)  > li:not(:first-child) > .bk-structure-field > .bk-structure-field-label {
+  margin-top: 20px;
 }
-
-  .bk.bk-structure > .bk-structure-list .bk-structure-list:before {
-        content: '';
-        position: absolute;
-        top: -9px;
-        left: 11px;
-        bottom: 18px;
-        width: 0px;
-        border-left-width: 1px;
-        --bk-tw-border-opacity: 1;
-        border-left-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-      }
-
-  .bk.bk-structure > .bk-structure-list .bk-structure-list .bk-structure-item-label {
-        height: 40px;
-        cursor: grab;
+:is(:is(.bk.bk-structure > .bk-structure-list) .bk-structure-list):before {
+  content: '';
+  position: absolute;
+  top: -9px;
+  bottom: 18px;
+  left: 11px;
+  width: 0px;
+  border-left-style: var(--bk-tw-border-style);
+  border-left-width: 1px;
+  border-left-color: rgb(var(--bk-theme-mono-400) / 1);
 }
-
-  .bk.bk-structure > .bk-structure-list .bk-structure-list .bk-structure-item-label:before {
-          content: '';
-          position: absolute;
-          left: -20px;
-          top: 22px;
-          height: 1px;
-          width: 19px;
-          border-top-width: 1px;
-          --bk-tw-border-opacity: 1;
-          border-top-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-        }
-
-  .bk.bk-structure .bk-structure-item {
-        border-width: 1px;
-        border-color: transparent;
-        padding-left: 20px;
+:is(:is(.bk.bk-structure > .bk-structure-list) .bk-structure-list) .bk-structure-item-label {
+  height: 40px;
+  cursor: grab;
 }
-
-  .bk.bk-structure .bk-structure-item:hover {
-        --bk-tw-border-opacity: 1;
-        border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-        background-color: rgb(var(--bk-theme-mono-300) / 0.2);
+:is(:is(:is(.bk.bk-structure > .bk-structure-list) .bk-structure-list) .bk-structure-item-label):before {
+  content: '';
+  position: absolute;
+  top: 22px;
+  left: -20px;
+  height: 1px;
+  width: 19px;
+  border-top-style: var(--bk-tw-border-style);
+  border-top-width: 1px;
+  border-top-color: rgb(var(--bk-theme-mono-400) / 1);
 }
-
-  .bk.bk-structure .bk-structure-item .bk-blokkli-item-icon {
-        height: 25px;
-        width: 25px;
-        border-radius: 4px;
-        border-width: 1px;
-        --bk-tw-border-opacity: 1;
-        border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-        padding: 3px;
+.bk.bk-structure .bk-structure-item {
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: transparent;
+  padding-left: 20px;
 }
-
-  .bk.bk-structure .bk-structure-item .bk-blokkli-item-icon.bk-is-selected {
-        --bk-tw-border-opacity: 1;
-        border-color: rgb(var(--bk-theme-accent-900) / var(--bk-tw-border-opacity, 1));
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1));
-        --bk-tw-text-opacity: 1;
-        color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+@media (hover: hover) {
+  :is(.bk.bk-structure .bk-structure-item):hover {
+    border-color: rgb(var(--bk-theme-mono-300) / 1);
+  }
 }
-
-  .bk.bk-structure .bk-structure-item.bk-is-selected > .bk-structure-item-label {
-        font-weight: 600;
+@media (hover: hover) {
+  :is(.bk.bk-structure .bk-structure-item):hover {
+    background-color: rgb(var(--bk-theme-mono-300) / 1);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(.bk.bk-structure .bk-structure-item):hover {
+      background-color: color-mix(in oklab, rgb(var(--bk-theme-mono-300) / 1) 20%, transparent);
+    }
+  }
 }
-
-  .bk.bk-structure .bk-structure-item.bk-is-selected .bk-structure-list:before {
-        --bk-tw-border-opacity: 1;
-        border-left-color: rgb(var(--bk-theme-accent-500) / var(--bk-tw-border-opacity, 1));
+:is(.bk.bk-structure .bk-structure-item) .bk-blokkli-item-icon {
+  height: 25px;
+  width: 25px;
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-400) / 1);
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  padding: 3px;
 }
-
-  .bk.bk-structure .bk-structure-item.bk-is-selected .bk-structure-item .bk-structure-item-label:before {
-        --bk-tw-border-opacity: 1;
-        border-top-color: rgb(var(--bk-theme-accent-500) / var(--bk-tw-border-opacity, 1));
+.bk-is-selected:is(:is(.bk.bk-structure .bk-structure-item) .bk-blokkli-item-icon) {
+  border-color: rgb(var(--bk-theme-accent-900) / 1);
+  background-color: rgb(var(--bk-theme-accent-700) / 1);
+  color: white;
 }
-
-  .bk.bk-structure .bk-structure-item.bk-is-selected .bk-structure-item .bk-blokkli-item-icon {
-        --bk-tw-border-opacity: 1;
-        border-color: rgb(var(--bk-theme-accent-400) / var(--bk-tw-border-opacity, 1));
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-accent-50) / var(--bk-tw-bg-opacity, 1));
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-text-opacity, 1));
+.bk-is-selected:is(.bk.bk-structure .bk-structure-item)  > .bk-structure-item-label {
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
 }
-
-  .bk.bk-structure .bk-structure-item-label {
-        position: relative;
-        display: flex;
-        width: 100%;
-        align-items: center;
-        gap: 5px;
-        padding-top: 10px;
-        padding-bottom: 10px;
-        font-size: 14px;
-        line-height: 20px;
-        line-height: 1;
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1));
+.bk-is-selected:is(.bk.bk-structure .bk-structure-item) .bk-structure-list:before {
+  border-left-color: rgb(var(--bk-theme-accent-500) / 1);
 }
-
-  .bk.bk-structure .bk-structure-field-label {
-        margin-bottom: 5px;
-        display: flex;
-        height: 20px;
-        align-items: center;
-        padding-left: 17px;
-        font-size: 12px;
-        line-height: 16px;
-        font-weight: 500;
-        text-transform: uppercase;
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
+:is(.bk-is-selected:is(.bk.bk-structure .bk-structure-item) .bk-structure-item) .bk-structure-item-label:before {
+  border-top-color: rgb(var(--bk-theme-accent-500) / 1);
 }
-
-  .bk.bk-structure .bk-structure-field-item {
-        position: relative;
+:is(.bk-is-selected:is(.bk.bk-structure .bk-structure-item) .bk-structure-item) .bk-blokkli-item-icon {
+  border-color: rgb(var(--bk-theme-accent-400) / 1);
+  background-color: rgb(var(--bk-theme-accent-50) / 1);
+  color: rgb(var(--bk-theme-accent-800) / 1);
 }
-
-  .bk.bk-structure .bk-structure-field-items {
-        position: relative;
+.bk.bk-structure .bk-structure-item-label {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 5px;
+  padding-block: 10px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-leading: 1;
+  line-height: 1;
+  color: rgb(var(--bk-theme-mono-800) / 1);
 }
-
-  .bk.bk-structure .bk-structure-field-target {
-        position: absolute;
-        height: 40px;
-        width: 100%;
-        opacity: 0.2;
+.bk.bk-structure .bk-structure-field-label {
+  margin-bottom: 5px;
+  display: flex;
+  height: 20px;
+  align-items: center;
+  padding-left: 17px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  color: rgb(var(--bk-theme-mono-600) / 1);
+  text-transform: uppercase;
 }
-
-  .bk.bk-structure .bk-structure-field-target:hover {
-        opacity: 1;
+.bk.bk-structure .bk-structure-field-item {
+  position: relative;
 }
-
-  .bk.bk-structure .bk-structure-field-target {
-        border-bottom-width: 4px;
-        --bk-tw-border-opacity: 1;
-        border-bottom-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1));
+.bk.bk-structure .bk-structure-field-items {
+  position: relative;
 }
-
-  .bk.bk-structure .bk-structure-field-target.bk-is-before {
-        top: -40px;
+.bk.bk-structure .bk-structure-field-target {
+  position: absolute;
+  height: 40px;
+  width: 100%;
+  opacity: 20%;
 }
-
-  .bk.bk-structure .bk-structure-field-target.bk-is-after {
-        bottom: 0px;
+@media (hover: hover) {
+  :is(.bk.bk-structure .bk-structure-field-target):hover {
+    opacity: 100%;
+  }
+}
+.bk.bk-structure .bk-structure-field-target {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 4px;
+  border-bottom-color: rgb(var(--bk-theme-accent-700) / 1);
+}
+.bk-is-before:is(.bk.bk-structure .bk-structure-field-target) {
+  top: calc(40px * -1);
+}
+.bk-is-after:is(.bk.bk-structure .bk-structure-field-target) {
+  bottom: 0px;
 }
 </style>

package/dist/runtime/editor/features/templates/{Dialog → DialogBrowseTemplates}/index.vue

@@ -46,7 +46,7 @@
     </div>
     <template #footer>
       <button
-        class="bk-button bk-is-primary"
+        class="bk-button bk-scheme-accent"
         :disabled="!selectedItem"
         @click="onSubmit"
       >

package/dist/runtime/editor/features/templates/{CreateDialog → DialogCreateTemplate}/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DialogModal
     id="templates-create"
-    :title="$t('templatesCreateDialogTitle', 'Create template')"
+    :title="$t('createTemplate', 'Create template')"
     :lead="
   $t(
     'templatesCreateDialogLead',
@@ -10,18 +10,19 @@
 "
     :width="1200"
     icon="bk_mdi_dashboard"
-    :submit-label="$t('templatesCreateDialogSubmit', 'Create template')"
+    :submit-label="$t('createTemplate', 'Create template')"
     :can-submit="!!label.length"
+    mono
     @submit="onSubmit"
     @cancel="$emit('cancel')"
   >
-    <div>
+    <PanelSection :title="$t('settings', 'Settings')" padded>
       <FormItem>
         <FormText
           id="template_label"
           v-model="label"
           lazy
-          :label="$t('templatesCreateDialogLabelLabel', 'Name')"
+          :label="$t('name', 'Name')"
           type="text"
           :placeholder="
   $t('templatesCreateDialogLabelPlaceholder', 'e.g. Hero Section')
@@ -33,7 +34,7 @@
         <FormTextarea
           id="template_description"
           v-model="description"
-          :label="$t('templatesCreateDialogDescriptionLabel', 'Description')"
+          :label="$t('description', 'Description')"
           :placeholder="
   $t(
     'templatesCreateDialogDescriptionPlaceholder',
@@ -56,13 +57,10 @@
 "
         />
       </FormItem>
-      <FormItem>
-        <div class="bk-form-label">
-          {{ $t("templatesCreateDialogPreviewLabel", "Preview") }}
-        </div>
-        <BlockPreviewRenderer :uuids="uuids" />
-      </FormItem>
-    </div>
+    </PanelSection>
+    <PanelSection :title="$t('preview', 'Preview')">
+      <BlockPreviewRenderer :uuids="uuids" />
+    </PanelSection>
   </DialogModal>
 </template>
 
@@ -76,6 +74,7 @@ import {
   FormToggle,
   BlockPreviewRenderer
 } from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
 const emit = defineEmits(["confirm", "cancel"]);
 const { $t, ui, permissions } = useBlokkli();
 const props = defineProps({

package/dist/runtime/editor/features/templates/{ManageDialog → DialogManageTemplates}/Item.vue

@@ -1,26 +1,32 @@
 <template>
   <tr class="_bk_hover:bg-mono-50">
-    <td>
-      <div>
-        <span>{{ label }}</span>
-        <span
-          v-if="isDefault"
-          class="bk-pill bk-is-strong"
-          :title="
+    <td class="_bk_py-15">
+      <div class="_bk_flex _bk_flex-wrap _bk_gap-5">
+        <span class="_bk_text-lg _bk_font-semibold _bk_items-center">{{ label }}</span>
+        <div v-if="isDefault">
+          <Pill
+            :text="$t('templatesDefaultPill', 'Default')"
+            variant="normal"
+            :title="
   $t(
     'templatesDefaultPillDescription',
     'This template is used when new blocks of this type are created.'
   )
 "
-          >{{ $t("templatesDefaultPill", "Default") }}</span
-        >
+          />
+        </div>
+      </div>
+      <div v-if="description" class="_bk_text-sm _bk_text-mono-600">
+        {{ description }}
+      </div>
+      <div class="bk-pill-list _bk_mt-8">
+        <Pill
+          v-for="(bundle, index) in bundleLabels"
+          :key="index"
+          :text="bundle"
+          scheme="mono"
+        />
       </div>
-      <div v-if="description">{{ description }}</div>
-      <ul class="bk-pill-list _bk_mt-8">
-        <li v-for="(bundle, index) in bundleLabels" :key="index">
-          <span class="bk-pill bk-is-mono" v-text="bundle" />
-        </li>
-      </ul>
     </td>
     <td>
       <span v-if="metadata?.createdBy">{{ metadata.createdBy }}</span>
@@ -35,38 +41,36 @@
       <div class="_bk_flex _bk_gap-10 _bk_justify-end">
         <template v-if="confirmDelete">
           <button
-            class="bk-button bk-is-danger bk-is-small"
+            class="bk-button bk-scheme-red bk-is-small"
             :disabled="isDeleting"
             :class="{ 'bk-is-loading': isDeleting }"
             @click="onConfirmDelete"
           >
-            {{ $t("templatesManageDialogConfirmDelete", "Delete") }}
+            {{ $t("delete", "Delete") }}
           </button>
           <button
-            class="bk-button bk-is-small"
+            class="bk-button bk-scheme-mono bk-is-light bk-is-small"
             :disabled="isDeleting"
             @click="confirmDelete = false"
           >
-            {{ $t("templatesManageDialogCancelDelete", "Cancel") }}
+            {{ $t("cancel", "Cancel") }}
           </button>
         </template>
         <template v-else>
+          <button
+            v-if="permissions.includes('delete')"
+            class="bk-button bk-scheme-red bk-is-light bk-is-small bk-is-icon-only"
+            @click="confirmDelete = true"
+          >
+            <Icon name="bk_mdi_delete" />
+          </button>
           <button
             v-if="adapterHasEdit && permissions.includes('edit')"
             ref="editButtonEl"
-            class="bk-button bk-is-small"
+            class="bk-button bk-scheme-accent bk-is-small bk-is-icon-only"
             @click.prevent="isEditing = true"
           >
             <Icon name="bk_mdi_edit" />
-            {{ $t("templatesManageDialogEdit", "Edit") }}
-          </button>
-          <button
-            v-if="permissions.includes('delete')"
-            class="bk-button bk-is-small"
-            @click="confirmDelete = true"
-          >
-            <Icon name="bk_mdi_delete" />
-            {{ $t("templatesManageDialogDelete", "Delete") }}
           </button>
         </template>
       </div>
@@ -90,7 +94,8 @@ import { computed, ref, useBlokkli, useTemplateRef } from "#imports";
 import {
   Icon,
   NestedEditorOverlay,
-  RelativeTime
+  RelativeTime,
+  Pill
 } from "#blokkli/editor/components";
 import { falsy, onlyUnique } from "#blokkli/helpers";
 const props = defineProps({

package/dist/runtime/editor/features/templates/DialogManageTemplates/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <DialogModal
+    id="templates-manage"
+    :title="$t('templatesManageDialogTitle', 'Manage templates')"
+    :lead="
+  $t(
+    'templatesManageDialogLead',
+    'View, edit and delete your block templates.'
+  )
+"
+    :width="1200"
+    icon="bk_mdi_dashboard"
+    hide-buttons
+    mono
+    @cancel="$emit('cancel')"
+  >
+    <div class="bk-templates-manage _bk_select-text _bk_relative">
+      <PanelSection :title="$t('filter', 'Filter')" padded>
+        <ConfigForm v-if="config.length" v-model="filters" :config />
+      </PanelSection>
+      <PanelSection :title="$t('templates', 'Templates')">
+        <Loading v-if="status === 'pending'" />
+        <template v-if="items.length">
+          <table class="bk-table bk-padded">
+            <thead>
+              <tr>
+                <th>
+                  {{ $t("nameDescription", "Name / Description") }}
+                </th>
+                <th>
+                  {{ $t("createdBy", "Created by") }}
+                </th>
+                <th>
+                  {{ $t("created", "Created") }}
+                </th>
+                <th>
+                  {{ $t("dateUpdated", "Updated") }}
+                </th>
+                <th class="_bk_text-right">
+                  {{ $t("actions", "Actions") }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <TabelRow
+                v-for="item in items"
+                :key="item.uuid"
+                v-bind="item"
+                @refresh="refresh"
+              />
+            </tbody>
+          </table>
+          <div v-if="totalPages > 1">
+            <Pagination v-model="page" :total-pages />
+          </div>
+        </template>
+        <p v-else class="bk-lead">
+          {{ $t("templatesManageDialogNoResults", "No templates found.") }}
+        </p>
+      </PanelSection>
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import {
+  ref,
+  useBlokkli,
+  computed,
+  useAsyncData,
+  watch,
+  reactive
+} from "#imports";
+import {
+  DialogModal,
+  Pagination,
+  Loading,
+  ConfigForm
+} from "#blokkli/editor/components";
+import TabelRow from "./Item.vue";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+defineEmits(["cancel"]);
+const { $t, adapter } = useBlokkli();
+const page = ref(0);
+const confirmDeleteUuid = ref("");
+const filters = reactive({});
+const searchParams = computed(() => ({
+  page: page.value,
+  filters: { ...filters },
+  includeItems: false
+}));
+const { data, status, refresh } = await useAsyncData(
+  () => adapter.templatesSearch(searchParams.value),
+  {
+    watch: [searchParams],
+    default: () => ({
+      items: [],
+      filters: [],
+      total: 0,
+      perPage: 10
+    })
+  }
+);
+const perPage = computed(() => data.value.perPage);
+const totalPages = computed(() => Math.ceil(data.value.total / perPage.value));
+const items = computed(() => data.value.items);
+const config = computed(() => data.value.filters);
+watch(page, () => {
+  confirmDeleteUuid.value = "";
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk .bk-templates-manage {
+  min-height: 70vh;
+}
+</style>

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

@@ -45,12 +45,14 @@ import {
   defineMenuButton,
   useDialog
 } from "#blokkli/editor/composables";
-const TemplatesDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
+const TemplatesDialog = defineAsyncComponent(
+  () => import("./DialogBrowseTemplates/index.vue")
+);
 const CreateTemplateDialog = defineAsyncComponent(
-  () => import("./CreateDialog/index.vue")
+  () => import("./DialogCreateTemplate/index.vue")
 );
 const ManageDialog = defineAsyncComponent(
-  () => import("./ManageDialog/index.vue")
+  () => import("./DialogManageTemplates/index.vue")
 );
 const { adapter } = defineBlokkliFeature({
   id: "templates",
@@ -137,7 +139,7 @@ defineItemDropdownAction(() => {
   }
   return {
     id: "templates-create",
-    label: $t("templatesCreate", "Create template..."),
+    label: $t("templatesCreate", "Create template", { more: true }),
     icon: "bk_mdi_dashboard",
     group: "templates",
     weight: 200,
@@ -152,7 +154,7 @@ defineMenuButton(() => {
   }
   return {
     id: "templates",
-    title: $t("templatesMenuLabel", "Templates..."),
+    title: $t("templates", "Templates"),
     weight: -100,
     description: $t(
       "templatesMenuDescription",