feat: use "nullish" option values when multiple blocks selected

In cases where the options of all selected blocks are not the same
blokkli · Nov 12, 2024 · c665390 · c665390
1 parent 95fae34
commit c665390
Show file tree

Hide file tree

Showing 13 changed files with 53 additions and 52 deletions.
diff --git a/css/partials/options.css b/css/partials/options.css
@@ -386,7 +386,7 @@
       @apply h-50;
 
       &.bk-is-grouped {
-        @apply h-auto;
+        @apply h-auto min-h-50;
 
         .bk-blokkli-item-options-checkbox {
           @apply h-50 w-full;
@@ -395,7 +395,7 @@
     }
 
     .bk-blokkli-item-options-item {
-      @apply block;
+      @apply flex flex-col items-start;
       &:not(:last-child) {
         @apply border-b border-b-mono-600;
       }

diff --git a/playground/components/Blokkli/Card/Card.vue b/playground/components/Blokkli/Card/Card.vue
@@ -54,11 +54,6 @@ const { parentType, options } = defineBlokkli({
       label: 'Box',
       default: true,
     },
-    easyLanguageVisibility: {
-      type: 'checkbox',
-      label: 'Box',
-      default: true,
-    },
     color: {
       type: 'radios',
       label: 'Color',
@@ -77,9 +72,6 @@ const { parentType, options } = defineBlokkli({
     addBehaviour: 'no-form',
     editTitle: (el) => el.querySelector('h3')?.textContent,
     determineVisibleOptions: (ctx) => {
-      if (ctx.entity.language === 'ls') {
-        return ['easyLanguageVisibility']
-      }
       if (ctx.props.icon) {
         return ['box', 'color']
       }

diff --git a/playground/components/Blokkli/Widget/Widget.vue b/playground/components/Blokkli/Widget/Widget.vue
@@ -208,6 +208,12 @@ const { options } = defineBlokkli({
         primary: { hex: '#0550e6', label: 'Blue' },
       },
     },
+    nestedCheckbox: {
+      type: 'checkbox',
+      label: 'Nested Checkbox',
+      default: true,
+      group: 'Radios',
+    },
   },
   editor: {
     editTitle: (el) => el.dataset.widget,
@@ -230,6 +236,7 @@ const { options } = defineBlokkli({
           'paddingRight',
           'paddingBottom',
           'rows',
+          'nestedCheckbox',
         ]
       }
       return ['showAllOptions']

diff --git a/src/runtime/components/Edit/DraggableList.vue b/src/runtime/components/Edit/DraggableList.vue
@@ -109,7 +109,7 @@ const props = withDefaults(
     fieldKey: string
     list: FieldListItem[]
     entity: EntityContext
-    language: string
+    language?: string
     tag?: string
     isNested: boolean
     fieldListType: string
@@ -123,6 +123,7 @@ const props = withDefaults(
     tag: 'div',
     allowedFragments: undefined,
     dropAlignment: undefined,
+    language: undefined,
   },
 )
 

diff --git a/src/runtime/components/Edit/Features/Options/Form/Checkbox/index.vue b/src/runtime/components/Edit/Features/Options/Form/Checkbox/index.vue
@@ -15,7 +15,7 @@ const { $t, state } = useBlokkli()
 const props = defineProps<{
   label: string
   property: string
-  modelValue: string
+  modelValue?: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])

diff --git a/src/runtime/components/Edit/Features/Options/Form/Checkboxes/index.vue b/src/runtime/components/Edit/Features/Options/Form/Checkboxes/index.vue
@@ -45,7 +45,7 @@ const { $t, state } = useBlokkli()
 const props = defineProps<{
   label: string
   property: string
-  modelValue: string
+  modelValue?: string
   options: { value: string; label: string }[]
   isGrouped?: boolean
 }>()

diff --git a/src/runtime/components/Edit/Features/Options/Form/Color/index.vue b/src/runtime/components/Edit/Features/Options/Form/Color/index.vue
@@ -16,7 +16,7 @@ import { computed } from '#imports'
 
 const props = defineProps<{
   label: string
-  modelValue: string
+  modelValue?: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])

diff --git a/src/runtime/components/Edit/Features/Options/Form/Item.vue b/src/runtime/components/Edit/Features/Options/Form/Item.vue
@@ -88,6 +88,7 @@ const emit = defineEmits<{
 const props = defineProps<{
   option: BlockOptionDefinition
   property: string
+  mutatedValue: any
   uuids: string[]
   isGrouped?: boolean
 }>()
@@ -169,34 +170,12 @@ const validateValue = (
   }
 }
 
-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>({
+const value = computed<string | undefined>({
   get() {
-    if (mutatedValue.value === undefined) {
-      return defaultValue.value
-    }
-    return mutatedValue.value
+    return validateValue(props.mutatedValue)
   },
-  set(value: string) {
-    emit('update', value)
+  set(value: string | undefined) {
+    emit('update', value === undefined ? '' : value)
   },
 })
 </script>
diff --git a/src/runtime/components/Edit/Features/Options/Form/Number/index.vue b/src/runtime/components/Edit/Features/Options/Form/Number/index.vue
@@ -26,13 +26,14 @@ import { Icon } from '#blokkli/components'
 const props = withDefaults(
   defineProps<{
     label: string
-    modelValue: string
+    modelValue?: string
     min: number
     max: number
     type?: string
   }>(),
   {
     type: 'text',
+    modelValue: '0',
   },
 )
 
@@ -42,14 +43,17 @@ const emit = defineEmits(['update:modelValue'])
 
 const text = computed<string>({
   get() {
-    return props.modelValue || '0'
+    return props.modelValue
   },
   set(v: string | number | undefined) {
     emit('update:modelValue', (v === undefined ? '' : v).toString())
   },
 })
 
 const numeric = computed(() => {
+  if (props.modelValue === undefined) {
+    return 0
+  }
   const v = Number.parseInt(props.modelValue)
   if (Number.isNaN(v)) {
     return 0

diff --git a/src/runtime/components/Edit/Features/Options/Form/Radios/index.vue b/src/runtime/components/Edit/Features/Options/Form/Radios/index.vue
@@ -75,7 +75,7 @@ const props = defineProps<{
   property: string
   displayAs?: 'radios' | 'colors' | 'grid' | 'icons'
   options: Record<string, PossibleOptionType>
-  modelValue: string
+  modelValue?: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])

diff --git a/src/runtime/components/Edit/Features/Options/Form/Range/index.vue b/src/runtime/components/Edit/Features/Options/Form/Range/index.vue
@@ -10,7 +10,7 @@ import { computed } from '#imports'
 
 const props = defineProps<{
   label: string
-  modelValue: string
+  modelValue?: string
   min: number
   max: number
   step: number
@@ -20,7 +20,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const text = computed<string>({
   get() {
-    return props.modelValue || ''
+    return props.modelValue || '0'
   },
   set(v: string | number | undefined) {
     emit('update:modelValue', (v === undefined ? '' : v).toString())

diff --git a/src/runtime/components/Edit/Features/Options/Form/Text/index.vue b/src/runtime/components/Edit/Features/Options/Form/Text/index.vue
@@ -11,11 +11,12 @@ import { computed } from '#imports'
 const props = withDefaults(
   defineProps<{
     label: string
-    modelValue: string
+    modelValue?: string
     type?: string
   }>(),
   {
     type: 'text',
+    modelValue: '',
   },
 )
 

diff --git a/src/runtime/components/Edit/Features/Options/Form/index.vue b/src/runtime/components/Edit/Features/Options/Form/index.vue
@@ -10,6 +10,7 @@
       :key="plugin.property"
       :option="plugin.option"
       :property="plugin.property"
+      :mutated-value="currentValues[plugin.property]"
       :uuids="uuids"
       class="bk-blokkli-item-options-item"
       :class="{
@@ -31,6 +32,7 @@
         :key="plugin.property"
         :option="plugin.option"
         :property="plugin.property"
+        :mutated-value="currentValues[plugin.property]"
         :uuids="uuids"
         class="bk-blokkli-item-options-item"
         :class="{
@@ -47,7 +49,7 @@
 <script lang="ts" setup>
 import { ref, computed, useBlokkli, onBeforeUnmount, onMounted } from '#imports'
 import { globalOptions } from '#blokkli/definitions'
-import { falsy } from '#blokkli/helpers'
+import { falsy, onlyUnique } from '#blokkli/helpers'
 import OptionsFormItem from './Item.vue'
 import OptionsFormGroup from './Group.vue'
 import type {
@@ -220,14 +222,29 @@ function getOptionValue(
  * The current mapped values, same as provided by defineBlokkli.
  */
 const currentValues = computed(() => {
-  const uuid = props.uuids[0]
   return availableOptions.value.reduce<
     Record<string, string | string[] | boolean | number>
   >((acc, v) => {
-    acc[v.property] = getRuntimeOptionValue(
-      v.option,
-      getOptionValue(uuid, v.property, v.option.default),
-    )
+    // Get all current values.
+    const values = props.uuids
+      .map((uuid) => {
+        return JSON.stringify(
+          getRuntimeOptionValue(
+            v.option,
+            getOptionValue(uuid, v.property, v.option.default),
+          ),
+        )
+      })
+      .filter(onlyUnique)
+    if (values.length === 1) {
+      acc[v.property] = getRuntimeOptionValue(
+        v.option,
+        getOptionValue(props.uuids[0], v.property, v.option.default),
+      )
+    } else {
+      acc[v.property] = ''
+    }
+
     return acc
   }, {})
 })