@cocoar/vue-markdown-form 3.1.0-beta.1

package/dist/registry.d.ts

@@ -0,0 +1,4 @@
+import { MarkdownFormFieldRegistry } from './types';
+export declare const BUILTIN_MARKDOWN_FORM_FIELDS: Readonly<MarkdownFormFieldRegistry>;
+export declare function mergeMarkdownFormFields(custom: MarkdownFormFieldRegistry | undefined): MarkdownFormFieldRegistry;
+//# sourceMappingURL=registry.d.ts.map

package/dist/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAA0C,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAkDjG,eAAO,MAAM,4BAA4B,EAAE,QAAQ,CAAC,yBAAyB,CAiG5E,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,yBAAyB,GAAG,SAAS,GAC5C,yBAAyB,CAK3B"}

package/dist/template-parser.d.ts

@@ -0,0 +1,18 @@
+import { MarkdownDocument, MarkdownNode } from '@cocoar/vue-markdown-core';
+import { MarkdownFormField, MarkdownFormFieldRegistry, MarkdownFormMessages, MarkdownFormTemplateIssue } from './types';
+export type MarkdownFormInlineSegment = {
+    readonly type: 'text';
+    readonly text: string;
+} | {
+    readonly type: 'field';
+    readonly field: MarkdownFormField;
+};
+export declare function createMarkdownFormField(props: Readonly<Record<string, string>>, source: 'inline' | 'block', occurrenceId: string, defaultType?: string): MarkdownFormField;
+export declare function parseInlineMarkdownFormFields(source: string, nodeId?: string): MarkdownFormInlineSegment[];
+export declare function fieldFromEmbedNode(node: MarkdownNode): MarkdownFormField | null;
+export declare function collectMarkdownFormFields(doc: MarkdownDocument): MarkdownFormField[];
+export declare function analyzeMarkdownFormTemplate(doc: MarkdownDocument, registry: Readonly<MarkdownFormFieldRegistry>, messages: Readonly<MarkdownFormMessages>): {
+    fields: readonly MarkdownFormField[];
+    issues: readonly MarkdownFormTemplateIssue[];
+};
+//# sourceMappingURL=template-parser.d.ts.map

package/dist/template-parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-parser.d.ts","sourceRoot":"","sources":["../src/template-parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,YAAY,EAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EACV,iBAAiB,EAEjB,yBAAyB,EACzB,oBAAoB,EACpB,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,yBAAyB,GACjC;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAChD;IAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAA;CAAE,CAAC;AA2ClE,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACvC,MAAM,EAAE,QAAQ,GAAG,OAAO,EAC1B,YAAY,EAAE,MAAM,EACpB,WAAW,SAAS,GACnB,iBAAiB,CAgBnB;AAED,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,MAAM,EACd,MAAM,SAAW,GAChB,yBAAyB,EAAE,CAmC7B;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,iBAAiB,GAAG,IAAI,CAW/E;AAED,wBAAgB,yBAAyB,CAAC,GAAG,EAAE,gBAAgB,GAAG,iBAAiB,EAAE,CAcpF;AAED,wBAAgB,2BAA2B,CACzC,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,QAAQ,CAAC,yBAAyB,CAAC,EAC7C,QAAQ,EAAE,QAAQ,CAAC,oBAAoB,CAAC,GACvC;IAAE,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAAC,MAAM,EAAE,SAAS,yBAAyB,EAAE,CAAA;CAAE,CA4BxF"}

package/dist/types.d.ts

