vueless 0.0.2 → 0.0.4

package/layout.admin/store/index.js

@@ -1,167 +0,0 @@
-const DEFAULT_CONFIG_KEY = "instance";
-const ASIDE_BLOCK_STATE = "aside-block-state";
-const ASIDE_SUB_BLOCK_STATE = "aside-sub-block-state";
-const ASIDE_SUB_MENU = "aside-sub-menu";
-const ACTIVE_THEME = "active-theme";
-const RIGHT_INFO_BLOCK = "right-info-block";
-const LAST_OPENED_PAGE_NAME = "last-opened-page-name";
-
-import defaultThemeFull from "../images/abstract-01.jpg";
-import defaultThemePreview from "../images/abstract-01_preview.jpg";
-
-export default {
-  namespaced: true,
-
-  state: {
-    configKey: DEFAULT_CONFIG_KEY,
-    firstOpenedPageName: "",
-    isAnimation: false,
-    isOpenedAside: true,
-    isOpenedAsideSubBlock: false,
-    isOpenedMobileSubBlock: false,
-    isAsideSubMenu: false,
-    isShownThemeModal: false,
-    activeTheme: "",
-    infoBlockConfigs: null,
-    asideInfoBlockConfigs: null,
-    rightInfoBlockConfigs: null,
-    isFirstHideRightInfoBlock: false,
-    defaultTheme: {
-      full: defaultThemeFull,
-      preview: defaultThemePreview,
-    },
-  },
-
-  mutations: {
-    SET_CONFIG_KEY(state, name) {
-      state.configKey = name;
-    },
-
-    SET_FIRST_OPENED_PAGE_NAME(state, name) {
-      state.firstOpenedPageName = name;
-    },
-
-    ENABLE_ANIMATION(state) {
-      state.isAnimation = true;
-    },
-
-    OPEN_ASIDE(state) {
-      if (!state.isAnimation) state.isAnimation = true;
-      state.isOpenedAside = true;
-    },
-
-    CLOSE_ASIDE(state) {
-      if (!state.isAnimation) state.isAnimation = true;
-      state.isOpenedAside = false;
-    },
-
-    TOGGLE_ASIDE(state) {
-      if (!state.isAnimation) state.isAnimation = true;
-      state.isOpenedAside = !state.isOpenedAside;
-    },
-
-    OPEN_ASIDE_SUB_BLOCK(state) {
-      if (!state.isAnimation) state.isAnimation = true;
-      state.isOpenedAsideSubBlock = true;
-    },
-
-    CLOSE_ASIDE_SUB_BLOCK(state) {
-      if (!state.isAnimation) state.isAnimation = true;
-      state.isOpenedAsideSubBlock = false;
-    },
-
-    TOGGLE_ASIDE_SUB_BLOCK(state) {
-      if (!state.isAnimation) state.isAnimation = true;
-      state.isOpenedAsideSubBlock = !state.isOpenedAsideSubBlock;
-    },
-
-    CLOSE_MOBILE_SUB_BLOCK(state) {
-      state.isOpenedMobileSubBlock = false;
-    },
-
-    TOGGLE_MOBILE_SUB_BLOCK(state) {
-      state.isOpenedMobileSubBlock = !state.isOpenedMobileSubBlock;
-    },
-
-    SET_ASIDE_STATES(state) {
-      const asideBlockState = window.localStorage.getItem(ASIDE_BLOCK_STATE);
-      const asideSubBlockState = window.localStorage.getItem(ASIDE_SUB_BLOCK_STATE);
-      const asideSubMenuState = window.localStorage.getItem(ASIDE_SUB_MENU);
-      const lastOpenedPageName = window.localStorage.getItem(LAST_OPENED_PAGE_NAME);
-
-      if (!Number(asideBlockState) && !Number(asideSubBlockState) && !state.isAnimation) {
-        state.isAnimation = true;
-      }
-
-      if (asideBlockState !== null) {
-        state.isOpenedAside = Number(asideBlockState);
-      }
-
-      if (asideSubBlockState !== null) {
-        state.isOpenedAsideSubBlock = Number(asideSubBlockState);
-      }
-
-      if (asideSubMenuState !== null && lastOpenedPageName === state.firstOpenedPageName) {
-        state.isAsideSubMenu = Number(asideSubMenuState);
-      }
-    },
-
-    SAVE_ASIDE_STATES(state) {
-      window.localStorage.setItem(ASIDE_BLOCK_STATE, Number(state.isOpenedAside));
-      window.localStorage.setItem(ASIDE_SUB_BLOCK_STATE, Number(state.isOpenedAsideSubBlock));
-      window.localStorage.setItem(ASIDE_SUB_MENU, Number(state.isAsideSubMenu));
-    },
-
-    SAVE_LAST_OPENED_PAGE_NAME(state, name) {
-      window.localStorage.setItem(LAST_OPENED_PAGE_NAME, name);
-    },
-
-    SET_ASIDE_SUB_MENU(state, menuState) {
-      state.isAsideSubMenu = menuState;
-    },
-
-    SET_SHOWN_THEME_MODAL(state, shown) {
-      state.isShownThemeModal = shown;
-    },
-
-    SHOWN_THEME_MODAL(state) {
-      state.isShownThemeModal = true;
-    },
-
-    SET_ACTIVE_THEME(state, theme) {
-      const storedTheme = window.localStorage.getItem(ACTIVE_THEME);
-      const [defaultUserTheme] = Object.values(
-        import.meta.glob(`@/assets/images/themes/*.{png,jpg,jpeg,PNG,JPEG}`, {
-          eager: true,
-          as: "url",
-        }),
-      );
-
-      state.activeTheme = theme || storedTheme || defaultUserTheme || state.defaultTheme.full;
-    },
-
-    SAVE_ACTIVE_THEME(state) {
-      window.localStorage.setItem(ACTIVE_THEME, state.activeTheme);
-    },
-
-    SET_ASIDE_INFO_BLOCK_CONFIGS(state, configs) {
-      state.asideInfoBlockConfigs = configs;
-    },
-
-    SET_RIGHT_INFO_BLOCK_CONFIGS(state, configs) {
-      state.rightInfoBlockConfigs = configs;
-    },
-
-    SET_RIGHT_INFO_BLOCK_STATE(state) {
-      const isFirstHideRightInfoBlock = window.localStorage.getItem(RIGHT_INFO_BLOCK);
-
-      if (Number(isFirstHideRightInfoBlock)) {
-        state.isFirstHideRightInfoBlock = true;
-      }
-    },
-
-    SAVE_RIGHT_INFO_BLOCK_STATE() {
-      window.localStorage.setItem(RIGHT_INFO_BLOCK, Number(true));
-    },
-  },
-};

