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

package/README.md

@@ -42,9 +42,3 @@ const app = createApp()
 It is also possible to provide your own translations for i18n by removing
 `i18nPlugin` from plugin config and adding translation keys from
 [`src/i18n/lang/fr.js`](./src/i18n/lang/fr.json) to the translation files of your app.
-
-## Build
-
-```bash
-npm run build
-```

package/package.json

@@ -1,36 +1,31 @@
 {
   "name": "@bimdata/bcf-components",
-  "version": "6.0.0-rc.16",
+  "version": "6.0.0-rc.18",
   "files": [
-    "dist",
+    "src",
     "vue3-plugin.js"
   ],
-  "main": "./dist/bcf-components.mjs",
-  "module": "./dist/bcf-components.mjs",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
   "scripts": {
-    "build": "vite build --config build.config.js",
-    "prepublishOnly": "npm run build",
     "release": "semantic-release"
   },
+  "dependencies": {
+    "async": "^3.2.4"
+  },
   "peerDependencies": {
+    "@bimdata/design-system": "*",
+    "@bimdata/components": "*",
     "vue": "^3.0"
   },
   "devDependencies": {
-    "@bimdata/components": "^1.0.6",
-    "@bimdata/design-system": "2.1.0-rc.6",
-    "@bimdata/vite-plugin-libcss": "0.0.1",
     "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/commit-analyzer": "^11.0.0",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^8.0.7",
-    "@semantic-release/npm": "^10.0.3",
-    "@semantic-release/release-notes-generator": "^11.0.1",
-    "@vitejs/plugin-vue": "^4.2.1",
-    "async": "^3.2.4",
-    "conventional-changelog-eslint": "^3.0.9",
-    "sass": "^1.62.1",
-    "semantic-release": "^21.0.2",
-    "vite": "^4.3.5",
-    "vite-plugin-static-copy": "^0.16.0"
+    "@semantic-release/github": "^9.2.1",
+    "@semantic-release/npm": "^11.0.0",
+    "@semantic-release/release-notes-generator": "^12.0.0",
+    "conventional-changelog-eslint": "^5.0.0",
+    "semantic-release": "^22.0.5"
   }
 }

package/src/components/bcf-filters/BcfFilters.scss

