@blokkli/editor 2.0.0-alpha.14 → 2.0.0-alpha.16

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

@@ -4,21 +4,14 @@
     :title="publishLabel"
     :description="publishDescription"
     :disabled="!mutations.length || !canEdit"
-    type="success"
+    :type="isScheduled ? 'yellow' : 'success'"
     :weight="0"
     :icon="icon"
     @click="onMenuClick"
   />
   <Teleport to="body">
     <BlokkliTransition name="slide-up">
-      <PublishDialog
-        v-if="showDialog"
-        v-model:states="additionalEditStates"
-        v-model:revision-message="revisionMessage"
-        v-model:should-publish="shouldPublish"
-        @close="showDialog = false"
-        @submit="onSubmit"
-      />
+      <PublishDialog v-if="showDialog" @close="onClose" @submit="onSubmit" />
     </BlokkliTransition>
   </Teleport>
 </template>
@@ -29,11 +22,13 @@ import {
   defineBlokkliFeature,
   computed,
   useRoute,
-  ref
+  ref,
+  nextTick
 } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
 import { BlokkliTransition } from "#blokkli/components";
 import PublishDialog from "./Dialog/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { adapter, settings } = defineBlokkliFeature({
   id: "publish",
   icon: "publish",
@@ -55,26 +50,38 @@ const { state, $t, broadcast, context, eventBus } = useBlokkli();
 const { mutations, canEdit, mutateWithLoadingState } = state;
 const hasPublishOptions = !!adapter.getPublishOptions;
 const isPublished = computed(() => !!state.entity.value.status);
+const isScheduled = computed(
+  () => !!state.publishOptions.value.publishOn
+);
 const showDialog = ref(false);
-const additionalEditStates = ref([]);
-const shouldPublish = ref(!!state.entity.value.status);
-const revisionMessage = ref("");
 const publishLabel = computed(() => {
   const suffix = hasPublishOptions ? "..." : "";
+  if (isScheduled.value) {
+    return $t("publishManageSchedule", "Manage scheduling") + suffix;
+  }
   if (isPublished.value) {
     return (settings.value.closeAfterPublish ? $t("publishAndCloseLabel", "Publish & Close") : $t("publishLabel", "Publish")) + suffix;
   }
   return (settings.value.closeAfterPublish ? $t("publishAndCloseLabelUnpublished", "Save & Close") : $t("publishLabelUnpublished", "Save")) + suffix;
 });
-const publishDescription = computed(
-  () => isPublished.value ? $t("publishDescription", "Publish all changes.") : $t(
+const publishDescription = computed(() => {
+  if (isScheduled.value) {
+    return $t(
+      "publishDescriptionScheduled",
+      "View or change the scheduled publication"
+    );
+  }
+  return isPublished.value ? $t("publishDescription", "Publish all changes.") : $t(
     "publishDescriptionUnpublished",
     "Save all changes while keeping page unpublished"
-  )
-);
-const icon = computed(
-  () => isPublished.value ? "publish" : "save"
-);
+  );
+});
+const icon = computed(() => {
+  if (state.publishOptions.value?.publishOn) {
+    return "calendar-clock";
+  }
+  return isPublished.value ? "publish" : "save";
+});
 const onMenuClick = async () => {
   if (hasPublishOptions) {
     showDialog.value = true;
@@ -108,6 +115,13 @@ function onSubmit() {
     window.location.href = route.path;
   }
 }
+async function onClose() {
+  await nextTick();
+  showDialog.value = false;
+}
+onBlokkliEvent("publish:show-dialog", () => {
+  showDialog.value = true;
+});
 </script>
 
 <script>

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

@@ -85,13 +85,24 @@ const itemDropdownItems = computed(() => {
         )
       }
     ];
+  } else if (selection.hasHostSelected.value) {
+    return [
+      {
+        id: "select-all-blocks",
+        label: $t("selectAllBlocks", "Select all blocks")
+      }
+    ];
   }
   return [];
 });
 function onSelectDropdownItem(item) {
-  if (item.id === "select-all-of-bundle" && selectedBundle.value) {
-    const uuids = state.getAllUuids(selectedBundle.value);
-    eventBus.emit("select", uuids);
+  if (item.id === "select-all-of-bundle") {
+    if (selectedBundle.value) {
+      const uuids = state.getAllUuids(selectedBundle.value);
+      eventBus.emit("select", uuids);
+    }
+  } else if (item.id === "select-all-blocks") {
+    selectAllBlocks();
   }
 }
 const artboardElement = ui.artboardElement();
@@ -226,6 +237,12 @@ const visuallySelectBlocks = (toggleUuid) => {
   }
   return filter(encompassingRect);
 };
