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

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

@@ -9,8 +9,8 @@
       :min="min"
       :max="max"
       :style="{
-        width: width + 'px',
-      }"
+  width: width + 'px'
+}"
     />
 
     <button :disabled="numeric >= max" @click.stop.prevent="increment">
@@ -19,60 +19,46 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed } from '#imports'
-import { Icon } from '#blokkli/components'
-
-const props = withDefaults(
-  defineProps<{
-    label: string
-    modelValue?: string
-    min: number
-    max: number
-    type?: string
-  }>(),
-  {
-    type: 'text',
-    modelValue: '0',
-  },
-)
-
-const width = computed(() => props.max.toString().length * 30)
-
-const emit = defineEmits(['update:modelValue'])
-
-const text = computed<string>({
+<script setup>
+import { computed } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  label: { type: String, required: true },
+  modelValue: { type: String, required: false, default: "0" },
+  min: { type: Number, required: true },
+  max: { type: Number, required: true },
+  type: { type: String, required: false, default: "text" }
+});
+const width = computed(() => props.max.toString().length * 30);
+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());
+  }
+});
 const numeric = computed(() => {
-  if (props.modelValue === undefined) {
-    return 0
+  if (props.modelValue === void 0) {
+    return 0;
   }
-  const v = Number.parseInt(props.modelValue)
+  const v = Number.parseInt(props.modelValue);
   if (Number.isNaN(v)) {
-    return 0
+    return 0;
   }
-
-  return v
-})
-
+  return v;
+});
 function increment() {
-  text.value = (numeric.value + 1).toString()
+  text.value = (numeric.value + 1).toString();
 }
-
 function decrement() {
-  text.value = (numeric.value - 1).toString()
+  text.value = (numeric.value - 1).toString();
 }
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'OptionsFormNumber',
-}
+  name: "OptionsFormNumber"
+};
 </script>

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

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

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

@@ -2,10 +2,10 @@
   <div
     class="bk-blokkli-item-options-radios"
     :class="{
-      'bk-is-color': displayAs === 'colors',
-      'bk-is-grid': displayAs === 'grid',
-      'bk-is-icons': displayAs === 'icons',
-    }"
+  'bk-is-color': displayAs === 'colors',
+  'bk-is-grid': displayAs === 'grid',
+  'bk-is-icons': displayAs === 'icons'
+}"
   >
     <label v-for="option in mappedOptions" :key="option.key">
       <div v-bind="getInputWrapperAttributes(option.value)">
@@ -19,13 +19,11 @@
         />
         <div
           v-if="
-            displayAs === 'icons' &&
-            typeof option.value === 'object' &&
-            option.value.icon
-          "
+  displayAs === 'icons' && typeof option.value === 'object' && option.value.icon
+"
           class="bk-blokkli-item-options-radios-icon"
         >
-          <Icon :name="option.value.icon as any" />
+          <Icon :name="option.value.icon" />
         </div>
 
         <div
@@ -40,9 +38,8 @@
         </div>
         <span
           v-else-if="
