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

package/dist/runtime/editor/components/AddListItem/index.vue

@@ -7,6 +7,8 @@
     class="bk-add-item"
     :menu="menu"
     :data-sortli-id="id"
+    :data-test="'add-list-item-' + id"
+    :data-test-disabled="disabled"
     :class="[
   {
     'bk-is-disabled': disabled

package/dist/runtime/editor/components/AnimationCanvas/index.vue

@@ -135,7 +135,7 @@ function getInteractedElement(e) {
       droppableField.fieldName,
       droppableField
     );
-    if (config.type === "reference") {
+    if (config.type === "reference" && config.cardinality !== 1) {
       const droppableUuid = droppableField.type === itemEntityType ? droppableField.uuid : void 0;
       if (!droppableUuid || droppableUuid === deepestUuid) {
         return {
@@ -361,7 +361,9 @@ function onPointerUp(e) {
         if (!block) {
           return;
         }
-        eventBus.emit("item:doubleClick", block);
+        ui.flushPendingChanges().then(
+          () => eventBus.emit("item:doubleClick", block)
+        );
       }
     }
   }

package/dist/runtime/editor/components/AppMenu/Inner.vue

@@ -11,8 +11,11 @@
     >
       <Icon name="bk_mdi_close" class="_bk_size-20 _bk_md:size-30 _bk_mr-25" />
     </button>
-    <div class="_bk_flex-1 _bk_overflow-auto _bk_flex _bk_flex-col">
-      <div id="bk-menu-primary" class="_bk_grid _bk_border-t _bk_border-t-mono-200">
+    <div class="_bk_flex-1 _bk_overflow-auto _bk_flex _bk_flex-col _bk_bg-mono-200">
+      <div
+        id="bk-menu-primary"
+        class="_bk_grid _bk_border-t _bk_border-t-mono-200 _bk_bg-white"
+      >
         <MenuButton
           v-for="button in primaryButtons"
           :id="button.id"
@@ -25,7 +28,7 @@
           @click="onClick(button)"
         />
       </div>
-      <div id="bk-menu-secondary" class="_bk_mt-auto">
+      <div id="bk-menu-secondary" class="_bk_mt-auto _bk_grid _bk_grid-cols-2">
         <MenuButton
           v-for="button in secondaryButtons"
           :id="button.id"
@@ -35,16 +38,17 @@
           :icon="button.icon"
           :type="button.type"
           :disabled="button.disabled"
+          small
           @click="onClick(button)"
         />
       </div>
       <aside
-        class="_bk_px-15 _bk_py-10 _bk_text-xs _bk_bg-mono-100 _bk_text-mono-600 _bk_items-center _bk_leading-none _bk_flex _bk_justify-between"
+        class="_bk_px-15 _bk_py-10 _bk_text-xs _bk_bg-accent-600 _bk_text-white _bk_items-center _bk_leading-none _bk_flex _bk_justify-between"
       >
         <div class="_bk_flex _bk_gap-5 _bk_items-center">
           <Icon
             name="logo"
-            class="_bk_bg-accent-700 _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_text-white"
+            class="_bk_bg-white _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_text-accent-600"
           />
           <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
         </div>
@@ -67,7 +71,7 @@ import { computed, useBlokkli } from "#imports";
 import { Icon } from "#blokkli/editor/components";
 import { blokkliVersion } from "#blokkli-build/editor-config";
 import MenuButton from "./MenuButton.vue";
-const { plugins } = useBlokkli();
+const { plugins, ui } = useBlokkli();
 const emit = defineEmits(["close"]);
 const allButtons = computed(() => plugins.get("menuButton"));
 const primaryButtons = computed(() => {
@@ -76,7 +80,8 @@ const primaryButtons = computed(() => {
 const secondaryButtons = computed(() => {
   return allButtons.value.filter((button) => button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
 });
-function onClick(button) {
+async function onClick(button) {
+  await ui.flushPendingChanges();
   button.callback();
   emit("close");
 }

package/dist/runtime/editor/components/AppMenu/MenuButton.d.vue.ts

@@ -1,13 +1,14 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+declare const __VLS_export: import("vue").DefineComponent<{
     id: string;
     title: string;
     description: string;
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
+    small?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
@@ -17,13 +18,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
+    small?: boolean;
 }> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/AppMenu/MenuButton.vue

@@ -1,18 +1,63 @@
 <template>
   <button
     :id="'bk-menu-list-button-' + id"
-    class="bk-menu-list-button _bk_grid _bk_items-center _bk_pl-15 _bk_pr-20 _bk_py-15 _bk_gap-x-10 _bk_w-full _bk_text-left _bk_whitespace-nowrap _bk_text-mono-950 _bk_text-sm _bk_lg:hover:bg-mono-100 _bk_border-b _bk_border-b-mono-200"
-    :disabled="disabled"
-    :class="type ? 'bk-is-' + type : ''"
+    class="_bk_w-full _bk_text-left _bk_whitespace-nowrap _bk_text-mono-950 _bk_group"
+    :data-test="'app-menu-button-' + id"
+    :data-test-type="type"
+    :disabled
+    :class="[
+  {
+    'bk-scheme-lime': type === 'success',
+    'bk-scheme-red': type === 'danger',
+    'bk-scheme-yellow': type === 'yellow',
+    'bk-scheme-mono': !type,
+    '_bk_pointer-events-none': disabled,
+    '_bk_lg:hover:bg-mono-100 _bk_border-b _bk_border-b-mono-200': !small
+  }
+]"
     @click.prevent.stop="onClick"
   >
-    <div class="bk-menu-list-icon">
-      <slot>
-        <Icon v-if="icon" :name="icon" />
-      </slot>
+    <div
+      class="_bk_grid _bk_pl-15 _bk_pr-20 _bk_grid-cols-[auto_1fr]"
+      :class="{
+  '_bk_py-8 _bk_gap-x-5': small,
+  '_bk_py-15 _bk_gap-x-10': !small,
+  '_bk_opacity-30': disabled
+}"
+    >
+      <div
+        class="_bk_flex _bk_items-center _bk_justify-center _bk_border _bk_bg-scheme-light _bk_text-scheme-normal _bk_border-scheme-normal/50 _bk_group-hover:border-scheme-normal _bk_group-hover:text-scheme-dark _bk_rounded"
+        :class="{
+  '_bk_size-25': small,
+  '_bk_size-50': !small
+}"
+      >
+        <Icon v-if="icon" :name="icon" class="_bk_size-[60%]" />
+      </div>
+      <div
+        class="_bk_flex _bk_flex-col _bk_justify-center"
+        :class="{
+  '_bk_gap-2': !small
+}"
+      >
+        <strong
+          :class="{
+  '_bk_text-xs _bk_font-medium': small,
+  '_bk_text-base _bk_font-semibold': !small
+}"
+          >{{ title }}</strong
+        >
+        <span
+          v-if="!small"
+          class="_bk_text-mono-500 _bk_group-hover:text-mono-700"
+          :class="{
+  '_bk_text-xs': small,
+  '_bk_text-sm': !small
+}"
+          >{{ description }}</span
+        >
+      </div>
     </div>
-    <strong>{{ title }}</strong>
-    <span>{{ description }}</span>
   </button>
 </template>
 
@@ -24,7 +69,8 @@ defineProps({
   description: { type: String, required: true },
   disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
-  type: { type: String, required: false }
+  type: { type: String, required: false },
+  small: { type: Boolean, required: false }
 });
 const emit = defineEmits(["click"]);
 function onClick() {
@@ -37,187 +83,3 @@ export default {
   name: "MenuButton"
 };
 </script>
-
-<style>
-@media screen and (min-height: 900px) {
-.bk .bk-menu-list-button {
-
-column-gap: 15px !important;
-
-font-size: 16px !important;
-
-line-height: 24px !important;
-}
-  }
-  .bk .bk-menu-list-button {
-
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto auto;
-}
-  .bk .bk-menu-list-button[disabled] {
-
-pointer-events: none;
-}
-  .bk .bk-menu-list-button[disabled] .bk-menu-list-icon {
-
---bk-tw-border-opacity: 1;
-
-border-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-border-opacity, 1));
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button[disabled] span,
-    .bk .bk-menu-list-button[disabled] strong {
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button strong {
-
-font-weight: 600;
-}
-  .bk .bk-menu-list-button span {
-    grid-column: 2;
-    font-size: 14px;
-    line-height: 20px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
-  }
-  .bk .bk-menu-list-button:not([disabled]).bk-is-danger .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-red-normal) / 0.4);
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(var(--bk-theme-red-light) / var(--bk-tw-bg-opacity, 1));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-danger:hover .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-red-normal) / 0.5);
-
-background-color: rgb(var(--bk-theme-red-normal) / 0.2);
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-success .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-lime-normal) / 0.4);
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-success:hover .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-lime-normal) / 0.4);
-
-background-color: rgb(var(--bk-theme-lime-normal) / 0.2);
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-yellow .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-yellow-normal) / 0.4);
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-bg-opacity, 1));
-
-color: rgb(var(--bk-theme-yellow-dark) / 0.6);
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-yellow:hover .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-yellow-dark) / 0.5);
-
-background-color: rgb(var(--bk-theme-yellow-normal) / 0.2);
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:hover .bk-menu-list-icon {
-
---bk-tw-border-opacity: 1;
-
-border-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1));
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
-}
-
-.bk .bk-menu-list-icon {
-
-display: flex;
-
-align-items: center;
-
-justify-content: center;
-
-border-radius: 4px;
-
-border-width: 1px;
-
---bk-tw-border-opacity: 1;
-
-border-color: rgb(var(--bk-theme-mono-300) / 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));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
-
-height: 40px;
-
-width: 40px;
-  grid-column: 1;
-  grid-row: 1 / -1;
-}
-
-@media screen and (min-height: 900px) {
-
-.bk .bk-menu-list-icon {
-
-width: 50px;
-
-height: 50px;
-}
-  }
-
-.bk .bk-menu-list-icon svg {
-
-pointer-events: none;
-
-height: 25px;
-
-width: 25px;
-
-fill: currentColor;
-}
-</style>

package/dist/runtime/editor/components/AppMenu/MenuButton.vue.d.ts

@@ -1,13 +1,14 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+declare const __VLS_export: import("vue").DefineComponent<{
     id: string;
     title: string;
     description: string;
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
+    small?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
@@ -17,13 +18,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
+    small?: boolean;
 }> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;