vueless 0.0.9 → 0.0.10

package/src/ui.text-money/index.vue

@@ -1,204 +0,0 @@
-<template>
-  <div v-bind="moneyAttrs">
-    <div v-if="hasSlotContent($slots['left'])" v-bind="slotLeftAttrs">
-      <!-- @slot Use it to add something before money amount. -->
-      <slot name="left" />
-    </div>
-
-    <div :data-cy="dataCy" v-bind="sumAttrs">
-      <span v-if="currencySymbolPosition.left" v-bind="symbolAttrs">
-        {{ symbol + currencySpace }}
-      </span>
-
-      <span v-if="sum">{{ typeSymbol }}</span>
-
-      <span>{{ preparedMoney.integer }}</span>
-
-      <span v-if="!integer" v-bind="pennyAttrs">
-        {{ preparedMoney.delimiter }}{{ preparedMoney.penny }}
-      </span>
-
-      <span v-if="currencySymbolPosition.right" v-bind="symbolAttrs">
-        {{ currencySpace + symbol }}
-      </span>
-    </div>
-
-    <div v-if="hasSlotContent($slots['right'])" v-bind="slotRightAttrs">
-      <!-- @slot Use it to add something after money amount. -->
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-
-import UIService from "../service.ui";
-
-import { UMoney } from "./constants";
-import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
-import { separatedMoney, MONEY_SIGN_TYPE } from "./services/money.services";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UMoney", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Set sum.
-   */
-  sum: {
-    type: Number,
-    default: 0,
-  },
-
-  /**
-   * Set currency symbol.
-   */
-  symbol: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Make sum planned (add brackets).
-   */
-  planned: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UMoney).default.planned,
-  },
-
-  /**
-   * Make sum integer.
-   */
-  integer: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UMoney).default.integer,
-  },
-
-  /**
-   * Set sign for sum.
-   * @values default, positive, negative
-   */
-  sign: {
-    type: String,
-    default: UIService.get(defaultConfig, UMoney).default.sign,
-  },
-
-  /**
-   * Set align for currency symbol.
-   * @values right, left
-   */
-  symbolAlign: {
-    type: String,
-    default: UIService.get(defaultConfig, UMoney).default.symbolAlign,
-  },
-
-  /**
-   * Set text size of sum.
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UMoney).default.size,
-  },
-
-  /**
-   * Set weight.
-   * @values regular, medium, bold
-   */
-  weight: {
-    type: String,
-    default: UIService.get(defaultConfig, UMoney).default.weight,
-  },
-
-  /**
-   * The color of the text money.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, UMoney).default.color,
-  },
-
-  /**
-   * Set the numeral decimal scale after the comma.
-   */
-  decimalScale: {
-    type: Number,
-    default: UIService.get(defaultConfig, UMoney).default.decimalScale,
-  },
-
-  /**
-   * Set the delimiter between integer and float (penny) parts.
-   */
-  delimiter: {
-    type: String,
-    default: UIService.get(defaultConfig, UMoney).default.delimiter,
-  },
-
-  /**
-   * Set align for money block.
-   * @values right, left
-   */
-  align: {
-    type: String,
-    default: UIService.get(defaultConfig, UMoney).default.align,
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  divided: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UMoney).default.divided,
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const {
-  sumAttrs,
-  pennyAttrs,
-  moneyAttrs,
-  slotLeftAttrs,
-  symbolAttrs,
-  slotRightAttrs,
-  hasSlotContent,
-} = useAttrs(props);
-
-const currencySymbolPosition = computed(() => {
-  return {
-    left: props.symbolAlign === "left",
-    right: props.symbolAlign === "right",
-  };
-});
-
-const currencySpace = computed(() => {
-  return props.divided ? " " : "";
-});
-
-const typeSymbol = computed(() => {
-  let type = "";
-
-  if (props.sign === MONEY_SIGN_TYPE.positive) type = "+";
-  if (props.sign === MONEY_SIGN_TYPE.negative) type = "–";
-
-  return type;
-});
-
-const preparedMoney = computed(() => {
-  return separatedMoney(Math.abs(props.sum), props.decimalScale, props.delimiter);
-});
-</script>

package/src/ui.text-money/services/money.services.js

@@ -1,24 +0,0 @@
-export const MONEY_SIGN_TYPE = {
-  default: "default",
-  positive: "positive",
-  negative: "negative",
-};
-
-export const ADD_SPACE_IN_MONEY_REG_EX = /(\d)(?=(\d{3})+(\D|$))/g;
-export const SINGLE_ZERO = "0";
-export const DOUBLE_ZERO = "00";
-
-export function separatedMoney(money, decimalPlaces = 2, delimiter = ",") {
-  const roundedMoney = money ? money.toFixed(decimalPlaces) : 0;
-
-  let [integer, penny] = String(roundedMoney).split(".");
-
-  integer = integer.replace(ADD_SPACE_IN_MONEY_REG_EX, "$1 ");
-
-  if (roundedMoney === 0) {
-    integer = SINGLE_ZERO;
-    penny = DOUBLE_ZERO;
-  }
-
-  return { integer, penny, delimiter };
-}

package/src/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/src/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;
-    },
-  },
-};