<template>
  <table
    id="table-input-with-options"
    class="demo-table"
  >
    <tbody>
      <tr>
        <td>
          <ElForm>
            <TfPasswordField
              v-model="passwordValue"
              :is-valid-password.sync="isValidPassword"
            />
          </ElForm>
        </td>
      </tr>
      <tr>
        <td><b>Password value:</b> {{ passwordValue }}</td>
      </tr>
      <tr>
        <td><b>Password validity:</b> {{ !!isValidPassword }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
  export default {
    name: 'PasswordField',
    data: () => ({
      passwordValue: '',
      isValidPassword: false,
    }),
  };
</script>
