Feature/search in dropdown list

.github/workflows/main.yml

@@ -7,28 +7,30 @@ env:
 
 jobs:
   publish:
-    runs-on: self-hosted
+    runs-on: [self-hosted, common]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: "20"
       - uses: actions/setup-python@v4
+        with:
+          python-version: "3.10"
       - name: Setup npm
         run: npm install npm@latest -g
       - run: npm ci
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.REPOS_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: npm run semantic-release
   build-and-push:
-    runs-on: self-hosted
+    runs-on: [self-hosted, common]
     if: contains('
-          refs/heads/develop
-          refs/heads/master
-          refs/heads/main'
-        , github.ref)
+      refs/heads/develop
+      refs/heads/master
+      refs/heads/main'
+      , github.ref)
     steps:
       - uses: actions/checkout@v3
       - name: Login to BIMData Docker Registry
@@ -43,7 +45,7 @@ jobs:
         with:
           branch: ${{ github.ref }}
       - name: Build and push
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
         with:
           context: .
           file: etc/Dockerfile
@@ -52,9 +54,9 @@ jobs:
           tags: |
             docker-registry.bimdata.io/bimdata/${{ env.app }}:${{ github.sha }}
             docker-registry.bimdata.io/bimdata/${{ env.app }}:${{ env.tag }}
-  
+
   deploy:
-    runs-on: self-hosted
+    runs-on: [self-hosted, common]
     needs: build-and-push
     steps:
       - name: Login to BIMData Docker Registry
@@ -74,5 +76,3 @@ jobs:
           inventory: ${{ env.tag }}
           app: ${{ env.app }}
           vault-pass: ${{ secrets.ANSIBLE_VAULT_PASSWD }}
