vueless 0.0.4 → 0.0.6

package/src/ui.text-badge/configs/default.config.js

@@ -0,0 +1,51 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "border border-solid rounded-full inline-block !leading-none",
+    variants: {
+      variant: {
+        primary: "bg-{color}-100 text-{color}-500 border-transparent",
+        secondary: "border-{color}-500 text-{color}-500",
+        thirdary: "text-{color}-500 border-transparent",
+      },
+      size: {
+        sm: "p-0.5 px-2 text-2xs",
+        md: "px-2 py-1 text-xs",
+        lg: "px-3 py-1.5 text-sm",
+      },
+      weight: {
+        regular: "font-normal",
+        medium: "font-medium",
+        bold: "font-bold",
+      },
+    },
+    compoundVariants: [
+      { color: "grayscale", variant: "primary", class: "bg-gray-100 text-gray-900" },
+      { color: "grayscale", variant: "secondary", class: "border-gray-900 text-gray-900" },
+      { color: "grayscale", variant: "thirdary", class: "text-gray-900" },
+      { color: "white", variant: "primary", class: "bg-white text-gray-900" },
+      { color: "white", variant: "secondary", class: "border-white text-white" },
+      { color: "white", variant: "thirdary", class: "text-white" },
+    ],
+  },
+  body: {
+    base: "flex items-center",
+    variants: {
+      size: {
+        sm: "space-x-1",
+        md: "space-x-1.5",
+        lg: "space-x-2",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    weight: "medium",
+    variant: "primary",
+  },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-100` },
+    { pattern: `border-(${colors})-500` },
+    { pattern: `text-(${colors})-500` },
+  ],
+};

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

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

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

@@ -0,0 +1,190 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UBadge from "../ui.text-badge";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+
+export default {
+  id: "4090",
+  title: "Text & Content / Badge",
+  component: UBadge,
+  args: {
+    label: "Badge",
+  },
+  argTypes: {
+    ...getArgTypes(UBadge.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UBadge },
+  setup() {
+    const slots = getSlotNames(UBadge.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UBadge v-bind="args">
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UBadge>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UBadge, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UBadge v-bind="args">
+      ${args.slotTemplate}
+    </UBadge>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UBadge, URow, UGroup },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <UGroup>
+      <URow v-for="(variant, index) in variants" :key="index">
+        <UBadge
+          v-for="(color, index) in colors"
+          v-bind="args"
+          :color="color"
+          :variant="variant"
+          :label="color"
+          :key="index"
+        />
+      </URow>
+    </UGroup>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UBadge, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UBadge
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :label="getText(size)"
+        :key="index"
+      />
+    </URow>
+  `,
+  methods: {
+    getText(value) {
+      return `badge ${value}`;
+    },
+  },
+});
+
+const WeightTemplate = (args, { argTypes } = {}) => ({
+  components: { UBadge, URow },
+  setup() {
+    return {
+      args,
+      weights: argTypes.weight.options,
+    };
+  },
+  template: `
+    <URow>
+      <UBadge
+        v-for="(weight, index) in weights"
+        v-bind="args"
+        :weight="weight"
+        :label="getText(weight)"
+        :key="index"
+      />
+    </URow>
+  `,
+  methods: {
+    getText(value) {
+      return `badge ${value}`;
+    },
+  },
+});
+
+const VariantsTemplate = (args, { argTypes } = {}) => ({
+  components: { UBadge, URow },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+    };
+  },
+  template: `
+    <URow>
+      <UBadge
+        v-for="(variant, index) in variants"
+        v-bind="args"
+        :variant="variant"
+        :label="getText(variant)"
+        :key="index"
+      />
+    </URow>
+  `,
+  methods: {
+    getText(value) {
+      return `badge ${value}`;
+    },
+  },
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Variants = VariantsTemplate.bind({});
+Variants.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
+export const Weight = WeightTemplate.bind({});
+Weight.args = {};
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      <UIcon
+        tooltip="tooltip text"
+        name="info"
+        size="xs"
+       />
+    </template>
+  `,
+};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      <UIcon
+        tooltip="tooltip text"
+        name="info"
+        size="xs"
+       />
+    </template>
+  `,
+};

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

