q-control-label

import { type DirectiveBinding } from 'vue';
import { nextTick } from 'vue';

// src/directives/log.js
export default {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    console.log('Directive bound to:', el);
    const labelElement = el.querySelector('.q-field__label');
    console.log('Label text:', labelElement?.textContent);
    const labelText = labelElement?.textContent ?? 'Bleh';

    if (binding.value) {
      console.log('test')
    }

    const control = el.querySelector('.q-field__control');
    if (!control) {
      return;
    }

    const wrapper = document.createElement('div');
    wrapper.id = 'test';
    wrapper.style.display = 'flex';
    wrapper.style.position = 'absolute';
    wrapper.style.height = '100%';
    wrapper.style.width = '100%';

    const leftDiv = document.createElement('div');
    const middleDiv = document.createElement('div');
    const rightDiv = document.createElement('div');

    leftDiv.style.display = 'flex';
    leftDiv.style.height = '100%';
    leftDiv.style.width = '12px';
    leftDiv.style.borderLeft = '1px solid black';
    leftDiv.style.borderTop = '1px solid black';
    leftDiv.style.borderBottom = '1px solid black';
    leftDiv.style.borderRadius = '3px 0px 0px 3px';

    middleDiv.style.height = '100%';
    middleDiv.style.width = '100%';
    middleDiv.style.borderBottom = '1px solid black';

    rightDiv.style.display = 'flex';
    rightDiv.style.flex = '1';
    rightDiv.style.height = '100%';
    rightDiv.style.borderRight = '1px solid black';
    rightDiv.style.borderTop = '1px solid black';
    rightDiv.style.borderBottom = '1px solid black';
    rightDiv.style.borderRadius = '0px 3px 3px 0px';

    // Insert a hidden label into the middle div
    const hiddenLabel = document.createElement('span');
    hiddenLabel.textContent = labelText;
    hiddenLabel.style.visibility = 'hidden';
    hiddenLabel.style.whiteSpace = 'nowrap'; // Ensure it doesn't wrap
    hiddenLabel.style.position = 'absolute'; // Remove it from layout flow
    hiddenLabel.style.overflow = 'hidden';
    hiddenLabel.style.textOverflow = 'ellipsis';
    middleDiv.appendChild(hiddenLabel);

    // Add all parts to the wrapper
    wrapper.appendChild(leftDiv);
    wrapper.appendChild(middleDiv);
    wrapper.appendChild(rightDiv);
    // Insert the wrapper into the DOM
    control.appendChild(wrapper);

    void nextTick(() => {
      middleDiv.style.flex = `0 0 ${hiddenLabel.offsetWidth}px`;
    });
  },
};