@@ -0,0 +1,67 @@
+.bcf-filters {
+  &__btn-toggle {
+    flex: 1;
+    &:enabled {
+      color: var(--color-primary);
+    }
+
+    &:disabled {
+      background-color: var(--color-white);
+      color: var(--color-silver-dark);
+    }
+  }
+
+  &__container {
+    position: absolute;
+    z-index: 1;
+    top: calc(32px + 12px);
+    left: 0;
+    width: 100%;
+    min-width: 252px;
+    max-width: 296px;
+    padding: var(--spacing-unit);
+    box-shadow: var(--box-shadow);
+    background-color: var(--color-white);
+
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 2);
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &__title {
+        font-size: 1.1rem;
+        font-weight: bold;
+      }
+    }
+
+    :deep(.bimdata-select.active) {
+      z-index: 3;
+    }
+
+    &__date {
+      & > .flex {
+        gap: calc(var(--spacing-unit) / 2);
+      }
+
+      :deep(.bimdata-datepicker.error) {
+        input {
+          border-bottom: 1px solid var(--color-high);
+        }
+      }
+
+      p {
+        margin: calc(var(--spacing-unit) / 2) 0 0;
+        font-size: 11px;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}

package/src/components/bcf-filters/BcfFilters.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="bcf-filters" v-click-away="close">
+    <BIMDataButton
+      class="bcf-filters__btn-toggle"
+      :disabled="topics.length === 0"
+      width="120px"
+      fill
+      square
+      icon
+      @click="toggle"
+    >
+      <BIMDataIconFilterList size="xxs" fill color="default" margin="0 6px 0 0" />
+      <span>
+        {{ $t("BcfComponents.BcfFilters.filtersButton") }}
+      </span>
+    </BIMDataButton>
+
+    <transition name="slide-fade-up">
+      <div class="bcf-filters__container" v-show="isOpen">
+        <div class="bcf-filters__container__header">
+          <div class="bcf-filters__container__header__title">
+            {{ $t("BcfComponents.BcfFilters.filtersTitle") }}
+          </div>
+          <BIMDataButton color="primary" ghost rounded icon @click="close">
+            <BIMDataIconClose size="xxs" fill color="primary" />
+          </BIMDataButton>
+        </div>
+
+        <BIMDataSelect
+          width="100%"
+          :multi="true"
+          :label="$t('BcfComponents.BcfFilters.priorityLabel')"
+          :nullLabel="$t('BcfComponents.BcfFilters.undefined')"
+          :options="priorityOptions"
+          v-model="filters.priorities"
+        />
+
+        <BIMDataSelect
+          width="100%"
+          :multi="true"
+          :label="$t('BcfComponents.BcfFilters.statusLabel')"
+          :nullLabel="$t('BcfComponents.BcfFilters.undefined')"
+          :options="statusOptions"
+          v-model="filters.statuses"
+        />
+
+        <div class="bcf-filters__container__date">
+          <BIMDataDatePicker
+            v-model="filters.startDate"
+            :value="filters.startDate"
+            @to-date-change="filters.endDate = $event"
+            :toDate="filters.endDate"
+            :clearButton="true"
+            width="100%"
+            :placeholder="$t('BcfComponents.BcfFilters.datePlaceholder')"
+            :isDateRange="true"
+            :autoCloseRange="true"
+          >
+          </BIMDataDatePicker>
+        </div>
+
+        <BIMDataSelect
+          width="100%"
+          :multi="true"
+          :label="$t('BcfComponents.BcfFilters.assignedToLabel')"
+          :nullLabel="$t('BcfComponents.BcfFilters.undefined')"
+          :options="userOptions"
+          v-model="filters.users"
+        />
+
+        <BIMDataSelect
+          width="100%"
+          :multi="true"
+          :label="$t('BcfComponents.BcfFilters.creatorsLabel')"
+          :nullLabel="$t('BcfComponents.BcfFilters.undefined')"
+          :options="creatorOptions"
+          v-model="filters.creators"
+        />
+
+        <BIMDataSelect
+          width="100%"
+          :multi="true"
+          :label="$t('BcfComponents.BcfFilters.tagsLabel')"
+          :nullLabel="$t('BcfComponents.BcfFilters.undefined')"
+          :options="labelOptions"
+          v-model="filters.labels"
+        >
+          <template #empty>
+            <div class="p-x-12 p-t-12 p-b-6">
+              <BIMDataText fontSize="13px">
+                {{ $t("BcfComponents.BcfFilters.undefined") }}
+              </BIMDataText>
+            </div>
+          </template>
+        </BIMDataSelect>
+
+        <div class="bcf-filters__container__actions">
+          <BIMDataButton class="m-r-12" color="primary" ghost radius @click="resetFilters">
+            {{ $t("BcfComponents.BcfFilters.resetButton") }}
+          </BIMDataButton>
+          <BIMDataButton color="primary" fill radius @click="submitFilters">
+            <BIMDataIconSearch size="xxs" margin="0 6px 0 0" />
+            <span>
+              {{ $t("BcfComponents.BcfFilters.searchButton") }}
+            </span>
+          </BIMDataButton>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { computed, ref, toRaw, watch } from "vue";
+import { useBcfFilter } from "../../composables/filter.js";
+// Components
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import {
+  BIMDataIconClose,
+  BIMDataIconFilterList,
+  BIMDataIconSearch,
+} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
+import BIMDataInput from "@bimdata/design-system/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
+import BIMDataSelect from "@bimdata/design-system/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue";
+import BIMDataText from "@bimdata/design-system/src/BIMDataComponents/BIMDataText/BIMDataText.vue";
+
+function getSelectOptions(list) {
+  return Array.from(new Set(list)).sort((a, b) =>
+    a.localeCompare(b, undefined, { sensitivity: "base" })
+  );
+}
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIconClose,
+    BIMDataIconFilterList,
+    BIMDataIconSearch,
+    BIMDataInput,
+    BIMDataSelect,
+    BIMDataText
+  },
+  props: {
+    topics: {
+      type: Array,
+      required: true,
+    },
+    initFilters: {
+      type: Object,
+    },
+  },
+  emits: ["submit"],
+  setup(props, { emit }) {
+    const isOpen = ref(false);
+    const close = () => (isOpen.value = false);
+    const toggle = () => (isOpen.value = !isOpen.value);
+
+    const { filters, filteredTopics, reset, apply } = useBcfFilter(computed(() => props.topics));
+
+    watch(
+      () => props.initFilters,
+      () => {
+        if (props.initFilters) {
+          apply(props.initFilters);
+        } else {
+          filters;
+        }
+      },
+      { deep: true }
+    );
+
+    const priorityOptions = computed(() =>
+      getSelectOptions(props.topics.map((topic) => topic.priority))
+    );
+
+    const statusOptions = computed(() =>
+      getSelectOptions(props.topics.map((topic) => topic.topic_status))
+    );
+
+    const userOptions = computed(() =>
+      getSelectOptions(props.topics.map((topic) => topic.assigned_to))
+    );
+
+    const creatorOptions = computed(() =>
+      getSelectOptions(props.topics.map((topic) => topic.creation_author))
+    );
+
+    const labelOptions = computed(() =>
+      getSelectOptions(props.topics.flatMap((topic) => topic.labels))
+    );
+
+    const submitFilters = () => {
+      filters.endDate?.setHours(23, 59, 59);
+      emit("submit", {
+        filters: toRaw(filters),
+        topics: filteredTopics.value,
+      });
+      isOpen.value = false;
+    };
+
+    const resetFilters = () => {
+      reset();
+      emit("submit", {
+        filters: toRaw(filters),
+        topics: filteredTopics.value,
+      });
+    };
+
+    return {
+      // References
+      creatorOptions,
+      filters,
+      isOpen,
+      labelOptions,
+      priorityOptions,
+      statusOptions,
+      userOptions,
+      // Methods
+      close,
+      resetFilters,
+      submitFilters,
+      toggle,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./BcfFilters.scss"></style>

package/src/components/bcf-settings/BcfSettings.scss

@@ -0,0 +1,28 @@
+.bcf-settings {
+  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: 1rem;
+      font-weight: bold;
+    }
+  }
+
+  &__content {
+    height: calc(100% - 32px);
+    padding: 0 calc(var(--spacing-unit) * 0.5);
+    overflow: auto;
+
+    &__text {
+      padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+      text-align: center;
+      color: var(--color-granite);
+    }
+  }
+}

