@ difficialforms/ vuetify- inputs

在所有形式领域——统一密度/可变系统——确保视觉一致性, 全球可配置,表格单元格内含模式。 建造时间 @ difficialforms/ vue- forms。 。 。 .

导言

@dynamicforms/vuetify-inputs 为数据输入提供输入组件, 构建后使每个组件匹配 每一个.

手递一个组件 @ difficialforms/ vue- forms 和该要素 拥有值、 验证、 启用状态和能见度, 且组件会生成它持有的内容 。 每个 组件还使用平原 v-model或者没有约束性。 密度和变体系统以及内线模式 对于表格单元格来说,这三种情况都是一样的.

设计目标

这个图书馆的主要目标是 视觉一致性: 每一个输入组件都应该看起来和行为相同 不论使用哪个组件或该组件出现在应用程序中。 这意味着混合 df-input, (中文(简体) ), df-select, (中文(简体) ), df-checkbox, (中文(简体) ), df-date-time,而同一表格行上的其他人应产生一致、一致的结果 没有任何每个组件的调整.

为此,图书馆引入了 密度/变量系统 适用于所有组成部分:

• 密度 控制一个组件的垂直紧凑度,并可在全球范围设置,每部分注入,或 压倒每个组件。 支持的值为 default, (中文(简体) ), comfortable, (中文(简体) ), compact,以及 inline。 。 。 .
• 备选案文 控制视觉样式(例如:. outlined, (中文(简体) ), underlined, (中文(简体) ), filled, (中文(简体) ), solo,)并遵循同样的 等级.
• 这个 inline 密度是标准Vuetify之外的自定义扩展——它剥去标签和装饰,这样组件 使表单细胞内部清洁.

应用程序启动时可以通过 VuetifyInputsSettings 并通过Vue的传播 提供/插入,因此整个应用程序可以一次性地切换密度或变体.

这个 密度示例 文档中 显示每个密度和变异组合中逐一生成的所有组件,以核实校正 一致的外观.

最重要的东西

• 每个字段相匹配:一个共享的基数,所以一行混合一个文本字段,一个选择,一个复选框和一个 选取日期的选取者不按每个组件调整
• 符合表格单元格的密度数字 : default, (中文(简体) ), comfortable 财务报告和审定财务报表 compact 属于Veitify的; inline 这是 库本身,并剥去其装饰的一字段,直到适合单元格内
• 设定一次外观, 覆盖任何地方:密度和变量从道克读取,然后从字段读取,然后从a读取 provide 从任何祖先,然后插件默认——最具体的先
• 外地有自己的介绍(单位:千美元) @dynamicforms/vue-forms 字段持有标签、提示、占位符, css 类,密度和它所绘制的变体,所以代码中声明的表单不需要显示属性 绘制它的标签

其他一切都一样

• 12个组成部分数字 : df-input, (中文(简体) ), df-text-area, (中文(简体) ), df-select, (中文(简体) ), df-checkbox, (中文(简体) ), df-color, (中文(简体) ), df-date-time, (中文(简体) ), df-file, (中文(简体) ), df-image, (中文(简体) ), df-rtf-editor, (中文(简体) ), df-actions, (中文(简体) ), df-input-hint 财务报告和审定财务报表 df-input-group
• 一个控制器,一个V型模型,或者没有: 约束元素拥有值,有效性,被触动,启用和能见度; v-model 向母体报告更改; 既不保留内值
• 错误、提示和帮助文本 一行,通过图书馆自己制造 MessagesWidget; 一个错误 作为纯文本、 减记或组件 errorText 设置其代码的返回和 段落,或作为英文 detail,通过一条规则显示一个应用程序可以替换——服务器一次, 一旦球场被打动
• 带有图标、标记下、 HTML 或组件的标签,通过 Label 班级, MdString, (中文(简体) ), HtmlString 财务报告和审定财务报表 SimpleComponentDef
• 可见度 —— 说 'full', (中文(简体) ), 'invisible', (中文(简体) ), 'hidden', (中文(简体) ), 'suppress' - 和其后的增强能力 包含区域
• passthroughAttrs: 基本 Vuetify 组件的任何道具, 不在此库中声明
• 行动页:1 Action 带有渲染选项的课, defaultConfirm 编号 : defaultReject现成的 关闭/是/没有工厂,每个断点都可以从 xs 改为 xl
• 选择: 静态选择或同步 fetchChoices,单键或多键,带有图标的芯片,自由值 allowTags
• 上传(单位:千美元) FileComms 有上传进度、删除和定期触摸的对象
• 丰富文本: TipTap 有 Vuetify 工具栏, 与其它输入相同
• 可本地化数字 : translateStrings(),或 translate 设置每个应用程序,连接库本身的字符串, 包括每个 RTF 编辑器工具栏标签和 <df-image>编号 :<df-file>上传和下载提示 应用程序的翻译功能 errorText 设置翻译出错; DateTimeLocaleConfig,或 dateTimeLocale 设置每个应用程序,设置日期fns locale日期格式化,并用 — 见 本地化 实例 每把钥匙和工作 实例
• 类型脚本:每个组件的道具都是导出接口,定义与构建

安装

npm install @dynamicforms/vuetify-inputs

以你为主

import { DynamicFormsInputs } from '@dynamicforms/vuetify-inputs';
import '@dynamicforms/vuetify-inputs/styles.css';

...
const app = createApp(MyApp);
app.use(router);
app.use(vuetify);
// registers the library for use and optionally inputs globally
app.use(DynamicFormsInputs, { registerComponents: true, registerVuetifyComponents: false });

基本用途示例

图书馆提供各种组成部分,包括:

<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: new Field({ value: null }),
  description: new Field({ value: '' }),
  document: new Field({ 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>

文档

详细文件见 https://docs.velis.si/ 动态形式/活化-输入。 。 。 .

可用组件

• 输入库: 所有输入元素的基础组件
• Df 标签: 绘制标签 - 纯文本、 标记下、 HTML 或组件, 并带有图标 - 每个输入方式 其本身
• df- 行动: 一个动作组.
• df 检查框: 复选框组件.
• df- 颜色:一种颜色输入.
• df-日期-时间: 带有可配置格式和类型的日期和时间选择组件.
• df 文档: 带有进度指示的文件上传组件
• df-图像: 带有预览、拖放和粘贴的图像上传
• df 输入: 一般值输入.
• df 输入组: 一个字段的框架,标签和信件行环绕多个输入,例如一组复选框
• df-输入点数: 渲染一个字段或一个组的错误,倒回它的提示文本.
• df-tf-编辑器: 一个RTF编辑器输入.
• df - 选择: 支持静态或动态选项、多选项和标记的选定组件
• df 文本区: 包含可配置行并验证的文本区组件

类型脚本支持

库用TypeScript来写,并提供了所有组件和接口的完整类型定义.

许可证

麻省理工学院