vueless 0.0.2 → 0.0.4

package/layout.admin/MainMenu.vue

@@ -1,234 +0,0 @@
-<template>
-  <perfect-scrollbar class="perfect-scrollbar">
-    <div class="menu-wrap">
-      <ul class="menu" :class="menuClass">
-        <template v-for="(item, index) in items">
-          <li
-            v-if="!item.isHidden"
-            :key="index"
-            :data-cy="`menu-link-${item.page}`"
-            class="menu-item"
-          >
-            <UDot v-if="checkActivePage(item)" class="menu-item-dot" color="black" />
-
-            <ULink
-              class="menu-item-link"
-              :url="item.link"
-              :target-blank="item.targetBlank"
-              :route="getRoute(item)"
-              no-focus-ring
-              @click="onClickItem(item)"
-            >
-              <template v-if="item.iconName">
-                <UIcon
-                  v-if="tooltip"
-                  class="menu-item-link-icon"
-                  :name="item.iconName"
-                  :interactive="getInteractive(item)"
-                  :tooltip="getTranslate(item.translate)"
-                  :tooltip-settings="tooltipSettings"
-                  :color="getColor(item)"
-                  variant="light"
-                  size="lg"
-                />
-
-                <span
-                  v-else
-                  class="menu-item-link-block"
-                  @mouseover="onMouseover(item)"
-                  @mouseleave="onMouseleave"
-                >
-                  <UIcon
-                    class="menu-item-link-icon"
-                    :name="item.iconName"
-                    :interactive="getInteractive(item)"
-                    :color="getColor(item)"
-                    variant="light"
-                    size="lg"
-                  />
-
-                  <UText
-                    class="menu-item-link-text"
-                    :class="getTextClass(item)"
-                    :html="getTranslate(item.translate)"
-                  />
-                </span>
-              </template>
-            </ULink>
-          </li>
-        </template>
-      </ul>
-    </div>
-  </perfect-scrollbar>
-</template>
-
-<script>
-import { mapGetters, mapMutations, mapState } from "vuex";
-import layoutMixin from "./mixins";
-
-import { PerfectScrollbar } from "vue3-perfect-scrollbar";
-import "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css";
-
-import UDot from "vueless/ui.other-dot";
-import ULink from "vueless/ui.button-link";
-import UIcon from "vueless/ui.image-icon";
-import UText from "vueless/ui.text-block";
-
-export default {
-  name: "MainMenu",
-
-  components: {
-    PerfectScrollbar,
-    UDot,
-    ULink,
-    UIcon,
-    UText,
-  },
-
-  mixins: [layoutMixin],
-
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-
-    tooltip: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      focusItem: {},
-      tooltipSettings: {
-        placement: "bottom",
-        arrow: false,
-        size: "small",
-        theme: "dark",
-        distance: 0.4,
-        duration: [0, 0],
-      },
-    };
-  },
-
-  computed: {
-    ...mapState("layout", ["isAnimation", "isOpenedAside"]),
-
-    ...mapGetters("breakpoint", ["isTabletDevice"]),
-
-    menuClass() {
-      return !this.tooltip ? "menu-without-tooltip" : "";
-    },
-  },
-
-  methods: {
-    ...mapMutations("layout", [
-      "ENABLE_ANIMATION",
-      "OPEN_ASIDE_SUB_BLOCK",
-      "TOGGLE_ASIDE_SUB_BLOCK",
-    ]),
-
-    getInteractive(item) {
-      return !this.checkActivePage(item);
-    },
-
-    getColor(item) {
-      return this.checkActivePage(item) || this.focusItem.page === item.page ? "black" : "gray";
-    },
-
-    getTranslate(translate) {
-      return this.$t(translate);
-    },
-
-    getTextClass(item) {
-      return this.checkActivePage(item) ? "menu-item-link-text-active" : "";
-    },
-
-    onMouseover(item) {
-      this.focusItem = item;
-    },
-
-    onMouseleave() {
-      this.focusItem = {};
-    },
-
-    onClickItem({ page, subItems }) {
-      const isActivePage = this.checkActivePage({ page, subItems });
-
-      if (!this.isAnimation) this.ENABLE_ANIMATION();
-
-      if (this.isTabletDevice && subItems) {
-        this.TOGGLE_ASIDE_SUB_BLOCK();
-
-        if (!this.checkCurrentPage(page) && !isActivePage) this.OPEN_ASIDE_SUB_BLOCK();
-      }
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.perfect-scrollbar {
-  @apply h-full;
-
-  .menu-wrap {
-    .menu {
-      @apply w-[4rem];
-      @apply flex flex-col items-center justify-center space-y-5;
-      @apply pt-3;
-
-      &-item {
-        @apply relative;
-
-        &-dot {
-          @apply absolute -left-2.5 top-3 z-30;
-        }
-
-        &-link {
-          @apply flex items-center;
-
-          &-icon {
-            :deep(.interactive) {
-              &:hover {
-                @apply text-gray-800 opacity-100;
-              }
-            }
-          }
-
-          &-block {
-            @apply flex flex-col items-center;
-
-            .menu-item-link-text {
-              @apply w-[2.938rem];
-              @apply text-center align-text-top text-2xs text-gray-400;
-              @apply break-all;
-
-              &-active {
-                @apply text-gray-900;
-              }
-            }
-
-            &:hover {
-              .menu-item-link-text {
-                @apply !text-gray-900;
-              }
-            }
-          }
-        }
-      }
-
-      &-without-tooltip {
-        .menu-item-dot {
-          @apply -left-[0.25rem] top-4;
-        }
-      }
-    }
-  }
-}
-
-:deep(.mono-link) {
-  @apply whitespace-normal;
-}
-</style>

package/layout.admin/MainSubMenu.vue

@@ -1,196 +0,0 @@
-<template>
-  <perfect-scrollbar class="perfect-scrollbar">
-    <div class="menu-wrap">
-      <ul class="menu">
-        <template v-for="(item, index) in items">
-          <li
-            v-if="item && !item.isHidden"
-            :key="index"
-            :data-cy="`menu-link-${item.page}`"
-            class="menu-item"
-            :class="getMenuItemClasses(item)"
-          >
-            <div v-if="!item.page && !item.link && item.isDivider" class="menu-item-link-line" />
-
-            <div
-              v-else-if="!item.page && !item.link"
-              :key="`key-${index}`"
-              class="menu-item-section"
-            >
-              <h5 class="menu-item-section-text">{{ $t(item.translate) }}</h5>
-            </div>
-
-            <ULink
-              v-else
-              class="menu-item-link"
-              :url="item.link"
-              :target-blank="item.targetBlank"
-              :route="getRoute(item)"
-              no-focus-ring
-              @click="onClickItem(item)"
-            >
-              <div class="menu-item-link-block">
-                <UIcon
-                  v-if="item.iconName && showIcon"
-                  :name="item.iconName"
-                  :color="iconColor"
-                  variant="light"
-                  size="sm"
-                  class="menu-item-link-icon"
-                />
-
-                <div class="menu-item-link-text">{{ $t(item.translate) }}</div>
-              </div>
-            </ULink>
-          </li>
-        </template>
-      </ul>
-    </div>
-  </perfect-scrollbar>
-</template>
-
-<script>
-import { mapGetters, mapMutations, mapState } from "vuex";
-import { PerfectScrollbar } from "vue3-perfect-scrollbar";
-import "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css";
-
-import { getBasePath } from "vueless/service.ui";
-import ULink from "vueless/ui.button-link";
-import UIcon from "vueless/ui.image-icon";
-
-import layoutMixin from "./mixins";
-
-export default {
-  name: "MainSubMenu",
-
-  components: {
-    PerfectScrollbar,
-    ULink,
-    UIcon,
-  },
-
-  mixins: [layoutMixin],
-
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-
-    showIcon: {
-      type: Boolean,
-      default: false,
-    },
-
-    iconColor: {
-      type: String,
-      default: "gray",
-    },
-
-    activeItem: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  computed: {
-    ...mapState("layout", ["isAnimation"]),
-
-    ...mapGetters("breakpoint", ["isTabletDevice", "isMobileDevice"]),
-  },
-
-  methods: {
-    ...mapMutations("layout", [
-      "ENABLE_ANIMATION",
-      "CLOSE_ASIDE_SUB_BLOCK",
-      "CLOSE_MOBILE_SUB_BLOCK",
-    ]),
-
-    getMenuItemClasses({ page }) {
-      const parentRoute = page ? this.$router.resolve({ name: page }).href : page;
-      const routePath = this.$route.path;
-      const path = `${getBasePath()}${routePath}`;
-
-      return {
-        "menu-item-active":
-          (this.checkCurrentPage(page) || path.includes(parentRoute)) && this.activeItem,
-      };
-    },
-
-    onClickItem({ page }) {
-      if (this.isTabletDevice) {
-        this.CLOSE_ASIDE_SUB_BLOCK();
-      }
-
-      if (this.checkCurrentPage(page) && this.isMobileDevice) this.CLOSE_MOBILE_SUB_BLOCK();
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.perfect-scrollbar {
-  @apply h-full;
-
-  .menu-wrap {
-    @apply overflow-y-auto;
-
-    .menu {
-      &-item {
-        &-section {
-          @apply px-6 py-2 md:px-4 md:pt-0;
-          @apply cursor-auto;
-
-          &-text {
-            @apply text-sm font-normal text-gray-400;
-          }
-        }
-
-        &-link {
-          @apply flex w-full cursor-pointer;
-
-          &:deep(a) {
-            @apply w-full;
-          }
-
-          &-block {
-            @apply w-full;
-            @apply flex items-center space-x-3;
-            @apply px-6 md:px-4;
-
-            &:hover {
-              @apply bg-gray-200/50 md:rounded-lg;
-              @apply text-gray-800;
-            }
-          }
-
-          &-text {
-            @apply flex items-center;
-            @apply py-2.5;
-            @apply text-base font-normal text-gray-600;
-            @apply overflow-hidden text-ellipsis whitespace-nowrap;
-          }
-
-          &-line {
-            @apply h-px w-auto;
-            @apply mx-3 my-2;
-            @apply bg-gray-700;
-          }
-        }
-      }
-
-      &-item-active {
-        @apply bg-gray-200 md:rounded-lg;
-
-        .menu-item-link-text {
-          @apply text-gray-800;
-        }
-      }
-
-      .menu-item + .menu-item {
-        @apply mt-px;
-      }
-    }
-  }
-}
-</style>

package/layout.admin/MobileMainMenu.vue

@@ -1,197 +0,0 @@
-<template>
-  <div class="menu-wrap">
-    <ul class="menu">
-      <template v-for="(item, index) in items">
-        <li
-          v-if="item.isShownOnMobileDock"
-          :id="`menu-link-${item.page}`"
-          :key="index"
-          :data-cy="`menu-link-${item.page}`"
-          class="menu-item"
-        >
-          <ULink
-            class="menu-item-link"
-            :url="item.link"
-            :target-blank="item.targetBlank"
-            :route="getRoute(item)"
-            no-focus-ring
-            @click="onClickItem(item)"
-          >
-            <div class="menu-item-link-block">
-              <UIcon
-                v-if="item.iconName"
-                class="menu-item-link-icon"
-                :name="item.iconName"
-                :interactive="getInteractive(item)"
-                :color="getColor(item)"
-                size="lg"
-                variant="light"
-              />
-
-              <span class="menu-item-link-text" :class="textClass(item)">
-                {{ $t(item.translate) }}
-              </span>
-            </div>
-          </ULink>
-        </li>
-      </template>
-
-      <li :data-cy="`menu-link-item-more`" class="menu-item">
-        <ULink class="menu-item-link" no-focus-ring @click="onClickItemMore">
-          <div class="menu-item-link-block">
-            <UIcon
-              class="menu-item-link-icon"
-              name="menu"
-              :interactive="getInteractive()"
-              :color="getMenuColor()"
-              variant="light"
-              size="lg"
-            />
-
-            <span class="menu-item-link-text" :class="getMenuTextClass()"> {{ i18n.more }} </span>
-          </div>
-        </ULink>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapMutations, mapState } from "vuex";
-import I18nServiceDefault from "vueless/service.i18n";
-
-import ULink from "vueless/ui.button-link";
-import UIcon from "vueless/ui.image-icon";
-
-import layoutMixin from "./mixins";
-
-const COLORS = {
-  default: "gray",
-  active: "black",
-};
-
-const ACTIVE_CLASS = "active";
-
-export default {
-  name: "MobileMainMenu",
-
-  components: {
-    ULink,
-    UIcon,
-  },
-
-  mixins: [layoutMixin],
-
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-  },
-
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
-
-    return { getTranslation };
-  },
-
-  computed: {
-    ...mapState("layout", ["isOpenedMobileSubBlock"]),
-
-    ...mapGetters("breakpoint", ["isTabletDevice"]),
-
-    isSettingsPage() {
-      return this.$route.path.includes("settings");
-    },
-
-    i18n() {
-      return {
-        more: this.getTranslation("more"),
-      };
-    },
-  },
-
-  methods: {
-    ...mapMutations("layout", ["OPEN_ASIDE", "CLOSE_MOBILE_SUB_BLOCK", "TOGGLE_MOBILE_SUB_BLOCK"]),
-
-    checkActiveItem(item) {
-      return item ? !this.checkActivePage(item) : !this.isOpenedMobileSubBlock;
-    },
-
-    getInteractive(item) {
-      return this.checkActiveItem(item);
-    },
-
-    getColor(item) {
-      return !this.checkActiveItem(item) ? COLORS.active : COLORS.default;
-    },
-
-    getMenuColor() {
-      return this.isSettingsPage ? COLORS.active : this.getColor();
-    },
-
-    getMenuTextClass() {
-      return this.isSettingsPage ? ACTIVE_CLASS : this.textClass();
-    },
-
-    textClass(item) {
-      return !this.checkActiveItem(item) ? ACTIVE_CLASS : "";
-    },
-
-    onClickItem() {
-      this.CLOSE_MOBILE_SUB_BLOCK();
-    },
-
-    onClickItemMore() {
-      this.TOGGLE_MOBILE_SUB_BLOCK();
-    },
-  },
-};
-</script>
-
-<i18n>
-en:
-  more: "More"
-ru:
-  more: "Еще"
-ua:
-  more: "Ще"
-</i18n>
-
-<style lang="postcss" scoped>
-.menu-wrap {
-  @apply w-full;
-  @apply pt-1;
-  @apply relative z-50;
-
-  .menu {
-    @apply flex items-center;
-
-    &-item {
-      @apply flex flex-grow items-center justify-center;
-
-      &-link {
-        &-block {
-          @apply flex flex-col items-center;
-        }
-
-        &-icon {
-          .interactive {
-            &:hover {
-              @apply text-gray-800 opacity-100;
-            }
-          }
-        }
-
-        &-text {
-          @apply text-2xs text-gray-400;
-        }
-
-        .active {
-          @apply text-gray-900;
-        }
-      }
-    }
-  }
-}
-</style>