package/src/components/bcf-settings/BcfSettings.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="bcf-settings">
+    <div class="bcf-settings__header">
+      <BIMDataButton
+        v-if="uiConfig.backButton"
+        color="granite"
+        ghost
+        rounded
+        icon
+        @click="$emit('back')"
+      >
+        <BIMDataIconArrow size="xxs" />
+      </BIMDataButton>
+      <span class="bcf-settings__header__title">
+        {{ $t("BcfComponents.BcfSettings.title") }}
+      </span>
+      <BIMDataButton
+        v-if="uiConfig.closeButton"
+        color="granite"
+        ghost
+        rounded
+        icon
+        @click="$emit('close')"
+      >
+        <BIMDataIconClose size="xxs" />
+      </BIMDataButton>
+    </div>
+
+    <div class="bcf-settings__content">
+      <div class="bcf-settings__content__text">
+        {{ $t("BcfComponents.BcfSettings.text") }}
+      </div>
+      <SettingCard
+        v-for="t in EXTENSION_TYPES"
+        :detailedExtensions="detailedExtensions"
+        :extensionType="t"
+        @create-extension="createExtension"
+        @update-extension="updateExtension"
+        @delete-extension="deleteExtension"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { EXTENSION_TYPES } from "../../config.js";
+import { useService } from "../../service.js";
+// Components
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+
+import {
+  BIMDataIconArrow,
+  BIMDataIconClose,
+} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
+import SettingCard from "./setting-card/SettingCard.vue";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIconArrow,
+    BIMDataIconClose,
+    SettingCard,
+  },
+  props: {
+    uiConfig: {
+      type: Object,
+      default: () => ({
+        backButton: false,
+        closeButton: false,
+      }),
+    },
+    project: {
+      type: Object,
+      required: true,
+    },
+    detailedExtensions: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["back", "close", "extension-created", "extension-updated", "extension-deleted"],
+  setup(props, { emit }) {
+    const service = useService();
+
+    const createExtension = async (event) => {
+      const ext = await service.createExtension(props.project, event.extensionType, event.data);
+      emit("extension-created", ext);
+    };
+
+    const updateExtension = async (event) => {
+      const ext = await service.updateExtension(
+        props.project,
+        event.extensionType,
+        event.extension,
+        event.data
+      );
+      emit("extension-updated", ext);
+    };
+
+    const deleteExtension = async (event) => {
+      await service.deleteExtension(props.project, event.extensionType, event.extension);
+      emit("extension-deleted", event.extension);
+    };
+
+    return {
+      // References
+      EXTENSION_TYPES,
+      // Methods
+      createExtension,
+      updateExtension,
+      deleteExtension,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./BcfSettings.scss"></style>

package/src/components/bcf-settings/setting-card/SettingCard.scss

@@ -0,0 +1,59 @@
+.setting-card {
+  margin: var(--spacing-unit) 0;
+  padding: var(--spacing-unit);
+  box-shadow: var(--box-shadow);
+  background: var(--color-white);
+  
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    &__text {
+      font-weight: bold;
+    }
+
+    &__icons {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing-unit) * 2);
+
+      .count {
+        min-width: 21px;
+        height: 21px;
+        padding: 0 4px;
+  
+        display: flex;
+        justify-content: center;
+        align-items: center;
+  
+        border-radius: 11px;
+        font-size: 11px;
+        font-weight: 700;
+        background-color: var(--color-primary);
+        color: var(--color-white);
+      }
+    }
+
+  }
+
+  &__subheader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: calc(var(--spacing-unit) / 2);
+    margin-bottom: var(--spacing-unit);
+  }
+
+  &__form {
+    margin-bottom: var(--spacing-unit);
+
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: calc(var(--spacing-unit) / 2);
+    }
+  }
+}

