@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

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/Form/Radio/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div class="bk-form-label">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </div>
+    <div>
+      <label v-for="option in options" :key="option.value" class="bk-radio">
+        <input
+          v-model="value"
+          type="radio"
+          :value="option.value"
+          :required
+          :name="id"
+          :disabled
+        />
+        <span>{{ option.label }}</span>
+      </label>
+    </div>
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  description: { type: String, required: false }
+});
+const value = defineModel({ type: String });
+</script>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    required?: boolean;
+    disabled?: boolean;
+    description?: 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/Form/RadioTabs/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div class="bk-form-label">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </div>
+    <div
+      class="bk-radio-tabs"
+      :class="scheme ? 'bk-scheme-' + scheme : void 0"
+    >
+      <label v-for="option in options" :key="option.value">
+        <input
+          v-model="value"
+          type="radio"
+          :value="option.value"
+          :required
+          :name="id"
+          :disabled
+        />
+        <span>{{ option.label }}</span>
+      </label>
+    </div>
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  description: { type: String, required: false },
+  scheme: { type: String, required: false }
+});
+const value = defineModel({ type: String });
+</script>

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

@@ -0,0 +1,22 @@
+import type { ThemeColorName } from '#blokkli/types/theme';
+type __VLS_Props = {
+    id: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+    scheme?: ThemeColorName;
+};
+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/Form/Select/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <label class="bk-form-label" :for="id">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </label>
+    <select :id v-model="value" class="bk-form-input" :required :disabled>
+      <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  description: { type: String, required: false }
+});
+const value = defineModel({ type: String });
+</script>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    required?: boolean;
+    disabled?: boolean;
+    description?: 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/Form/Text/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <label class="bk-form-label" :for="id">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </label>
+    <input
+      :id
+      v-model.lazy="value"
+      type="text"
+      class="bk-form-input"
+      :placeholder
+      :required
+      :disabled
+      :minlength
+      :maxlength
+    />
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  minlength: { type: [String, Number], required: false },
+  maxlength: { type: [String, Number], required: false }
+});
+const value = defineModel({ type: String });
+</script>

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    minlength?: string | number;
+    maxlength?: string | number;
+};
+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/Form/Textarea/index.vue

@@ -1,15 +1,18 @@
 <template>
   <div>
-    <label class="bk-form-label">
-      {{ label }}
+    <label class="bk-form-label" :for="id">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
     </label>
     <textarea
-      v-model="value"
+      :id
+      v-model.lazy="value"
       class="bk-form-input"
-      :placeholder="placeholder"
+      :placeholder
       :required
       :disabled
-      rows="5"
+      :rows="rows ?? 5"
+      :minlength
+      :maxlength
     />
     <div v-if="description" class="bk-form-description">{{ description }}</div>
   </div>
@@ -17,11 +20,15 @@
 
 <script setup>
 defineProps({
+  id: { type: String, required: true },
   label: { type: String, required: true },
   description: { type: String, required: false },
   placeholder: { type: String, required: false },
   required: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  minlength: { type: [String, Number], required: false },
+  maxlength: { type: [String, Number], required: false },
+  rows: { type: [String, Number], required: false }
 });
 const value = defineModel({ type: String });
 </script>

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

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    id: string;
     label: string;
     description?: string;
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
+    minlength?: string | number;
+    maxlength?: string | number;
+    rows?: string | number;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bk-form-overlay"
+    class="bk-form-overlay bk-vars"
     @click.stop
     @mousedown.stop
     @keyup.stop

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

