@lblod/ember-rdfa-editor-lblod-plugins 26.2.2 → 26.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 26.3.0
+
+### Minor Changes
+
+- [#523](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/523) [`062c765`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/062c765ac0d45deacd81d63752660fc56eefffa0) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Redesign of fragment nodes
+
+- [#524](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/524) [`d43b3aa`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d43b3aae98f3c30ee62f3a15a32e73adca33baa6) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Add search to codelist variable
+
 ## 26.2.2
 
 ### Patch Changes

package/addon/components/snippet-plugin/nodes/snippet.gts

@@ -219,30 +219,37 @@ export default class SnippetNode extends Component<Signature> {
       />
     {{else}}
       <div class='say-snippet-card'>
-        <div class='say-snippet-title'>{{this.node.attrs.title}}</div>
-        <div class='say-snippet-content'>{{yield}}</div>
-        <div class='say-snippet-icons' contenteditable='false'>
-          <SnippetButton
-            @icon={{SynchronizeIcon}}
-            @helpText='snippet-plugin.snippet-node.change-fragment'
-            {{on 'click' this.editFragment}}
-            @isActive={{this.isActive}}
-          />
-          <SnippetButton
-            @icon={{BinIcon}}
-            @helpText='snippet-plugin.snippet-node.remove-fragment'
-            {{on 'click' this.deleteFragment}}
-            @isActive={{this.isActive}}
-            class='say-snippet-remove-button'
-          />
-          {{#if this.allowMultipleSnippets}}
+        <div class='say-snippet-title'>
+          <span class='au-c-badge au-c-badge--small say-snippet-title-icon'>
+            <AuIcon @icon='plus-text' />
+          </span>
+          {{this.node.attrs.title}}
+        </div>
+        <div class='say-snippet-content'>
+          {{yield}}
+          <div class='say-snippet-icons' contenteditable='false'>
+            <SnippetButton
+              @icon={{SynchronizeIcon}}
+              @helpText='snippet-plugin.snippet-node.change-fragment'
+              {{on 'click' this.editFragment}}
+              @isActive={{this.isActive}}
+            />
             <SnippetButton
-              @icon={{AddIcon}}
-              @helpText='snippet-plugin.snippet-node.add-fragment'
-              {{on 'click' this.addFragment}}
+              @icon={{BinIcon}}
+              @helpText='snippet-plugin.snippet-node.remove-fragment'
+              {{on 'click' this.deleteFragment}}
               @isActive={{this.isActive}}
+              class='say-snippet-remove-button'
             />
-          {{/if}}
+            {{#if this.allowMultipleSnippets}}
+              <SnippetButton
+                @icon={{AddIcon}}
+                @helpText='snippet-plugin.snippet-node.add-fragment'
+                {{on 'click' this.addFragment}}
+                @isActive={{this.isActive}}
+              />
+            {{/if}}
+          </div>
         </div>
 
       </div>

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

@@ -22,7 +22,8 @@
         <PowerSelectMultiple
           id='codelist-select'
           @allowClear={{false}}
-          @searchEnabled={{false}}
+          @searchEnabled={{true}}
+          @searchField='label'
           @options={{this.codelistOptions.value.options}}
           @selected={{this.selectedCodelistOption}}
           @onChange={{this.updateCodelistOption}}
@@ -34,7 +35,8 @@
         <PowerSelect
           id='codelist-select'
           @allowClear={{false}}
-          @searchEnabled={{false}}
+          @searchEnabled={{true}}
+          @searchField='label'
           @options={{this.codelistOptions.value.options}}
           @selected={{this.selectedCodelistOption}}
           @onChange={{this.updateCodelistOption}}

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

@@ -1,7 +1,8 @@
 {{! @glint-nocheck: not typesafe yet }}
 <PowerSelect
   @allowClear={{false}}
-  @searchEnabled={{false}}
+  @searchEnabled={{true}}
+  @searchField='label'
   @options={{this.codelistData.value}}
   @selected={{this.selectedCodelist}}
   @onChange={{this.selectCodelist}}

package/addon/components/variable-plugin/location/edit.hbs

@@ -22,7 +22,8 @@
         <PowerSelectMultiple
           id='location-select'
           @allowClear={{false}}
-          @searchEnabled={{false}}
+          @searchEnabled={{true}}
+          @searchField='label'
           @options={{this.locationOptions.value.options}}
           @selected={{this.selectedLocationOption}}
           @onChange={{this.updateLocationOption}}
@@ -34,7 +35,8 @@
         <PowerSelect
           id='location-select'
           @allowClear={{false}}
-          @searchEnabled={{false}}
+          @searchEnabled={{true}}
+          @searchField='label'
           @options={{this.locationOptions.value.options}}
           @selected={{this.selectedLocationOption}}
           @onChange={{this.updateLocationOption}}

package/app/styles/snippet-plugin.scss

@@ -90,22 +90,31 @@
   border: 1px solid var(--au-blue-300);
   border-radius: var(--au-radius);
   .say-snippet-title {
-    background-color: var(--au-blue-300);
+    background-color: var(--au-gray-100);
+    border-radius: 0.1em 0.1em 0 0;
     font-size: 1.6rem;
     font-weight: var(--au-medium);
     padding: 5px;
+    border-bottom: 1px solid var(--au-blue-300);
+    color: var(--au-blue-700);
+    .say-snippet-title-icon {
+      background-color: var(--au-blue-300);
+      color: black;
+    }
   }
   .say-snippet-content {
     padding: 20px;
     min-height: 100px;
-    padding-right: 44px;
+    padding-right: 50px;
+    margin-top: 0;
   }
   .say-snippet-icons {
     display: flex;
     width: fit-content;
     position: absolute !important;
     right: 5px;
-    bottom: 5px;
+    top: 0;
+    margin-top: 0;
     flex-direction: column;
     .say-snippet-button {
       height: 32px;
@@ -143,6 +152,19 @@
   }
 }
 
+.ember-node.say-active:has(> .say-snippet-card) {
+  outline: none;
+}
+
+.ember-node.say-active > .say-snippet-card {
+  border-color: var(--au-blue-700);
+  border-width: 0.2rem;
+  > .say-snippet-title {
+    border-bottom-color: var(--au-blue-700);
+    border-bottom-width: 0.2rem;
+  }
+}
+
 .say-snippet-placeholder {
   display: flex;
   flex-direction: row;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "26.2.2",
+  "version": "26.3.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",