pleroma-fe/src/components/component_preview/component_preview.js

import Checkbox from 'src/components/checkbox/checkbox.vue'
import ColorInput from 'src/components/color_input/color_input.vue'

import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
import {
  createStyleSheet,
  adoptStyleSheets,
} from 'src/services/style_setter/style_setter.js'

export default {
  components: {
    Checkbox,
    ColorInput,
  },
  props: [
    'shadow',
    'shadowControl',
    'previewClass',
    'previewStyle',
    'previewCss',
    'disabled',
    'invalid',
    'noColorControl',
  ],
  emits: ['update:shadow'],
  data() {
    return {
      colorOverride: undefined,
      lightGrid: false,
      zoom: 100,
      randomSeed: genRandomSeed(),
    }
  },
  mounted() {
    this.update()
  },
  computed: {
    hideControls() {
      return typeof this.shadow === 'string'
    },
  },
  watch: {
    previewCss() {
      this.update()
    },
    previewStyle() {
      this.update()
    },
    zoom() {
      this.update()
    },
  },
  methods: {
    updateProperty(axis, value) {
      this.$emit('update:shadow', { axis, value: Number(value) })
    },
    update() {
      const sheet = createStyleSheet('style-component-preview', 90)

      sheet.clear()

      const result = [this.previewCss]
      if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)

      const styleRule = [
        '#component-preview-',
        this.randomSeed,
        ' {\n',
        '.preview-block {\n',
        `zoom: ${this.zoom / 100};`,
        this.previewStyle,
        '\n}',
        '\n}',
      ].join('')

      sheet.addRule(styleRule)
      sheet.addRule(
        ['#component-preview-', this.randomSeed, ' {\n', ...result, '\n}'].join(
          '',
        ),
      )

      sheet.ready = true
      adoptStyleSheets()
    },
  },
}