vueless 0.0.4 → 0.0.6

package/src/ui.text-money/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/src/ui.text-money/assets/credit.svg

@@ -0,0 +1,7 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.02393 6.23718H9.33324V7.7577H1.02393V6.23718Z" fill="#6B7280"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.33362 10.5L0 6.99942L3.3337 3.5L4.35749 4.57534L2.04803 6.99965L4.35759 9.42486L3.33362 10.5Z" fill="#6B7280"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.67312 12.5247C7.68923 12.5486 8.69326 12.3064 9.58046 11.8234C10.4676 11.3405 11.2052 10.6345 11.7164 9.77917C12.2275 8.92383 12.4934 7.9506 12.4863 6.96109C12.4791 5.97152 12.1992 5.00204 11.6757 4.15382C11.1522 3.3056 10.4044 2.60979 9.51034 2.13904C8.61632 1.6683 7.60885 1.43991 6.59321 1.47772C5.57751 1.51553 4.5909 1.81815 3.7364 2.35398L2.91675 1.11505C3.99912 0.436327 5.24883 0.0530028 6.53534 0.00511245C7.82188 -0.042779 9.09798 0.246519 10.2305 0.842788C11.3629 1.43906 12.3101 2.32043 12.9732 3.39484C13.6363 4.46925 13.9908 5.69729 13.9999 6.95071C14.0089 8.20412 13.6722 9.43688 13.0247 10.5202C12.3773 11.6037 11.4429 12.4979 10.3192 13.1097C9.19551 13.7214 7.92367 14.0282 6.63661 13.998C5.34952 13.9677 4.09438 13.6016 3.00229 12.9377L3.80393 11.6877C4.66611 12.2118 5.657 12.5008 6.67312 12.5247Z" fill="#6B7280"/>
+  </g>
+</svg>

package/src/ui.text-money/assets/debit.svg

@@ -0,0 +1,12 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.46679 7.73942H0V6.26575H8.46679V7.73942Z" fill="#6B7280"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.11346 3.60791L9.51021 7.00061L6.11334 10.3922L5.07016 9.35005L7.42339 7.00044L5.07007 4.64994L6.11346 3.60791Z" fill="#6B7280"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49983 2.0743C8.56084 1.59729 7.50507 1.39789 6.45658 1.49954C5.40806 1.60119 4.4104 1.99967 3.58083 2.64813L2.67141 1.48763C3.72219 0.666243 4.98591 0.161507 6.31402 0.0327505C7.64215 -0.0960062 8.97944 0.156567 10.1688 0.760783C11.3581 1.365 12.3501 2.29575 13.0279 3.44363C13.7059 4.59152 14.0417 5.90882 13.9958 7.24074C13.9499 8.57261 13.5242 9.86376 12.7689 10.9624C12.0136 12.061 10.96 12.9215 9.73188 13.4426C8.50373 13.9638 7.15221 14.1239 5.83609 13.9043C4.51999 13.6847 3.29401 13.0944 2.30225 12.2028L3.28939 11.1074C4.07235 11.8113 5.04024 12.2774 6.07928 12.4507C7.11832 12.6242 8.18529 12.4977 9.15485 12.0863C10.1244 11.6748 10.9562 10.9955 11.5526 10.1282C12.1489 9.26088 12.4849 8.24157 12.5211 7.19005C12.5573 6.13853 12.2922 5.09856 11.757 4.19234C11.2218 3.28612 10.4388 2.55131 9.49983 2.0743Z" fill="#6B7280"/>
+  </g>
+  <defs>
+    <clipPath id="clip0">
+      <rect width="14" height="14" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/ui.text-money/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, hasSlotContent, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { money, sum, penny } = config.value;
+
+  const cvaMoney = cva({
+    base: money.base,
+    variants: money.variants,
+    compoundVariants: money.compoundVariants,
+  });
+
+  const cvaSum = cva({
+    base: sum.base,
+    variants: sum.variants,
+    compoundVariants: sum.compoundVariants,
+  });
+
+  const cvaPenny = cva({
+    base: penny.base,
+    variants: penny.variants,
+    compoundVariants: penny.compoundVariants,
+  });
+
+  const moneyClasses = computed(() =>
+    setColor(
+      cvaMoney({
+        align: props.align,
+        color: props.color,
+        weight: props.weight,
+      }),
+      props.color,
+    ),
+  );
+
+  const sumClasses = computed(() =>
+    cvaSum({
+      planned: props.planned,
+      size: props.size,
+    }),
+  );
+
+  const pennyClasses = computed(() => cvaPenny({ size: props.size }));
+
+  const moneyAttrs = getAttrs("money", { classes: moneyClasses });
+  const slotLeftAttrs = getAttrs("slotLeft");
+  const slotRightAttrs = getAttrs("slotRight");
+  const sumAttrs = getAttrs("sum", { classes: sumClasses });
+  const pennyAttrs = getAttrs("penny", { classes: pennyClasses });
+  const symbolAttrs = getAttrs("symbol");
+
+  return {
+    sumAttrs,
+    pennyAttrs,
+    moneyAttrs,
+    slotLeftAttrs,
+    symbolAttrs,
+    slotRightAttrs,
+    hasSlotContent,
+  };
+}

