@dynamicforms/vuetify-inputs 0.1.0

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@dynamicforms/vuetify-inputs",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Visual components for data entry using @dynamicforms/vue-forms",
+  "author": "Jure Erznožnik",
+  "files": [
+    "dist/*"
+  ],
+  "main": "dist/dynamicforms-vuetify-inputs.umd.cjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/dynamicforms-vuetify-inputs.umd.cjs",
+      "import": "./dist/dynamicforms-vuetify-inputs.js"
+    }
+  },
+  "workspaces": [
+    "docs"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run --coverage",
+    "lint": "eslint src && vue-tsc --noEmit",
+    "docs:dev": "npm run docs:dev -w docs",
+    "docs:build": "npm run docs:build -w docs",
+    "docs:preview": "npm run docs:preview -w docs"
+  },
+  "keywords": [
+    "vue",
+    "dynamicforms",
+    "velis",
+    "forms",
+    "data entry"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:velis74/dynamicforms-vuetify-inputs.git"
+  },
+  "issues": "https://github.com/velis74/dynamicforms-vuetify-inputs/issues",
+  "peerDependencies": {
+    "@ckeditor/ckeditor5-vue": "^7.0.0",
+    "@dynamicforms/vue-forms": "^0.2.3",
+    "ckeditor5": "^43.0.0",
+    "date-fns": "^4.1.0",
+    "lodash-es": "^4.17.12",
+    "vue": "^3.4",
+    "vue-ionicon": "^2.1.1",
+    "vue-markdown-render": "^2.2.1",
+    "vuetify": "^3.8.2"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@vitejs/plugin-vue": "^5",
+    "@vitest/coverage-v8": "^3",
+    "@vue/test-utils": "^2.2.4",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint-config-velis": "^1.1.16",
+    "jsdom": "^26.0.0",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "typescript": "^5",
+    "vite": "^5",
+    "vite-plugin-dts": "^4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^3",
+    "vue-tsc": "^2"
+  },
+  "eslintConfig": {
+    "extends": [
+      "velis"
+    ],
+    "ignorePatterns": [
+      "dist/*",
+      "coverage/*",
+      "node_modules/*",
+      "docs/*",
+      "vite.config.ts"
+    ]
+  }
+}

package/readme.md

@@ -0,0 +1,108 @@
+# @dynamicforms/vuetify-inputs
+
+Visual components based on Vuetify library to support @dynamicforms/vue-forms.
+
+## Introduction
+
+`@dynamicforms/vuetify-inputs` provides input components for data entry that will be stored in form data. It is the 
+visual implementation of logical concepts from 
+[@dynamicforms/vue-forms](https://github.com/velis74/dynamicforms-vue-forms).
+
+## Features
+
+- **DynamicForms Integration**: Seamlessly works with `@dynamicforms/vue-forms` for state management and validation
+- **Vuetify Based**: Built on top of Vuetify components for beautiful Material Design styling
+- **Reactive**: Full Vue reactivity support with both v-model and DynamicForms Field controls
+- **TypeScript Support**: Comprehensive type definitions for excellent developer experience
+- **Highly opinionated**: Opinionated to ensure uniform look throughout the application. 
+
+## Installation
+
+```bash
+npm install @dynamicforms/vuetify-inputs
+```
+
+## Basic Usage Example
+
+The library offers various components, including:
+
+```vue
+<template>
+  <div>
+    <df-select
+      :control="form.fields.country"
+      :choices="countries"
+      label="Select Country"
+    />
+    
+    <df-text-area
+      :control="form.fields.description"
+      label="Description"
+      :rows="5"
+      :max-rows="10"
+    />
+    
+    <df-file
+      :control="form.fields.document"
+      :comms="fileComms"
+      label="Upload Document"
+    />
+  </div>
+</template>
+
+<script setup>
+import { Group, Field } from '@dynamicforms/vue-forms';
+import { DfSelect, DfTextArea, DfFile } from '@dynamicforms/vuetify-inputs';
+
+// Create a form with fields
+const form = new Group({
+  country: Field.create({ value: null }),
+  description: Field.create({ value: '' }),
+  document: Field.create({ value: null })
+});
+
+// Define options for the select field
+const countries = [
+  { id: 'us', text: 'United States' },
+  { id: 'ca', text: 'Canada' },
+  { id: 'uk', text: 'United Kingdom' },
+  // more countries...
+];
+
+// Communication for file field
+const fileComms = {
+  upload: async (file, progressCallback) => {
+    // Upload implementation
+  },
+  delete: async (fileId) => {
+    // Delete implementation
+  },
+  touch: async (fileId) => {
+    // Touch implementation
+  }
+};
+</script>
+```
+
+## Documentation
+
+Detailed documentation is available as a VitePress site in the `/docs` folder. To view the documentation locally:
+
+```bash
+npm run docs:dev
+```
+
+## Available Components
+
+- **df-select**: A selection component supporting static or dynamic options, multiple selection, and tagging
+- **df-textarea**: A textarea component with configurable rows and validation
+- **df-file**: A file upload component with progress indication
+- **InputBase**: The base component for all input elements
+
+## TypeScript Support
+
+The library is written in TypeScript and provides full type definitions for all components and interfaces.
+
+## License
+
+MIT