+function selectAllBlocks() {
+  eventBus.emit(
+    "select:end",
+    getSelectAllUuids(dom.getAllBlocks(), selection.blocks.value)
+  );
+}
 onBlokkliEvent("select:shiftToggle", (uuid) => {
   const uuids = visuallySelectBlocks(uuid);
   if (uuids) {
@@ -263,10 +280,7 @@ onBlokkliEvent("keyPressed", (e) => {
       return;
     }
     e.originalEvent.preventDefault();
-    eventBus.emit(
-      "select:end",
-      getSelectAllUuids(dom.getAllBlocks(), selection.blocks.value)
-    );
+    selectAllBlocks();
   }
 });
 </script>

package/dist/runtime/components/Edit/Form/Datepicker/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="bk-datepicker"
+    :class="{
+  'bk-is-invalid': error
+}"
+  >
+    <div class="bk-datepicker-header">
+      <button
+        type="button"
+        class="bk-datepicker-nav"
+        :disabled="!canGoPrevious"
+        @click="previousMonth"
+      >
+        <Icon name="arrow-left" />
+      </button>
+      <div class="bk-datepicker-title">{{ monthName }} {{ currentYear }}</div>
+      <button
+        type="button"
+        class="bk-datepicker-nav"
+        :disabled="!canGoNext"
+        @click="nextMonth"
+      >
+        <Icon name="arrow-right" />
+      </button>
+    </div>
+    <div class="bk-datepicker-weekdays">
+      <div v-for="day in weekdays" :key="day" class="bk-datepicker-weekday">
+        {{ day }}
+      </div>
+    </div>
+    <div class="bk-datepicker-days">
+      <button
+        v-for="day in calendarDays"
+        :key="day.key"
+        type="button"
+        class="bk-datepicker-day"
+        :disabled="disabled || day.isDisabled"
+        @click="selectDate(day)"
+      >
+        <div
+          class="bk-datepicker-day-inner"
+          :class="{
+  'bk-is-other-month': !day.isCurrentMonth,
+  'bk-is-today': day.isToday,
+  'bk-is-selected': day.isSelected,
+  'bk-is-disabled': day.isDisabled
+}"
+        >
+          {{ day.day }}
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  min: { type: String, required: false },
+  max: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: Boolean, required: false }
+});
+const { ui } = useBlokkli();
+const modelValue = defineModel({ type: String });
+const weekdays = computed(() => {
+  const formatter = new Intl.DateTimeFormat(ui.locale.value, {
+    weekday: "short"
+  });
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(2023, 0, 2 + i);
+    days.push(formatter.format(date));
+  }
+  return days;
+});
+const monthNames = computed(() => {
+  const formatter = new Intl.DateTimeFormat(ui.locale.value, { month: "long" });
+  const months = [];
+  for (let i = 0; i < 12; i++) {
+    const date = new Date(2023, i, 1);
+    months.push(formatter.format(date));
+  }
+  return months;
+});
+const initDate = modelValue.value ? new Date(modelValue.value) : /* @__PURE__ */ new Date();
+const currentMonth = ref(initDate.getMonth());
+const currentYear = ref(initDate.getFullYear());
+const monthName = computed(() => monthNames.value[currentMonth.value]);
+const canGoPrevious = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.min) {
+    return true;
+  }
+  const prevMonth = currentMonth.value === 0 ? 11 : currentMonth.value - 1;
+  const prevYear = currentMonth.value === 0 ? currentYear.value - 1 : currentYear.value;
+  const lastDayOfPrevMonth = new Date(prevYear, prevMonth + 1, 0);
+  const lastDayString = formatDate(lastDayOfPrevMonth);
+  return lastDayString >= props.min;
+});
+const canGoNext = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.max) {
+    return true;
+  }
+  const nextMonth2 = currentMonth.value === 11 ? 0 : currentMonth.value + 1;
+  const nextYear = currentMonth.value === 11 ? currentYear.value + 1 : currentYear.value;
+  const firstDayOfNextMonth = new Date(nextYear, nextMonth2, 1);
+  const firstDayString = formatDate(firstDayOfNextMonth);
+  return firstDayString <= props.max;
+});
+function previousMonth() {
+  if (currentMonth.value === 0) {
+    currentMonth.value = 11;
+    currentYear.value--;
+  } else {
+    currentMonth.value--;
+  }
+}
+function nextMonth() {
+  if (currentMonth.value === 11) {
+    currentMonth.value = 0;
+    currentYear.value++;
+  } else {
+    currentMonth.value++;
+  }
+}
+const calendarDays = computed(() => {
+  const firstDay = new Date(currentYear.value, currentMonth.value, 1);
+  const lastDay = new Date(currentYear.value, currentMonth.value + 1, 0);
+  let firstDayOfWeek = firstDay.getDay() - 1;
+  if (firstDayOfWeek < 0) firstDayOfWeek = 6;
+  const days = [];
+  const prevMonthLastDay = new Date(currentYear.value, currentMonth.value, 0);
+  for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+    const day = prevMonthLastDay.getDate() - i;
+    const date = new Date(currentYear.value, currentMonth.value - 1, day);
+    days.push(createCalendarDay(date, false));
+  }
+  for (let day = 1; day <= lastDay.getDate(); day++) {
+    const date = new Date(currentYear.value, currentMonth.value, day);
+    days.push(createCalendarDay(date, true));
+  }
+  const remainingDays = 42 - days.length;
+  for (let day = 1; day <= remainingDays; day++) {
+    const date = new Date(currentYear.value, currentMonth.value + 1, day);
+    days.push(createCalendarDay(date, false));
+  }
+  return days;
+});
+function createCalendarDay(date, isCurrentMonth) {
+  const dateString = formatDate(date);
+  const today = /* @__PURE__ */ new Date();
+  const todayString = formatDate(today);
+  let isDisabled = false;
+  if (props.min && dateString < props.min) {
+    isDisabled = true;
+  }
+  if (props.max && dateString > props.max) {
+    isDisabled = true;
+  }
+  return {
+    day: date.getDate(),
+    date,
+    dateString,
+    key: dateString,
+    isCurrentMonth,
+    isToday: dateString === todayString,
+    isSelected: dateString === modelValue.value,
+    isDisabled
+  };
+}
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function selectDate(day) {
+  if (day.isDisabled || props.disabled) {
+    return;
+  }
+  modelValue.value = day.dateString;
+}
+watch(modelValue, (newValue) => {
+  if (newValue) {
+    const date = new Date(newValue);
+    currentMonth.value = date.getMonth();
+    currentYear.value = date.getFullYear();
+  }
+});
+</script>

