chore: fix sass warning + migrate some components to <script setup>

bimdata · Nov 27, 2024 · 536d644 · 536d644
1 parent ad9772c
commit 536d644
Show file tree

Hide file tree

Showing 58 changed files with 1,608 additions and 2,005 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@bimdata/bcf-components": "6.4.4",
-    "@bimdata/components": "1.6.7",
-    "@bimdata/design-system": "2.2.1-beta.3",
-    "@bimdata/typescript-fetch-api-client": "10.17.1",
+    "@bimdata/components": "1.7.1",
+    "@bimdata/design-system": "2.2.1-beta.7",
+    "@bimdata/typescript-fetch-api-client": "10.17.2",
     "@bimdata/viewer": "2.6.1-beta.4",
     "@paddle/paddle-js": "^1.3.2",
     "async": "^3.2.6",
@@ -25,27 +25,27 @@
     "maplibre-gl": "^4.7.1",
     "oidc-client-ts": "^3.1.0",
     "seedrandom": "^3.0.5",
-    "vue": "^3.5.12",
+    "vue": "^3.5.13",
     "vue-i18n": "^10.0.4",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
     "babel-jest": "^29.7.0",
-    "cypress": "^13.15.2",
-    "eslint": "^9.14.0",
+    "cypress": "^13.16.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^9.31.0",
     "jest": "^29.7.0",
-    "prettier": "^3.3.3",
-    "sass-embedded": "^1.80.7",
+    "prettier": "^3.4.1",
+    "sass-embedded": "^1.81.0",
     "semantic-release": "^24.2.0",
-    "vite": "^5.4.11",
+    "vite": "^6.0.1",
     "vite-plugin-environment": "^1.1.3"
   }
 }
diff --git a/src/components/specific/app/app-breadcrumb/AppBreadcrumb.scss b/src/components/specific/app/app-breadcrumb/AppBreadcrumb.scss
@@ -1,3 +1,5 @@
+@use "/src/styles/mixins.scss";
+
 .app-breadcrumb:deep() {
   display: flex;
   align-items: center;
@@ -11,7 +13,7 @@
   }
 }
 
