@bimdata/bcf-components 6.0.0-rc.16 → 6.0.0-rc.18

package/src/components/bcf-topic-card/BcfTopicDefaultImage.vue

@@ -0,0 +1,90 @@
+<template>
+  <svg
+    width="84"
+    height="81"
+    viewBox="0 0 84 81"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M83.3154 40.6328C83.3154 62.7242 65.4068 80.6328 43.3154 80.6328C21.224 80.6328 3.31543 62.7242 3.31543 40.6328C3.31543 18.5414 21.224 0.632812 43.3154 0.632812C65.4068 0.632812 83.3154 18.5414 83.3154 40.6328Z"
+      fill="#FFFFFF"
+    />
+    <path
+      d="M46.2756 13.5376L34.124 58.8879C33.9787 59.4301 34.3035 59.9926 34.8457 60.1379L68.3655 69.1195C68.9077 69.2648 69.4702 68.94 69.6155 68.3978L78.333 35.8639L67.4883 32.9581C66.9461 32.8128 66.6213 32.2503 66.7666 31.708L70.2008 18.8916L47.5256 12.8159C46.9834 12.6706 46.4209 12.9953 46.2756 13.5376Z"
+      fill="#FFFFFF"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M45.7926 13.4082C46.0094 12.5992 46.8461 12.1161 47.655 12.3329L70.8131 18.5381L67.2496 31.8374C67.1758 32.1129 67.0765 32.4855 67.0765 32.4855L78.92 35.6661L70.0985 68.5272C69.8817 69.3362 69.045 69.8192 68.2361 69.6024L34.7163 60.6209C33.9073 60.4041 33.4243 59.5674 33.641 58.7584L45.7926 13.4082ZM47.3962 13.2988C47.1207 13.225 46.8324 13.3915 46.7585 13.667L34.607 59.0173C34.5331 59.2928 34.6996 59.5811 34.9751 59.6549L68.4949 68.6365C68.7704 68.7103 69.0587 68.5439 69.1326 68.2684L77.7206 36.2174L67.3589 33.441C66.55 33.2243 66.0669 32.3876 66.2837 31.5786L69.5884 19.2452L47.3962 13.2988Z"
+      class="fill-silver"
+    />
+    <path
+      d="M67.0765 32.4855L70.8131 18.5404L78.92 35.6661L67.0765 32.4855Z"
+      class="fill-silver"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M44.3876 52.686L48.3872 37.7594L67.8264 42.9682L63.8269 57.8947L44.3876 52.686ZM47.0917 37.0402C47.2458 36.4651 47.837 36.1238 48.4121 36.2779L68.5456 41.6726C69.1208 41.8268 69.4621 42.4179 69.308 42.9931L65.1224 58.6139C64.9683 59.1891 64.3771 59.5304 63.802 59.3763L43.6684 53.9815C43.0933 53.8274 42.752 53.2362 42.9061 52.6611L47.0917 37.0402ZM53.3118 42.9855C52.9778 44.2316 51.697 44.9712 50.4508 44.6373C49.2047 44.3034 48.4652 43.0225 48.7991 41.7763C49.133 40.5302 50.4139 39.7907 51.66 40.1246C52.9061 40.4585 53.6457 41.7394 53.3118 42.9855ZM46.7528 49.4132L46.1482 51.6695L62.8104 56.1342L64.2521 50.7536L60.6945 44.5916L52.992 49.0387L51.5943 46.6179L46.7528 49.4132Z"
+      class="fill-silver"
+    />
+    <path
+      d="M7.70191 20.1034L19.8535 65.4537C19.9988 65.9959 20.5613 66.3207 21.1035 66.1754L54.6233 57.1938C55.1655 57.0485 55.4903 56.486 55.345 55.9437L46.6276 23.4098L35.783 26.3157C35.2407 26.4609 34.6782 26.1362 34.5329 25.5939L31.0988 12.7776L8.42363 18.8533C7.88139 18.9986 7.55662 19.5612 7.70191 20.1034Z"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.21895 20.2328C7.00219 19.4238 7.48525 18.5871 8.29422 18.3704L31.4523 12.1652L35.0159 25.4645C35.0897 25.74 35.1918 26.119 35.1918 26.119L47.0371 22.9451L55.828 55.8143C56.0447 56.6233 55.5617 57.46 54.7527 57.6767L21.2329 66.6583C20.424 66.8751 19.5873 66.392 19.3705 65.5831L7.21895 20.2328ZM8.55304 19.3363C8.27754 19.4101 8.11106 19.6985 8.18488 19.974L20.3365 65.3243C20.4103 65.5998 20.6986 65.7662 20.9741 65.6924L54.4939 56.7108C54.7694 56.637 54.9359 56.3487 54.8621 56.0732L46.274 24.0222L35.9124 26.7986C35.1034 27.0154 34.2667 26.5323 34.0499 25.7234L30.7452 13.3899L8.55304 19.3363Z"
+      class="fill-silver"
+    />
+    <path
+      d="M35.1918 26.119L31.4534 12.1672L47.0371 22.9451L35.1918 26.119Z"
+      class="fill-silver"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M25.6411 54.9509L21.6416 40.0243L41.0808 34.8156L45.0804 49.7422L25.6411 54.9509ZM20.16 40.0492C20.0059 39.4741 20.3472 38.8829 20.9224 38.7288L41.0559 33.3341C41.631 33.1799 42.2222 33.5213 42.3763 34.0964L46.5619 49.7172C46.716 50.2924 46.3747 50.8836 45.7996 51.0377L25.666 56.4324C25.0909 56.5865 24.4997 56.2452 24.3456 55.6701L20.16 40.0492ZM28.5194 42.088C28.8533 43.3341 28.1138 44.615 26.8676 44.9489C25.6215 45.2828 24.3406 44.5433 24.0067 43.2971C23.6728 42.051 24.4123 40.7701 25.6585 40.4362C26.9046 40.1023 28.1855 40.8418 28.5194 42.088ZM26.053 50.934L26.6576 53.1903L43.3198 48.7257L41.8781 43.3452L35.7161 39.7876L31.2691 47.4901L28.8483 46.0924L26.053 50.934Z"
+      class="fill-silver"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.9375 17.1323V12.6323H7.9375V17.1323H6.9375Z"
+      class="fill-secondary"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.72393 18.0419L2.54195 14.8599L3.24906 14.1528L6.43104 17.3348L5.72393 18.0419Z"
+      class="fill-secondary"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.46582 19.615H0.96582L0.96582 18.615H5.46582V19.615Z"
+      class="fill-secondary"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M46.5972 10.507L47.7619 6.16033L48.7278 6.41915L47.5631 10.7658L46.5972 10.507Z"
+      class="fill-primary"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M45.1895 11.0715L42.9395 7.17435L43.8056 6.67435L46.0556 10.5715L45.1895 11.0715Z"
+      class="fill-primary"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M44.5331 12.5242L40.1864 11.3595L40.4452 10.3936L44.7919 11.5582L44.5331 12.5242Z"
+      class="fill-primary"
+    />
+  </svg>
+</template>

