semantic-duration-input

semantic-duration-input

A Vue 3 input that understands human-friendly durations and gives you minutes (or seconds, milliseconds or ISO 8601) via v-model.

Documentation and live examples · npm

Install

npm install semantic-duration-input

<script setup lang="ts">
import { ref } from 'vue'
import { DurationInput } from 'semantic-duration-input'

const minutes = ref<number | null>(90)
</script>

<template>
  <DurationInput v-model="minutes" placeholder="e.g. 1h 30m" />
</template>

Then add the styles. With Tailwind v4:

@import 'tailwindcss';
@import 'semantic-duration-input/tailwind.css';

Without Tailwind:

import 'semantic-duration-input/style.css'

Features

• Syntax: units in English, German, Spanish, French, Portuguese, Hindi, Arabic and Chinese, compound values, 1h30, decimals, 1:30, ISO 8601, and "did you mean" suggestions for typos.
• Value formats: minutes, seconds, milliseconds, ISO 8601 strings or your own conversion.
• Behaviour: configurable validation timing, normalization on blur, keyboard stepping, presets menu, live preview.
• Locales: add languages or unit names with defineLocale.
• Custom units: units of your own (2 sprints) and working time (1d = 8h).
• Forms: native form submission, validate(), and durationSchema() for Standard Schema libraries.
• Styling: Tailwind v4, themable through --sdi-* tokens that fall back to shadcn-vue and Nuxt UI, classes per part, unstyled.
• Integrations: render shadcn-vue, Nuxt UI, Vuetify, PrimeVue or any input through as, or go renderless.
• Nuxt module and headless core (semantic-duration-input/core, no Vue needed).

AI coding agents

• Docs as Markdown: llms.txt (key facts and an index) and llms-full.txt (every page in one file). Each docs page is also available with .md appended to its URL.
• Offline and version-matched: the npm package ships both files in node_modules/semantic-duration-input/dist/.
• Agent skill: npx skills add nicoalbrecht/semantic-duration-input installs a skill with setup recipes and the usual pitfalls. It's also in the npm package under skills/.

Upgrading from 0.1? See Migrating to 0.2 and the changelog.

Development

npm run dev          # demo playground (with PrimeVue, Vuetify and shadcn-vue)
npm run docs:dev     # documentation site
npm test             # vitest
npm run typecheck    # vue-tsc
npm run build        # library build to dist/
npm run docs:build   # documentation build to docs/.vitepress/dist

TypeScript is pinned to 6.x because TypeScript 7 no longer provides the JS compiler API that vue-tsc and vite-plugin-dts need.

License

MIT