vueless 0.0.2 → 0.0.3

package/layout-ui.notify/index.stories.js

@@ -1,102 +0,0 @@
-import NotifyServiceDefault from "vueless/service.notify";
-
-import UNotify from "vueless/layout-ui.notify";
-import UButton from "vueless/ui.button";
-
-import { getArgTypes } from "vueless/service.storybook";
-
-const NotifyService = new NotifyServiceDefault();
-
-export default {
-  title: "Other / Notify",
-  component: UNotify,
-  args: {
-    type: "success",
-    code: "code",
-    title: "",
-    text: "",
-    duration: "short",
-    ignoreDuplicates: false,
-  },
-  argTypes: {
-    ...getArgTypes(UNotify.name),
-    type: {
-      description: "The type of notify.",
-      defaultValue: { summary: "success" },
-      options: ["success", "warning", "error"],
-      control: {
-        type: "radio",
-      },
-    },
-    code: {
-      description:
-        "Unique translation code, for ex. `categoryCreated`, " +
-        "which will be used in i18n translation path, for ex. `UNotify.success.categoryCreated`.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    title: {
-      description: "Notify title.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    text: {
-      description: "Notify text (description).",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    duration: {
-      description: "The notify visibility duration.",
-      defaultValue: { summary: "short" },
-      options: ["short", "medium", "long", "permanent"], //4000, 8000, 12000, 300000
-      control: {
-        type: "radio",
-      },
-    },
-    ignoreDuplicates: {
-      description: "Show only 1 notify at once.",
-      defaultValue: { summary: false },
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UNotify, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div>
-      <UNotify v-bind="args"/>
-
-      <UButton text="show notify" @click="onClick"/>
-    </div>
- `,
-
-  methods: {
-    onClick() {
-      const settings = {
-        type: args.type,
-        code: args.code,
-        title: args.title,
-        text: args.text,
-        duration: args.duration,
-        ignoreDuplicates: args.ignoreDuplicates,
-      };
-
-      NotifyService.notify(settings);
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/layout-ui.notify/index.vue

@@ -1,254 +0,0 @@
-<template>
-  <notifications
-    group="notify"
-    class="mono-notify !top-3 mt-safe-top !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
-    :position="position"
-  >
-    <template #body="{ item, close: onClickClose }">
-      <div :data-cy="`${item.type}-notify`" class="notify-body" :class="[item.type]">
-        <UIcon
-          v-if="isSuccessType"
-          data-cy="type-notify"
-          class="type-icon"
-          name="check_circle"
-          size="md"
-        />
-
-        <UIcon
-          v-else-if="isWarningType"
-          data-cy="type-notify"
-          class="type-icon"
-          name="warning"
-          size="md"
-        />
-
-        <UIcon
-          v-else-if="isErrorType"
-          data-cy="type-notify"
-          class="type-icon"
-          name="error"
-          size="md"
-        />
-
-        <div class="color-white w-full max-w-full px-3 text-sm text-gray-200">
-          <div v-if="item.title" class="mb-1 font-medium" v-text="$t(item.title)" />
-          <div
-            class="break-words font-normal leading-5"
-            v-html="prepareMessage(item.data.code, item.type, item.text)"
-          />
-        </div>
-
-        <UIcon
-          data-cy="close-notify"
-          class="icon icon-close"
-          name="close"
-          size="xs"
-          interactive
-          @click="onClickClose"
-        />
-      </div>
-    </template>
-  </notifications>
-</template>
-
-<script>
-import { globalComponentConfig } from "vueless/service.ui";
-import I18nServiceDefault from "vueless/service.i18n";
-
-import UIcon from "vueless/ui.image-icon";
-
-const NOTIFY_TYPE = {
-  success: "success",
-  warning: "warning",
-  error: "error",
-};
-
-export default {
-  name: "UNotify",
-  components: {
-    UIcon,
-  },
-
-  props: {
-    /**
-     * A position on the x-axis.
-     * @values left, center, right
-     */
-    xPosition: {
-      type: String,
-      default: "center",
-    },
-
-    /**
-     * A position on the y-axis.
-     * @values top, bottom
-     */
-    yPosition: {
-      type: String,
-      default: "top",
-    },
-  },
-
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
-
-    return { getTranslation };
-  },
-
-  data() {
-    return {
-      type: null,
-    };
-  },
-
-  computed: {
-    isSuccessType() {
-      return this.type === NOTIFY_TYPE.success;
-    },
-
-    isWarningType() {
-      return this.type === NOTIFY_TYPE.warning;
-    },
-
-    isErrorType() {
-      return this.type === NOTIFY_TYPE.error;
-    },
-
-    i18n() {
-      return {
-        message: this.getTranslation(`${this.type}.default`),
-      };
-    },
-
-    position() {
-      return [this.yPosition, this.xPosition];
-    },
-  },
-
-  created() {
-    window.addEventListener("resize", this.setPosition, { passive: true });
-  },
-
-  beforeUnmount() {
-    window.removeEventListener("resize", this.setPosition);
-  },
-
-  methods: {
-    prepareMessage(code, type, text) {
-      this.setPosition();
-
-      this.type = type;
-      const localPath = `${type}.${code}`;
-
-      if (text) {
-        return text;
-      }
-
-      return this.getTranslation(localPath) !== localPath
-        ? this.getTranslation(localPath)
-        : this.i18n.message;
-    },
-
-    setPosition() {
-      const classes = globalComponentConfig.UNotify?.positionClasses;
-      const pageWidth = classes?.page ? document.querySelector(classes.page)?.offsetWidth : 0;
-      const asideWidth = classes?.aside ? document.querySelector(classes.aside)?.offsetWidth : 0;
-      const notifyWidth = document.querySelector(".mono-notify")?.offsetWidth;
-
-      if (!pageWidth) return;
-
-      const leftShift = asideWidth + pageWidth / 2 - notifyWidth / 2;
-
-      document.querySelector(".mono-notify").style.setProperty("left", `${leftShift}px`);
-    },
-  },
-};
-</script>
-
-<i18n>
-en:
-  success:
-    default: "Operation successful."
-  error:
-    default: "Operation error."
-  warning:
-    default: "Operation warning."
-ru:
-  success:
-    default: "Произошла ошибка."
-  error:
-    default: "Операция успешна."
-  warning:
-    default: "Предупреждение."
-ua:
-  success:
-    default: "Операція успішна."
-  error:
-    default: "Сталася помилка."
-  warning:
-    default: "Попередження."
-</i18n>
-
-<style lang="postcss" scoped>
-.mono-notify {
-  :deep(.vue-notification-wrapper) {
-    @apply overflow-visible;
-  }
-
-  :deep(.notify-body) {
-    @apply rounded-2xl backdrop-blur-md;
-    @apply flex items-center;
-    @apply mb-3 p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] md:shadow-[0_0px_12px_rgba(0,0,0,0.25)];
-
-    .icon-close {
-      path {
-        @apply fill-current text-gray-400;
-      }
-    }
-  }
-
-  :deep(.warning) {
-    background: radial-gradient(
-      100.16% 500.78% at 0% 50%,
-      rgba(251, 146, 60, 0.2) 2.17%,
-      transparent
-    );
-
-    .type-icon path {
-      @apply fill-current text-orange-400;
-    }
-  }
-
-  :deep(.success) {
-    background: radial-gradient(
-      100.16% 500.78% at 0% 50%,
-      rgba(74, 222, 128, 0.1) 2.17%,
-      transparent
-    );
-
-    .type-icon path {
-      @apply fill-current text-green-400;
-    }
-  }
-
-  :deep(.error) {
-    background: radial-gradient(
-      100.16% 500.78% at 0% 50%,
-      rgba(251, 113, 133, 0.2) 2.17%,
-      transparent
-    );
-
-    .type-icon path {
-      @apply fill-current text-red-400;
-    }
-  }
-
-  /*
-    NOTE! This expression should be declared after all subclasses,
-    otherwise we will get gradient with white background
-  */
-  :deep(.notify-body) {
-    @apply bg-gray-900 bg-opacity-90;
-  }
-}
-</style>

package/layout-ui.viewport/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <slot :breakpoint="breakpoint" />
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "UViewport",
-
-  data() {
-    return {
-      windowWidth: 0,
-      breakpoint: "",
-    };
-  },
-
-  watch: {
-    windowWidth: {
-      immediate: true,
-      handler: "setBreakpoint",
-    },
-  },
-
-  mounted() {
-    this.setWindowWidth();
-    this.setListener();
-  },
-
-  methods: {
-    ...mapMutations("breakpoint", ["SET_BREAKPOINT"]),
-
-    setWindowWidth() {
-      this.windowWidth = window.innerWidth;
-    },
-
-    setListener() {
-      let timeout;
-
-      window.addEventListener(
-        "resize",
-        () => {
-          if (timeout) {
-            window.cancelAnimationFrame(timeout);
-          }
-
-          timeout = window.requestAnimationFrame(() => {
-            this.setWindowWidth();
-          });
-        },
-        { passive: true },
-      );
-    },
-
-    setBreakpoint(windowWidth) {
-      if (!windowWidth) return;
-
-      this.breakpoint = "xs";
-
-      if (windowWidth >= 640 && windowWidth < 768) {
-        this.breakpoint = "sm";
-      } else if (windowWidth >= 768 && windowWidth < 1024) {
-        this.breakpoint = "md";
-      } else if (windowWidth >= 1024 && windowWidth < 1280) {
-        this.breakpoint = "lg";
-      } else if (windowWidth >= 1280 && windowWidth < 1536) {
-        this.breakpoint = "xl";
-      } else if (windowWidth >= 1536) {
-        this.breakpoint = "2xl";
-      }
-
-      this.SET_BREAKPOINT(this.breakpoint);
-    },
-  },
-};
-</script>

package/layout-ui.viewport/store/index.js

@@ -1,47 +0,0 @@
-export default {
-  namespaced: true,
-
-  state: {
-    breakpoint: "",
-    mobileDevices: ["xs", "sm"],
-    portableDevices: ["xs", "sm", "md"],
-  },
-
-  getters: {
-    isLaptopDevice(state) {
-      const { breakpoint } = state;
-
-      return breakpoint === "lg";
-    },
-
-    isTabletDevice(state) {
-      const { breakpoint } = state;
-
-      return breakpoint === "md";
-    },
-
-    isMobileDevice(state) {
-      const { breakpoint, mobileDevices } = state;
-
-      return mobileDevices.includes(breakpoint);
-    },
-
-    isPortableDevice(state) {
-      const { breakpoint, portableDevices } = state;
-
-      return portableDevices.includes(breakpoint);
-    },
-
-    elementSize(state, getters) {
-      const { isMobileDevice } = getters;
-
-      return isMobileDevice ? "md" : "lg";
-    },
-  },
-
-  mutations: {
-    SET_BREAKPOINT(state, breakpoint) {
-      state.breakpoint = breakpoint;
-    },
-  },
-};