package/src/components/bcf-settings/setting-card/SettingCard.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="setting-card">
+    <div class="setting-card__header" @click="toggle">
+      <div class="setting-card__header__text">
+        {{ $t(`BcfComponents.SettingCard.title.${extensionType}`) }}
+      </div>
+      <div class="setting-card__header__icons">
+        <div v-if="availableExtensions" class="count">
+          {{ availableExtensions.length }}
+        </div>
+        <BIMDataIconChevron size="xxs" :rotate="isOpen ? 90 : 0" />
+      </div>
+    </div>
+    <div v-show="isOpen">
+      <div class="setting-card__subheader">
+        {{ $t(`BcfComponents.SettingCard.text.${extensionType}`) }}
+        <BIMDataButton fill radius @click="toggleForm">
+          <BIMDataIconPlus margin="0 6px 0 0" size="xxxs" fill />
+          <span>
+            {{ $t("BcfComponents.SettingCard.addButton") }}
+          </span>
+        </BIMDataButton>
+      </div>
+
+      <transition name="slide-fade-up">
+        <div v-show="isOpenForm" class="setting-card__form">
+          <BIMDataInput
+            ref="input"
+            :placeholder="$t(`BcfComponents.SettingCard.input.${extensionType}`)"
+            v-model="name"
+            @keyup.enter.stop="addExtension"
+          />
+
+          <div class="actions">
+            <BIMDataButton ghost radius @click="closeForm">
+              {{ $t("BcfComponents.SettingCard.cancelButton") }}
+            </BIMDataButton>
+            <BIMDataButton color="primary" fill radius @click="addExtension">
+              {{ $t("BcfComponents.SettingCard.validateButton") }}
+            </BIMDataButton>
+          </div>
+        </div>
+      </transition>
+
+      <ul class="setting-card__content bimdata-list">
+        <SettingCardItem
+          v-for="extension in availableExtensions"
+          :key="extension.id"
+          :extensionType="extensionType"
+          :extension="extension"
+          @update-extension="$emit('update-extension', $event)"
+          @delete-extension="$emit('delete-extension', $event)"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, ref } from "vue";
+import { getAvailableExtensions } from "../../../utils/extensions.js";
+// Compopnents
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import {
+  BIMDataIconChevron,
+  BIMDataIconPlus,
+} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
+import BIMDataInput from "@bimdata/design-system/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
+import SettingCardItem from "./SettingCardItem.vue";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIconChevron,
+    BIMDataIconPlus,
+    BIMDataInput,
+    SettingCardItem,
+  },
+  props: {
+    detailedExtensions: {
+      type: Object,
+      required: true,
+    },
+    extensionType: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ["create-extension", "update-extension", "delete-extension"],
+  setup(props, { emit }) {
+    const availableExtensions = computed(() =>
+      getAvailableExtensions(props.extensionType, props.detailedExtensions)
+    );
+
+    const input = ref(null);
+    const name = ref("");
+
+    const isOpen = ref(false);
+    const close = () => (isOpen.value = false);
+    const toggle = () => (isOpen.value = !isOpen.value);
+
+    const isOpenForm = ref(false);
+    const closeForm = () => {
+      name.value = "";
+      isOpenForm.value = false;
+    };
+    const toggleForm = () => {
+      isOpenForm.value = !isOpenForm.value;
+      if (isOpenForm.value) {
+        setTimeout(() => input.value.focus(), 50);
+      }
+    };
+
+    const addExtension = async () => {
+      emit("create-extension", {
+        extensionType: props.extensionType,
+        data: { value: name.value },
+      });
+      closeForm();
+    };
+
+    return {
+      // References
+      availableExtensions,
+      input,
+      isOpen,
+      isOpenForm,
+      name,
+      // Methods
+      addExtension,
+      close,
+      closeForm,
+      toggle,
+      toggleForm,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./SettingCard.scss"></style>