Display values in "select layout" dialogue

[dgsiegel]

@matthack

It looks like this is not possible anymore in K4?

Indeed, @thguenther’s solution doesn’t work anymore as Kirby 4 has removed those properties. But we can add them back via a small plugin. I’ve also added the values to the layout field itself.

index.php

<?php

Kirby::plugin('custom/layout-grid-values', []);

index.js

window.panel.plugin('custom/layout-grid-values', {
  components: {
    'k-layout-column': {
      extends: 'k-layout-column',
      mounted() {
        this.$el.dataset.width = this.width;
      },
    },
  },
});

window.panel.plugin('custom/layout-grid-values', {
  components: {
    'k-layout-selector': {
      extends: 'k-layout-selector',
      mounted() {
        this.$nextTick(() => {
          Array.from(document.querySelectorAll('.k-dialog.k-layout-selector .k-layout-selector-option .k-column')).forEach(el => {
            el.dataset.width = getComputedStyle(el).getPropertyValue('--width');
          });
        });
      },
    },
  },
});

index.css

.k-layout-field .k-column.k-layout-column {
  &:after {
    content: attr(data-width);
    position: absolute;
    color: var(--color-gray-400);
    font-size: var(--font-size-tiny);
    bottom: var(--spacing-1);
    right: var(--spacing-1);
  }
}

.k-layout-selector-options .k-layout-selector-option {
  .k-column {
    align-content: center;

    &:after {
      content: attr(data-width);
      color: var(--color-gray-700);
      font-size: var(--font-size-tiny);
    }
  }
}