-
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimdata/design-system",
-  "version": "1.4.0-rc.92",
+  "version": "2.0.0-rc.16",
   "main": "./dist/js/BIMDataComponents/index.js",
   "module": "./dist/js/BIMDataComponents/index.js",
   "files": [

src/BIMDataComponents/BIMDataColorSelector/BIMDataColorSelector.vue

@@ -13,7 +13,7 @@
           :key="`colorElement${j}ofColorLine${i}`"
           :style="`background-color: #${colorValue}`"
           :title="colorName"
-          @click="$emit('update:modelValue', colorValue)"
+          @click.stop="$emit('update:modelValue', colorValue)"
         ></div>
       </div>
     </template>

src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue

@@ -26,24 +26,40 @@
       <slot name="contentAfterBtn" :isOpen="displayed"></slot>
     </div>
     <transition :name="`slide-fade-${transitionName}`">
-      <BIMDataPaginatedList
-        :class="`submenu submenu--${directionClass}`"
-        v-show="displayed"
-        :list="list"
-        :perPage="perPage"
-        :elementKey="elementKey"
-        @element-click="onElementClick"
-        :loading="loading"
-      >
-        <template #element="{element}">
-          <slot
-            name="element"
-            :element="element"
-            :close="away"
-            :isOpen="displayed"
-          ></slot>
-        </template>
-      </BIMDataPaginatedList>
+      <div>
+        <BIMDataPaginatedList
+          :class="`submenu submenu--${directionClass}`"
+          v-show="displayed"
+          :list="filteredList"
+          :perPage="perPage"
+          :elementKey="elementKey"
+          @element-click="onElementClick"
+          :loading="loading"
+        >
+          <template #header>
+            <BIMDataSearch
+              v-if="search"
+              width="calc(100% - 12px)"
+              color="primary"
+              radius
+              :placeholder="searchPlaceholder"
+              v-model="searchText"
+              class="m-6"
+            />
+            <div v-if="filteredList.length === 0" class="p-x-6 p-b-6">
+              <slot name="empty"></slot>
+            </div>
+          </template>
+          <template #element="{ element }">
+            <slot
+              name="element"
+              :element="element"
+              :close="away"
+              :isOpen="displayed"
+            ></slot>
+          </template>
+        </BIMDataPaginatedList>
+      </div>
     </transition>
   </div>
 </template>
@@ -105,11 +121,20 @@ export default {
       type: String,
       default: "36px",
     },
+    search: {
+      type: Boolean,
+      default: false,
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "Search",
+    },
   },
   emits: ["element-click"],
   data() {
     return {
       displayed: false,
+      searchText: "",
     };
   },
   computed: {
@@ -122,6 +147,16 @@ export default {
     iconRotation() {
       return this.displayed ? (this.directionClass === "up" ? -90 : 90) : 0;
     },
+    filteredList() {
+      if (this.searchText === "") {
+        return this.list;
+      } else {
+        const lowerCaseSearchText = this.searchText.toLowerCase();
+        return this.list.filter(element =>
+          element.toLowerCase().includes(lowerCaseSearchText),
+        );
+      }
+    },
   },
   methods: {
     onHeaderClick() {

src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue

@@ -6,8 +6,7 @@
       @click="onHeaderClick"
       :style="style"
     >
-      <slot name="header"></slot>
-      <slot name="contentAfterHeader"></slot>
+      <slot name="header" :isOpen="displayed" />
     </div>
 
     <transition :name="`slide-fade-${transitionName}`">

src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/Key.vue

@@ -2,6 +2,6 @@
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
-    d="M19.0178 10.0262C19.0178 12.9638 16.6364 15.3452 13.6988 15.3452C13.0611 15.3452 12.4495 15.233 11.8829 15.0272L10.9023 16.0078H9.00661V17.8483H7.12931V19.7072H3.98207L3.98206 16.5967L8.7106 11.8769C8.49667 11.3005 8.37977 10.677 8.37977 10.0262C8.37977 7.08856 10.7612 4.70715 13.6988 4.70715C16.6364 4.70715 19.0178 7.08856 19.0178 10.0262ZM16.6431 8.77465C16.6431 9.67924 15.9098 10.4125 15.0052 10.4125C14.1006 10.4125 13.3673 9.67924 13.3673 8.77465C13.3673 7.87007 14.1006 7.13675 15.0052 7.13675C15.9098 7.13675 16.6431 7.87007 16.6431 8.77465Z"
+    d="M22.9726 8.15583C22.9726 12.6602 19.3298 16.3117 14.8361 16.3117C13.8606 16.3117 12.9251 16.1396 12.0583 15.824L10.5584 17.3276H7.65853V20.1496H4.78684V22.9999H-0.0274479L-0.0274658 18.2306L7.20575 10.9936C6.87851 10.1098 6.69971 9.15375 6.69971 8.15583C6.69971 3.65149 10.3425 0 14.8361 0C19.3298 0 22.9726 3.65149 22.9726 8.15583ZM19.34 6.23684C19.34 7.62387 18.2183 8.74828 16.8345 8.74828C15.4508 8.74828 14.3291 7.62387 14.3291 6.23684C14.3291 4.84981 15.4508 3.7254 16.8345 3.7254C18.2183 3.7254 19.34 4.84981 19.34 6.23684Z"
   />
 </template>

src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/Pipette.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17.1373 0.833299C18.2483 -0.277766 20.0497 -0.277766 21.1608 0.833299L22.1667 1.83918C23.2777 2.95025 23.2777 4.75164 22.1667 5.8627L18.1432 9.88618L19.1491 10.8921C19.7046 11.4476 19.7046 12.3483 19.1491 12.9038C18.5936 13.4594 17.6929 13.4594 17.1373 12.9038L16.1315 11.898L5.86274 22.1667C5.20628 22.8231 4.27081 23.118 3.35655 22.9567L1.52093 22.6327C0.932145 22.5288 0.471167 22.0679 0.367263 21.4791L0.0433307 19.6434C-0.118009 18.7292 0.176872 17.7937 0.833338 17.1373L11.102 6.86855L10.0962 5.86268C9.54064 5.30714 9.54064 4.40645 10.0962 3.85091C10.6517 3.29538 11.5524 3.29538 12.1079 3.85091L13.1138 4.85678L17.1373 0.833299ZM12.1079 8.88029L2.34216 18.6461C2.17804 18.8102 2.10432 19.0441 2.14466 19.2726L2.38207 20.6179L3.72737 20.8553C3.95594 20.8957 4.18981 20.822 4.35392 20.6578L14.1197 10.8921L12.1079 8.88029Z"
+  />
+</template>

src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/Smartview.vue

@@ -0,0 +1,14 @@
+<template>
+  <g>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 0H1.33487V0.876331H0.878202V1.33202H0V0ZM3.1264 0H4.91793V0.876331H3.1264V0ZM6.70946 0H8.501V0.876331H6.70946V0ZM10.2925 0H12.0841V0.876331H10.2925V0ZM13.8756 0H15.6671V0.876331H13.8756V0ZM17.4587 0H18.7935V1.33202H17.9153V0.876331H17.4587V0ZM0 4.90745V3.11974H0.878202V4.90745H0ZM18.7935 3.11974V4.90745H17.9153V3.11974H18.7935ZM18.7935 6.69517V8.48288H17.9153V6.69517H18.7935ZM0 8.48288V6.69517H0.878202V8.48288H0ZM18.7935 10.2706V12.0583H17.9153V10.2706H18.7935ZM0 12.0583V10.2706H0.878202V12.0583H0ZM0 15.6337V13.846H0.878202V15.6337H0ZM0 17.4215H0.878202V17.8772H1.33487V18.7535H0V17.4215ZM4.91793 18.7535H3.1264V17.8772H4.91793V18.7535ZM8.501 18.7535H6.70946V17.8772H8.501V18.7535ZM12.0841 18.7535H10.2925V17.8772H12.0841V18.7535Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.91416 9.26156C7.63787 8.41085 8.44435 7.6061 9.29687 7.88179L20.7421 11.5831C21.5222 11.8353 21.7598 12.8211 21.1799 13.3997L19.2316 15.3438L22.6785 18.7833C23.1072 19.2111 23.1072 19.9047 22.6785 20.3325L20.3268 22.6791C19.8981 23.1069 19.2031 23.1069 18.7744 22.6791L15.3275 19.2396L13.4438 21.1193C12.864 21.6979 11.8761 21.4609 11.6233 20.6824L7.91416 9.26156Z"
+    />
+  </g>
+</template>

src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/Spacing.vue

@@ -0,0 +1,25 @@
+<template>
+  <g>
+    <rect
+      x="4"
+      y="0.371399"
+      width="23"
+      height="4"
+      transform="rotate(90 4 0.371399)"
+    />
+    <rect
+      x="23"
+      y="0.371399"
+      width="23"
+      height="4"
+      transform="rotate(90 23 0.371399)"
+    />
+    <path d="M4 11.8715L7 9.87146L7 13.8715L4 11.8715Z" />
+    <path d="M19 11.8714L16 13.8428L16 9.89998L19 11.8714Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16 12.6229H7V11.12H16V12.6229Z"
+    />
+  </g>
+</template>

src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/Translate.vue

@@ -0,0 +1,22 @@
+<template>
+  <g>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.0861 5.89941C10.9815 5.89941 10.0861 6.79484 10.0861 7.89941V13.9671C10.0861 15.0716 10.9815 15.9671 12.0861 15.9671H16.543H17.2521L20.4569 19.4484C20.7654 19.7835 21.3248 19.5652 21.3248 19.1097V15.9408C22.2748 15.7856 22.9999 14.961 22.9999 13.9671V7.89941C22.9999 6.79484 22.1045 5.89941 20.9999 5.89941H12.0861Z"
+    />
+    <path
+      d="M16.3858 7.60045L15.4758 7.57245C15.4828 7.69845 15.4688 7.85945 15.4548 7.99945C15.3778 8.69245 15.2518 9.72145 15.2518 10.6385C15.2518 11.6675 15.4548 12.7035 15.6648 13.3335L16.4698 13.0955C16.2388 12.3885 16.0358 11.6045 16.0358 10.4985C16.0358 9.63045 16.1548 8.62245 16.2878 7.97145C16.3158 7.85945 16.3438 7.73345 16.3858 7.60045ZM15.1328 8.37045C14.7058 8.37045 14.0968 8.31445 13.8448 8.27945L13.8658 9.08445C14.1948 9.09845 14.7408 9.13345 15.1118 9.13345C16.1688 9.13345 17.6388 9.02845 18.5978 8.85345L18.5908 8.04845C17.5198 8.30745 16.4628 8.37045 15.1328 8.37045ZM18.1568 9.39945L17.2958 9.18945C17.2888 9.34345 17.2398 9.64445 17.1908 9.79145C16.9108 10.7575 16.4348 11.3805 15.9238 11.8495C15.4968 12.2485 15.0278 12.4795 14.6988 12.4795C14.4678 12.4795 14.3768 12.3605 14.3768 12.1295C14.3768 11.6605 14.8738 10.9885 15.5738 10.6595C15.9168 10.5055 16.4208 10.3235 17.0578 10.3235C18.0028 10.3235 18.5138 10.8275 18.5138 11.4225C18.5138 12.1155 17.9608 12.7945 16.6098 12.9415L17.0788 13.6835C18.7938 13.4175 19.3818 12.4585 19.3818 11.4645C19.3818 10.3725 18.4158 9.61645 17.1068 9.61645C16.5818 9.61645 16.0078 9.72145 15.5458 9.88945C14.4328 10.2955 13.5508 11.3245 13.5508 12.3115C13.5508 13.0255 13.9778 13.3335 14.4888 13.3335C15.0978 13.3335 15.7068 13.0255 16.1618 12.6895C16.8268 12.1995 17.5478 11.2545 17.9468 9.99445C17.9958 9.84745 18.1008 9.52545 18.1568 9.39945Z"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 6C0 4.89543 0.895431 4 2 4H10.9139C11.8435 4 12.625 4.63429 12.8492 5.4937H11.6413C10.5367 5.4937 9.64126 6.38913 9.64126 7.4937V13.5613C9.64126 13.7363 9.66372 13.9059 9.7059 14.0676H6.76433C6.74253 14.1215 6.7103 14.1733 6.6666 14.2207L3.12408 18.0689C2.81558 18.404 2.25622 18.1857 2.25622 17.7302V14.0676H2C0.895429 14.0676 0 13.1722 0 12.0676V6Z"
+    />
+    <path
+      d="M4.82654 6.95068L3.47302 11.0762H2.38269L4.23181 6.09961H4.92566L4.82654 6.95068ZM5.95105 11.0762L4.59412 6.95068L4.48474 6.09961H5.18542L7.0448 11.0762H5.95105ZM5.88953 9.22363V10.0269H3.26111V9.22363H5.88953Z"
+      fill="white"
+    />
+  </g>
+</template>

src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/Upload.vue

@@ -0,0 +1,28 @@
+<template>
+  <g>
+    <rect
+      x="9.97095"
+      y="2.47852"
+      width="2.0909"
+      height="6.27481"
+      transform="rotate(-45 9.97095 2.47852)"
+    />
+    <rect
+      x="11.441"
+      y="1"
+      width="2.0909"
+      height="6.28069"
+      transform="rotate(45 11.441 1)"
+    />
+    <rect x="10.3995" y="3.93219" width="2.0909" height="12.9374" />
+    <rect y="13.7087" width="2.0909" height="8.3636" />
+    <rect x="20.909" y="13.7087" width="2.0909" height="8.3636" />
+    <rect
+      x="2.09076"
+      y="22.0723"
+      width="2.0909"
+      height="18.8181"
+      transform="rotate(-90 2.09076 22.0723)"
+    />
+  </g>
+</template>

src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/index.js

@@ -81,6 +81,7 @@ import organization from "./Organization.vue";
 import parameters from "./Parameters.vue";
 import path from "./Path.vue";
 import pieGraph from "./PieGraph.vue";
+import pipette from "./Pipette.vue";
 import plus from "./Plus.vue";
 import project from "./Project.vue";
 import quickSelect from "./QuickSelect.vue";
@@ -102,8 +103,10 @@ import settings from "./Settings.vue";
 import share from "./Share.vue";
 import show from "./Show.vue";
 import showSelected from "./ShowSelected.vue";
+import smartview from "./Smartview.vue";
 import socotec from "./Socotec.vue";
 import space from "./Space.vue";
+import spacing from "./Spacing.vue";
 import split from "./Split.vue";
 import storey from "./Storey.vue";
 import success from "./Success.vue";
@@ -112,11 +115,13 @@ import swap from "./Swap.vue";
 import synchro2d from "./Synchro2D.vue";
 import system from "./System.vue";
 import tag from "./Tag.vue";
+import translate from "./Translate.vue";
 import tree from "./Tree.vue";
 import unarchive from "./Unarchive.vue";
 import undo from "./Undo.vue";
 import union from "./Union.vue";
 import up from "./Up.vue";
+import upload from "./Upload.vue";
 import user from "./User.vue";
 import validate from "./Validate.vue";
 import validatedFile from "./ValidatedFile.vue";
@@ -233,6 +238,7 @@ export default {
   parameters,
   path,
   pieGraph,
+  pipette,
   plus,
   project,
   quickSelect,
@@ -254,8 +260,10 @@ export default {
   share,
   show,
   showSelected,
+  smartview,
   socotec,
   space,
+  spacing,
   split,
   storey,
   success,
@@ -264,11 +272,13 @@ export default {
   synchro2d,
   system,
   tag,
+  translate,
   tree,
   unarchive,
   undo,
   union,
   up,
+  upload,
   user,
   validate,
   validatedFile,