@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.24

package/dist/runtime/components/Edit/ItemIconBox/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="bk-item-icon"
+    :class="[
+  'bk-is-' + mappedColor,
+  {
+    'bk-is-small': isSmall
+  }
+]"
+  >
+    <Icon v-if="icon" :name="icon" />
+    <ItemIcon v-else-if="bundle" :bundle />
+  </div>
+</template>
+
+<script setup>
+import { ItemIcon, Icon } from "#blokkli/components";
+import {
+  BUNDLE_BLOKKLI_FRAGMENT,
+  BUNDLE_FROM_LIBRARY
+} from "#blokkli/constants";
+import { computed } from "#imports";
+const props = defineProps({
+  icon: { type: null, required: false, default: void 0 },
+  bundle: { type: String, required: false, default: void 0 },
+  color: { type: String, required: false, default: void 0 },
+  isSmall: { type: Boolean, required: false, default: false }
+});
+const mappedColor = computed(() => {
+  if (props.color) {
+    return props.color;
+  } else if (props.bundle) {
+    if (props.bundle === BUNDLE_BLOKKLI_FRAGMENT) {
+      return "accent";
+    } else if (props.bundle === BUNDLE_FROM_LIBRARY) {
+      return "lime";
+    }
+  }
+  return "default";
+});
+</script>

package/dist/runtime/components/Edit/{AddListItemIcon → ItemIconBox}/index.vue.d.ts

@@ -1,15 +1,15 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { AddListOrientation } from '#blokkli/types';
+type ItemColor = 'rose' | 'lime' | 'default' | 'yellow' | 'accent';
 type __VLS_Props = {
     icon?: BlokkliIcon;
     bundle?: string;
-    color?: 'rose' | 'lime' | 'default' | 'yellow' | 'accent';
-    orientation?: AddListOrientation;
+    color?: ItemColor;
+    isSmall?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     bundle: string;
     icon: BlokkliIcon;
-    color: "rose" | "lime" | "default" | "yellow" | "accent";
-    orientation: AddListOrientation;
+    color: ItemColor;
+    isSmall: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Konami/Game/index.vue

@@ -5,7 +5,6 @@
   '--bk-bg': background
 }"
   >
-    <div class="bk-dialog-background" />
     <div class="bk-konami-game bk-slide-up-inner">
       <div class="bk-konami-game-canvas">
         <canvas

package/dist/runtime/components/Edit/Konami/index.vue

@@ -1,9 +1,7 @@
 <template>
-  <Teleport to="body">
-    <BlokkliTransition name="slide-up">
-      <Game v-if="isEnabled" @close="isEnabled = false" />
-    </BlokkliTransition>
-  </Teleport>
+  <BlokkliTransition name="slide-up">
+    <Game v-if="isEnabled" @close="isEnabled = false" />
+  </BlokkliTransition>
 </template>
 
 <script setup>

package/dist/runtime/components/Edit/Messages/Item/index.vue

@@ -26,9 +26,10 @@
     </div>
     <Teleport
       v-if="additional && additional instanceof Error && showDetails"
-      to="body"
+      :to="ui.mainLayoutElement.value"
     >
       <DialogModal
+        id="messages-error-details"
         title="Error Details"
         hide-buttons
         width="100%"
@@ -48,13 +49,21 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed, watch } from "#imports";
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  computed,
+  watch,
+  useBlokkli
+} from "#imports";
 import { Icon, DialogModal } from "#blokkli/components";
 const props = defineProps({
   type: { type: String, required: true },
   message: { type: String, required: true },
   additional: { type: null, required: false }
 });
+const { ui } = useBlokkli();
 const emit = defineEmits(["close"]);
 const hasTimer = ref(true);
 const showDetails = ref(false);

package/dist/runtime/components/Edit/Messages/index.vue

@@ -16,7 +16,12 @@ import { ref, useBlokkli } from "#imports";
 import Item from "./Item/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { ui } = useBlokkli();