package/dist/runtime/components/Edit/Form/Datepicker/index.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    error?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -54,6 +54,7 @@ import logoUrl from "./blokkli.png";
 const emit = defineEmits(["close"]);
 const DEBUG_ICONS = false;
 const DEBUG_GAME = false;
+const INIT_EATEN = 0;
 const largeIconSize = 32;
 const blackColor = "black";
 const worldWidth = 7 * 3;
@@ -124,7 +125,7 @@ let snakeCanvas = null;
 let logoCanvas = null;
 let lastScore = -1;
 let lastBlocksEaten = -1;
-const cellMoveDuration = 200;
+const cellMoveDuration = 250;
 function generateFood() {
   let newFood;
   do {
@@ -211,6 +212,12 @@ function resetGame() {
     score.value = 10 * 100;
     gameStarted.value = true;
   }
+  if (INIT_EATEN) {
+    for (let i = 0; i < INIT_EATEN; i++) {
+      const head = snake.value[0];
+      snake.value.push({ x: head.x - i - 1, y: head.y });
+    }
+  }
   generateFood();
 }
 function update(currentTime) {

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

@@ -2,6 +2,7 @@ import AddListItem from './AddListItem/index.vue.js';
 import ConfigForm from './PluginConfigForm/index.vue.js';
 import DialogModal from './Dialog/index.vue.js';
 import DiffViewerState from './DiffViewer/State.vue.js';
+import FormDatepicker from './Form/Datepicker/index.vue.js';
 import FormGroup from './Form/Group/index.vue.js';
 import FormItem from './Form/Item/index.vue.js';
 import FormOverlay from './FormOverlay/index.vue.js';
@@ -26,4 +27,4 @@ import BlokkliTransition from './Transition/index.vue.js';
 import Sortli from './Sortli/index.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
 import AddListItemIcon from './AddListItemIcon/index.vue.js';
-export { AddListItem, AddListItemIcon, ConfigForm, DialogModal, DiffViewerState, FormGroup, FormItem, FormOverlay, FormRadio, FormSelect, FormText, FormTextarea, FormToggle, FormRadioTabs, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScrollBoundary, ShortcutIndicator, Sortli, ViewportBlockingRect, BlokkliTransition, };
+export { AddListItem, AddListItemIcon, ConfigForm, DialogModal, DiffViewerState, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormSelect, FormText, FormTextarea, FormToggle, FormRadioTabs, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScrollBoundary, ShortcutIndicator, Sortli, ViewportBlockingRect, BlokkliTransition, };

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

@@ -2,6 +2,7 @@ import AddListItem from "./AddListItem/index.vue";
 import ConfigForm from "./PluginConfigForm/index.vue";
 import DialogModal from "./Dialog/index.vue";
 import DiffViewerState from "./DiffViewer/State.vue";
+import FormDatepicker from "./Form/Datepicker/index.vue";
 import FormGroup from "./Form/Group/index.vue";
 import FormItem from "./Form/Item/index.vue";
 import FormOverlay from "./FormOverlay/index.vue";
@@ -32,6 +33,7 @@ export {
   ConfigForm,
   DialogModal,
   DiffViewerState,
+  FormDatepicker,
   FormGroup,
   FormItem,
   FormOverlay,

package/dist/runtime/composables/defineBlokkli.js

@@ -59,7 +59,7 @@ export function defineBlokkli(arg) {
         ...editContext?.mutatedOptions[uuid] || {}
       };
     }
-    const optionKey = bundle === BUNDLE_BLOKKLI_FRAGMENT ? "fragment:" + item?.value.fragmentName + "__default" : identifier;
+    const optionKey = bundle === BUNDLE_BLOKKLI_FRAGMENT ? "fragment:" + item?.value.fragmentName : identifier;
     const runtimeOptionDefinitions = (editContext?.definitions.runtimeOptions.value || OPTIONS)[optionKey] || {};
     const result = Object.entries(runtimeOptionDefinitions).reduce((acc, [key, v]) => {
       const definition = v;