package/src/components/bcf-topic-creation-card/BcfTopicCreationCard.scss

@@ -0,0 +1,15 @@
+.bcf-topic-creation-card {
+  width: 336px;
+  height: 307px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: calc(var(--spacing-unit) * 2);
+  box-shadow: var(--box-shadow);
+  background-color: var(--color-white);
+
+  &__text {
+    font-size: 14px;
+  }
+}

package/src/components/bcf-topic-creation-card/BcfTopicCreationCard.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="bcf-topic-creation-card">
+    <BcfTopicCreationCardImage />
+    <div class="bcf-topic-creation-card__text">
+      {{ $t("BcfComponents.BcfTopicCreationCard.text") }}
+    </div>
+    <BIMDataButton
+      width="48px"
+      height="48px"
+      color="default"
+      fill
+      radius
+      icon
+      @click="$emit('create-topic')"
+    >
+      <BIMDataIconPlus size="m" fill color="default" />
+    </BIMDataButton>
+  </div>
+</template>
+
+<script>
+// Components
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import BIMDataIconPlus from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconPlus.vue";
+import BcfTopicCreationCardImage from "./BcfTopicCreationCardImage.vue";
+
+export default {
+  components: {
+    BcfTopicCreationCardImage,
+    BIMDataButton,
+    BIMDataIconPlus,
+  },
+  emits: ["create-topic"],
+};
+</script>
+
+<style scoped lang="scss" src="./BcfTopicCreationCard.scss"></style>