-            typeof option.value === 'string' ||
-            (typeof option.value === 'object' && displayAs === 'colors')
-          "
+  typeof option.value === 'string' || typeof option.value === 'object' && displayAs === 'colors'
+"
         >
           {{
             typeof option.value === 'string' ? option.value : option.value.label
@@ -53,83 +50,62 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli } from '#imports'
-import { Icon } from '#blokkli/components'
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-
-const { $t, state } = useBlokkli()
-
-type PossibleOptionType =
-  | string
-  | {
-      hex?: string
-      class?: string
-      columns?: number[]
-      icon?: string
-      label: string
-    }
-
-const props = defineProps<{
-  label: string
-  property: string
-  displayAs?: 'radios' | 'colors' | 'grid' | 'icons'
-  options: Record<string, PossibleOptionType>
-  modelValue?: string
-}>()
-
-const emit = defineEmits(['update:modelValue'])
-
-function getInputWrapperAttributes(value: PossibleOptionType) {
-  if (props.displayAs === 'colors' && typeof value !== 'string') {
-    if (value.hex && value.hex.indexOf('#') === 0) {
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+import defineCommands from "#blokkli/helpers/composables/defineCommands";
+const { $t, state } = useBlokkli();
+const props = defineProps({
+  label: { type: String, required: true },
+  property: { type: String, required: true },
+  displayAs: { type: String, required: false },
+  options: { type: Object, required: true },
+  modelValue: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+function getInputWrapperAttributes(value) {
+  if (props.displayAs === "colors" && typeof value !== "string") {
+    if (value.hex && value.hex.indexOf("#") === 0) {
       return {
-        style: 'background-color: ' + value.hex,
-      }
+        style: "background-color: " + value.hex
+      };
     } else if (value.class) {
       return {
-        class: value.class,
-      }
+        class: value.class
+      };
     }
   }
-  return {}
+  return {};
 }
-
 const mappedOptions = computed(() => {
   return Object.entries(props.options).map(([key, value]) => {
-    return { key, value }
-  })
-})
-
-const setValue = (value: string) => {
-  emit('update:modelValue', value)
-}
-
+    return { key, value };
+  });
+});
+const setValue = (value) => {
+  emit("update:modelValue", value);
+};
 defineCommands(() => {
-  if (state.editMode.value !== 'editing') {
-    return
+  if (state.editMode.value !== "editing") {
+    return;
   }
-  return mappedOptions.value
-    .filter((v) => v.key !== props.modelValue)
-    .map((option) => {
-      return {
-        id: 'options:' + props.property + option.key,
-        label: $t(
-          'optionsCommand.setOption',
-          'Set option "@option" to "@value"',
-        )
-          .replace('@option', props.label)
-          .replace('@value', option.key),
-        group: 'selection',
-        icon: 'form',
-        callback: () => setValue(option.key),
-      }
-    })
-})
+  return mappedOptions.value.filter((v) => v.key !== props.modelValue).map((option) => {
+    return {
+      id: "options:" + props.property + option.key,
+      label: $t(
+        "optionsCommand.setOption",
+        'Set option "@option" to "@value"'
+      ).replace("@option", props.label).replace("@value", option.key),
+      group: "selection",
+      icon: "form",
+      callback: () => setValue(option.key)
+    };
+  });
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'OptionsFormRadios',
-}
+  name: "OptionsFormRadios"
+};
 </script>

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

@@ -0,0 +1,30 @@
+declare const _default: import("vue").DefineComponent<{
+    label: string;
+    property: string;
+    displayAs?: "radios" | "colors" | "grid" | "icons";
+    options: Record<string, string | {
+        hex?: string;
+        class?: string;
+        columns?: number[];
+        icon?: string;
+        label: string;
+    }>;
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    property: string;
+    displayAs?: "radios" | "colors" | "grid" | "icons";
+    options: Record<string, string | {
+        hex?: string;
+        class?: string;
+        columns?: number[];
+        icon?: string;
+        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/Range/index.vue

@@ -5,43 +5,33 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed } from '#imports'
-
-const props = defineProps<{
-  label: string
-  modelValue?: string
-  min: number
-  max: number
-  step: number
-}>()
-
-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 },
+  min: { type: Number, required: true },
+  max: { type: Number, required: true },
+  step: { type: Number, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const text = computed({
   get() {
-    return props.modelValue || '0'
-  },
-  set(v: string | number | undefined) {
-    emit('update:modelValue', (v === undefined ? '' : v).toString())
+    return props.modelValue || "0";
   },
-})
-
+  set(v) {
+    emit("update:modelValue", (v === void 0 ? "" : v).toString());
+  }
+});
 const formatted = computed(() => {
-  // Ensure the value is treated as a number
-  const numValue =
-    typeof text.value === 'string' ? Number.parseFloat(text.value) : text.value
-
-  // Determine the precision of the step
-  const stepPrecision = (props.step.toString().split('.')[1] || '').length
-
-  // Format the number to match the step precision
-  return numValue.toFixed(stepPrecision)
-})
+  const numValue = typeof text.value === "string" ? Number.parseFloat(text.value) : text.value;
+  const stepPrecision = (props.step.toString().split(".")[1] || "").length;
+  return numValue.toFixed(stepPrecision);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'OptionsFormRange',
-}
+  name: "OptionsFormRange"
+};
 </script>

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

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

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

@@ -5,35 +5,26 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed } from '#imports'
-
-const props = withDefaults(
-  defineProps<{
-    label: string
-    modelValue?: string
-    type?: string
-  }>(),
-  {
-    type: 'text',
-    modelValue: '',
-  },
-)
-
-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, default: "" },
+  type: { type: String, required: false, default: "text" }
+});
+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: 'OptionsFormText',
-}
+  name: "OptionsFormText"
+};
 </script>

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

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