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

package/dist/runtime/components/Edit/Features/Publish/Dialog/ScheduleDate.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="bk-schedule-date">
+    <div class="bk-schedule-date-picker">
+      <FormDatepicker
+        v-model="selectedDate"
+        :min="minDate"
+        :disabled="disabled"
+        :error="!!error"
+      />
+    </div>
+    <div v-if="selectedDate" class="bk-schedule-date-time">
+      <div v-if="formattedDateTime" class="bk-schedule-date-formatted">
+        {{ formattedDateTime }}
+      </div>
+      <div class="bk-schedule-date-time-input">
+        <input
+          id="schedule-time"
+          v-model="selectedTime"
+          type="time"
+          class="bk-form-input"
+          :disabled="disabled"
+          :class="{
+  'bk-is-invalid': error
+}"
+        />
+        <button
+          type="button"
+          class="bk-button bk-schedule-date-time-button bk-is-icon-only"
+          :disabled="disabled"
+          @click="decrementHour"
+        >
+          <Icon name="minus" />
+        </button>
+        <button
+          type="button"
+          class="bk-button bk-schedule-date-time-button bk-is-icon-only"
+          :disabled="disabled"
+          @click="incrementHour"
+        >
+          <Icon name="plus" />
+        </button>
+      </div>
+
+      <div class="bk-schedule-date-presets">
+        <button
+          type="button"
+          class="bk-button bk-is-small"
+          :disabled="disabled"
+          @click="setTomorrow"
+        >
+          {{ $t("publishScheduleTomorrow", "Tomorrow") }}
+        </button>
+        <button
+          type="button"
+          class="bk-button bk-is-small"
+          :disabled="disabled"
+          @click="setInSevenDays"
+        >
+          {{ $t("publishScheduleInSevenDays", "In 7 days") }}
+        </button>
+        <button
+          type="button"
+          class="bk-button bk-is-small"
+          :disabled="disabled"
+          @click="setNextMonday"
+        >
+          {{ $t("publishScheduleNextMonday", "Next Monday") }}
+        </button>
+      </div>
+      <div
+        class="bk-schedule-date-info"
+        v-text="
+  $t(
+    'publishScheduledInfo',
+    'You can still make changes until the scheduled publication date.'
+  )
+"
+      />
+      <div v-if="error" class="bk-schedule-date-error">
+        {{ error }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, useBlokkli } from "#imports";
+import { FormDatepicker, Icon } from "#blokkli/components";
+const { $t, ui } = useBlokkli();
+defineProps({
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false }
+});
+const modelValue = defineModel({ type: String });
+const selectedDate = ref("");
+const selectedTime = ref("12:00");
+const formattedDateTime = computed(() => {
+  if (!selectedDate.value || !selectedTime.value) {
+    return "";
+  }
+  const dateTimeString = `${selectedDate.value}T${selectedTime.value}:00`;
+  const date = new Date(dateTimeString);
+  return ui.formatDate(date, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+});
+if (modelValue.value) {
+  const date = new Date(modelValue.value);
+  selectedDate.value = formatDate(date);
+  selectedTime.value = formatTime(date);
+}
+const minDate = computed(() => {
+  const today = /* @__PURE__ */ new Date();
+  return formatDate(today);
+});
+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 formatTime(date) {
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${hours}:${minutes}`;
+}
+watch([selectedDate, selectedTime], () => {
+  if (!selectedDate.value) {
+    modelValue.value = void 0;
+    return;
+  }
+  const dateTimeString = `${selectedDate.value}T${selectedTime.value}:00`;
+  const date = new Date(dateTimeString);
+  modelValue.value = date.toISOString();
+});
+watch(modelValue, (newValue) => {
+  if (!newValue) {
+    selectedDate.value = "";
+    selectedTime.value = "12:00";
+    return;
+  }
+  const date = new Date(newValue);
+  const newDate = formatDate(date);
+  const newTime = formatTime(date);
+  if (newDate !== selectedDate.value || newTime !== selectedTime.value) {
+    selectedDate.value = newDate;
+    selectedTime.value = newTime;
+  }
+});
+function setTomorrow() {
+  const tomorrow = /* @__PURE__ */ new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  selectedDate.value = formatDate(tomorrow);
+}
+function setInSevenDays() {
+  const date = /* @__PURE__ */ new Date();
+  date.setDate(date.getDate() + 7);
+  selectedDate.value = formatDate(date);
+}
+function setNextMonday() {
+  const today = /* @__PURE__ */ new Date();
+  const dayOfWeek = today.getDay();
+  const daysUntilMonday = dayOfWeek === 0 ? 1 : 8 - dayOfWeek;
+  const nextMonday = /* @__PURE__ */ new Date();
+  nextMonday.setDate(today.getDate() + daysUntilMonday);
+  selectedDate.value = formatDate(nextMonday);
+}
+function incrementHour() {
+  const [hours = 0, minutes = 0] = selectedTime.value.split(":").map(Number);
+  const newHours = (hours + 1) % 24;
+  selectedTime.value = `${String(newHours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+function decrementHour() {
+  const [hours = 0, minutes = 0] = selectedTime.value.split(":").map(Number);
+  const newHours = hours === 0 ? 23 : hours - 1;
+  selectedTime.value = `${String(newHours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+</script>

package/dist/runtime/components/Edit/Features/Publish/Dialog/ScheduleDate.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    error?: string;
+};
+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/Features/Publish/Dialog/Summary.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="bk-publish-summary">
+    <!-- Current State -->
+    <div class="bk-publish-summary-state">
+      <div class="bk-publish-summary-state-icon" :class="currentStateClass">
+        <Icon :name="currentStateIcon" />
+      </div>
+      <div class="bk-publish-summary-state-label">
+        {{ currentStateLabel }}
+      </div>
+    </div>
+
+    <!-- Arrow -->
+    <div class="bk-publish-summary-arrow">
+      <Icon name="arrow-right" />
+    </div>
+
+    <!-- Action -->
+    <div class="bk-publish-summary-action">
+      <div class="bk-publish-summary-action-icon" :class="actionClass">
+        <Icon :name="actionIcon" />
+      </div>
+      <div class="bk-publish-summary-action-label">
+        {{ actionLabel }}
+      </div>
+    </div>
+
+    <!-- Arrow -->
+    <div class="bk-publish-summary-arrow">
+      <Icon name="arrow-right" />
+    </div>
+
+    <!-- Result State -->
+    <div class="bk-publish-summary-state" :class="resultStateClass">
+      <div>
+        <Icon :name="resultStateIcon" />
+      </div>
+      <div class="bk-publish-summary-state-label">
+        {{ resultStateLabel }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  isPublished: { type: Boolean, required: true },
+  mode: { type: String, required: true },
+  currentStateLabel: { type: String, required: true },
+  actionLabel: { type: String, required: true },
+  resultStateLabel: { type: String, required: true }
+});
+const currentStateIcon = computed(
+  () => props.isPublished ? "eye" : "eye-off"
+);
+const currentStateClass = computed(
+  () => props.isPublished ? "bk-is-published" : "bk-is-unpublished"
+);
+const resultStateIcon = computed(() => {
+  if (props.mode === "save") {
+    return "eye-off";
+  }
+  return "eye";
+});
+const resultStateClass = computed(() => {
+  if (props.mode === "save") {
+    return "bk-is-unpublished";
+  }
+  return "bk-is-published";
+});
+const actionIcon = computed(() => {
+  if (props.mode === "save") return "save";
+  if (props.mode === "scheduled") return "calendar-clock";
+  return "publish";
+});
+const actionClass = computed(() => {
+  if (props.mode === "save") return "bk-is-save";
+  if (props.mode === "scheduled") return "bk-is-scheduled";
+  return "bk-is-publish";
+});
+</script>

package/dist/runtime/components/Edit/Features/Publish/Dialog/Summary.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    isPublished: boolean;
+    mode: 'immediate' | 'scheduled' | 'save';
+    currentStateLabel: string;
+    actionLabel: string;
+    resultStateLabel: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;