-const messages = ref([]);
+const messages = ref([
+  // {
+  //   type: 'success',
+  //   message: 'Foobar this is just a message',
+  // },
+]);
 function removeMessage(index) {
   messages.value = messages.value.filter((_v, i) => i !== index);
 }

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

@@ -0,0 +1,66 @@
+<template>
+  <BlokkliTransition name="fade">
+    <div
+      v-if="isVisible"
+      class="bk bk-overlay"
+      @click.prevent.stop.capture="onClick"
+      @dblclick.prevent="onDoubleClick"
+      @wheel.capture.stop.prevent
+      @pointerdown.capture.stop.prevent
+      @pointermove.capture.stop.prevent
+      @touchstart.capture.stop.prevent
+      @touchmove.capture.stop.prevent
+      @touchend.capture.stop.prevent
+    >
+      <div
+        v-if="showDoubleClickInfo"
+        :class="{
+  'bk-is-left': alignment === 'right' || alignment === 'center',
+  'bk-is-right': alignment === 'left'
+}"
+      >
+        <Icon name="click" />
+        <div v-html="infoText" />
+      </div>
+    </div>
+  </BlokkliTransition>
+</template>
+
+<script setup>
+import { BlokkliTransition, Icon } from "#blokkli/components";
+import { computed, useBlokkli, ref, watch } from "#imports";
+const { ui, eventBus, $t } = useBlokkli();
+let clickTimeout = null;
+const showDoubleClickInfo = ref(false);
+const alignment = computed(() => ui.currentDialog.value?.alignment);
+const infoText = computed(
+  () => $t(
+    "overlayDoubleClickInfo",
+    "<strong>Double click</strong> to close overlay"
+  )
+);
+function onClick() {
+  if (clickTimeout) {
+    return;
+  }
+  clickTimeout = window.setTimeout(() => {
+    showDoubleClickInfo.value = true;
+  }, 500);
+}
+const isVisible = computed(() => ui.hasDialogOpen.value);
+watch(isVisible, () => {
+  if (clickTimeout) {
+    window.clearTimeout(clickTimeout);
+    clickTimeout = null;
+  }
+  showDoubleClickInfo.value = false;
+});
+function onDoubleClick() {
+  if (clickTimeout) {
+    window.clearTimeout(clickTimeout);
+    clickTimeout = null;
+  }
+  eventBus.emit("overlay:close");
+  showDoubleClickInfo.value = false;
+}
+</script>

package/dist/runtime/components/Edit/Overlay/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/SystemRequirements/index.vue

@@ -1,53 +1,53 @@
 <template>
-  <Teleport v-if="showDialog" to="body">
-    <BlokkliTransition name="slide-up">
-      <DialogModal
-        :title="$t('systemRequirementsDialogTitle', 'System Requirements')"
-        :width="700"
-        :submit-label="$t('systemRequirementsDialogButton', 'Continue anyway')"
-        :lead="
+  <BlokkliTransition name="slide-up">
+    <DialogModal
+      v-if="showDialog"
+      id="system-requirements"
+      :title="$t('systemRequirementsDialogTitle', 'System Requirements')"
+      :width="700"
+      :submit-label="$t('systemRequirementsDialogButton', 'Continue anyway')"
+      :lead="
   $t(
     'systemRequirementsDialogLead',
     'bl\xF6kkli has detected that your browser does not meet one or more system requirements. For the best experience, please use a browser that supports all the listed requirements.'
   )
 "
-        icon="sad"
-        @submit="dismiss"
-        @cancel="dismiss"
-      >
-        <ul class="bk-system-requirements">
-          <li
-            v-for="requirement in requirements"
-            :key="requirement.id"
-            :class="{
+      icon="sad"
+      @submit="dismiss"
+      @cancel="dismiss"
+    >
+      <ul class="bk-system-requirements">
+        <li
+          v-for="requirement in requirements"
+          :key="requirement.id"
+          :class="{
   'bk-is-success': requirement.supported === true,
   'bk-is-error': requirement.supported === false,
   'bk-is-warning': requirement.supported === null
 }"
