@lblod/ember-rdfa-editor-lblod-plugins 11.1.0 → 11.2.0

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [11.2.0] - 2023-09-04
+### Added
+- ember-modifier is now explicitely a peerDependency
+- GN4470: ability to specifly single/multi-select per codelist instance
 ## [11.1.0] - 2023-08-29
 
 ### Fixed
@@ -691,7 +695,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.1.0...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.2.0...HEAD
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.0...v8.0.1
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...v8.0.0
 [7.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.0.0...v7.1.0
@@ -707,6 +711,7 @@ add onclick handler to pencil icon in variable plugin
 [3.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.2...v3.0.0
 [2.1.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.0...v2.1.1
+[11.2.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.1.0...v11.2.0
 [11.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.0.0...v11.1.0
 [11.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v10.0.0...v11.0.0
 [10.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.1...v10.0.0

package/addon/components/variable-plugin/codelist/edit.ts

@@ -72,7 +72,12 @@ export default class CodelistEditComponent extends Component<Args> {
   });
 
   get multiSelect() {
-    return this.codelistOptions.value?.type === MULTI_SELECT_CODELIST_TYPE;
+    const localStyle = this.selectedCodelist.value?.node.attrs
+      .selectionStyle as string;
+    if (localStyle) {
+      return localStyle === 'multi';
+    } else
+      return this.codelistOptions.value?.type === MULTI_SELECT_CODELIST_TYPE;
   }
 
   @action

package/addon/components/variable-plugin/codelist/insert.hbs

@@ -1,12 +1,22 @@
 <PowerSelect
   @allowClear={{false}}
   @searchEnabled={{false}}
-  @options={{this.subtypes.value}}
-  @selected={{this.selectedSubtype}}
-  @onChange={{this.updateSubtype}}
-  as |subtype|
+  @options={{this.codelistData.value}}
+  @selected={{this.selectedCodelist}}
+  @onChange={{this.selectCodelist}}
+  as |codelist|
 >
-  {{subtype.label}}
+  {{codelist.label}}
+</PowerSelect>
+<PowerSelect
+  @allowClear={{false}}
+  @searchEnabled={{false}}
+  @options={{this.selectionStyles}}
+  @selected={{this.selectedStyle}}
+  @onChange={{this.selectStyle}}
+  as |style|
+>
+  {{style.label}}
 </PowerSelect>
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput 
@@ -16,7 +26,7 @@
 </AuFormRow>
 <AuButton
   {{on 'click' this.insert}}
-  @disabled={{not this.selectedSubtype}}
+  @disabled={{not this.selectedCodelist}}
 >
   {{t 'variable-plugin.button'}}
 </AuButton>

package/addon/components/variable-plugin/codelist/insert.ts

@@ -15,16 +15,22 @@ export type CodelistInsertOptions = {
   publisher?: string;
   endpoint: string;
 };
+
 type Args = {
   controller: SayController;
   options: CodelistInsertOptions;
 };
 
-export default class CodelistInsertComponent extends Component<Args> {
-  @tracked selectedSubtype?: CodeList;
-  @tracked label?: string;
+interface SelectStyle {
+  label: string;
+  value: string;
+}
 
+export default class CodelistInsertComponent extends Component<Args> {
   @service declare intl: IntlService;
+  @tracked selectedCodelist?: CodeList;
+  @tracked label?: string;
+  @tracked selectedStyleValue = 'single';
 
   get controller() {
     return this.args.controller;
@@ -42,9 +48,28 @@ export default class CodelistInsertComponent extends Component<Args> {
     return this.args.options.endpoint;
   }
 
-  subtypes = trackedFunction(this, async () => {
+  get selectionStyles() {
+    const singleSelect = {
+      label: this.intl.t('variable.codelist.single-select'),
+      value: 'single',
+    };
+    const multiSelect = {
+      label: this.intl.t('variable.codelist.multi-select'),
+      value: 'multi',
+    };
+    return [singleSelect, multiSelect];
+  }
+
+  get selectedStyle() {
+    return this.selectionStyles.find(
+      (style) => style.value === this.selectedStyleValue,
+    );
+  }
+
+  codelistData = trackedFunction(this, async () => {
     return fetchCodeListsByPublisher(this.endpoint, this.publisher);
   });
+
   @action
   updateLabel(event: InputEvent) {
     this.label = (event.target as HTMLInputElement).value;
@@ -58,12 +83,13 @@ export default class CodelistInsertComponent extends Component<Args> {
       {
         mappingResource,
         variableInstance,
-        codelistResource: this.selectedSubtype?.uri,
-        label: this.label ?? this.selectedSubtype?.label,
+        codelistResource: this.selectedCodelist?.uri,
+        label: this.label ?? this.selectedCodelist?.label,
         source: this.endpoint,
+        selectionStyle: this.selectedStyleValue,
       },
       this.schema.node('placeholder', {
-        placeholderText: this.selectedSubtype?.label,
+        placeholderText: this.selectedCodelist?.label,
       }),
     );
 
@@ -78,7 +104,12 @@ export default class CodelistInsertComponent extends Component<Args> {
   }
 
   @action
-  updateSubtype(subtype: CodeList) {
-    this.selectedSubtype = subtype;
+  selectCodelist(codelist: CodeList) {
+    this.selectedCodelist = codelist;
+  }
+
+  @action
+  selectStyle(style: SelectStyle) {
+    this.selectedStyleValue = style.value;
   }
 }

package/addon/plugins/variable-plugin/utils/attribute-parsers.ts

@@ -29,3 +29,7 @@ export function parseVariableSource(variableNode: HTMLElement) {
     .find((el) => hasRDFaAttribute(el, 'property', DCT('source')))
     ?.getAttribute('resource');
 }
+
+export function parseSelectionStyle(element: HTMLElement): string | null {
+  return element.dataset.selectionStyle ?? null;
+}

package/addon/plugins/variable-plugin/variables/codelist.ts

@@ -10,6 +10,7 @@ import { DOMOutputSpec, PNode } from '@lblod/ember-rdfa-editor';
 import {
   isVariable,
   parseLabel,
+  parseSelectionStyle,
   parseVariableInstance,
   parseVariableSource,
   parseVariableType,
@@ -43,6 +44,7 @@ const parseDOM = [
 
         const source = parseVariableSource(node);
         const label = parseLabel(node);
+        const selectionStyle = parseSelectionStyle(node);
         const codelistSpan = [...node.children].find((el) =>
           hasRDFaAttribute(el, 'property', EXT('codelist')),
         );
@@ -53,6 +55,7 @@ const parseDOM = [
           variableInstance:
             variableInstance ?? `http://data.lblod.info/variables/${uuidv4()}`,
           mappingResource,
+          selectionStyle,
           codelistResource,
           source,
           label,
@@ -66,8 +69,14 @@ const parseDOM = [
 ];
 
 const toDOM = (node: PNode): DOMOutputSpec => {
-  const { mappingResource, codelistResource, variableInstance, source, label } =
-    node.attrs;
+  const {
+    mappingResource,
+    codelistResource,
+    variableInstance,
+    source,
+    label,
+    selectionStyle,
+  } = node.attrs;
 
   const codelistResourceSpan = codelistResource
     ? span({
@@ -79,6 +88,7 @@ const toDOM = (node: PNode): DOMOutputSpec => {
     mappingResource,
     {
       'data-label': label as string,
+      'data-selection-style': selectionStyle as string,
     },
     instanceSpan(variableInstance),
     typeSpan('codelist'),
@@ -111,6 +121,9 @@ const emberNodeConfig: EmberNodeConfig = {
     label: {
       default: 'codelijst',
     },
+    selectionStyle: {
+      default: null,
+    },
   },
   toDOM,
   parseDOM,

package/components/variable-plugin/codelist/insert.d.ts

@@ -10,17 +10,31 @@ type Args = {
     controller: SayController;
     options: CodelistInsertOptions;
 };
+interface SelectStyle {
+    label: string;
+    value: string;
+}
 export default class CodelistInsertComponent extends Component<Args> {
-    selectedSubtype?: CodeList;
-    label?: string;
     intl: IntlService;
+    selectedCodelist?: CodeList;
+    label?: string;
+    selectedStyleValue: string;
     get controller(): SayController;
     get schema(): import("prosemirror-model").Schema<any, any>;
     get publisher(): string | undefined;
     get endpoint(): string;
-    subtypes: import("ember-resources/util/function").State<Promise<CodeList[]>>;
+    get selectionStyles(): {
+        label: string;
+        value: string;
+    }[];
+    get selectedStyle(): {
+        label: string;
+        value: string;
+    } | undefined;
+    codelistData: import("ember-resources/util/function").State<Promise<CodeList[]>>;
     updateLabel(event: InputEvent): void;
     insert(): void;
-    updateSubtype(subtype: CodeList): void;
+    selectCodelist(codelist: CodeList): void;
+    selectStyle(style: SelectStyle): void;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -149,7 +149,8 @@
   "peerDependencies": {
     "@appuniversum/ember-appuniversum": "^2.4.2",
     "@lblod/ember-rdfa-editor": "^5.2.0",
-    "ember-concurrency": "^2.3.7"
+    "ember-concurrency": "^2.3.7",
+    "ember-modifier": "^3.2.7"
   },
   "overrides": {
     "ember-intl": {

package/plugins/variable-plugin/utils/attribute-parsers.d.ts

@@ -3,3 +3,4 @@ export declare function parseVariableType(variableNode: HTMLElement): string | n
 export declare function parseVariableInstance(variableNode: HTMLElement): string | null | undefined;
 export declare function parseLabel(variableNode: HTMLElement): string | null;
 export declare function parseVariableSource(variableNode: HTMLElement): string | null | undefined;
+export declare function parseSelectionStyle(element: HTMLElement): string | null;

package/translations/en-US.yaml

@@ -195,6 +195,9 @@ variable:
     error-number-below: The number should be smaller than or equal to {maxValue}
     error-min-bigger-than-max: The minimum should be smaller than the maximum
     written-number-label: Show as words
+  codelist:
+    single-select: Single selection
+    multi-select: Multiple selection
 variable-plugin:
   insert-variable: Insert variable
   button: Insert
@@ -356,4 +359,4 @@ editor-plugins:
         contact: In case of persisting issues, contact <a href="mailto:{email}">{email}</a>.
     nodeview:
       placeholder: Insert address
-    
+    

package/translations/nl-BE.yaml

@@ -206,6 +206,9 @@ variable:
     error-number-below: Het getal moet kleiner dan of gelijk zijn aan {maxValue}
     written-number-label: Getal voluit schrijven
     error-min-bigger-than-max: Het minimum moet kleiner zijn dan het maximum
+  codelist:
+    single-select: Enkelvoudige selectie
+    multi-select: Meervoudige selectie
 variable-plugin:
   insert-variable: Voeg variabele in
   button: Voeg in
@@ -359,4 +362,3 @@ editor-plugins:
         contact: Bij blijvende problemen, contacteer <a href="mailto:{email}">{email}</a>.
     nodeview:
       placeholder: Voeg adres in
-