vueless 0.0.1

package/ui.text-header/index.stories.js

@@ -0,0 +1,110 @@
+import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+
+import UHeader from "vueless/ui.text-header";
+import URow from "vueless/ui.container-row";
+
+export default {
+  title: "Text & Content / Header",
+  component: UHeader,
+  args: {
+    text: "Header",
+  },
+  argTypes: {
+    ...getArgTypes(UHeader.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UHeader },
+  setup() {
+    const slots = getSlotNames(UHeader.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UHeader v-bind="args" />
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes }) => ({
+  components: { UHeader, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <UHeader
+        v-for="(color, index) in colors"
+        :color="color"
+        :text="color"
+        v-bind="args"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes }) => ({
+  components: { UHeader, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UHeader
+        v-for="(size, index) in sizes"
+        :size="size"
+        :text="getText(size)"
+        v-bind="args"
+        :key="index"
+      />
+    </URow>
+  `,
+  methods: {
+    getText(value) {
+      return `Header ${value}`;
+    },
+  },
+});
+
+const WeightTemplate = (args, { argTypes }) => ({
+  components: { UHeader, URow },
+  setup() {
+    return {
+      args,
+      weights: argTypes.weight.options,
+    };
+  },
+  template: `
+    <URow>
+      <UHeader
+        v-for="(weight, index) in weights"
+        :weight="weight"
+        :text="weight"
+        v-bind="args"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {};
+
+export const Underlined = SizesTemplate.bind({});
+Underlined.args = { underlined: true };
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
+export const Weights = WeightTemplate.bind({});
+Weights.args = {};

package/ui.text-header/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="mono-text-header" :class="headerClasses" :data-cy="dataCy">
+    {{ text }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UHeader",
+
+  props: {
+    /**
+     * Set text.
+     */
+    text: {
+      type: String,
+      default: "",
+    },
+
+    /**
+     * Set size.
+     * @values xs, sm, md, lg, xl, 2xl
+     */
+    size: {
+      type: String,
+      default: "md",
+    },
+
+    /**
+     * Set weight.
+     * @values regular, medium, bold
+     */
+    weight: {
+      type: String,
+      default: "medium",
+    },
+
+    /**
+     * Show bottom line.
+     */
+    underlined: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Text color.
+     * @values brand, gray, red, orange, yellow, green, blue, violet, fuchsia, black, white
+     */
+    color: {
+      type: String,
+      default: "gray",
+    },
+
+    /**
+     * Sets data-cy attribute for automated testing.
+     */
+    dataCy: {
+      type: String,
+      default: "",
+    },
+  },
+
+  computed: {
+    headerClasses() {
+      const size = `mono-text-header-size-${this.size}`;
+      const weight = `mono-text-header-weight-${this.weight}`;
+      const underline = this.underlined ? "mono-text-header-under-line" : "";
+      const color = `mono-text-header-color-${this.color}`;
+
+      return [size, weight, underline, color];
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.mono-text-header {
+  &-size {
+    &-xs {
+      @apply text-lg;
+    }
+
+    &-sm {
+      @apply text-xl;
+    }
+
+    &-md {
+      @apply text-2xl;
+    }
+
+    &-lg {
+      @apply text-3xl;
+    }
+
+    &-xl {
+      @apply text-4xl;
+    }
+
+    &-2xl {
+      @apply text-5xl;
+    }
+  }
+
+  &-under-line {
+    @apply border-b border-brand;
+
+    &.mono-text-header-size-xs {
+      @apply pb-1.5;
+    }
+
+    &.mono-text-header-size-sm {
+      @apply pb-2;
+    }
+
+    &.mono-text-header-size-md {
+      @apply pb-2;
+    }
+
+    &.mono-text-header-size-lg {
+      @apply pb-2.5;
+    }
+
+    &.mono-text-header-size-xl {
+      @apply pb-2.5;
+    }
+
+    &.mono-text-header-size-2xl {
+      @apply pb-3;
+    }
+  }
+
+  &-weight {
+    &-regular {
+      @apply font-normal;
+    }
+
+    &-medium {
+      @apply font-medium;
+    }
+
+    &-bold {
+      @apply font-bold;
+    }
+  }
+
+  &-color {
+    &-brand {
+      @apply text-brand;
+
+      &.mono-text-header-under-line {
+        @apply border-brand;
+      }
+    }
+
+    &-white {
+      @apply text-white;
+
+      &.mono-text-header-under-line {
+        @apply border-white;
+      }
+    }
+
+    &-black {
+      @apply text-gray-900;
+
+      &.mono-text-header-under-line {
+        @apply border-gray-900;
+      }
+    }
+
+    &-gray {
+      @apply text-gray-800;
+
+      &.mono-text-header-under-line {
+        @apply border-gray-800;
+      }
+    }
+
+    &-red {
+      @apply text-red-800;
+
+      &.mono-text-header-under-line {
+        @apply border-red-800;
+      }
+    }
+
+    &-orange {
+      @apply text-orange-800;
+
+      &.mono-text-header-under-line {
+        @apply border-orange-800;
+      }
+    }
+
+    &-yellow {
+      @apply text-yellow-800;
+
+      &.mono-text-header-under-line {
+        @apply border-yellow-800;
+      }
+    }
+
+    &-green {
+      @apply text-green-800;
+
+      &.mono-text-header-under-line {
+        @apply border-green-800;
+      }
+    }
+
+    &-blue {
+      @apply text-blue-800;
+
+      &.mono-text-header-under-line {
+        @apply border-blue-800;
+      }
+    }
+
+    &-violet {
+      @apply text-violet-800;
+
+      &.mono-text-header-under-line {
+        @apply border-violet-800;
+      }
+    }
+
+    &-fuchsia {
+      @apply text-fuchsia-800;
+
+      &.mono-text-header-under-line {
+        @apply border-fuchsia-800;
+      }
+    }
+  }
+}
+</style>

package/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/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/ui.text-money/index.stories.js

@@ -0,0 +1,263 @@
+import UMoney from "vueless/ui.text-money";
+import UIcon from "vueless/ui.image-icon";
+import URow from "vueless/ui.container-row";
+import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+
+const COMPONENT_CLASSES = "flex justify-center w-1/6";
+
+export default {
+  title: "Text & Content / Money",
+  component: UMoney,
+  args: {
+    sum: 10,
+    currencySymbol: "$",
+    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: require("vueless/ui.text-money/assets/debit.svg"),
+      Credit: require("vueless/ui.text-money/assets/credit.svg"),
+    };
+
+    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 :size="size" v-bind="args">
+          <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 :weight="weight" v-bind="args">
+          <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 :color="color" v-bind="args">
+          <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 :sign="sign" v-bind="args" >
+          <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.currencySymbolAlign.options,
+    };
+  },
+  template: `
+    <URow>
+      <div class="${COMPONENT_CLASSES}" v-for="(symbolAlign, index) in symbolsAlign" :key="index">
+        <UMoney
+          :currencySymbolAlign="symbolAlign"
+          v-bind="args"
+        >
+          <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,
+  currencySymbol: "$",
+  sign: "negative",
+};
+
+export const colors = ColorsTemplate.bind({});
+colors.args = {
+  sum: 0,
+  currencySymbol: "$",
+  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 currencySymbolAlign = SymbolAlignTemplate.bind({});
+currencySymbolAlign.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="gray"
+        variant="light"
+      />
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      <UIcon
+        :src="icons.Credit"
+        size="xs"
+        color="gray"
+        variant="light"
+      />
+    </template>
+  `,
+};