vueless 0.0.10 → 0.0.12

package/ui.text-money/index.vue

@@ -0,0 +1,204 @@
+<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/ui.text-money/services/money.services.js

@@ -0,0 +1,24 @@
+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/ui.viewport/index.vue

@@ -0,0 +1,78 @@
+<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/ui.viewport/store/index.js

@@ -0,0 +1,47 @@
+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;
+    },
+  },
+};