@ 导出/ 下行- vue

共享 Vue 2 组件库用于操控 Nextcloud apps — 高级 UI, OpenRegister 集成, 以及 NL 设计系统支持

@conduction/nextcloud-vue 是一个 npm 组件库, 坐在顶端 @nextcloud/vue 并提供更高层次,有观点的组件用于构建Nextcloud apps. 它处理重复的规律——由计划驱动的表格,CRUD对话框,被页化的列表,面相搜索——所以每个应用程序只写出特定域的部分.

内部使用 皮佩林克语Name, (中文(简体) ), 多西克语Name, (中文(简体) ), 拉尔平克,以及其它"下个云"应用程序.

要求: Vue 2.7, Pinia 2, @nextcloud/vue 8 (英语)

特征

布局和页面组件

数据显示

单对象对话框

大众行动对话框

设置配置( C)

州管理层

可编曲

Schema 公用事业

建筑

graph TD
    A[Nextcloud App] -->|imports| B[@conduction/nextcloud-vue]
    B --> C[Components]
    B --> D[useObjectStore]
    B --> E[Composables]
    B --> F[Schema Utils]
    D -->|CRUD| G[OpenRegister REST API]
    C -->|styles via| H[Nextcloud CSS Variables]
    C -->|NL Design tokens| I[--nldesign-* CSS vars]

双相对话框模式

所有对话框都遵循可预测的确认/结果流,使母组件控制API调用:

// 1. Dialog emits @confirm with user input
// 2. Parent handles API call
// 3. Parent calls dialog.setResult(response) via $ref
// 4. Dialog shows toast and auto-closes

Schema- Driven 组件

通过一个 JSON Schema 并获得一个零配置的完整工作表或表格:

<CnIndexPage
  :schema="caseTypeSchema"
  :objects="caseTypes"
  @save="onSave"
  @delete="onDelete"
/>

安装

npm install @conduction/nextcloud-vue

与组件导入一起导入 CSS :

import '@conduction/nextcloud-vue/dist/nextcloud-vue.css'
import { CnIndexPage, useObjectStore } from '@conduction/nextcloud-vue'

Markdown sanitization (CnRoadmap 项目/ CnSuggest Feature Modal) 互联网档案馆的存檔,存档日期2013-12-21

特性和路线图组件家族( E)CnRoadmapItem, (中文(简体) ), CnSuggestFeatureModal)使来自 GitHub 发行机构和用户输入的不可信标记降低。 两个部件都通过标记 marked 然后通过 DOMPurify 使用导出 SAFE_MARKDOWN_DOMPURIFY_CONFIG 常数 - <script>, (中文(简体) ), on* 处理者, javascript: URL( URL) , (中文), <iframe>,以及 <style> 被剥去之前 v-html。 。 。 .

两者 marked 财务报告和审定财务报表 dompurify 将在此库中宣布 dependencies 和船在消费者的捆绑。 已经给不同版本打针的App可以添加自己的限制——严格的配置是最重要的,而不是精确的依赖性版本. 最小兼容版本记录在 package.json (单位:千美元)marked ^15, (中文(简体) ), dompurify ^3) (中文(简体) ).

Webpack Alias(用于本地开发)

直接针对源开发时,在 webpack.config.js 防止双重错误:

config.resolve.alias = {
  '@conduction/nextcloud-vue': path.resolve(__dirname, '../nextcloud-vue/src'),
  'vue': path.resolve(__dirname, 'node_modules/vue'),
  'pinia': path.resolve(__dirname, 'node_modules/pinia'),
  '@nextcloud/vue': path.resolve(__dirname, 'node_modules/@nextcloud/vue'),
}

重要内容: 没有这些别名,网络包装可能解决 从图书馆的Vue和Pinia node_modules,生成双重实例来打破反应和状态管理.

目录结构

nextcloud-vue/
├── src/
│   ├── index.js              # Main barrel export
│   ├── components/           # 30+ Vue 2 SFCs (one directory each)
│   │   ├── CnIndexPage/
│   │   ├── CnDataTable/
│   │   ├── CnFormDialog/
│   │   └── ...
│   ├── store/
│   │   ├── index.js          # useObjectStore, createObjectStore
│   │   └── plugins/          # auditTrails, relations, files, lifecycle, registerMapping
│   ├── composables/          # useListView, useDetailView, useSubResource
│   ├── utils/                # schema, headers, errors, formatting
│   ├── css/                  # Modular CSS (one file per component group)
│   └── types/index.d.ts      # TypeScript definitions
├── tests/                    # Jest test suite
├── dist/                     # Built output (ESM, CJS, CSS)
├── rollup.config.js          # Build configuration
└── package.json

发展

npm install
npm run dev       # Watch mode (Rollup)
npm run build     # Production build
npm test          # Jest tests
npm run lint      # ESLint
npm run stylelint # Stylelint

技术堆栈

图标设置许可( L)

CnIconPicker 能够显示图标 材料设计图标( MDI), (中文(简体) ), 字体赞美,则 OpenGemeenten 打开引擎 政府图标集. 此库没有图标包 . 它只运送 能力 - 拾取器UI加 fromMdiJs 编号 : fromFontAwesome 编号 : fromOpenGemeenten 目录适配器。 您带来了图标数据 :

import { fromFontAwesome, fromOpenGemeenten } from '@conduction/nextcloud-vue'
import { fas } from '@fortawesome/free-solid-svg-icons'

<CnIconPicker
  v-model="icon"
  searchable
  :sources="['mdi', 'fontawesome', 'opengemeenten']"
  :catalogues="{
    fontawesome: fromFontAwesome({ fas }),
    opengemeenten: fromOpenGemeenten(myOpenGemeentenIcons),
  }" />

• 这个 计量吸入器 源使用可选 @mdi/js 依赖性(在没有依赖性的情况下回到一个小型内置设定)——计量吸入器获得许可 Apache-2.0 / 麻省理工学院。 。 。 .
• 字体赞美 - 自由图标是 CC BY 4.0 / SIL OFL 1.1 / 麻省理工学院;Pro图标和"Font August"名称/标记带有商业术语. 见 https://fontawesome.com (中文(简体) )。 。 。 .
• OpenGemeenten 打开引擎 (单位:千美元)(原始内容存档于2018-10-29). gemeenteniconen.nl)——圣像本身为 CC0 1.0 (中文(简体) ) (公有领域),但 @opengemeenten/iconset-web-component npm 软件包获得许可 CC BY-NC-ND 4.0 (英语) (非商业性,无衍生物). 见 https://github.com/OpenGemeenten/Iconenset 页面存档备份,存于互联网档案馆。 。 。 .

您负责确认您被许可使用 FontAwesome 和 OpenGemeenten 软件包 . 通过适配器传递一包没有权利——这个库只提供自己获得和许可的图标制作能力. 归属于各项目.

许可证

欧盟PL-1.2

作者数

由 传导 ——面向荷兰政府和公共部门组织的开源软件.