package/src/components/bcf-topic-creation-card/BcfTopicCreationCardImage.vue

@@ -0,0 +1,55 @@
+<template>
+  <svg
+    width="66"
+    height="60"
+    viewBox="0 0 66 60"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      opacity="0.21"
+      d="M14.4999 59.2445C22.2871 59.2445 28.5999 58.9311 28.5999 58.5445C28.5999 58.1579 22.2871 57.8445 14.4999 57.8445C6.71269 57.8445 0.399902 58.1579 0.399902 58.5445C0.399902 58.9311 6.71269 59.2445 14.4999 59.2445Z"
+      class="fill-granite-light"
+    />
+    <path
+      d="M46.84 26.5444C45.0533 26.5444 43.5645 28.0444 43.5645 29.8444C43.5645 31.6444 45.0533 33.1444 46.84 33.1444C48.6267 33.1444 50.1156 31.6444 50.1156 29.8444C50.1156 28.0444 48.6267 26.5444 46.84 26.5444ZM48.4282 29.8444C48.4282 30.7444 47.7333 31.4444 46.84 31.4444C45.9467 31.4444 45.2519 30.7444 45.2519 29.8444C45.2519 28.9444 45.9467 28.2444 46.84 28.2444C47.7333 28.2444 48.4282 29.0444 48.4282 29.8444Z"
+      class="fill-silver-dark"
+    />
+    <path
+      d="M54.8797 27.6444C52.9938 27.6444 51.5049 29.1444 51.5049 31.0444C51.5049 32.9444 52.9938 34.4444 54.8797 34.4444C56.7656 34.4444 58.2545 32.9444 58.2545 31.0444C58.1553 29.1444 56.6664 27.6444 54.8797 27.6444ZM56.4678 31.0444C56.4678 31.9444 55.773 32.6444 54.8797 32.6444C53.9864 32.6444 53.2916 31.9444 53.2916 31.0444C53.2916 30.1444 53.9864 29.4444 54.8797 29.4444C55.773 29.4444 56.4678 30.1444 56.4678 31.0444Z"
+      class="fill-silver-dark"
+    />
+    <path
+      d="M52.1005 11.1444C44.7554 11.1444 38.7998 17.1444 38.7998 24.5444V50.9444C38.7998 53.0444 40.4872 54.8444 42.6709 54.8444C42.9687 54.8444 43.2665 54.8444 43.5642 54.7444C43.6635 56.8444 45.3509 58.5444 47.4354 58.5444C49.5198 58.5444 51.3065 56.8444 51.3065 54.6444V52.7444C51.6042 52.8444 51.902 52.8444 52.1998 52.8444H52.3983C52.6961 52.8444 52.9939 52.8444 53.2917 52.7444C53.4902 54.7444 55.0783 56.2444 57.0635 56.2444C57.3613 56.2444 57.6591 56.2444 57.9568 56.1444C58.3539 57.9444 59.8428 59.2444 61.7287 59.2444C63.8131 59.2444 65.5998 57.5444 65.5998 55.3444V24.5444C65.4013 17.1444 59.4457 11.1444 52.1005 11.1444ZM57.7583 47.8444V52.4444C57.7583 52.9444 57.3613 53.3444 56.865 53.3444C56.3687 53.3444 55.9717 52.9444 55.9717 52.4444V47.1444H52.9939V49.0444C52.9939 49.5444 52.5968 49.9444 52.1005 49.9444H51.902C51.4057 49.9444 51.0087 49.5444 51.0087 49.0444V42.0444H48.0309V54.6444C48.0309 55.1444 47.6339 55.5444 47.1376 55.5444C46.6413 55.5444 46.2442 55.1444 46.2442 54.6444V48.5444H43.2665V51.0444C43.2665 51.5444 42.8694 51.9444 42.3731 51.9444C41.8768 51.9444 41.4798 51.5444 41.4798 51.0444V24.5444C41.4798 18.8444 46.145 14.1444 51.8028 14.1444C57.4605 14.1444 62.1257 18.8444 62.1257 24.5444V55.3444C62.1257 55.8444 61.7287 56.2444 61.2324 56.2444C60.7361 56.2444 60.3391 55.8444 60.3391 55.3444V47.8444H57.7583Z"
+      class="fill-silver-dark"
+    />
+    <path
+      d="M29.8001 6.84446C31.5674 6.84446 33.0001 5.41177 33.0001 3.64446C33.0001 1.87715 31.5674 0.444458 29.8001 0.444458C28.0328 0.444458 26.6001 1.87715 26.6001 3.64446C26.6001 5.41177 28.0328 6.84446 29.8001 6.84446Z"
+      class="fill-silver-dark"
+    />
+    <path
+      d="M23.8997 15.9444C25.1147 15.9444 26.0997 14.9595 26.0997 13.7444C26.0997 12.5294 25.1147 11.5444 23.8997 11.5444C22.6847 11.5444 21.6997 12.5294 21.6997 13.7444C21.6997 14.9595 22.6847 15.9444 23.8997 15.9444Z"
+      class="fill-secondary"
+    />
+    <path
+      d="M28.8999 22.0444C29.7283 22.0444 30.3999 21.3729 30.3999 20.5444C30.3999 19.716 29.7283 19.0444 28.8999 19.0444C28.0715 19.0444 27.3999 19.716 27.3999 20.5444C27.3999 21.3729 28.0715 22.0444 28.8999 22.0444Z"
+      class="fill-silver-dark"
+    />
+    <path
+      d="M13.9995 33.5444C15.2995 34.1444 16.4995 34.8444 17.5995 35.7444C19.1995 37.1444 20.4995 38.7444 21.3995 40.6444C21.6995 41.2444 21.8995 41.8444 22.0995 42.4444C22.5995 43.9444 22.2995 45.2444 21.1995 46.3444C18.8995 48.6444 16.1995 49.3444 13.0995 48.5444C12.8995 48.5444 12.6995 48.5444 12.5995 48.5444C11.3995 48.7444 10.0995 48.8444 8.89951 48.6444C8.59951 48.6444 8.39951 48.5444 7.99951 48.5444C8.29951 49.0444 8.59951 49.4444 8.89951 49.9444C9.79951 51.2444 11.0995 52.2444 12.4995 52.8444C14.3995 53.6444 16.2995 53.8444 18.2995 53.4444C20.0995 53.0444 21.6995 52.1444 22.9995 50.7444C24.3995 49.2444 25.2995 47.4444 25.4995 45.3444C25.5995 44.0444 25.5995 42.6444 25.0995 41.4444C24.6995 40.4444 24.0995 39.5444 23.3995 38.7444C22.0995 37.0444 20.5995 35.5444 19.0995 34.0444C18.4995 33.4444 17.8995 32.9444 17.2995 32.4444C17.1995 32.3444 17.0995 32.3444 16.9995 32.3444C15.6995 32.1444 14.7995 32.3444 13.9995 33.5444Z"
+      class="fill-silver-dark"
+    />
+    <path
+      d="M11.4997 29.6444C10.3997 29.5444 9.49967 29.6444 8.59967 29.9444C7.39967 30.2444 6.19967 30.8444 5.19967 31.6444C4.19967 32.4444 3.39967 33.3444 2.79967 34.5444C1.99967 36.0444 1.59967 37.6444 1.69967 39.3444C1.79967 41.0444 2.29967 42.7444 3.29967 44.1444C4.19967 45.4444 5.29967 46.4444 6.59967 47.1444C7.59967 47.6444 8.49967 48.0444 9.59967 48.0444C11.3997 48.0444 13.1997 47.8444 14.8997 47.3444C16.1997 47.0444 17.5997 46.6444 18.8997 46.2444C19.4997 46.0444 20.1997 45.9444 20.7997 45.5444C21.1997 45.3444 21.3997 44.8444 21.5997 44.3444C21.7997 43.6444 21.7997 42.9444 21.3997 42.2444C21.0997 42.4444 20.7997 42.6444 20.4997 42.8444C19.1997 43.6444 17.7997 44.2444 16.2997 44.6444C14.2997 45.1444 12.1997 45.1444 10.1997 44.8444C8.89967 44.6444 7.79967 44.0444 7.09967 42.7444C6.69967 41.8444 6.49967 40.9444 6.49967 39.9444C6.39967 37.5444 7.29967 35.5444 8.99967 33.8444C8.99967 33.8444 9.19967 33.5444 9.29967 33.2444C9.79967 31.9444 10.3997 30.7444 11.4997 29.6444Z"
+      class="fill-silver-dark"
+    />
+    <path
+      d="M9.89953 44.2445C9.89953 44.0445 9.89953 43.8445 9.89953 43.7445C9.69953 41.5445 9.99953 39.4445 10.7995 37.4445C11.4995 35.5445 12.5995 33.9445 13.9995 32.5445C14.8995 31.6445 15.9995 31.4445 17.1995 31.6445C19.7995 32.2445 21.7995 33.6445 22.8995 36.1445C23.0995 36.6445 23.1995 37.2445 23.4995 37.7445C23.5995 38.0445 23.8995 38.3445 24.0995 38.6445C24.7995 39.6445 25.4995 40.7445 25.8995 41.9445C25.8995 41.9445 25.8995 42.0445 25.9995 42.1445C26.2995 41.4445 26.6995 40.7445 26.9995 40.1445C27.4995 38.9445 27.5995 37.6445 27.4995 36.3445C27.2995 34.1445 26.4995 32.1445 24.8995 30.5445C23.7995 29.3445 22.3995 28.5445 20.7995 28.1445C19.0995 27.6445 17.2995 27.6445 15.5995 28.2445C13.9995 28.7445 12.5995 29.5445 11.4995 30.9445C11.0995 31.4445 10.6995 32.0445 10.3995 32.7445C9.79953 34.0445 9.29953 35.4445 8.89953 36.7445C8.39953 38.5445 7.99953 40.4445 7.59953 42.2445C7.49953 42.8445 7.89953 43.2445 8.29953 43.6445C8.59953 43.9445 9.19953 44.1445 9.89953 44.2445Z"
+      class="fill-silver-dark"
+    />
+    <path
+      d="M37.3997 7.04441C38.3386 7.04441 39.0997 6.28329 39.0997 5.34441C39.0997 4.40553 38.3386 3.64441 37.3997 3.64441C36.4608 3.64441 35.6997 4.40553 35.6997 5.34441C35.6997 6.28329 36.4608 7.04441 37.3997 7.04441Z"
+      class="fill-secondary"
+    />
+  </svg>
+</template>

