@enos5/enos-vue-default

来自 Enos 的共享 Vue 3 UI 组件,被包装为 monrepo 内部的默认工作空间.

所需资源

• 节点.js 20+
• 无

安装

从工作空间根 :

npm install

构建此软件包 :

npm run build -w @enos5/enos-vue-default

在另一个工程中使用

安装已发布的软件包 :

npm install @enos5/enos-vue-default

此软件包预计消费应用中的这些对等依赖性 :

• vue
• @inertiajs/vue3 (单位:千美元)^2.0.0 或者说 ^3.0.0(中文(简体) )
• @heroicons/vue
• vue-i18n

丰富的文本支持使用"TinyMCE"并被捆绑作为这个库中的常规依赖. 组件设定镜像 Jetstream 软件包,但 ApplicationLogo, (中文(简体) ), AuthenticationCard, (中文(简体) ), Banner, (中文(简体) ), NavGroup, (中文(简体) ), NavLink, (中文(简体) ), NavMenu,以及 ResponsiveNavLink。 。 。 .

你可以在全球注册:

import { createApp } from 'vue'
import App from './App.vue'
import { EnosVueDefault } from '@enos5/enos-vue-default'

createApp(App).use(EnosVueDefault).mount('#app')

或导入单个组件:

import { Button, ColorPicker, TextInput } from '@enos5/enos-vue-default'

ColorPicker 解析其内置的 UI 标签 vue-i18n 使用英文副本作为密钥。 如果您的应用程序想要本地化的拾取者染色体, 请定义密钥的翻译, 如 Color, (中文(简体) ), Selected color, (中文(简体) ), Pick color from screen, (中文(简体) ), Hue, (中文(简体) ), Opacity, (中文(简体) ), Hex value, (中文(简体) ), Saturation and brightness for {color},以及 Rainbow color area for {color}。 。 。 .

DateInput 财务报告和审定财务报表 DateRangeInput 默认为英语语言行为 。 过 locale 来覆盖它,对于本地浏览器日期字段,请记住最后的取取器 UI 仍然是由浏览器控制的, 并且 lang 用作语言提示.

样式在导入包入口时自动被加载,因此消费者不必记住单独的 CSS 导入.

如果一个耗用过的app想要更早的样式表加载 npm run dev,它可以明确选择进入稳定样式表条目:

import '@enos5/enos-vue-default/styles.css'

这种明确的进口是可选的。 它主要改进了dev-mode的先涂料,并避免从 dist 直接说.

表格列控件

TableList 除非启用了新的控件,否则将保留其现有行为:

<script setup>
import { ref } from 'vue'
import { TableList } from '@enos5/enos-vue-default'

const hiddenColumns = ref(['brand'])
const columns = [
  { key: 'name', label: 'Name', hideable: false },
  { key: 'brand', label: 'Brand' },
  { key: 'status', label: 'Status', sticky: 'right', width: '8rem' },
]
</script>

<template>
  <TableList
    v-model:hidden-columns="hiddenColumns"
    :columns="columns"
    :data="rows"
    column-visibility
    sticky-actions
  >
    <template #actions="{ item }">
      <!-- row actions -->
    </template>
  </TableList>
</template>

• sticky-actions 保持专注 actions 水平滚动时在右边缘可见槽列,将多按钮组保留在一行上,并右对齐整组.
• column.sticky: 'right' (或 true)将固定数据栏标出。 普通列可以通过其命名的槽来制作自定义按钮,但它仍然有别于专用的 actions 插槽栏。 多个粘相列自动计算出它们的右偏移.
• column-visibility 显示内置设置按钮和对话框.
• v-model:hidden-columns 控制隐藏的列键。 没有模型, column.hidden: true 供给最初的内部状态.
• column.hideable: false 在设置对话框中省略所需的一栏.
• 复选框和“显示所有”更改仍为草稿,直到用户用“OK”确认为止。 取消,逃脱,背景解职 放弃了草案.
• 这个 columnVisibility* 标签道具将按钮、标题、描述、“全部显示”,应用,并取消标签.

TableListForm 支持同样的 sticky-actions 螺旋桨和 column.sticky: 'right' 行为 列能见度被故意限制在 TableList 因此,正在编辑的字段不能从可编辑行中消失.

发布 到 npm 时

