@pantograph/pattern-vue

Pantograph's Vue 3 component library, built with TypeScript and token-based design. Ready to use in your apps with light/dark token switching and simple, consistent APIs.

Install

npm i @pantograph/pattern-vue

Quick usage

<script setup>
import { ref } from 'vue'
import { InputPassword } from '@pantograph/pattern-vue'
import '@pantograph/styles'

const password = ref('')
const isVisible = ref(false)
</script>

<template>
  <InputPassword
    v-model="password"
    v-model:visible="isVisible"
    placeholder="Enter your password"
  />
</template>

Components

InputPassword

A password input component with built-in visibility toggle functionality.

Features:

• Built-in eye icon to toggle password visibility
• Dual v-model support (v-model for value, v-model:visible for visibility state)
• All Input component props, slots, and events are supported
• Accessible with proper ARIA labels

Usage:

<script setup>
import { ref } from 'vue'
import { InputPassword } from '@pantograph/pattern-vue'

const password = ref('')
</script>

<template>
  <InputPassword
    v-model="password"
    placeholder="Enter your password"
    allowClear
  />
</template>