vueless 0.0.2 → 0.0.3

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

@@ -1,13 +1,14 @@
 import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 
 import UHeader from "vueless/ui.text-header";
-import URow from "vueless/ui.container-row";
+import UGroup from "vueless/ui.container-group";
 
 export default {
+  id: "4010",
   title: "Text & Content / Header",
   component: UHeader,
   args: {
-    text: "Header",
+    label: "Header",
   },
   argTypes: {
     ...getArgTypes(UHeader.name),
@@ -26,29 +27,29 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
-  components: { UHeader, URow },
+const WeightTemplate = (args, { argTypes } = {}) => ({
+  components: { UHeader, UGroup },
   setup() {
     return {
       args,
-      colors: argTypes.color.options,
+      weights: argTypes.weight.options,
     };
   },
   template: `
-    <URow>
+    <UGroup>
       <UHeader
-        v-for="(color, index) in colors"
-        :color="color"
-        :text="color"
-        v-bind="args"
+        v-for="(weight, index) in weights"
         :key="index"
+        v-bind="args"
+        :weight="weight"
+        :label="'Header ' + weight"
       />
-    </URow>
+    </UGroup>
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UHeader, URow },
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UHeader, UGroup },
   setup() {
     return {
       args,
@@ -56,55 +57,50 @@ const SizesTemplate = (args, { argTypes }) => ({
     };
   },
   template: `
-    <URow>
+    <UGroup>
       <UHeader
         v-for="(size, index) in sizes"
-        :size="size"
-        :text="getText(size)"
-        v-bind="args"
         :key="index"
+        v-bind="args"
+        :size="size"
+        :label="'Header ' + size"
       />
-    </URow>
+    </UGroup>
   `,
-  methods: {
-    getText(value) {
-      return `Header ${value}`;
-    },
-  },
 });
 
-const WeightTemplate = (args, { argTypes }) => ({
-  components: { UHeader, URow },
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UHeader, UGroup },
   setup() {
     return {
       args,
-      weights: argTypes.weight.options,
+      colors: argTypes.color.options,
     };
   },
   template: `
-    <URow>
+    <UGroup>
       <UHeader
-        v-for="(weight, index) in weights"
-        :weight="weight"
-        :text="weight"
+        v-for="(color, index) in colors"
         v-bind="args"
         :key="index"
+        :color="color"
+        :label="'Header ' + color"
       />
-    </URow>
+    </UGroup>
   `,
 });
 
 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 Weights = WeightTemplate.bind({});
+Weights.args = {};
 
 export const Sizes = SizesTemplate.bind({});
 Sizes.args = {};
 
-export const Weights = WeightTemplate.bind({});
-Weights.args = {};
+export const Underlined = SizesTemplate.bind({});
+Underlined.args = { underlined: true };
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {};

package/ui.text-header/index.vue

@@ -1,237 +1,83 @@
 <template>
-  <div class="mono-text-header" :class="headerClasses" :data-cy="dataCy">
-    {{ text }}
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <template v-if="label">
+      {{ label }}
+    </template>
+
+    <slot />
   </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",
-    },
+<script setup>
+import UIService from "vueless/service.ui";
 
-    /**
-     * Set weight.
-     * @values regular, medium, bold
-     */
-    weight: {
-      type: String,
-      default: "medium",
-    },
+import { UHeader } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-    /**
-     * Show bottom line.
-     */
-    underlined: {
-      type: Boolean,
-      default: false,
-    },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UHeader", inheritAttrs: 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: "",
-    },
+const props = defineProps({
+  /**
+   * Set label.
+   */
+  label: {
+    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];
-    },
+  /**
+   * Set size.
+   * @values xs, sm, md, lg, xl, 2xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UHeader).default.size,
   },
-};
-</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;
+  /**
+   * Set weight.
+   * @values regular, medium, bold
+   */
+  weight: {
+    type: String,
+    default: UIService.get(defaultConfig, UHeader).default.weight,
+  },
 
-      &.mono-text-header-under-line {
-        @apply border-blue-800;
-      }
-    }
+  /**
+   * Header color.
+   * @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, UHeader).default.color,
+  },
 
-    &-violet {
-      @apply text-violet-800;
+  /**
+   * Show the underline.
+   */
+  underlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UHeader).default.underlined,
+  },
 
-      &.mono-text-header-under-line {
-        @apply border-violet-800;
-      }
-    }
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-    &-fuchsia {
-      @apply text-fuchsia-800;
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-      &.mono-text-header-under-line {
-        @apply border-fuchsia-800;
-      }
-    }
-  }
-}
-</style>
+const { wrapperAttrs } = useAttrs(props);
+</script>

package/ui.text-money/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "vueless/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/ui.text-money/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/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/ui.text-money/configs/default.config.js

@@ -0,0 +1,69 @@
+export default /*tw*/ {
+  money: {
+    base: "whitespace-nowrap flex items-center text-{color}-600",
+    variants: {
+      align: {
+        left: "justify-start",
+        right: "justify-end",
+      },
+      weight: {
+        regular: "font-normal",
+        medium: "font-medium",
+        bold: "font-bold",
+      },
+      color: {
+        brand: "text-brand",
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+    },
+  },
+  slotLeft: "mr-2",
+  slotRight: "ml-2",
+  sum: {
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+      },
+      planned: {
+        true: "opacity-75 before:content-['('] after:content-[')']",
+      },
+    },
+  },
+  penny: {
+    variants: {
+      size: {
+        xs: "text-2xs",
+        sm: "text-xs",
+        md: "text-xs",
+        lg: "text-sm",
+        xl: "text-base",
+        "2xl": "text-lg",
+        "3xl": "text-xl",
+        "4xl": "text-2xl",
+      },
+    },
+  },
+  symbol: "",
+  defaultVariants: {
+    color: "grayscale",
+    size: "md",
+    sign: "default",
+    align: "right",
+    symbolAlign: "right",
+    weight: "regular",
+    decimalPlaces: 2,
+    delimiter: ",",
+    planned: false,
+    integer: false,
+    divided: true,
+  },
+  safelist: (colors) => [{ pattern: `text-(${colors})-600` }],
+};

package/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 = "+";