@blokkli/editor 1.3.4 → 1.4.0-alpha.1

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

@@ -6,78 +6,76 @@
     @close="onClose"
   >
     <div class="bk-library-dialog">
-      <p class="bk-lead">
-        {{
-          $t(
-            'libraryPlaceDialogLead',
-            'Select a reusable block from the library to add it to your layout. You can detach the block later.',
-          )
-        }}
-      </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
-              id="library_search"
-              v-model.lazy="searchText"
-              type="text"
-              class="bk-form-input"
-              :placeholder="
-                $t('libraryPlaceSearchInputPlaceholder', 'Search library items')
-              "
-              required
-            />
-          </div>
-          <div>
-            <label class="bk-form-label" for="library_bundle">
-              {{ $t('libraryPlaceBundleSelectLabel', 'Bundle') }}
-            </label>
-            <select
-              id="library_bundle"
-              v-model="selectedBundle"
-              class="bk-form-input"
-            >
-              <option
-                v-for="v in bundleOptions"
-                :key="v.bundle"
-                :value="v.bundle"
+      <div>
+        <p class="bk-lead">
+          {{
+            $t(
+              'libraryPlaceDialogLead',
+              'Select a reusable block from the library to add it to your layout. You can detach the block later.',
+            )
+          }}
+        </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
+                id="library_search"
+                v-model.lazy="searchText"
+                type="text"
+                class="bk-form-input"
+                :placeholder="
+                  $t(
+                    'libraryPlaceSearchInputPlaceholder',
+                    'Search library items',
+                  )
+                "
+                required
+              />
+            </div>
+            <div>
+              <label class="bk-form-label" for="library_bundle">
+                {{ $t('libraryPlaceBundleSelectLabel', 'Bundle') }}
+              </label>
+              <select
+                id="library_bundle"
+                v-model="selectedBundle"
+                class="bk-form-input"
               >
-                {{ v.label }}
-              </option>
-            </select>
+                <option
+                  v-for="v in bundleOptions"
+                  :key="v.bundle"
+                  :value="v.bundle"
+                >
+                  {{ v.label }}
+                </option>
+              </select>
+            </div>
           </div>
         </div>
+        <div class="bk-library-dialog-content">
+          <Loading v-if="status === 'pending'" />
+          <ul ref="listEl" class="bk-library-dialog-list">
+            <li
+              v-for="item in items"
+              :key="item.uuid"
+              :class="{
+                'bk-is-selected': selectedItem === item.uuid,
+              }"
+              @click="selectedItem = item.uuid"
+            >
+              <LibraryListItem v-bind="item" />
+            </li>
+          </ul>
+        </div>
       </div>
-      <div class="bk-library-dialog-content">
-        <Loading v-if="status === 'pending'" />
-        <ul ref="listEl" class="bk-library-dialog-list">
-          <li
-            v-for="item in items"
-            :key="item.uuid"
-            :class="{
-              'bk-is-selected': selectedItem === item.uuid,
-            }"
-            @click="selectedItem = item.uuid"
-          >
-            <LibraryListItem v-bind="item" />
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="bk">
-      <div class="bk-pagination">
-        <button :disabled="page === 0" @click="page--">
-          <Icon name="arrow-left" />
-        </button>
-        <div>{{ page + 1 }} / {{ totalPages }}</div>
-        <button :disabled="page >= totalPages - 1" @click="page++">
-          <Icon name="arrow-right" />
-        </button>
+      <div class="bk bk-library-pagination">
+        <Pagination v-model="page" :total-pages />
       </div>
     </div>
+
     <template #footer>
       <button class="bk-button bk-is-primary" @click="onSubmit">
         {{ $t('libraryPlaceDialogSubmit', 'Add reusable block') }}
@@ -91,7 +89,7 @@ import type {
   BlokkliAdapterGetLibraryItemsData,
   BlokkliAdapterGetLibraryItemsResult,
 } from '#blokkli/adapter'
-import { FormOverlay, Icon } from '#blokkli/components'
+import { FormOverlay, Pagination } from '#blokkli/components'
 import Loading from './../../../Loading/index.vue'
 import type { BlokkliFieldElement, FieldConfig } from '#blokkli/types'
 import { ref, useBlokkli, useAsyncData, computed, watch } from '#imports'

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