@@ -0,0 +1,88 @@
+import { Component } from 'vue';
+import { CoarMarkdownEditorToolEntry } from '@cocoar/vue-markdown-editor';
+export type MarkdownFormMode = 'fill' | 'readonly';
+export type MarkdownFormControlDesign = 'basic' | 'coar';
+export type MarkdownFormFieldSource = 'inline' | 'block';
+export type MarkdownFormFieldLayout = 'inline' | 'row' | 'stacked' | 'block';
+export type MarkdownFormNamedWidth = 'small' | 'medium' | 'large';
+export type MarkdownFormFieldWidth = MarkdownFormNamedWidth | 'fill' | 'full' | `${number}ch` | `${number}rem`;
+export type MarkdownFormFieldWidths = Readonly<Record<MarkdownFormNamedWidth, `${number}ch` | `${number}rem`>>;
+export type MarkdownFormValueType = 'string' | 'number' | 'boolean' | 'string[]' | 'date' | 'datetime' | (string & {});
+export type MarkdownFormValues = Record<string, unknown>;
+export interface MarkdownFormReadonlyDecorations {
+    markdownFrame: boolean;
+    inlineUnderline: boolean;
+}
+export interface MarkdownFormField {
+    readonly occurrenceId: string;
+    readonly id: string;
+    readonly type: string;
+    readonly source: MarkdownFormFieldSource;
+    readonly layout: MarkdownFormFieldLayout;
+    readonly width: string;
+    readonly required: boolean;
+    readonly props: Readonly<Record<string, string>>;
+}
+export interface MarkdownFormMessages {
+    required(field: MarkdownFormField): string;
+    missingId(field: MarkdownFormField): string;
+    duplicateId(field: MarkdownFormField): string;
+    unknownType(field: MarkdownFormField): string;
+    unsupportedLayout(field: MarkdownFormField): string;
+    booleanTrue: string;
+    booleanFalse: string;
+    empty: string;
+}
+export interface MarkdownFormContext {
+    readonly design: MarkdownFormControlDesign;
+    readonly locale: string;
+    readonly widths: MarkdownFormFieldWidths;
+    readonly decorations: Readonly<MarkdownFormReadonlyDecorations>;
+    readonly messages: Readonly<MarkdownFormMessages>;
+    readonly markdownTools: readonly CoarMarkdownEditorToolEntry[];
+}
+export interface MarkdownFormContextInput {
+    design?: MarkdownFormControlDesign;
+    locale?: string;
+    widths?: Partial<MarkdownFormFieldWidths>;
+    decorations?: Partial<MarkdownFormReadonlyDecorations>;
+    messages?: Partial<MarkdownFormMessages>;
+    markdownTools?: readonly CoarMarkdownEditorToolEntry[];
+}
+export interface MarkdownFormFieldControlProps<TValue = unknown> {
+    field: MarkdownFormField;
+    modelValue: TValue;
+    context: Readonly<MarkdownFormContext>;
+    error?: string;
+}
+export interface MarkdownFormFieldReadonlyProps<TValue = unknown> {
+    field: MarkdownFormField;
+    modelValue: TValue;
+    context: Readonly<MarkdownFormContext>;
+}
+export interface MarkdownFormFieldDefinition<TValue = unknown> {
+    control: Component;
+    readonly?: Component;
+    valueType: MarkdownFormValueType;
+    layouts?: readonly MarkdownFormFieldLayout[];
+    defaultValue?: (field: MarkdownFormField) => TValue;
+    isEmpty?: (value: TValue, field: MarkdownFormField) => boolean;
+    validate?: (value: TValue, field: MarkdownFormField, values: Readonly<MarkdownFormValues>, context: Readonly<MarkdownFormContext>) => string | null;
+    formatReadonly?: (value: TValue, field: MarkdownFormField, context: Readonly<MarkdownFormContext>) => string;
+}
+export type MarkdownFormFieldRegistry = Record<string, MarkdownFormFieldDefinition>;
+export type MarkdownFormTemplateIssueCode = 'missing-id' | 'duplicate-id' | 'unknown-type' | 'unsupported-layout';
+export interface MarkdownFormTemplateIssue {
+    readonly code: MarkdownFormTemplateIssueCode;
+    readonly message: string;
+    readonly field: MarkdownFormField;
+}
+export interface MarkdownFormValidationResult {
+    readonly valid: boolean;
+    readonly errors: Readonly<Record<string, string>>;
+    readonly issues: readonly MarkdownFormTemplateIssue[];
+}
+export interface MarkdownFormExpose {
+    validate(): MarkdownFormValidationResult;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@cocoar/vue-markdown-form",
+  "version": "3.1.0-beta.1",
+  "description": "Template-driven Markdown forms with fixed prose, registered field controls, separate values and readonly rendering.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cocoar-dev/cocoar-ui-vue.git",
+    "directory": "packages/markdown-form"
+  },
+  "homepage": "https://docs.cocoar.dev/cocoar-ui-vue/",
+  "bugs": "https://github.com/cocoar-dev/cocoar-ui-vue/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "markdown",
+    "form",
+    "template"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "styles/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./styles/markdown-form.css"
+  },
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint src/",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@cocoar/vue-markdown": "3.1.0-beta.1",
+    "@cocoar/vue-markdown-core": "3.1.0-beta.1",
+    "@cocoar/vue-markdown-editor": "3.1.0-beta.1",
+    "@js-temporal/polyfill": "^0.5.1"
+  },
+  "peerDependencies": {
+    "@cocoar/vue-ui": "3.1.0-beta.1",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@cocoar/vue-ui": "workspace:*",
+    "vue": "^3.5.32"
+  }
+}

package/styles/markdown-form.css

