vueless 0.0.9 → 0.0.10

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

@@ -1,190 +0,0 @@
-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

@@ -1,120 +0,0 @@
-<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

@@ -1,31 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,5 +0,0 @@
-/*
-  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

@@ -1,112 +0,0 @@
-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

@@ -1,76 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-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/composables/attrs.composable.js

@@ -1,43 +0,0 @@
-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 } = useUI(defaultConfig, () => props.config);
-  const { title, description } = config.value;
-
-  const cvaTitle = cva({
-    base: title.base,
-    variants: title.variants,
-    compoundVariants: title.compoundVariants,
-  });
-
-  const cvaDescription = cva({
-    base: description.base,
-    variants: description.variants,
-    compoundVariants: description.compoundVariants,
-  });
-
-  const titleClasses = computed(() => cvaTitle({ size: props.size }));
-
-  const descriptionClasses = computed(() => cvaDescription({ size: props.size }));
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const headerAttrs = getAttrs("header");
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const footerAttrs = getAttrs("footer");
-  const titleAttrs = getAttrs("title", { classes: titleClasses });
-  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
-
-  return {
-    config,
-    titleAttrs,
-    descriptionAttrs,
-    wrapperAttrs,
-    headerAttrs,
-    footerAttrs,
-    iconAttrs,
-  };
-}

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

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

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

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