package/src/ui.text-money/constants/index.js

@@ -0,0 +1,7 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UMoney = "UMoney";
+export const SYMBOL_MINUS = "–";
+export const SYMBOL_PLUS = "+";

package/src/ui.text-money/index.stories.js

@@ -0,0 +1,265 @@
+import UMoney from "../ui.text-money";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+import DebitIcon from "../ui.text-money/assets/debit.svg?component";
+import CreditIcon from "../ui.text-money/assets/credit.svg?component";
+
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+const COMPONENT_CLASSES = "flex justify-center w-1/6";
+
+export default {
+  id: "4040",
+  title: "Text & Content / Money",
+  component: UMoney,
+  args: {
+    sum: 10,
+    symbol: "$",
+    sign: "positive",
+  },
+  argTypes: {
+    ...getArgTypes(UMoney.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UMoney },
+  setup() {
+    const slots = getSlotNames(UMoney.name);
+
+    return { args, slots };
+  },
+  template: `
+    <div class="${COMPONENT_CLASSES}">
+      <UMoney v-bind="args">
+        <template v-for="(slot) in slots" v-slot:[slot]>
+          <template v-if="args[slot]">{{ args[slot] }}</template>
+        </template>
+      </UMoney>
+    </div>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UMoney, UIcon },
+  setup() {
+    const icons = {
+      Debit: DebitIcon,
+      Credit: CreditIcon,
+    };
+
+    return { args, icons };
+  },
+  template: `
+    <div class="${COMPONENT_CLASSES}">
+      <UMoney v-bind="args">
+        ${args.slotTemplate}
+      </UMoney>
+    </div>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UMoney, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <div class="${COMPONENT_CLASSES}" v-for="(size, index) in sizes" :key="index">
+        <UMoney v-bind="args" :size="size" >
+          <template v-for="(slot) in slots" v-slot:[slot]>
+            <template v-if="args[slot]">{{ args[slot] }}</template>
+          </template>
+        </UMoney>
+      </div>
+    </URow>
+  `,
+});
+
+const WeightTemplate = (args, { argTypes } = {}) => ({
+  components: { UMoney, URow },
+  setup() {
+    return {
+      args,
+      weights: argTypes.weight.options,
+    };
+  },
+  template: `
+    <URow>
+     <div class="${COMPONENT_CLASSES}" v-for="(weight, index) in weights" :key="index">
+        <UMoney v-bind="args" :weight="weight" >
+          <template v-for="(slot) in slots" v-slot:[slot]>
+            <template v-if="args[slot]">{{ args[slot] }}</template>
+          </template>
+        </UMoney>
+      </div>
+    </URow>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UMoney, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <div class="${COMPONENT_CLASSES}"    v-for="(color, index) in colors" :key="index">
+        <UMoney v-bind="args" :color="color" >
+          <template v-for="(slot) in slots" v-slot:[slot]>
+            <template v-if="args[slot]">{{ args[slot] }}</template>
+          </template>
+        </UMoney>
+      </div>
+    </URow>
+  `,
+  created() {
+    this.mxArgTypes = argTypes;
+  },
+});
+
+const SignsTemplate = (args, { argTypes } = {}) => ({
+  components: { UMoney, URow },
+  setup() {
+    return {
+      args,
+      signs: argTypes.sign.options,
+    };
+  },
+  template: `
+    <URow>
+      <div class="${COMPONENT_CLASSES}" v-for="(sign, index) in signs" :key="index">
+        <UMoney v-bind="args" :sign="sign"  >
+          <template v-for="(slot) in slots" v-slot:[slot]>
+            <template v-if="args[slot]">{{ args[slot] }}</template>
+          </template>
+        </UMoney>
+      </div>
+    </URow>
+  `,
+  created() {
+    this.mxArgTypes = argTypes;
+  },
+});
+
+const SymbolAlignTemplate = (args, { argTypes } = {}) => ({
+  components: { UMoney, URow },
+  setup() {
+    return {
+      args,
+      symbolsAlign: argTypes.symbolAlign.options,
+    };
+  },
+  template: `
+    <URow>
+      <div class="${COMPONENT_CLASSES}" v-for="(symbolAlign, index) in symbolsAlign" :key="index">
+        <UMoney
+          v-bind="args"
+          :symbol-align="symbolAlign"
+        >
+          <template v-for="(slot) in slots" v-slot:[slot]>
+            <template v-if="args[slot]">{{ args[slot] }}</template>
+          </template>
+        </UMoney>
+      </div>
+    </URow>
+  `,
+  created() {
+    this.mxArgTypes = argTypes;
+  },
+});
+
+const AlignTemplate = (args, { argTypes } = {}) => ({
+  components: { UMoney, URow },
+  setup() {
+    return {
+      args,
+      aligns: argTypes.align.options,
+    };
+  },
+  template: `
+    <URow>
+      <div class="${COMPONENT_CLASSES}" v-for="(align, index) in aligns" :key="index">
+        <UMoney :align="align" v-bind="args" >
+          <template v-for="(slot) in slots" v-slot:[slot]>
+            <template v-if="args[slot]">{{ args[slot] }}</template>
+          </template>
+        </UMoney>
+      </div>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const otherValues = DefaultTemplate.bind({});
+otherValues.args = {
+  sum: 10,
+  symbol: "$",
+  sign: "negative",
+};
+
+export const colors = ColorsTemplate.bind({});
+colors.args = {
+  sum: 0,
+  symbol: "$",
+  sign: "default",
+};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const weights = WeightTemplate.bind({});
+weights.args = {};
+
+export const sign = SignsTemplate.bind({});
+sign.args = {};
+
+export const symbolAlign = SymbolAlignTemplate.bind({});
+symbolAlign.args = {};
+
+export const planned = DefaultTemplate.bind({});
+planned.args = { planned: true };
+
+export const integer = DefaultTemplate.bind({});
+integer.args = { integer: true };
+
+export const numeralDecimalScale3 = DefaultTemplate.bind({});
+numeralDecimalScale3.args = { numeralDecimalScale: 3 };
+
+export const align = AlignTemplate.bind({});
+align.args = {};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      <UIcon
+        :src="icons.Debit"
+        size="xs"
+        color="grayscale"
+      />
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      <UIcon
+        :src="icons.Credit"
+        size="xs"
+        color="gray"
+      />
+    </template>
+  `,
+};

package/src/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/src/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/src/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>