@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -34,99 +34,79 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed, ref, useBlokkli } from '#imports'
-import { Icon } from '#blokkli/components'
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-import { BK_VISIBLE_LANGUAGES } from '#blokkli/helpers/symbols'
-
-const { $t, state } = useBlokkli()
-
-const props = defineProps<{
-  label: string
-  property: string
-  modelValue?: string
-  options: { value: string; label: string }[]
-  isGrouped?: boolean
-}>()
-
-const emit = defineEmits(['update:modelValue'])
-
-const isOpen = ref(false)
-
-const optionOrder = computed(() => props.options.map((v) => v.value))
-
-const checked = computed<string[]>({
+<script setup>
+import { computed, ref, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+import defineCommands from "#blokkli/helpers/composables/defineCommands";
+import { BK_VISIBLE_LANGUAGES } from "#blokkli/helpers/symbols";
+const { $t, state } = useBlokkli();
+const props = defineProps({
+  label: { type: String, required: true },
+  property: { type: String, required: true },
+  modelValue: { type: String, required: false },
+  options: { type: Array, required: true },
+  isGrouped: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const isOpen = ref(false);
+const optionOrder = computed(() => props.options.map((v) => v.value));
+const checked = computed({
   get() {
-    return (props.modelValue || '').split(',').filter(Boolean)
-  },
-  set(newValue: string[]) {
-    const storedValue = newValue
-      .filter(Boolean)
-      .sort((a, b) => {
-        // Sort the options keys as defined in the definition.
-        // That way we can prevent persisting changes if only the order of
-        // the keys would change.
-        return optionOrder.value.indexOf(a) - optionOrder.value.indexOf(b)
-      })
-      .join(',')
-    emit('update:modelValue', storedValue)
+    return (props.modelValue || "").split(",").filter(Boolean);
   },
-})
-
+  set(newValue) {
+    const storedValue = newValue.filter(Boolean).sort((a, b) => {
+      return optionOrder.value.indexOf(a) - optionOrder.value.indexOf(b);
+    }).join(",");
+    emit("update:modelValue", storedValue);
+  }
+});
 const visibleLabel = computed(() => {
   if (props.property === BK_VISIBLE_LANGUAGES && !checked.value.length) {
-    return $t('optionBkVisibleLanguagesAll', 'All languages')
+    return $t("optionBkVisibleLanguagesAll", "All languages");
   }
-  return props.label
-})
-
-const toggle = (key: string) => {
+  return props.label;
+});
+const toggle = (key) => {
   if (!checked.value.includes(key)) {
-    checked.value = [...checked.value, key]
+    checked.value = [...checked.value, key];
   } else {
-    checked.value = checked.value.filter((v) => v !== key)
+    checked.value = checked.value.filter((v) => v !== key);
   }
-}
-
+};
 defineCommands(() => {
-  if (state.editMode.value !== 'editing') {
-    return
+  if (state.editMode.value !== "editing") {
+    return;
   }
   return props.options.map((option) => {
     if (checked.value.includes(option.value)) {
       return {
-        id: 'options:' + props.property + ':select:' + option.value,
+        id: "options:" + props.property + ":select:" + option.value,
         label: $t(
-          'optionsCommand.unselectCheckboxValue',
-          'Unselect "@value" in "@option"',
-        )
-          .replace('@option', props.label)
-          .replace('@value', option.label),
-        group: 'selection',
-        icon: 'form',
-        callback: () => toggle(option.value),
-      }
+          "optionsCommand.unselectCheckboxValue",
+          'Unselect "@value" in "@option"'
+        ).replace("@option", props.label).replace("@value", option.label),
+        group: "selection",
+        icon: "form",
+        callback: () => toggle(option.value)
+      };
     }
-
     return {
-      id: 'options:' + props.property + ':unselect:' + option.value,
+      id: "options:" + props.property + ":unselect:" + option.value,
       label: $t(
-        'optionsCommand.selectCheckboxValue',
-        'Select "@value" in "@option"',
-      )
-        .replace('@option', props.label)
-        .replace('@value', option.label),
-      group: 'selection',
-      icon: 'form',
-      callback: () => toggle(option.value),
-    }
-  })
-})
+        "optionsCommand.selectCheckboxValue",
+        'Select "@value" in "@option"'
+      ).replace("@option", props.label).replace("@value", option.label),
+      group: "selection",
+      icon: "form",
+      callback: () => toggle(option.value)
+    };
+  });
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'OptionsFormCheckboxes',
-}
+  name: "OptionsFormCheckboxes"
+};
 </script>

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

