vueless 0.0.2 → 0.0.3

package/ui.button-link/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.button-link/composables/attrs.composable.js

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

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

@@ -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 ULink = "ULink";

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

@@ -4,10 +4,11 @@ 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: {
-    text: "Link",
+    label: "Link",
   },
   argTypes: {
     ...getArgTypes(ULink.name),
@@ -31,7 +32,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
+const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { ULink, URow },
   setup() {
     return {
@@ -43,16 +44,37 @@ const ColorsTemplate = (args, { argTypes }) => ({
     <URow>
       <ULink
         v-for="(color, index) in colors"
+        v-bind="args"
         :color="color"
-        :text="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 }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { ULink, URow },
   setup() {
     return {
@@ -64,9 +86,9 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <ULink
         v-for="(size, index) in sizes"
-        :size="size"
-        :text="getText(size)"
         v-bind="args"
+        :size="size"
+        :label="getText(size)"
         :key="index"
       />
     </URow>
@@ -84,7 +106,7 @@ const SlotTemplate = (args) => ({
     return { args };
   },
   template: `
-    <ULink text="Test" v-bind="args">
+    <ULink>
       ${args.slotTemplate}
     </ULink>
   `,
@@ -93,20 +115,17 @@ const SlotTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
 export const colors = ColorsTemplate.bind({});
 colors.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const types = TypesTemplate.bind({});
+types.args = {};
 
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      <UButton variant="secondary" text="Text" />
-    </template>
-  `,
-};
+export const underlined = ColorsTemplate.bind({});
+underlined.args = { underlined: true, dashed: false };
 
 export const dashed = ColorsTemplate.bind({});
 dashed.args = { dashed: true };
@@ -114,8 +133,26 @@ dashed.args = { dashed: true };
 export const url = DefaultTemplate.bind({});
 url.args = { url: "https://storybook.js.org/docs/react/get-started/introduction" };
 
-export const urlTargetBlank = DefaultTemplate.bind({});
-urlTargetBlank.args = {
+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>
+  `,
+};