@@ -73,7 +73,7 @@ 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 { getDefinition } from '#blokkli/definitions'
+import { getDefinition } from '#blokkli-build/definitions'
 import type { ActionPlacedEvent, LibraryEditItemEvent } from '#blokkli/types'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 

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

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import { computed } from '#imports'
 
 const props = defineProps<{

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

@@ -70,15 +70,7 @@
       </button>
     </div>
 
-    <div class="bk-pagination">
-      <button :disabled="page === 0" @click="page--">
-        <Icon name="arrow-left" />
-      </button>
-      <div>{{ page + 1 }} / {{ totalPages }}</div>
-      <button :disabled="page >= totalPages - 1" @click="page++">
-        <Icon name="arrow-right" />
-      </button>
-    </div>
+    <Pagination v-model="page" :total-pages />
   </div>
 </template>
 
@@ -91,9 +83,9 @@ import {
   watch,
   nextTick,
 } from '#imports'
-import { Sortli, Icon } from '#blokkli/components'
+import { Sortli, Icon, Pagination } from '#blokkli/components'
 import type { MediaLibraryFilter, MediaLibraryGetResults } from './../types'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import Item from './Item.vue'
 import type { DraggableItem, DraggableMediaLibraryItem } from '#blokkli/types'
 import { buildDraggableItem, falsy } from '#blokkli/helpers'

package/dist/runtime/components/Edit/Features/MediaLibrary/types.d.ts

@@ -1,4 +1,4 @@
-import type { BlokkliIcon } from '#blokkli/icons';
+import type { BlokkliIcon } from '#blokkli-build/icons';
 export type MediaLibraryFilterCheckbox = {
     label: string;
     type: 'checkbox';

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

@@ -49,7 +49,7 @@
 
 <script lang="ts" setup>
 import { ref, computed, useBlokkli, onBeforeUnmount, onMounted } from '#imports'
-import { globalOptions } from '#blokkli/definitions'
+import { globalOptions } from '#blokkli-build/definitions'
 import { falsy, onlyUnique } from '#blokkli/helpers'
 import OptionsFormItem from './Item.vue'
 import OptionsFormGroup from './Group.vue'
@@ -59,8 +59,7 @@ import type {
   FragmentDefinitionInput,
 } from '#blokkli/types'
 import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions'
-import { optionValueToStorable } from '#blokkli/helpers/options'
-import { getRuntimeOptionValue } from '#blokkli/helpers/runtimeHelpers'
+import { getRuntimeOptionValue } from '#blokkli/runtime-helpers'
 import {
   BK_HIDDEN_GLOBALLY,
   BK_VISIBLE_LANGUAGES,
@@ -78,6 +77,32 @@ type OptionGroup = {
 
 const activeGroup = ref('')
 
+function optionValueToStorable(
+  definition: BlockOptionDefinition,
+  value: string | string[] | boolean | undefined | null | number,
+): string {
+  if (definition.type === 'checkbox') {
+    if (typeof value === 'string' && (value === '1' || value === '0')) {
+      return value
+    } else if (typeof value === 'boolean') {
+      return value === true ? '1' : '0'
+    }
+    return '0'
+  } else if (definition.type === 'text' || definition.type === 'radios') {
+    if (typeof value === 'string') {
+      return value
+    }
+  } else if (definition.type === 'checkboxes') {
+    if (Array.isArray(value)) {
+      return value.join(',')
+    } else if (typeof value === 'string') {
+      return value
+    }
+  }
+
+  return ''
+}
+
 function onToggleGroup(label: string) {
   if (activeGroup.value === label) {
     activeGroup.value = ''

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

@@ -12,7 +12,10 @@
 <script lang="ts" setup>
 import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
 import { falsy, onlyUnique } from '#blokkli/helpers'
-import { getDefinition, getFragmentDefinition } from '#blokkli/definitions'
+import {
+  getDefinition,
+  getFragmentDefinition,
+} from '#blokkli-build/definitions'
 import OptionsForm from './Form/index.vue'
 import type {
   BlockDefinitionInput,

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

@@ -14,7 +14,7 @@
 <script lang="ts" setup>
 import { useBlokkli, defineBlokkliFeature, computed, useRoute } from '#imports'
 import { PluginMenuButton } from '#blokkli/plugins'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 
 const { adapter, settings } = defineBlokkliFeature({
   id: 'publish',

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

@@ -73,7 +73,7 @@ import {
 import { PluginSidebar } from '#blokkli/plugins'
 import PreviewFrame from './Frame/index.vue'
 import { Icon } from '#blokkli/components'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 
 defineBlokkliFeature({
   id: 'responsive-preview',

package/dist/runtime/components/Edit/Features/Settings/Dialog/FeatureSetting/index.vue

@@ -66,7 +66,7 @@
 <script lang="ts" setup>
 import type { FeatureDefinitionSetting } from '#blokkli/types'
 import { Icon } from '#blokkli/components'
-import type { ValidFeatureKey } from '#blokkli-runtime/features'
+import type { ValidFeatureKey } from '#blokkli-build/features'
 import { useBlokkli, computed } from '#imports'
 
 const props = defineProps<{

package/dist/runtime/components/Edit/Features/Settings/Dialog/index.vue

@@ -30,11 +30,11 @@
 import { useBlokkli, computed } from '#imports'
 import { DialogModal } from '#blokkli/components'
 import FeatureSetting from './FeatureSetting/index.vue'
-import type { ValidFeatureKey } from '#blokkli-runtime/features'
+import type { ValidFeatureKey } from '#blokkli-build/features'
 import type { FeatureDefinitionSetting } from '#blokkli/types'
 import { SETTINGS_GROUP, type SettingsGroup } from '#blokkli/constants'
-import type { BlokkliIcon } from '#blokkli/icons'
-import { settingsOverride } from '#blokkli/config'
+import type { BlokkliIcon } from '#blokkli-build/icons'
+import { settingsOverride } from '#blokkli-build/config'
 
 const { $t, features, ui } = useBlokkli()
 

package/dist/runtime/components/Edit/Features/Theme/Color/index.vue

@@ -21,7 +21,7 @@
 <script lang="ts" setup>
 import { computed, useBlokkli } from '#imports'
 import { Icon } from '#blokkli/components'
-import { theme as configTheme } from '#blokkli/config'
+import { theme as configTheme } from '#blokkli-build/config'
 import type {
   RGB,
   ThemeColorGroup,

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

@@ -66,7 +66,7 @@ import type {
   ThemeContextColorShade,
 } from '#blokkli/types/theme'
 
-import { themes } from '#blokkli/config'
+import { themes } from '#blokkli-build/config'
 
 defineBlokkliFeature({
   id: 'theme',

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

@@ -100,7 +100,7 @@ import type {
   Language,
 } from '#blokkli/types'
 import Banner from './Banner/index.vue'
-import { getDefinition } from '#blokkli/definitions'
+import { getDefinition } from '#blokkli-build/definitions'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
 const { adapter } = defineBlokkliFeature({

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

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import { useBlokkli, onMounted, nextTick, computed } from '#imports'
-import { featureComponents } from '#blokkli-runtime/features'
+import { featureComponents } from '#blokkli-build/features'
 
 const emit = defineEmits(['loaded'])
 

package/dist/runtime/components/Edit/FormOverlay/Header/index.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import { ItemIcon, Icon } from '#blokkli/components'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 
 withDefaults(
   defineProps<{

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

@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
 import FormHeader from './Header/index.vue'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import { Resizable } from '#blokkli/components'
 
 defineProps<{

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

@@ -4,8 +4,8 @@
 
 <script lang="ts" setup>
 import { computed } from '#imports'
-import { icons } from '#blokkli/icons'
-import type { BlokkliIcon } from '#blokkli/icons'
+import { icons } from '#blokkli-build/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 
 const props = defineProps<{
   name: BlokkliIcon

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

@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { computed } from '#imports'
-import { icons } from '#blokkli/definitions'
+import { icons } from '#blokkli-build/definitions'
 import { Icon } from '#blokkli/components'
 
 const props = defineProps<{

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="bk bk-pagination">
+    <button :disabled="page === 0" @click="page--">
+      <Icon name="arrow-left" />
+    </button>
+    <div>{{ page + 1 }} / {{ totalPages }}</div>
+    <button :disabled="page >= totalPages - 1" @click="page++">
+      <Icon name="arrow-right" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '#blokkli/components'
+
+defineProps<{
+  totalPages: number
+}>()
+
+const page = defineModel<number>({ default: 0 })
+</script>

package/dist/runtime/components/Edit/PreviewProvider.vue

@@ -19,8 +19,8 @@ import type {
   UpdateBlockOptionEvent,
   ItemEditContext,
 } from '#blokkli/types'
-import '#blokkli/styles'
-import getAdapter from '#blokkli/compiled-edit-adapter'
+import '#blokkli-build/styles'
+import getAdapter from '#blokkli-build/compiled-edit-adapter'
 import {
   INJECT_EDIT_CONTEXT,
   INJECT_IS_PREVIEW,

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="root" class="bk-scale-to-fit" :style="style">
+  <div ref="rootEl" class="bk-scale-to-fit" :style="style">
     <div ref="wrapper" class="bk-scale-to-fit-wrapper">
       <div ref="inner" class="bk-scale-to-fit-wrapper-item" :style="innerStyle">
         <slot />
@@ -14,9 +14,10 @@ import { ref, computed } from '#imports'
 
 const props = defineProps<{
   width?: number
+  maxHeight?: number
 }>()
 
-const root = ref<HTMLDivElement | null>(null)
+const rootEl = ref<HTMLDivElement | null>(null)
 const inner = ref<HTMLDivElement | null>(null)
 const wrapper = ref<HTMLDivElement | null>(null)
 const rootWidth = ref(260)
@@ -24,22 +25,52 @@ const nativeWidth = ref(0)
 const nativeHeight = ref(0)
 const computedHeight = ref(0)
 
+const scale = computed(() => {
+  const contentWidth = props.width || nativeWidth.value
+  const widthScale = Math.min(rootWidth.value, contentWidth) / contentWidth
+
+  if (!props.maxHeight) {
+    return widthScale
+  }
+
+  const heightScale = props.maxHeight / nativeHeight.value
+
+  return Math.min(widthScale, heightScale)
+})
+
 const style = computed(() => {
+  const height = props.maxHeight
+    ? Math.min(computedHeight.value, props.maxHeight)
+    : computedHeight.value
+
   return {
-    height: computedHeight.value + 'px',
+    height: height + 'px',
   }
 })
 
 const innerStyle = computed(() => {
+  const currentScale = scale.value
+  const contentWidth = props.width || nativeWidth.value
+  const scaledWidth = contentWidth * currentScale
+  const scaledHeight = nativeHeight.value * currentScale
+
+  const leftOffset = Math.max(0, (rootWidth.value - scaledWidth) / 2)
+
+  const useVerticalCentering =
+    props.maxHeight && nativeHeight.value * scale.value > props.maxHeight
+  const topOffset = useVerticalCentering
+    ? (props.maxHeight - scaledHeight) / 2
+    : 0
+
   return {
     width: props.width ? props.width + 'px' : 'auto',
-    transform: `scale(${rootWidth.value / nativeWidth.value})`,
+    transform: `translate(${leftOffset}px, ${topOffset}px) scale(${currentScale})`,
   }
 })
 
 useAnimationFrame(() => {
-  if (root.value) {
-    rootWidth.value = root.value.offsetWidth
+  if (rootEl.value) {
+    rootWidth.value = rootEl.value.offsetWidth
   }
   if (inner.value) {
     const rect = inner.value.getBoundingClientRect()

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

@@ -13,4 +13,5 @@ import Highlight from './Highlight/index.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
 import ScrollBoundary from './ScrollBoundary/index.vue.js';
 import InfoBox from './InfoBox/index.vue.js';
-export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, ScrollBoundary, InfoBox, };
+import Pagination from './Pagination/index.vue.js';
+export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, ScrollBoundary, InfoBox, Pagination, };

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

@@ -13,6 +13,7 @@ import Highlight from "./Highlight/index.vue";
 import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
 import ScrollBoundary from "./ScrollBoundary/index.vue";
 import InfoBox from "./InfoBox/index.vue";
+import Pagination from "./Pagination/index.vue";
 export {
   ItemIcon,
   ShortcutIndicator,
@@ -28,5 +29,6 @@ export {
   Highlight,
   ViewportBlockingRect,
   ScrollBoundary,
-  InfoBox
+  InfoBox,
+  Pagination
 };

package/dist/runtime/composables/defineBlokkli.d.ts

@@ -1,6 +1,6 @@
 import type { BlockDefinitionInput, BlockDefinitionOptionsInput, DefineBlokkliContext } from '#blokkli/types';
-import type { GlobalOptionsKey } from '#blokkli/generated-types';
+import type { GlobalOptionsKey } from '#blokkli-build/generated-types';
 /**
  * Define a blokkli component.
  */
-export declare function defineBlokkli<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined>(config: BlockDefinitionInput<T, G>): DefineBlokkliContext<T, G>;
+export declare function defineBlokkli<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined>(arg: BlockDefinitionInput<T, G>): DefineBlokkliContext<T, G>;