@@ -0,0 +1,120 @@
+<template>
+  <div
+    tabindex="1"
+    :data-cy="dataCy"
+    v-bind="wrapperAttrs"
+    @blur="onBlur"
+    @focus="onFocus"
+    @keydown="onKeydown"
+    @click="onClick"
+  >
+    <div v-bind="bodyAttrs">
+      <!-- @slot Use it to add something before text. -->
+      <slot name="left" />
+
+      <!-- @slot Use it to add something instead of text. -->
+      <slot>
+        <div v-if="!hasSlotContent($slots['default'])">
+          {{ label }}
+        </div>
+      </slot>
+
+      <!-- @slot Use it to add something after text. -->
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+
+import { UBadge } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+import defaultConfig from "./configs/default.config";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UBadge", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   *  Badge label.
+   */
+  label: {
+    type: String,
+    required: true,
+    default: "",
+  },
+
+  /**
+   * Badge variant.
+   * @values primary, secondary, thirdary
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UBadge).default.variant,
+  },
+
+  /**
+   * Badge size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UBadge).default.size,
+  },
+
+  /**
+   * Badge font weight.
+   * @values regular, medium, bold
+   */
+  weight: {
+    type: String,
+    default: UIService.get(defaultConfig, UBadge).default.weight,
+  },
+
+  /**
+   * Badge 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, UBadge).default.color,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["focus", "keydown", "blur", "click"]);
+
+const { bodyAttrs, wrapperAttrs, hasSlotContent } = useAttrs(props);
+
+function onFocus() {
+  emit("focus");
+}
+
+function onBlur(event) {
+  emit("blur", event);
+}
+
+function onKeydown(event) {
+  emit("keydown", event);
+}
+
+function onClick(event) {
+  emit("click", event);
+}
+</script>

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

@@ -0,0 +1,31 @@
+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, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { wrapper } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      align: props.align,
+      size: props.size,
+      line: props.line,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+
+  return {
+    wrapperAttrs,
+    hasSlotContent,
+  };
+}

package/src/ui.text-block/configs/default.config.js

@@ -0,0 +1,35 @@
+export default /*tw*/ {
+  wrapper: {
+    base: `
+      space-y-4 font-normal leading-normal
+      [&_b]:font-bold [&_i]:italic [&_p]:font-normal
+      [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
+      [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
+      [&_ul]:font-normal [&_ol]:font-normal
+      [&_ul]:leading-[1.125rem] [&_ol]:leading-[1.125rem]
+      [&_ul]:list-inside [&_ol]:list-inside
+      [&_ul]:list-disc [&_ol]:list-decimal
+      [&_ul]:ml-2 [&_ol]:ml-2
+    `,
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+      },
+      line: {
+        true: "leading-none",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    align: "left",
+  },
+};

package/src/ui.text-block/constatns/index.js

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

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

@@ -0,0 +1,112 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UText from "../ui.text-block";
+import URow from "../ui.container-row";
+
+export default {
+  id: "4020",
+  title: "Text & Content / Text",
+  component: UText,
+  argTypes: {
+    ...getArgTypes(UText.name),
+  },
+  args: {
+    slotTemplate: `
+    <template #default>
+      <p>
+        <b>Lorem ipsum dolor sit amet</b><u>, consectetur adipiscing elit,
+        </u><em> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em>
+        <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+      </p>
+    </template>
+  `,
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UText },
+  setup() {
+    const slots = getSlotNames(UText.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UText v-bind="args" >
+      ${args.slotTemplate}
+    </UText>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UText, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UText
+        v-for="(size, index) in sizes"
+        :size="size"
+        v-bind="args"
+        :key="index"
+      >
+        ${args.slotTemplate}
+      </UText>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const paragraphs = DefaultTemplate.bind({});
+paragraphs.args = {
+  slotTemplate: `
+    <template #default>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+        culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+        culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </template>
+  `,
+};
+
+export const list = DefaultTemplate.bind({});
+list.args = {
+  slotTemplate: `
+     <template #default>
+       <URow>
+         <ul>
+           <li> Lorem ipsum dolor </li>
+           <li> Lorem ipsum dolor </li>
+           <li> Lorem ipsum dolor </li>
+         </ul>
+
+         <ol>
+           <li> Lorem ipsum dolor </li>
+           <li> Lorem ipsum dolor </li>
+           <li> Lorem ipsum dolor </li>
+         </ol>
+       </URow>
+     </template>
+  `,
+};

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

@@ -0,0 +1,76 @@
+<template>
+  <div v-bind="wrapperAttrs" :data-cy="dataCy">
+    <!-- @slot Use it to add something. -->
+    <div v-if="!hasSlotContent(slots['default'])" v-html="html" />
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { useSlots } from "vue";
+
+import UIService from "../service.ui";
+
+import { UText } from "./constatns";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UText" });
+
+const props = defineProps({
+  /**
+   * НTML markdown or plain text.
+   */
+  html: {
+    type: String,
+    default: undefined,
+  },
+
+  /**
+   * Text size.
+   * @values xs, sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UText).default.size,
+  },
+
+  /**
+   * Text align.
+   * @values left, center, right
+   */
+  align: {
+    type: String,
+    default: UIService.get(defaultConfig, UText).default.align,
+  },
+
+  /**
+   * Remove line height.
+   */
+  line: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UText).default.line,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const slots = useSlots();
+
+const { wrapperAttrs, hasSlotContent } = useAttrs(props);
+</script>

package/src/ui.text-empty/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-empty/configs/default.config.js

@@ -0,0 +1,30 @@
+export default /*tw*/ {
+  wrapper: "flex flex-col items-center justify-center size-full",
+  header: "mb-4 flex justify-center",
+  icon: "",
+  iconName: "emoji_food_beverage",
+  footer: "mt-4 flex justify-center",
+  title: {
+    base: "mb-2 font-medium text-center",
+    variants: {
+      size: {
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-xl",
+      },
+    },
+  },
+  description: {
+    base: "text-center",
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+};