-@include media-breakpoint-down(xl) {
+@include mixins.media-breakpoint-down(xl) {
   .app-breadcrumb:deep() {
     .breadcrumb-separator {
       margin: 0 calc(var(--spacing-unit) / 3);

diff --git a/src/components/specific/files/file-tree/FileTree.scss b/src/components/specific/files/file-tree/FileTree.scss
@@ -1,3 +1,5 @@
+@use "/src/styles/mixins.scss";
+
 .file-tree {
   padding: var(--spacing-unit);
 
@@ -36,7 +38,7 @@
           min-width: 18px;
         }
         &__name {
-          @include noselect;
+          @include mixins.noselect;
           align-self: flex-end;
           color: var(--color-text);
         }

diff --git a/...specific/groups/group-card/GroupCard.scss → .../specific/groups/group-card/GroupCard.css b/...specific/groups/group-card/GroupCard.scss → .../specific/groups/group-card/GroupCard.css
@@ -1,9 +1,9 @@
-@import "./GroupCard.vars.scss";
+@import "./GroupCard.vars.css";
 
 .group-card {
-  min-width: $card-width;
-  width: $card-width;
-  height: $card-height;
+  min-width: var(--card-width);
+  width: var(--card-width);
+  height: var(--card-height);
 
   .bimdata-card {
     position: relative;
@@ -15,7 +15,7 @@
       position: absolute;
       z-index: 1;
       top: 0;
-      width: $card-width;
+      width: var(--card-width);
       height: 3px;
     }
 
@@ -33,7 +33,7 @@
 
     &:deep() {
       .bimdata-card__content {
-        height: $card-content-height;
+        height: var(--card-content-height);
         padding: 0;
         overflow: hidden;
 

diff --git a/src/components/specific/groups/group-card/GroupCard.vars.css b/src/components/specific/groups/group-card/GroupCard.vars.css
@@ -0,0 +1,9 @@
+.group-card,
+.group-creation-card,
+.group-member-card,
+.group-member-selection-card {
+  --card-width: 320px;
+  --card-height: 261px;
+  --card-content-height: var(--card-height);
+  --card-background: var(--color-white);
+}
diff --git a/src/components/specific/groups/group-card/GroupCard.vars.scss b/src/components/specific/groups/group-card/GroupCard.vars.scss
diff --git a/src/components/specific/groups/group-card/GroupCard.vue b/src/components/specific/groups/group-card/GroupCard.vue
@@ -101,4 +101,4 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" src="./GroupCard.scss"></style>
+<style scoped src="./GroupCard.css"></style>
diff --git a/...roup-creation-card/GroupCreationCard.scss → ...group-creation-card/GroupCreationCard.css b/...roup-creation-card/GroupCreationCard.scss → ...group-creation-card/GroupCreationCard.css
@@ -1,22 +1,22 @@
-@import "../group-card/GroupCard.vars.scss";
+@import "../group-card/GroupCard.vars.css";
 
 .group-creation-card {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: $card-width;
-  height: $card-height;
+  width: var(--card-width);
+  height: var(--card-height);
   box-shadow: var(--box-shadow);
   background-color: var(--color-white);
   color: var(--color-primary);
   transition-duration: 0.35s;
 
-  &__loader {
+  .group-creation-card__loader {
     transform: scale(2);
   }
 
-  &__form {
+  .group-creation-card__form {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -25,7 +25,7 @@
     padding: var(--spacing-unit) calc(var(--spacing-unit) * 2)
       calc(var(--spacing-unit) * 2);
 
-    &__title {
+    .group-creation-card__form__title {
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -34,15 +34,15 @@
     }
   }
 
-  &__btn-open {
+  .group-creation-card__btn-open {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
 
-    &__icon {
+    .group-creation-card__btn-open__icon {
       display: flex;
       justify-content: center;
       align-items: center;

diff --git a/src/components/specific/groups/group-creation-card/GroupCreationCard.vue b/src/components/specific/groups/group-creation-card/GroupCreationCard.vue
@@ -134,4 +134,4 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" src="./GroupCreationCard.scss"></style>
+<style scoped src="./GroupCreationCard.css"></style>
diff --git a/...ps/group-member-card/GroupMemberCard.scss → ...ups/group-member-card/GroupMemberCard.css b/...ps/group-member-card/GroupMemberCard.scss → ...ups/group-member-card/GroupMemberCard.css
@@ -1,37 +1,37 @@
-@import "./GroupMemberCard.vars.scss";
+@import "../group-card/GroupCard.vars.css";
 
 .group-member-card {
   position: relative;
-  min-width: $card-width;
-  width: $card-width;
-  height: $card-height;
+  min-width: var(--card-width);
+  width: var(--card-width);
+  height: var(--card-height);
   transition-duration: 0.35s;
 
-  &__btn-remove {
+  .group-member-card__btn-remove {
     position: absolute;
     top: calc(var(--spacing-unit) / 2);
     right: calc(var(--spacing-unit) / 2);
   }
 
-  &__info {
+  .group-member-card__info {
     text-align: center;
 
-    &__name {
+    .group-member-card__info__name {
       margin-bottom: calc(var(--spacing-unit) / 3);
       font-size: 1.1rem;
       font-weight: bold;
       color: var(--color-primary);
     }
 
-    &__email {
+    .group-member-card__info__email {
       font-size: 0.9rem;
       color: var(--color-granite-light);
     }
   }
 
   &:deep() {
     .bimdata-card__content {
-      height: $card-content-height;
+      height: var(--card-content-height);
       padding: 0;
       overflow: hidden;
 

diff --git a/src/components/specific/groups/group-member-card/GroupMemberCard.vars.scss b/src/components/specific/groups/group-member-card/GroupMemberCard.vars.scss
diff --git a/src/components/specific/groups/group-member-card/GroupMemberCard.vue b/src/components/specific/groups/group-member-card/GroupMemberCard.vue
@@ -53,4 +53,4 @@ const remove = async () => {
   </BIMDataCard>
 </template>
 
-<style scoped lang="scss" src="./GroupMemberCard.scss"></style>
+<style scoped src="./GroupMemberCard.css"></style>
diff --git a/...ection-card/GroupMemberSelectionCard.scss → ...lection-card/GroupMemberSelectionCard.css b/...ection-card/GroupMemberSelectionCard.scss → ...lection-card/GroupMemberSelectionCard.css
@@ -1,13 +1,13 @@
-@import "../group-member-card//GroupMemberCard.vars.scss";
+@import "../group-card/GroupCard.vars.css";
 
 .group-member-selection-card {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: $card-width;
-  height: $card-height;
+  width: var(--card-width);
+  height: var(--card-height);
   box-shadow: var(--box-shadow);
   background-color: var(--color-white);
   color: var(--color-primary);

diff --git a/src/components/specific/groups/group-member-selection-card/GroupMemberSelectionCard.vue b/src/components/specific/groups/group-member-selection-card/GroupMemberSelectionCard.vue
@@ -17,4 +17,4 @@
   </div>
 </template>
 
-<style scoped lang="scss" src="./GroupMemberSelectionCard.scss"></style>
+<style scoped src="./GroupMemberSelectionCard.css"></style>
diff --git a/src/components/specific/groups/group-members-selector/GroupMembersSelector.vue b/src/components/specific/groups/group-members-selector/GroupMembersSelector.vue
@@ -82,7 +82,7 @@ const addMember = async user => {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .group-members-selector {
   height: 100%;
   display: flex;
@@ -112,16 +112,16 @@ const addMember = async user => {
       height: 64px;
       padding-right: calc(var(--spacing-unit) / 2);
 
-      &__info {
+      .user-add-card__info {
         flex-grow: 1;
         padding: 0 var(--spacing-unit);
         line-height: 18px;
 
-        &__name {
+        .user-add-card__info__name {
           font-weight: bold;
         }
 
-        &__email {
+        .user-add-card__info__email {
           font-size: 12px;
           color: var(--color-granite-light);
         }

diff --git a/...odel-location-form/ModelLocationForm.scss → ...model-location-form/ModelLocationForm.css b/...odel-location-form/ModelLocationForm.scss → ...model-location-form/ModelLocationForm.css
@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
 
-  &__form-control {
+  .model-location-form__form-control {
     position: absolute;
     z-index: 1;
     bottom: calc(var(--spacing-unit) * 3);
@@ -19,12 +19,12 @@
     gap: var(--spacing-unit);
     padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
 
-    &__input {
+    .model-location-form__form-control__input {
       flex-grow: 1;
       font-size: 1rem;
     }
 
-    &__close-btn {
+    .model-location-form__form-control__close-btn {
       color: var(--color-granite-light);
     }
   }