-          >
-            <div>
-              <h3>
-                <span>{{ requirement.title }}</span>
-                <div class="bk-system-requirements-icon">
-                  <Icon :name="requirement.supported ? 'check' : 'close'" />
-                </div>
-              </h3>
-              <p>{{ requirement.description }}</p>
-            </div>
-          </li>
-        </ul>
+        >
+          <div>
+            <h3>
+              <span>{{ requirement.title }}</span>
+              <div class="bk-system-requirements-icon">
+                <Icon :name="requirement.supported ? 'check' : 'close'" />
+              </div>
+            </h3>
+            <p>{{ requirement.description }}</p>
+          </div>
+        </li>
+      </ul>
 
-        <p>
-          {{
-            $t(
+      <p>
+        {{
+          $t(
   "systemRequirementsDialogText",
   "bl\xF6kkli has been tested and optimized for the latest versions of Chrome, Firefox, Edge, and Safari. Features like WebGL are well supported, but they may sometimes be disabled for performance or security reasons."
 )
-          }}
-        </p>
-      </DialogModal>
-    </BlokkliTransition>
-  </Teleport>
+        }}
+      </p>
+    </DialogModal>
+  </BlokkliTransition>
 </template>
 
 <script setup>

package/dist/runtime/components/Edit/Toolbar/index.vue

@@ -1,62 +1,61 @@
 <template>
-  <Teleport to="body">
+  <div
+    v-show="activeSidebarLeft && sidebarVisible"
+    id="bk-sidebar-content-left"
+    class="bk-sidebar bk-is-left"
+    :class="{ 'bk-is-hidden': !sidebarVisible }"
+  />
+
+  <div
+    v-show="activeSidebarRight"
+    id="bk-sidebar-content-right"
+    class="bk-sidebar bk-is-right"
+    :class="{ 'bk-is-hidden': !sidebarVisible }"
+  />
+
+  <AppMenu />
+
+  <div class="bk bk-toolbar" @touchstart.stop.passive @touchmove.stop.passive>
+    <div class="bk bk-toolbar-menu">
+      <button class="bk-toolbar-menu-button" @click.prevent.stop="openMenu">
+        <Icon name="menu" />
+      </button>
+    </div>
+    <div class="bk-toolbar-container">
+      <div
+        id="bk-sidebar-tabs-left"
+        class="bk-sidebar-container-tabs bk-is-left"
+      />
+    </div>
+    <div id="bk-toolbar-after-menu" class="bk-toolbar-container" />
+    <div id="bk-toolbar-before-title" class="bk-toolbar-container" />
+    <div id="bk-toolbar-title" class="bk-toolbar-container" />
+    <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
+    <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
     <div
-      v-show="activeSidebarLeft && sidebarVisible"
-      id="bk-sidebar-content-left"
-      class="bk-sidebar bk-is-left"
-      :class="{ 'bk-is-hidden': !sidebarVisible }"
+      id="bk-toolbar-before-sidebar"
+      class="bk-sidebar-container-tabs bk-toolbar-container"
     />
+  </div>
+
+  <div class="bk bk-sidebar-tabs">
+    <div id="bk-toolbar-before-sidebar-right" />
     <div
-      v-show="activeSidebarRight"
-      id="bk-sidebar-content-right"
-      class="bk-sidebar bk-is-right"
-      :class="{ 'bk-is-hidden': !sidebarVisible }"
+      id="bk-sidebar-tabs-right"
+      class="bk-sidebar-container-tabs bk-is-right"
     />
-
-    <BlokkliTransition name="toolbar">
-      <div v-show="showToolbar" class="bk bk-top">
-        <div
-          class="bk-toolbar bk-control"
-          @touchstart.stop.passive
-          @touchmove.stop.passive
-        >
-          <div id="bk-toolbar-menu" class="bk-toolbar-area bk-is-menu" />
-          <div class="bk-toolbar-container bk-is-sidebar">
-            <div
-              id="bk-sidebar-tabs-left"
-              class="bk-sidebar-container-tabs bk-is-left"
-            />
-          </div>
-          <div id="bk-toolbar-after-menu" class="bk-toolbar-container" />
-          <div id="bk-toolbar-before-title" class="bk-toolbar-container" />
-          <div id="bk-toolbar-title" class="bk-toolbar-container" />
-          <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
-          <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
-          <div
-            id="bk-toolbar-before-sidebar"
-            class="bk-sidebar-container-tabs bk-toolbar-container"
-          />
-        </div>
-        <div class="bk bk-sidebar-tabs">
-          <div id="bk-toolbar-before-sidebar-right" />
-          <div
-            id="bk-sidebar-tabs-right"
-            class="bk-sidebar-container-tabs bk-is-right"
-          />
-        </div>
-      </div>
-    </BlokkliTransition>
-  </Teleport>
+  </div>
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { Icon } from "#blokkli/components";
 import { onMounted, useBlokkli, onBeforeUnmount, computed } from "#imports";
-import { BlokkliTransition } from "#blokkli/components";
+import AppMenu from "./../AppMenu/index.vue";
 const { ui, selection, storage } = useBlokkli();
-const showToolbar = computed(
-  () => !ui.isMobile.value || !selection.isDragging.value && !selection.isMultiSelecting.value
-);
+function openMenu() {
+  ui.openDialog({ id: "menu", alignment: "left" });
+}
 const sidebarVisible = computed(() => {
   if (ui.isMobile.value) {
     return !selection.isDragging.value;

package/dist/runtime/components/Edit/index.d.ts

@@ -1,5 +1,5 @@
 import AddListItem from './AddListItem/index.vue.js';
-import AddListItemIcon from './AddListItemIcon/index.vue.js';
+import ItemIconBox from './ItemIconBox/index.vue.js';
 import ArtboardTooltip from './ArtboardTooltip/index.vue.js';
 import Banner from './Banner/index.vue.js';
 import BlokkliTransition from './Transition/index.vue.js';
@@ -33,4 +33,4 @@ import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
 import Sortli from './Sortli/index.vue.js';
 import TransitionHeight from './Transition/Height.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
-export { AddListItem, AddListItemIcon, ArtboardTooltip, Banner, BlokkliTransition, ConfigForm, DialogModal, DiffViewerState, ErrorBoundary, FormCheckboxes, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScheduleDate, ScrollBoundary, ShortcutIndicator, Sortli, TransitionHeight, ViewportBlockingRect, };
+export { AddListItem, ItemIconBox, ArtboardTooltip, Banner, BlokkliTransition, ConfigForm, DialogModal, DiffViewerState, ErrorBoundary, FormCheckboxes, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScheduleDate, ScrollBoundary, ShortcutIndicator, Sortli, TransitionHeight, ViewportBlockingRect, };

package/dist/runtime/components/Edit/index.js

@@ -1,5 +1,5 @@
 import AddListItem from "./AddListItem/index.vue";
-import AddListItemIcon from "./AddListItemIcon/index.vue";
+import ItemIconBox from "./ItemIconBox/index.vue";
 import ArtboardTooltip from "./ArtboardTooltip/index.vue";
 import Banner from "./Banner/index.vue";
 import BlokkliTransition from "./Transition/index.vue";
@@ -35,7 +35,7 @@ import TransitionHeight from "./Transition/Height.vue";
 import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
 export {
   AddListItem,
-  AddListItemIcon,
+  ItemIconBox,
   ArtboardTooltip,
   Banner,
   BlokkliTransition,