vueless 0.0.2 → 0.0.4

package/layout.admin/MobileSubBlock.vue

@@ -1,171 +0,0 @@
-<template>
-  <div class="mobile-sub-block">
-    <template v-if="isShownBrandBlockComponent">
-      <BrandBlock v-model="isShownBrandBlock" class="brand-block" />
-
-      <div class="line" />
-    </template>
-
-    <div v-if="!isShownBrandBlock">
-      <MainSubMenu
-        v-for="(subItems, index) of allMenuSubItems"
-        :key="index"
-        class="sub-menu"
-        :items="subItems"
-      />
-
-      <MainSubMenu
-        v-if="menuItemsWithoutSubItems.length"
-        class="sub-menu"
-        :items="menuItemsWithoutSubItems"
-      />
-
-      <div v-if="menuItemsWithoutSubItems.length" class="line" />
-
-      <MainSubMenu class="sub-menu" :items="getMenuHelperItems()" show-icon />
-
-      <div class="line" />
-    </div>
-
-    <div>
-      <UserBlock />
-
-      <div class="footer">
-        <span>{{ appName }} {{ appVersion }}</span>
-
-        <div v-if="!newsRoute.isHidden" class="news" @click="onClickNews">
-          <UIcon :name="newsRoute.iconName" color="gray" variant="light" size="2xs" class="icon" />
-
-          <span>
-            {{ $t(newsRoute.translate) }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import BrandBlock from "./BrandBlock.vue";
-import MainSubMenu from "./MainSubMenu.vue";
-import UserBlock from "./UserBlock.vue";
-import UIcon from "vueless/ui.image-icon";
-
-import layoutMixin from "./mixins";
-
-export default {
-  name: "MobileSubBlock",
-
-  components: {
-    BrandBlock,
-    MainSubMenu,
-    UserBlock,
-    UIcon,
-  },
-
-  mixins: [layoutMixin],
-
-  data() {
-    return {
-      isShownBrandBlock: false,
-    };
-  },
-
-  computed: {
-    isShownBrandBlockComponent() {
-      return !this.layoutConfig.brandBlock.isHidden;
-    },
-
-    menuItems() {
-      return this.layoutConfig.mobileMainMenuItems() || this.layoutConfig.mainMenuItems();
-    },
-
-    allMenuSubItems() {
-      const subItems = [];
-
-      this.menuItems.forEach((item) => {
-        if (item.subItems && !item.isHidden) subItems.push(item.subItems());
-      });
-
-      return subItems;
-    },
-
-    menuItemsWithoutSubItems() {
-      const section = { translate: "sections._" };
-      const menuItems = this.menuItems.filter(
-        (item) => !item.isHidden && !item.subItems && !item.isShownOnMobileDock,
-      );
-
-      if (menuItems.length) menuItems.unshift(section);
-
-      return menuItems;
-    },
-
-    newsRoute() {
-      return this.layoutConfig.newsRoute;
-    },
-  },
-
-  watch: {
-    isShownBrandBlock: "getMenuHelperItems",
-  },
-
-  methods: {
-    getMenuHelperItems() {
-      let menuItems = [];
-
-      const helperBlock = this.layoutConfig?.helperBlock;
-      const settingsRoute = this.layoutConfig?.settingsRoute;
-
-      if (settingsRoute) {
-        menuItems.push(settingsRoute());
-      }
-
-      if (helperBlock) {
-        menuItems = [...menuItems, ...helperBlock.mobileItems];
-      }
-
-      return menuItems;
-    },
-
-    onClickNews() {
-      this.$router.push({ name: this.news.page });
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mobile-sub-block {
-  @apply h-full w-full;
-  @apply bg-gray-50;
-  @apply md:transition-all md:duration-500;
-  @apply py-4;
-  @apply overflow-y-auto;
-
-  .line {
-    @apply h-px w-auto;
-    @apply mx-6 my-4;
-    @apply bg-gray-200;
-  }
-
-  .sub-menu + .sub-menu {
-    @apply mt-6;
-  }
-
-  .footer {
-    @apply w-full;
-    @apply p-6;
-    @apply flex items-center justify-between;
-    @apply text-2xs text-gray-400;
-
-    .news {
-      @apply flex items-center space-x-1.5;
-
-      .icon {
-        @apply pb-0.5;
-      }
-    }
-  }
-}
-</style>

package/layout.admin/RightInfoBlock.vue

@@ -1,166 +0,0 @@
-<template>
-  <div class="right-info-block">
-    <div class="icon-wrapper" @click="onClickRightBlock">
-      <UIcon
-        v-if="configs?.iconName"
-        :name="configs.iconName"
-        color="white"
-        variant="light"
-        size="sm"
-        class="icon"
-      />
-    </div>
-
-    <div v-if="isShownInfoBlock" class="info-block" :class="infoBlockClass">
-      <div class="header">
-        <div v-if="configs.translate?.title" class="title">{{ $t(configs.translate.title) }}</div>
-        <UIcon
-          name="close"
-          color="white"
-          variant="light"
-          size="xs"
-          class="icon"
-          interactive
-          @click="onClickClose"
-        />
-      </div>
-      <UText v-if="configs.translate?.content" :html="$t(configs.translate.content)" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapMutations, mapState } from "vuex";
-
-import UIcon from "vueless/ui.image-icon";
-import UText from "vueless/ui.text-block";
-
-export default {
-  name: "RightInfoBlock",
-
-  components: {
-    UIcon,
-    UText,
-  },
-
-  data() {
-    return {
-      isShownInfoBlock: true,
-      defaultWidth: "md",
-    };
-  },
-
-  computed: {
-    ...mapState("layout", ["rightInfoBlockConfigs", "isFirstHideRightInfoBlock"]),
-
-    routeName() {
-      return this.$route.name;
-    },
-
-    infoBlockClass() {
-      const width = this.configs?.infoBlockWidth || this.defaultWidth;
-
-      return `info-block-width-${width}`;
-    },
-
-    configs() {
-      return this.rightInfoBlockConfigs;
-    },
-  },
-
-  watch: {
-    routeName: "getConfigs",
-
-    isShownInfoBlock: "onChangeShownInfoBlock",
-  },
-
-  created() {
-    if (this.isFirstHideRightInfoBlock) this.isShownInfoBlock = false;
-
-    window.addEventListener("click", (event) => this.closeMenuBlock(event));
-  },
-
-  unmounted() {
-    window.removeEventListener("click", (event) => this.closeMenuBlock(event));
-  },
-
-  methods: {
-    ...mapMutations("layout", ["SAVE_RIGHT_INFO_BLOCK_STATE"]),
-
-    closeMenuBlock(event) {
-      if (!this.$el.contains(event.target)) {
-        this.isShownInfoBlock = false;
-      }
-    },
-
-    onClickRightBlock() {
-      this.isShownInfoBlock = !this.isShownInfoBlock;
-    },
-
-    onClickClose() {
-      this.isShownInfoBlock = false;
-    },
-
-    onChangeShownInfoBlock() {
-      if (!this.isShownInfoBlock && !this.isFirstHideRightInfoBlock) {
-        this.SAVE_RIGHT_INFO_BLOCK_STATE();
-      }
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.right-info-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;
-    }
-  }
-
-  .info-block {
-    @apply absolute bottom-0 right-10;
-    @apply h-auto;
-    @apply rounded-lg border border-gray-700 bg-gray-900;
-    @apply p-4;
-    @apply flex flex-col;
-    @apply text-white;
-
-    .header {
-      @apply relative;
-      @apply h-4;
-      @apply mb-3;
-
-      .title {
-        @apply whitespace-nowrap text-sm;
-        @apply pr-8;
-      }
-
-      .icon {
-        @apply absolute right-0 top-0;
-      }
-    }
-  }
-}
-
-.info-block-width {
-  &-sm {
-    @apply w-[8.75rem];
-  }
-
-  &-md {
-    @apply w-[15rem];
-  }
-
-  &-lg {
-    @apply w-[21.25rem];
-  }
-}
-</style>

package/layout.admin/UserBlock.vue

@@ -1,290 +0,0 @@
-<template>
-  <div class="user-wrap">
-    <span v-if="!isMobileDevice && isProfilePageActive" class="user-block-circle" />
-
-    <UAvatar
-      class="user-avatar"
-      rounded="full"
-      bordered
-      :user-name="currentUserName || currentUserEmail"
-      :class="userAvatarClass"
-      data-cy="desktop-user-block"
-      @click="onClickAvatar"
-    />
-
-    <template v-if="isMobileDevice">
-      <div class="user-info" @click="onClickUserInfo">
-        <div data-cy="user-block-name" class="user-info-name">
-          {{ currentUserName || i18n.defaultCurrentUserName }}
-        </div>
-
-        <div class="user-info-email">
-          {{ currentUserEmail }}
-        </div>
-      </div>
-
-      <UIcon
-        name="logout"
-        class="logout-icon"
-        color="gray"
-        size="sm"
-        variant="light"
-        interactive
-        data-cy="logout-btn"
-        @click="onClickLogout"
-      />
-    </template>
-
-    <div v-if="isShownUserInfo && !isMobileDevice" class="user-block">
-      <div class="user-info" @click="onClickUserInfo">
-        <div data-cy="user-block-name" class="user-info-name">
-          {{ currentUserName || i18n.defaultCurrentUserName }}
-        </div>
-
-        <div class="user-info-email">
-          {{ currentUserEmail }}
-        </div>
-      </div>
-
-      <div class="line" />
-
-      <div class="user-logout" @click="onClickLogout">
-        <div>{{ $t("title.logout") }}</div>
-        <UIcon name="logout" color="white" size="xs" class="logout-icon" data-cy="logout-btn" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed, ref, watchEffect } from "vue";
-import { mapState, mapGetters, mapMutations, mapActions, useStore } from "vuex";
-import { layout } from "vueless/service.ui";
-import I18nServiceDefault from "vueless/service.i18n/index.js";
-
-import UIcon from "vueless/ui.image-icon";
-import UAvatar from "vueless/ui.image-avatar";
-
-import layoutMixin from "./mixins";
-
-export default {
-  name: "UserBlock",
-
-  components: {
-    UAvatar,
-    UIcon,
-  },
-
-  mixins: [layoutMixin],
-
-  setup() {
-    const store = useStore();
-
-    const currentUserName = ref("");
-    const currentUserEmail = ref("");
-    const logoutUser = ref(null);
-
-    const configKey = computed(() => store.state.layout.configKey);
-
-    watchEffect(() => {
-      const layoutConfig = layout.admin[configKey.value] || layout.admin;
-      const userBlock = layoutConfig.userBlock;
-
-      logoutUser.value = () => store.dispatch(userBlock?.logoutAction);
-
-      currentUserName.value = computed(() => store.getters[userBlock?.userNameGetter]).value;
-      currentUserEmail.value = computed(() => store.getters[userBlock?.userEmailGetter]).value;
-    });
-
-    const { getTranslation } = new I18nServiceDefault();
-
-    return {
-      getTranslation,
-      currentUserName,
-      currentUserEmail,
-      logoutUser,
-    };
-  },
-
-  data() {
-    return {
-      isShownUserInfo: false,
-    };
-  },
-
-  computed: {
-    ...mapState("layout", ["isOpenedAside"]),
-
-    ...mapGetters("breakpoint", ["isMobileDevice", "isTabletDevice"]),
-
-    isProfilePageActive() {
-      const routeName = this.layoutConfig.userBlock?.profileRouteName || "Profile";
-
-      return this.$route.name === routeName;
-    },
-
-    userAvatarClass() {
-      return (this.isProfilePageActive || this.isShownUserInfo) && !this.isMobileDevice
-        ? "active"
-        : "";
-    },
-
-    i18n() {
-      return {
-        defaultCurrentUserName: this.getTranslation("defaultCurrentUserName"),
-      };
-    },
-  },
-
-  watch: {
-    isOpenedAside: "onChangeAsideState",
-  },
-
-  created() {
-    window.addEventListener("click", (event) => this.closeUserBlock(event));
-  },
-
-  unmounted() {
-    window.removeEventListener("click", (event) => this.closeUserBlock(event));
-  },
-
-  methods: {
-    ...mapMutations("layout", ["CLOSE_ASIDE_SUB_BLOCK"]),
-
-    ...mapActions({
-      logout: () => {
-        return this.layoutConfig.userBlock?.logoutAction;
-      },
-    }),
-
-    onClickAvatar() {
-      this.isShownUserInfo = !this.isShownUserInfo;
-
-      if (this.isMobileDevice) this.onClickUserInfo();
-    },
-
-    onClickUserInfo() {
-      const routeName = this.layoutConfig.userBlock?.profileRouteName || "Profile";
-
-      this.isShownUserInfo = false;
-
-      if (this.$route.name !== routeName) this.$router.push({ name: routeName });
-    },
-
-    async onClickLogout() {
-      if (this.isTabletDevice) this.CLOSE_ASIDE_SUB_BLOCK();
-
-      await this.logoutUser();
-    },
-
-    onChangeAsideState() {
-      this.isShownUserInfo = false;
-    },
-
-    closeUserBlock(event) {
-      if (!this.$el.contains(event.target)) {
-        this.isShownUserInfo = false;
-      }
-    },
-  },
-};
-</script>
-
-<i18n>
-en:
-  defaultCurrentUserName: Name not specified
-ru:
-  defaultCurrentUserName: Имя не указано
-ua:
-  defaultCurrentUserName: Ім'я не вказано
-</i18n>
-
-<style lang="postcss" scoped>
-.user-wrap {
-  @apply relative;
-  @apply flex items-center;
-  @apply px-6 md:px-0;
-
-  .user-block-circle {
-    @apply absolute -left-2.5 top-3 z-30;
-    @apply h-1.5 w-1.5;
-    @apply rounded-full bg-black;
-  }
-
-  .user-avatar {
-    @apply cursor-pointer;
-
-    :deep(.gray) {
-      @apply bg-white;
-    }
-
-    .size-md {
-      @apply h-9 w-9 md:h-8 md:w-8;
-    }
-
-    &.active,
-    &:hover {
-      :deep(.gray) {
-        &.mono-avatar-border {
-          @apply border border-gray-900;
-        }
-      }
-    }
-  }
-
-  .user-block {
-    @apply flex flex-col space-y-2;
-    @apply absolute bottom-0 left-10;
-    @apply rounded-lg border border-gray-700 bg-gray-900;
-    @apply py-2;
-  }
-
-  .user-info {
-    @apply cursor-pointer;
-    @apply font-normal;
-    @apply w-full whitespace-nowrap;
-    @apply flex flex-col;
-    @apply px-3 py-1 md:px-5;
-
-    &:hover {
-      @apply text-white;
-      @apply bg-white/5;
-      @apply md:transition md:duration-100 ease-in-out;
-    }
-
-    &-name {
-      @apply text-base text-gray-600 md:text-gray-200;
-      @apply truncate;
-      @apply mb-0.5;
-    }
-
-    &-email {
-      @apply text-xs text-gray-400 md:text-gray-500/[85];
-      @apply truncate;
-    }
-  }
-
-  .line {
-    @apply h-px w-auto;
-    @apply mx-3 my-4;
-    @apply bg-gray-700;
-  }
-
-  .user-logout {
-    @apply cursor-pointer;
-    @apply flex items-center space-x-2;
-    @apply text-sm text-gray-200;
-    @apply px-5 py-1;
-
-    &:hover {
-      @apply text-white;
-      @apply bg-white/5;
-      @apply md:transition md:duration-100 ease-in-out;
-    }
-
-    .logout-icon {
-      @apply ml-3 flex items-center;
-    }
-  }
-}
-</style>