vueless 0.0.3 → 0.0.4

package/ui.button/index.vue

@@ -1,153 +0,0 @@
-<template>
-  <button :id="id" :disabled="disabled" :data-cy="dataCy" v-bind="buttonAttrs" @click="onClick">
-    <!-- @slot Use it to add something before text. -->
-    <slot v-if="!loading" name="left" />
-
-    <!-- @slot Use it to add something instead of text. -->
-    <slot v-if="!loading">
-      <div v-if="label" v-bind="textAttrs" v-text="label" />
-    </slot>
-
-    <ULoader v-if="loading" :size="size" color="white" />
-
-    <!-- @slot Use it to add something after text. -->
-    <slot v-if="!loading" name="right" />
-  </button>
-</template>
-
-<script setup>
-import UIService from "vueless/service.ui";
-import { getRandomId } from "vueless/service.ui";
-
-import ULoader from "vueless/ui.other-loader";
-
-import defaultConfig from "./configs/default.config";
-import { UButton } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UButton", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Button variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: UIService.get(defaultConfig, UButton).default.variant,
-  },
-
-  /**
-   * Fill the background for thirdary variant.
-   */
-  filled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.filled,
-  },
-
-  /**
-   * Button 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, UButton).default.color,
-  },
-
-  /**
-   * Button size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UButton).default.size,
-  },
-
-  /**
-   * Button label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Disable the button.
-   */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.disabled,
-  },
-
-  /**
-   * Make the Button fill the width with its container.
-   */
-  block: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.square,
-  },
-
-  /**
-   * Set button corners rounded.
-   */
-  pill: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.pill,
-  },
-
-  /**
-   * Set the same paddings for the button.
-   */
-  square: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.square,
-  },
-
-  /**
-   * Enable loader.
-   */
-  loading: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.loading,
-  },
-
-  /**
-   * Generates unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["click"]);
-
-const { textAttrs, buttonAttrs } = useAttrs(props);
-
-function onClick(event) {
-  if (props.disabled) return;
-
-  emit("click", event);
-
-  // TODO: Maybe this should be removed (need to test)
-  //document.getElementById(props.id).blur();
-}
-</script>

package/ui.button-link/Docs.mdx

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

@@ -1,99 +0,0 @@
-import { computed, useSlots } from "vue";
-
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/service.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props) {
-  const slots = useSlots();
-
-  const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
-  const { wrapper, link, text } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaLink = cva({
-    base: link.base,
-    variants: link.variants,
-    compoundVariants: link.compoundVariants,
-  });
-
-  const cvaText = cva({
-    base: text.base,
-    variants: text.variants,
-    compoundVariants: text.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        size: props.size,
-        color: props.color,
-        block: props.block,
-        noRing: props.noRing,
-        disabled: props.disabled,
-      }),
-      props.color,
-    ),
-  );
-
-  const linkClasses = computed(() =>
-    setColor(
-      cvaLink({
-        size: props.size,
-        color: props.color,
-        dashed: props.dashed,
-        underlined: props.underlined,
-      }),
-      props.color,
-    ),
-  );
-
-  const textClasses = computed(() => setColor(cvaText({ color: props.color }), props.color));
-
-  const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
-
-  const wrapperAttrs = computed(() => {
-    const hasDefaultSlot = hasSlotContent(slots["default"]);
-    const hasRightSlot = hasSlotContent(slots["right"]);
-    const hasLeftSlot = hasSlotContent(slots["left"]);
-
-    return {
-      ...wrapperAttrsRaw.value,
-      class: cx([
-        wrapperAttrsRaw.value.class,
-        (hasDefaultSlot || hasLeftSlot || hasRightSlot) && config.value.withSlots,
-      ]),
-    };
-  });
-
-  const linkAttrsRaw = getAttrs("link", { classes: linkClasses });
-
-  const linkAttrs = computed(() => {
-    const hasDefaultSlot = hasSlotContent(slots["default"]);
-
-    return {
-      ...linkAttrsRaw.value,
-      class: cx([linkAttrsRaw.value.class, hasDefaultSlot && config.value.withSlots]),
-    };
-  });
-
-  const rightSlotAttrs = getAttrs("rightSlot");
-  const leftSlotAttrs = getAttrs("leftSlot");
-  const textAttrs = getAttrs("text", { classes: textClasses });
-
-  return {
-    config,
-    hasSlotContent,
-    wrapperAttrs,
-    linkAttrs,
-    rightSlotAttrs,
-    leftSlotAttrs,
-    textAttrs,
-  };
-}

package/ui.button-link/configs/default.config.js

@@ -1,80 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: `
-      w-fit inline-flex rounded
-      transition duration-100 ease-in-out
-      focus-within:ring-4 focus-within:ring-{color}-500 focus-within:ring-opacity-15 focus-visible:outline-none
-    `,
-    variants: {
-      size: {
-        xs: "focus-within:ring-offset-2",
-        sm: "focus-within:ring-offset-2",
-        md: "focus-within:ring-offset-4",
-        lg: "focus-within:ring-offset-4",
-      },
-      color: {
-        grayscale: "focus-within:ring-gray-900/10",
-        white: "focus-within:ring-white/10",
-      },
-      disabled: {
-        true: "pointer-events-none opacity-70",
-      },
-      noRing: {
-        true: "focus-within:ring-0 focus-within:ring-offset-0",
-      },
-      block: {
-        true: "w-full",
-      },
-    },
-  },
-  link: {
-    base: `
-      w-full inline-block !leading-none
-      text-{color}-500 decoration-{color}-500 underline-offset-4
-      transition duration-100 ease-in-out
-      hover:text-opacity-80
-      active:text-opacity-70
-      focus:ring-offset-0 focus:ring-0
-    `,
-    variants: {
-      size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-      },
-      underlined: {
-        undefined: "hover:decoration-solid hover:underline",
-        true: "decoration-solid underline",
-        false: "no-underline",
-      },
-      color: {
-        grayscale: "decoration-gray-900 text-gray-900",
-        white: "decoration-white text-white",
-      },
-      dashed: {
-        true: "hover:decoration-dashed decoration-dashed",
-      },
-    },
-  },
-  text: "w-full",
-  withSlots: "flex items-center no-underline hover:no-underline focus-within:ring-offset-0 focus-within:ring-0",
-  leftSlot: "mr-1",
-  rightSlot: "ml-1",
-  defaultVariants: {
-    color: "brand",
-    type: "link",
-    size: "md",
-    underlined: undefined,
-    dashed: false,
-    inline: false,
-    noRing: false,
-    disabled: false,
-    targetBlank: false,
-  },
-  safelist: (colors) => [
-    { pattern: `decoration-(${colors})-500` },
-    { pattern: `text-(${colors})-500` },
-    { pattern: `ring-(${colors})-500`, variants: ["focus"] },
-  ],
-};

package/ui.button-link/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 ULink = "ULink";

package/ui.button-link/index.stories.js

@@ -1,158 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import ULink from "vueless/ui.button-link";
-import UButton from "vueless/ui.button";
-import URow from "vueless/ui.container-row";
-export default {
-  id: "1060",
-  title: "Buttons & Links / Link",
-  component: ULink,
-  args: {
-    label: "Link",
-  },
-  argTypes: {
-    ...getArgTypes(ULink.name),
-    route: { control: { type: "text" } },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { ULink },
-  setup() {
-    const slots = getSlotNames(ULink.name);
-
-    return { args, slots };
-  },
-  template: `
-    <ULink v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </ULink>
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { ULink, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULink
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        :label="color"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const TypesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULink, URow },
-  setup() {
-    return {
-      args,
-      types: argTypes.type.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULink
-        v-for="(type, index) in types"
-        v-bind="args"
-        :label="type"
-        :type="type"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULink, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULink
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :label="getText(size)"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `Link ${value}`;
-    },
-  },
-});
-
-const SlotTemplate = (args) => ({
-  components: { UButton, ULink },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ULink>
-      ${args.slotTemplate}
-    </ULink>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
-
-export const types = TypesTemplate.bind({});
-types.args = {};
-
-export const underlined = ColorsTemplate.bind({});
-underlined.args = { underlined: true, dashed: false };
-
-export const dashed = ColorsTemplate.bind({});
-dashed.args = { dashed: true };
-
-export const url = DefaultTemplate.bind({});
-url.args = { url: "https://storybook.js.org/docs/react/get-started/introduction" };
-
-export const route = DefaultTemplate.bind({});
-route.args = { name: "SomeRouterRouteName" };
-
-export const targetBlank = DefaultTemplate.bind({});
-targetBlank.args = {
-  url: "https://storybook.js.org/docs/react/get-started/introduction",
-  targetBlank: true,
-};
-
-export const disabled = DefaultTemplate.bind({});
-disabled.args = { disabled: true };
-
-export const noRing = DefaultTemplate.bind({});
-noRing.args = { noRing: true };
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      <UButton label="Text" />
-    </template>
-  `,
-};