package/layout.auth/FeaturesBlock.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="features">
-    <h1 class="features-header" v-html="$t('layout.auth.heading')"></h1>
-
-    <div class="features-describe-wrap">
-      <div v-for="(feature, index) in features" :key="index" class="features-describe">
-        <UIcon class="icon" name="bolt" color="green" />
-
-        <h4 class="features-describe-text">
-          {{ feature }}
-        </h4>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  name: "FeaturesBlock",
-
-  components: {
-    UIcon,
-  },
-
-  data() {
-    return {
-      features: this.$tm("layout.auth.feature"),
-    };
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.features {
-  &-header {
-    @apply mb-10 text-5xl font-bold text-white;
-
-    :deep(span) {
-      @apply bg-gradient-to-br from-green-300 to-blue-300 bg-clip-text text-transparent;
-    }
-  }
-
-  &-describe-wrap {
-    @apply space-y-2.5;
-
-    .features-describe {
-      @apply flex items-center space-x-1;
-
-      &-text {
-        @apply text-base font-normal text-gray-400;
-      }
-    }
-  }
-}
-</style>

package/layout.auth/FooterMenu.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="menu-footer">
-    <div class="menu-footer-wrapper">
-      <div class="menu-footer-title">{{ appName }}</div>
-
-      <div class="menu-footer-version">{{ appVersion }}</div>
-    </div>
-
-    <div v-if="items.length" class="menu-footer-block">
-      <router-link v-for="(item, index) in items" :key="index" :to="{ name: item.page }">
-        <UIcon :tooltip="$t(item.translate)" class="menu-footer-icon" :name="item.iconName" />
-      </router-link>
-    </div>
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-
-const { name, version } = require("/package.json");
-
-export default {
-  name: "FooterMenu",
-
-  components: {
-    UIcon,
-  },
-
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
-
-    brandName: {
-      type: String,
-      default: "",
-    },
-  },
-
-  computed: {
-    appName() {
-      return name;
-    },
-
-    appVersion() {
-      return `v.${version}`;
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.menu-footer {
-  @apply flex items-center justify-between;
-  @apply space-x-4 overflow-hidden;
-
-  &-wrapper {
-    @apply flex items-end space-x-1;
-  }
-
-  &-title {
-    @apply text-sm font-normal text-gray-500/[85];
-  }
-
-  &-version {
-    @apply text-2xs font-normal text-gray-500/[85];
-    @apply mb-px;
-  }
-
-  &-block {
-    @apply flex space-x-3;
-  }
-
-  &-icon {
-    @apply block cursor-pointer;
-
-    &:deep(svg g [fill]) {
-      @apply text-violet-200/20;
-    }
-
-    &:hover {
-      &:deep(svg g [fill]) {
-        @apply text-violet-200/100;
-        @apply transition-all duration-200;
-      }
-    }
-  }
-}
-</style>

package/layout.auth/LanguageSwitcher.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="languages">
-    <h5
-      v-for="(language, index) in languages"
-      :key="index"
-      class="title"
-      :class="[titleClass, getActiveLanguageClass(language.code)]"
-      @click="onChangeLanguage(language.code)"
-    >
-      {{ language.slug }}
-    </h5>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-import I18nServiceDefault from "vueless/service.i18n";
-
-const I18nService = new I18nServiceDefault();
-
-export default {
-  name: "LanguageSwitcher",
-
-  props: {
-    /**
-     * Set component variant.
-     * @values light, dark
-     */
-    variant: {
-      type: String,
-      default: "light",
-    },
-  },
-
-  computed: {
-    ...mapState("user", ["languages"]),
-
-    titleClass() {
-      return `title-${this.variant}`;
-    },
-  },
-
-  methods: {
-    getActiveLanguageClass(language) {
-      const isActiveLanguage = I18nService.getActiveLanguage() === language;
-      const activeClass = `language-active-${this.variant}`;
-
-      return {
-        [activeClass]: isActiveLanguage,
-      };
-    },
-
-    onChangeLanguage(language) {
-      I18nService.setActiveLanguage(language);
-
-      window.location.reload();
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.languages {
-  @apply flex;
-  @apply space-x-3 divide-x divide-gray-500;
-
-  .title {
-    @apply text-sm font-medium text-gray-500;
-    @apply cursor-pointer pl-3;
-
-    &-light:hover {
-      @apply text-white;
-    }
-
-    &-dark:hover {
-      @apply text-gray-900;
-    }
-  }
-
-  .language-active {
-    &-light {
-      @apply text-white;
-    }
-
-    &-dark {
-      @apply text-gray-900;
-    }
-  }
-}
-</style>

package/layout.auth/index.vue

@@ -1,237 +0,0 @@
-<template>
-  <UViewport class="auth-layout" :class="layoutClasses">
-    <UTopLoader v-if="!isRenderingPage" z-index="50" />
-
-    <UNotify />
-
-    <div v-if="isShownFeatures" class="features-wrap">
-      <ULogo size="3xl" :path="featuresLogoPath" :label="logoLabel" />
-
-      <FeaturesBlock />
-
-      <div class="auth-layout-wrapper">
-        <LanguageSwitcher v-if="isShowLanguages" />
-
-        <FooterMenu v-if="menuItems" :items="menuItems" :brand-name="brandName" />
-      </div>
-    </div>
-
-    <main class="main" :class="mainClasses">
-      <ULogo :class="portableClass" size="3xl" :path="logoPath" :label="logoLabel" />
-
-      <div class="view-wrap">
-        <router-view />
-      </div>
-
-      <LanguageSwitcher v-if="isShowLanguages" :class="portableClass" variant="dark" />
-    </main>
-  </UViewport>
-</template>
-
-<script>
-import { isMobileApp, layout, removeOutlineFocus } from "vueless/service.ui";
-import { mapState } from "vuex";
-
-import UViewport from "vueless/layout-ui.viewport";
-import ULogo from "vueless/ui.image-logo";
-import UNotify from "vueless/layout-ui.notify";
-import UTopLoader from "vueless/layout-ui.loader-top";
-import LanguageSwitcher from "./LanguageSwitcher.vue";
-import FeaturesBlock from "./FeaturesBlock.vue";
-import FooterMenu from "./FooterMenu.vue";
-
-export default {
-  name: "AuthLayout",
-
-  components: {
-    UViewport,
-    ULogo,
-    UNotify,
-    UTopLoader,
-    LanguageSwitcher,
-    FeaturesBlock,
-    FooterMenu,
-  },
-
-  data() {
-    return {
-      isHiddenFeatures: true,
-    };
-  },
-
-  computed: {
-    ...mapState("loader", ["isRenderingPage"]),
-
-    isShowLanguages() {
-      return !layout.auth?.languages?.isHidden;
-    },
-
-    isShownFeatures() {
-      const features = layout.auth?.features;
-
-      return features ? !features?.isHidden : !this.isHiddenFeatures;
-    },
-
-    featuresLogoPath() {
-      return layout.auth?.features?.logoPath;
-    },
-
-    routeName() {
-      return this.$route.name;
-    },
-
-    logoPath() {
-      return layout.auth.logoPath;
-    },
-
-    logoLabel() {
-      const logoLabel = layout.auth.logoLabel;
-
-      if (!logoLabel) return;
-
-      if (typeof logoLabel === "string") {
-        return logoLabel;
-      }
-
-      return logoLabel.find((item) => item.routeNames.includes(this.routeName)).label;
-    },
-
-    layoutClasses() {
-      return {
-        "pwa-layout": isMobileApp,
-        "pr-none-lg": this.isShownFeatures,
-      };
-    },
-
-    mainClasses() {
-      return {
-        "rounded-r-none-lg features-l-rounded": this.isShownFeatures,
-      };
-    },
-
-    portableClass() {
-      return {
-        portable: this.isShownFeatures,
-      };
-    },
-
-    menuItems() {
-      return layout.auth.footerMenuItems;
-    },
-
-    brandName() {
-      return layout.auth.brandName;
-    },
-  },
-
-  created() {
-    this.setBodyBg();
-
-    removeOutlineFocus();
-  },
-
-  methods: {
-    setBodyBg() {
-      const body = document.querySelector("body");
-      const bodyClass = "auth-layout-theme-bg-default";
-
-      if (isMobileApp) {
-        const bodyPWAClass = `${bodyClass}-pwa`;
-
-        body.classList.add(bodyPWAClass);
-      }
-
-      body.classList.add(bodyClass);
-    },
-  },
-};
-</script>
-
-<style lang="postcss">
-@media screen and (display-mode: standalone) {
-  html,
-  body {
-    @apply bg-gray-800;
-  }
-}
-</style>
-
-<style lang="postcss" scoped>
-.auth-layout {
-  @apply flex h-full min-h-screen md:p-2;
-  @apply bg-gray-900;
-
-  &-wrapper {
-    @apply flex items-center justify-between;
-  }
-
-  .features-wrap {
-    @apply p-12;
-    @apply hidden w-full max-w-3xl flex-col justify-between lg:flex;
-  }
-
-  .main {
-    @apply flex w-full flex-col items-center md:justify-center;
-    @apply p-6 pt-[33%] md:pt-6 md:rounded-lg;
-    @apply bg-gray-50 !bg-cover bg-fixed bg-center;
-
-    .portable {
-      @apply lg:hidden;
-    }
-
-    .view-wrap {
-      @apply flex items-center justify-center;
-      @apply w-full md:py-10;
-
-      div {
-        @apply border-none;
-      }
-
-      :deep(.mono-card) {
-        @apply max-w-sm md:w-full md:max-w-[25rem];
-        @apply bg-transparent md:bg-white;
-        @apply shadow-none md:shadow;
-        @apply px-0 py-6 md:p-8;
-
-        .auth-title {
-          @apply text-center text-3xl font-bold text-gray-900;
-          @apply mb-6 md:mb-8;
-        }
-
-        .auth-link {
-          @apply mt-6 flex justify-center;
-          @apply text-sm font-normal text-gray-500 underline;
-        }
-      }
-
-      :deep(.mono-button) {
-        @apply mt-6 w-full md:mt-8;
-      }
-    }
-  }
-}
-
-.pwa-layout {
-  -webkit-user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-
-  .main {
-    @apply mt-safe-top;
-    @apply fixed inset-0 h-full overflow-auto;
-    @apply rounded-t-2xl;
-  }
-}
-
-.pr-none-lg {
-  @apply lg:pr-0;
-}
-
-.rounded-r-none-lg {
-  @apply lg:!rounded-r-none;
-}
-
-.features-l-rounded {
-  @apply lg:!rounded-l-2xl;
-}
-</style>