<style>
::backdrop {
  background: #000;
  opacity: 0.75;
}

dialog {
  border: unset;
  border-radius: 10px;
}

dialog form {
  display: flex;
  justify-content: end;
}
</style>

<button onclick="dialog.showModal()">Открыть модалку</button>

<dialog id="dialog">
  <p>Это нативное модальное окно</p>

  <form method="dialog">
    <button>ОК</button>
  </form>
</dialog>

<button onclick="dialog.showModal()">Открыть модалку</button>

<dialog id="dialog">
  <p>Хотите продолжить?</p>

  <form method="dialog">   
    <button type="submit" value="no">Нет</button>
    <button type="submit" value="yes">Да</button>
  </form>
</dialog>

<script>
  dialog.addEventListener('close', (event) => {
    if (dialog.returnValue === 'yes') { /* ... */ }
  });
</script>

Ref time: 36ms
Pinia ref time: 628ms

Reactive time: 501ms
Pinia reactive time: 809ms

export type selectOption = selectOptionObject | string;  
export type selectOptionObject = {
  id: string | number;
  render: string;
  raw?: any;
};

const normaliseOptions = (
  options?: selectOption[]
): normalisedOptionObject[] => {
  if (!options) return [];

  // We will use a straight for loop for performance
  const normalisedOptions = [];
  for (let i = 0; i < options.length; i++) {
    const option = options[i];
    if (typeof option === "string") {
      normalisedOptions.push({
        id: option,
        render: option,
      });
      continue;
    }
    normalisedOptions.push({
      id: option.id.toString(),
      render: option.render,
      disabled: option.disabled || false,
      raw: option.raw,
    });
  }
  return normalisedOptions;
};

const normalisedOptions = computed(() => {
  return normaliseOptions(props.options);
});

// Using the pattern below rather than a computed value gives us a 2x performance improvement
const normalisedOptions = ref(normaliseOptions(props.options));
const recomputeOptions = () => {
  normalisedOptions.value = normaliseOptions(props.options);
};

watch(
  () => props.options,
  () => {
    recomputeOptions();
  }
);

const recomputedOptions = computed(() => normaliseOptions(toRaw(props.options)));

[
    {
      mask: '+00 {21} 0 000 0000',
      startsWith: '30',
      lazy: false,
      country: 'Greece'
    },
    {
      mask: '+0 000 000-00-00',
      startsWith: '7',
      lazy: false,
      country: 'Russia'
    },
    {
      mask: '+00-0000-000000',
      startsWith: '91',
      lazy: false,
      country: 'India'
    },
    {
      mask: '0000000000000',
      startsWith: '',
      country: 'unknown'
    }
]

import PhoneInput from 'react-phone-number-input';
import PropTypes from 'prop-types';
import { getCountries } from 'react-phone-number-input';
import { Select as AntdSelect } from 'antd';

const phoneCountryLabels = () => {
    const countryLabels = {};

    getCountries().forEach((country) => (countryLabels[country] = country));

    return countryLabels;
};

const CountrySelect = ({ value, onChange, labels, variant = 'filled', ...rest }) => (
    <AntdSelect
        {...rest}
        value={value}
        showSearch
        optionFilterProp="label"
        onChange={onChange}
        variant={variant}
        size="large"
        style={{ '--ant-select-single-item-height-lg': '3rem' }}
    />
);

CountrySelect.propTypes = {
    value: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    labels: PropTypes.objectOf(PropTypes.string).isRequired,
    variant: PropTypes.string,
};

const PhoneNumberInput = ({ onChange, country = 'US' }) => {
    return (
        <div className="base-phone-number">
            <PhoneInput
                onChange={onChange}
                defaultCountry={country}
                international
                limitMaxLength
                labels={phoneCountryLabels()}
                countrySelectComponent={CountrySelect}
                numberInputProps={{
                    className: 'ant-input ant-input-filled css-var-r1 ant-input-css-var base-input',
                }}
            />
        </div>
    );
};

PhoneNumberInput.propTypes = {
    onChange: PropTypes.func.isRequired,
    country: PropTypes.string,
};

export default PhoneNumberInput;