@blokkli/editor 1.0.0

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

@@ -0,0 +1,129 @@
+<template>
+  <div
+    class="bk-blokkli-item-options-checkboxes"
+    :class="{ 'bk-is-active': isOpen }"
+  >
+    <button @click="isOpen = !isOpen">
+      <span>{{ label }}</span>
+      <div>
+        <template v-if="checked.length < 4">
+          <span v-for="item in checked" :key="item" class="bk-pill">{{
+            item
+          }}</span>
+        </template>
+        <span v-else class="bk-pill">{{ checked.length }}</span>
+      </div>
+      <Icon name="caret" />
+    </button>
+    <div v-if="isOpen">
+      <label
+        v-for="option in mappedOptions"
+        :key="option.key"
+        class="bk-blokkli-item-options-checkbox"
+      >
+        <input
+          v-model="checked"
+          type="checkbox"
+          class="peer"
+          :value="option.key"
+        />
+        <div />
+        <span>{{ option.value }}</span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, useBlokkli } from '#imports'
+import { Icon } from '#blokkli/components'
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+
+const { $t, state } = useBlokkli()
+
+const props = defineProps<{
+  label: string
+  property: string
+  modelValue: string
+  options: Record<string, string>
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = ref(false)
+
+const optionOrder = computed(() => Object.keys(props.options))
+
+const checked = computed<string[]>({
+  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)
+  },
+})
+
+const toggle = (key: string) => {
+  if (!checked.value.includes(key)) {
+    checked.value = [...checked.value, key]
+  } else {
+    checked.value = checked.value.filter((v) => v !== key)
+  }
+}
+
+const mappedOptions = computed(() => {
+  return Object.entries(props.options).map(([key, value]) => {
+    return { key, value }
+  })
+})
+
+defineCommands(() => {
+  if (state.editMode.value !== 'editing') {
+    return
+  }
+  return optionOrder.value.map((key) => {
+    if (checked.value.includes(key)) {
+      return {
+        id: 'options:' + props.property + ':select:' + key,
+        label: $t(
+          'optionsCommand.unselectCheckboxValue',
+          'Unselect "@value" in "@option"',
+        )
+          .replace('@option', props.label)
+          .replace('@value', props.options[key]),
+        group: 'selection',
+        icon: 'form',
+        callback: () => toggle(key),
+      }
+    }
+
+    return {
+      id: 'options:' + props.property + ':unselect:' + key,
+      label: $t(
+        'optionsCommand.selectCheckboxValue',
+        'Select "@value" in "@option"',
+      )
+        .replace('@option', props.label)
+        .replace('@value', props.options[key]),
+      group: 'selection',
+      icon: 'form',
+      callback: () => toggle(key),
+    }
+  })
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'OptionsFormCheckboxes',
+}
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="bk-blokkli-item-options-color">
+    <input v-model="text" type="color" />
+    <div
+      class="bk-blokkli-item-options-color-preview"
+      :style="{
+        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>({
+  get() {
+    return props.modelValue || ''
+  },
+  set(v: string | number | undefined) {
+    emit('update:modelValue', (v === undefined ? '' : v).toString())
+  },
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'OptionsFormColor',
+}
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="bk-blokkli-item-options-group"
+    :class="{ 'bk-is-active': isActive }"
+  >
+    <button @click.stop.prevent="$emit('toggle')">
+      <div>{{ label }}</div>
+      <Icon name="caret" />
+    </button>
+    <div v-if="isActive" class="bk-blokkli-item-options-group-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '#blokkli/components'
+
+defineProps<{
+  label: string
+  isActive: boolean
+}>()
+
+defineEmits(['toggle'])
+</script>

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

@@ -0,0 +1,155 @@
+<template>
+  <div class="bk-blokkli-item-options-item" @keydown.stop>
+    <div
+      :class="isGrouped ? 'bk-blokkli-item-options-item-label' : 'bk-tooltip'"
+    >
+      <span>{{ option.label }}</span>
+    </div>
+    <div class="bk-blokkli-item-options-item-content">
+      <OptionRadios
+        v-if="option.type === 'radios'"
+        v-model="value"
+        :label="option.label"
+        :options="option.options"
+        :property="property"
+        :display-as="option.displayAs"
+      />
+      <OptionCheckbox
+        v-else-if="option.type === 'checkbox'"
+        v-model="value"
+        :property="property"
+        :label="option.label"
+        :value="value"
+      />
+      <OptionCheckboxes
+        v-else-if="option.type === 'checkboxes'"
+        v-model="value"
+        :property="property"
+        :label="option.label"
+        :options="option.options"
+        :value="value"
+      />
+      <OptionText
+        v-else-if="option.type === 'text'"
+        v-model="value"
+        :label="option.label"
+        :type="option.inputType"
+      />
+      <OptionColor
+        v-else-if="option.type === 'color'"
+        v-model="value"
+        :label="option.label"
+      />
+      <OptionRange
+        v-else-if="option.type === 'range'"
+        v-model="value"
+        :label="option.label"
+        :min="option.min"
+        :max="option.max"
+        :step="option.step"
+      />
+      <OptionNumber
+        v-else-if="option.type === 'number'"
+        v-model="value"
+        :label="option.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'
+
+const { state } = useBlokkli()
+
+const emit = defineEmits<{
+  (e: 'update', data: string): void
+}>()
+
+const props = defineProps<{
+  option: BlockOptionDefinition
+  property: string
+  uuids: string[]
+  isGrouped?: boolean
+}>()
+
+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 === 'color') {
+    if (typeof v === 'string' && v.startsWith('#') && v.length === 7) {
+      return v
+    }
+  } else if (props.option.type === 'radios' && typeof v === 'string') {
+    if (props.option.options[v]) {
+      return v
+    }
+  } else if (props.option.type === 'checkbox') {
+    if (typeof v === 'boolean') {
+      return v ? '1' : '0'
+    }
+    return v === '1' ? '1' : '0'
+  } else if (props.option.type === 'checkboxes') {
+    const options = Object.keys(props.option.options || {})
+    const items = Array.isArray(v)
+      ? v
+      : (typeof v === 'string' ? v : '').split(',')
+    return items
+      .filter((key) => {
+        return options.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 mutatedValue = computed<string | undefined>(() => {
+  for (let i = 0; i < props.uuids.length; i++) {
+    const uuid = props.uuids[i]
+    const mutatedOptions = state.mutatedOptions[uuid]
+    if (mutatedOptions) {
+      const mutatedOption = state.mutatedOptions[uuid]?.[props.property]
+      if (mutatedOption !== undefined) {
+        return validateValue(mutatedOption)
+      }
+    }
+  }
+
+  return undefined
+})
+
+const defaultValue = computed<string>(
+  () => validateValue(props.option.default) || '',
+)
+
+const value = computed<string>({
+  get() {
+    if (mutatedValue.value === undefined) {
+      return defaultValue.value
+    }
+    return mutatedValue.value
+  },
+  set(value: string) {
+    emit('update', value)
+  },
+})
+</script>

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="bk-blokkli-item-options-number">
+    <button :disabled="numeric <= min" @click.stop.prevent="decrement">
+      <Icon name="minus" />
+    </button>
+    <input
+      v-model="text"
+      type="number"
+      :min="min"
+      :max="max"
+      :style="{
+        width: width + 'px',
+      }"
+    />
+
+    <button :disabled="numeric >= max" @click.stop.prevent="increment">
+      <Icon name="plus" />
+    </button>
+  </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',
+  },
+)
+
+const width = computed(() => props.max.toString().length * 30)
+
+const emit = defineEmits(['update:modelValue'])
+
+const text = computed<string>({
+  get() {
+    return props.modelValue || '0'
+  },
+  set(v: string | number | undefined) {
+    emit('update:modelValue', (v === undefined ? '' : v).toString())
+  },
+})
+
+const numeric = computed(() => {
+  const v = Number.parseInt(props.modelValue)
+  if (Number.isNaN(v)) {
+    return 0
+  }
+
+  return v
+})
+
+function increment() {
+  text.value = (numeric.value + 1).toString()
+}
+
+function decrement() {
+  text.value = (numeric.value - 1).toString()
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'OptionsFormNumber',
+}
+</script>

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

@@ -0,0 +1,135 @@
+<template>
+  <div
+    class="bk-blokkli-item-options-radios"
+    :class="{
+      '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)">
+        <input
+          :id="option.key"
+          type="radio"
+          :name="property"
+          :value="option.key"
+          :checked="modelValue === option.key"
+          @change="$emit('update:modelValue', option.key)"
+        />
+        <div
+          v-if="
+            displayAs === 'icons' &&
+            typeof option.value === 'object' &&
+            option.value.icon
+          "
+          class="bk-blokkli-item-options-radios-icon"
+        >
+          <Icon :name="option.value.icon as any" />
+        </div>
+
+        <div
+          v-else-if="typeof option.value === 'object' && option.value.columns"
+          class="bk-blokkli-item-options-radios-flex"
+        >
+          <div
+            v-for="(v, i) in option.value.columns"
+            :key="i"
+            :style="{ flex: v }"
+          />
+        </div>
+        <span
+          v-else-if="
+            typeof option.value === 'string' ||
+            (typeof option.value === 'object' && displayAs === 'colors')
+          "
+        >
+          {{
+            typeof option.value === 'string' ? option.value : option.value.label
+          }}
+        </span>
+      </div>
+    </label>
+  </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) {
+      return {
+        style: 'background-color: ' + value.hex,
+      }
+    } else if (value.class) {
+      return {
+        class: value.class,
+      }
+    }
+  }
+  return {}
+}
+
+const mappedOptions = computed(() => {
+  return Object.entries(props.options).map(([key, value]) => {
+    return { key, value }
+  })
+})
+
+const setValue = (value: string) => {
+  emit('update:modelValue', value)
+}
+
+defineCommands(() => {
+  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),
+      }
+    })
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'OptionsFormRadios',
+}
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="bk-blokkli-item-options-range">
+    <input v-model="text" type="range" :min="min" :max="max" :step="step" />
+    <div>{{ formatted }}</div>
+  </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>({
+  get() {
+    return props.modelValue || ''
+  },
+  set(v: string | number | undefined) {
+    emit('update:modelValue', (v === undefined ? '' : 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)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'OptionsFormRange',
+}
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="bk-blokkli-item-options-text">
+    <input v-model="text" :type="type" :placeholder="label" />
+    <div>{{ text }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    modelValue: string
+    type?: string
+  }>(),
+  {
+    type: 'text',
+  },
+)
+
+const emit = defineEmits(['update:modelValue'])
+
+const text = computed<string>({
+  get() {
+    return props.modelValue || ''
+  },
+  set(v: string | number | undefined) {
+    emit('update:modelValue', (v === undefined ? '' : v).toString())
+  },
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'OptionsFormText',
+}
+</script>