@@ -0,0 +1,123 @@
+<template>
+  <Teleport to="body">
+    <div id="bk-indicators" class="bk bk-indicators" :style>
+      <div id="bk-indicators-left" />
+      <div id="bk-indicators-right" />
+      <div class="bk-indicators-hovered" :style="hoveredStyle" />
+      <div class="bk-indicators-highlighted" :style="highlightedStyle" />
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { computed, useBlokkli, watch, ref } from "#imports";
+const { ui, dom, indicators, selection } = useBlokkli();
+const artboardElement = ui.artboardElement();
+const highlighted = ref(null);
+const hasIndicators = computed(
+  () => !!indicators.indicators.value.length || !!highlighted.value
+);
+const style = computed(() => {
+  const offset = ui.artboardOffset.value;
+  return {
+    width: ui.artboardSize.value.width + "px",
+    height: ui.artboardSize.value.height + "px",
+    transform: `translate(${offset.x}px, ${offset.y}px) scale(${ui.artboardScale.value})`
+  };
+});
+const hoveredStyle = computed(() => {
+  if (indicators.hovered.value && hasIndicators.value) {
+    const rect = dom.getBlockRect(indicators.hovered.value, true);
+    if (rect) {
+      return {
+        width: rect.width.toString() + "px",
+        height: rect.height.toString() + "px",
+        transform: `translate(${rect.x}px, ${rect.y}px)`
+      };
+    }
+  }
+  return {
+    visibility: "hidden"
+  };
+});
+const highlightedStyle = computed(() => {
+  if (highlighted.value) {
+    return {
+      width: highlighted.value.width.toString() + "px",
+      height: highlighted.value.height.toString() + "px",
+      transform: `translate(${highlighted.value.x}px, ${highlighted.value.y}px)`
+    };
+  }
+  return {
+    visibility: "hidden"
+  };
+});
+const HEIGHT = 30;
+function snapToAnchorGrid(y) {
+  return Math.ceil(y / HEIGHT) * HEIGHT;
+}
+const prevRects = /* @__PURE__ */ new Map();
+let lastFullUpdate = 0;
+onBlokkliEvent("animationFrame", function(ctx) {
+  if (!hasIndicators.value) {
+    return;
+  }
+  const items = indicators.indicators.value;
+  const taken = /* @__PURE__ */ new Set();
+  const forceRefresh = ctx.time - lastFullUpdate > 1e3;
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (!item) {
+      continue;
+    }
+    const rect = dom.getBlockRect(item.uuid, forceRefresh);
+    if (!rect) {
+      prevRects.delete(item.uuid);
+      continue;
+    }
+    let y = snapToAnchorGrid(Math.round(rect.y));
+    while (taken.has(y)) {
+      y += HEIGHT;
+    }
+    taken.add(y);
+    const style2 = `translateY(${y}px)`;
+    if (prevRects.get(item.uuid) !== y) {
+      prevRects.set(item.uuid, y);
+      item.element.style.transform = style2;
+    }
+  }
+  if (forceRefresh) {
+    lastFullUpdate = ctx.time;
+  }
+});
+onBlokkliEvent("view-option:toggle", () => {
+  prevRects.clear();
+});
+onBlokkliEvent("state:reloaded", () => {
+  prevRects.clear();
+});
+onBlokkliEvent("scrollIntoView", (e) => {
+  if ("element" in e) {
+    if (artboardElement.contains(e.element)) {
+      highlighted.value = ui.getAbsoluteElementRect(e.element);
+    } else {
+      highlighted.value = {
+        x: 0,
+        y: 0,
+        width: ui.artboardSize.value.width,
+        height: ui.artboardSize.value.height
+      };
+    }
+  }
+});
+onBlokkliEvent("window:clickAway", function() {
+  highlighted.value = null;
+});
+watch(indicators.indicators, function() {
+  prevRects.clear();
+});
+watch(selection.uuids, function() {
+  highlighted.value = null;
+});
+</script>

package/dist/runtime/components/Edit/Indicators/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/ItemIcon/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="markup" class="bk-blokkli-item-icon" v-html="markup" />
-  <div v-else-if="bundle === 'from_library'" class="bk-blokkli-item-icon">
+  <div v-else-if="bundle === BUNDLE_FROM_LIBRARY" class="bk-blokkli-item-icon">
     <Icon name="reusable" />
   </div>
   <div v-else class="bk-blokkli-item-icon">
@@ -11,6 +11,7 @@
 <script setup>
 import { computed, useBlokkli } from "#imports";
 import { Icon } from "#blokkli/components";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const props = defineProps({
   bundle: { type: String, required: false }
 });