@lblod/ember-rdfa-editor-lblod-plugins 7.1.0 → 8.0.1

package/addon/plugins/rdfa-date-plugin/nodes/date.ts

@@ -1,4 +1,8 @@
-import { NodeSpec } from '@lblod/ember-rdfa-editor';
+import {
+  createEmberNodeSpec,
+  createEmberNodeView,
+  EmberNodeConfig,
+} from '@lblod/ember-rdfa-editor/utils/ember-node';
 import {
   DCT,
   EXT,
@@ -7,128 +11,160 @@ import {
 import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { DateOptions } from '..';
 import { formatDate, validateDateFormat } from '../utils';
+import { PNode } from '@lblod/ember-rdfa-editor';
 
-const date: (options: DateOptions) => NodeSpec = (options) => {
-  return {
-    group: 'inline',
-    inline: true,
-    attrs: {
-      mappingResource: {
-        default: null,
-      },
-      value: {},
-      format: {
-        default: options.formats[0].dateFormat,
-      },
-      onlyDate: {
-        default: true,
-      },
-      custom: {
-        default: false,
-      },
+const emberNodeConfig = (options: DateOptions): EmberNodeConfig => ({
+  name: 'date',
+  group: 'inline',
+  componentPath: 'rdfa-date-plugin/date',
+  inline: true,
+  selectable: true,
+  draggable: false,
+  atom: true,
+  defining: false,
+  options,
+  attrs: {
+    mappingResource: {
+      default: null,
     },
-    selectable: true,
-    leafText: (node) => {
-      const { value, onlyDate, format } = node.attrs;
-      const humanReadableDate = value
-        ? formatDate(new Date(value), format)
-        : onlyDate
-        ? options.placeholder.insertDate
-        : options.placeholder.insertDateTime;
-      return humanReadableDate;
+    humanReadableDate: {
+      default: options.placeholder.insertDate,
     },
-    toDOM: (node) => {
-      const { value, onlyDate, format, mappingResource, custom } = node.attrs;
-      const datatype = onlyDate ? XSD('date') : XSD('dateTime');
-      let humanReadableDate: string;
-      if (value) {
-        if (validateDateFormat(format).type === 'ok') {
-          humanReadableDate = formatDate(new Date(value), format);
-        } else {
-          humanReadableDate = 'Ongeldig formaat';
-        }
-      } else {
-        humanReadableDate = onlyDate
-          ? options.placeholder.insertDate
-          : options.placeholder.insertDateTime;
-      }
-      const dateAttrs = {
-        datatype: datatype.prefixed,
-        property: EXT('content').prefixed,
-        'data-format': format as string,
-        'data-custom': custom ? 'true' : 'false',
-        ...(!!value && { content: value as string }),
-      };
-      if (mappingResource) {
-        return [
-          'span',
-          {
-            resource: mappingResource as string,
-            typeof: EXT('Mapping').prefixed,
-            class: 'date',
-          },
-          ['span', { property: DCT('type').prefixed, content: 'date' }],
-          ['span', dateAttrs, humanReadableDate],
-        ];
+    value: {},
+    format: {
+      default: options.formats[0].dateFormat,
+    },
+    onlyDate: {
+      default: true,
+    },
+    custom: {
+      default: false,
+    },
+    label: {
+      default: '',
+    },
+  },
+  leafText: (node: PNode) => {
+    const { value, onlyDate, format } = node.attrs;
+    const humanReadableDate = value
+      ? formatDate(new Date(value), format)
+      : onlyDate
+      ? options.placeholder.insertDate
+      : options.placeholder.insertDateTime;
+    return humanReadableDate;
+  },
+  toDOM: (node) => {
+    const { value, onlyDate, format, mappingResource, custom, label } =
+      node.attrs;
+    const datatype = onlyDate ? XSD('date') : XSD('dateTime');
+    let humanReadableDate: string;
+    if (value) {
+      if (validateDateFormat(format).type === 'ok') {
+        humanReadableDate = formatDate(new Date(value), format);
       } else {
-        return ['span', { class: 'date', ...dateAttrs }, humanReadableDate];
+        humanReadableDate = 'Ongeldig formaat';
       }
+    } else {
+      humanReadableDate = (onlyDate as boolean)
+        ? options.placeholder.insertDate
+        : options.placeholder.insertDateTime;
+    }
+    const dateAttrs = {
+      datatype: datatype.prefixed,
+      property: EXT('content').prefixed,
+      'data-format': format as string,
+      'data-custom': custom ? 'true' : 'false',
+      ...(!!value && { content: value as string }),
+    };
+    if (mappingResource) {
+      return [
+        'span',
+        {
+          resource: mappingResource as string,
+          typeof: EXT('Mapping').prefixed,
+          class: 'date',
+          'data-label': label as string,
+        },
+        ['span', { property: DCT('type').prefixed, content: 'date' }],
+        ['span', dateAttrs, humanReadableDate],
+      ];
+    } else {
+      return ['span', { class: 'date', ...dateAttrs }, humanReadableDate];
+    }
+  },
+  parseDOM: [
+    {
+      tag: 'span',
+      getAttrs: (node: HTMLElement) => {
+        if (
+          hasRDFaAttribute(node, 'datatype', XSD('date')) ||
+          hasRDFaAttribute(node, 'datatype', XSD('dateTime'))
+        ) {
+          const onlyDate = hasRDFaAttribute(node, 'datatype', XSD('date'));
+          return {
+            value: node.getAttribute('content') ?? new Date().toISOString(),
+            onlyDate,
+            format: node.dataset.format,
+            custom: node.dataset.custom === 'true',
+          };
+        }
+        return false;
+      },
     },
-    parseDOM: [
-      {
-        tag: 'span',
-        getAttrs: (node: HTMLElement) => {
-          if (
-            hasRDFaAttribute(node, 'datatype', XSD('date')) ||
-            hasRDFaAttribute(node, 'datatype', XSD('dateTime'))
-          ) {
-            const onlyDate = hasRDFaAttribute(node, 'datatype', XSD('date'));
+    {
+      tag: 'span',
+      getAttrs: (node: HTMLElement) => {
+        if (hasRDFaAttribute(node, 'typeof', EXT('Mapping'))) {
+          const mappingResource = node.getAttribute('resource');
+          if (!mappingResource) {
+            return false;
+          }
+          const variableType = [...node.children]
+            .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
+            ?.getAttribute('content');
+          const datatype = [...node.children]
+            .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
+            ?.getAttribute('datatype');
+          if (variableType === 'date' && datatype) {
+            const onlyDate = !![...node.children].find((el) =>
+              hasRDFaAttribute(el, 'datatype', XSD('date'))
+            );
+            const dateNode = [...node.children].find((el) =>
+              hasRDFaAttribute(el, 'property', EXT('content'))
+            ) as HTMLElement | undefined;
+            let humanReadableDate: string;
+            const value = dateNode?.getAttribute('content');
+            const format = dateNode?.dataset.format;
+            if (value && format) {
+              if (validateDateFormat(format).type === 'ok') {
+                humanReadableDate = formatDate(new Date(value), format);
+              } else {
+                humanReadableDate = 'Ongeldig formaat';
+              }
+            } else {
+              humanReadableDate = onlyDate
+                ? options.placeholder.insertDate
+                : options.placeholder.insertDateTime;
+            }
+            const label = node.getAttribute('data-label') || variableType;
             return {
-              value: node.getAttribute('content') ?? new Date().toISOString(),
+              mappingResource,
               onlyDate,
-              format: node.dataset.format,
-              custom: node.dataset.custom === 'true',
+              humanReadableDate,
+              value: value,
+              format: format,
+              custom: dateNode?.dataset.custom === 'true',
+              label,
             };
           }
-          return false;
-        },
-      },
-      {
-        tag: 'span',
-        getAttrs: (node: HTMLElement) => {
-          if (hasRDFaAttribute(node, 'typeof', EXT('Mapping'))) {
-            const mappingResource = node.getAttribute('resource');
-            if (!mappingResource) {
-              return false;
-            }
-            const variableType = [...node.children]
-              .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
-              ?.getAttribute('content');
-            const datatype = [...node.children]
-              .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
-              ?.getAttribute('datatype');
-            if (variableType === 'date' && datatype) {
-              const onlyDate = !![...node.children].find((el) =>
-                hasRDFaAttribute(el, 'datatype', XSD('date'))
-              );
-              const dateNode = [...node.children].find((el) =>
-                hasRDFaAttribute(el, 'property', EXT('content'))
-              ) as HTMLElement | undefined;
-              return {
-                mappingResource,
-                onlyDate,
-                value:
-                  dateNode?.getAttribute('content') ?? new Date().toISOString(),
-                format: dateNode?.dataset.format,
-                custom: dateNode?.dataset.custom === 'true',
-              };
-            }
-          }
-          return false;
-        },
+        }
+        return false;
       },
-    ],
-  };
-};
+    },
+  ],
+});
 
-export default date;
+export const date = (options: DateOptions) =>
+  createEmberNodeSpec(emberNodeConfig(options));
+export const dateView = (options: DateOptions) =>
+  createEmberNodeView(emberNodeConfig(options));

package/addon/plugins/validation/README.md

@@ -77,7 +77,7 @@ position in the path
 
 
 
-### `minCount: number`
+### minCount
 
 - type: `number`
 - meaning: the specified shape must occur at least as many times as the specified amount in the focusNode

package/addon/plugins/variable-plugin/nodes.ts

@@ -9,10 +9,55 @@ import {
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { v4 as uuidv4 } from 'uuid';
+import {
+  MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY,
+  MAXIMUM_VALUE_PNODE_KEY,
+  MINIMUM_VALUE_HTML_ATTRIBUTE_KEY,
+  MINIMUM_VALUE_PNODE_KEY,
+} from './utils/constants';
+import { PNode } from '@lblod/ember-rdfa-editor';
 
-const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'], 
+const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'],
                           span[property~='${EXT('content').full}']`;
 
+export const getHTMLNodeExtraAttributes = ({
+  node,
+  type,
+}: {
+  node: HTMLElement;
+  type: string;
+}) => {
+  if (type === 'number') {
+    return {
+      [MINIMUM_VALUE_PNODE_KEY]:
+        node.getAttribute(MINIMUM_VALUE_HTML_ATTRIBUTE_KEY) ?? null,
+      [MAXIMUM_VALUE_PNODE_KEY]:
+        node.getAttribute(MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY) ?? null,
+    };
+  }
+
+  return {};
+};
+
+export const getPNodeExtraAttributes = ({
+  node,
+  type,
+}: {
+  node: PNode;
+  type: string;
+}) => {
+  if (type === 'number') {
+    return {
+      [MINIMUM_VALUE_HTML_ATTRIBUTE_KEY]:
+        (node.attrs[MINIMUM_VALUE_PNODE_KEY] as string) ?? null,
+      [MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY]:
+        (node.attrs[MAXIMUM_VALUE_PNODE_KEY] as string) ?? null,
+    };
+  }
+
+  return {};
+};
+
 const emberNodeConfig: EmberNodeConfig = {
   name: 'variable',
   componentPath: 'variable-plugin/variable',
@@ -39,6 +84,15 @@ const emberNodeConfig: EmberNodeConfig = {
     datatype: {
       default: null,
     },
+    label: {
+      default: '',
+    },
+    minimumValue: {
+      default: null,
+    },
+    maximumValue: {
+      default: null,
+    },
   },
   toDOM: (node) => {
     const {
@@ -48,12 +102,17 @@ const emberNodeConfig: EmberNodeConfig = {
       type,
       datatype,
       source,
+      label,
     } = node.attrs;
+
     const sourceSpan = source
       ? [
           [
             'span',
-            { property: DCT('source').prefixed, resource: source as string },
+            {
+              property: DCT('source').prefixed,
+              resource: source as string,
+            },
           ],
         ]
       : [];
@@ -73,6 +132,8 @@ const emberNodeConfig: EmberNodeConfig = {
       {
         resource: mappingResource as string,
         typeof: EXT('Mapping').prefixed,
+        'data-label': label as string,
+        ...getPNodeExtraAttributes({ node, type: type as string }),
       },
       [
         'span',
@@ -115,10 +176,11 @@ const emberNodeConfig: EmberNodeConfig = {
           const type = [...node.children]
             .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
             ?.getAttribute('content');
+          const label = node.getAttribute('data-label') || type;
           const datatype = [...node.children]
             .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
             ?.getAttribute('datatype');
-          if (!mappingResource) {
+          if (!mappingResource || !type) {
             return false;
           }
           return {
@@ -130,8 +192,11 @@ const emberNodeConfig: EmberNodeConfig = {
             source,
             type,
             datatype,
+            label,
+            ...getHTMLNodeExtraAttributes({ type, node }),
           };
         }
+
         return false;
       },
       contentElement: CONTENT_SELECTOR,

package/addon/plugins/variable-plugin/utils/constants.ts

@@ -1,4 +1,4 @@
-import { PNode, Schema } from '@lblod/ember-rdfa-editor';
+import { Attrs, PNode, Schema } from '@lblod/ember-rdfa-editor';
 import { CodeList, fetchCodeListsByPublisher } from './fetch-data';
 import { v4 as uuidv4 } from 'uuid';
 import { XSD } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
@@ -10,17 +10,18 @@ export const MULTI_SELECT_CODELIST_TYPE =
 export type VariableType = {
   label: string;
   fetchSubtypes?: (endpoint: string, publisher: string) => Promise<CodeList[]>;
-  constructor: (
-    schema: Schema,
-    endpoint?: string,
-    selectedCodelist?: CodeList
-  ) => PNode;
+  constructor: (props: {
+    schema: Schema;
+    label?: string;
+    attributes?: Attrs;
+    codelist?: CodeList;
+  }) => PNode;
 };
 
 export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
   text: {
     label: 'text',
-    constructor: (schema) => {
+    constructor: ({ schema, label = 'text' }) => {
       const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
       const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
       return schema.node(
@@ -29,6 +30,7 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
           mappingResource: mappingURI,
           variableInstance,
           type: 'text',
+          label,
         },
         schema.node('placeholder', { placeholderText: 'text' })
       );
@@ -36,9 +38,10 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
   },
   number: {
     label: 'number',
-    constructor: (schema) => {
+    constructor: ({ schema, attributes, label = 'number' }) => {
       const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
       const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+
       return schema.node(
         'variable',
         {
@@ -46,6 +49,8 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
           variableInstance,
           type: 'number',
           datatype: XSD('integer').prefixed,
+          label,
+          ...attributes,
         },
         schema.node('placeholder', { placeholderText: 'number' })
       );
@@ -53,18 +58,19 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
   },
   date: {
     label: 'date',
-    constructor: (schema) => {
+    constructor: ({ schema, label = 'date' }) => {
       return unwrap(
         schema.nodes.date.createAndFill({
           mappingResource: `http://data.lblod.info/mappings/${uuidv4()}`,
           value: null,
+          label,
         })
       );
     },
   },
   location: {
     label: 'location',
-    constructor: (schema, endpoint) => {
+    constructor: ({ schema, attributes, label = 'location' }) => {
       const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
       const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
       return schema.node(
@@ -73,7 +79,8 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
           type: 'location',
           mappingResource: mappingURI,
           variableInstance,
-          source: endpoint,
+          label,
+          ...attributes,
         },
         schema.node('placeholder', {
           placeholderText: 'location',
@@ -87,7 +94,7 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
       const codelists = fetchCodeListsByPublisher(endpoint, publisher);
       return codelists;
     },
-    constructor: (schema, endpoint, selectedCodelist?: CodeList) => {
+    constructor: ({ schema, attributes, codelist, label }) => {
       const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
       const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
       return schema.node(
@@ -95,14 +102,21 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
         {
           type: 'codelist',
           mappingResource: mappingURI,
-          codelistResource: selectedCodelist?.uri,
+          codelistResource: codelist?.uri,
           variableInstance,
-          source: endpoint,
+          label: label ?? codelist?.label,
+          ...attributes,
         },
         schema.node('placeholder', {
-          placeholderText: selectedCodelist?.label ?? '',
+          placeholderText: codelist?.label,
         })
       );
     },
   },
 };
+
+export const MINIMUM_VALUE_PNODE_KEY = 'minimumValue';
+export const MAXIMUM_VALUE_PNODE_KEY = 'maximumValue';
+
+export const MINIMUM_VALUE_HTML_ATTRIBUTE_KEY = 'data-minimum-value';
+export const MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY = 'data-maximum-value';

package/addon/plugins/variable-plugin/utils/fetch-data.ts

@@ -15,20 +15,24 @@ export type CodeListOption = {
 
 function generateCodeListOptionsQuery(codelistUri: string): string {
   const codeListOptionsQuery = `
-    PREFIX lblodMobilitiet: <http://data.lblod.info/vocabularies/mobiliteit/>
+    PREFIX lblodMobiliteit: <http://data.lblod.info/vocabularies/mobiliteit/>
     PREFIX dct: <http://purl.org/dc/terms/>
     PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
     PREFIX schema: <http://schema.org/>
+    PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
     SELECT DISTINCT * WHERE { 
-      <${codelistUri}> a lblodMobilitiet:Codelist.
+      <${codelistUri}> a lblodMobiliteit:Codelist.
       ?codelistOptions skos:inScheme <${codelistUri}>.
-      ?codelistOptions skos:prefLabel ?label.
+      ?codelistOptions skos:prefLabel ?value.
       OPTIONAL {
         ?codelistOptions schema:position ?position .
       }
       OPTIONAL {
         <${codelistUri}> dct:type ?type.
       }
+      OPTIONAL {
+        ?codelistOptions ext:summary ?label.
+      }
     }
     ORDER BY (!BOUND(?position)) ASC(?position)
   `;
@@ -56,8 +60,8 @@ export async function fetchCodeListOptions(
 function parseCodelistOptions(queryResult: QueryResult): CodeListOption[] {
   const bindings = queryResult.results.bindings;
   return bindings.map((binding) => ({
-    value: binding['label']?.value,
-    label: binding['label']?.value,
+    value: binding['value']?.value,
+    label: binding['label'] ? binding['label'].value : binding['value']?.value,
   }));
 }
 

package/app/components/generic-rdfa-variable/insert-menu.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/generic-rdfa-variable/insert-menu';

package/app/components/rdfa-date-plugin/date.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/rdfa-date-plugin/date';

package/app/components/variable-plugin/number-settings.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/number-settings';

package/app/styles/generic-rdfa-variable.scss

@@ -0,0 +1,20 @@
+.generic-rdfa-variable-textarea-wrapper {
+  width: 100%;
+  height: 100%;
+  min-height: 150px;
+  display: flex;
+
+  overflow: visible;
+
+  .cm-editor {
+    width: 100%;
+  }
+}
+
+.generic-rdfa-plugin-modal {
+  overflow: visible;
+
+  .au-c-modal__body {
+    overflow: visible;
+  }
+}

package/app/styles/variable-plugin.scss

@@ -55,6 +55,15 @@
       word-wrap: break-word;
       outline: 0px;
     }
+    .label {
+      font-size: var(--au-base);
+      color: var(--au-blue-700);
+      user-select: none;
+      margin: 0.5rem;
+    }
+    .au-c-icon {
+      margin: 0;
+    }
   }
 }
 
@@ -68,3 +77,25 @@
     }
   }
 }
+
+.number-settings {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr;
+
+  .to {
+    display: flex;
+    justify-content: center;
+    color: var(--au-gray-900);
+
+    span {
+      position: relative;
+      top: 33px;
+    }
+  }
+
+  // AuInput @type='number' overrides width to be 100px, we have to override it again
+  input[type='number'] {
+    width: 100%;
+  }
+}

package/components/generic-rdfa-variable/insert-menu.d.ts

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+type Args = {
+    controller: SayController;
+};
+export default class GenericRdfaVariableInsertMenu extends Component<Args> {
+    modalOpen: boolean;
+    private htmlEditor?;
+    get controller(): SayController;
+    get schema(): import("prosemirror-model").Schema<any, any>;
+    showModal(): void;
+    closeModal(): void;
+    onCancel(): void;
+    setupHtmlEditor(element: HTMLElement): void;
+    onInsert(): void;
+}
+export {};