vueless 0.0.1

package/layout.admin/BrandBlock.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="brand">
+    <ULink v-if="!isMobileDevice" :route="logoRouteName" class="brand-link" no-focus-ring>
+      <ULogo v-if="logoPath" :path="logoPath" size="xl" class="logo" @click="onClickLogo" />
+
+      <UAvatar
+        v-else
+        color="violet"
+        :user-name="firstWord"
+        size="lg"
+        bordered
+        @click="onClickLogo"
+      />
+    </ULink>
+
+    <div v-else class="brand-wrapper" @click="onClickBrandWrapper">
+      <ULogo v-if="logoPath" class="logo" :path="logoPath" size="xl" />
+
+      <UAvatar v-else color="violet" :user-name="firstWord" size="lg" bordered />
+
+      <div class="brand-name">
+        {{ brandName }}
+      </div>
+
+      <UIcon
+        v-if="isShownBrandBlockDropdown"
+        :name="modelValue ? 'keyboard_arrow_up-fill' : 'keyboard_arrow_down-fill'"
+        class="icon"
+      />
+    </div>
+
+    <div v-if="isShownBrandBlock && isMobileDevice" class="line" />
+
+    <div v-if="isShownBrandBlock && menuItems.length" :class="brandBlockClass">
+      <div v-if="!isMobileDevice" class="brand-name">
+        {{ brandName }}
+      </div>
+
+      <div v-if="workspaces.length && !isMobileDevice" class="line" />
+
+      <div v-if="isMobileDevice" class="workspaces">{{ $t("title.workspaces") }}</div>
+
+      <div
+        v-for="(item, index) of workspaces"
+        :key="index"
+        class="workspace-item"
+        @click="onClickBrandNameDropdownItem(item.id)"
+      >
+        <UAvatar
+          :class="avatarClass"
+          :color="getColor(item)"
+          :user-name="item.label"
+          :size="avatarSize"
+          :rounded="avatarRounded"
+          bordered
+        />
+        <div>{{ item.label }}</div>
+      </div>
+
+      <div v-if="menuItems" class="line" />
+
+      <MainSubMenu class="sub-menu" :items="menuItems" show-icon :icon-color="iconColor" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, watch } from "vue";
+import { mapGetters, mapMutations, useStore } from "vuex";
+
+import { layout } from "vueless/service.ui";
+
+import ULink from "vueless/ui.button-link";
+import UIcon from "vueless/ui.image-icon";
+import ULogo from "vueless/ui.image-logo";
+import UAvatar from "vueless/ui.image-avatar";
+import MainSubMenu from "./MainSubMenu.vue";
+
+import layoutMixin from "./mixins";
+
+export default {
+  name: "BrandBlock",
+
+  components: {
+    ULink,
+    ULogo,
+    UAvatar,
+    UIcon,
+    MainSubMenu,
+  },
+
+  mixins: [layoutMixin],
+
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ["update:modelValue"],
+
+  setup(props, { emit }) {
+    const store = useStore();
+
+    const workspaceItems = ref([]);
+    const selectedWorkspaceName = ref("");
+    const workspaceItemClick = ref(null);
+    const configKey = computed(() => store.state.layout.configKey);
+
+    const isShownBrandBlock = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      },
+    });
+
+    const onChangeConfigKey = async () => {
+      const layoutConfig = layout.admin[configKey.value] || layout.admin;
+      const workspaces = layoutConfig.brandBlock.workspaces;
+
+      workspaceItems.value = store.getters[workspaces?.workspaceItemsGetter];
+      selectedWorkspaceName.value = store.getters[workspaces?.selectedWorkspaceNameGetter];
+
+      if (workspaces?.workspacesAction) {
+        await store.dispatch(workspaces?.workspacesAction, { idbOnly: true });
+      }
+
+      workspaceItemClick.value = (payload) =>
+        store.dispatch(workspaces?.workspaceItemsClickAction, payload);
+    };
+
+    watch(configKey, onChangeConfigKey, { immediate: true });
+    watch(isShownBrandBlock, onChangeConfigKey);
+
+    return {
+      workspaceItems,
+      selectedWorkspaceName,
+      workspaceItemClick,
+      isShownBrandBlock,
+    };
+  },
+
+  computed: {
+    ...mapGetters("breakpoint", ["isMobileDevice"]),
+
+    logoPath() {
+      const { logoPath, mobileLogoPath } = this.layoutConfig;
+
+      return this.isMobileDevice && mobileLogoPath ? mobileLogoPath : logoPath;
+    },
+
+    logoRouteName() {
+      return this.layoutConfig.logoRouteName ? { name: this.layoutConfig.logoRouteName } : null;
+    },
+
+    menuItems() {
+      const items = [];
+      const addRoute = this.layoutConfig.brandBlock?.workspaces?.addRoute;
+      const listRoute = this.layoutConfig.brandBlock?.workspaces?.listRoute;
+
+      if (addRoute && !addRoute.isHidden) items.push(addRoute);
+      if (listRoute && !listRoute.isHidden) items.push(listRoute);
+
+      return items;
+    },
+
+    brandName() {
+      return this.isShownBrandNameDropdown
+        ? this.selectedWorkspaceName || ""
+        : this.layoutConfig.brandBlock.name || "";
+    },
+
+    firstWord() {
+      return this.brandName.split(" ")[0];
+    },
+
+    workspaces() {
+      return this.isShownBrandNameDropdown ? this.workspaceItems : [];
+    },
+
+    isShownBrandNameDropdown() {
+      return !!this.layoutConfig.brandBlock.workspaces;
+    },
+
+    isShownBrandBlockDropdown() {
+      return (this.isMobileDevice && this.workspaces.length) || !this.isMobileDevice;
+    },
+
+    icon() {
+      return this.modelValue ? "keyboard_arrow_up-fill" : "keyboard_arrow_down-fill";
+    },
+
+    iconColor() {
+      return this.isMobileDevice ? "gray" : "white";
+    },
+
+    brandBlockClass() {
+      return this.isMobileDevice ? "mobile-brand-block" : "brand-block";
+    },
+
+    avatarClass() {
+      return this.isMobileDevice ? "border-gray" : "border-white";
+    },
+
+    avatarSize() {
+      return this.isMobileDevice ? "lg" : "xs";
+    },
+
+    avatarRounded() {
+      return this.isMobileDevice ? "md" : "sm";
+    },
+  },
+
+  watch: {
+    "$route.name": "onChangeRoute",
+    "$route.params": "onChangeRoute",
+  },
+
+  async created() {
+    window.addEventListener("click", (event) => this.closeBrandBlock(event));
+  },
+
+  unmounted() {
+    window.removeEventListener("click", (event) => this.closeBrandBlock(event));
+  },
+
+  methods: {
+    ...mapMutations("layout", ["CLOSE_MOBILE_SUB_BLOCK"]),
+
+    async onClickBrandNameDropdownItem(workspaceSlug) {
+      this.CLOSE_MOBILE_SUB_BLOCK();
+
+      await this.workspaceItemClick({ workspaceSlug });
+    },
+
+    onChangeRoute() {
+      this.isShownBrandBlock = false;
+    },
+
+    onClickLogo() {
+      this.toggleBandBlock();
+    },
+
+    closeBrandBlock(event) {
+      if (!this.$el.contains(event.target) && !this.isMobileDevice) {
+        this.isShownBrandBlock = false;
+      }
+    },
+
+    onClickBrandWrapper() {
+      this.toggleBandBlock();
+    },
+
+    getColor(item) {
+      return item.color || "violet";
+    },
+
+    toggleBandBlock() {
+      if (this.isShownBrandBlockDropdown) this.isShownBrandBlock = !this.isShownBrandBlock;
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.brand {
+  @apply relative;
+
+  .brand-block {
+    @apply absolute left-12 top-0;
+    @apply h-auto min-w-[12.5rem];
+    @apply py-3;
+    @apply rounded-lg border border-gray-700 bg-gray-900;
+
+    .brand-name {
+      @apply px-5 pb-1;
+      @apply text-gray-200;
+    }
+
+    .line {
+      @apply h-px w-auto;
+      @apply mx-3 my-2;
+      @apply bg-gray-700;
+    }
+
+    .workspace-item {
+      @apply cursor-pointer;
+      @apply w-full;
+      @apply flex items-center space-x-3;
+      @apply px-5 py-1.5;
+      @apply text-sm text-gray-200;
+
+      &:hover {
+        @apply bg-white/5 md:rounded;
+      }
+    }
+
+    :deep(.sub-menu) {
+      .menu-item-link-block {
+        @apply space-x-3;
+        @apply px-5;
+
+        &:hover {
+          @apply bg-white/5 md:rounded;
+        }
+      }
+
+      .menu-item-link-text {
+        @apply text-sm text-white;
+        @apply py-1.5;
+      }
+
+      .menu-item-item-active {
+        @apply bg-white/5 md:rounded;
+      }
+    }
+  }
+
+  .mobile-brand-block {
+    @apply pt-3;
+
+    .line {
+      @apply h-px w-auto;
+      @apply mx-6 my-2;
+      @apply bg-gray-200;
+    }
+
+    .workspaces {
+      @apply text-sm text-gray-400;
+      @apply pb-1 pl-5;
+    }
+
+    .workspace-item {
+      @apply cursor-pointer;
+      @apply w-full;
+      @apply flex items-center space-x-3;
+      @apply px-5 py-2;
+      @apply font-medium text-gray-900;
+
+      &:hover {
+        @apply bg-gray-100 md:rounded;
+      }
+    }
+
+    .sub-menu {
+      .menu-item-link-block {
+        @apply space-x-4;
+        @apply px-5;
+
+        &:hover {
+          @apply bg-gray-100 md:rounded;
+        }
+      }
+
+      .menu-item-item-active {
+        @apply bg-white/5 md:rounded;
+      }
+    }
+  }
+
+  .brand-wrapper {
+    @apply relative;
+    @apply cursor-pointer;
+    @apply flex items-center space-x-3;
+    @apply px-5 py-2;
+    @apply font-medium text-gray-900;
+
+    &:hover {
+      @apply bg-gray-100;
+    }
+
+    .icon {
+      @apply absolute right-6;
+    }
+  }
+}
+</style>

package/layout.admin/ChangeThemeModal.vue

@@ -0,0 +1,179 @@
+<template>
+  <UModal v-model="isShownModal" class="change-theme-modal" width="xl" :title="i18n.themeSettings">
+    <div class="themes">
+      <div
+        v-for="(theme, index) of backgroundThemes"
+        :key="index"
+        class="theme"
+        :class="activeThemeClass(theme.full)"
+        :style="bgImage(theme.preview)"
+        @click="onClickTheme(theme.full)"
+      >
+        <div v-if="theme.full === activeTheme" class="icon-wrapper">
+          <UIcon name="check-fill" color="white" variant="light" size="xs" class="icon" />
+        </div>
+      </div>
+    </div>
+
+    <template #footer-left>
+      <UButton :text="i18n.close" @click="onClickCloseButton" />
+    </template>
+  </UModal>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+import I18nServiceDefault from "vueless/service.i18n";
+
+import UModal from "vueless/ui.container-modal";
+import UIcon from "vueless/ui.image-icon";
+import UButton from "vueless/ui.button";
+
+import layoutMixin from "./mixins";
+
+export default {
+  name: "ChangeThemeModal",
+
+  components: {
+    UModal,
+    UIcon,
+    UButton,
+  },
+
+  mixins: [layoutMixin],
+
+  setup() {
+    const { getTranslation } = new I18nServiceDefault();
+
+    return { getTranslation };
+  },
+
+  computed: {
+    ...mapState("layout", ["isShownThemeModal", "activeTheme", "defaultTheme"]),
+
+    isShownModal: {
+      get() {
+        return this.isShownThemeModal;
+      },
+      set(value) {
+        this.SET_SHOWN_THEME_MODAL(value);
+      },
+    },
+
+    backgroundThemes() {
+      const themes = Object.values(
+        import.meta.glob(`@/assets/images/themes/*.{png,jpg,jpeg,PNG,JPEG}`, {
+          eager: true,
+          as: "url",
+        }),
+      );
+
+      const themePreviews = Object.values(
+        import.meta.glob(`@/assets/images/themes/*_preview.{png,jpg,jpeg,PNG,JPEG}`, {
+          eager: true,
+          as: "url",
+        }),
+      );
+
+      if (!themes.length) {
+        return [this.defaultTheme];
+      }
+
+      const images = [];
+
+      themePreviews.forEach((preview) => {
+        const [themePath] = preview.split("_");
+        const full = themes.find((theme) => theme.includes(themePath));
+
+        images.push({ preview, full });
+      });
+
+      return images;
+    },
+
+    i18n() {
+      return {
+        themeSettings: this.getTranslation("themeSettings"),
+        close: this.getTranslation("close"),
+      };
+    },
+  },
+
+  watch: {
+    isShownModal: "onChangeShownModal",
+  },
+
+  methods: {
+    ...mapMutations("layout", ["SET_SHOWN_THEME_MODAL", "SET_ACTIVE_THEME", "SAVE_ACTIVE_THEME"]),
+
+    bgImage(image) {
+      return `background-image: url(${image});`;
+    },
+
+    activeThemeClass(theme) {
+      return theme === this.activeTheme ? "active-theme" : "";
+    },
+
+    onClickTheme(theme) {
+      this.SET_ACTIVE_THEME(theme);
+    },
+
+    onClickCloseButton() {
+      this.isShownModal = false;
+    },
+
+    onChangeShownModal() {
+      if (!this.isShownModal) this.SAVE_ACTIVE_THEME();
+    },
+  },
+};
+</script>
+
+<i18n>
+en:
+  themeSettings: Theme settings
+  close: Close
+ru:
+  themeSettings: Настройки темы
+  close: Закрыть
+ua:
+  themeSettings: Налаштування теми
+  close: Закрити
+</i18n>
+
+<style lang="postcss" scoped>
+.change-theme-modal {
+  .themes {
+    @apply grid grid-cols-4 gap-6;
+
+    .theme {
+      @apply h-[17.125rem] w-[10rem];
+      @apply rounded-lg border border-solid border-gray-200 bg-cover bg-center bg-gray-200;
+      @apply relative;
+      @apply cursor-pointer;
+
+      &:hover {
+        @apply border-gray-400;
+      }
+
+      &.active-theme {
+        @apply border-2 border-gray-600;
+
+        &:hover {
+          .icon-wrapper {
+            @apply bg-gray-700;
+          }
+        }
+      }
+
+      .icon-wrapper {
+        @apply absolute right-4 top-4;
+        @apply h-5 w-5;
+        @apply rounded-full bg-gray-900;
+        @apply flex items-center justify-center;
+        @apply cursor-pointer;
+      }
+    }
+  }
+}
+</style>

package/layout.admin/HelperBlock.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="helper-block">
+    <div class="icon-wrapper" @click="onClickHelperMenu">
+      <UIcon name="question_mark-fill" color="white" variant="light" size="sm" class="icon" />
+    </div>
+
+    <div v-if="isShownMenuBlock" class="menu-block">
+      <MainSubMenu class="sub-menu" :items="menuHelperItems" icon-color="white" show-icon />
+
+      <div v-if="menuHelperItems.length" class="line" />
+
+      <div class="project-info">{{ appName }} {{ appVersion }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UIcon from "vueless/ui.image-icon";
+import MainSubMenu from "./MainSubMenu.vue";
+
+import layoutMixin from "./mixins";
+
+export default {
+  name: "HelperBlock",
+
+  components: {
+    UIcon,
+    MainSubMenu,
+  },
+
+  mixins: [layoutMixin],
+
+  data() {
+    return {
+      isShownMenuBlock: false,
+    };
+  },
+
+  computed: {
+    routeName() {
+      return this.$route.name;
+    },
+
+    menuHelperItems() {
+      return this.layoutConfig.helperBlock.items;
+    },
+  },
+
+  watch: {
+    routeName: "onChangeRouteName",
+  },
+
+  created() {
+    window.addEventListener("click", (event) => this.closeMenuBlock(event));
+  },
+
+  unmounted() {
+    window.removeEventListener("click", (event) => this.closeMenuBlock(event));
+  },
+
+  methods: {
+    onChangeRouteName() {
+      this.isShownMenuBlock = false;
+    },
+
+    closeMenuBlock(event) {
+      if (!this.$el.contains(event.target)) {
+        this.isShownMenuBlock = false;
+      }
+    },
+
+    onClickHelperMenu() {
+      this.isShownMenuBlock = !this.isShownMenuBlock;
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.helper-block {
+  @apply relative;
+
+  .icon-wrapper {
+    @apply h-7 w-7;
+    @apply box-content rounded-full border-2  border-white bg-gray-900;
+    @apply flex items-center justify-center;
+    @apply cursor-pointer;
+
+    &:hover {
+      @apply bg-gray-700;
+    }
+  }
+
+  .menu-block {
+    @apply absolute bottom-0 right-10;
+    @apply h-auto w-[12.5rem];
+    @apply rounded-lg border border-gray-700 bg-gray-900;
+    @apply py-3;
+    @apply flex flex-col;
+
+    .line {
+      @apply h-px w-auto;
+      @apply mx-3 my-2;
+      @apply bg-gray-700;
+    }
+
+    :deep(.sub-menu) {
+      .menu-item-link-block {
+        @apply space-x-4;
+        @apply px-5;
+
+        &:hover {
+          @apply bg-white/5 md:rounded;
+        }
+      }
+
+      .menu-item-link-text {
+        @apply text-sm text-white;
+      }
+
+      .menu-item-item-active {
+        @apply bg-white/5 md:rounded;
+      }
+    }
+
+    .project-info {
+      @apply text-2xs text-gray-300;
+      @apply px-5 py-2;
+    }
+  }
+}
+</style>