@@ -0,0 +1,177 @@
+.coar-markdown-form > .coar-markdown {
+  max-width: none;
+}
+.coar-markdown-form__issues {
+  margin-block-end: 1rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--coar-color-danger-500, #b42318);
+  border-radius: var(--coar-radius-m, 6px);
+  background: var(--coar-color-danger-50, #fef3f2);
+  color: var(--coar-color-danger-800, #7a271a);
+  font-size: 0.85rem;
+}
+.coar-markdown-form__issues ul {
+  margin: 0.35rem 0 0;
+  padding-inline-start: 1.25rem;
+}
+.coar-markdown-form-field {
+  min-width: 0;
+}
+.coar-markdown-form-field--inline {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 0.22rem;
+  line-height: normal;
+  vertical-align: middle;
+}
+.coar-markdown-form-field--inline > :not(.coar-markdown-form-field__error) {
+  width: 100%;
+}
+.coar-markdown-form-field--layout-row,
+.coar-markdown-form-field--layout-stacked {
+  flex-wrap: wrap;
+}
+.coar-markdown-form-field--width-fill,
+.coar-markdown-form-field--width-full {
+  width: 100% !important;
+}
+.coar-markdown-form-paragraph--row {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  margin-block-end: 0;
+  line-height: normal;
+}
+.coar-markdown-form-paragraph--row > .coar-markdown-form-text-fragment {
+  display: flex;
+  min-width: 0;
+}
+.coar-markdown-form-paragraph--row .coar-markdown-form-field--layout-row {
+  margin: 0;
+  width: 100% !important;
+}
+.coar-markdown-form-paragraph--stacked {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+  line-height: normal;
+}
+.coar-markdown-form-paragraph--stacked > .coar-markdown-form-text-fragment {
+  display: flex;
+  min-width: 0;
+}
+.coar-markdown-form-paragraph--stacked .coar-markdown-form-field--layout-stacked {
+  margin: 0;
+  width: 100% !important;
+}
+.coar-markdown-form-field--block {
+  display: block;
+  min-height: 58px;
+  margin: 2px 0 10px;
+  overflow: hidden;
+  border: 1px dashed #abc0c7;
+  border-radius: 3px 10px 3px 10px;
+  background: #fbfdfd;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+.coar-markdown-form-field--block:focus-within {
+  border-color: #326b8c;
+  box-shadow: 0 0 0 3px rgba(50, 107, 140, 0.12);
+}
+.coar-markdown-form-field--frameless {
+  border-color: transparent;
+  background: transparent;
+}
+.coar-markdown-form-field--frameless:focus-within {
+  border-color: transparent;
+  box-shadow: none;
+}
+.coar-markdown-form-field--block > .coar-md-root {
+  min-height: 56px;
+  border: 0;
+}
+.coar-markdown-form-field--block .coar-md-area {
+  padding: 6px 10px;
+}
+.coar-markdown-form-field--block .coar-md-area .milkdown {
+  min-height: 44px;
+  padding: 0;
+}
+.coar-markdown-form-field--block > .coar-markdown {
+  min-height: 56px;
+  padding: 6px 10px;
+}
+.coar-markdown-form-field--block .ProseMirror > :last-child,
+.coar-markdown-form-field--block > .coar-markdown > :last-child {
+  margin-block-end: 0;
+}
+.coar-markdown-form-field--underlined {
+  border-bottom: 1px solid #a5b3b8;
+}
+.coar-markdown-form-field__readonly {
+  padding: 1px 2px;
+  color: #1c3c4b;
+  font-weight: 700;
+}
+.coar-markdown-form-field__empty {
+  display: block;
+  min-height: 44px;
+  padding: 8px 10px;
+  color: #9aa5aa;
+}
+.coar-markdown-form-field__invalid {
+  padding: 0.3rem 0.45rem;
+  color: var(--coar-color-danger-700, #b42318);
+  font-size: 0.78rem;
+}
+.coar-markdown-form-field--block.coar-markdown-form-field--error {
+  border-color: var(--coar-color-danger-500, #b42318);
+  border-style: solid;
+  box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.1);
+}
+.coar-markdown-form-field__error {
+  display: block;
+  flex-basis: 100%;
+  margin-block-start: 3px;
+  color: var(--coar-color-danger-700, #b42318);
+  font-size: 0.7rem;
+  line-height: 1.2;
+}
+.coar-markdown-form-field__error--inline {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+.coar-markdown-form-basic-control[aria-invalid='true'] {
+  border-color: var(--coar-color-danger-500, #b42318);
+}
+.coar-markdown-form-basic-control {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 27px;
+  padding: 2px 6px;
+  border: 1px solid #aebbc0;
+  border-radius: 3px;
+  background: #fff;
+  color: #25353d;
+  font: inherit;
+  font-size: 12px;
+}
+.coar-markdown-form-basic-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .coar-markdown-form-field {
+    transition-duration: 0.01ms !important;
+  }
+}