package/src/components/bcf-topic-form/BcfTopicForm.scss

@@ -0,0 +1,124 @@
+.bcf-topic-form {
+  height: 100%;
+
+  &__header {
+    padding: 0 calc(var(--spacing-unit) / 2);
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing-unit) / 3);
+
+    &__title {
+      flex-grow: 1;
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+
+  &__content {
+    height: calc(100% - 64px - var(--spacing-unit));
+    padding: var(--spacing-unit) calc(var(--spacing-unit) / 2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-unit);
+    overflow: auto;
+
+    &__head {
+      height: 27px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+
+      &__index,
+      &__date {
+        height: 100%;
+        padding: calc(var(--spacing-unit) / 2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--color-silver-light);
+      }
+
+      &__index {
+        min-width: 50px;
+      }
+
+      &__date {
+        min-width: 100px;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      gap: var(--spacing-unit);
+
+      & > * {
+        flex-grow: 1;
+      }
+
+      .count-objects,
+      .count-annotations {
+        min-width: 16px;
+        height: 16px;
+        margin-left: var(--spacing-unit);
+        padding: 0 4px;
+        border-radius: 8px;
+        font-size: 10px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .count-objects {
+        background-color: var(--color-primary);
+        color: var(--color-white);
+      }
+      .count-annotations {
+        background-color: var(--color-white);
+        color: var(--color-primary);
+      }
+    }
+
+    &__body {
+      .bimdata-select {
+        margin: 30px 0;
+        font-size: 13px;
+        &.active {
+          z-index: 3;
+        }
+      }
+      :deep(.bimdata-input) {
+        input {
+          font-size: 13px;
+          color: var(--color-granite);
+        }
+      }
+      :deep(.bimdata-textarea) {
+        textarea {
+          font-family: var(--primary-font);
+          font-size: 13px;
+          color: var(--color-granite);
+          resize: vertical;
+        }
+      }
+    }
+  }
+
+  &__footer {
+    padding: var(--spacing-unit) calc(var(--spacing-unit) / 2);
+  }
+
+  &__loader {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(47, 55, 74, 0.9);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}