@@ -0,0 +1,24 @@
+declare const _default: import("vue").DefineComponent<{
+    label: string;
+    property: string;
+    modelValue?: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    isGrouped?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    property: string;
+    modelValue?: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    isGrouped?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -4,35 +4,32 @@
     <div
       class="bk-blokkli-item-options-color-preview"
       :style="{
-        backgroundColor: modelValue,
-      }"
+  backgroundColor: modelValue
+}"
     />
     <div class="bk-blokkli-item-options-color-label">{{ text }}</div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed } from '#imports'
-
-const props = defineProps<{
-  label: string
-  modelValue?: string
-}>()
-
-const emit = defineEmits(['update:modelValue'])
-
-const text = computed<string>({
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  label: { type: String, required: true },
+  modelValue: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const text = computed({
   get() {
-    return props.modelValue || ''
-  },
-  set(v: string | number | undefined) {
-    emit('update:modelValue', (v === undefined ? '' : v).toString())
+    return props.modelValue || "";
   },
-})
+  set(v) {
+    emit("update:modelValue", (v === void 0 ? "" : v).toString());
+  }
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'OptionsFormColor',
-}
+  name: "OptionsFormColor"
+};
 </script>

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

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    label: string;
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="bk-blokkli-item-options-date">
+    <input
+      v-model="text"
+      type="datetime-local"
+      :placeholder="label"
+      :min
+      :max
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  label: { type: String, required: true },
+  min: { type: String, required: false, default: "" },
+  max: { type: String, required: false, default: "" },
+  modelValue: { type: String, required: false, default: "" }
+});
+const emit = defineEmits(["update:modelValue"]);
+const text = computed({
+  get() {
+    return props.modelValue || "";
+  },
+  set(v) {
+    emit("update:modelValue", (v === void 0 ? "" : v).toString());
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "OptionsFormText"
+};
+</script>

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

@@ -0,0 +1,20 @@
+declare const _default: import("vue").DefineComponent<{
+    label: string;
+    min?: string;
+    max?: string;
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    min?: string;
+    max?: string;
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    min: string;
+    max: string;
+    modelValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -13,13 +13,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { Icon } from '#blokkli/components'
-
-defineProps<{
-  label: string
-  isActive: boolean
-}>()
-
-defineEmits(['toggle'])
+<script setup>
+import { Icon } from "#blokkli/components";
+defineProps({
+  label: { type: String, required: true },
+  isActive: { type: Boolean, required: true }
+});
+defineEmits(["toggle"]);
 </script>

package/dist/runtime/components/Edit/Features/Options/Form/Group.vue.d.ts

@@ -0,0 +1,29 @@
+import { Icon } from '#blokkli/components';
+type __VLS_Props = {
+    label: string;
+    isActive: boolean;
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_5: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_5) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    Icon: typeof Icon;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -9,8 +9,8 @@
     <div
       class="bk-blokkli-item-options-item-content"
       :class="{
-        'bk-is-grouped': isGrouped,
-      }"
+  'bk-is-grouped': isGrouped
+}"
     >
       <OptionRadios
         v-if="option.type === 'radios'"
@@ -62,120 +62,114 @@
         :min="option.min"
         :max="option.max"
       />
+      <OptionDateTimeLocal
+        v-else-if="option.type === 'datetime-local'"
+        v-model="value"
+        :label="label"
+        :min="option.min"
+        :max="option.max"
+      />
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli } from '#imports'
-import OptionRadios from './Radios/index.vue'
-import OptionCheckbox from './Checkbox/index.vue'
-import OptionCheckboxes from './Checkboxes/index.vue'
-import OptionText from './Text/index.vue'
-import OptionColor from './Color/index.vue'
-import OptionRange from './Range/index.vue'
-import OptionNumber from './Number/index.vue'
-import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions'
-import { mapCheckboxTrue } from '#blokkli/helpers/runtimeHelpers'
-import { BK_VISIBLE_LANGUAGES } from '#blokkli/helpers/symbols'
-
-const { state, $t: $blokkliText } = useBlokkli()
-
-const emit = defineEmits<{
-  (e: 'update', data: string): void
-}>()
-
-const props = defineProps<{
-  option: BlockOptionDefinition
-  property: string
-  mutatedValue: any
-  uuids: string[]
-  isGrouped?: boolean
-}>()
-
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import OptionRadios from "./Radios/index.vue";
+import OptionCheckbox from "./Checkbox/index.vue";
+import OptionCheckboxes from "./Checkboxes/index.vue";
+import OptionText from "./Text/index.vue";
+import OptionColor from "./Color/index.vue";
+import OptionRange from "./Range/index.vue";
+import OptionNumber from "./Number/index.vue";
+import OptionDateTimeLocal from "./DateTimeLocal/index.vue";
+import {
+  isValidDatetimeLocalValue,
+  mapCheckboxTrue
+} from "#blokkli/helpers/runtimeHelpers";
+import { BK_VISIBLE_LANGUAGES } from "#blokkli/helpers/symbols";
+const { state, $t: $blokkliText } = useBlokkli();
+const emit = defineEmits(["update"]);
+const props = defineProps({
+  option: { type: Object, required: true },
+  property: { type: String, required: true },
+  mutatedValue: { type: null, required: true },
+  uuids: { type: Array, required: true },
+  isGrouped: { type: Boolean, required: false }
+});
 const showLabel = computed(() => {
   if (props.isGrouped) {
-    if (props.option.type === 'checkbox') {
-      return false
+    if (props.option.type === "checkbox") {
+      return false;
     }
   }
-
-  return true
-})
-
-const label = computed(() =>
-  $blokkliText(`blockOption_${props.property}_label`, props.option.label),
-)
-
-const checkboxOptions = computed<{ value: string; label: string }[]>(() => {
-  if (props.option.type !== 'checkboxes') {
-    return []
+  return true;
+});
+const label = computed(
+  () => $blokkliText(`blockOption_${props.property}_label`, props.option.label)
+);
+const checkboxOptions = computed(() => {
+  if (props.option.type !== "checkboxes") {
+    return [];
   }
-
   if (props.property === BK_VISIBLE_LANGUAGES) {
     return (state.translation.value.availableLanguages || []).map(
       (language) => {
         return {
           value: language.id,
-          label: language.name,
-        }
-      },
-    )
+          label: language.name
+        };
+      }
+    );
   }
-
-  return Object.entries(props.option.options).map(([value, label]) => {
+  return Object.entries(props.option.options).map(([value2, label2]) => {
     return {
-      value,
-      label,
+      value: value2,
+      label: label2
+    };
+  });
+});
+const validCheckboxValues = computed(
+  () => checkboxOptions.value.map((v) => v.value)
+);
+const validateValue = (v) => {
+  if (props.option.type === "text") {
+    if (typeof v === "string") {
+      return v;
     }
-  })
-})
-
-const validCheckboxValues = computed(() =>
-  checkboxOptions.value.map((v) => v.value),
-)
-
-const validateValue = (
-  v: string | string[] | boolean | undefined | null | number,
-): string | undefined => {
-  if (props.option.type === 'text') {
-    if (typeof v === 'string') {
-      return v
+  } else if (props.option.type === "datetime-local") {
+    if (typeof v === "string" && isValidDatetimeLocalValue(v)) {
+      return v;
     }
-  } else if (props.option.type === 'color') {
-    if (typeof v === 'string' && v.startsWith('#') && v.length === 7) {
-      return v
+  } else if (props.option.type === "color") {
+    if (typeof v === "string" && v.startsWith("#") && v.length === 7) {
+      return v;
     }
-  } else if (props.option.type === 'radios' && typeof v === 'string') {
+  } else if (props.option.type === "radios" && typeof v === "string") {
     if (props.option.options[v]) {
-      return v
+      return v;
     }
-  } else if (props.option.type === 'checkbox') {
-    return mapCheckboxTrue(v)
-  } else if (props.option.type === 'checkboxes') {
-    const items = Array.isArray(v)
-      ? v
-      : (typeof v === 'string' ? v : '').split(',')
-    return items
-      .filter((key) => {
-        return validCheckboxValues.value.includes(key)
-      })
-      .join(',')
-  } else if (props.option.type === 'range' || props.option.type === 'number') {
-    if (typeof v === 'number') {
-      return v.toString()
-    } else if (typeof v === 'string') {
-      return v
+  } else if (props.option.type === "checkbox") {
+    return mapCheckboxTrue(v);
+  } else if (props.option.type === "checkboxes") {
+    const items = Array.isArray(v) ? v : (typeof v === "string" ? v : "").split(",");
+    return items.filter((key) => {
+      return validCheckboxValues.value.includes(key);
+    }).join(",");
+  } else if (props.option.type === "range" || props.option.type === "number") {
+    if (typeof v === "number") {
+      return v.toString();
+    } else if (typeof v === "string") {
+      return v;
     }
   }
-}
-
-const value = computed<string | undefined>({
+};
+const value = computed({
   get() {
-    return validateValue(props.mutatedValue)
+    return validateValue(props.mutatedValue);
   },
-  set(value: string | undefined) {
-    emit('update', value === undefined ? '' : value)
-  },
-})
+  set(value2) {
+    emit("update", value2 === void 0 ? "" : value2);
+  }
+});
 </script>

package/dist/runtime/components/Edit/Features/Options/Form/Item.vue.d.ts

@@ -0,0 +1,14 @@
+import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions';
+type __VLS_Props = {
+    option: BlockOptionDefinition;
+    property: string;
+    mutatedValue: any;
+    uuids: string[];
+    isGrouped?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (data: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((data: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;