vueless 0.0.2 → 0.0.4

package/layout.admin/BrandBlock.vue

@@ -1,380 +0,0 @@
-<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

@@ -1,179 +0,0 @@
-<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

@@ -1,132 +0,0 @@
-<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>