Merge branch 'develop'

.eslintrc.json

@@ -5,7 +5,7 @@
     "es6": true,
     "jest": true
   },
-  "extends": ["plugin:vue/essential", "eslint:recommended", "prettier"],
+  "extends": ["plugin:vue/vue3-essential", "eslint:recommended", "prettier"],
   "plugins": ["prettier", "vue"],
   "globals": {
     "Atomics": "readonly",
@@ -17,7 +17,13 @@
   },
   "ignorePatterns": ["/dist", "/dist-web", "*.d.ts"],
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": [
+      "error",
+      {
+        "arrowParens": "avoid",
+        "trailingComma": "es5"
+      }
+    ],
     "indent": "off",
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "double", "avoid-escape"],

.github/dependabot.yml

@@ -0,0 +1,9 @@
+# Config reference:
+# https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/main.yml

@@ -9,14 +9,11 @@ jobs:
   publish:
     runs-on: [self-hosted, common]
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           check-latest: true
-      - uses: actions/setup-python@v4
-        with:
-          python-version: "3.10"
       - name: Setup npm
         run: npm install npm@latest -g
       - run: npm ci
@@ -34,9 +31,9 @@ jobs:
       refs/heads/main'
       , github.ref)
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Login to BIMData Docker Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: docker-registry.bimdata.io
           username: ${{ secrets.DOCKER_USER }}
@@ -47,7 +44,7 @@ jobs:
         with:
           branch: ${{ github.ref }}
       - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: etc/Dockerfile
@@ -62,7 +59,7 @@ jobs:
     needs: build-and-push
     steps:
       - name: Login to BIMData Docker Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: docker-registry.bimdata.io
           username: ${{ secrets.DOCKER_USER }}

.vscode/settings.json

@@ -8,6 +8,6 @@
     "editor.formatOnSave": false
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimdata/design-system",
-  "version": "2.0.0",
+  "version": "2.1.0-rc.33",
   "main": "./src/BIMDataComponents/index.js",
   "module": "./src/BIMDataComponents/index.js",
   "files": [
@@ -33,7 +33,7 @@
     "prismjs": "^1.29.0",
     "sass": "^1.67.0",
     "semantic-release": "^22.0.0",
-    "vite": "^4.4.9",
+    "vite": "^4.5.3",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vue3-clipboard": "^1.0.0"

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>
@@ -74,6 +90,9 @@ export default {
     elementKey: {
       type: String,
     },
+    elementLabelKey: {
+      type: String,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -105,11 +124,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 +150,23 @@ 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();
+        if (this.elementLabelKey) {
+          return this.list.filter(element =>
+            element[this.elementLabelKey]
+              .toLowerCase()
+              .includes(lowerCaseSearchText),
+          );
+        }
+        return this.list.filter(element =>
+          element.toLowerCase().includes(lowerCaseSearchText),
+        );
+      }
+    },
   },
   methods: {
     onHeaderClick() {

src/BIMDataComponents/BIMDataDropdownList/_BIMDataDropdownList.scss

@@ -1,5 +1,4 @@
 .bimdata-dropdown-list {
-  height: 42px;
   position: relative;
   display: flex;
   align-items: center;

src/BIMDataComponents/BIMDataDropdownMenu/_BIMDataDropdownMenu.scss

@@ -1,5 +1,4 @@
 .bimdata-dropdown {
-  height: 42px;
   position: relative;
   display: flex;
   align-items: center;

src/BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue

@@ -3,7 +3,7 @@
     class="file-icon"
     :width="size"
     :height="(+size * 4) / 3"
-    :src="imageUrl"
+    :src="imgSrc"
   />
 </template>
 
@@ -22,22 +22,9 @@ export default {
     },
   },
   computed: {
-    name() {
-      return (this.getFileExtension(this.fileName) || "unknown").toLowerCase();
-    },
-    imageUrl() {
-      return icons[`icon_${this.name}`] || icons.icon_unknown;
-    },
-  },
-  methods: {
-    getFileExtension(fileName = "") {
-      const match = fileName.match(/\.([0-9a-zA-Z]+$)/);
-      const extension = match && match[1];
-      if (extension && extension.toLowerCase() === "ifczip") {
-        return "ifc";
-      } else {
-        return extension;
-      }
+    imgSrc() {
+      const ext = this.fileName?.match(/\.([0-9a-zA-Z]+$)/)?.[1];
+      return icons[ext?.toLowerCase()] ?? icons["unknown"];
     },
   },
 };