在发布前, 构建包并验证焦油球 :

npm run build -w @enos5/enos-vue-default
npm pack --dry-run -w packages/default

然后将版本打入 packages/default/package.json并公布工作空间

npm publish -w packages/default --access public

此套件的首次公开发布需要 --access public。当软件包在 npm 上存在后,随后的发布可以使用相同的命令.

浮动动作提示

FloatingActionHint 可以在默认包中找到。 它需要一个独特的 id页:1 label,则a description设置默认槽 descriptionId 行动 aria-describedby。提示打开了悬浮或焦点,关闭了逃逸或离开动作,并跟踪查看器重新大小和容器滚动。 其内容被传送到 body 避免被祖先的容器剪接.

<script setup lang="ts">
import { FloatingActionHint } from '@enos5/enos-vue-default'
</script>

<template>
  <FloatingActionHint
    id="save-action-hint"
    label="Save"
    description="Save your changes without leaving this page."
  >
    <template #default="{ descriptionId }">
      <button type="button" :aria-describedby="descriptionId">Save</button>
    </template>
  </FloatingActionHint>
</template>

可运行的用法示例见 examples/FloatingActionHint.vue。 。 。 .

文件上传

使用 InputGroup 与 type="file" 用于没有当前图像预览的上传控制。 它默认接受任何文件类型. 过 accept 用逗号分隔的扩展或MIME类型限制取取浏览器.

<script setup>
import { ref } from 'vue'
import { InputGroup } from '@enos5/enos-vue-default'

const attachment = ref(null)
</script>

<template>
  <InputGroup
    v-model="attachment"
    type="file"
    label="Attachment"
    accept=".pdf,.docx"
  />
</template>

模型收到一个 File 或者说 null。拾取器过滤器不会取代服务器侧文件验证. FileInput 也可作为一个独立的组成部分.

响应表格搜索

TableSearch 从容器中大小,包括侧边栏和 面板 。 1280px以下, 搜索输入位于过滤器上方; 过滤网格 在狭长的电话上安装一列,并在空间允许时添加一列。 1280px 和 (英语) 更宽, 搜索输入和所有过滤字段共享一行, 空间更多 为过滤器保留,搜索输入封顶于40rem。 删除的切换 并且结果计数在右边一致,垂直地以搜索行为中心. 打开 更小的容器会堆放在搜索和过滤器下面。 在平板电脑上 容器,切换和计数它们之间的空格 计数坐在切换下方。 长问摘要包. search-fields-layout="stacked" 将搜索置于额外字段之上.

直接将字段传递到槽; 包装器使用自动配置网格 :

<TableList
  v-model:search-value="search"
  :data="users"
  :columns="columns"
  search
  :search-show-deleted-toggle="true"
  :search-show-deleted="showDeleted"
  @update:search-show-deleted="showDeleted = $event"
  :search-ui="{
    input: 'min-w-[min(100%,16rem)] flex-[2_1_24rem]',
    fields: 'grid min-w-[min(100%,12rem)] flex-1 gap-3 sm:grid-cols-2',
  }"
>
  <template #search-fields>
    <InputGroup v-model="role" type="select" :options="roles" />
    <InputGroup v-model="status" type="select" :options="statuses" />
  </template>
</TableList>

使用 ui 打开 TableSearch 直接,或 search-ui 打开 TableList。每个键接受 a Vue 类值(字符串、数组或对象),并替换包件默认值 课程。 未指定的密钥保留其默认值 。 不需要内部选择器 .

这个名字 @container/table-search 即使当 ui.root 实值 ,因此普通的被命名的容器变体仍可用于覆被. 变化类不改变过滤,模型,事件,或服务器/客户端模式.

日期 Week 输入

选择日历周 v-model="week"时 week 实值 { start: 'YYYY-MM-DD', end: 'YYYY-MM-DD' }设置 week-starts-on 改为 0 (星期日,默认)或 1 (星期一) (英语). 这个 filter 回调收到一周,然后返回是否可以选择. locale, (中文(简体) ), placeholder,以及 disabled 也得到支持.

DateRangeInput 还接受 week-starts-on数字 : 0 星期日( 默认) 或 1 周一的时候 这控制了工作日标题和日历网格. DateInput 使用浏览器本地拾取器,而不控制其周始.